diff --git a/.gitea/workflows/publishToNpm.yaml b/.gitea/workflows/publishToNpm.yaml index 58646b0..3232df6 100644 --- a/.gitea/workflows/publishToNpm.yaml +++ b/.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 }} diff --git a/README.md b/README.md index aa8b936..5130c7e 100644 --- a/README.md +++ b/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 ( -
-
- -
-
- ) + return ( +
+
+ +
+
+ ) } ``` @@ -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 \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 1918eb0..59f5adf 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 6f9cda4..0e7efb6 100644 --- a/package.json +++ b/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" + ] } diff --git a/playground/app.tsx b/playground/app.tsx index c26d28d..565a61b 100644 --- a/playground/app.tsx +++ b/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 (
- { +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()) @@ -224,4 +224,6 @@ export default ({ value, onSelect, localization, onClose, mainColor = '#000000', { !!onClose && }
) -} \ No newline at end of file +} + +export default SingleDatePicker \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 4a2a50c..75a3e89 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,3 +1,3 @@ import './style.scss' -export {default as WeekPicker} from './components/SingleDatePicker.tsx' \ No newline at end of file +export {default as SingleDatePicker} from './components/SingleDatePicker' \ No newline at end of file diff --git a/tsconfig.app.json b/tsconfig.app.json index 358ca9b..1da4adf 100644 --- a/tsconfig.app.json +++ b/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"] +} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index dfc4658..2456ef6 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,6 +9,9 @@ "baseUrl": ".", "paths": { "@/*": ["src/*"] - } - } -} + }, + "declaration": true, + "outDir": "./dist" + }, + "include": ["src/**/*", "tsconfig.app.json", "tsconfig.node.json"] +} \ No newline at end of file diff --git a/tsconfig.node.json b/tsconfig.node.json index db0becc..0ee34bb 100644 --- a/tsconfig.node.json +++ b/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"] } diff --git a/vite.config.ts b/vite.config.ts index db4dafb..e510078 100644 --- a/vite.config.ts +++ b/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"),