fix: 调整结构

.github/workflows/deploy-to-pages.yml

@@ -0,0 +1,22 @@
+name: Build and Deploy
+on:
+  push:
+    branches:
+      - main
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v3
+
+      - name: Install and Build 🔧 
+        run: |
+          npm install
+          npm run build:playground
+
+      - name: Deploy 🚀
+        uses: JamesIves/[email protected]
+        with:
+          branch: gh-pages # The branch the action should deploy to.
+          folder: playground/dist # The folder the action should deploy.

README.md

@@ -1,30 +1,43 @@
-# React + TypeScript + Vite
+# React Color Picker
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+A color picker component for React.
 
-Currently, two official plugins are available:
+[Live Demo](https://mengdu.github.io/react-data-viewer)
 
-- [@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
+## Usage
 
-## 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:
+```sh
+npm install @lanyue/react-color-picker
+```
 
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
+```jsx
+import { useState } from 'react'
+import { ColorPicker } from '@lanyue/react-color-picker'
+import '@lanyue/react-color-picker/dist/style.css'
+
+export default function App() {
+  const [color, setColor] = useState('hsla(200, 100%, 50%, 0.9)')
+  const presets = [
+    '#f44337', '#e91e63', '#9c27b0' , '#683ab8', '#3f52b5', '#2196F3', '#03A9F4', '#00BCD4', 'rgba(0, 0, 0, 0)', 'rgba(255, 255, 255, 0)',
+    '#009688', '#4CAF50', '#8BC34A' , '#CDDC39', '#FFEB3B', '#FFC107', '#ff9800', '#ff5722', '#795548', '#9E9E9E'
+  ]
+  return (
+    <>
+      <div className="color-view">
+        <div style={{background: `${color}`}}></div>
+      </div>&nbsp;
+      <span>{color}</span>
+
+      <ColorPicker
+        value={color}
+        presets={presets}
+        onChange={setColor}
+        />
+    </>
+  )
 }
 ```
 
-- 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
+**Preview**
+
+![](preview.png)

package.json

@@ -1,18 +1,36 @@
 {
-  "name": "react-color-picker",
-  "private": true,
-  "version": "0.0.0",
+  "name": "@lanyue/react-color-picker",
+  "version": "0.1.0",
+  "description": "A color picker component for React",
   "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mengdu/react-color-picker.git"
+  },
+  "keywords": [
+    "react-color-picker"
+  ],
+  "author": "[email protected]",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mengdu/react-color-picker/issues"
+  },
+  "homepage": "https://github.com/mengdu/react-color-picker#readme",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "files": ["dist"],
   "scripts": {
-    "dev": "vite",
+    "dev": "vite playground",
     "build": "tsc && vite build",
+    "build:playground": "vite build playground",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite playground preview"
   },
   "peerDependencies": {
+    "color": "^4.2.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "color": "^4.2.3"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/color": "^3.0.6",
@@ -28,6 +46,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2",
-    "vite": "^5.1.6"
+    "vite": "^5.1.6",
+    "vite-plugin-dts": "^3.7.3"
   }
 }

index.html → playground/index.html

@@ -4,10 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>React Color Picker Component</title>
+    <title>A Color Picker component for React.</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/playground/main.tsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

playground/src/App.tsx

@@ -0,0 +1,48 @@
+import { useState } from 'react'
+import { ColorPicker } from '../../src'
+
+function App() {
+  const [color, setColor] = useState('hsla(200, 100%, 50%, 0.9)')
+  const presets = [
+    '#f44337', '#e91e63', '#9c27b0' , '#683ab8', '#3f52b5', '#2196F3', '#03A9F4', '#00BCD4', 'rgba(0, 0, 0, 0)', 'rgba(255, 255, 255, 0)',
+    '#009688', '#4CAF50', '#8BC34A' , '#CDDC39', '#FFEB3B', '#FFC107', '#ff9800', '#ff5722', '#795548', '#9E9E9E'
+  ]
+  return (
+    <div className="app">
+      <div>
+        <h1 className="title">React Color Picker</h1>
+        <p className="des">A color picker component for React.</p>
+        <div>
+          <a href="https://github.com/mengdu/react-color-picker" target="_blank" className="button">
+            <svg className="icon" role="presentation">
+            <title>GitHub</title>
+            <path d="M8,0.2c-4.4,0-8,3.6-8,8c0,3.5,2.3,6.5,5.5,7.6
+                          C5.9,15.9,6,15.6,6,15.4c0-0.2,0-0.7,0-1.4C3.8,14.5,3.3,13,3.3,13c-0.4-0.9-0.9-1.2-0.9-1.2c-0.7-0.5,0.1-0.5,0.1-0.5
+                          c0.8,0.1,1.2,0.8,1.2,0.8C4.4,13.4,5.6,13,6,12.8c0.1-0.5,0.3-0.9,0.5-1.1c-1.8-0.2-3.6-0.9-3.6-4c0-0.9,0.3-1.6,0.8-2.1
+                          c-0.1-0.2-0.4-1,0.1-2.1c0,0,0.7-0.2,2.2,0.8c0.6-0.2,1.3-0.3,2-0.3c0.7,0,1.4,0.1,2,0.3c1.5-1,2.2-0.8,2.2-0.8
+                          c0.4,1.1,0.2,1.9,0.1,2.1c0.5,0.6,0.8,1.3,0.8,2.1c0,3.1-1.9,3.7-3.7,3.9C9.7,12,10,12.5,10,13.2c0,1.1,0,1.9,0,2.2
+                          c0,0.2,0.1,0.5,0.6,0.4c3.2-1.1,5.5-4.1,5.5-7.6C16,3.8,12.4,0.2,8,0.2z"></path>
+            </svg>
+            Star on GitHub
+          </a>
+        </div>
+      </div>
+      <div className="playground">
+        <div style={{width: '250px', whiteSpace: 'nowrap'}}>
+          <div className="color-view">
+            <div style={{background: `${color}`}}></div>
+          </div>&nbsp;
+          <span>{color}</span>
+        </div>
+        <p></p>
+        <ColorPicker
+          value={color}
+          presets={presets}
+          onChange={setColor}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default App

playground/src/main.less

@@ -0,0 +1,81 @@
+:root {
+  color: #4a5764;
+  line-height: 1.5;
+  font-weight: 400;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+body {
+  background: linear-gradient(to left top, #e0f6ff, #f5fcff);
+  background-attachment: fixed;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.app {
+  margin: 0 auto;
+  width: 760px;
+  display: flex;
+  // background-color: #fff;
+  // border: solid 1px rgba(0, 0, 0, 0.092);
+  padding: 50px;
+  border-radius: 5px;
+
+  .title {
+    color: #00b2ff;
+    font-size: 40px;
+    font-weight: 600;
+  }
+
+  .button {
+    margin-top: 40px;
+    display: inline-block;
+    --shadow-color: 0deg 0% 20%;
+    background-color: #00b2ff;
+    background-image: linear-gradient(0deg, #0000, #ffffff0d);
+    border: 1px solid #00a1e6;
+    box-shadow: 0 0.8px 1px hsl(var(--shadow-color) / .05), 0 1.3px 1.6px -1px hsl(var(--shadow-color) / .06), 0 2.8px 3.4px -2px hsl(var(--shadow-color) / .07);
+    color: #fff;
+    font-weight: 600;
+    padding: 15px;
+    padding-left: 20px;
+    padding-right: 20px;
+    text-decoration: none;
+    text-shadow: 0 1px 1px #0000001a;
+    transition: all .2s ease;
+    border-radius: 10px;
+
+    &:hover {
+      background: #19baff;
+      border-color: #009adb;
+    }
+
+    svg {
+      width: 20px;
+      height: 20px;
+      vertical-align: middle;
+      margin-right: 10px;
+    }
+  }
+
+  .playground {
+    flex: 1 auto;
+    padding: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  }
+}

playground/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" }]
+}

playground/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

playground/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: './',
+  plugins: [react()],
+})