feat: demo 추가

hansanghyeon-tailwindcss · Mar 24, 2024 · 3a9f8d5 · 3a9f8d5
1 parent bdac5b3
commit 3a9f8d5
Show file tree

Hide file tree

Showing 23 changed files with 2,241 additions and 43 deletions.
diff --git a/.github/workflows/demo.yaml b/.github/workflows/demo.yaml
@@ -0,0 +1,38 @@
+name: Build Vite Project
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  demo:
+    name: example 깃헙 페이지 배포
+    # environment:
+    #   name: github-pages
+    #   url: https://hansanghyeon.github.io/tailwindcss-file-input/
+    runs-on: ubuntu-latest
+    env:
+      dir: ./example
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.11.1
+
+      - name: Install Dependencies
+        run: yarn install
+        working-directory: ${{ env.dir }}
+
+      - name: Build Vite Project
+        run: yarn build
+        working-directory: ${{ env.dir }}
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./example/dist
diff --git a/.gitignore b/.gitignore
@@ -170,4 +170,5 @@ dist
 
 # IntelliJ based IDEs
 .idea
-lib
+lib
+.vscode
diff --git a/example/.eslintrc.cjs b/example/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/example/.gitignore b/example/.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/example/README.md b/example/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/example/index.html b/example/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/tailwindcss.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@hyeon/tailwindcss-layer-shadow</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/example/package.json b/example/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@hyeon/mac-scrollbar": "^1.0.2",
+    "@hyeon/tailwindcss-layer-shadow": "^1.0.22",
+    "@tailwindcss/typography": "^0.5.10",
+    "@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",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0"
+  }
+}
diff --git a/example/postcss.config.js b/example/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/example/public/tailwindcss.svg b/example/public/tailwindcss.svg
diff --git a/example/src/App.css b/example/src/App.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -0,0 +1,25 @@
+import './App.css'
+
+function App() {
+  return (
+    <div className='min-h-[100dvh] w-full flex items-center justify-center [*]:mac-scrollbar'>
+      <div className='container px-[20px] grid justify-center gap-y-[20px]'>
+        <div className='prose dark:prose-invert'>
+          <h1>@hyeon/tailwindcss-layer-shadow</h1>
+          <h2>예시</h2>
+        </div>
+        <div className='dark:layer-shadow-x-dark-primary layer-shadow-x-light-primary relative'>
+          <div className="prose dark:prose-invert whitespace-nowrap overflow-x-auto">
+            <p>
+              이벼가겐 하잉븼너바훈 엉바샀스기돠 마이는 갸읎으만 아증랸오할을 담하아으재에 순으의, 히뎐 디늤다. 일느쟈 압미욘읜는 비온을 쥿옥은 훠자아 롁껄마기에서 닥즈은지. 캐갇알기 유채던 아을븐수의 닌장버산나를 맘외포밀이죠 화갤랠시는 아락는다. 까아앨톨의 자호해가 네여엉이 버오라이로 기배코의 바크어다. 메팻됴껴혼 이레시셈하자 셔가아가 산나후다 스퍙시도에. 낟네멀은 됴헜가에가의 앙윙챈은은 으아홍너어, 므그밨하를 껑윈개고안지 유탰기가 이가착, 닌숸닌과, 겨긱 이사로써.<br/>
+              잔느우 사니는 허긴믐 틴바호라면 갔돈바가에게 릴마낙헝벤의다. 베근여챌 올읩바짜소다 야뜌루스서는, 로눤드에 그이끼 헹라날아마로. 낵유자 가줄텨닥을 사잰른견엔을 읜고를, 갠진오요듀마코 헨남아이, 베다와 노겐고 시자상기다 든더톤미도. 뉜젔시나투창은 미븝아올루흠이 쓰디 걸은 사리지 모예 뇍딤죈. 폼당뎀슥자 헌밌수션이레마다 버티간에서 라거징 타어를 읜수안줘건단던 아가. 가 라던사겨허혈울희히의, 파맜딨의 심비긕은, 어할인 더고와 옽애천르의, 랑랜러브그하고. 앨추흠라곡과 진타답츠에 성티혀 라로찬뎁의 타무솨먹에게. 모주에기흘까 허걈잔빟이 얼신작인, 저초시락고 려옿치잔 잉타캔은 건쿻사사, 칼거를 낫록일옵에 지훙을, 호다흔뻬고.<br/>
+              톨아다즈힌인 차익 우기는 재을다 트마흤울을 미거봥뭐가 디백의 참애몬한빈할에 침니언유다 밪갛래옵은, 라흘이다. 타헹는다 어살아아을문다 후나, 로까를 깐롮므익에 능아재즨의 자아기카뵈고사충자 돈게차악다. 로마져죈 지얄좌를 렁바다 샨운을 지사생으라면, 모힘도간에 다앤믑랏던가. 얼다일엉애뎜 타디줌스로 귱큽올도다 헤뵈애를 대욜저가 반회연라치가 즈걱산과 허오가 단플뎀온. 잣시반이요 아반빅이 트아는 갈리사짱입시다, 으코밸드에 석디즈항흐우단에서 일욶으라 다자면, 브엇에서. 옴쁘훠쿰이함옥은 딤느는 도아가, 칠잔나아서 우손라를 하쓰들헤고어. 더나어를 베닛의 로겐이 으르 러자아다. 와하갈아이를 쿠사닸아에 나믁이어 수가문올멕의 장바유어 디헤렝이티넬듯 다싀틘뱐 싄빔즈차미는 와담겐븐이.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default App
diff --git a/example/src/index.css b/example/src/index.css
@@ -0,0 +1,21 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+}
diff --git a/example/src/main.tsx b/example/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
diff --git a/example/src/vite-env.d.ts b/example/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/example/tailwind.config.js b/example/tailwind.config.js
@@ -0,0 +1,29 @@
+import hyeon from '@hyeon/tailwindcss-layer-shadow'
+import mac from '@hyeon/mac-scrollbar'
+import typo from '@tailwindcss/typography'
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        dark: {
+          primary: '#242424',
+        },
+        light: {
+          primary: '#ffffff',
+        }
+      }
+    },
+  },
+  plugins: [
+    hyeon,
+    mac,
+    typo
+  ],
+}
+
diff --git a/example/tsconfig.json b/example/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/example/tsconfig.node.json b/example/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/example/vite.config.ts b/example/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '/tailwindcss-layer-shadow/',
+  plugins: [react()],
+})
-Original file line number
+Diff line change
@@ Expand Up / @@ -170,4 +170,5 @@ dist @@
     # IntelliJ based IDEs
     .idea
-    lib
+    lib
+    .vscode