@popsure/dirty-swan 0.61.2 → 0.62.0

package/src/lib/components/downloadButton/index.stories.tsx

@@ -8,7 +8,8 @@ const story = {
       description: 'Status of the button',
     },
     customFail: {
-      description: 'Customised error message. Only visible when button is on `FAILED` state.',
+      description:
+        'Customised error message. Only visible when button is on `FAILED` state.',
       control: 'text',
     },
     onDownload: {
@@ -19,42 +20,45 @@ const story = {
       },
     },
     className: {
-      description: 'This property allows to add custom styles to the component.',
-    }
+      description:
+        'This property allows to add custom styles to the component.',
+    },
   },
   args: {
     downloadStatus: 'INITIAL',
   },
   parameters: {
-    componentSubtitle: 'DownloadButton component displays progress and status of downloading files.',
+    componentSubtitle:
+      'DownloadButton component displays progress and status of downloading files.',
   },
 };
 
-export const DownloadButtonStory = ({
-  downloadStatus,
-  onDownload,
-  className,
-  customFail
-}: DownloadButtonProps) => (
-  <DownloadButton
-    className={className}
-    customFail={customFail}
-    downloadStatus={downloadStatus}
-    onDownload={onDownload}
-  />
-);
-
-DownloadButtonStory.storyName = "DownloadButton";
-
-export const CustomErrorMessage = ({
+export const DownloadButtonStory = {
+  render: ({
+    downloadStatus,
     onDownload,
-}: DownloadButtonProps) => (
-  <DownloadButton
-    customFail="Custom error message"
-    downloadStatus="FAILED"
-    onDownload={onDownload}
-  />
-);
+    className,
+    customFail,
+  }: DownloadButtonProps) => (
+    <DownloadButton
+      className={className}
+      customFail={customFail}
+      downloadStatus={downloadStatus}
+      onDownload={onDownload}
+    />
+  ),
 
+  name: 'DownloadButton',
+};
+
+export const CustomErrorMessage = {
+  render: ({ onDownload }: DownloadButtonProps) => (
+    <DownloadButton
+      customFail="Custom error message"
+      downloadStatus="FAILED"
+      onDownload={onDownload}
+    />
+  ),
+};
 
 export default story;

package/src/lib/components/icon/icons.stories.tsx

@@ -29,40 +29,41 @@ export const IconsList = () => {
       return;
     }
 
-    setOptions(iconsList.filter(([key]) => 
-      key.toLowerCase()
-        .includes(searchValue.toLowerCase())
-    ));
+    setOptions(
+      iconsList.filter(([key]) =>
+        key.toLowerCase().includes(searchValue.toLowerCase())
+      )
+    );
   };
 
   return (
     <div>
       <div className={classNames(styles.searchBar, 'bg-white')}>
-        <div className='d-flex gap8 wmx12 m-auto'>
-        <Input
-          className='w70'
-          onChange={handleOnSearch}
-          placeholder='Search icon'
-          value={value} 
-        />
-        <Button className='w30' disabled={!value} onClick={clearSearch}>
-          Clear search
-        </Button>
+        <div className="d-flex gap8 wmx12 m-auto">
+          <Input
+            className="w70"
+            onChange={handleOnSearch}
+            placeholder="Search icon"
+            value={value}
+          />
+          <Button className="w30" disabled={!value} onClick={clearSearch}>
+            Clear search
+          </Button>
         </div>
       </div>
 
-      <div className='d-flex f-wrap mt80'>
+      <div className="d-flex f-wrap mt80">
         {options.map(([iconKey, Icon]) => (
           <div key={iconKey} className="w20 p8">
-            <div className='br4 p24 pt16 pb16 bg-neutral-50 w100 d-flex fd-column ai-center'>
+            <div className="br4 p24 pt16 pb16 bg-neutral-50 w100 d-flex fd-column ai-center">
               <Icon size={32} />
-              <span className='p-p--small'>{iconKey}</span>
+              <span className="p-p--small">{iconKey}</span>
             </div>
           </div>
         ))}
       </div>
     </div>
   );
-}
+};
 
 export default story;

package/src/lib/components/icon/index.stories.tsx

@@ -2,7 +2,7 @@ import { IconWrapper, IconWrapperProps } from './IconWrapper';
 import * as icons from './icons';
 
 const iconsList = Object.keys(icons);
-type IconKey = typeof iconsList[number];
+type IconKey = (typeof iconsList)[number];
 
 const story = {
   title: 'JSX/Icon',
@@ -11,8 +11,8 @@ const story = {
     icon: {
       description: 'Identifier key of the icon',
       table: {
-        type: { 
-          summary: 'IconKey (see Available Icons story for all icons)'
+        type: {
+          summary: 'IconKey (see Available Icons story for all icons)',
         },
       },
       control: 'select',
@@ -28,8 +28,8 @@ const story = {
       description: 'Class name for updating components styles',
       control: 'text',
       table: {
-        type: { 
-          summary: 'Your own custom classnames can be added here'
+        type: {
+          summary: 'Your own custom classnames can be added here',
         },
       },
     },
@@ -39,23 +39,24 @@ const story = {
     size: 32,
     color: 'purple-600',
     noMargin: false,
-    className: ''
-  }
+    className: '',
+  },
 };
 
-export const IconStory = ({ color, className, icon, size }: IconWrapperProps & { icon: IconKey }) => {
-  // @ts-ignore
-  const Icon = icons?.[icon];
+export const IconStory = {
+  render: ({
+    color,
+    className,
+    icon,
+    size,
+  }: IconWrapperProps & { icon: IconKey }) => {
+    // @ts-ignore
+    const Icon = icons?.[icon];
 
-  return Icon && (
-    <Icon
-      size={size}
-      color={color}
-      className={className}
-    />
-  );
-}
+    return Icon && <Icon size={size} color={color} className={className} />;
+  },
 
-IconStory.storyName = "Icon";
+  name: 'Icon',
+};
 
 export default story;

package/src/lib/components/informationBox/index.stories.tsx

@@ -26,27 +26,29 @@ const story = {
     showIcon: false,
     size: 'default',
     variant: 'information',
-  }
+  },
 };
 
-export const InformationBoxStory = ({
-  children,
-  showIcon,
-  title,
-  size,
-  variant,
-}: InformationBoxProps) => (
-  <div className='wmx6'>
-    <InformationBox
-      children={children}
-      showIcon={showIcon}
-      title={title}
-      size={size}
-      variant={variant}
-    />
-  </div>
-);
+export const InformationBoxStory = {
+  render: ({
+    children,
+    showIcon,
+    title,
+    size,
+    variant,
+  }: InformationBoxProps) => (
+    <div className="wmx6">
+      <InformationBox
+        children={children}
+        showIcon={showIcon}
+        title={title}
+        size={size}
+        variant={variant}
+      />
+    </div>
+  ),
 
-InformationBoxStory.storyName = "InformationBox";
+  name: 'InformationBox',
+};
 
 export default story;

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

@@ -8,52 +8,58 @@ const story = {
   component: AutoSuggestInput,
   argTypes: {
     suggestions: {
-      description: 'List of suggestions that should be displayed to the respective input',
+      description:
+        'List of suggestions that should be displayed to the respective input',
     },
     currentOption: {
       description: 'Current input of the component by user',
     },
     placeholder: {
-      description: 'Placeholder for DirtySwan Input component'
+      description: 'Placeholder for DirtySwan Input component',
     },
     className: {
       description: 'Class name for the most parent element',
-      control: 'text'
+      control: 'text',
     },
     wrapText: {
-      description: 'Wether or not wrap the entries in the dropdown or hide overflown text',
+      description:
+        'Wether or not wrap the entries in the dropdown or hide overflown text',
     },
     inputProps: {
       control: { type: 'object' },
       table: {
-        type: { 
-          summary: 'InputHTMLAttributes'
+        type: {
+          summary: 'InputHTMLAttributes',
         },
       },
     },
     handleSuggestionSelected: {
-      description: 'Function that runs when a suggestion is selected from the dropdown',
+      description:
+        'Function that runs when a suggestion is selected from the dropdown',
       action: true,
       table: {
         category: 'Callbacks',
       },
     },
     onChange: {
-      description: 'Function that is called when value of current input changes',
+      description:
+        'Function that is called when value of current input changes',
       action: true,
       table: {
         category: 'Callbacks',
       },
     },
     handleSuggestionFetchRequest: {
-      description: 'Function that allows control of which suggestions should be displayed',
+      description:
+        'Function that allows control of which suggestions should be displayed',
       action: true,
       table: {
         category: 'Callbacks',
       },
     },
     handleSuggestionClearRequest: {
-      description: 'Function that runs when suggestions are cleared (eg. input removal, selecting suggestion)',
+      description:
+        'Function that runs when suggestions are cleared (eg. input removal, selecting suggestion)',
       action: true,
       table: {
         category: 'Callbacks',
@@ -84,75 +90,77 @@ const story = {
     inputProps: {},
   },
   parameters: {
-    componentSubtitle: 'This component allows quick search via the input field to find an option for selection',
+    componentSubtitle:
+      'This component allows quick search via the input field to find an option for selection',
   },
 };
 
-export const AutoSuggestInputStory = ({
-  currentOption = '', 
-  suggestions,
-  handleSuggestionSelected,
-  onChange,
-  handleSuggestionFetchRequest,
-  handleSuggestionClearRequest,
-  placeholder,
-  className,
-  wrapText,
-  inputProps,
-}: AutoSuggestInputProps) => {
-  
-  const [selectedValues, setSelectedValues] = useState<Option[]>([]);
-  const [selectedOption, setSelectedOption] = useState(currentOption);
-  const [options, setOptions] = useState([]);
+export const AutoSuggestInputStory = {
+  render: ({
+    currentOption = '',
+    suggestions,
+    handleSuggestionSelected,
+    onChange,
+    handleSuggestionFetchRequest,
+    handleSuggestionClearRequest,
+    placeholder,
+    className,
+    wrapText,
+    inputProps,
+  }: AutoSuggestInputProps) => {
+    const [selectedValues, setSelectedValues] = useState<Option[]>([]);
+    const [selectedOption, setSelectedOption] = useState(currentOption);
+    const [options, setOptions] = useState([]);
 
-  const handleSelected = (value: Option) => {
-    handleSuggestionSelected(value);
+    const handleSelected = (value: Option) => {
+      handleSuggestionSelected(value);
 
-    const newSelectedOptions = [...selectedValues, value];
-    setSelectedValues(newSelectedOptions);
-    setSelectedOption(value.value);
-  };
+      const newSelectedOptions = [...selectedValues, value];
+      setSelectedValues(newSelectedOptions);
+      setSelectedOption(value.value);
+    };
 
-  const handleFetchRequest = (value: Option) => {
-    handleSuggestionFetchRequest(value);
+    const handleFetchRequest = (value: Option) => {
+      handleSuggestionFetchRequest(value);
 
-    const filteredOptions = options.filter((option: Option) =>
-      option.value.toLowerCase().startsWith(option.value.toLowerCase())
-    );
-    setSelectedValues(filteredOptions);
-  };
+      const filteredOptions = options.filter((option: Option) =>
+        option.value.toLowerCase().startsWith(option.value.toLowerCase())
+      );
+      setSelectedValues(filteredOptions);
+    };
 
-  const handleClearSuggestions = () => {
-    handleSuggestionClearRequest();
+    const handleClearSuggestions = () => {
+      handleSuggestionClearRequest();
 
-    setOptions([]);
-  };
+      setOptions([]);
+    };
 
-  const handleOnChange = (value: string) => {
-    onChange(value);
+    const handleOnChange = (value: string) => {
+      onChange(value);
 
-    setSelectedOption(value);
-  };
+      setSelectedOption(value);
+    };
 
-  return (
-    <div style={{ minHeight: '300px' }}>
-      <AutoSuggestInput
-        currentOption={selectedOption}
-        suggestions={suggestions}
-        handleSuggestionSelected={handleSelected}
-        onChange={handleOnChange}
-        handleSuggestionFetchRequest={handleFetchRequest}
-        handleSuggestionClearRequest={handleClearSuggestions}
-        placeholder={placeholder}
-        className={className}
-        wrapText={wrapText}
-        inputProps={inputProps}
-      />
-    </div>
-  );
-};
+    return (
+      <div style={{ minHeight: '300px' }}>
+        <AutoSuggestInput
+          currentOption={selectedOption}
+          suggestions={suggestions}
+          handleSuggestionSelected={handleSelected}
+          onChange={handleOnChange}
+          handleSuggestionFetchRequest={handleFetchRequest}
+          handleSuggestionClearRequest={handleClearSuggestions}
+          placeholder={placeholder}
+          className={className}
+          wrapText={wrapText}
+          inputProps={inputProps}
+        />
+      </div>
+    );
+  },
 
-AutoSuggestInputStory.storyName = "AutoSuggestInput";
+  name: 'AutoSuggestInput',
+};
 
 export const OptionType = () => (
   <pre>
@@ -161,6 +169,6 @@ export const OptionType = () => (
       leftIcon?: string; // image of the provided option to be displayed on UI
 }`}
   </pre>
-)
+);
 
 export default story;

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

@@ -11,32 +11,35 @@ const story = {
     options: {
       description: 'List of all options available to search from',
       table: {
-        type: { 
-          summary: 'Option[]'
+        type: {
+          summary: 'Option[]',
         },
       },
     },
     selectedValues: {
       description: 'List of all selected values',
       table: {
-        type: { 
-          summary: 'Option[]'
+        type: {
+          summary: 'Option[]',
         },
       },
     },
     placeholder: {
-      description: 'Placeholder for DirtySwan Input component'
+      description: 'Placeholder for DirtySwan Input component',
     },
     chipsListClassName: {
-      description: 'Class name for the most parent element of the Chip component',
-      control: 'text'
+      description:
+        'Class name for the most parent element of the Chip component',
+      control: 'text',
     },
     multiSelectClassName: {
-      description: 'Class name for the most parent element of the AutoSuggestInput component',
-      control: 'text'
+      description:
+        'Class name for the most parent element of the AutoSuggestInput component',
+      control: 'text',
     },
     wrapText: {
-      description: 'Wether or not wrap the entries in the dropdown or hide overflown text',
+      description:
+        'Wether or not wrap the entries in the dropdown or hide overflown text',
     },
     setValues: {
       description: 'Function that runs when selecting values',
@@ -62,8 +65,8 @@ const story = {
         value: 'test value',
         leftIcon: featherLogo,
       },
-    ], 
-    selectedValues:  [
+    ],
+    selectedValues: [
       { value: 'feather', leftIcon: featherLogo },
       { value: 'feather2', leftIcon: featherLogo },
     ],
@@ -73,47 +76,52 @@ const story = {
     wrapText: false,
   },
   parameters: {
-    componentSubtitle: 'AutoSuggestMultiSelect is a combination of the AutoSuggestInput and Chip components',
+    componentSubtitle:
+      'AutoSuggestMultiSelect is a combination of the AutoSuggestInput and Chip components',
     docs: {
       description: {
         component: `This component allows quick search via the input field to find an option for selection.
         \nUpon selecting an option, the option is displayed above the input field as a chip.
         \nThe chip can be removed by clicking on the X button. Multi options can be selected as well.
-        \nProp \`setValues\` function must be provided to keep track of removed and added option selections.`
+        \nProp \`setValues\` function must be provided to keep track of removed and added option selections.`,
       },
     },
   },
 };
 
-export const AutoSuggestMultiSelectStory = ({
-  options,
-  selectedValues,
-  setValues,
-  placeholder,
-  chipsListClassName,
-  multiSelectClassName,
-  wrapText,
-}: AutoSuggestMultiSelectProps) => {
-  const [values, setSelectedValues] = useState(selectedValues);
+export const AutoSuggestMultiSelectStory = {
+  render: ({
+    options,
+    selectedValues,
+    setValues,
+    placeholder,
+    chipsListClassName,
+    multiSelectClassName,
+    wrapText,
+  }: AutoSuggestMultiSelectProps) => {
+    const [values, setSelectedValues] = useState(selectedValues);
+
+    const handleSetValues = (options: Option[]) => {
+      setValues(options);
+      setSelectedValues(options);
+    };
 
-  const handleSetValues = (options: Option[]) => {
-    setValues(options);
-    setSelectedValues(options);
-  }
+    return (
+      <div style={{ minHeight: '240px' }}>
+        <AutoSuggestMultiSelect
+          options={options}
+          selectedValues={values}
+          setValues={handleSetValues}
+          placeholder={placeholder}
+          chipsListClassName={chipsListClassName}
+          multiSelectClassName={multiSelectClassName}
+          wrapText={wrapText}
+        />
+      </div>
+    );
+  },
 
-  return (
-    <div style={{ minHeight: '240px' }}>
-      <AutoSuggestMultiSelect
-       options={options}
-       selectedValues={values}
-       setValues={handleSetValues}
-       placeholder={placeholder}
-       chipsListClassName={chipsListClassName}
-       multiSelectClassName={multiSelectClassName}
-       wrapText={wrapText}
-      />
-    </div>
-  );
+  name: 'AutoSuggestMultiSelect',
 };
 
 export const OptionType = () => (
@@ -123,8 +131,6 @@ export const OptionType = () => (
       leftIcon?: string; // image of the provided option to be displayed on UI
 }`}
   </pre>
-)
-
-AutoSuggestMultiSelectStory.storyName = "AutoSuggestMultiSelect";
+);
 
 export default story;