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

package/src/stories/DesignSystem/typography.stories.tsx

@@ -1,85 +1,326 @@
-// src/stories/Typography.stories.jsx
-import { Stack } from '@mui/material';
+import { Meta, StoryFn } from '@storybook/react';
 import { Typography } from '../../components/DataDisplay/Typography/Typography';
 
-// Update path as necessary
-
 export default {
   title: 'Design System/Typography',
   component: Typography,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['h1', 'h2', 'h3', 'h4', 'p', 'blockquote', 'list', 'inlineCode', 'lead', 'large', 'small', 'muted'],
+      description: 'Typography variant',
+    },
+    as: {
+      control: 'text',
+      description: 'Custom HTML element to render',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional Tailwind CSS classes',
+    },
+  },
+} as Meta<typeof Typography>;
+
+// Template for interactive story
+const Template: StoryFn<typeof Typography> = (args) => <Typography {...args} />;
+
+export const Interactive = Template.bind({});
+Interactive.args = {
+  variant: 'p',
+  children: 'Edit this text and try different variants!',
+  className: '',
 };
 
-const TypographyDisplay = ({
-  variant,
-  fontInfo,
-  text,
-}: {
-  variant: any;
-  fontInfo: { family: string; weight: string; size: string };
-  text: string;
-}) => (
-  <div style={{ marginBottom: 20 }}>
-    <Typography variant={variant} style={{ margin: '10px 0' }}>
-      {text}
-    </Typography>
-    <div style={{ fontSize: '12px', color: '#666' }}>
-      Font: {fontInfo.family}, Weight: {fontInfo.weight}, FontSize:{' '}
-      {fontInfo.size}
+// All variants showcase
+export const AllVariants = () => (
+  <div className="max-w-4xl mx-auto p-8 space-y-8">
+    <Typography variant="h1">Typography Variants</Typography>
+
+    <div className="space-y-6">
+      {/* Headings */}
+      <div>
+        <Typography variant="h1">Heading 1</Typography>
+        <Typography variant="muted" className="mt-1">
+          4xl font, extrabold, responsive to 5xl on large screens
+        </Typography>
+      </div>
+
+      <div>
+        <Typography variant="h2">Heading 2</Typography>
+        <Typography variant="muted" className="mt-1">
+          3xl font, semibold, with bottom border
+        </Typography>
+      </div>
+
+      <div>
+        <Typography variant="h3">Heading 3</Typography>
+        <Typography variant="muted" className="mt-1">
+          2xl font, semibold
+        </Typography>
+      </div>
+
+      <div>
+        <Typography variant="h4">Heading 4</Typography>
+        <Typography variant="muted" className="mt-1">
+          xl font, semibold
+        </Typography>
+      </div>
+
+      {/* Body text */}
+      <div>
+        <Typography variant="p">
+          This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          It has proper leading and spacing between paragraphs.
+        </Typography>
+        <Typography variant="muted" className="mt-1">
+          Standard paragraph with leading-7
+        </Typography>
+      </div>
+
+      <div>
+        <Typography variant="lead">
+          This is lead text - perfect for introductions or important opening statements.
+        </Typography>
+        <Typography variant="muted" className="mt-1">
+          xl font, muted color
+        </Typography>
+      </div>
+
+      <div>
+        <Typography variant="large">
+          This is large text for emphasis
+        </Typography>
+        <Typography variant="muted" className="mt-1">
+          lg font, semibold
+        </Typography>
+      </div>
+
+      <div>
+        <Typography variant="small">
+          This is small text for fine print
+        </Typography>
+        <Typography variant="muted" className="mt-1">
+          sm font, medium weight
+        </Typography>
+      </div>
+
+      <div>
+        <Typography variant="muted">
+          This is muted text for less important information
+        </Typography>
+        <Typography variant="muted" className="mt-1">
+          sm font, muted foreground color
+        </Typography>
+      </div>
+
+      {/* Special variants */}
+      <div>
+        <Typography variant="blockquote">
+          "This is a blockquote - perfect for quotations and testimonials."
+        </Typography>
+        <Typography variant="muted" className="mt-1">
+          Left border, italic, with top margin
+        </Typography>
+      </div>
+
+      <div>
+        <Typography variant="inlineCode">
+          const greeting = "Hello World";
+        </Typography>
+        <Typography variant="muted" className="mt-1">
+          Monospace font with background
+        </Typography>
+      </div>
+
+      <div>
+        <Typography variant="list">
+          <li>First list item</li>
+          <li>Second list item</li>
+          <li>Third list item</li>
+        </Typography>
+        <Typography variant="muted" className="mt-1">
+          Unordered list with proper spacing
+        </Typography>
+      </div>
+    </div>
+  </div>
+);
+
+// Custom className examples
+export const WithCustomClasses = () => (
+  <div className="max-w-4xl mx-auto p-8 space-y-6">
+    <Typography variant="h2">Using Custom Classes</Typography>
+
+    <div className="space-y-4">
+      <div>
+        <Typography variant="h3" className="text-blue-600">
+          Blue Heading
+        </Typography>
+        <code className="text-xs bg-muted px-2 py-1 rounded">
+          className="text-blue-600"
+        </code>
+      </div>
+
+      <div>
+        <Typography variant="p" className="text-red-500 font-bold">
+          Red bold paragraph
+        </Typography>
+        <code className="text-xs bg-muted px-2 py-1 rounded">
+          className="text-red-500 font-bold"
+        </code>
+      </div>
+
+      <div>
+        <Typography variant="small" className="uppercase tracking-wider text-purple-600">
+          Uppercase small text
+        </Typography>
+        <code className="text-xs bg-muted px-2 py-1 rounded">
+          className="uppercase tracking-wider text-purple-600"
+        </code>
+      </div>
+
+      <div>
+        <Typography variant="muted" className="italic underline">
+          Italic underlined muted text
+        </Typography>
+        <code className="text-xs bg-muted px-2 py-1 rounded">
+          className="italic underline"
+        </code>
+      </div>
+
+      <div>
+        <Typography variant="large" className="bg-yellow-100 p-4 rounded-lg border-l-4 border-yellow-500">
+          Highlighted large text with custom styling
+        </Typography>
+        <code className="text-xs bg-muted px-2 py-1 rounded">
+          className="bg-yellow-100 p-4 rounded-lg border-l-4 border-yellow-500"
+        </code>
+      </div>
     </div>
   </div>
 );
 
-export const TypographyStyles = () => (
-  <Stack>
-    <TypographyDisplay
-      variant="h6"
-      fontInfo={{ family: 'Poppins', weight: '800', size: '24px' }}
-      text="Heading 6 (h6) - Lorem ipsum dolor sit."
-    />
-    <TypographyDisplay
-      variant="subtitle1"
-      fontInfo={{ family: 'Poppins', weight: '600', size: '18px' }}
-      text="Subtitle 1 (subtitle1) - Lorem ipsum dolor sit."
-    />
-    <TypographyDisplay
-      variant="subtitle2"
-      fontInfo={{ family: 'Poppins', weight: '500', size: '16px' }}
-      text="Subtitle 2 (subtitle2) - Lorem ipsum dolor sit."
-    />
-    <TypographyDisplay
-      variant="subtitle3"
-      fontInfo={{ family: 'Poppins', weight: '400', size: '14px' }}
-      text="Subtitle 3 (subtitle3) - Lorem ipsum dolor sit."
-    />
-    <TypographyDisplay
-      variant="body1"
-      fontInfo={{ family: 'Heebo', weight: '600', size: '16px' }}
-      text="Body 1 (body1) - Lorem ipsum dolor sit."
-    />
-    <TypographyDisplay
-      variant="body2"
-      fontInfo={{ family: 'Heebo', weight: '400', size: '14px' }}
-      text="Body 2 (body2) - Lorem ipsum dolor sit."
-    />
-    <TypographyDisplay
-      variant="caption"
-      fontInfo={{ family: 'Heebo', weight: '400', size: '12px' }}
-      text="Caption (caption) - Lorem ipsum dolor sit."
-    />
-    <TypographyDisplay
-      variant={'label1' as any}
-      fontInfo={{ family: 'Heebo', weight: '400', size: '14px' }}
-      text="Label 1 (label1) - Lorem ipsum dolor sit."
-    />
-    <TypographyDisplay
-      variant={'label2' as any}
-      fontInfo={{ family: 'Poppins', weight: '400', size: '12px' }}
-      text="Label 2 (label2) - Lorem ipsum dolor sit."
-    />
-    <TypographyDisplay
-      variant={'button1' as any}
-      fontInfo={{ family: 'Poppins', weight: '600', size: '14px' }}
-      text="Button 1 (button1) - Lorem ipsum dolor sit."
-    />
-  </Stack>
+// Custom element examples
+export const CustomElements = () => (
+  <div className="max-w-4xl mx-auto p-8 space-y-6">
+    <Typography variant="h2">Custom HTML Elements</Typography>
+
+    <div className="space-y-4">
+      <div>
+        <Typography variant="h1" as="span" className="text-green-600">
+          H1 styling as span
+        </Typography>
+        <Typography variant="muted" className="mt-1">
+          as="span" - Inline element with H1 styling
+        </Typography>
+      </div>
+
+      <div>
+        <Typography variant="p" as="div" className="border p-4 rounded">
+          Paragraph styling as div
+        </Typography>
+        <Typography variant="muted" className="mt-1">
+          as="div" - Block element with paragraph styling
+        </Typography>
+      </div>
+
+      <div>
+        <Typography variant="small" as="label" className="font-medium">
+          Form label with small variant
+        </Typography>
+        <Typography variant="muted" className="mt-1">
+          as="label" - Label element with small styling
+        </Typography>
+      </div>
+    </div>
+  </div>
+);
+
+// Real-world usage example
+export const ArticleExample = () => (
+  <div className="max-w-3xl mx-auto p-8">
+    <article className="space-y-6">
+      <Typography variant="h1">
+        Getting Started with Shadcn UI Typography
+      </Typography>
+
+      <Typography variant="lead">
+        Learn how to use the Typography component to create beautiful,
+        consistent text styles across your application.
+      </Typography>
+
+      <Typography variant="p">
+        The Typography component provides a set of predefined text styles
+        that follow design best practices. Each variant is optimized for
+        specific use cases, from large headings to small helper text.
+      </Typography>
+
+      <Typography variant="h2">
+        Key Features
+      </Typography>
+
+      <Typography variant="list">
+        <li>Multiple semantic variants (h1-h4, p, lead, etc.)</li>
+        <li>Customizable with Tailwind CSS classes</li>
+        <li>Flexible element rendering with the "as" prop</li>
+        <li>Fully typed with TypeScript</li>
+      </Typography>
+
+      <Typography variant="h3">
+        Basic Usage
+      </Typography>
+
+      <Typography variant="p">
+        Simply import the component and use it with your desired variant.
+        For example: <Typography variant="inlineCode" as="code">{"<Typography variant=\"p\">Text</Typography>"}</Typography>
+      </Typography>
+
+      <Typography variant="blockquote">
+        "The Typography component makes it easy to maintain consistent
+        text styling throughout your entire application."
+      </Typography>
+
+      <Typography variant="muted">
+        Last updated: January 2025
+      </Typography>
+    </article>
+  </div>
+);
+
+// Error and helper text examples
+export const HelperTextExamples = () => (
+  <div className="max-w-4xl mx-auto p-8 space-y-6">
+    <Typography variant="h2">Helper Text & Error States</Typography>
+
+    <div className="space-y-4">
+      <div>
+        <Typography variant="p">Email Address</Typography>
+        <Typography variant="small" className="text-muted-foreground">
+          We'll never share your email with anyone else.
+        </Typography>
+      </div>
+
+      <div>
+        <Typography variant="p">Password</Typography>
+        <Typography variant="small" className="text-destructive">
+          Password must be at least 8 characters long.
+        </Typography>
+      </div>
+
+      <div>
+        <Typography variant="p">Username</Typography>
+        <Typography variant="small" className="text-green-600">
+          This username is available!
+        </Typography>
+      </div>
+
+      <div>
+        <Typography variant="p">Date of Birth</Typography>
+        <Typography variant="small" className="text-blue-600">
+          You must be 18 years or older to register.
+        </Typography>
+      </div>
+    </div>
+  </div>
 );

package/src/stories/Feedback/Alert.stories.tsx

@@ -12,14 +12,53 @@ export default {
         options: ['success', 'info', 'warning', 'error'],
       },
     },
+    variant: {
+      control: {
+        type: 'select',
+        options: ['default', 'destructive'],
+      },
+    },
     message: { control: 'text' },
   },
 } as Meta<typeof Alert>;
 
-export const AlertSuccess: StoryObj<typeof Alert> = {
+export const Success: StoryObj<typeof Alert> = {
   render: (args) => <Alert {...args} />,
   args: {
     severity: 'success',
     message: 'Success Message Comes Here',
   },
 };
+
+export const Info: StoryObj<typeof Alert> = {
+  render: (args) => <Alert {...args} />,
+  args: {
+    severity: 'info',
+    message: 'Info Message Comes Here',
+  },
+};
+
+export const Warning: StoryObj<typeof Alert> = {
+  render: (args) => <Alert {...args} />,
+  args: {
+    severity: 'warning',
+    message: 'Warning Message Comes Here',
+  },
+};
+
+export const Error: StoryObj<typeof Alert> = {
+  render: (args) => <Alert {...args} />,
+  args: {
+    severity: 'error',
+    message: 'Error Message Comes Here',
+  },
+};
+
+export const WithCustomVariant: StoryObj<typeof Alert> = {
+  render: (args) => <Alert {...args} />,
+  args: {
+    severity: 'success',
+    variant: 'destructive',
+    message: 'Success message with destructive variant',
+  },
+};

package/src/stories/Feedback/Tooltip.stories.tsx

@@ -1,43 +1,82 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Button, Icons, Tooltip } from '../../components/export';
-import { ToolTipContent } from '../../components/Feedback/Tooltip/ToolTipContent';
+import { Info } from 'lucide-react';
+import { Button, Tooltip } from '../../components/export';
 
 export default {
   title: 'Feedback/Tooltip',
   component: Tooltip,
   tags: ['autodocs'],
   argTypes: {
-    icon: { control: false },
-    message: { control: 'text' },
+    title: { control: 'text' },
+    placement: {
+      control: 'select',
+      options: ['top', 'right', 'bottom', 'left'],
+    },
+    delayDuration: { control: 'number' },
+  },
+  parameters: {
+    layout: 'centered',
   },
 } as Meta<typeof Tooltip>;
 
 export const IconTooltip: StoryObj<typeof Tooltip> = {
   render: (args) => <Tooltip {...args} />,
   args: {
-    title: (
-      <ToolTipContent message="Duis rhoncus dui venenatis consequat porttitor. Etiam aliquet congue consequat. In posuere, nunc sit amet laoreet blandit, urna sapien imperdiet lectusui." />
+    title: 'Info Icon',
+    children: (
+      <Button variant={'ghost'} size={'icon-sm'}>
+        <Info />
+      </Button>
     ),
-    children: <Icons.InfoIcon />,
+    placement: 'right',
   },
 };
 
 export const TextTooltip: StoryObj<typeof Tooltip> = {
   render: (args) => <Tooltip {...args} />,
   args: {
-    title: (
-      <ToolTipContent message="Duis rhoncus dui venenatis consequat porttitor. Etiam aliquet congue consequat. In posuere, nunc sit amet laoreet blandit, urna sapien imperdiet lectusui." />
-    ),
-    children: <>Info</>,
+    title: 'This is a helpful tooltip message',
+    children: <span className="cursor-pointer underline">Hover over me</span>,
+    placement: 'top',
   },
 };
 
 export const ButtonTooltip: StoryObj<typeof Tooltip> = {
   render: (args) => <Tooltip {...args} />,
   args: {
-    title: (
-      <ToolTipContent message="Duis rhoncus dui venenatis consequat porttitor. Etiam aliquet congue consequat. In posuere, nunc sit amet laoreet blandit, urna sapien imperdiet lectusui." />
-    ),
-    children: <Button>Info</Button>,
+    title: 'Click this button to perform an action',
+    children: <Button>Action Button</Button>,
+    placement: 'bottom',
+  },
+};
+
+export const WithDelay: StoryObj<typeof Tooltip> = {
+  render: (args) => <Tooltip {...args} />,
+  args: {
+    title: 'This tooltip appears after a delay',
+    children: <Button variant="outline">Hover and wait</Button>,
+    placement: 'right',
+    delayDuration: 500,
   },
 };
+
+export const AllPlacements: StoryObj<typeof Tooltip> = {
+  render: () => (
+    <div className="flex flex-col items-center gap-12">
+      <Tooltip title="Top placement" placement="top">
+        <Button variant="outline">Top</Button>
+      </Tooltip>
+      <div className="flex gap-12">
+        <Tooltip title="Left placement" placement="left">
+          <Button variant="outline">Left</Button>
+        </Tooltip>
+        <Tooltip title="Right placement" placement="right">
+          <Button variant="outline">Right</Button>
+        </Tooltip>
+      </div>
+      <Tooltip title="Bottom placement" placement="bottom">
+        <Button variant="outline">Bottom</Button>
+      </Tooltip>
+    </div>
+  ),
+};

package/src/stories/Image/Image.stories.tsx

@@ -0,0 +1,112 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Image from '../../components/Image/Image';
+
+export default {
+  title: 'Components/Image',
+  component: Image,
+  tags: ['autodocs'],
+  argTypes: {
+    src: {
+      control: 'text',
+      description: 'The source URL of the image',
+    },
+    alt: {
+      control: 'text',
+      description: 'Alternative text for the image',
+    },
+    height: {
+      control: 'text',
+      description: 'Height of the image container (string or number)',
+    },
+    width: {
+      control: 'text',
+      description: 'Width of the image container (string or number)',
+    },
+    fit: {
+      control: 'select',
+      options: ['cover', 'contain', 'fill', 'none', 'scale-down'],
+      description: 'How the image should fit within the container',
+    },
+    radius: {
+      control: 'text',
+      description: 'Border radius of the image (string or number)',
+    },
+    defaultImage: {
+      control: 'text',
+      description: 'Fallback image URL if the main image fails to load',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes for the container',
+    },
+  },
+} as Meta<typeof Image>;
+
+type Story = StoryObj<typeof Image>;
+
+export const Default: Story = {
+  args: {
+    src: 'https://picsum.photos/400/300',
+    alt: 'Sample image',
+    height: 300,
+    width: 400,
+    fit: 'contain',
+    radius: '10px',
+  },
+};
+
+export const Cover: Story = {
+  args: {
+    src: 'https://picsum.photos/800/600',
+    alt: 'Cover fit image',
+    height: 300,
+    width: 400,
+    fit: 'cover',
+    radius: '10px',
+  },
+};
+
+export const Rounded: Story = {
+  args: {
+    src: 'https://picsum.photos/400/400',
+    alt: 'Rounded image',
+    height: 200,
+    width: 200,
+    fit: 'cover',
+    radius: '50%',
+  },
+};
+
+export const WithStringDimensions: Story = {
+  args: {
+    src: 'https://picsum.photos/600/400',
+    alt: 'Image with string dimensions',
+    height: '20rem',
+    width: '100%',
+    fit: 'contain',
+    radius: '8px',
+  },
+};
+
+export const WithFallback: Story = {
+  args: {
+    src: 'https://invalid-url-that-will-fail.com/image.jpg',
+    alt: 'Image with fallback',
+    height: 300,
+    width: 400,
+    fit: 'contain',
+    radius: '10px',
+    defaultImage: 'https://picsum.photos/400/300?grayscale',
+  },
+};
+
+export const NoRadius: Story = {
+  args: {
+    src: 'https://picsum.photos/500/300',
+    alt: 'Image without border radius',
+    height: 300,
+    width: 500,
+    fit: 'cover',
+    radius: '0',
+  },
+};