@alkimi.org/ui-kit 0.1.5 → 0.1.7

package/README.github.md

@@ -0,0 +1,315 @@
+# Alkimi UI Kit
+
+A React component library built with [shadcn/ui](https://ui.shadcn.com/) and [Tailwind CSS](https://tailwindcss.com/).
+
+## Installation
+
+```bash
+npm install @alkimi.org/ui-kit
+```
+
+## Setup
+
+### 1. Install Tailwind CSS
+
+If you haven't already, install Tailwind CSS in your project:
+
+```bash
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+```
+
+### 2. Configure Tailwind
+
+Update your `tailwind.config.js` to include the library's content:
+
+```js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+    "./node_modules/@alkimi/ui-kit/dist/**/*.{js,mjs}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}
+```
+
+### 3. Import Styles
+
+Import the library's CSS in your main application file (e.g., `App.tsx` or `index.tsx`):
+
+```tsx
+import "@alkimi.org/ui-kit/styles.css"
+```
+
+Or if you prefer, add the CSS variables to your own CSS file:
+
+```css
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+```
+
+## Usage
+
+### Button Component
+
+```tsx
+import { Button } from "@alkimi/ui-kit"
+
+function App() {
+  return (
+    <div>
+      <Button>Click me</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="destructive">Delete</Button>
+      <Button variant="outline">Outline</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="link">Link</Button>
+      <Button size="sm">Small</Button>
+      <Button size="lg">Large</Button>
+    </div>
+  )
+}
+```
+
+### Card Component
+
+```tsx
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Button,
+} from "@alkimi/ui-kit"
+
+function App() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Card Title</CardTitle>
+        <CardDescription>Card Description</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>Card Content</p>
+      </CardContent>
+      <CardFooter>
+        <Button>Action</Button>
+      </CardFooter>
+    </Card>
+  )
+}
+```
+
+## Adding More Components
+
+To add more shadcn/ui components to this library:
+
+1. Use the shadcn CLI to add components:
+
+   ```bash
+   npx shadcn-ui@latest add [component-name]
+   ```
+
+2. Export the new component in [src/index.ts](src/index.ts):
+
+   ```tsx
+   export { ComponentName } from "./components/component-name"
+   ```
+
+3. Rebuild the library:
+   ```bash
+   npm run build
+   ```
+
+## Development
+
+### Running the Demo
+
+To see the components in action, run the demo application:
+
+```bash
+cd demo
+npm install
+npm run dev
+```
+
+Then open [http://localhost:5173](http://localhost:5173) in your browser.
+
+The demo showcases all available components with interactive examples, including:
+
+- All button variants and sizes
+- Card layouts and compositions
+- Dark mode toggle
+- Interactive component states
+
+### Build
+
+Build the library for production:
+
+```bash
+npm run build
+```
+
+### Watch Mode
+
+Build the library in watch mode during development:
+
+```bash
+npm run dev
+```
+
+### Type Check
+
+Run TypeScript type checking:
+
+```bash
+npm run type-check
+```
+
+### Storybook
+
+View and develop components in isolation using Storybook:
+
+```bash
+npm run storybook
+```
+
+This will start Storybook on [http://localhost:6006](http://localhost:6006).
+
+#### Building Storybook for Deployment
+
+To build a static version of Storybook for deployment:
+
+```bash
+npm run build-storybook
+```
+
+This will generate a static site in the `storybook-static` directory that you can deploy to any static hosting service.
+
+#### Deploying to Vercel
+
+**Option 1: Using Vercel Dashboard (No Terminal Required)**
+
+1. Build Storybook locally: `npm run build-storybook`
+2. Go to [vercel.com](https://vercel.com) and log in
+3. Click "Add New..." → "Project"
+4. If this is your first time:
+   - Import your repository from GitHub/GitLab/Bitbucket
+   - In the project settings, configure:
+     - **Build Command**: `npm run build-storybook`
+     - **Output Directory**: `storybook-static`
+     - **Install Command**: `npm install`
+5. Click "Deploy"
+
+Vercel will automatically deploy your Storybook and provide you with a URL. Every time you push to your main branch, Vercel will rebuild and redeploy automatically.
+
+**Option 2: Using Vercel CLI**
+
+1. Build Storybook: `npm run build-storybook`
+2. Install Vercel CLI (if not already installed): `npm i -g vercel`
+3. Deploy: `vercel storybook-static`
+
+## Publishing to npm
+
+1. Update the version number in [package.json](package.json) (e.g., from `0.1.3` to `0.1.4`)
+2. Build the library: `npm run build`
+3. Login to npm (if not already logged in): `npm login`
+4. Publish: `npm publish`
+
+**Note:** Make sure to bump the version in [package.json](package.json) before publishing any changes to avoid conflicts with existing versions on npm.
+
+## License
+
+MIT

package/README.md

@@ -192,81 +192,6 @@ function App() {
 }
 ```
 
-## Adding More Components
-
-To add more shadcn/ui components to this library:
-
-1. Use the shadcn CLI to add components:
-
-   ```bash
-   npx shadcn-ui@latest add [component-name]
-   ```
-
-2. Export the new component in [src/index.ts](src/index.ts):
-
-   ```tsx
-   export { ComponentName } from "./components/component-name"
-   ```
-
-3. Rebuild the library:
-   ```bash
-   npm run build
-   ```
-
-## Development
-
-### Running the Demo
-
-To see the components in action, run the demo application:
-
-```bash
-cd demo
-npm install
-npm run dev
-```
-
-Then open [http://localhost:5173](http://localhost:5173) in your browser.
-
-The demo showcases all available components with interactive examples, including:
-
-- All button variants and sizes
-- Card layouts and compositions
-- Dark mode toggle
-- Interactive component states
-
-### Build
-
-Build the library for production:
-
-```bash
-npm run build
-```
-
-### Watch Mode
-
-Build the library in watch mode during development:
-
-```bash
-npm run dev
-```
-
-### Type Check
-
-Run TypeScript type checking:
-
-```bash
-npm run type-check
-```
-
-## Publishing to npm
-
-1. Update the version number in [package.json](package.json) (e.g., from `0.1.3` to `0.1.4`)
-2. Build the library: `npm run build`
-3. Login to npm (if not already logged in): `npm login`
-4. Publish: `npm publish`
-
-**Note:** Make sure to bump the version in [package.json](package.json) before publishing any changes to avoid conflicts with existing versions on npm.
-
 ## License
 
 MIT

package/README.npm.md

@@ -0,0 +1,197 @@
+# Alkimi UI Kit
+
+A React component library built with [shadcn/ui](https://ui.shadcn.com/) and [Tailwind CSS](https://tailwindcss.com/).
+
+## Installation
+
+```bash
+npm install @alkimi.org/ui-kit
+```
+
+## Setup
+
+### 1. Install Tailwind CSS
+
+If you haven't already, install Tailwind CSS in your project:
+
+```bash
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+```
+
+### 2. Configure Tailwind
+
+Update your `tailwind.config.js` to include the library's content:
+
+```js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+    "./node_modules/@alkimi/ui-kit/dist/**/*.{js,mjs}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}
+```
+
+### 3. Import Styles
+
+Import the library's CSS in your main application file (e.g., `App.tsx` or `index.tsx`):
+
+```tsx
+import "@alkimi.org/ui-kit/styles.css"
+```
+
+Or if you prefer, add the CSS variables to your own CSS file:
+
+```css
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+```
+
+## Usage
+
+### Button Component
+
+```tsx
+import { Button } from "@alkimi/ui-kit"
+
+function App() {
+  return (
+    <div>
+      <Button>Click me</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="destructive">Delete</Button>
+      <Button variant="outline">Outline</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="link">Link</Button>
+      <Button size="sm">Small</Button>
+      <Button size="lg">Large</Button>
+    </div>
+  )
+}
+```
+
+### Card Component
+
+```tsx
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Button,
+} from "@alkimi/ui-kit"
+
+function App() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Card Title</CardTitle>
+        <CardDescription>Card Description</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>Card Content</p>
+      </CardContent>
+      <CardFooter>
+        <Button>Action</Button>
+      </CardFooter>
+    </Card>
+  )
+}
+```
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alkimi.org/ui-kit",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "A React component library built with shadcn/ui and Tailwind CSS",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -20,7 +20,10 @@
     "build": "tsup && cp dist/index.css dist/styles.css && cp dist/index.css.map dist/styles.css.map",
     "dev": "tsup --watch",
     "type-check": "tsc --noEmit",
-    "prepublishOnly": "npm run build"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prepublishOnly": "npm run build && mv README.md README.github.md && cp README.npm.md README.md",
+    "postpublish": "mv README.github.md README.md"
   },
   "keywords": [
     "react",
@@ -44,6 +47,13 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-links": "^8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-vite": "^8.6.14",
+    "@storybook/test": "^8.6.14",
     "@types/node": "^20.10.0",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
@@ -51,10 +61,12 @@
     "postcss": "^8.4.32",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "storybook": "^8.6.14",
     "tailwindcss": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",
     "tsup": "^8.0.1",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "vite": "^5.4.21"
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.0.2",