From ed679da011768c6e214fb9a39efa2a90102ab4ed Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Mon, 18 Nov 2024 12:53:04 +0600 Subject: [PATCH 1/3] Installed vite plugin to preserve directives --- package-lock.json | 17 +++- package.json | 225 +++++++++++++++++++++++----------------------- 2 files changed, 128 insertions(+), 114 deletions(-) diff --git a/package-lock.json b/package-lock.json index c4875601..421adf5e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@bsf/force-ui", - "version": "1.0.0", + "version": "1.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@bsf/force-ui", - "version": "1.0.0", + "version": "1.1.0", "license": "ISC", "dependencies": { "@emotion/is-prop-valid": "^1.3.0", @@ -66,6 +66,7 @@ "globals": "^15.9.0", "postcss": "^8.4.39", "prettier": "^3.2.5", + "rollup-preserve-directives": "^1.1.2", "storybook": "^8.3.5", "storybook-addon-paddings": "^6.0.2", "stylelint": "^16.8.2", @@ -14519,6 +14520,18 @@ "fsevents": "~2.3.2" } }, + "node_modules/rollup-preserve-directives": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/rollup-preserve-directives/-/rollup-preserve-directives-1.1.2.tgz", + "integrity": "sha512-OOaYh4zO0Dcd/eVWGB8H69CgTiohl+jJqc2TLtjLENVIQaV2rxO3OW6RILzCQOdDvPT+/rzwRp+97OXhem895Q==", + "dev": true, + "dependencies": { + "magic-string": "^0.30.5" + }, + "peerDependencies": { + "rollup": "^2.0.0 || ^3.0.0 || ^4.0.0" + } + }, "node_modules/run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", diff --git a/package.json b/package.json index baecb802..3a54acad 100644 --- a/package.json +++ b/package.json @@ -17,116 +17,117 @@ "require": "./dist/withTW.cjs" } }, - "scripts": { - "build": "cross-env tsc -b && vite build", - "start": "cross-env tsc -b && vite build -w", - "pretty-fix": "prettier --write .", - "pretty-lint": "prettier --check .", - "lint:js": "eslint ./src", - "eslint:js-fix": "eslint ./src --fix", - "lint:js-fix": "npm run pretty-fix && npm run eslint:js-fix", - "lint:css": "stylelint **/*.{scss,css}", - "lint:css-fix": "stylelint **/*.{scss,css} --fix", - "storybook": "storybook dev -p 6006", - "test": "test-storybook", - "test:watch": "test-storybook --watch", - "build-storybook": "storybook build", - "chromatic": "npx chromatic --project-token CHROMATIC_PROJECT_TOKEN", - "package": "sh bin/build.sh", - "release": "npm run build && npm run package ", - "deploy-storybook": "storybook-to-ghpages" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/rahulvarma722/bsf-admin-ui.git" - }, - "volta": { - "node": "18.15.0" - }, - "keywords": [ - "bsf", - "components", - "library" - ], - "license": "ISC", - "peerDependencies": { - "react": "^18.3.1", - "react-dom": "^18.3.1" - }, - "dependencies": { - "@emotion/is-prop-valid": "^1.3.0", - "@floating-ui/react": "^0.26.20", - "@lexical/react": "^0.17.0", - "@lexical/utils": "^0.17.0", - "clsx": "^2.1.1", - "date-fns": "^4.1.0", - "deepmerge": "^4.3.1", - "framer-motion": "^11.3.29", - "lexical": "^0.17.0", - "lucide-react": "^0.417.0", - "nanoid": "^5.0.7", - "react-day-picker": "^9.1.3", - "styled-components": "^6.1.12", - "tailwind-merge": "^2.4.0", - "tailwindcss-scoped-preflight": "^3.4.3", - "lodash": "^4.17.21", - "recharts": "^2.13.0" - }, - "devDependencies": { - "@chromatic-com/storybook": "^2.0.2", - "@playwright/test": "^1.48.1", - "@storybook/addon-a11y": "^8.3.5", - "@eslint/eslintrc": "^3.1.0", - "@eslint/js": "^9.13.0", - "@storybook/addon-essentials": "^8.3.5", - "@storybook/addon-interactions": "^8.3.5", - "@storybook/addon-links": "^8.3.5", - "@storybook/addon-onboarding": "^8.3.5", - "@storybook/blocks": "^8.3.5", - "@storybook/react": "^8.3.5", - "@storybook/react-vite": "^8.3.5", - "@storybook/storybook-deployer": "^2.8.16", - "@storybook/test": "^8.3.5", - "@storybook/test-runner": "^0.19.1", - "@tailwindcss/container-queries": "^0.1.1", - "@types/react": "^18.3.10", - "@types/react-dom": "^18.3.0", - "@types/node": "^22.7.6", - "@typescript-eslint/eslint-plugin": "^8.11.0", - "@vitejs/plugin-react": "^4.3.2", - "@wordpress/eslint-plugin": "^20.3.0", - "@wordpress/prettier-config": "^4.4.0", - "@wordpress/stylelint-config": "^23.2.0", - "autoprefixer": "^10.4.19", - "axe-playwright": "^2.0.3", - "chromatic": "^11.7.1", - "cross-env": "^7.0.3", - "eslint": "^8.41.0", - "eslint-import-resolver-alias": "^1.1.2", - "eslint-plugin-import": "^2.29.1", - "eslint-plugin-react-hooks": "^5.1.0-rc.0", - "eslint-plugin-react-refresh": "^0.4.12", - "eslint-plugin-storybook": "^0.9.0", - "globals": "^15.9.0", - "postcss": "^8.4.39", - "prettier": "^3.2.5", - "storybook": "^8.3.5", - "storybook-addon-paddings": "^6.0.2", - "stylelint": "^16.8.2", - "tailwindcss": "^3.4.10", - "typescript": "5.4.2", - "typescript-eslint": "^8.7.0", - "vite": "^5.4.8", - "vite-plugin-dts": "^4.2.3", - "@types/lodash": "^4.17.13" - }, - "browserslist": [ - "last 1 version", - "> 1%", - "IE 10" - ], - "bugs": { - "url": "https://github.com/rahulvarma722/bsf-admin-ui/issues" - }, - "homepage": "https://github.com/rahulvarma722/bsf-admin-ui#readme" + "scripts": { + "build": "cross-env tsc -b && vite build", + "start": "cross-env tsc -b && vite build -w", + "pretty-fix": "prettier --write .", + "pretty-lint": "prettier --check .", + "lint:js": "eslint ./src", + "eslint:js-fix": "eslint ./src --fix", + "lint:js-fix": "npm run pretty-fix && npm run eslint:js-fix", + "lint:css": "stylelint **/*.{scss,css}", + "lint:css-fix": "stylelint **/*.{scss,css} --fix", + "storybook": "storybook dev -p 6006", + "test": "test-storybook", + "test:watch": "test-storybook --watch", + "build-storybook": "storybook build", + "chromatic": "npx chromatic --project-token CHROMATIC_PROJECT_TOKEN", + "package": "sh bin/build.sh", + "release": "npm run build && npm run package ", + "deploy-storybook": "storybook-to-ghpages" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/rahulvarma722/bsf-admin-ui.git" + }, + "volta": { + "node": "18.15.0" + }, + "keywords": [ + "bsf", + "components", + "library" + ], + "license": "ISC", + "peerDependencies": { + "react": "^18.3.1", + "react-dom": "^18.3.1" + }, + "dependencies": { + "@emotion/is-prop-valid": "^1.3.0", + "@floating-ui/react": "^0.26.20", + "@lexical/react": "^0.17.0", + "@lexical/utils": "^0.17.0", + "clsx": "^2.1.1", + "date-fns": "^4.1.0", + "deepmerge": "^4.3.1", + "framer-motion": "^11.3.29", + "lexical": "^0.17.0", + "lodash": "^4.17.21", + "lucide-react": "^0.417.0", + "nanoid": "^5.0.7", + "react-day-picker": "^9.1.3", + "recharts": "^2.13.0", + "styled-components": "^6.1.12", + "tailwind-merge": "^2.4.0", + "tailwindcss-scoped-preflight": "^3.4.3" + }, + "devDependencies": { + "@chromatic-com/storybook": "^2.0.2", + "@eslint/eslintrc": "^3.1.0", + "@eslint/js": "^9.13.0", + "@playwright/test": "^1.48.1", + "@storybook/addon-a11y": "^8.3.5", + "@storybook/addon-essentials": "^8.3.5", + "@storybook/addon-interactions": "^8.3.5", + "@storybook/addon-links": "^8.3.5", + "@storybook/addon-onboarding": "^8.3.5", + "@storybook/blocks": "^8.3.5", + "@storybook/react": "^8.3.5", + "@storybook/react-vite": "^8.3.5", + "@storybook/storybook-deployer": "^2.8.16", + "@storybook/test": "^8.3.5", + "@storybook/test-runner": "^0.19.1", + "@tailwindcss/container-queries": "^0.1.1", + "@types/lodash": "^4.17.13", + "@types/node": "^22.7.6", + "@types/react": "^18.3.10", + "@types/react-dom": "^18.3.0", + "@typescript-eslint/eslint-plugin": "^8.11.0", + "@vitejs/plugin-react": "^4.3.2", + "@wordpress/eslint-plugin": "^20.3.0", + "@wordpress/prettier-config": "^4.4.0", + "@wordpress/stylelint-config": "^23.2.0", + "autoprefixer": "^10.4.19", + "axe-playwright": "^2.0.3", + "chromatic": "^11.7.1", + "cross-env": "^7.0.3", + "eslint": "^8.41.0", + "eslint-import-resolver-alias": "^1.1.2", + "eslint-plugin-import": "^2.29.1", + "eslint-plugin-react-hooks": "^5.1.0-rc.0", + "eslint-plugin-react-refresh": "^0.4.12", + "eslint-plugin-storybook": "^0.9.0", + "globals": "^15.9.0", + "postcss": "^8.4.39", + "prettier": "^3.2.5", + "rollup-preserve-directives": "^1.1.2", + "storybook": "^8.3.5", + "storybook-addon-paddings": "^6.0.2", + "stylelint": "^16.8.2", + "tailwindcss": "^3.4.10", + "typescript": "5.4.2", + "typescript-eslint": "^8.7.0", + "vite": "^5.4.8", + "vite-plugin-dts": "^4.2.3" + }, + "browserslist": [ + "last 1 version", + "> 1%", + "IE 10" + ], + "bugs": { + "url": "https://github.com/rahulvarma722/bsf-admin-ui/issues" + }, + "homepage": "https://github.com/rahulvarma722/bsf-admin-ui#readme" } From db2e994059457acf8d6a55df1b65d8170f9d3f82 Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Mon, 18 Nov 2024 12:54:06 +0600 Subject: [PATCH 2/3] Updated the Vite config and ts config --- tsconfig.app.json | 4 ++-- vite.config.ts | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/tsconfig.app.json b/tsconfig.app.json index d49b5b0a..a075de67 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -1,9 +1,9 @@ { "compilerOptions": { "baseUrl": ".", - "target": "ES2020", + "target": "ESNext", "useDefineForClassFields": true, - "lib": ["ES2020", "DOM", "DOM.Iterable"], + "lib": ["ESNext", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, diff --git a/vite.config.ts b/vite.config.ts index fcd53d19..121b0e5d 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,3 +1,4 @@ +import preserveDirectives from 'rollup-preserve-directives'; import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import { resolve } from 'path'; @@ -34,5 +35,6 @@ export default defineConfig({ plugins: [ react(), dts({ rollupTypes: true, tsconfigPath: './tsconfig.app.json' }), + preserveDirectives(), ], }); From c671dad0abb55416b6063d01e9a67c3f7cbd7005 Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Mon, 18 Nov 2024 12:57:59 +0600 Subject: [PATCH 3/3] Use `use client` directive for the Nextjs --- src/components/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/index.ts b/src/components/index.ts index 990b5edd..1ec4b16a 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,3 +1,5 @@ +'use client'; + export { default as Button } from './button'; export { default as Switch } from './switch'; export { default as Checkbox } from './checkbox';