Merge pull request #1 from tabi-memo/front_setup

Front Setup

.eslintignore

@@ -0,0 +1,14 @@
+# config
+.eslintrc.js
+prettier.config.js
+next.config.js
+tailwind.config.js
+tsconfig.json
+postcss.config.js
+
+# build dir
+build/
+bin/
+obj/
+out/
+.next/

.eslintrc.json

@@ -0,0 +1,60 @@
+{
+  "extends": [
+    "next/core-web-vitals",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "prettier",
+    "plugin:storybook/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": [
+      "./tsconfig.json"
+    ]
+  },
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "rules": {
+    "import/order": [
+      "error",
+      {
+        "groups": [
+          "builtin",
+          "external",
+          "parent",
+          "sibling",
+          "index",
+          "object",
+          "type"
+        ],
+        "pathGroups": [
+          {
+            "pattern": "react**",
+            "group": "builtin",
+            "position": "before"
+          },
+          {
+            "pattern": "@/**",
+            "group": "parent",
+            "position": "before"
+          },
+          {
+            "pattern": "{@/components/**, @/hooks/**, @/utils/**, @/const/**, @/type/**}",
+            "group": "parent",
+            "position": "before"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": [
+          "builtin"
+        ],
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }
+    ]
+  }
+}

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,13 @@
+# Description
+*
+
+Fixes # (issue)
+
+## Type of change
+
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] This change requires a documentation update
+
+## Screenshot

.github/workflows/lint.yml

@@ -0,0 +1,33 @@
+name: Lint and Format
+
+on: [push]
+
+jobs:
+  run-linters:
+    name: Run linters
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.16.0'
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Install Node.js dependencies
+        run: |
+          pnpm i --frozen-lockfile
+          pnpm lint
+          pnpm format
+
+      - name: Use reviewdog eslint
+        uses: reviewdog/action-eslint@v1
+        with:
+          reporter: github-check

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.prettierignore

@@ -0,0 +1,20 @@
+# Ignore artifacts:
+build
+coverage
+yarn.lock
+
+# dotfile
+.env*
+
+# markdown
+*.md
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# yarn
+/.yarn/

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true
+}

.storybook/main.ts

@@ -0,0 +1,37 @@
+const path = require('path')
+const toPath = (_path) => path.join(process.cwd(), _path)
+
+module.exports = {
+  stories: ['../app/components/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+    '@chakra-ui/storybook-addon'
+  ],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {}
+  },
+  docs: {
+    autodocs: 'tag'
+  },
+  core: {
+    builder: 'webpack5'
+  },
+  webpackFinal: async (config) => {
+    return {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...config.resolve.alias,
+          // '@emotion/core': toPath('node_modules/@emotion/react'),
+          // 'emotion-theming': toPath('node_modules/@emotion/react'),
+          '@': path.resolve(__dirname, '../app')
+        }
+      }
+    }
+  },
+}

.storybook/preview.ts

@@ -0,0 +1,19 @@
+import type { Preview } from '@storybook/react'
+import { customTheme } from '../app/theme'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    },
+    chakra: {
+      customTheme
+    }
+  }
+}
+
+export default preview

README.md

@@ -1,2 +1,42 @@
 # Frontend repository for Tabi-memo
 
+## Command
+
+Run development
+
+```bash
+pnpm dev
+```
+
+Install dependencies
+
+```bash
+pnpm install
+```
+
+Run lint
+
+```bash
+pnpm lint
+```
+
+Run format
+
+```bash
+pnpm format:fix
+```
+
+Run storybook
+
+```bash
+pnpm storybook
+```
+
+
+
+## URL
+### Development
+[http://localhost:3000](http://localhost:3000)
+
+### Storybook
+[http://localhost:6006](http://localhost:6006)

app/Providers.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { CacheProvider } from '@chakra-ui/next-js'
+import { ChakraProvider } from '@chakra-ui/react'
+import { Roboto } from 'next/font/google'
+import { customTheme } from '@/theme'
+
+const roboto = Roboto({
+  weight: ['400', '500', '700'],
+  style: ['normal', 'italic'],
+  subsets: ['latin'],
+  display: 'swap'
+})
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <style jsx global>
+        {`
+          :root {
+            --font-rubik: ${roboto.style.fontFamily};
+          }
+        `}
+      </style>
+      <CacheProvider>
+        <ChakraProvider theme={customTheme}>{children}</ChakraProvider>
+      </CacheProvider>
+    </>
+  )
+}

app/auth/login/page.tsx

@@ -0,0 +1,5 @@
+import { Heading } from '@chakra-ui/react'
+
+export default function Login() {
+  return <Heading>Login Page</Heading>
+}

app/auth/signup/page.tsx

@@ -0,0 +1,5 @@
+import { Heading } from '@chakra-ui/react'
+
+export default function SignUp() {
+  return <Heading>SignUp Page</Heading>
+}

app/components/button/button.tsx

@@ -0,0 +1,13 @@
+import {
+  Button as ChakraButton,
+  ButtonProps as ChakraButtonProps
+} from '@chakra-ui/react'
+
+type ButtonProps = ChakraButtonProps & {
+  label: React.ReactNode
+}
+
+// TODO - This is a temp component to use story book. Please modify or delete it as you like.
+export const Button = ({ label }: ButtonProps) => {
+  return <ChakraButton>{label}</ChakraButton>
+}

app/components/button/stories/button.stories.tsx

@@ -0,0 +1,23 @@
+import { Button } from '../button'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta = {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    backgroundColor: { control: 'color' }
+  }
+} satisfies Meta<typeof Button>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    label: 'Button'
+  }
+}

app/components/index.ts

@@ -0,0 +1 @@
+export { Button } from './button/button'