@popsure/dirty-swan 0.61.2 → 0.62.0

package/src/lib/components/input/checkbox/index.stories.tsx

@@ -72,171 +72,175 @@ const story = {
   },
 };
 
-export const CheckboxStory = ({
-  onChange,
-  options,
-  wide,
-  bordered,
-  classNames,
-  inlineLayout,
-  fieldLegend,
-}: CheckboxProps<string>) => {
-  const [checkedValues, setCheckedValues] = useState<string[]>([]);
-
-  const handleOnChange = (newValue: string[]) => {
-    setCheckedValues(newValue);
-    onChange(newValue);
-  };
-
-  return (
-    <Checkbox
-      wide={wide}
-      options={options}
-      onChange={handleOnChange}
-      value={checkedValues}
-      bordered={bordered}
-      classNames={classNames}
-      inlineLayout={inlineLayout}
-      fieldLegend={fieldLegend}
-    />
-  );
-};
+export const CheckboxStory = {
+  render: ({
+    onChange,
+    options,
+    wide,
+    bordered,
+    classNames,
+    inlineLayout,
+    fieldLegend,
+  }: CheckboxProps<string>) => {
+    const [checkedValues, setCheckedValues] = useState<string[]>([]);
+
+    const handleOnChange = (newValue: string[]) => {
+      setCheckedValues(newValue);
+      onChange(newValue);
+    };
+
+    return (
+      <Checkbox
+        wide={wide}
+        options={options}
+        onChange={handleOnChange}
+        value={checkedValues}
+        bordered={bordered}
+        classNames={classNames}
+        inlineLayout={inlineLayout}
+        fieldLegend={fieldLegend}
+      />
+    );
+  },
 
-export const CheckboxWithCustomWrapperStyles = ({
-  onChange,
-}: CheckboxProps<string>) => {
-  const [checkedValues, setCheckedValues] = useState<string[]>([]);
-
-  const handleOnChange = (newValue: string[] = []) => {
-    setCheckedValues(newValue);
-    onChange(newValue);
-  };
-
-  return (
-    <Checkbox
-      onChange={handleOnChange}
-      value={checkedValues}
-      options={{
-        CAT1: 'Cat',
-        DOG1: 'Dog',
-      }}
-      classNames={{ container: 'p32 bg-purple-500 br24 bs-lg' }}
-    />
-  );
+  name: 'Checkbox',
 };
 
-export const CheckboxWithCustomOptionStyles = ({
-  onChange,
-}: CheckboxProps<string>) => {
-  const [checkedValues, setCheckedValues] = useState<string[]>([]);
-
-  const handleOnChange = (newValue: string[] = []) => {
-    setCheckedValues(newValue);
-    onChange(newValue);
-  };
-
-  return (
-    <Checkbox
-      onChange={handleOnChange}
-      value={checkedValues}
-      options={{
-        CAT2: 'Cat',
-        DOG2: 'Dog',
-      }}
-      classNames={{ option: 'mb32 p24 bg-green-100 br12 bs-lg' }}
-    />
-  );
+export const CheckboxWithCustomWrapperStyles = {
+  render: ({ onChange }: CheckboxProps<string>) => {
+    const [checkedValues, setCheckedValues] = useState<string[]>([]);
+
+    const handleOnChange = (newValue: string[] = []) => {
+      setCheckedValues(newValue);
+      onChange(newValue);
+    };
+
+    return (
+      <Checkbox
+        onChange={handleOnChange}
+        value={checkedValues}
+        options={{
+          CAT1: 'Cat',
+          DOG1: 'Dog',
+        }}
+        classNames={{ container: 'p32 bg-purple-500 br24 bs-lg' }}
+      />
+    );
+  },
 };
 
-export const CheckboxWithCustomLabelStyles = ({
-  onChange,
-}: CheckboxProps<string>) => {
-  const [checkedValues, setCheckedValues] = useState<string[]>([]);
-
-  const handleOnChange = (newValue: string[] = []) => {
-    setCheckedValues(newValue);
-    onChange(newValue);
-  };
-
-  return (
-    <Checkbox
-      onChange={handleOnChange}
-      value={checkedValues}
-      options={{
-        CAT3: 'Cat',
-        DOG3: 'Dog',
-      }}
-      classNames={{ label: 'bg-neutral-900 tc-white' }}
-    />
-  );
+export const CheckboxWithCustomOptionStyles = {
+  render: ({ onChange }: CheckboxProps<string>) => {
+    const [checkedValues, setCheckedValues] = useState<string[]>([]);
+
+    const handleOnChange = (newValue: string[] = []) => {
+      setCheckedValues(newValue);
+      onChange(newValue);
+    };
+
+    return (
+      <Checkbox
+        onChange={handleOnChange}
+        value={checkedValues}
+        options={{
+          CAT2: 'Cat',
+          DOG2: 'Dog',
+        }}
+        classNames={{ option: 'mb32 p24 bg-green-100 br12 bs-lg' }}
+      />
+    );
+  },
 };
 
-export const CheckboxWithInlineLayout = ({
-  onChange,
-}: CheckboxProps<string>) => {
-  const [checkedValues, setCheckedValues] = useState<string[]>([]);
-
-  const handleOnChange = (newValue: string[] = []) => {
-    setCheckedValues(newValue);
-    onChange(newValue);
-  };
-
-  return (
-    <Checkbox
-      onChange={handleOnChange}
-      value={checkedValues}
-      options={{
-        CAT4: 'Cat',
-        DOG4: 'Dog',
-        FISHER: 'Fish',
-        RABBIT: 'Rabbit',
-        RAT: 'Rat',
-        ANOTHER: 'Other',
-      }}
-      classNames={{ option: 'w30' }}
-      inlineLayout
-      wide
-    />
-  );
+export const CheckboxWithCustomLabelStyles = {
+  render: ({ onChange }: CheckboxProps<string>) => {
+    const [checkedValues, setCheckedValues] = useState<string[]>([]);
+
+    const handleOnChange = (newValue: string[] = []) => {
+      setCheckedValues(newValue);
+      onChange(newValue);
+    };
+
+    return (
+      <Checkbox
+        onChange={handleOnChange}
+        value={checkedValues}
+        options={{
+          CAT3: 'Cat',
+          DOG3: 'Dog',
+        }}
+        classNames={{ label: 'bg-neutral-900 tc-white' }}
+      />
+    );
+  },
 };
 
-export const CheckboxWithCustomLabel = ({
-  onChange,
-  wide,
-  classNames,
-  inlineLayout,
-}: CheckboxProps<string>) => {
-  const [checkedValues, setCheckedValues] = useState<string[]>([]);
-
-  const handleOnChange = (newValue: string[] = []) => {
-    setCheckedValues(newValue);
-    onChange(newValue);
-  };
-
-  return (
-    <Checkbox
-      options={{
-        BIGDOG: {
-          icon: () => <img src={images.bigDog} alt="" />,
-          title: 'Dog',
-        },
-        FISH: {
-          icon: () => <img src={images.brokenAquarium} alt="" />,
-          title: 'Fish',
-        },
-        OTHER: {
-          icon: () => <img src={images.brokenGlass} alt="" />,
-          title: 'Other',
-        },
-      }}
-      onChange={handleOnChange}
-      value={checkedValues}
-      classNames={{ option: 'w30' }}
-      inlineLayout
-    />
-  );
+export const CheckboxWithInlineLayout = {
+  render: ({ onChange }: CheckboxProps<string>) => {
+    const [checkedValues, setCheckedValues] = useState<string[]>([]);
+
+    const handleOnChange = (newValue: string[] = []) => {
+      setCheckedValues(newValue);
+      onChange(newValue);
+    };
+
+    return (
+      <Checkbox
+        onChange={handleOnChange}
+        value={checkedValues}
+        options={{
+          CAT4: 'Cat',
+          DOG4: 'Dog',
+          FISHER: 'Fish',
+          RABBIT: 'Rabbit',
+          RAT: 'Rat',
+          ANOTHER: 'Other',
+        }}
+        classNames={{ option: 'w30' }}
+        inlineLayout
+        wide
+      />
+    );
+  },
 };
 
-CheckboxStory.storyName = 'Checkbox';
+export const CheckboxWithCustomLabel = {
+  render: ({
+    onChange,
+    wide,
+    classNames,
+    inlineLayout,
+  }: CheckboxProps<string>) => {
+    const [checkedValues, setCheckedValues] = useState<string[]>([]);
+
+    const handleOnChange = (newValue: string[] = []) => {
+      setCheckedValues(newValue);
+      onChange(newValue);
+    };
+
+    return (
+      <Checkbox
+        options={{
+          BIGDOG: {
+            icon: () => <img src={images.bigDog} alt="" />,
+            title: 'Dog',
+          },
+          FISH: {
+            icon: () => <img src={images.brokenAquarium} alt="" />,
+            title: 'Fish',
+          },
+          OTHER: {
+            icon: () => <img src={images.brokenGlass} alt="" />,
+            title: 'Other',
+          },
+        }}
+        onChange={handleOnChange}
+        value={checkedValues}
+        classNames={{ option: 'w30' }}
+        inlineLayout
+      />
+    );
+  },
+};
 
 export default story;

package/src/lib/components/input/checkbox/index.test.tsx

@@ -37,7 +37,7 @@ describe('Checkbox component', () => {
 
     await user.click(getByTestId('checkbox-DOG'));
 
-    expect(mockOnChange).toBeCalledWith(['DOG']);
+    expect(mockOnChange).toHaveBeenCalledWith(['DOG']);
   });
 
   it('Should render checked items when value is passed', async () => {
@@ -51,7 +51,7 @@ describe('Checkbox component', () => {
 
     await user.click(getByTestId('checkbox-NONE'));
 
-    expect(mockOnChange).toBeCalledWith(['NONE']);
+    expect(mockOnChange).toHaveBeenCalledWith(['NONE']);
   });
 
   it('Should call onchange empty when removing NONE option', async () => {
@@ -59,7 +59,7 @@ describe('Checkbox component', () => {
 
     await user.click(getByTestId('checkbox-NONE'));
 
-    expect(mockOnChange).toBeCalledWith([]);
+    expect(mockOnChange).toHaveBeenCalledWith([]);
   });
 
   it('Should render custom description', () => {

package/src/lib/components/input/currency/input.stories.tsx

@@ -1,4 +1,3 @@
-
 import { useState } from 'react';
 import { CurrencyInput, CurrencyInputProps } from '.';
 import sharedConfig from '../stories/config';
@@ -8,41 +7,44 @@ const story = {
   component: CurrencyInput,
   ...sharedConfig,
   parameters: {
-    componentSubtitle: 'The default input component is used to gather informations from the user.'
-  }
+    componentSubtitle:
+      'The default input component is used to gather informations from the user.',
+  },
 };
 
-export const CurrencyInputStory = ({ 
-  onChange,
-  className,
-  placeholder,
-  value,
-  label,
-  hideLabel,
-  prefix,
-  error
-}: CurrencyInputProps) => {
-  const [newValue, setValue] = useState<number>(Number);
+export const CurrencyInputStory = {
+  render: ({
+    onChange,
+    className,
+    placeholder,
+    value,
+    label,
+    hideLabel,
+    prefix,
+    error,
+  }: CurrencyInputProps) => {
+    const [newValue, setValue] = useState<number>(Number);
 
-  const handleOnChange = (value: number) => {
-    setValue(value)
-    onChange?.(value);
-  }
+    const handleOnChange = (value: number) => {
+      setValue(value);
+      onChange?.(value);
+    };
 
-  return (
-    <CurrencyInput 
-      onChange={handleOnChange}
-      value={newValue}
-      className={className}
-      placeholder={placeholder}
-      label={label}
-      hideLabel={hideLabel}
-      prefix={prefix}
-      error={error}
-    />
-  );
-};
+    return (
+      <CurrencyInput
+        onChange={handleOnChange}
+        value={newValue}
+        className={className}
+        placeholder={placeholder}
+        label={label}
+        hideLabel={hideLabel}
+        prefix={prefix}
+        error={error}
+      />
+    );
+  },
 
-CurrencyInputStory.storyName = 'CurrencyInput';
+  name: 'CurrencyInput',
+};
 
 export default story;

package/src/lib/components/input/iban/index.mdx

@@ -1,5 +1,3 @@
-import { Meta } from '@storybook/blocks';
-
 import IbanInput from '.';
 
 <Meta title="JSX/Inputs/Iban Input" />
@@ -10,11 +8,15 @@ Iban input is a component built on top of the [Input](?path=/story/jsx-inputs-in
 
 As the user enter their IBAN, a spacing will be applied for better readability.
 
-  <h1 className="p-h1">Iban Input</h1>
-  <h4 className="p-h4 mt24">Empty</h4>
+{' '}
+<h1 className="p-h1">Iban Input</h1>
+<h4 className="p-h4 mt24">Empty</h4>
 
-  <IbanInput className="wmx5 mt8" />
+{' '}
+<IbanInput className="wmx5 mt8" />
 
-  <h4 className="p-h4 mt24">Filled</h4>
+{' '}
+<h4 className="p-h4 mt24">Filled</h4>
 
-  <IbanInput className="wmx5 mt8" value="DE91100000000123456789" />
+{' '}
+<IbanInput className="wmx5 mt8" value="DE91100000000123456789" />

package/src/lib/components/input/input.stories.tsx

@@ -1,4 +1,3 @@
-
 import { ChangeEvent, useState } from 'react';
 import { Input, InputProps } from '.';
 import sharedConfig from './stories/config';
@@ -8,45 +7,48 @@ const story = {
   component: Input,
   ...sharedConfig,
   parameters: {
-    componentSubtitle: 'The default input component is used to gather informations from the user.'
-  }
+    componentSubtitle:
+      'The default input component is used to gather informations from the user.',
+  },
 };
 
-export const InputStory = ({ 
-  onChange,
-  className,
-  placeholder,
-  value,
-  label,
-  hideLabel,
-  labelInsideInput,
-  prefix,
-  error,
-  disabled
-}: InputProps) => {
-  const [newValue, setValue] = useState(value);
+export const InputStory = {
+  render: ({
+    onChange,
+    className,
+    placeholder,
+    value,
+    label,
+    hideLabel,
+    labelInsideInput,
+    prefix,
+    error,
+    disabled,
+  }: InputProps) => {
+    const [newValue, setValue] = useState(value);
 
-  const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value)
-    onChange?.(event);
-  }
+    const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
+      setValue(event.target.value);
+      onChange?.(event);
+    };
 
-  return (
-    <Input 
-      onChange={handleOnChange}
-      value={newValue}
-      className={className}
-      placeholder={placeholder}
-      label={label}
-      hideLabel={hideLabel}
-      labelInsideInput={labelInsideInput}
-      prefix={prefix}
-      error={error}
-      disabled={disabled}
-    />
-  );
-};
+    return (
+      <Input
+        onChange={handleOnChange}
+        value={newValue}
+        className={className}
+        placeholder={placeholder}
+        label={label}
+        hideLabel={hideLabel}
+        labelInsideInput={labelInsideInput}
+        prefix={prefix}
+        error={error}
+        disabled={disabled}
+      />
+    );
+  },
 
-InputStory.storyName = 'Input';
+  name: 'Input',
+};
 
 export default story;