@popsure/dirty-swan 0.65.1 → 0.66.0

package/dist/esm/util/images/index.stories.js

@@ -18,7 +18,8 @@ import '../../components/table/components/TableCell/TableCell.js';
 import { s as styleInject } from '../../style-inject.es-tgCJW-Cu.js';
 import '../../_commonjsHelpers-BFTU3MAI.js';
 import '../../tslib.es6-CVlKGIvp.js';
-import '../../Calendar-C7I0F5Gv.js';
+import '../../Calendar-8rhyapMz.js';
+import '../../useOnClickOutside-B5hujnpp.js';
 import '../../components/icon/icons/Calendar.js';
 import '../../components/icon/IconWrapper/IconWrapper.js';
 import '../../index-CNcEE5dn.js';

package/dist/esm/util/images/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/util/images/index.stories.tsx"],"sourcesContent":["import { ChangeEvent, useState } from 'react';\nimport { illustrations } from '../../util/images';\nimport classNames from 'classnames';\nimport { Button, Input } from '../..';\nimport styles from './style.module.scss';\n\nconst story = {\n  title: 'Utils/Illustrations',\n  parameters: {\n    docs: {\n      description: {\n        component:\n          'Use the `illustrations` object export to access our list of available images.',\n      },\n    },\n  },\n};\n\nconst initialImages = Object.entries(illustrations);\n\nexport const Illustrations = () => {\n  const [value, setValue] = useState('');\n  const [options, setOptions] = useState(initialImages);\n\n  const clearSearch = () => {\n    setValue('');\n    setOptions(initialImages);\n  };\n\n  const handleOnSearch = (event: ChangeEvent<HTMLInputElement>) => {\n    const searchValue = event.target.value;\n    setValue(event.target.value);\n\n    if (searchValue === '') {\n      setOptions(initialImages);\n      return;\n    }\n\n    setOptions(\n      initialImages.filter(([key]) =>\n        key.toLowerCase().includes(searchValue.toLowerCase())\n      )\n    );\n  };\n\n  return (\n    <div>\n      <div className={classNames(styles.searchBar, 'bg-white')}>\n        <div className=\"d-flex gap8 wmx12 m-auto\">\n          <Input\n            className=\"w70\"\n            onChange={handleOnSearch}\n            placeholder=\"Search icon\"\n            value={value}\n          />\n          <Button className=\"w30\" disabled={!value} onClick={clearSearch}>\n            Clear search\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"d-flex f-wrap mt80\">\n        {options.map(([iconKey, src]) => (\n          <div key={iconKey} className=\"w20 p8\">\n            <div className=\"br4 p24 pt16 pb16 bg-neutral-50 w100 d-flex fd-column ai-center\">\n              <div className={styles.imageWrapper}>\n                <img src={src} alt={iconKey} />\n              </div>\n              <span className=\"p-p--small mt16\">{iconKey}</span>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default story;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/util/images/index.stories.tsx"],"sourcesContent":["import { ChangeEvent, useState } from 'react';\nimport { illustrations } from '../../util/images';\nimport classNames from 'classnames';\nimport { Button, Input } from '../..';\nimport styles from './style.module.scss';\n\nconst story = {\n  title: 'Utils/Illustrations',\n  parameters: {\n    docs: {\n      description: {\n        component:\n          'Use the `illustrations` object export to access our list of available images.',\n      },\n    },\n  },\n};\n\nconst initialImages = Object.entries(illustrations);\n\nexport const Illustrations = () => {\n  const [value, setValue] = useState('');\n  const [options, setOptions] = useState(initialImages);\n\n  const clearSearch = () => {\n    setValue('');\n    setOptions(initialImages);\n  };\n\n  const handleOnSearch = (event: ChangeEvent<HTMLInputElement>) => {\n    const searchValue = event.target.value;\n    setValue(event.target.value);\n\n    if (searchValue === '') {\n      setOptions(initialImages);\n      return;\n    }\n\n    setOptions(\n      initialImages.filter(([key]) =>\n        key.toLowerCase().includes(searchValue.toLowerCase())\n      )\n    );\n  };\n\n  return (\n    <div>\n      <div className={classNames(styles.searchBar, 'bg-white')}>\n        <div className=\"d-flex gap8 wmx12 m-auto\">\n          <Input\n            className=\"w70\"\n            onChange={handleOnSearch}\n            placeholder=\"Search icon\"\n            value={value}\n          />\n          <Button className=\"w30\" disabled={!value} onClick={clearSearch}>\n            Clear search\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"d-flex f-wrap mt80\">\n        {options.map(([iconKey, src]) => (\n          <div key={iconKey} className=\"w20 p8\">\n            <div className=\"br4 p24 pt16 pb16 bg-neutral-50 w100 d-flex fd-column ai-center\">\n              <div className={styles.imageWrapper}>\n                <img src={src} alt={iconKey} />\n              </div>\n              <span className=\"p-p--small mt16\">{iconKey}</span>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default story;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.65.1",
+  "version": "0.66.0",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,

package/src/index.tsx

@@ -53,6 +53,7 @@ export {
   LogoInverted,
   LogoPositiveColor,
   LogoPositiveBlack,
+  SearchableDropdown,
 } from './lib';
 
 export * from './lib/components/icon';
@@ -73,6 +74,8 @@ export type {
   IconWrapperProps,
   TableData,
   TableProps,
+  SearchableDropdownProps,
+  SearchableDropdownOption,
 } from './lib';
 
 ReactDOM.render(<App />, document.getElementById('root'));

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

@@ -0,0 +1,286 @@
+import { useState } from 'react';
+import { SearchableDropdown, SearchableDropdownProps } from '.';
+
+const story = {
+  title: 'JSX/SearchableDropdown',
+  component: SearchableDropdown,
+  argTypes: {
+    options: {
+      description: 'Array of options to display',
+      table: {
+        type: {
+          summary: '{ id: string; label: string; icon?: ReactNode }[]',
+        },
+      },
+    },
+    value: {
+      description: 'The currently selected option id',
+    },
+    onChange: {
+      action: true,
+      table: {
+        category: 'Callbacks',
+      },
+    },
+    searchable: {
+      description: 'Whether the dropdown includes a search input',
+      control: 'boolean',
+    },
+    placeholder: {
+      description: 'Placeholder text for the search input',
+      control: 'text',
+    },
+    triggerPlaceholder: {
+      description: 'Placeholder text shown on the trigger when no value is selected',
+      control: 'text',
+    },
+    noResultsText: {
+      description: 'Text shown when no options match the search',
+      control: 'text',
+    },
+    groupName: {
+      description: 'Name attribute for the radio group',
+      control: 'text',
+    },
+    dropUp: {
+      description: 'Whether the dropdown opens upward',
+      control: 'boolean',
+    },
+    condensed: {
+      description: 'Whether to use a compact trigger (icon only)',
+      control: 'boolean',
+    },
+    bordered: {
+      description: 'Whether to show a border on the trigger',
+      control: 'boolean',
+    },
+    showChevron: {
+      description: 'Whether to show a chevron icon on the trigger',
+      control: 'boolean',
+    },
+  },
+  args: {
+    options: [
+      { id: 'de', label: 'Germany' },
+      { id: 'fr', label: 'France' },
+      { id: 'es', label: 'Spain' },
+      { id: 'it', label: 'Italy' },
+      { id: 'pt', label: 'Portugal' },
+    ],
+    value: 'de',
+    searchable: false,
+    placeholder: 'Search',
+    triggerPlaceholder: 'Select a country',
+    noResultsText: 'No results found',
+    groupName: 'country',
+    dropUp: false,
+    condensed: false,
+    bordered: false,
+    showChevron: false,
+  },
+  parameters: {
+    componentSubtitle:
+      'A dropdown component that supports searchable options with keyboard navigation.',
+  },
+};
+
+export const Default = {
+  render: (args: SearchableDropdownProps) => {
+    const [selected, setSelected] = useState(args.value);
+
+    return (
+      <div style={{ width: 300 }}>
+        <SearchableDropdown
+          {...args}
+          value={selected}
+          onChange={(val) => {
+            args.onChange(val);
+            setSelected(val);
+          }}
+        />
+      </div>
+    );
+  },
+
+  name: 'Default',
+};
+
+export const Searchable = {
+  render: (args: SearchableDropdownProps) => {
+    const [selected, setSelected] = useState(args.value);
+
+    const options = [
+      { id: 'de', label: 'Germany' },
+      { id: 'fr', label: 'France' },
+      { id: 'es', label: 'Spain' },
+      { id: 'it', label: 'Italy' },
+      { id: 'pt', label: 'Portugal' },
+      { id: 'nl', label: 'Netherlands' },
+      { id: 'be', label: 'Belgium' },
+      { id: 'at', label: 'Austria' },
+      { id: 'ch', label: 'Switzerland' },
+      { id: 'pl', label: 'Poland' },
+    ];
+
+    return (
+      <div style={{ width: 300 }}>
+        <SearchableDropdown
+          {...args}
+          options={options}
+          searchable
+          value={selected}
+          onChange={(val) => {
+            args.onChange(val);
+            setSelected(val);
+          }}
+        />
+      </div>
+    );
+  },
+
+  name: 'Searchable',
+};
+
+export const WithIcons = {
+  render: (args: SearchableDropdownProps) => {
+    const [selected, setSelected] = useState('de');
+
+    const options = [
+      { id: 'de', label: 'Germany', icon: <span>🇩🇪</span> },
+      { id: 'fr', label: 'France', icon: <span>🇫🇷</span> },
+      { id: 'es', label: 'Spain', icon: <span>🇪🇸</span> },
+      { id: 'it', label: 'Italy', icon: <span>🇮🇹</span> },
+      { id: 'pt', label: 'Portugal', icon: <span>🇵🇹</span> },
+    ];
+
+    return (
+      <div style={{ width: 300 }}>
+        <SearchableDropdown
+          {...args}
+          options={options}
+          value={selected}
+          onChange={(val) => {
+            args.onChange(val);
+            setSelected(val);
+          }}
+        />
+      </div>
+    );
+  },
+
+  name: 'With Icons',
+};
+
+export const Condensed = {
+  render: (args: SearchableDropdownProps) => {
+    const [selected, setSelected] = useState('de');
+
+    const options = [
+      { id: 'de', label: 'Germany', icon: <span>🇩🇪</span> },
+      { id: 'fr', label: 'France', icon: <span>🇫🇷</span> },
+      { id: 'es', label: 'Spain', icon: <span>🇪🇸</span> },
+    ];
+
+    return (
+      <SearchableDropdown
+        {...args}
+        options={options}
+        condensed
+        bordered
+        value={selected}
+        onChange={(val) => {
+          args.onChange(val);
+          setSelected(val);
+        }}
+      />
+    );
+  },
+
+  name: 'Condensed',
+};
+
+export const WithChevron = {
+  render: (args: SearchableDropdownProps) => {
+    const [selected, setSelected] = useState('de');
+
+    const options = [
+      { id: 'de', label: 'Germany' },
+      { id: 'fr', label: 'France' },
+      { id: 'es', label: 'Spain' },
+    ];
+
+    return (
+      <div style={{ width: 300 }}>
+        <SearchableDropdown
+          {...args}
+          options={options}
+          showChevron
+          bordered
+          value={selected}
+          onChange={(val) => {
+            args.onChange(val);
+            setSelected(val);
+          }}
+        />
+      </div>
+    );
+  },
+
+  name: 'With Chevron',
+};
+
+export const Disabled = {
+  render: (args: SearchableDropdownProps) => {
+    return (
+      <div style={{ width: 300 }}>
+        <SearchableDropdown
+          {...args}
+          options={[
+            { id: 'de', label: 'Germany' },
+            { id: 'fr', label: 'France' },
+            { id: 'es', label: 'Spain' },
+          ]}
+          disabled
+          bordered
+          showChevron
+          value="de"
+          onChange={args.onChange}
+        />
+      </div>
+    );
+  },
+
+  name: 'Disabled',
+};
+
+export const DropUp = {
+  render: (args: SearchableDropdownProps) => {
+    const [selected, setSelected] = useState('de');
+
+    const options = [
+      { id: 'de', label: 'Germany' },
+      { id: 'fr', label: 'France' },
+      { id: 'es', label: 'Spain' },
+    ];
+
+    return (
+      <div style={{ width: 300, marginTop: 300 }}>
+        <SearchableDropdown
+          {...args}
+          options={options}
+          dropUp
+          searchable
+          value={selected}
+          onChange={(val) => {
+            args.onChange(val);
+            setSelected(val);
+          }}
+        />
+      </div>
+    );
+  },
+
+  name: 'Drop Up',
+};
+
+export default story;