@spaced-out/ui-design-system 0.4.12 → 0.4.13-beta.0

package/lib/components/Combobox/Combobox.stories.js

@@ -0,0 +1,343 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._PhoneNumberInput = exports._Default = exports._CurrencyInput = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Combobox = require("./Combobox");
+var _helper = require("./helper");
+var _ComboboxStoriesModule = _interopRequireDefault(require("./Combobox.stories.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'Form Components/Combobox',
+  component: _Combobox.Combobox,
+  argTypes: {
+    value: {
+      type: {
+        required: true
+      },
+      description: 'The controlled value to input',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: '{dropdown?: string, input?: string}'
+        }
+      }
+    },
+    onChange: {
+      type: {
+        required: true
+      },
+      description: '**onChange** handler is triggered when there is a selection of an option from dropdown or a change in input value. If input is changed onChange will have `dropdownOption` as undefined and on a dropdown change `inputChange` will be undefined',
+      table: {
+        type: {
+          summary: 'onChange: ({input: string, dropdown: string, inputChange?: InputChange, dropdownOption?: MenuOption}) => mixed'
+        }
+      }
+    },
+    menu: {
+      description: 'Menu props to use',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: 'MenuProps'
+        }
+      }
+    },
+    type: {
+      description: 'Type of Input. Supported types are listed on the dropdown',
+      options: ['text', 'tel'],
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: 'enum'
+        },
+        defaultValue: {
+          summary: 'text'
+        }
+      }
+    },
+    size: {
+      options: ['small', 'medium'],
+      description: 'Combobox supports only two size variants namely small and medium. `small` < `medium`',
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: 'enum'
+        },
+        defaultValue: {
+          summary: 'medium'
+        }
+      }
+    },
+    classNames: {
+      description: 'External classnames to be applied',
+      control: {
+        type: 'object'
+      }
+    },
+    helperText: {
+      description: 'Secondary label of the combobox. This appears on bottom of combobox, if the input is in `error` state the priority is given to `errorText`, in such cases secondary label wont be displayed',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    error: {
+      description: 'if **true**, the component is moved to error state, Error state displays a red border surrounding combobox',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: 'false'
+        }
+      }
+    },
+    errorText: {
+      description: 'Error text to be displayed on the bottom of the combobox. This uses `colorTextDanger`',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    label: {
+      description: 'Primary label of the combobox. This appears on top of combobox',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    disabled: {
+      description: 'If **true**, the component is disabled',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: 'false'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates a Combobox component.',
+      description: {
+        component: `
+\`\`\`js
+import { Combobox } from "@spaced-out/ui-design-system/lib/components/Combobox";
+\`\`\`
+**Combobox** is implemented as a combination of **<a href="..?path=/docs/form-components-dropdown-generic-dropdown--docs">Generic Dropdown</a>** and **<a href="..?path=/docs/form-components-input--docs">Input</a>** components.
+It allows user to input free text and select from the user defined options in the dropdown.
+It is a controlled component, hence **value** and **onChange** props are mandatory.
+It accepts all the props that **Input** and **Generic Dropdown** provides.
+
+Mandatory props:
+* \`value\` accepts an object \`{ dropdown: string, input: string }\` which should have the display strings for both the dropdown and input components. To show the placeholder pass an empty string \`' '\`
+* \`onChange\` callback provides an object with four values in its parameter
+    * \`input\`: the string which is inputted
+    * \`dropdown\`: the \`label\` of the option which is selected
+    * \`inputChange\`: the onChange parameters of Input component
+    * \`dropdownOption\`: the onChange parameters of Dropdown component
+        `
+      }
+    },
+    storySource: {
+      componentPath: '/src/components/Combobox'
+    }
+  }
+};
+const _Default = args => {
+  const [selectedKeys, setSelectedKeys] = React.useState(args.menu?.selectedKeys || []);
+  const [dropDownText, setDropdownText] = React.useState('');
+  const [inputText, setInputText] = React.useState('');
+
+  // @ts-ignore - TS7031 - Binding element 'input' implicitly has an 'any' type. | TS7031 - Binding element 'dropdown' implicitly has an 'any' type. | TS7031 - Binding element 'dropdownOption' implicitly has an 'any' type.
+  const handleChange = _ref => {
+    let {
+      input,
+      dropdown,
+      dropdownOption
+    } = _ref;
+    setInputText(input);
+    setDropdownText(dropdown);
+    if (dropdownOption?.key) {
+      setSelectedKeys([dropdownOption.key]);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: _ComboboxStoriesModule.default.container
+  }, /*#__PURE__*/React.createElement(_Combobox.Combobox, _extends({}, args, {
+    menu: {
+      ...args.menu,
+      selectedKeys
+    },
+    value: {
+      dropdown: dropDownText,
+      input: inputText
+    }
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
+    onChange: handleChange
+  })));
+};
+exports._Default = _Default;
+_Default.args = {
+  label: 'Form Label',
+  inputPlaceholder: 'Enter text...',
+  dropdownPlaceholder: 'Select...',
+  menu: {
+    options: _helper.defaultOptions
+  }
+};
+const _CurrencyInput = args => {
+  const [comboboxData, setComboboxData] = React.useState({
+    selectedKeys: args.menu?.selectedKeys || [],
+    selectedValue: args.value.dropdown || '',
+    inputValue: args.value.input || ''
+  });
+  const [error, setError] = React.useState({
+    state: false,
+    text: ''
+  });
+
+  // @ts-ignore - TS7031 - Binding element 'input' implicitly has an 'any' type. | TS7031 - Binding element 'dropdown' implicitly has an 'any' type. | TS7031 - Binding element 'dropdownOption' implicitly has an 'any' type.
+  const handleChange = _ref2 => {
+    let {
+      input,
+      dropdown,
+      dropdownOption
+    } = _ref2;
+    const withoutCommasInput = input.replace(/,/g, '');
+    const allDigits = /^\d+$/.test(withoutCommasInput);
+    if (withoutCommasInput.length > 0 && !allDigits) {
+      setError({
+        state: true,
+        text: 'Only digits are allowed'
+      });
+    } else {
+      setError({
+        state: false,
+        text: ''
+      });
+    }
+    setComboboxData(_prev => ({
+      ..._prev,
+      inputValue: allDigits ? new Intl.NumberFormat().format(+withoutCommasInput) : input,
+      selectedValue: dropdown,
+      selectedKeys: dropdownOption?.key ? [dropdownOption.key] : _prev.selectedKeys
+    }));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: _ComboboxStoriesModule.default.container
+  }, /*#__PURE__*/React.createElement(_Combobox.Combobox, _extends({}, args, {
+    error: error.state,
+    errorText: error.text,
+    menu: {
+      ...args.menu,
+      selectedKeys: comboboxData.selectedKeys
+    },
+    value: {
+      dropdown: comboboxData.selectedValue,
+      input: comboboxData.inputValue
+    }
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
+    onChange: handleChange
+  })));
+};
+exports._CurrencyInput = _CurrencyInput;
+_CurrencyInput.args = {
+  label: 'Amount',
+  inputPlaceholder: 'Enter amount...',
+  helperText: 'Select the currency and input the price',
+  value: {
+    dropdown: '',
+    input: ''
+  },
+  menu: {
+    options: _helper.currencyOptions
+  }
+};
+const _PhoneNumberInput = args => {
+  const [comboboxData, setComboboxData] = React.useState({
+    selectedKeys: args.menu?.selectedKeys || [],
+    selectedValue: args.value.dropdown || '',
+    inputValue: args.value.input || ''
+  });
+
+  // @ts-ignore - TS7031 - Binding element 'input' implicitly has an 'any' type. | TS7031 - Binding element 'dropdown' implicitly has an 'any' type. | TS7031 - Binding element 'dropdownOption' implicitly has an 'any' type.
+  const handleChange = _ref3 => {
+    let {
+      input,
+      dropdown,
+      dropdownOption
+    } = _ref3;
+    setComboboxData(_prev => ({
+      ..._prev,
+      inputValue: (0, _helper.formatPhoneNumber)(input, dropdownOption?.key || _prev.selectedKeys[0]),
+      selectedValue: dropdown.split(' ')[0],
+      selectedKeys: dropdownOption?.key ? [dropdownOption.key] : _prev.selectedKeys
+    }));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: _ComboboxStoriesModule.default.container
+  }, /*#__PURE__*/React.createElement(_Combobox.Combobox, _extends({}, args, {
+    menu: {
+      ...args.menu,
+      selectedKeys: comboboxData.selectedKeys
+    },
+    value: {
+      dropdown: comboboxData.selectedValue,
+      input: comboboxData.inputValue
+    }
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
+    onChange: handleChange
+  })));
+};
+exports._PhoneNumberInput = _PhoneNumberInput;
+_PhoneNumberInput.args = {
+  label: 'Call Number',
+  inputPlaceholder: 'Number',
+  helperText: 'Select the country code and the number to call',
+  value: {
+    dropdown: '+44',
+    input: '90 1574 7289'
+  },
+  menu: {
+    options: _helper.phoneNumberOptions,
+    allowSearch: true
+  }
+};

package/lib/components/Combobox/Combobox.stories.tsx

@@ -0,0 +1,306 @@
+import * as React from 'react';
+
+import type {ComboboxProps} from './Combobox';
+import {Combobox} from './Combobox';
+import {
+  currencyOptions,
+  defaultOptions,
+  formatPhoneNumber,
+  phoneNumberOptions,
+} from './helper';
+
+import css from './Combobox.stories.module.css';
+
+
+export default {
+  tags: ['autodocs'],
+  title: 'Form Components/Combobox',
+  component: Combobox,
+  argTypes: {
+    value: {
+      type: {required: true},
+      description: 'The controlled value to input',
+      control: {
+        type: 'object',
+      },
+      table: {
+        type: {summary: '{dropdown?: string, input?: string}'},
+      },
+    },
+    onChange: {
+      type: {required: true},
+      description:
+        '**onChange** handler is triggered when there is a selection of an option from dropdown or a change in input value. If input is changed onChange will have `dropdownOption` as undefined and on a dropdown change `inputChange` will be undefined',
+      table: {
+        type: {
+          summary:
+            'onChange: ({input: string, dropdown: string, inputChange?: InputChange, dropdownOption?: MenuOption}) => mixed',
+        },
+      },
+    },
+    menu: {
+      description: 'Menu props to use',
+      control: {
+        type: 'object',
+      },
+      table: {
+        type: {summary: 'MenuProps'},
+      },
+    },
+    type: {
+      description: 'Type of Input. Supported types are listed on the dropdown',
+      options: ['text', 'tel'],
+      control: {
+        type: 'select',
+      },
+      table: {
+        type: {summary: 'enum'},
+        defaultValue: {summary: 'text'},
+      },
+    },
+    size: {
+      options: ['small', 'medium'],
+      description:
+        'Combobox supports only two size variants namely small and medium. `small` < `medium`',
+      control: {
+        type: 'select',
+      },
+      table: {
+        type: {summary: 'enum'},
+        defaultValue: {summary: 'medium'},
+      },
+    },
+    classNames: {
+      description: 'External classnames to be applied',
+      control: {
+        type: 'object',
+      },
+    },
+    helperText: {
+      description:
+        'Secondary label of the combobox. This appears on bottom of combobox, if the input is in `error` state the priority is given to `errorText`, in such cases secondary label wont be displayed',
+      control: {
+        type: 'text',
+      },
+      table: {
+        type: {summary: 'string'},
+      },
+    },
+    error: {
+      description:
+        'if **true**, the component is moved to error state, Error state displays a red border surrounding combobox',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        type: {summary: 'boolean'},
+        defaultValue: {summary: 'false'},
+      },
+    },
+    errorText: {
+      description:
+        'Error text to be displayed on the bottom of the combobox. This uses `colorTextDanger`',
+      control: {
+        type: 'text',
+      },
+      table: {
+        type: {summary: 'string'},
+      },
+    },
+    label: {
+      description:
+        'Primary label of the combobox. This appears on top of combobox',
+      control: {
+        type: 'text',
+      },
+      table: {
+        type: {summary: 'string'},
+      },
+    },
+    disabled: {
+      description: 'If **true**, the component is disabled',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        type: {summary: 'boolean'},
+        defaultValue: {summary: 'false'},
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates a Combobox component.',
+      description: {
+        component: `
+\`\`\`js
+import { Combobox } from "@spaced-out/ui-design-system/lib/components/Combobox";
+\`\`\`
+**Combobox** is implemented as a combination of **<a href="..?path=/docs/form-components-dropdown-generic-dropdown--docs">Generic Dropdown</a>** and **<a href="..?path=/docs/form-components-input--docs">Input</a>** components.
+It allows user to input free text and select from the user defined options in the dropdown.
+It is a controlled component, hence **value** and **onChange** props are mandatory.
+It accepts all the props that **Input** and **Generic Dropdown** provides.
+
+Mandatory props:
+* \`value\` accepts an object \`{ dropdown: string, input: string }\` which should have the display strings for both the dropdown and input components. To show the placeholder pass an empty string \`' '\`
+* \`onChange\` callback provides an object with four values in its parameter
+    * \`input\`: the string which is inputted
+    * \`dropdown\`: the \`label\` of the option which is selected
+    * \`inputChange\`: the onChange parameters of Input component
+    * \`dropdownOption\`: the onChange parameters of Dropdown component
+        `,
+      },
+    },
+    storySource: {
+      componentPath: '/src/components/Combobox',
+    },
+  },
+};
+
+export const _Default = (args: ComboboxProps) => {
+  const [selectedKeys, setSelectedKeys] = React.useState(
+    args.menu?.selectedKeys || [],
+  );
+  const [dropDownText, setDropdownText] = React.useState('');
+  const [inputText, setInputText] = React.useState('');
+
+// @ts-ignore - TS7031 - Binding element 'input' implicitly has an 'any' type. | TS7031 - Binding element 'dropdown' implicitly has an 'any' type. | TS7031 - Binding element 'dropdownOption' implicitly has an 'any' type.
+  const handleChange = ({input, dropdown, dropdownOption}) => {
+    setInputText(input);
+    setDropdownText(dropdown);
+    if (dropdownOption?.key) {
+      setSelectedKeys([dropdownOption.key]);
+    }
+  };
+
+  return (
+    <div className={css.container}>
+      <Combobox
+        {...args}
+        menu={{...args.menu, selectedKeys}}
+        value={{dropdown: dropDownText, input: inputText}}
+// @ts-ignore - TS2769 - No overload matches this call.
+        onChange={handleChange}
+      />
+    </div>
+  );
+};
+
+_Default.args = {
+  label: 'Form Label',
+  inputPlaceholder: 'Enter text...',
+  dropdownPlaceholder: 'Select...',
+  menu: {options: defaultOptions},
+};
+
+export const _CurrencyInput = (args: ComboboxProps) => {
+  const [comboboxData, setComboboxData] = React.useState({
+    selectedKeys: args.menu?.selectedKeys || [],
+    selectedValue: args.value.dropdown || '',
+    inputValue: args.value.input || '',
+  });
+  const [error, setError] = React.useState({
+    state: false,
+    text: '',
+  });
+
+// @ts-ignore - TS7031 - Binding element 'input' implicitly has an 'any' type. | TS7031 - Binding element 'dropdown' implicitly has an 'any' type. | TS7031 - Binding element 'dropdownOption' implicitly has an 'any' type.
+  const handleChange = ({input, dropdown, dropdownOption}) => {
+    const withoutCommasInput = input.replace(/,/g, '');
+
+    const allDigits = /^\d+$/.test(withoutCommasInput);
+    if (withoutCommasInput.length > 0 && !allDigits) {
+      setError({
+        state: true,
+        text: 'Only digits are allowed',
+      });
+    } else {
+      setError({
+        state: false,
+        text: '',
+      });
+    }
+
+    setComboboxData((_prev) => ({
+      ..._prev,
+      inputValue: allDigits
+        ? new Intl.NumberFormat().format(+withoutCommasInput)
+        : input,
+      selectedValue: dropdown,
+      selectedKeys: dropdownOption?.key
+        ? [dropdownOption.key]
+        : _prev.selectedKeys,
+    }));
+  };
+
+  return (
+    <div className={css.container}>
+      <Combobox
+        {...args}
+        error={error.state}
+        errorText={error.text}
+        menu={{...args.menu, selectedKeys: comboboxData.selectedKeys}}
+        value={{
+          dropdown: comboboxData.selectedValue,
+          input: comboboxData.inputValue,
+        }}
+// @ts-ignore - TS2769 - No overload matches this call.
+        onChange={handleChange}
+      />
+    </div>
+  );
+};
+
+_CurrencyInput.args = {
+  label: 'Amount',
+  inputPlaceholder: 'Enter amount...',
+  helperText: 'Select the currency and input the price',
+  value: {dropdown: '', input: ''},
+  menu: {options: currencyOptions},
+};
+
+export const _PhoneNumberInput = (args: ComboboxProps) => {
+  const [comboboxData, setComboboxData] = React.useState({
+    selectedKeys: args.menu?.selectedKeys || [],
+    selectedValue: args.value.dropdown || '',
+    inputValue: args.value.input || '',
+  });
+
+// @ts-ignore - TS7031 - Binding element 'input' implicitly has an 'any' type. | TS7031 - Binding element 'dropdown' implicitly has an 'any' type. | TS7031 - Binding element 'dropdownOption' implicitly has an 'any' type.
+  const handleChange = ({input, dropdown, dropdownOption}) => {
+    setComboboxData((_prev) => ({
+      ..._prev,
+      inputValue: formatPhoneNumber(
+        input,
+        dropdownOption?.key || _prev.selectedKeys[0],
+      ),
+      selectedValue: dropdown.split(' ')[0],
+      selectedKeys: dropdownOption?.key
+        ? [dropdownOption.key]
+        : _prev.selectedKeys,
+    }));
+  };
+
+  return (
+    <div className={css.container}>
+      <Combobox
+        {...args}
+        menu={{...args.menu, selectedKeys: comboboxData.selectedKeys}}
+        value={{
+          dropdown: comboboxData.selectedValue,
+          input: comboboxData.inputValue,
+        }}
+// @ts-ignore - TS2769 - No overload matches this call.
+        onChange={handleChange}
+      />
+    </div>
+  );
+};
+
+_PhoneNumberInput.args = {
+  label: 'Call Number',
+  inputPlaceholder: 'Number',
+  helperText: 'Select the country code and the number to call',
+  value: {dropdown: '+44', input: '90 1574 7289'},
+  menu: {options: phoneNumberOptions, allowSearch: true},
+};