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

package/src/stories/Input/MultiSelect.stories.tsx

@@ -0,0 +1,552 @@
+import { Meta } from '@storybook/react';
+import { useState } from 'react';
+import {
+  MultiSelect,
+  MultiSelectProps,
+} from '../../components/Input/MultiSelect/MultiSelect';
+
+const topFilms = [
+  { label: 'The Shawshank Redemption', value: 1, subLabel: 'Drama, 1994' },
+  { label: 'The Godfather', value: 2, subLabel: 'Crime, 1972' },
+  { label: 'The Godfather: Part II', value: 3, subLabel: 'Crime, 1974' },
+  { label: 'The Dark Knight', value: 4, subLabel: 'Action, 2008' },
+  { label: '12 Angry Men', value: 5, subLabel: 'Drama, 1957' },
+  { label: "Schindler's List", value: 6, subLabel: 'Biography, 1993' },
+  { label: 'Pulp Fiction', value: 7, subLabel: 'Crime, 1994' },
+  {
+    label: 'The Lord of the Rings: The Return of the King',
+    value: 8,
+    subLabel: 'Fantasy, 2003',
+  },
+  {
+    label: 'The Good, the Bad and the Ugly',
+    value: 9,
+    subLabel: 'Western, 1966',
+  },
+  { label: 'Fight Club', value: 10, subLabel: 'Drama, 1999' },
+  {
+    label: 'The Lord of the Rings: The Fellowship of the Ring',
+    value: 11,
+    subLabel: 'Fantasy, 2001',
+  },
+  {
+    label: 'Star Wars: Episode V - The Empire Strikes Back',
+    value: 12,
+    subLabel: 'Sci-Fi, 1980',
+  },
+  { label: 'Forrest Gump', value: 13, subLabel: 'Drama, 1994' },
+  { label: 'Inception', value: 14, subLabel: 'Sci-Fi, 2010' },
+  {
+    label: 'The Lord of the Rings: The Two Towers',
+    value: 15,
+    subLabel: 'Fantasy, 2002',
+  },
+  {
+    label: "One Flew Over the Cuckoo's Nest",
+    value: 16,
+    subLabel: 'Drama, 1975',
+  },
+  { label: 'Goodfellas', value: 17, subLabel: 'Crime, 1990' },
+  { label: 'The Matrix', value: 18, subLabel: 'Sci-Fi, 1999' },
+  { label: 'Seven Samurai', value: 19, subLabel: 'Adventure, 1954' },
+  {
+    label: 'Star Wars: Episode IV - A New Hope',
+    value: 20,
+    subLabel: 'Sci-Fi, 1977',
+  },
+  { label: 'City of God', value: 21, subLabel: 'Crime, 2002' },
+  { label: 'Se7en', value: 22, subLabel: 'Thriller, 1995' },
+  {
+    label: 'The Silence of the Lambs',
+    value: 23,
+    subLabel: 'Thriller, 1991',
+  },
+  { label: "It's a Wonderful Life", value: 24, subLabel: 'Drama, 1946' },
+  { label: 'Life Is Beautiful', value: 25, subLabel: 'Comedy, 1997' },
+  { label: 'The Usual Suspects', value: 26, subLabel: 'Crime, 1995' },
+  {
+    label: 'Léon: The Professional',
+    value: 27,
+    subLabel: 'Action, 1994',
+  },
+  { label: 'Spirited Away', value: 28, subLabel: 'Animation, 2001' },
+  { label: 'Saving Private Ryan', value: 29, subLabel: 'War, 1998' },
+  {
+    label: 'Once Upon a Time in the West',
+    value: 30,
+    subLabel: 'Western, 1968',
+  },
+  { label: 'American History X', value: 31, subLabel: 'Drama, 1998' },
+  { label: 'Interstellar', value: 32, subLabel: 'Sci-Fi, 2014' },
+];
+
+const countries = [
+  { label: 'United States', value: 'US', subLabel: 'North America' },
+  { label: 'United Kingdom', value: 'UK', subLabel: 'Europe' },
+  { label: 'Canada', value: 'CA', subLabel: 'North America' },
+  { label: 'Australia', value: 'AU', subLabel: 'Oceania' },
+  { label: 'Germany', value: 'DE', subLabel: 'Europe' },
+  { label: 'France', value: 'FR', subLabel: 'Europe' },
+  { label: 'Japan', value: 'JP', subLabel: 'Asia' },
+  { label: 'China', value: 'CN', subLabel: 'Asia' },
+  { label: 'India', value: 'IN', subLabel: 'Asia' },
+  { label: 'Brazil', value: 'BR', subLabel: 'South America' },
+  { label: 'Mexico', value: 'MX', subLabel: 'North America' },
+  { label: 'Italy', value: 'IT', subLabel: 'Europe' },
+  { label: 'Spain', value: 'ES', subLabel: 'Europe' },
+  { label: 'South Korea', value: 'KR', subLabel: 'Asia' },
+  { label: 'Russia', value: 'RU', subLabel: 'Europe/Asia' },
+];
+
+const genres = [
+  { label: 'Action', value: 'action' },
+  { label: 'Comedy', value: 'comedy' },
+  { label: 'Drama', value: 'drama' },
+  { label: 'Horror', value: 'horror' },
+  { label: 'Sci-Fi', value: 'scifi' },
+  { label: 'Thriller', value: 'thriller' },
+  { label: 'Romance', value: 'romance' },
+  { label: 'Fantasy', value: 'fantasy' },
+];
+
+export default {
+  title: 'Input/MultiSelect',
+  component: MultiSelect,
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Label of the field',
+    },
+    required: {
+      control: 'boolean',
+      description: 'Required property of the field',
+    },
+    type: {
+      control: 'radio',
+      options: ['input', 'filter'],
+      description: 'Type of multi select (input or filter)',
+    },
+    optionsApiEndPoint: {
+      control: 'text',
+      description: 'API end point for options',
+    },
+  },
+} as Meta<typeof MultiSelect>;
+
+// Input Type Stories
+export const InputDefault = {
+  render: (args: MultiSelectProps) => {
+    const [value, setValue] = useState<any[]>(args.value || []);
+    return (
+      <div style={{ padding: '20px', maxWidth: '400px' }}>
+        <MultiSelect {...args} value={value} onChange={setValue} />
+      </div>
+    );
+  },
+  args: {
+    options: topFilms,
+    label: 'Favorite Movies',
+    required: false,
+    type: 'input',
+  },
+};
+
+export const InputWithValue = {
+  render: (args: MultiSelectProps) => {
+    const [value, setValue] = useState<any[]>(args.value || []);
+    return (
+      <div style={{ padding: '20px', maxWidth: '400px' }}>
+        <MultiSelect {...args} value={value} onChange={setValue} />
+      </div>
+    );
+  },
+  args: {
+    label: 'Favorite Movies',
+    options: topFilms,
+    required: true,
+    value: [1, 4, 14],
+    type: 'input',
+  },
+};
+
+export const InputWithManySelections = {
+  render: (args: MultiSelectProps) => {
+    const [value, setValue] = useState<any[]>(args.value || []);
+    return (
+      <div style={{ padding: '20px', maxWidth: '400px' }}>
+        <MultiSelect {...args} value={value} onChange={setValue} />
+      </div>
+    );
+  },
+  args: {
+    label: 'Favorite Movies',
+    options: topFilms,
+    value: [1, 2, 3, 4, 5, 6, 7, 8],
+    type: 'input',
+  },
+};
+
+export const InputRequired = {
+  render: (args: MultiSelectProps) => {
+    const [value, setValue] = useState<any[]>(args.value || []);
+    return (
+      <div style={{ padding: '20px', maxWidth: '400px' }}>
+        <MultiSelect {...args} value={value} onChange={setValue} />
+      </div>
+    );
+  },
+  args: {
+    options: countries,
+    label: 'Countries Visited',
+    required: true,
+    type: 'input',
+  },
+};
+
+export const InputWithError = {
+  render: (args: MultiSelectProps) => {
+    const [value, setValue] = useState<any[]>(args.value || []);
+    return (
+      <div style={{ padding: '20px', maxWidth: '400px' }}>
+        <MultiSelect {...args} value={value} onChange={setValue} />
+      </div>
+    );
+  },
+  args: {
+    options: countries,
+    label: 'Countries',
+    required: true,
+    type: 'input',
+    error: 'Please select at least one country',
+  },
+};
+
+export const InputWithHelperText = {
+  render: (args: MultiSelectProps) => {
+    const [value, setValue] = useState<any[]>(args.value || []);
+    return (
+      <div style={{ padding: '20px', maxWidth: '400px' }}>
+        <MultiSelect {...args} value={value} onChange={setValue} />
+      </div>
+    );
+  },
+  args: {
+    options: topFilms,
+    label: 'Movies',
+    type: 'input',
+    helperText: 'Select all your favorite movies from the list',
+  },
+};
+
+export const InputSmallList = {
+  render: (args: MultiSelectProps) => {
+    const [value, setValue] = useState<any[]>(args.value || []);
+    return (
+      <div style={{ padding: '20px', maxWidth: '400px' }}>
+        <MultiSelect {...args} value={value} onChange={setValue} />
+      </div>
+    );
+  },
+  args: {
+    options: genres,
+    label: 'Favorite Genres',
+    type: 'input',
+    value: ['action', 'scifi'],
+  },
+};
+
+// Filter Type Stories
+export const FilterDefault = {
+  render: (args: MultiSelectProps) => {
+    const [value, setValue] = useState<any[]>(args.value || []);
+    return (
+      <div style={{ padding: '20px', display: 'flex', gap: '10px' }}>
+        <MultiSelect {...args} value={value} onChange={setValue} />
+      </div>
+    );
+  },
+  args: {
+    options: countries,
+    label: 'Countries',
+    type: 'filter',
+  },
+};
+
+export const FilterWithValue = {
+  render: (args: MultiSelectProps) => {
+    const [value, setValue] = useState<any[]>(args.value || []);
+    return (
+      <div style={{ padding: '20px', display: 'flex', gap: '10px' }}>
+        <MultiSelect {...args} value={value} onChange={setValue} />
+      </div>
+    );
+  },
+  args: {
+    options: countries,
+    label: 'Countries',
+    type: 'filter',
+    value: ['US', 'UK', 'CA'],
+  },
+};
+
+export const FilterWithManyValues = {
+  render: (args: MultiSelectProps) => {
+    const [value, setValue] = useState<any[]>(args.value || []);
+    return (
+      <div style={{ padding: '20px', display: 'flex', gap: '10px' }}>
+        <MultiSelect {...args} value={value} onChange={setValue} />
+      </div>
+    );
+  },
+  args: {
+    options: countries,
+    label: 'Countries',
+    type: 'filter',
+    value: ['US', 'UK', 'CA', 'AU', 'DE', 'FR', 'JP'],
+  },
+};
+
+export const FilterDisableClear = {
+  render: (args: MultiSelectProps) => {
+    const [value, setValue] = useState<any[]>(args.value || []);
+    return (
+      <div style={{ padding: '20px', display: 'flex', gap: '10px' }}>
+        <MultiSelect {...args} value={value} onChange={setValue} />
+      </div>
+    );
+  },
+  args: {
+    options: genres,
+    label: 'Genres',
+    type: 'filter',
+    value: ['action', 'drama'],
+    disableClear: true,
+  },
+};
+
+export const MultipleFilters = {
+  render: () => {
+    const [countries, setCountries] = useState<string[]>([]);
+    const [genres, setGenres] = useState<string[]>([]);
+
+    return (
+      <div
+        style={{
+          padding: '20px',
+          display: 'flex',
+          gap: '10px',
+          flexWrap: 'wrap',
+        }}
+      >
+        <MultiSelect
+          options={[
+            { label: 'United States', value: 'US', subLabel: 'North America' },
+            { label: 'United Kingdom', value: 'UK', subLabel: 'Europe' },
+            { label: 'Canada', value: 'CA', subLabel: 'North America' },
+            { label: 'Australia', value: 'AU', subLabel: 'Oceania' },
+            { label: 'Germany', value: 'DE', subLabel: 'Europe' },
+            { label: 'France', value: 'FR', subLabel: 'Europe' },
+            { label: 'Japan', value: 'JP', subLabel: 'Asia' },
+            { label: 'China', value: 'CN', subLabel: 'Asia' },
+          ]}
+          label="Countries"
+          type="filter"
+          value={countries}
+          onChange={setCountries}
+        />
+        <MultiSelect
+          options={[
+            { label: 'Action', value: 'action' },
+            { label: 'Comedy', value: 'comedy' },
+            { label: 'Drama', value: 'drama' },
+            { label: 'Horror', value: 'horror' },
+            { label: 'Sci-Fi', value: 'scifi' },
+            { label: 'Thriller', value: 'thriller' },
+          ]}
+          label="Genres"
+          type="filter"
+          value={genres}
+          onChange={setGenres}
+        />
+      </div>
+    );
+  },
+};
+
+// Complex Example
+export const ComplexExample = {
+  render: () => {
+    const [selectedMovies, setSelectedMovies] = useState<number[]>([1, 4]);
+    const [selectedCountries, setSelectedCountries] = useState<string[]>([
+      'US',
+      'UK',
+    ]);
+
+    return (
+      <div style={{ padding: '20px', maxWidth: '600px' }}>
+        <div style={{ marginBottom: '20px' }}>
+          <MultiSelect
+            options={topFilms}
+            label="Favorite Movies"
+            type="input"
+            value={selectedMovies}
+            onChange={setSelectedMovies}
+            helperText="Select multiple movies you love"
+            required
+          />
+        </div>
+        <div>
+          <MultiSelect
+            options={countries}
+            label="Countries Visited"
+            type="input"
+            value={selectedCountries}
+            onChange={setSelectedCountries}
+            helperText="Select all countries you've visited"
+          />
+        </div>
+        <div style={{ marginTop: '20px', padding: '10px', background: '#f5f5f5' }}>
+          <strong>Selected Movies:</strong> {selectedMovies.join(', ') || 'None'}
+          <br />
+          <strong>Selected Countries:</strong>{' '}
+          {selectedCountries.join(', ') || 'None'}
+        </div>
+      </div>
+    );
+  },
+};
+
+// API Endpoint Examples
+export const WithAPIEndPoint = {
+  render: (args: MultiSelectProps) => {
+    const [value, setValue] = useState<any[]>(args.value || []);
+    return (
+      <div style={{ padding: '20px', maxWidth: '400px' }}>
+        <MultiSelect {...args} value={value} onChange={setValue} />
+      </div>
+    );
+  },
+  args: {
+    optionsApiEndPoint: 'dropdowns/classrooms',
+    label: 'Select Classrooms',
+    required: false,
+    type: 'input',
+  },
+};
+
+export const WithAPIAndValue = {
+  render: (args: MultiSelectProps) => {
+    const [value, setValue] = useState<any[]>(args.value || []);
+    return (
+      <div style={{ padding: '20px', maxWidth: '400px' }}>
+        <MultiSelect {...args} value={value} onChange={setValue} />
+      </div>
+    );
+  },
+  args: {
+    optionsApiEndPoint: 'dropdowns/classrooms',
+    label: 'Select Classrooms',
+    required: true,
+    value: [1, 2, 3],
+    type: 'input',
+  },
+};
+
+// Full Width Examples
+export const InputFullWidth = {
+  render: (args: MultiSelectProps) => {
+    const [value, setValue] = useState<any[]>(args.value || []);
+    return (
+      <div style={{ padding: '20px' }}>
+        <MultiSelect {...args} value={value} onChange={setValue} />
+      </div>
+    );
+  },
+  args: {
+    options: [
+      { label: 'United States', value: 'US', subLabel: 'North America' },
+      { label: 'United Kingdom', value: 'UK', subLabel: 'Europe' },
+      { label: 'Canada', value: 'CA', subLabel: 'North America' },
+      { label: 'Australia', value: 'AU', subLabel: 'Oceania' },
+      { label: 'Germany', value: 'DE', subLabel: 'Europe' },
+      { label: 'France', value: 'FR', subLabel: 'Europe' },
+      { label: 'Japan', value: 'JP', subLabel: 'Asia' },
+      { label: 'China', value: 'CN', subLabel: 'Asia' },
+    ],
+    label: 'Countries',
+    required: false,
+    type: 'input',
+    fullWidth: true,
+  },
+};
+
+export const InputFullWidthWithValue = {
+  render: (args: MultiSelectProps) => {
+    const [value, setValue] = useState<any[]>(args.value || []);
+    return (
+      <div style={{ padding: '20px' }}>
+        <MultiSelect {...args} value={value} onChange={setValue} />
+      </div>
+    );
+  },
+  args: {
+    options: [
+      { label: 'The Shawshank Redemption', value: 1, subLabel: 'Drama, 1994' },
+      { label: 'The Godfather', value: 2, subLabel: 'Crime, 1972' },
+      { label: 'The Dark Knight', value: 4, subLabel: 'Action, 2008' },
+      { label: 'Inception', value: 14, subLabel: 'Sci-Fi, 2010' },
+      { label: 'The Matrix', value: 18, subLabel: 'Sci-Fi, 1999' },
+      { label: 'Interstellar', value: 32, subLabel: 'Sci-Fi, 2014' },
+    ],
+    label: 'Favorite Movies',
+    required: true,
+    type: 'input',
+    fullWidth: true,
+    value: [1, 4, 14],
+  },
+};
+
+export const ComparisonFullWidthVsAuto = {
+  render: () => {
+    const [value1, setValue1] = useState<string[]>([]);
+    const [value2, setValue2] = useState<string[]>([]);
+
+    return (
+      <div style={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px' }}>
+        <div>
+          <h3 style={{ marginBottom: '10px' }}>Auto Width (default)</h3>
+          <MultiSelect
+            options={[
+              { label: 'Action', value: 'action' },
+              { label: 'Comedy', value: 'comedy' },
+              { label: 'Drama', value: 'drama' },
+              { label: 'Horror', value: 'horror' },
+              { label: 'Sci-Fi', value: 'scifi' },
+            ]}
+            label="Genres"
+            type="input"
+            value={value1}
+            onChange={setValue1}
+          />
+        </div>
+        <div>
+          <h3 style={{ marginBottom: '10px' }}>Full Width</h3>
+          <MultiSelect
+            options={[
+              { label: 'Action', value: 'action' },
+              { label: 'Comedy', value: 'comedy' },
+              { label: 'Drama', value: 'drama' },
+              { label: 'Horror', value: 'horror' },
+              { label: 'Sci-Fi', value: 'scifi' },
+            ]}
+            label="Genres"
+            type="input"
+            value={value2}
+            onChange={setValue2}
+            fullWidth
+          />
+        </div>
+      </div>
+    );
+  },
+};

package/src/stories/Input/OtpInput.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
+import { useState } from 'react';
 import {
   OtpInput,
   OtpInputProps,
@@ -8,15 +9,114 @@ export default {
   title: 'Input/OtpInput',
   component: OtpInput,
   tags: ['autodocs'],
-  argTypes: {},
+  argTypes: {
+    length: {
+      control: 'number',
+      description: 'Number of OTP input fields',
+    },
+    label: {
+      control: 'text',
+      description: 'Label for the OTP input',
+    },
+    required: {
+      control: 'boolean',
+      description: 'Whether the OTP input is required',
+    },
+    error: {
+      control: 'boolean',
+      description: 'Whether to show error state',
+    },
+    helperText: {
+      control: 'text',
+      description: 'Helper or error text to display',
+    },
+  },
 } as Meta<typeof OtpInput>;
 
-export const Default = {
-  render: (args: OtpInputProps) => <OtpInput {...args} />,
-  args: {
-    length: 6,
-    onChangeOtp: (otp: string) => {
-      console.log('OTP Value:', otp);
-    },
+const OtpInputStory: StoryFn<OtpInputProps> = (args) => {
+  const [otpValue, setOtpValue] = useState('');
+
+  return (
+    <div className="space-y-4">
+      <OtpInput
+        {...args}
+        onChangeOtp={(otp: string) => {
+          setOtpValue(otp);
+          args.onChangeOtp?.(otp);
+        }}
+      />
+      <p className="text-sm text-muted-foreground">
+        Current OTP value: <span className="font-mono font-bold">{otpValue || 'None'}</span>
+      </p>
+    </div>
+  );
+};
+
+export const Default = OtpInputStory.bind({});
+Default.args = {
+  length: 6,
+  onChangeOtp: (otp: string) => {
+    console.log('OTP Value:', otp);
+  },
+};
+
+export const WithLabel = OtpInputStory.bind({});
+WithLabel.args = {
+  length: 6,
+  label: 'Enter verification code',
+  required: false,
+  onChangeOtp: (otp: string) => {
+    console.log('OTP Value:', otp);
+  },
+};
+
+export const Required = OtpInputStory.bind({});
+Required.args = {
+  length: 6,
+  label: 'OTP Code',
+  required: true,
+  onChangeOtp: (otp: string) => {
+    console.log('OTP Value:', otp);
+  },
+};
+
+export const WithHelperText = OtpInputStory.bind({});
+WithHelperText.args = {
+  length: 6,
+  label: 'Verification Code',
+  helperText: 'Please enter the 6-digit code sent to your email',
+  onChangeOtp: (otp: string) => {
+    console.log('OTP Value:', otp);
+  },
+};
+
+export const WithError = OtpInputStory.bind({});
+WithError.args = {
+  length: 6,
+  label: 'OTP Code',
+  error: true,
+  helperText: 'Invalid OTP. Please try again.',
+  onChangeOtp: (otp: string) => {
+    console.log('OTP Value:', otp);
+  },
+};
+
+export const FourDigit = OtpInputStory.bind({});
+FourDigit.args = {
+  length: 4,
+  label: 'PIN Code',
+  helperText: 'Enter your 4-digit PIN',
+  onChangeOtp: (otp: string) => {
+    console.log('PIN Value:', otp);
+  },
+};
+
+export const EightDigit = OtpInputStory.bind({});
+EightDigit.args = {
+  length: 8,
+  label: 'Security Code',
+  helperText: 'Enter the 8-digit security code',
+  onChangeOtp: (otp: string) => {
+    console.log('Security Code:', otp);
   },
 };