🚀 Vite + React + Radix + styled-components

SystemEngineeringTeam · Jun 13, 2024 · fb48a24 · fb48a24
commit fb48a24
Show file tree

Hide file tree

Showing 48 changed files with 4,171 additions and 0 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,2 @@
+vite.config.mts
+src/vite-env.d.ts
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,63 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "airbnb",
+    "airbnb-typescript",
+    "standard-with-typescript",
+    "plugin:react/recommended",
+    "prettier"
+  ],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "project": [
+      "./tsconfig.json"
+    ]
+  },
+  "plugins": [
+    "react",
+    "unused-imports",
+    "react-refresh"
+  ],
+  "rules": {
+    "no-restricted-imports": [
+      "error",
+      {
+        "patterns": [
+          "../*"
+        ]
+      }
+    ],
+    "@typescript-eslint/consistent-type-definitions": [
+      "error",
+      "type"
+    ],
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-filename-extension": "off",
+    "react/jsx-uses-react": "off",
+    "no-underscore-dangle": "off",
+    "react/jsx-props-no-spreading": "off",
+    "import/no-extraneous-dependencies": [
+      "off"
+    ],
+    "react/no-unstable-nested-components": "off",
+    "react/jsx-sort-props": "warn",
+    "react/require-default-props": "off",
+    "import/prefer-default-export": "off",
+    "import/extensions": "off",
+    "import/no-unresolved": "off",
+    "import/order": [
+      "error",
+      {
+        "alphabetize": {
+          "order": "asc"
+        }
+      }
+    ],
+    "unused-imports/no-unused-imports": "error",
+    "react-refresh/only-export-components": "warn"
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,18 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "singleAttributePerLine": false,
+  "bracketSameLine": false,
+  "printWidth": 80,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,30 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "esachievement",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "fmt": "prettier --write ./src/",
+    "lint": "eslint --ext .ts,.tsx ./src"
+  },
+  "dependencies": {
+    "@fontsource-variable/noto-sans-jp": "^5.0.19",
+    "@generouted/react-router": "^1.19.3",
+    "@iconify/react": "^4.1.1",
+    "@radix-ui/themes": "^3.0.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.1",
+    "styled-components": "^6.1.11",
+    "the-new-css-reset": "^1.11.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "@vitest/ui": "^1.5.0",
+    "eslint": "^8.57.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^18.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-standard-with-typescript": "^43.0.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-n": "^17.2.1",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "eslint-plugin-unused-imports": "^3.1.0",
+    "prettier": "^3.2.5",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.0",
+    "vite-tsconfig-paths": "^4.3.2"
+  }
+}
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/assets/achievements.json b/src/assets/achievements.json
diff --git a/src/assets/members.json b/src/assets/members.json
diff --git a/src/assets/react.svg b/src/assets/react.svg
diff --git a/src/assets/unlockedAchievements.json b/src/assets/unlockedAchievements.json
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
diff --git a/src/components/List.tsx b/src/components/List.tsx
@@ -0,0 +1,33 @@
+import { Flex, Button, Text } from "@radix-ui/themes";
+import { type ReactElement, type ReactNode, useState } from "react";
+
+export function List({
+  children,
+  data,
+}: {
+  children: ReactNode;
+  data: any;
+}): ReactElement {
+  const [count, setCount] = useState(0);
+
+  return (
+    <>
+      <Flex direction="column" gap="2">
+        <Text>Hello This page is members</Text>
+        <Text>Count: {count}</Text>
+        <Button
+          onClick={() => {
+            setCount((prev) => prev + 1);
+          }}
+        >
+          Increment
+        </Button>
+      </Flex>
+      {data.map((item: any) => (
+        <Flex key={item.id} direction="column" gap="2">
+          {children} {/* ここでchildrenに引数を与えたい */}
+        </Flex>
+      ))}
+    </>
+  );
+}
diff --git a/src/components/Redirects.tsx b/src/components/Redirects.tsx
@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+
+export function Redirects({ children }: { children: ReactNode }): ReactNode {
+  // const { pathname } = useLocation();
+
+  return children;
+}
diff --git a/src/components/achievements/Card.tsx b/src/components/achievements/Card.tsx
@@ -0,0 +1,12 @@
+import { Text } from "@radix-ui/themes";
+import { type ReactElement } from "react";
+
+export function memberCard({ data }: { data: any }): ReactElement {
+  return (
+    <>
+      <Text>Hello This page is memberCard</Text>
+      <Text>{data.name}</Text>
+      <Text>{data.description}</Text>
+    </>
+  );
+}
diff --git a/src/components/achievements/FirstPenguin.tsx b/src/components/achievements/FirstPenguin.tsx
diff --git a/src/components/achievements/Info.tsx b/src/components/achievements/Info.tsx
diff --git a/src/components/achievements/PercentageGraph.tsx b/src/components/achievements/PercentageGraph.tsx
diff --git a/src/components/achievements/PercentageView.tsx b/src/components/achievements/PercentageView.tsx
diff --git a/src/components/member/Card.tsx b/src/components/member/Card.tsx
@@ -0,0 +1,12 @@
+import { Text } from "@radix-ui/themes";
+import { type ReactElement } from "react";
+
+export function MemberCard({ data }: { data: any }): ReactElement {
+  return (
+    <>
+      <Text>Hello This page is memberCard</Text>
+      <Text>{data.name}</Text>
+      <Text>{data.email}</Text>
+    </>
+  );
+}
diff --git a/src/components/member/Info.tsx b/src/components/member/Info.tsx
diff --git a/src/components/member/PercentageGraph.tsx b/src/components/member/PercentageGraph.tsx
diff --git a/src/components/member/PercentageView.tsx b/src/components/member/PercentageView.tsx
diff --git a/src/components/ranking/Filter.tsx b/src/components/ranking/Filter.tsx
diff --git a/src/components/ranking/FilteringCategory.tsx b/src/components/ranking/FilteringCategory.tsx
diff --git a/src/components/ranking/LogRecentUnlocked.tsx b/src/components/ranking/LogRecentUnlocked.tsx
diff --git a/src/main.tsx b/src/main.tsx
@@ -0,0 +1,7 @@
+import { Routes } from "@generouted/react-router";
+import { createRoot } from "react-dom/client";
+
+const root = document.getElementById("root");
+if (root == null) throw new Error("Root element not found");
+
+createRoot(root).render(<Routes />);
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -0,0 +1,34 @@
+import { Theme } from "@radix-ui/themes";
+import { type ReactElement } from "react";
+import { Outlet, useRouteError } from "react-router-dom";
+import styled from "styled-components";
+import { Redirects } from "@/components/Redirects";
+
+import "the-new-css-reset/css/reset.css";
+import "@radix-ui/themes/styles.css";
+import "@fontsource-variable/noto-sans-jp";
+import "@/styles/global.css";
+
+export function Catch(): ReactElement {
+  const error = useRouteError();
+
+  return <p>{JSON.stringify(error)}</p>;
+}
+
+export default function Layout(): ReactElement {
+  const Main = styled.main`
+    font-family: "Noto Sans JP Variable";
+    background-color: #aaa;
+    word-break: keep-all;
+  `;
+
+  return (
+    <Theme>
+      <Main>
+        <Redirects>
+          <Outlet />
+        </Redirects>
+      </Main>
+    </Theme>
+  );
+}
diff --git a/src/pages/achievements/[id]/index.tsx b/src/pages/achievements/[id]/index.tsx
diff --git a/src/pages/achievements/index.tsx b/src/pages/achievements/index.tsx
@@ -0,0 +1,23 @@
+import { type ReactElement } from "react";
+import { List } from "@/components/List";
+import { MemberCard } from "@/components/member/Card";
+
+export function Page(): ReactElement {
+  const achievementsTestData = [
+    {
+      id: 1,
+      name: "John Doe",
+      description: "",
+    },
+    {
+      id: 2,
+      name: "Jane Doe",
+      description: "",
+    },
+  ];
+  return (
+    <List data={achievementsTestData}>
+      <MemberCard data={undefined} />
+    </List>
+  );
+}
diff --git a/src/pages/create/index.tsx b/src/pages/create/index.tsx
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -0,0 +1,20 @@
+import { Flex, Button, Text } from "@radix-ui/themes";
+import { type ReactElement, useState } from "react";
+
+export default function App(): ReactElement {
+  const [count, setCount] = useState(0);
+
+  return (
+    <Flex direction="column" gap="2">
+      <Text>Hello from Radix Themes :)</Text>
+      <Text>Count: {count}</Text>
+      <Button
+        onClick={() => {
+          setCount((prev) => prev + 1);
+        }}
+      >
+        Increment
+      </Button>
+    </Flex>
+  );
+}
diff --git a/src/pages/members/[id]/index.tsx b/src/pages/members/[id]/index.tsx
diff --git a/src/pages/members/index.tsx b/src/pages/members/index.tsx
@@ -0,0 +1,23 @@
+import { type ReactElement } from "react";
+import { List } from "@/components/List";
+import { MemberCard } from "@/components/member/Card";
+
+export function Page(): ReactElement {
+  const membersTestData = [
+    {
+      id: 1,
+      name: "John Doe",
+      email: "[email protected]",
+    },
+    {
+      id: 2,
+      name: "Jane Doe",
+      email: "[email protected]",
+    },
+  ];
+  return (
+    <List data={membersTestData}>
+      <MemberCard data={undefined} />
+    </List>
+  );
+}
diff --git a/src/pages/ranking/index.tsx b/src/pages/ranking/index.tsx
diff --git a/src/pages/unlocked/index.tsx b/src/pages/unlocked/index.tsx