[Config] Setup storybook + config source (#42)

.eslintrc.json

@@ -1,6 +1,56 @@
 {
-  "extends": "next/core-web-vitals",
+  "parser": "@typescript-eslint/parser",
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "modules": true,
+      "tsx": true
+    },
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "baseUrl": "src",
+    "noImplicitAny": true,
+    "removeComments": true,
+    "preserveConstEnums": true,
+    "sourceMap": true,
+    "rootDirs": ["src"]
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "next/core-web-vitals"
+  ],
+  "plugins": ["react-hooks", "@typescript-eslint"],
   "rules": {
-    "react/display-name": "off"
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "react/destructuring-assignment": "warn",
+    "@typescript-eslint/member-delimiter-style": 0,
+    "@typescript-eslint/interface-name-prefix": 0,
+    "linebreak-style": ["error", "unix"],
+    "react/display-name": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "quotes": ["error", "single"]
+  },
+  "settings": {
+    "import/resolver": {
+      "typescript": {},
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"],
+        "moduleDirectory": ["src/", "node_modules"]
+      }
+    }
   }
 }

.gitignore

@@ -1,6 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
+/styled-system
 /node_modules
 /.pnp
 .pnp.js

.storybook/main.ts

@@ -0,0 +1,42 @@
+const path = require('path');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+
+module.exports = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
+    '@storybook/addon-docs',
+  ],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  core: {
+    builder: 'webpack5',
+  },
+  webpackFinal: (config) => {
+    config.resolve.plugins = [
+      ...(config.resolve.plugins || []),
+      new TsconfigPathsPlugin({
+        extensions: ['.ts', '.tsx', '.js'],
+      }),
+    ];
+
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '@/components': path.resolve(__dirname, '../src/components'),
+      '@/styled': path.resolve(__dirname, '../styled-system'),
+    };
+    return config;
+  },
+  typescript: {
+    reactDocgen: false,
+  },
+};

.storybook/preview.ts

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

.stylelintignore

@@ -0,0 +1,5 @@
+public
+node_modules
+next
+styled-system
+coverage

.stylelintrc.json

@@ -0,0 +1,24 @@
+{
+  "extends": ["stylelint-config-standard"],
+  "rules": {
+    "no-descending-specificity": true,
+    "declaration-block-no-duplicate-custom-properties": true,
+    "font-family-no-duplicate-names": true,
+    "no-duplicate-selectors": true,
+    "block-no-empty": true,
+    "no-empty-source": true,
+    "color-no-invalid-hex": true,
+    "function-calc-no-unspaced-operator": true,
+    "no-invalid-double-slash-comments": true,
+    "no-invalid-position-at-import-rule": true,
+    "length-zero-no-unit": true,
+    "selector-class-pattern": "^([a-z][a-z0-9]*)([-,_]*[a-z0-9]+)*$",
+    "custom-property-pattern": "^([a-z][a-z0-9]*)([-,_]*[a-z0-9]+)*$",
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        "ignorePseudoClasses": ["global"]
+      }
+    ]
+  }
+}

README.md

@@ -1,34 +1,46 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Yorkie UI Poc
 
-## Getting Started
+Welcome to the Yorkie UI component library!
 
-First, run the development server:
+## Coding Convention
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
+Use ESLint and Prettier, Stylelint to write consitent code and improve code quality. We use React and TypeScript standard lint rules. For details, refer to the [ESLint configuration file](./.eslintrc.json), [Prettier configuration file](./prettier.config.js), [Stylelint configuration file](./.stylelintrc.json).
+
+Run check eslint and stylelint
+
+```sh
+npm run lint
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## Steps to configure Development Environment
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+1. Install Node > 18.17.0
+2. Install npm
+
+```sh
+npm install
+```
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+3. Run build styled system (Park UI + Panda Css)
 
-## Learn More
+```sh
+npm run style
+```
 
-To learn more about Next.js, take a look at the following resources:
+4. Run build app
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+```sh
+npm run build
+```
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+5. Run storybook
 
-## Deploy on Vercel
+```sh
+npm run storybook
+```
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+6. Run for app
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+```sh
+npm run dev
+```

next.config.js

@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {};
 
-module.exports = nextConfig
+module.exports = nextConfig;