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

package/lib/components/Dropdown/SimpleDropdown.stories.js

@@ -0,0 +1,569 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._WithSimpleOptionsTooltip = exports._WithSimpleOptions = exports._WithSearch = exports._WithRadioOptions = exports._WithHeaderAndFooter = exports._WithCheckboxOptions = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Menu = require("../Menu/Menu.stories");
+var _Tooltip = require("../Tooltip");
+var _SimpleDropdown = require("./SimpleDropdown");
+var _DropdownStoriesModule = _interopRequireDefault(require("./Dropdown.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); }
+const elevationOptions = [...Object.values(_Tooltip.ELEVATION_TYPES)];
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'Form Components/Dropdown/Simple Dropdown',
+  component: _SimpleDropdown.SimpleDropdown,
+  argTypes: {
+    size: {
+      description: 'Dropdown supports only two size variants namely small and medium. `small` < `medium`',
+      options: ['medium', 'small'],
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: 'enum'
+        },
+        defaultValue: {
+          summary: 'medium'
+        }
+      }
+    },
+    required: {
+      description: 'if **true**, a red star would be added to the label',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: 'false'
+        }
+      }
+    },
+    options: {
+      description: 'Options to be displayed in dropdown',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: 'Array<MenuOption>'
+        }
+      }
+    },
+    name: {
+      description: 'Name of the Dropdown',
+      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'
+        }
+      }
+    },
+    placeholder: {
+      description: 'Placeholder of dropdown. This appears inside the input box',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    locked: {
+      description: 'if **true**, the component is locked, Locked state is the readonly state of the dropdown',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: 'false'
+        }
+      }
+    },
+    error: {
+      description: 'if **true**, the component is moved to error state, Error state displays a red border surrounding input',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: 'false'
+        }
+      }
+    },
+    errorText: {
+      description: 'Error text to be displayed on the bottom of the input. This uses `colorTextDanger`',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    label: {
+      description: 'Primary label of the dropdown. This appears on top of dropdown input',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    helperText: {
+      description: 'Secondary label of the dropdown. This appears on bottom of dropdown input, if the dropdown 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'
+        }
+      }
+    },
+    elevation: {
+      description: 'Elevation level for the dropdown menu. This controls the z-index stacking order. Default is set to "modal" elevation. Use higher elevation levels when rendering the dropdown above other elevated elements like Modal, Toast, etc.',
+      control: {
+        type: 'select'
+      },
+      options: elevationOptions,
+      table: {
+        type: {
+          summary: 'enum'
+        },
+        defaultValue: {
+          summary: 'modal'
+        }
+      }
+    },
+    classNames: {
+      description: 'External classnames to be applied',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: '{wrapper?: string, box?: string}'
+        }
+      }
+    },
+    menuClassNames: {
+      description: 'External classnames to be applied to the menu. Wrapper gets applied to Menu wrapper and option gets applied to each option in the menu.',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: '{wrapper?: string, option?: string, groupTitle?: string, optionTextContainer?: string, optionTextLabel?: string}'
+        }
+      }
+    },
+    onChange: {
+      description: '**onChange** handler is triggered when there is a selection of an option from dropdown',
+      action: 'changed',
+      table: {
+        type: {
+          summary: '(option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed'
+        }
+      }
+    },
+    onMenuOpen: {
+      description: '**onMenuOpen** handler is triggered when menu is opened. This should be helpful in cases where you want to change Button icon / text on this trigger.',
+      action: 'clicked',
+      table: {
+        type: {
+          summary: '() => mixed'
+        }
+      }
+    },
+    onMenuClose: {
+      description: '**onMenuClose** handler is triggered when menu is closed. This should be helpful in cases where you want to change Button icon / text on this trigger.',
+      action: 'clicked',
+      table: {
+        type: {
+          summary: '() => mixed'
+        }
+      }
+    },
+    onFocus: {
+      description: '**onFocus** handler is triggered when dropdown is focussed',
+      action: 'focussed',
+      table: {
+        type: {
+          summary: '(e: SyntheticInputEvent<HTMLInputElement>) => mixed'
+        }
+      }
+    },
+    onBlur: {
+      description: '**onBlur** handler is triggered when dropdown is blurred',
+      action: 'blurred',
+      table: {
+        type: {
+          summary: '(e: SyntheticInputEvent<HTMLInputElement>) => mixed'
+        }
+      }
+    },
+    optionsVariant: {
+      description: 'Menu supports multiple options variant',
+      control: {
+        type: 'select'
+      },
+      options: ['checkbox', 'radio', 'normal'],
+      table: {
+        type: {
+          summary: 'enum'
+        },
+        defaultValue: {
+          summary: 'normal'
+        }
+      }
+    },
+    allowSearch: {
+      description: `if **true**, the component would show a search input on top of menu.
+        This is a simple **static search**
+        which filter options by **matching search text to option label**`,
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: false
+        }
+      }
+    },
+    selectedKeys: {
+      description: 'Selected keys corresponding to options. These options are shown as selected in UI',
+      control: {
+        type: 'array'
+      },
+      table: {
+        type: {
+          summary: 'Array<string>'
+        }
+      }
+    },
+    resolveLabel: {
+      description: 'A function that resolves the label for a MenuOption. This is useful when you want to customize the label of an option based on some condition',
+      table: {
+        type: {
+          summary: '(option: MenuOption) => string | React.ReactNode'
+        }
+      }
+    },
+    resolveSecondaryLabel: {
+      description: 'A function that resolves the secondary label for a MenuOption. This is useful when you want to customize the secondary label of an option based on some condition',
+      table: {
+        type: {
+          summary: '(option: MenuOption) => string | React.ReactNode'
+        }
+      }
+    },
+    menuVirtualization: {
+      description: `If **Enabled**, the options will only be rendered when they are within the component's viewport. **menuHeight and itemHeight** accept numerical input, interpreted as pixel values.`,
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: '{enable: boolean, menuHeight?: number, itemHeight?: number}'
+        }
+      }
+    },
+    header: {
+      description: 'Custom Header For the Menu',
+      table: {
+        type: {
+          summary: 'React.ReactNode'
+        }
+      }
+    },
+    footer: {
+      description: 'Custom Header For the Menu',
+      table: {
+        type: {
+          summary: 'React.ReactNode'
+        }
+      }
+    },
+    clickAwayRef: {
+      type: {
+        optional: true
+      },
+      description: 'ref that contains the functions to open or close the child',
+      table: {
+        type: {
+          summary: 'ClickAwayRefType'
+        }
+      }
+    },
+    showLabelTooltip: {
+      description: 'Show Tooltip on the label of the menu option if truncated',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: 'MenuLabelTooltip'
+        }
+      }
+    },
+    allowWrap: {
+      description: 'Allows the label to wrap up to 3 lines. If truncated, a tooltip will display up to 10 lines.',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: false
+        }
+      }
+    },
+    staticLabels: {
+      description: 'Static labels to be displayed in the dropdown with search input',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: '{RESULT?: string, RESULTS?: string, SEARCH_PLACEHOLDER?: string}'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates a Dropdown component',
+      description: {
+        component: `
+\`\`\`js
+import { SimpleDropdown } from "@spaced-out/ui-design-system/lib/components/Dropdown";
+\`\`\`
+**SimpleDropdown** is implemented as a combination of **<a href="../?path=/docs/form-components-input--docs">Input</a>** and **<a href="../?path=/docs/components-menu--docs">Menu</a>**
+components. It internally uses **Floating UI** to
+position itself in context of DOM. Supports a bunch of callbacks listed below.
+
+- **SimpleDropdown** serially spreads out BaseMenuProps, meaning it would accept options as a prop instead of whole Menu.
+- **SimpleDropdown** would have implicit label selection behavior built in, meaning if you select an option the
+label would get auto populated for the component itself.
+- The component maintains an internal state for selections. You can always override it with explicit **selectedKeys**
+prop which changes on **onChange** callback.
+- You can always get the most recent instance of selected options from ref by using \`ref.current?.selectedKeys\`. This might be useful when you have
+options which are multi-select.
+- The component also supports custom **header** as \`React Component\` and this is then passed in
+the **<a href="../?path=/docs/components-menu--docs">Menu</a>** Component.
+- The component also supports custom **footer** as \`React Component\` and this is then passed in
+the **<a href="../?path=/docs/components-menu--docs">Menu</a>** Component. This might be useful when you need
+to save some state in the parent component.
+- Supports passing a \`clickAwayRef\` prop to the component.
+- You can always force Open the instance from ref by using \`clickAwayRef.current?.forceOpen()\`. This might be useful when want to force Open as per you needs.
+- You can always force Close the instance from ref by using \`clickAwayRef.current?.forceClose()\`. This might be useful when want to force Close as per you needs.
+
+
+
+For checkbox type options you can get the latest instance of selected Keys from the component itself:
+
+\`\`\`jsx
+export const _WithCheckboxOptions = (args: SimpleDropdownProps): React.ReactNode => {
+  const ref = React.useRef(null);
+  const clickAwayRef = React.useRef(null);
+
+  const handleChange = () => {
+    // Get your current instance of selected keys from ref
+    // const selectedKeys = ref.current?.selectedKeys;
+  };
+
+  return (
+    <div className={css.dropdownWrapper}>
+      <div className={css.content}>
+      <SimpleDropdown
+        label="Form Label"
+        options={options}
+        optionsVariant={'checkbox'}
+        selectedKeys={['4']}
+        onChange={handleChange}
+        ref={ref}
+        clickAwayRef={clickAwayRef}
+      />
+      </div>
+    </div>
+  );
+};
+\`\`\`
+        `
+      }
+    },
+    storySource: {
+      componentPath: '/src/components/Dropdown/Dropdown.jsx'
+    }
+  }
+};
+const options = [{
+  key: '1',
+  label: 'Option one',
+  iconLeft: 'coffee'
+}, {
+  key: '2',
+  label: 'Option two',
+  iconLeft: 'user'
+}, {
+  key: '4',
+  label: 'Option three is a very long option that would truncate and keep going to make it even longer than before. You can hover over the label to see the full text. ShowLabelTooltip maxLines is used to define the number of lines to show in the tooltip.',
+  iconLeft: 'face-party'
+}, {
+  key: '5',
+  label: 'Option five(disabled)',
+  disabled: true,
+  iconLeft: 'flag'
+}, {
+  key: '6',
+  label: 'Option six(disabled) very long option that would truncate',
+  disabled: true,
+  iconLeft: 'camera'
+}, {
+  key: '7',
+  label: 'Option seven',
+  iconLeft: 'coffee'
+}, {
+  key: '8',
+  label: 'Option eight',
+  iconLeft: 'user'
+}, {
+  key: '9',
+  label: 'Option nine',
+  iconLeft: 'face-party'
+}];
+const _WithSimpleOptions = args => /*#__PURE__*/React.createElement("div", {
+  className: _DropdownStoriesModule.default.dropdownWrapper
+}, /*#__PURE__*/React.createElement("div", {
+  className: _DropdownStoriesModule.default.content
+}, /*#__PURE__*/React.createElement(_SimpleDropdown.SimpleDropdown, args)));
+exports._WithSimpleOptions = _WithSimpleOptions;
+_WithSimpleOptions.args = {
+  label: 'Form Label',
+  options
+};
+const _WithSimpleOptionsTooltip = args => /*#__PURE__*/React.createElement("div", {
+  className: _DropdownStoriesModule.default.dropdownWrapper
+}, /*#__PURE__*/React.createElement("div", {
+  className: _DropdownStoriesModule.default.content
+}, /*#__PURE__*/React.createElement(_SimpleDropdown.SimpleDropdown, args)));
+exports._WithSimpleOptionsTooltip = _WithSimpleOptionsTooltip;
+_WithSimpleOptionsTooltip.args = {
+  label: 'Form Label',
+  options,
+  showLabelTooltip: {
+    maxLines: 6
+  }
+};
+const _WithSearch = args => /*#__PURE__*/React.createElement("div", {
+  className: _DropdownStoriesModule.default.dropdownWrapper
+}, /*#__PURE__*/React.createElement("div", {
+  className: _DropdownStoriesModule.default.content
+}, /*#__PURE__*/React.createElement(_SimpleDropdown.SimpleDropdown, args)));
+exports._WithSearch = _WithSearch;
+_WithSearch.args = {
+  label: 'Form Label',
+  options,
+  allowSearch: true
+};
+const _WithCheckboxOptions = args => {
+  const ref = React.useRef(null);
+  const handleChange = () => {
+    // Get your current instance of selected keys from ref
+    // const selectedKeys = ref.current?.selectedKeys;
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: _DropdownStoriesModule.default.dropdownWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _DropdownStoriesModule.default.content
+  }, /*#__PURE__*/React.createElement(_SimpleDropdown.SimpleDropdown, _extends({}, args, {
+    onChange: handleChange,
+    ref: ref
+  }))));
+};
+exports._WithCheckboxOptions = _WithCheckboxOptions;
+_WithCheckboxOptions.args = {
+  label: 'Form Label',
+  options,
+  optionsVariant: 'checkbox',
+  selectedKeys: ['4']
+};
+const _WithRadioOptions = args => /*#__PURE__*/React.createElement("div", {
+  className: _DropdownStoriesModule.default.dropdownWrapper
+}, /*#__PURE__*/React.createElement("div", {
+  className: _DropdownStoriesModule.default.content
+}, /*#__PURE__*/React.createElement(_SimpleDropdown.SimpleDropdown, args)));
+exports._WithRadioOptions = _WithRadioOptions;
+_WithRadioOptions.args = {
+  label: 'Form Label',
+  options,
+  optionsVariant: 'radio',
+  selectedKeys: ['2']
+};
+const _WithHeaderAndFooter = args => {
+  const clickAwayRef = React.useRef(null);
+  const onSave = () => {
+    if (clickAwayRef.current) {
+      // @ts-ignore - TS2339 - Property 'forceClose' does not exist on type 'never'.
+      clickAwayRef.current.forceClose();
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: _DropdownStoriesModule.default.dropdownWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _DropdownStoriesModule.default.content
+  }, /*#__PURE__*/React.createElement(_SimpleDropdown.SimpleDropdown, _extends({}, args, {
+    clickAwayRef: clickAwayRef,
+    header: /*#__PURE__*/React.createElement(_Menu.MenuHeader, null),
+    footer: /*#__PURE__*/React.createElement(_Menu.MenuFooter, {
+      onSave: onSave
+    })
+  }))));
+};
+exports._WithHeaderAndFooter = _WithHeaderAndFooter;
+_WithHeaderAndFooter.args = {
+  label: 'Form Label',
+  options,
+  optionsVariant: 'checkbox',
+  selectedKeys: ['4']
+};