@campxdev/react-blueprint 2.3.11 → 3.0.0-alpha.1

package/src/stories/DataDisplay/Timeline.stories.tsx

@@ -1,6 +1,5 @@
-import { Stack, Typography } from '@mui/material';
-import { Meta } from '@storybook/react';
-import { Timeline, TimelineProps } from '../../components/export';
+import { Meta, StoryFn } from '@storybook/react';
+import { Timeline, TimelineProps, Typography } from '../../components/export';
 
 // Define the default export with Meta type including the component type
 export default {
@@ -11,7 +10,7 @@ export default {
     position: {
       control: {
         type: 'select',
-        options: ['left', 'right', 'alternate'],
+        options: ['left', 'right', 'alternate', 'alternate-reverse'],
       },
       description: 'Position of the Timeline items.',
     },
@@ -20,131 +19,137 @@ export default {
       description:
         'Array of timeline items containing content and optional variants.',
     },
-    sx: {
-      control: 'object',
-      description: 'Custom styling for the Timeline component.',
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes for the Timeline component.',
     },
   },
 } as Meta<typeof Timeline>;
 
-// Define stories directly as objects with render function
-export const DefaultTimeline = {
-  render: (args: TimelineProps) => <Timeline {...args} />,
-  args: {
-    position: 'right',
-    timelineItems: [
-      {
-        timelineContent: (
-          <Stack>
-            <Typography>Requirement Gathering</Typography>
-          </Stack>
-        ),
-        variant: 'info',
-      },
-      {
-        timelineContent: (
-          <Stack>
-            <Typography>Design Phase</Typography>
-          </Stack>
-        ),
-        variant: 'warning',
-      },
-      {
-        timelineContent: (
-          <Stack>
-            <Typography>Development Phase</Typography>
-          </Stack>
-        ),
-        variant: 'success',
-      },
-      {
-        timelineContent: (
-          <Stack>
-            <Typography>Testing Phase</Typography>
-          </Stack>
-        ),
-      },
-      {
-        timelineContent: (
-          <Stack direction="row" justifyContent="space-between">
-            <Typography>Deployment</Typography>
-            <Typography>Launch to production.</Typography>
-          </Stack>
-        ),
-        variant: 'error',
-      },
-    ],
-  },
+const Template: StoryFn<TimelineProps> = (args) => <Timeline {...args} />;
+
+export const DefaultTimeline = Template.bind({});
+DefaultTimeline.args = {
+  position: 'right',
+  timelineItems: [
+    {
+      timelineContent: (
+        <div>
+          <Typography variant="p">Requirement Gathering</Typography>
+        </div>
+      ),
+      variant: 'info',
+    },
+    {
+      timelineContent: (
+        <div>
+          <Typography variant="p">Design Phase</Typography>
+          <Typography variant={'muted'}>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius
+            necessitatibus atque inventore eveniet ipsam eos ipsa, nulla facere
+            rem, officia fugiat voluptates, consectetur blanditiis pariatur enim
+            commodi non molestiae quas!
+          </Typography>
+        </div>
+      ),
+      variant: 'warning',
+    },
+    {
+      timelineContent: (
+        <div>
+          <Typography variant="p">Development Phase</Typography>
+        </div>
+      ),
+      variant: 'success',
+    },
+    {
+      timelineContent: (
+        <div>
+          <Typography variant="p">Testing Phase</Typography>
+        </div>
+      ),
+    },
+    {
+      timelineContent: (
+        <div>
+          <Typography variant="p">Deployment</Typography>
+          <Typography variant="muted">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius
+            necessitatibus atque inventore eveniet ipsam eos ipsa, nulla facere
+            rem, officia fugiat voluptates, consectetur blanditiis pariatur enim
+            commodi non molestiae quas!
+          </Typography>
+        </div>
+      ),
+      variant: 'error',
+    },
+  ],
 };
 
-export const AlternatePositionTimeline = {
-  render: (args: TimelineProps) => <Timeline {...args} />,
-  args: {
-    position: 'alternate',
-    timelineItems: [
-      {
-        timelineContent: (
-          <Stack>
-            <Typography>Initial Planning</Typography>
-          </Stack>
-        ),
-        variant: 'info',
-      },
-      {
-        timelineContent: (
-          <Stack>
-            <Typography>Requirement Finalization</Typography>
-          </Stack>
-        ),
-        variant: 'warning',
-      },
-      {
-        timelineContent: (
-          <Stack>
-            <Typography>Development</Typography>
-          </Stack>
-        ),
-        variant: 'success',
-      },
-      {
-        timelineContent: (
-          <Stack>
-            <Typography>Release</Typography>
-          </Stack>
-        ),
-      },
-    ],
-  },
+export const AlternatePositionTimeline = Template.bind({});
+AlternatePositionTimeline.args = {
+  position: 'alternate',
+  timelineItems: [
+    {
+      timelineContent: (
+        <div>
+          <Typography variant="p">Initial Planning</Typography>
+        </div>
+      ),
+      variant: 'info',
+    },
+    {
+      timelineContent: (
+        <div>
+          <Typography variant="p">Requirement Finalization</Typography>
+        </div>
+      ),
+      variant: 'warning',
+    },
+    {
+      timelineContent: (
+        <div>
+          <Typography variant="p">Development</Typography>
+        </div>
+      ),
+      variant: 'success',
+    },
+    {
+      timelineContent: (
+        <div>
+          <Typography variant="p">Release</Typography>
+        </div>
+      ),
+    },
+  ],
 };
 
-export const SimpleTimeline = {
-  render: (args: TimelineProps) => <Timeline {...args} />,
-  args: {
-    position: 'right',
-    timelineItems: [
-      {
-        timelineContent: (
-          <Stack>
-            <Typography>Planning</Typography>
-          </Stack>
-        ),
-        variant: 'info',
-      },
-      {
-        timelineContent: (
-          <Stack>
-            <Typography>Execution</Typography>
-          </Stack>
-        ),
-        variant: 'success',
-      },
-      {
-        timelineContent: (
-          <Stack>
-            <Typography>Wrap-Up</Typography>
-          </Stack>
-        ),
-      },
-    ],
-  },
+export const SimpleTimeline = Template.bind({});
+SimpleTimeline.args = {
+  position: 'right',
+  timelineItems: [
+    {
+      timelineContent: (
+        <div>
+          <Typography variant="p">Planning</Typography>
+        </div>
+      ),
+      variant: 'info',
+    },
+    {
+      timelineContent: (
+        <div>
+          <Typography variant="p">Execution</Typography>
+        </div>
+      ),
+      variant: 'success',
+    },
+    {
+      timelineContent: (
+        <div>
+          <Typography variant="p">Wrap-Up</Typography>
+        </div>
+      ),
+    },
+  ],
 };

package/src/stories/DesignSystem/colorTokens.stories.tsx

@@ -1,7 +1,3 @@
-import { Typography } from '../../components/DataDisplay/Typography/Typography';
-import { DarkColorTokens } from '../../themes/colorTokens/darkColorTokens';
-import { LightColorTokens } from '../../themes/colorTokens/lightColorTokens';
-
 export default {
   title: 'Design System/Color Palette',
   parameters: {
@@ -9,59 +5,249 @@ export default {
   },
 };
 
-const ColorBox = ({ color, name }: { color: string; name: string }) => (
-  <div style={{ display: 'flex', alignItems: 'center', marginBottom: 20 }}>
-    <div
-      style={{
-        width: 60,
-        height: 60,
-        backgroundColor: color,
-        marginRight: 10,
-        border: '1px solid #ddd',
-        borderRadius: 5,
-      }}
-    />
-    <div>
-      <Typography variant="subtitle1">{name}</Typography>
-      <Typography variant="caption">{color}</Typography>
+const colorGroups = {
+  'Core Colors': [
+    { name: 'Background', var: '--background' },
+    { name: 'Foreground', var: '--foreground' },
+    { name: 'Card', var: '--card' },
+    { name: 'Card Foreground', var: '--card-foreground' },
+    { name: 'Popover', var: '--popover' },
+    { name: 'Popover Foreground', var: '--popover-foreground' },
+  ],
+  'Primary & Secondary': [
+    { name: 'Primary', var: '--primary' },
+    { name: 'Primary Foreground', var: '--primary-foreground' },
+    { name: 'Secondary', var: '--secondary' },
+    { name: 'Secondary Foreground', var: '--secondary-foreground' },
+  ],
+  'Muted & Accent': [
+    { name: 'Muted', var: '--muted' },
+    { name: 'Muted Foreground', var: '--muted-foreground' },
+    { name: 'Accent', var: '--accent' },
+    { name: 'Accent Foreground', var: '--accent-foreground' },
+  ],
+  'Destructive & Borders': [
+    { name: 'Destructive', var: '--destructive' },
+    { name: 'Destructive Foreground', var: '--destructive-foreground' },
+    { name: 'Border', var: '--border' },
+    { name: 'Input', var: '--input' },
+    { name: 'Ring', var: '--ring' },
+  ],
+  'Chart Colors': [
+    { name: 'Chart 1', var: '--chart-1' },
+    { name: 'Chart 2', var: '--chart-2' },
+    { name: 'Chart 3', var: '--chart-3' },
+    { name: 'Chart 4', var: '--chart-4' },
+    { name: 'Chart 5', var: '--chart-5' },
+  ],
+  'Sidebar Colors': [
+    { name: 'Sidebar', var: '--sidebar' },
+    { name: 'Sidebar Foreground', var: '--sidebar-foreground' },
+    { name: 'Sidebar Primary', var: '--sidebar-primary' },
+    { name: 'Sidebar Primary Foreground', var: '--sidebar-primary-foreground' },
+    { name: 'Sidebar Accent', var: '--sidebar-accent' },
+    { name: 'Sidebar Accent Foreground', var: '--sidebar-accent-foreground' },
+    { name: 'Sidebar Border', var: '--sidebar-border' },
+    { name: 'Sidebar Ring', var: '--sidebar-ring' },
+  ],
+  'Highlight Colors': [
+    { name: 'Highlight Green', var: '--highlight-green' },
+    { name: 'Highlight Orange', var: '--highlight-orange' },
+    { name: 'Highlight Blue', var: '--highlight-blue' },
+    { name: 'Highlight Red', var: '--highlight-red' },
+    { name: 'Highlight Pink', var: '--highlight-pink' },
+    { name: 'Highlight Yellow', var: '--highlight-yellow' },
+  ],
+  'Background Colors': [
+    { name: 'Green Background', var: '--green-background' },
+    { name: 'Orange Background', var: '--orange-background' },
+    { name: 'Blue Background', var: '--blue-background' },
+    { name: 'Red Background', var: '--red-background' },
+    { name: 'Pink Background', var: '--pink-background' },
+    { name: 'Yellow Background', var: '--yellow-background' },
+    { name: 'Default Background', var: '--default-background' },
+  ],
+};
+
+const ColorBox = ({
+  name,
+  cssVar,
+  isDark = false,
+}: {
+  name: string;
+  cssVar: string;
+  isDark?: boolean;
+}) => {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', marginBottom: 16 }}>
+      <div
+        style={{
+          width: 50,
+          height: 50,
+          backgroundColor: `var(${cssVar})`,
+          marginRight: 12,
+          border: isDark ? '1px solid #404040' : '1px solid #e5e5e5',
+          borderRadius: '8px',
+          boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+        }}
+      />
+      <div>
+        <div
+          style={{
+            fontSize: '13px',
+            fontWeight: 500,
+            color: isDark ? '#fafafa' : '#0a0a0a',
+            marginBottom: 2,
+          }}
+        >
+          {name}
+        </div>
+        <div
+          style={{
+            fontSize: '11px',
+            color: isDark ? '#a3a3a3' : '#737373',
+            fontFamily: 'monospace',
+          }}
+        >
+          {cssVar}
+        </div>
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
-const PaletteDisplay = ({
-  themeName,
-  colorTokens,
+const ColorCategoryComparison = ({
+  title,
+  colors,
 }: {
-  themeName: string;
-  colorTokens: any;
+  title: string;
+  colors: Array<{ name: string; var: string }>;
 }) => (
-  <div style={{ marginBottom: 40 }}>
-    <h3>{themeName} Theme</h3>
-    {Object.keys(colorTokens).map((group) => (
-      <div key={group}>
-        <h4>{group.toUpperCase()}</h4>
-        {Object.entries(colorTokens[group]).map(([name, color]) => (
-          <ColorBox key={name} name={name} color={color as string} />
+  <div style={{ marginBottom: 48 }}>
+    <h2
+      style={{
+        fontSize: '20px',
+        fontWeight: 700,
+        marginBottom: 24,
+        color: '#0a0a0a',
+        textAlign: 'center',
+      }}
+    >
+      {title}
+    </h2>
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr',
+        gap: '1px',
+        backgroundColor: '#e5e5e5',
+        border: '1px solid #e5e5e5',
+        borderRadius: '12px',
+        overflow: 'hidden',
+      }}
+    >
+      {/* Light Theme Column */}
+      <div
+        style={{
+          backgroundColor: '#ffffff',
+          padding: '24px',
+        }}
+      >
+        <h3
+          style={{
+            fontSize: '16px',
+            fontWeight: 600,
+            marginBottom: 20,
+            color: '#0a0a0a',
+            textAlign: 'center',
+            paddingBottom: 12,
+            borderBottom: '2px solid #e5e5e5',
+          }}
+        >
+          Light Theme
+        </h3>
+        {colors.map((color) => (
+          <ColorBox
+            key={`light-${color.var}`}
+            name={color.name}
+            cssVar={color.var}
+            isDark={false}
+          />
         ))}
       </div>
-    ))}
+
+      {/* Dark Theme Column */}
+      <div
+        style={{
+          backgroundColor: '#0a0a0a',
+          padding: '24px',
+        }}
+      >
+        <h3
+          style={{
+            fontSize: '16px',
+            fontWeight: 600,
+            marginBottom: 20,
+            color: '#fafafa',
+            textAlign: 'center',
+            paddingBottom: 12,
+            borderBottom: '2px solid #404040',
+          }}
+        >
+          Dark Theme
+        </h3>
+        <div className="dark">
+          {colors.map((color) => (
+            <ColorBox
+              key={`dark-${color.var}`}
+              name={color.name}
+              cssVar={color.var}
+              isDark={true}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
   </div>
 );
 
 export const ColorPalettes = () => (
   <div
     style={{
-      display: 'grid',
-      gridTemplateColumns: 'repeat(6, 1fr)',
-      gap: '20px',
-      padding: '20px',
+      padding: '40px',
+      backgroundColor: '#f5f5f5',
+      minHeight: '100vh',
     }}
   >
-    <div>
-      <PaletteDisplay themeName="Light" colorTokens={LightColorTokens} />
-    </div>
-    <div>
-      <PaletteDisplay themeName="Dark" colorTokens={DarkColorTokens} />
+    <h1
+      style={{
+        fontSize: '32px',
+        fontWeight: 700,
+        marginBottom: 8,
+        color: '#0a0a0a',
+        textAlign: 'center',
+      }}
+    >
+      Color System
+    </h1>
+    <p
+      style={{
+        fontSize: '14px',
+        color: '#737373',
+        marginBottom: 48,
+        textAlign: 'center',
+      }}
+    >
+      CSS custom properties using OKLCH color space - Light vs Dark comparison
+    </p>
+    <div style={{ maxWidth: '1400px', margin: '0 auto' }}>
+      {Object.entries(colorGroups).map(([groupName, colors]) => (
+        <ColorCategoryComparison
+          key={groupName}
+          title={groupName}
+          colors={colors}
+        />
+      ))}
     </div>
   </div>
 );