.gitea/workflows/publishToNpm.yaml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - main
+      - dev
 
 jobs:
   publish:
@@ -22,7 +23,24 @@ jobs:
       - name: Install dependencies
         run: npm install
 
+      - name: Determine package name
+        id: package_name
+        run: |
+          if [ "${{ gitea.ref }}" == "refs/heads/main" ]; then
+            echo "PACKAGE_NAME=datenel-react" >> $GITEA_ENV
+            echo "ACCESS_LEVEL=public" >> $GITEA_ENV
+          elif [ "${{ gitea.ref }}" == "refs/heads/dev" ]; then
+            echo "PACKAGE_NAME=@astrian/datenel-react-dev" >> $GITEA_ENV
+            echo "ACCESS_LEVEL=restricted" >> $GITEA_ENV
+          fi
+
+      - name: Update package.json for dev releases
+        if: GITEA.ref == 'refs/heads/dev'
+        run: |
+          jq --arg name "@astrian/datenel-react-dev" '.name=$name' package.json > temp.json && mv temp.json package.json
+          jq --arg version "0.0.0-dev.$(date +%s)" '.version=$version' package.json > temp.json && mv temp.json package.json
+
       - name: Publish to npm
-        run: npm publish
+        run: npm publish --access $ACCESS_LEVEL
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

README.md

@@ -30,28 +30,27 @@ Here is an example of how to use Datenel in your React application:
 
 ```tsx
 import React from 'react'
-import { WeekPicker } from 'datenel-react'
-import './app.scss'
+import { SingleDatePicker } from 'datenel-react'
 
 export default () => {
-	function onSelect(value) {
-		alert(`You selected ${value.year}-${value-month}-${value.day}`)
-	}
+  function onSelect(value) {
+    alert(`You selected ${value.year}-${value-month}-${value.day}`)
+  }
 
-	return (
-		<div className='app'>
-			<div className="border">
-				<WeekPicker 
-					value={{
-						year: 2025,
-						month: 1,
-						day: 1
-					}}
-					onSelect={onSelect}
-				/>
-			</div>
-		</div>
-	)
+  return (
+    <div className='app'>
+      <div className="border">
+        <SingleDatePicker 
+          value={{
+            year: 2025,
+            month: 1,
+            day: 1
+          }}
+          onSelect={onSelect}
+        />
+      </div>
+    </div>
+  )
 }
 ```
 
@@ -64,6 +63,15 @@ export default () => {
 
 More features are on the roadmap.
 
+## Contribution & Development
+
+```zsh
+npm i # or `yarn`
+npm run dev # or `yarn dev`
+```
+
+Then the package will launch a testing React hot-reload server on `localhost:1926`. The server file is available in the `playground` folder, feel free to modify the content inside it.
+
 ## License
 
 MIT

package-lock.json

@@ -23,6 +23,7 @@
         "typescript": "~5.7.2",
         "typescript-eslint": "^8.22.0",
         "vite": "^6.1.0",
+        "vite-plugin-css-injected-by-js": "^3.5.2",
         "vite-plugin-dts": "^4.5.0"
       },
       "peerDependencies": {
@@ -4523,6 +4524,16 @@
         }
       }
     },
+    "node_modules/vite-plugin-css-injected-by-js": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/vite-plugin-css-injected-by-js/-/vite-plugin-css-injected-by-js-3.5.2.tgz",
+      "integrity": "sha512-2MpU/Y+SCZyWUB6ua3HbJCrgnF0KACAsmzOQt1UvRVJCGF6S8xdA3ZUhWcWdM9ivG4I5az8PnQmwwrkC2CAQrQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "vite": ">2.0.0-0"
+      }
+    },
     "node_modules/vite-plugin-dts": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/vite-plugin-dts/-/vite-plugin-dts-4.5.0.tgz",

package.json

@@ -22,21 +22,25 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.18",
     "globals": "^15.14.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "sass-embedded": "^1.85.0",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.22.0",
     "vite": "^6.1.0",
-    "vite-plugin-dts": "^4.5.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vite-plugin-dts": "^4.5.0"
   },
   "exports": {
-    "import": "./dist/datenel.es.js",
+    "types": "./dist/src/index.d.ts",
+    "import": "./dist/index.es.js",
     "require": "./dist/index.cjs.js",
-    "default": "./dist/datenel.es.js"
+    "default": "./dist/index.es.js"
   },
   "main": "dist/index.cjs.js",
-  "module": "dist/datenel.es.js",
+  "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
-  "files": ["dist"]
+  "files": [
+    "dist"
+  ]
 }

playground/app.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { WeekPicker } from "../src/index.ts"
+import { SingleDatePicker } from "../dist/index.es"
 import './app.scss'
 
 export default () => {
@@ -11,7 +11,7 @@ export default () => {
 	return (<div className='app'>
 
 		<div className="border">
-			<WeekPicker 
+			<SingleDatePicker 
 				value={{
 					year: 2025,
 					month: 1,

src/components/SingleDatePicker.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { getCalendarDates, getL10Weekday, generateUniqueId, applyColor } from '../utils'
 
-interface Props {
+export interface SingleDatePickerProps {
 	/**
 	 	* Control the selected
 		* date programmatically, including situations like provide a default value or control the selected 
@@ -78,9 +78,9 @@ interface Props {
  * 
  * @component
  * 
- * @param {Props} props
+ * @param {SingleDatePickerProps} props
  */
-export default ({ value, onSelect, localization, onClose, mainColor = '#000000', accentColor = '#000000', reversedColor = '#ffffff', hoverColor = '#00000017', borderColor = '#e0e0e0' }: Props) => {
+const SingleDatePicker: React.FC = ({ value, onSelect, localization, onClose, mainColor = '#000000', accentColor = '#000000', reversedColor = '#ffffff', hoverColor = '#00000017', borderColor = '#e0e0e0' }: SingleDatePickerProps) => {
 	const [currentMonth, setCurrentMonth] = useState(new Date().getMonth())
 	const [currentYear, setCurrentYear] = useState(new Date().getFullYear())
 	const [selectedDate, setSelectedDate] = useState(new Date())
@@ -225,3 +225,5 @@ export default ({ value, onSelect, localization, onClose, mainColor = '#000000',
 		</div>
 	)
 }
+
+export default SingleDatePicker

src/index.ts

@@ -1,3 +1,3 @@
 import './style.scss'
 
-export {default as WeekPicker} from './components/SingleDatePicker.tsx'
+export {default as SingleDatePicker} from './components/SingleDatePicker'

tsconfig.app.json

@@ -10,9 +10,10 @@
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
+    "emitDeclarationOnly": true,
+    "declaration": true,
     "isolatedModules": true,
     "moduleDetection": "force",
-    "noEmit": true,
     "jsx": "react-jsx",
 
     /* Linting */
@@ -20,7 +21,10 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+
+    "composite": true,
+    "outDir": "./dist" // 指定输出目录
   },
-  "include": ["src"]
+  "include": ["src", "tsconfig.app.json", "tsconfig.node.json"]
 }

tsconfig.json

@@ -9,6 +9,9 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]
-    }
-  }
+    },
+    "declaration": true,
+    "outDir": "./dist"
+  },
+  "include": ["src/**/*", "tsconfig.app.json", "tsconfig.node.json"]
 }

tsconfig.node.json

@@ -9,16 +9,19 @@
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
+    "emitDeclarationOnly": true,
+    "declaration": true,
     "isolatedModules": true,
     "moduleDetection": "force",
-    "noEmit": true,
 
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+
+    "composite": true
   },
   "include": ["vite.config.ts"]
 }

vite.config.ts

@@ -2,24 +2,39 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import dts from 'vite-plugin-dts'
 import path from "path"
+import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js"
 
 export default defineConfig(({mode}) => ({
   build: {
     lib: {
       entry: "src/index.ts",
       name: "datenel-react",
-      fileName: format => `datenel.${format}.js`,
+      fileName: format => `index.${format}.js`,
     },
     rollupOptions: {
+      preserveEntrySignatures: "strict",
       external: ["react"],
       output: {
         globals: {
           react: "React",
+          "react-dom": "ReactDOM",
         },
+        assetFileNames: assetInfo => {
+          if (assetInfo.names[0].endsWith(".css")) {
+            return "index.css";
+          }
+          return `assets/${assetInfo.names[0]}`;
+        }
       },
     },
   },
-  plugins: [react(), dts()],
+  plugins: [
+    react(),
+    dts({
+      tsconfigPath: "./tsconfig.app.json"
+    }),
+    cssInjectedByJsPlugin()
+  ],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),