@liguelead/design-system 0.0.28 → 0.0.30

package/components/Wizard/Wizard.stories.tsx

@@ -0,0 +1,186 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Wizard from './Wizard'
+import Button from '../Button/Button'
+import Text from '../Text/Text'
+import TextField from '../TextField/TextField'
+
+const meta: Meta<typeof Wizard> = {
+  title: 'Navigation/Wizard',
+  component: Wizard,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    menuNavigation: {
+      control: 'boolean',
+      description: 'Allow navigation through menu items'
+    }
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: [
+      <Wizard.Step key="step1" label="Personal Info">
+        <div>
+          <Text size="heading03" className='mb-16'>Personal Information</Text>
+          <Text>Please enter your personal details.</Text>
+          <div style={{ marginTop: '16px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
+            <TextField label="First Name" placeholder="Enter your first name" />
+            <TextField label="Last Name" placeholder="Enter your last name" />
+            <TextField label="Email" type="email" placeholder="Enter your email" />
+          </div>
+        </div>
+      </Wizard.Step>,
+      <Wizard.Step key="step2" label="Address">
+        <div>
+          <Text size="heading03" className='mb-16'>Address Information</Text>
+          <Text>Please enter your address details.</Text>
+          <div style={{ marginTop: '16px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
+            <TextField label="Street Address" placeholder="Enter your street address" />
+            <TextField label="City" placeholder="Enter your city" />
+            <TextField label="ZIP Code" placeholder="Enter your ZIP code" />
+          </div>
+        </div>
+      </Wizard.Step>,
+      <Wizard.Step key="step3" label="Review">
+        <div>
+          <Text size="heading03" className='mb-16'>Review & Submit</Text>
+          <Text>Please review your information before submitting.</Text>
+          <div style={{ marginTop: '16px', padding: '16px', backgroundColor: '#f5f5f5', borderRadius: '4px' }}>
+            <Text size="body02">Review your entered information and click submit to complete the process.</Text>
+          </div>
+        </div>
+      </Wizard.Step>
+    ]
+  },
+}
+
+export const WithoutMenuNavigation: Story = {
+  args: {
+    menuNavigation: false,
+    children: [
+      <Wizard.Step key="step1" label="Step 1">
+        <div>
+          <Text size="heading03" className='mb-16'>Step 1: Getting Started</Text>
+          <Text>This wizard doesn't allow menu navigation. You must go through steps sequentially.</Text>
+        </div>
+      </Wizard.Step>,
+      <Wizard.Step key="step2" label="Step 2">
+        <div>
+          <Text size="heading03" className='mb-16'>Step 2: Configuration</Text>
+          <Text>Configure your settings in this step.</Text>
+        </div>
+      </Wizard.Step>,
+      <Wizard.Step key="step3" label="Step 3">
+        <div>
+          <Text size="heading03" className='mb-16'>Step 3: Completion</Text>
+          <Text>Final step of the wizard.</Text>
+        </div>
+      </Wizard.Step>
+    ]
+  },
+}
+
+export const AccountSetup: Story = {
+  render: () => (
+    <Wizard>
+      <Wizard.Step label="Account Details">
+        <div>
+          <Text size="heading02" className='mb-8'>Create Your Account</Text>
+          <Text className='mb-24'>Enter your basic account information.</Text>
+          
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+            <TextField label="Username" placeholder="Choose a username" />
+            <TextField label="Email Address" type="email" placeholder="your@email.com" />
+            <TextField label="Password" type="password" placeholder="Create a strong password" />
+            <TextField label="Confirm Password" type="password" placeholder="Confirm your password" />
+          </div>
+        </div>
+      </Wizard.Step>
+      
+      <Wizard.Step label="Profile Setup">
+        <div>
+          <Text size="heading02" className='mb-8'>Profile Information</Text>
+          <Text className='mb-24'>Tell us more about yourself.</Text>
+          
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+            <TextField label="Full Name" placeholder="Enter your full name" />
+            <TextField label="Company" placeholder="Your company name (optional)" />
+            <TextField label="Phone Number" placeholder="Your phone number" />
+          </div>
+        </div>
+      </Wizard.Step>
+      
+      <Wizard.Step label="Preferences">
+        <div>
+          <Text size="heading02" className='mb-8'>Set Your Preferences</Text>
+          <Text className='mb-24'>Customize your experience.</Text>
+          
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+            <div>
+              <Text tag="label">Notification Preferences</Text>
+              <div style={{ marginTop: '8px', display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                  <input type="checkbox" />
+                  <Text size="body02">Email notifications</Text>
+                </label>
+                <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                  <input type="checkbox" />
+                  <Text size="body02">SMS notifications</Text>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Wizard.Step>
+      
+      <Wizard.Step label="Complete">
+        <div>
+          <Text size="heading02" className='mb-8'>Account Created Successfully!</Text>
+          <Text className='mb-24'>Your account has been set up and is ready to use.</Text>
+          
+          <div style={{ 
+            padding: '20px', 
+            backgroundColor: '#f0f9ff', 
+            border: '1px solid #0ea5e9', 
+            borderRadius: '8px',
+            marginBottom: '24px'
+          }}>
+            <Text size="body01">
+              ✓ Account created successfully<br/>
+              ✓ Profile information saved<br/>
+              ✓ Preferences configured<br/>
+              ✓ Welcome email sent
+            </Text>
+          </div>
+          
+          <Button>Get Started</Button>
+        </div>
+      </Wizard.Step>
+    </Wizard>
+  ),
+}
+
+export const ShortWizard: Story = {
+  args: {
+    children: [
+      <Wizard.Step key="step1" label="Start">
+        <div>
+          <Text size="heading03"  className='mb-16'>Welcome</Text>
+          <Text>This is a simple two-step wizard.</Text>
+        </div>
+      </Wizard.Step>,
+      <Wizard.Step key="step2" label="Finish">
+        <div>
+          <Text size="heading03" className='mb-16'>Complete</Text>
+          <Text>You've reached the end of the wizard!</Text>
+        </div>
+      </Wizard.Step>
+    ]
+  },
+}

package/components/index.ts

@@ -16,3 +16,4 @@ export { default as RadioButton } from './RadioButton'
 export { ToastProvider, Toaster } from './Toaster'
 export { default as Dialog } from './Dialog'
 export { Combobox } from './Combobox'
+export { default as Table } from './Table'

package/package.json

@@ -1,19 +1,30 @@
 {
     "name": "@liguelead/design-system",
-    "version": "0.0.28",
+    "version": "0.0.30",
     "type": "module",
     "main": "components/index.ts",
     "publishConfig": {
         "access": "public"
     },
+    "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0",
+        "styled-components": ">=6.0.0",
+        "react-hook-form": ">=7.0.0"
+    },
     "dependencies": {
         "@liguelead/foundation": "^0.0.16",
         "@phosphor-icons/react": "^2.1.7",
         "@radix-ui/react-dropdown-menu": "^2.1.6",
+        "react-day-picker": "^9.12.0",
         "@radix-ui/react-select": "^2.1.6",
+        "@radix-ui/react-popover": "^1.1.15",
+        "@radix-ui/react-dialog": "^1.1.15",
         "lodash": "^4.17.21",
         "react-datepicker": "^7.6.0",
-        "cmdk": "^1.1.1"
+        "react-toastify": "^11.0.5",
+        "cmdk": "^1.1.1",
+        "date-fns": "^2.30.0"
     },
     "scripts": {
         "lint": "eslint ."
@@ -34,8 +45,10 @@
         "eslint-plugin-react-hooks": "^5.0.0",
         "eslint-plugin-react-refresh": "^0.4.14",
         "globals": "^15.11.0",
-        "react": "^18.3.1",
+        "react": "^19.2.0",
+        "react-dom": "^19.2.0",
         "styled-components": "6.1.13",
+        "react-hook-form": "^7.53.1",
         "typescript": "5.6.2",
         "typescript-eslint": "^8.11.0",
         "vite-tsconfig-paths": "^5.1.3"