@campxdev/react-blueprint 1.9.6 → 2.0.1

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

@@ -1,150 +0,0 @@
-import { Stack, Typography } from '@mui/material';
-import { Meta } from '@storybook/react';
-import { Timeline, TimelineProps } from '../../components/export';
-
-// Define the default export with Meta type including the component type
-export default {
-  title: 'DataDisplay/Timeline',
-  component: Timeline,
-  tags: ['autodocs'],
-  argTypes: {
-    position: {
-      control: {
-        type: 'select',
-        options: ['left', 'right', 'alternate'],
-      },
-      description: 'Position of the Timeline items.',
-    },
-    timelineItems: {
-      control: 'object',
-      description:
-        'Array of timeline items containing content and optional variants.',
-    },
-    sx: {
-      control: 'object',
-      description: 'Custom styling 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',
-      },
-    ],
-  },
-};
-
-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 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>
-        ),
-      },
-    ],
-  },
-};

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

@@ -1,67 +0,0 @@
-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: {
-    controls: { hideNoControlsWarning: true },
-  },
-};
-
-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>
-    </div>
-  </div>
-);
-
-const PaletteDisplay = ({
-  themeName,
-  colorTokens,
-}: {
-  themeName: string;
-  colorTokens: any;
-}) => (
-  <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>
-    ))}
-  </div>
-);
-
-export const ColorPalettes = () => (
-  <div
-    style={{
-      display: 'grid',
-      gridTemplateColumns: 'repeat(6, 1fr)',
-      gap: '20px',
-      padding: '20px',
-    }}
-  >
-    <div>
-      <PaletteDisplay themeName="Light" colorTokens={LightColorTokens} />
-    </div>
-    <div>
-      <PaletteDisplay themeName="Dark" colorTokens={DarkColorTokens} />
-    </div>
-  </div>
-);

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

@@ -1,85 +0,0 @@
-// src/stories/Typography.stories.jsx
-import { Stack } from '@mui/material';
-import { Typography } from '../../components/DataDisplay/Typography/Typography';
-
-// Update path as necessary
-
-export default {
-  title: 'Design System/Typography',
-  component: Typography,
-};
-
-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}
-    </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>
-);

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

@@ -1,25 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Alert } from '../../components/export';
-
-export default {
-  title: 'Feedback/Alert',
-  component: Alert,
-  tags: ['autodocs'],
-  argTypes: {
-    severity: {
-      control: {
-        type: 'select',
-        options: ['success', 'info', 'warning', 'error'],
-      },
-    },
-    message: { control: 'text' },
-  },
-} as Meta<typeof Alert>;
-
-export const AlertSuccess: StoryObj<typeof Alert> = {
-  render: (args) => <Alert {...args} />,
-  args: {
-    severity: 'success',
-    message: 'Success Message Comes Here',
-  },
-};

package/src/stories/Feedback/Snackbar.stories.tsx

@@ -1,28 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Snackbar } from '../../components/export';
-
-export default {
-  title: 'Feedback/Snackbar',
-  component: Snackbar,
-  tags: ['autodocs'],
-  argTypes: {
-    severity: {
-      control: {
-        type: 'select',
-        options: ['success', 'info', 'warning', 'error'],
-      },
-    },
-    message: { control: 'text' },
-    open: { control: 'boolean' },
-    onClose: { action: 'closed' },
-  },
-} as Meta<typeof Snackbar>;
-
-export const SnackbarSuccess: StoryObj<typeof Snackbar> = {
-  render: (args) => <Snackbar {...args} />,
-  args: {
-    severity: 'success',
-    message: 'Success or error or info or warning',
-    open: true,
-  },
-};

package/src/stories/Feedback/Spinner.stories.tsx

@@ -1,19 +0,0 @@
-// Import React and other necessary elements
-import { Meta } from '@storybook/react';
-import { Spinner } from '../../components/export';
-
-// Make sure your TextField import is correct
-
-// Define the default export with Meta type including the component type
-export default {
-  title: 'Feedback/Spinner',
-  component: Spinner,
-  tags: ['autodocs'],
-  argTypes: {},
-} as Meta<typeof Spinner>;
-
-// Define stories directly as objects with render function
-export const Primary = {
-  render: (args: any) => <Spinner {...args} />,
-  args: {},
-};

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

@@ -1,43 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Button, Icons, Tooltip } from '../../components/export';
-import { ToolTipContent } from '../../components/Feedback/Tooltip/ToolTipContent';
-
-export default {
-  title: 'Feedback/Tooltip',
-  component: Tooltip,
-  tags: ['autodocs'],
-  argTypes: {
-    icon: { control: false },
-    message: { control: 'text' },
-  },
-} 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." />
-    ),
-    children: <Icons.InfoIcon />,
-  },
-};
-
-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</>,
-  },
-};
-
-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>,
-  },
-};

package/src/stories/Feedback/Tutorial.stories.tsx

@@ -1,69 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Tutorial, Typography } from '../../components/export';
-
-export default {
-  title: 'Feedback/Tutorial',
-  component: Tutorial,
-  parameters: {
-    controls: {
-      exclude: ['children'],
-    },
-  },
-  argTypes: {
-    iconPosition: {
-      control: { type: 'radio' },
-      options: ['left', 'right'],
-      defaultValue: 'right',
-    },
-    tourName: { control: 'text' },
-    steps: { control: 'object' },
-  },
-} as Meta<typeof Tutorial>;
-
-export const PrimaryTutorial: StoryObj<typeof Tutorial> = {
-  render: (args) => (
-    <div>
-      {/* Placeholder elements for the tutorial */}
-      <div
-        className="tutorial-target"
-        style={{ margin: '20px', border: '2px solid blue', padding: '10px' }}
-      >
-        Target 1: This element is the first target of the tutorial.
-      </div>
-      <div
-        className="next-target"
-        style={{ margin: '20px', border: '2px solid green', padding: '10px' }}
-      >
-        Target 2: This element is the next target of the tutorial.
-      </div>
-
-      <Tutorial {...args} />
-    </div>
-  ),
-  args: {
-    tourName: 'Active Batches',
-    showProgress: false,
-    steps: [
-      {
-        target: '.tutorial-target',
-        content: (
-          <>
-            <div>
-              <Typography variant="body2">
-                Click the button above 👆 to submit your feedback.
-              </Typography>
-              <Typography variant="caption" color="highlight">
-                Check the environment box to ensure detailed reporting.
-              </Typography>
-            </div>
-          </>
-        ),
-        disableBeacon: true,
-      },
-      // {
-      //   target: ".next-target",
-      //   content: "This is the next step",
-      // },
-    ],
-  },
-};

package/src/stories/Input/Button.stories.tsx

@@ -1,72 +0,0 @@
-// Import React and other necessary elements
-import { Meta } from '@storybook/react';
-import { Button, ButtonProps } from '../../components/Input/Button/Button';
-
-// Make sure your TextField import is correct
-
-// Define the default export with Meta type including the component type
-export default {
-  title: 'Input/Button',
-  component: Button,
-  tags: ['autodocs'],
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/design/S5t9x8kNHEuzBGv6305qLf/Srikanth-PlayGround?node-id=2-20', // Replace with your actual Figma link
-    },
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['contained', 'outlined', 'text', 'string'],
-      description: 'The Button Variant to use',
-    },
-    children: {
-      control: 'text',
-      description: 'text in button',
-    },
-    color: {
-      control: 'select',
-      options: ['primary', 'secondary'],
-      description: 'The Button Variant to use',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disabled Button',
-      defaultValue: false,
-    },
-    loading: {
-      control: 'boolean',
-      description: 'Loading Button',
-      defaultValue: false,
-    },
-  },
-} as Meta<typeof Button>;
-
-// Define stories directly as objects with render function
-export const Primary = {
-  render: (args: ButtonProps) => <Button {...args} />,
-  args: {
-    color: 'primary',
-    variant: 'contained',
-    children: 'Primary Button',
-  },
-};
-
-export const Secondary = {
-  render: (args: ButtonProps) => <Button {...args} />,
-  args: {
-    color: 'secondary',
-    variant: 'contained',
-    children: 'Secondary Button',
-  },
-};
-
-export const Disabled = {
-  render: (args: ButtonProps) => <Button {...args} />,
-  args: {
-    disabled: true,
-    variant: 'contained',
-    children: 'Disabled Button',
-  },
-};