Merge develop to main (#7)

* ADCIO-2614, ADCIO-2611) chore: set design system (#1)

* fix: fix eslint error

* fix: fix build interface error

* chore: install missing package

* chore: remove unused eslint plugin

* chore: modify vscode setting of rmp

* chore: remove cjs vite format

* chore: remove vscode setting

* chore: add typescript, tslib

* remove: remove gitignore log

* chore: remove babel

---------

Co-authored-by: dev-redo <mis05041@naver.com>

* refactor: split selected logic from view component

* ADCIO-2799) chore: set storybook pipeline (#3)

* chore: set storybook pipeline

* chore: add vercel json

---------

Co-authored-by: dev-redo <mis05041@naver.com>

---------

Co-authored-by: dev-redo <mis05041@naver.com>
Co-authored-by: NaGyeong-Park <97649363+NaGyeong-Park@users.noreply.github.com>

.eslintrc.cjs

@@ -0,0 +1,24 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:prettier/recommended'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['react', 'prettier'],
+  rules: {
+    'linebreak-style': 'off',
+    quotes: ['error', 'single'],
+    semi: ['error', 'always'],
+    'react/react-in-jsx-scope': 'off',
+    'prettier/prettier': ['error', { endOfLine: 'auto' }],
+    'no-unused-vars': 'warn',
+    'react/display-name': 'off',
+    'react/no-unknown-property': ['error', { ignore: ['css'] }],
+  },
+  ignorePatterns: ['dist', '.eslintrc.cjs', 'vite.config.ts'],
+};

.github/workflows/storybook-develop.yml

@@ -0,0 +1,13 @@
+name: Storybook Develop Deployment
+on:
+  push:
+    branches:
+      - develop
+
+jobs:
+  storybook-develop:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy Preview
+        run: |
+          curl -X POST ${{ secrets.VERCEL_DEPLOY_HOOK_STORYBOOK_DEVELOP }}

.github/workflows/storybook-preview.yml

@@ -0,0 +1,55 @@
+name: Storybook Preview Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_STORYBOOK_PROJECT_ID }}
+  CACHE_PATH: /home/ubuntu/.cache/cds
+
+on:
+  workflow_dispatch:
+
+jobs:
+  storybook-preview:
+    runs-on: [self-hosted, cds]
+    steps:
+      - uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
+
+      - name: Build Project Artifacts
+        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
+
+      - name: Deploy Project Artifacts to Vercel
+        id: deploy
+        run: |
+          export DEPLOYMENT_URL=$(vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }})
+          echo "deployed at: $DEPLOYMENT_URL"
+          echo "url=$DEPLOYMENT_URL" >> $GITHUB_OUTPUT
+
+      - uses: actions/github-script@v6
+        with:
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            try {
+              const { data: [{ number }] } = await github.rest.repos.listPullRequestsAssociatedWithCommit({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                commit_sha: context.sha,
+              });
+              await github.rest.issues.createComment({
+                issue_number: number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                body: '🚀 Storybook Preview deployed at: ${{ steps.deploy.outputs.url }}'
+              })
+            } catch (error) {
+              console.log("failed to create comment. skipping...")
+              console.log(error)
+            }

.gitignore

@@ -0,0 +1,22 @@
+# Logs
+logs
+*.log
+pnpm-debug.log*
+tsconfig.tsbuildinfo
+
+node_modules
+dist
+storybook-static
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 100,
+  "arrowParens": "avoid",
+  "endOfLine": "auto"
+}

.storybook/main.js

@@ -0,0 +1,14 @@
+module.exports = {
+  framework: "@storybook/react-vite",
+  stories: ["../src/stories/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-storysource",
+    "@storybook/addon-designs",
+  ],
+  core: {
+    builder: "@storybook/builder-vite",
+  },
+};

.storybook/preview-head.html

@@ -0,0 +1,5 @@
+<link
+  rel="stylesheet"
+  type="text/css"
+  href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
+/>

.storybook/preview.js

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

.storybook/styles.css

@@ -0,0 +1,3 @@
+.sb-show-main {
+  background-color: #fafafa;
+}

package.json

@@ -0,0 +1,65 @@
+{
+  "name": "cds",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "packageManager": "pnpm@8.15.4",
+  "scripts": {
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prepare": "husky install"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/server": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "date-fns": "^3.3.1",
+    "react": "18.2.0",
+    "react-colorful": "^5.6.1",
+    "react-datepicker": "^4.25.0",
+    "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
+    "react-i18next": "^12.1.4"
+  },
+  "devDependencies": {
+    "@storybook/addon-designs": "^7.0.9",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/addon-storysource": "^7.6.17",
+    "@storybook/builder-vite": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-vite": "^7.6.17",
+    "@types/react": "^18.2.33",
+    "@types/react-datepicker": "^4.19.6",
+    "@types/react-dom": "^18.2.14",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
+    "storybook": "^7.6.17",
+    "tsconfig-paths-webpack-plugin": "^4.1.0",
+    "tslib": "^2.6.2",
+    "typescript": "~4.8.2",
+    "vite": "^5.1.4",
+    "vite-plugin-banner": "^0.7.1",
+    "vite-plugin-dts": "^3.7.3",
+    "vite-tsconfig-paths": "^4.3.1"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "prettier --parser=typescript --write",
+      "eslint --fix"
+    ]
+  }
+}