@wishket/design-system 0.0.1 → 0.0.3

package/.editorconfig

@@ -0,0 +1,12 @@
+root = true
+[*]
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_size = 2
+format_on_save = true
+
+[*.md]
+trim_trailing_whitespace = false

package/.eslintignore

@@ -0,0 +1,3 @@
+/node_modules
+__test__
+*.js

package/.eslintrc.js

@@ -0,0 +1,33 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: ['tsconfig.json'],
+    tsconfigRootDir: __dirname,
+    sourceType: 'module',
+    createDefaultProgram: true
+  },
+  ignorePatterns: ['*.d.ts'],
+  extends: ["@wishket/eslint-config-wishket"],
+  root: true,
+  env: {
+    node: true,
+    browser: true
+  },
+  globals: {
+    document: false,
+    Map: false,
+    Promise: false
+  },
+  settings: {
+    react: {
+      version: 'detect'
+    },
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx']
+    },
+    'import/resolver': {
+      typescript: {}
+    },
+    'import/ignore': ['testing-utils']
+  }
+}

package/.github/CODEOWNERS

@@ -0,0 +1 @@
+* @wishket/frontend

package/.github/ISSUE_TEMPLATE/bug.md

@@ -0,0 +1,44 @@
+---
+name: 버그 이슈 
+about: 버그에 대한 티켓을 생성합니다.
+title: ''
+labels: 'bug'
+---
+
+## 버그에 대한 내용
+
+어떤 버그인지 기대 동작과 현상에 대해 작성합니다.
+
+- ex. 등록 버튼 클릭 시 서버 요청 에러가 발생하고 결과에 대한 팝업이 노출되지 않음
+
+## To reproduce
+
+버그 재현 방법에 대해 작성합니다.
+
+- ex.
+  1. <https://example.com> 접속
+  2. 계정 로그인
+  3. <https://example.com/form> 접속
+  4. form 작성
+  5. '등록' 버튼 클릭
+
+## 기대 현상
+
+예상한 상황에 대한 명확하고 간결한 설명입니다.
+
+- ex. 등록 버튼 클릭 시 서버 요청 및 응답 받아 해당 결과에 대한 팝업 노출
+
+## Screenshots
+
+버그를 설명하는데 도움이 되는 스크린샷을 추가합니다.
+
+### 발생 환경
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
+
+### Additional context
+
+추가적인 컨텍스트를 작성합니다.

package/.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,29 @@
+---
+name: 기능 변경/추가
+about: 제품에 추가할 기능의 변경 또는 추가에 대한 티켓을 생성합니다.
+title: ''
+labels: 'feat'
+---
+
+## 기능에 대한 내용
+
+어떤 기능을 추가/변경 하는지 기대 동작과 현상에 대해 작성합니다.
+
+- ex. 사용자 프로필 이미지 변경 기능 추가
+
+## 계획 / 설계
+
+기능을 구현하기 위한 계획 또는 설계를 작성합니다.
+
+- ex.
+- 이미지 변경 버튼 UI 추가
+- 이미지 변경 버튼 클릭 시 이미지 변경 모달 노출
+- 이미지 변경 모달에서 이미지 변경 후 저장 버튼 클릭 시 서버 요청
+- 서버 요청 성공 시 성공 모달 노출
+
+## 추가 컨텍스트
+
+추가적인 컨텍스트를 작성합니다.
+
+- 관련된 slack, trello, confluence, github issue, github pr 등의 링크
+- 구현에 참조할 만한 내용

package/.github/pull_request_template.md

@@ -0,0 +1,36 @@
+### Short description
+
+*내용을 간단히 알 수 있도록 한줄로 요약하여 작성합니다.*
+
+### Proposed changes
+
+*변경 사항에 대해 리뷰어가 이해할 수 있도록 상세히 작성합니다.*
+
+- 변경 사항 1
+- 변경 사항 2
+- 변경 사항 3
+
+### How to test
+
+*리뷰어가 재현을 할 수 있는 방법에 대해 작성합니다.*
+
+### Screenshots
+
+*UI의 변경 사항이나 이미지/비디오를 통해 설명을 보완할 수 있는 내용에 대해 작성합니다.*
+
+|AS-IS|TO-BE|
+|--|--|
+|변경 전|변경 후|
+
+|구분|내용|
+|--|--|
+|타이틀|스크린샷|
+
+### Reference
+
+*해당 작업을 하게 된 레퍼런스에 대해 작성합니다*
+*라벨은 github 자동 이슈 링킹에 대한 예약어이므로 변경하지 않습니다.*
+
+fix #issue-number_
+resolve #issue-number_
+close #issue-number_

package/.github/release-drafter.yml

@@ -0,0 +1,49 @@
+name-template: 'v$NEXT_PATCH_VERSION 🌈'
+tag-template: 'v$NEXT_PATCH_VERSION'
+categories:
+  - title: '🎉 User stories'
+    labels:
+      - 'epic'
+      - 'Epic'
+      - 'user story'
+      - 'User story'
+      - 'user-story'
+  - title: '🚀 Features'
+    labels:
+      - 'feat'
+      - 'feature'
+      - 'Feature'
+      - 'enhancement'
+      - 'Enhancement'
+  - title: '🐛 Bug Fixes'
+    labels:
+      - 'fix'
+      - 'Fix'
+      - 'bugfix'
+      - 'bug'
+      - 'Bug'
+      - 'hotfix'
+  - title: '🦾 Refactoring'
+    labels:
+      - 'refactor'
+      - 'Refactor'
+  - title: '📚 Documentation'
+    labels:
+      - 'documentation'
+      - 'Documentation' 
+  - title: '🧰 Maintenance'
+    label:
+      - 'chore'
+      - 'Chore'
+      - 'ci'
+      - 'CI'
+      - 'build'
+      - 'Build'
+  - title: '🛠 Dependencies'
+    label:
+      - 'dependencies'    
+      - 'Dependencies'
+change-template: '- $TITLE @$AUTHOR (#$NUMBER)'
+template: |
+  ## Changes
+  $CHANGES

package/.github/workflows/design-system-canary.yml

@@ -0,0 +1,78 @@
+name: design-system-canary
+
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - '**'
+      - '.github/workflows/design-system-canary.yml'
+
+env:
+  NODE_OPTIONS: --max_old_space_size=4096
+
+jobs:
+  install-dependencies:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      - name: Install dependencies
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: yarn install --frozen-lockfile
+
+
+  publish-canary:
+    runs-on: ubuntu-latest
+    needs: [install-dependencies]
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      - name: Restore dependencies from cache
+        id: cache
+        uses: actions/cache@v3
+        with:
+          path: ./node_modules
+          key: ${{ runner.os }}-yarn-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+      - name: Install dependencies
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: yarn install --frozen-lockfile
+
+      - name: Create .npmrc
+        run: |
+          cat << EOF > "$HOME/.npmrc"
+            //registry.npmjs.org/:_authToken=$NPM_TOKEN
+          EOF
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Publish canary
+        run: |
+          cat <<< "$( jq '.version = "0.0.0"' package.json )" > package.json
+          echo -e "---\n'@wishket/design-system': patch\n---\n\nPublish canary" > .changeset/force-publish.md
+          yarn changeset version --snapshot
+          yarn changeset publish --tag canary
+        env:
+          GITHUB_TOKEN: ${{ secrets.PJW_GITHUB_TOKEN }}
+
+      - name: Output canary version number
+        run: |
+          name=$(jq -r .name package.json)
+          version=$(jq -r .version package.json)
+          yarn dlx action-status --context "Published $name" --state success --description $version --url "https://unpkg.com/$name@$version/"
+        env:
+          GITHUB_TOKEN: ${{ secrets.PJW_GITHUB_TOKEN }}

package/.github/workflows/design-system-dev.yml

@@ -0,0 +1,77 @@
+name: design-system-dev
+
+on:
+  push:
+    branches-ignore:
+      - master
+    paths:
+      - '**'
+      - '.github/workflows/design-system-dev.yml'
+
+env:
+  NODE_OPTIONS: --max_old_space_size=4096
+
+jobs:
+  install-dependencies:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      - name: Install dependencies
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: yarn install --frozen-lockfile
+
+  publish-dev:
+    runs-on: ubuntu-latest
+    needs: [install-dependencies]
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      - name: Restore dependencies from cache
+        id: cache
+        uses: actions/cache@v3
+        with:
+          path: ./node_modules
+          key: ${{ runner.os }}-yarn-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+      - name: Install dependencies
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: yarn install --frozen-lockfile
+
+      - name: Create .npmrc
+        run: |
+          cat << EOF > "$HOME/.npmrc"
+            //registry.npmjs.org/:_authToken=$NPM_TOKEN
+          EOF
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Publish dev
+        run: |
+          cat <<< "$( jq '.version = "0.0.0"' package.json )" > package.json
+          echo -e "---\n'@wishket/design-system': patch\n---\n\nPublish dev" > .changeset/force-publish.md
+          yarn changeset version --snapshot
+          yarn changeset publish --tag dev
+        env:
+          GITHUB_TOKEN: ${{ secrets.PJW_GITHUB_TOKEN }}
+
+      - name: Output dev version number
+        run: |
+          name=$(jq -r .name package.json)
+          version=$(jq -r .version package.json)
+          yarn dlx action-status --context "Published $name" --state success --description $version --url "https://unpkg.com/$name@$version/"
+        env:
+          GITHUB_TOKEN: ${{ secrets.PJW_GITHUB_TOKEN }}

package/.github/workflows/design-system-release.yml

@@ -0,0 +1,61 @@
+name: design-system-release
+
+on:
+  release:
+    types: [published]
+
+env:
+  NODE_OPTIONS: --max_old_space_size=4096
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      - name: Restore dependencies from cache
+        id: cache
+        uses: actions/cache@v3
+        with:
+          path: ./node_modules
+          key: ${{ runner.os }}-yarn-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+      - name: Install dependencies
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: yarn install --frozen-lockfile
+
+      - name: Create .npmrc
+        run: |
+          cat << EOF > "$HOME/.npmrc"
+            //registry.npmjs.org/:_authToken=$NPM_TOKEN
+          EOF
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Publish
+        run: |
+          TAG_NAME=${GITHUB_REF#refs/tags/}
+          TAG_NAME=${TAG_NAME#v}
+          echo "TAG_NAME=$TAG_NAME"
+          cat <<< "$( jq ".version = \"$TAG_NAME\"" package.json )" > package.json
+          cat package.json
+          echo -e "---\n'@wishket/design-system': patch\n---\n\nPublish with tag $TAG_NAME" > .changeset/force-publish.md
+          yarn changeset publish
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.PJW_GITHUB_TOKEN }}
+
+      - name: Output version number
+        run: |
+          name=$(jq -r .name package.json)
+          version=$(jq -r .version package.json)
+          yarn dlx action-status --context "Published $name" --state success --description $version --url "https://unpkg.com/$name@$version/"
+        env:
+          GITHUB_TOKEN: ${{ secrets.PJW_GITHUB_TOKEN }}

package/.github/workflows/pr-checklist.yml

@@ -0,0 +1,23 @@
+name: Pull Request Checklist
+on: [pull_request]
+jobs:
+  run:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: wow-actions/auto-comment@v1
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          pullRequestOpenedComment: |
+            👋 @{{ author }} 
+            아래 체크리스트를 확인하시고 관련된 내용에 대한 리뷰 및 피드백을 부탁드립니다.
+            
+            - [ ] Commit과 PR: Commit과 PR의 내용이 변경사항을 명확하게 잘 설명하고 있는가?
+            - [ ] 목적 일치성: PR의 목적에 부합하며, 불필요하거나 관련 없는 코드가 포함되어 있지 않은가?
+            - [ ] 기능 구현 적합성: 구현하고자 하는 기능이 목적에 맞게 적절하게 구현되어 있는가?
+            - [ ] 코드 가독성: 코드가 복잡하거나 읽기 어려운 부분 없이 명확하고 이해하기 쉬운가?
+            - [ ] 의존성 관리: 의존성이 적절하게 관리되고 있으며, 필요한 경우 적절히 독립되어 있는가?
+            - [ ] 코드 중복: 코드 중복이 최소화되었는가?
+            - [ ] 코드 퍼포먼스: 성능에 부정적인 영향을 미치는 부분이 없는가?
+            - [ ] 보안 취약점: 보안상 취약한 부분이 없는가?
+            - [ ] 컴포넌트 설계: 컴포넌트가 재사용 가능하고, 적절히 분리되어 있는가?
+            - [ ] 브라우저 호환성: 주요 브라우저와 버전에서 문제없이 작동하는가?

package/.github/workflows/release-drafter.yml

@@ -0,0 +1,16 @@
+name: Release Drafter
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  update_release_draft:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: release-drafter/release-drafter@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          config-name: release-drafter.yml

package/.github/workflows/todo-bot.yml

@@ -0,0 +1,19 @@
+name: Convert TODOs to Issues
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  convert_todos:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Convert TODOs to Issues
+        uses: alstr/todo-to-issue-action@master
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}

package/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

package/.vscode/settings.json

@@ -0,0 +1,24 @@
+{
+  "editor.tabSize": 2,
+  "editor.formatOnSave": true,
+  "editor.formatOnPaste": true,
+  "editor.formatOnType": true,
+  "files.autoSave": "onFocusChange",
+  "editor.renderWhitespace": "all",
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit"
+  },
+  "[typescriptreact]": {
+        "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+    },
+  "eslint.lintTask.options": "--ignore-path .eslintignore",
+  "cSpell.words": [
+    "Menlo",
+    "rvest",
+    "tailwindcss",
+    "dotenv",
+    "VERCEL",
+    "wishdev",
+    "Wishket"
+  ]
+}

package/Components/Atoms/Typography/Typography.d.ts

@@ -0,0 +1,3 @@
+declare module '@wishket/design-system' {
+  export const Typography: React.FC;
+}

package/Components/Atoms/Typography/Typography.tsx

@@ -0,0 +1,9 @@
+const Typography = () => {
+  return (
+    <div className="bg-green-300">
+      <h1 className="text-red-500">Typography</h1>
+    </div>
+  );
+};
+
+export default Typography;

package/Components/Atoms/Typography/index.ts

@@ -0,0 +1,3 @@
+import Typography from './Typography';
+
+export default Typography;

package/Components/Atoms/index.ts

@@ -0,0 +1 @@
+export { default as Typography } from './Typography';

package/Components/index.ts

@@ -0,0 +1 @@
+export * from './Atoms';

package/README.md

@@ -1 +1,36 @@
-# design-system
+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).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [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.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+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.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

package/__test__/setupTests.ts

@@ -0,0 +1,3 @@
+import '@testing-library/jest-dom';
+import '@testing-library/jest-dom/jest-globals';
+import '@testing-library/react';

package/index.d.ts

@@ -0,0 +1 @@
+export * from './Components/Atoms'

package/jest.config.js

@@ -0,0 +1,26 @@
+// jest.config.js
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const nextJest = require('next/jest');
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+});
+
+// Add any custom config to be passed to Jest
+const customJestConfig = {
+  // Add more setup options before each test is run
+  setupFiles: ['dotenv/config'],
+  setupFilesAfterEnv: ['<rootDir>/__test__/setupTests.ts'],
+  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
+  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
+  moduleDirectories: ['node_modules', '<rootDir>/'],
+  testEnvironment: 'jest-environment-jsdom',
+  moduleNameMapper: {
+    '\\.(css|less|scss|sss|style)$': '<rootDir>/node_modules/jest-css-modules',
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig);

package/next.config.js

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

package/package.json

@@ -1,36 +1,45 @@
 {
   "name": "@wishket/design-system",
-  "version": "0.0.1",
-  "main": "dist/index.js",
-  "type": "module",
-  "module": "dist/index.es.js",
-  "files": [
-    "dist"
-  ],
+  "version": "0.0.3",
+  "description": "Wishket Design System",
+  "types": "index.d.ts",
+  "license": "MIT",
   "scripts": {
-    "build": "rm -rf dist && rollup -c --bundleConfigAsCjs"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint \"./**/*.{ts,tsx,js,jsx}\" --ignore-path .eslintignore || true",
+    "test:unit": "jest --ci --runInBand --coverage --watchAll=false --passWithNoTests --testMatch=\"**/*.unit.spec.@(ts|tsx)\"",
+    "test:e2e": "jest --ci --runInBand --coverage --watchAll=false --passWithNoTests --testMatch=\"**/*.e2e.spec.@(ts|tsx)\""
+  },
+  "dependencies": {
+    "next": "14.0.4",
+    "react": "^18",
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.7",
-    "@changesets/changelog-github": "^0.5.0",
-    "@changesets/cli": "^2.27.1",
-    "@types/babel__core": "^7",
-    "@types/node": "^20.10.6",
-    "@types/react": "^18.2.46",
-    "@types/react-dom": "^18.2.18",
-    "autoprefixer": "^10.4.16",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.2.0",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.11",
+    "@types/node": "^20.10.7",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@wishket/eslint-config-wishket": "^1.0.0",
+    "autoprefixer": "^10.0.1",
+    "babel-jest": "^29.7.0",
     "dotenv": "^16.3.1",
-    "postcss": "^8.4.32",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "^5.0.1",
-    "tailwindcss": "^3.4.0",
-    "tslib": "^2.6.2",
-    "typescript": "^5.3.3"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "packageManager": "yarn@4.0.2"
+    "eslint": "^8",
+    "eslint-config-next": "14.0.4",
+    "jest": "^29.7.0",
+    "jest-dom": "^4.0.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "postcss": "^8",
+    "prettier-plugin-tailwindcss": "^0.5.11",
+    "tailwindcss": "^3.3.0",
+    "ts-jest": "^29.1.1",
+    "ts-node": "^10.9.2",
+    "typescript": "^5"
+  }
 }

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

package/public/vercel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

package/src/app/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/app/layout.tsx

@@ -0,0 +1,19 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+import { PropsWithChildren } from 'react';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+};
+
+export default function RootLayout({ children }: PropsWithChildren) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

package/src/app/page.tsx

@@ -0,0 +1,9 @@
+import { Typography } from '../../Components';
+
+export default function Home() {
+  return (
+    <div>
+      <Typography />
+    </div>
+  );
+}

package/tailwind.config.ts

@@ -0,0 +1,19 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: [
+    './Components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic':
+          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      },
+    },
+  },
+  plugins: [],
+};
+export default config;

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}