feat: select-input-stories

src/components/select/style.ts

@@ -272,12 +272,6 @@ export const customStyles = (
       ...additionalStyles('valueContainer', styles, provided, state),
     };
   },
-  // noOptionsMessage: (base: any, state: any) => {
-  //   return {
-  //     ...base,
-  //     color: 'red',
-  //   };
-  // },
 });
 
 export const StyledSelectWrapper = styled.div<{
@@ -308,7 +302,7 @@ export const StyledSelectWrapper = styled.div<{
   }
 
   .title {
-    color: ${(props: any): string => props.theme.colors.base900};
+    color: ${({ theme }) => theme.colors.base900};
 
     display: block;
   }
@@ -320,7 +314,7 @@ export const StyledSelectWrapper = styled.div<{
 
   .errorTitle {
     bottom: -16px;
-    color: ${(props: any): string => props.theme.colors.error};
+    color: ${({ theme }) => theme.colors.error};
     display: block;
     height: 16px;
     position: absolute;

stories/SelectInput/SelectInput.stories.tsx

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { SelectInput } from 'components/select';
+import { Col, Row } from 'components';
+import docs from './readme.md';
+
+export default {
+  title: 'Example/SelectInput',
+  component: SelectInput,
+  parameters: {
+    docs: {
+      description: {
+        component: docs,
+      },
+    },
+    controls: { disabled: true },
+  },
+} as ComponentMeta<typeof SelectInput>;
+
+const options = [
+  { label: 'Chip', value: 'Chip_1' },
+  { label: 'Chip', value: 'Chip_2' },
+  {
+    label: 'Group 1',
+    options: [
+      { label: 'G1-Option 1', value: 'G1-Option_1' },
+      { label: 'G1-option 2', value: 'G1-Option_2' },
+    ],
+  },
+  {
+    label: 'Group 2',
+    options: [
+      { label: 'G2-Option 1 ', value: 'G2-Option_1' },
+      { label: 'G2-Option 2', value: 'G2-Option_2' },
+      { label: 'G2-Option 3', value: 'G2-Option_3' },
+    ],
+  },
+];
+
+const defaultDeletableOptions = [
+  { label: 'Chip 1', value: 'Chip_1' },
+  { label: 'Chip 2', value: 'Chip_2' },
+  { label: 'Chip 3', value: 'Chip_3' },
+  { label: 'Chip 4', value: 'Chip_4' },
+  { label: 'Chip 5', value: 'Chip_5' },
+];
+
+const FullDemoTemplate = () => {
+  const [deletableOptions, setDeletableOptions] = React.useState(defaultDeletableOptions);
+
+  const [value, setValue] = React.useState<
+    | {
+        label: string;
+        value: string;
+      }
+    | undefined
+  >(undefined);
+
+  const [multiValue, setMultiValue] = React.useState<
+    {
+      label: string;
+      value: string;
+    }[]
+  >([]);
+
+  const handleChange = (val) => {
+    setValue(val);
+  };
+
+  const handleDeleteMultiOption = (val) => {
+    setMultiValue(multiValue?.filter((current) => current.value !== val.value));
+  };
+
+  const handleNewOption = (val) => {
+    setDeletableOptions((prevOptions) => [...prevOptions, { label: val, value: val }]);
+  };
+
+  const handleDeleteItem = (data) => {
+    setDeletableOptions((prevOptions) => prevOptions.filter((i) => i.value !== data.value));
+  };
+
+  return (
+    <Row>
+      <Col xs='12' sm='6'>
+        <SelectInput options={options} title='Single Select' subTitle='Sub title' placeholder='Choose one option' />
+      </Col>
+      <Col xs='12' sm='6'>
+        <SelectInput
+          options={options}
+          title='Multi Select'
+          subTitle='Sub title'
+          isMulti
+          chipIconSize={4}
+          placeholder='Choose many options ...'
+          value={multiValue}
+          onChange={setMultiValue}
+          onDeleteOption={handleDeleteMultiOption}
+        />
+      </Col>
+      <Col xs='12' sm='6'>
+        <SelectInput
+          options={deletableOptions}
+          title='Creatable Select'
+          subTitle='Sub title'
+          placeholder='Choose or create ...'
+          value={value}
+          onChange={handleChange}
+          onCreateOption={handleNewOption}
+          onDeleteItem={handleDeleteItem}
+          creatable
+        />
+      </Col>
+      <Col xs='12' sm='6'>
+        <SelectInput options={options} title='Select with Error' subTitle='Sub title' error='Error options' />
+      </Col>
+      <Col xs='12' sm='6'>
+        <SelectInput title='Disabled select' subTitle='Sub title' placeholder='Disabled' isDisabled />
+      </Col>
+    </Row>
+  );
+};
+
+export const FullDemo = FullDemoTemplate.bind({});
+FullDemo.decorators = [(Story) => <div style={{ minHeight: '600px' }}>{Story()}</div>];
+FullDemo.parameters = {
+  controls: { disable: true },
+};

stories/SelectInput/readme.md

@@ -0,0 +1,98 @@
+## Usage
+
+```js
+...
+import { SelectInput } from '@panenco/ui';
+
+const options = [
+  { label: 'Chip', value: '1' },
+  { label: 'Chip', value: '2' },
+  {
+    label: 'Group 1',
+    options: [
+      { label: 'G1-Option 1', value: 'value_1' },
+      { label: 'G1-option 2', value: 'value_2' },
+    ],
+  },
+  {
+    label: 'Group 2',
+    options: [
+      { label: 'G2-Option 1 ', value: 'value_3' },
+      { label: 'G2-Option 2', value: 'value_4' },
+      { label: 'G2-Option 3', value: 'value_5' },
+    ],
+  },
+];
+
+
+const render = () => {
+  return (
+    <SelectInput
+      options={options}
+      title="Multi Select"
+      subTitle="Sub title"
+      isMulti
+      placeholder="Choose many options ..."
+    />
+);
+}
+...
+```
+
+---
+
+### Properties
+
+This component base on [**react-select**](https://react-select.com/home) library, wrapper inherits **props** from react-select interface and extends with selectWrapperProps object.
+
+- placeholder - component placeholder;
+- error - set state if has error;
+- options - array of options that populate the select menu;
+- isMulti - support multiple selected options;
+- isDisabled - set disabled state;
+- title - set component title;
+- subTitle - set component subtitle;
+- selectWrapperProps - object which should add if you want extends some functionality;
+- onDeleteOption - function which will be called on click by chip's close icon (for multi select);
+- chipTextWeight - text weight;
+- chipTextSize - size chip's text content (by default **typography.s** from your theme);
+- chipTextTypography - object with 2 properties (weight and size);
+- chipIcon - icon for chip (multiply select);
+- chipIconSize - size chip's icon;
+- filterOption - custom method to filter whether an option should be displayed in the menu (by default, filtration is performed by option label);
+- wrapperSelectSizes - object which contain 3 property l, m and s (independ from grid layout) and set size for input element;
+- hideChips - don't render the chips
+- ref - ref;
+- onDeleteItem - a callback which is triggered when you delete an item, if passed adds a bin icon in the right side of option component;
+- deleteItemIcon - custom delete icon (works only if onDeleteItem prop is defined);
+
+Else you can using Async, Creatable and AsyncCreatable Select with next props
+
+- async - use Async Select;
+- creatable - use Creatable Select;
+- async + creatable - use AsyncCreatable Select;
+
+| propName           | propType                                                                | defaultValue | isRequired |
+| ------------------ | ----------------------------------------------------------------------- | ------------ | ---------- |
+| placeholder        | string                                                                  | Select...    | -          |
+| error              | string                                                                  | -            | -          |
+| title              | string                                                                  | -            | -          |
+| subTitle           | string                                                                  | -            | -          |
+| isDisabled         | boolean                                                                 | -            | -          |
+| isMulti            | boolean                                                                 | -            | -          |
+| async              | boolean                                                                 | -            | -          |
+| creatable          | boolean                                                                 | -            | -          |
+| selectWrapperProps | React.HTMLAttributes (HTMLDivElement)                                   | -            | -          |
+| filterOption       | ({data, label, value}, string) => boolean or null                       | -            | -          |
+| chipTextWeight     | string                                                                  | -            | -          |
+| chipTextSize       | {textSize: string, lineHeight: size}                                    | -            | -          |
+| chipTextTypography | {size: {textSize: string, lineHeight: size} , weight: string}           | -            | -          |
+| chipIcon           | [IconType](/?path=/story/icon--icon-component) \| keyof typeof icons.sm | xCircle      | -          |
+| chipIconSize       | string                                                                  | -            | -          |
+| onDeleteOption     | (option) => void                                                        | -            | -          |
+| hideChips          | boolean                                                                 | -            | -          |
+| ref                | React.RefObject                                                         | -            | -          |
+| onDeleteItem       | (data) => any                                                           | -            | -          |
+| deleteItemIcon     | any                                                                     | -            | -          |
+
+It's a basic props what we using, you can look more complete documentation [**here**](https://react-select.com/home)