shadcn-packaged 0.0.1 → 2025.1.18

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-present anuoua
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,50 +1,109 @@
-# React + TypeScript + Vite
+# Shadcn Packaged
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+This is a npm package of all [shadcn/ui](https://ui.shadcn.com/) components without CLI for easy use. 
 
-Currently, two official plugins are available:
+It simply exports all the useful files with type declaration.
 
-- [@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
+## Pre work
 
-## Expanding the ESLint configuration
+1. Create a new react project.
+2. [Get started with Tailwind CSS](https://tailwindcss.com/docs/installation).
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+## Install
 
-- Configure the top-level `parserOptions` property like this:
+```shell
+npm i tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react
+npm i shadcn-packaged
+```
 
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
+## Configuation
+
+tailwind.config.js
+
+```javascript
+const config = {
+  content: [
+    "...",
+    "./node_modules/shadcn-packaged/**/*.{jsx,js,ts,tsx}",
+  ],
+  presets: [require("shadcn-packaged/tailwind.config")],
+};
+export default config;
 ```
 
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+next.config.js
 
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
+```javascript
+const nextConfig = {
+  // ...
+  transpilePackages: ["shadcn-packaged"],
+};
 
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
+export default nextConfig;
+```
+
+vite.config.js [#optimizedeps-include](https://cn.vitejs.dev/config/dep-optimization-options.html#optimizedeps-include)
+
+```javascript
+export default defineConfig({
+  optimizeDeps: {
+    include: ['shadcn-packaged/**/*.{js,jsx,ts,tsx}'],
   },
 })
 ```
+
+## Usage
+
+Package Struct
+
+- shadcn-packaged/ui/*: components
+- shadcn-packaged/hooks/*: hooks
+- shadcn-packaged/lib/utils: utils
+
+Import style
+
+> If you have a fully customized style in tailwindcss entry, you don't need to import it
+
+```javascript
+import "shadcn-packaged/index.css";
+```
+
+Import code
+
+```javascript
+import { Button } from 'shadcn-packaged/ui/button';
+import { cn } from 'shadcn-packaged/lib/utils';
+import { useToast } from 'shadcn/hooks/use-toast';
+```
+
+## Type declaration and IDE auto import
+
+This package support vscode auto import, add below code to project main.tsx or root layout.tsx in NextJS
+
+```typescript
+/// <reference types="shadcn-packaged" />
+```
+
+## Custom Theme
+
+index.css | global.css (the tailwindcss entry)
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* theme here */
+  }
+
+  .dark {
+    /* theme here */
+  }
+}
+```
+
+## License
+
+MIT anuoua

package/index.css

@@ -1,4 +1,6 @@
-
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 @layer base {
   :root {

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "shadcn-packaged",
   "private": false,
-  "version": "0.0.1",
+  "version": "2025.1.18",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "npm run shadcn:clean && npm run shadcn:generate && npm run shadcn:tsc && npm run shadcn:move",
     "shadcn:clean": "rm -rf lib ui hooks dist ~shadcn-packaged/hooks ~shadcn-packaged/ui",
     "shadcn:generate": "npx shadcn@latest add -a -y -o && node ./modify.mjs",
-    "shadcn:tsc": "tsc -p tsconfig.json && node ./types.mjs",
-    "shadcn:move": "mv dist/* ./",
-    "postinstall": "npm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react"
+    "shadcn:tsc": "npm run shadcn:tsc:preinstall && tsc -p tsconfig.json && node ./types.mjs",
+    "shadcn:tsc:preinstall": "npm install -D tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react",
+    "shadcn:move": "mv dist/* ./"
   },
   "types": "index.d.ts",
   "files": [
@@ -50,21 +50,16 @@
     "@radix-ui/react-toggle": "^1.1.1",
     "@radix-ui/react-toggle-group": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.6",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.5.2",
     "input-otp": "^1.4.2",
-    "lucide-react": "^0.473.0",
     "next-themes": "^0.4.4",
     "react-day-picker": "^8.10.1",
     "react-hook-form": "^7.54.2",
     "react-resizable-panels": "^2.1.7",
     "recharts": "^2.15.0",
     "sonner": "^1.7.2",
-    "tailwind-merge": "^2.6.0",
-    "tailwindcss-animate": "^1.0.7",
     "vaul": "^1.1.2",
     "zod": "^3.24.1"
   },
@@ -72,8 +67,13 @@
     "@types/node": "^22.10.7",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "globals": "^15.14.0",
+    "lucide-react": "^0.473.0",
+    "tailwind-merge": "^2.6.0",
     "tailwindcss": "^3.4.17",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "~5.6.2"
   }
 }