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

package/lib/components/Checkbox/CheckboxGroup.stories.js

@@ -0,0 +1,399 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Indeterminate = exports._CustomCheckboxOptions = exports._CheckboxGroupVertical = exports._CheckboxGroupHorizontalFluid = exports._CheckboxGroupHorizontal = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = require("../../utils/classify");
+var _Avatar = require("../Avatar");
+var _Text = require("../Text");
+var _Truncate = require("../Truncate");
+var _ = require("./");
+var _CheckboxGroupStoriesModule = _interopRequireDefault(require("./CheckboxGroup.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/Checkbox Group',
+  component: [_.CheckboxGroup],
+  argTypes: {
+    align: {
+      description: 'Pass the alignment string. Make sure to wrap the checkbox in a container with fixed width to get the alignment effect',
+      options: ['vertical', 'horizontal-fixed', 'horizontal-fluid'],
+      table: {
+        defaultValue: {
+          summary: 'vertical'
+        }
+      },
+      control: 'select'
+    },
+    // controlled value prop
+    value: {
+      name: 'value',
+      description: 'Specify the value that is currently selected in the group',
+      table: {
+        type: {
+          summary: 'string[]'
+        }
+      },
+      control: {
+        disable: true
+      }
+    },
+    error: {
+      name: 'error',
+      description: `Error state on group level. Meaning that, if true all the child checkboxes will be shown in error state.
+      If you just want few of the checkboxes to be in error state then pass error prop as true to the individual checkboxes`,
+      options: [false, true],
+      control: 'boolean',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: false
+        }
+      }
+    },
+    errorText: {
+      description: 'Error message to show in the bottom of CheckboxGroup in case of error state',
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    classNames: {
+      description: 'Provide an optional className to be applied to the wrapper, checkboxGroup or errorText',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: '{wrapper?: string, checkboxGroup?: string, errorText?: string}'
+        }
+      }
+    },
+    name: {
+      description: 'Specify the name of the underlying `input` nodes',
+      type: {
+        required: true
+      }
+    },
+    disabled: {
+      name: 'disabled',
+      description: `All the child checkboxes will be Disabled`,
+      options: [false, true],
+      control: 'boolean',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: false
+        }
+      }
+    },
+    onChange: {
+      description: 'The callback function that is triggered when the state changes',
+      action: 'changed',
+      type: {
+        summary: '(string[]) => mixed'
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      subtitle: 'A CheckboxGroup allows users to select one or more items from a list of choices',
+      description: {
+        component: `
+\`\`\`js
+import { CheckboxGroup, Checkbox } from "@spaced-out/ui-design-system/lib/components/Checkbox";
+\`\`\`
+CheckboxGroup accepts multiple <a href="../?path=/docs/form-components-checkbox--docs">Checkbox</a> elements as children.
+Each Checkbox represents an option that can be selected, labeled by its children.
+
+CheckboxGroup supports selecting zero or more items.
+A controlled value can be provided using the value prop. Value prop accept an array of selected items, which map to the value prop on each item.
+CheckboxGroup accepts an onChange prop, which is triggered when a user adds or removes an item from the selection.
+        `
+      }
+    },
+    storySource: {
+      componentPath: '/src/components/Checkbox/CheckboxGroup.jsx'
+    }
+  }
+};
+const sampleOptions = [{
+  value: '1',
+  label: 'The Walt Disney Company'
+}, {
+  value: '2',
+  label: 'Nintendo',
+  imageSrc: 'https://cdn.sensehq.com/genesis/hashed/static/images/personas/1.png'
+}, {
+  value: '3',
+  label: 'Starbucks'
+}, {
+  value: '4',
+  label: 'General Electric'
+}, {
+  value: '5',
+  label: 'Zee Entertainment Enterprises'
+}, {
+  value: '6',
+  label: 'IBM'
+}, {
+  value: '7',
+  label: 'Bank of America'
+}, {
+  value: '8',
+  label: 'eBay'
+}];
+const checkboxOptions = sampleOptions.map(_ref => {
+  let {
+    label,
+    value
+  } = _ref;
+  return /*#__PURE__*/React.createElement(_.Checkbox, {
+    value: value,
+    key: value
+  }, label);
+});
+const _CheckboxGroupVertical = args => {
+  const [value, setValue] = React.useState(args.value);
+  // @ts-ignore - TS7019 - Rest parameter 'params' implicitly has an 'any[]' type.
+  const onChangeHandler = function () {
+    // @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
+    args.onChange && args.onChange(...arguments);
+    // @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
+    setValue(...arguments);
+  };
+  return /*#__PURE__*/React.createElement(_.CheckboxGroup, _extends({}, args, {
+    onChange: onChangeHandler,
+    value: value
+  }), checkboxOptions);
+};
+exports._CheckboxGroupVertical = _CheckboxGroupVertical;
+_CheckboxGroupVertical.args = {
+  error: false,
+  align: 'vertical',
+  name: 'Checkbox-group-1',
+  errorText: '*A selection must be made to continue'
+};
+const _CheckboxGroupHorizontal = args => {
+  const [value, setValue] = React.useState(args.value);
+  // @ts-ignore - TS7019 - Rest parameter 'params' implicitly has an 'any[]' type.
+  const onChangeHandler = function () {
+    // @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
+    args.onChange && args.onChange(...arguments);
+    // @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
+    setValue(...arguments);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: _CheckboxGroupStoriesModule.default.horizontalContainer
+  }, /*#__PURE__*/React.createElement(_.CheckboxGroup, _extends({}, args, {
+    onChange: onChangeHandler,
+    value: value
+  }), checkboxOptions));
+};
+exports._CheckboxGroupHorizontal = _CheckboxGroupHorizontal;
+_CheckboxGroupHorizontal.args = {
+  error: false,
+  align: 'horizontal-fixed',
+  name: 'Checkbox-group-2',
+  errorText: '*A selection must be made to continue'
+};
+const _CheckboxGroupHorizontalFluid = args => {
+  const [value, setValue] = React.useState(args.value);
+  // @ts-ignore - TS7019 - Rest parameter 'params' implicitly has an 'any[]' type.
+  const onChangeHandler = function () {
+    // @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
+    args.onChange && args.onChange(...arguments);
+    // @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
+    setValue(...arguments);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: _CheckboxGroupStoriesModule.default.horizontalFluidContainer
+  }, /*#__PURE__*/React.createElement(_.CheckboxGroup, _extends({}, args, {
+    onChange: onChangeHandler,
+    value: value
+  }), checkboxOptions));
+};
+exports._CheckboxGroupHorizontalFluid = _CheckboxGroupHorizontalFluid;
+_CheckboxGroupHorizontalFluid.args = {
+  error: false,
+  align: 'horizontal-fluid',
+  name: 'Checkbox-group-3',
+  errorText: '*A selection must be made to continue'
+};
+_CheckboxGroupHorizontal.args = {
+  error: false,
+  align: 'horizontal-fixed',
+  name: 'Checkbox-group-2',
+  errorText: '*A selection must be made to continue'
+};
+const _Indeterminate = args => {
+  const {
+    options,
+    name,
+    error,
+    errorText,
+    defaultCheckedList,
+    align
+  } = args;
+  const allValueList = options.map(option => option.value);
+  const [checkedList, setCheckedList] = React.useState([...defaultCheckedList]);
+  const [indeterminate, setIndeterminate] = React.useState(true);
+  const [checkAll, setCheckAll] = React.useState(false);
+  const onChangeHandler = list => {
+    setCheckedList(list);
+    setIndeterminate(!!list.length && list.length < options.length);
+    setCheckAll(list.length === options.length);
+    args.onChange && args.onChange([...list]);
+  };
+
+  // @ts-ignore - TS7031 - Binding element 'checked' implicitly has an 'any' type.
+  const onCheckAllChange = _ref2 => {
+    let {
+      checked
+    } = _ref2;
+    if (checked) {
+      setCheckedList(checked ? allValueList : []);
+      setCheckAll(checked);
+      args.onChange && args.onChange([...allValueList]);
+    } else {
+      setCheckedList([]);
+      args.onChange && args.onChange([]);
+      setCheckAll(false);
+    }
+    setIndeterminate(false);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: _CheckboxGroupStoriesModule.default.indeterminateContainer
+  }, /*#__PURE__*/React.createElement(_.Checkbox, {
+    indeterminate: indeterminate,
+    onChange: onCheckAllChange,
+    checked: checkAll,
+    name: 'parent',
+    error: error
+  }, "Parent"), /*#__PURE__*/React.createElement(_.CheckboxGroup, {
+    error: error,
+    name: name,
+    errorText: errorText,
+    onChange: onChangeHandler,
+    value: checkedList,
+    classNames: {
+      checkboxGroup: _CheckboxGroupStoriesModule.default.shiftChildren
+    },
+    align: align
+  }, options.map(_ref3 => {
+    let {
+      label,
+      value
+    } = _ref3;
+    return /*#__PURE__*/React.createElement(_.Checkbox, {
+      value: value,
+      key: name + value
+    }, label);
+  })));
+};
+exports._Indeterminate = _Indeterminate;
+_Indeterminate.args = {
+  error: false,
+  name: 'Checkbox-group-4',
+  errorText: '*A selection must be made to continue',
+  options: [{
+    label: 'Child 1',
+    value: 'child_1'
+  }, {
+    label: 'Child 2',
+    value: 'child_2'
+  }, {
+    label: 'Child 3',
+    value: 'child_3'
+  }],
+  defaultCheckedList: ['child_2', 'child_3'],
+  align: 'vertical'
+};
+function getRandomProperty(obj) {
+  const keys = Object.keys(obj);
+  return keys[Math.floor(Math.random() * keys.length)];
+}
+
+// @ts-ignore - TS7031 - Binding element 'label' implicitly has an 'any' type. | TS7031 - Binding element 'value' implicitly has an 'any' type. | TS7031 - Binding element 'checked' implicitly has an 'any' type. | TS7031 - Binding element 'imageSrc' implicitly has an 'any' type. | TS7031 - Binding element 'onChange' implicitly has an 'any' type.
+const CustomCheckboxOption = _ref4 => {
+  let {
+    label,
+    value,
+    checked,
+    imageSrc,
+    onChange
+  } = _ref4;
+  const [randomColor] = React.useState(getRandomProperty(_Avatar.AVATAR_COLOR));
+  return /*#__PURE__*/React.createElement(_.Checkbox, {
+    value: value,
+    key: value,
+    classNames: {
+      wrapper: (0, _classify.classify)(_CheckboxGroupStoriesModule.default.memberOption, {
+        [_CheckboxGroupStoriesModule.default.selected]: checked
+      })
+    },
+    checked: checked,
+    onChange: onChange
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _CheckboxGroupStoriesModule.default.labelContainer
+  }, /*#__PURE__*/React.createElement(_Avatar.Avatar, {
+    iconType: "regular",
+    imageSrc: imageSrc,
+    size: "small",
+    text: label
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
+    color: randomColor
+  }), /*#__PURE__*/React.createElement(_Text.ButtonTextMedium, {
+    color: "secondary"
+  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, label))));
+};
+const _CustomCheckboxOptions = args => {
+  const [value, setValue] = React.useState(args.value);
+  // @ts-ignore - TS7019 - Rest parameter 'params' implicitly has an 'any[]' type.
+  const onChangeHandler = function () {
+    // @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
+    args.onChange && args.onChange(...arguments);
+    // @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
+    setValue(...arguments);
+  };
+  return /*#__PURE__*/React.createElement(_.CheckboxGroup, _extends({}, args, {
+    onChange: onChangeHandler,
+    value: value,
+    classNames: {
+      wrapper: _CheckboxGroupStoriesModule.default.customCheckboxWrap
+    }
+  }), sampleOptions.map(_ref5 => {
+    let {
+      label,
+      value,
+      imageSrc
+    } = _ref5;
+    return (
+      /*#__PURE__*/
+      // @ts-ignore - TS2739 - Type '{ value: string; key: string; label: string; imageSrc: string | undefined; }' is missing the following properties from type '{ label: any; value: any; checked: any; imageSrc: any; onChange: any; }': checked, onChange
+      React.createElement(CustomCheckboxOption, {
+        value: value,
+        key: value,
+        label: label,
+        imageSrc: imageSrc
+      })
+    );
+  }));
+};
+exports._CustomCheckboxOptions = _CustomCheckboxOptions;
+_CheckboxGroupVertical.args = {
+  error: false,
+  align: 'vertical',
+  name: 'Checkbox-group-1',
+  errorText: '*A selection must be made to continue'
+};

package/lib/components/Checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Checkbox';
+export * from './CheckboxGroup';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC"}

package/lib/components/Chip/Chip.d.ts

@@ -0,0 +1,47 @@
+import { Flow } from 'flow-to-typescript-codemod';
+import * as React from 'react';
+import type { IconType } from '../Icon';
+type ClassNames = Readonly<{
+    wrapper?: string;
+    icon?: string;
+    statusIndicator?: string;
+}>;
+export declare const CHIP_SEMANTIC: Readonly<{
+    primary: "primary";
+    information: "information";
+    success: "success";
+    warning: "warning";
+    danger: "danger";
+    secondary: "secondary";
+}>;
+export type ChipSemanticType = typeof CHIP_SEMANTIC[keyof typeof CHIP_SEMANTIC];
+export type BaseChipProps = {
+    classNames?: ClassNames;
+    semantic?: ChipSemanticType;
+    children: React.ReactNode;
+    disabled?: boolean;
+    showStatusIndicator?: boolean;
+    disableHoverState?: boolean;
+    line?: number;
+    wordBreak?: string;
+    onClick?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
+    onMouseEnter?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
+    onMouseLeave?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
+};
+export type LargeChipProps = ((BaseChipProps) & {
+    iconName?: string;
+    iconType?: IconType;
+    dismissable?: boolean;
+    onDismiss?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
+    size?: 'large';
+});
+export type MediumChipProps = ((LargeChipProps) & {
+    size?: 'medium';
+});
+export type SmallChipProps = ((BaseChipProps) & {
+    size?: 'small';
+});
+export type ChipProps = LargeChipProps | MediumChipProps | SmallChipProps;
+export declare const Chip: Flow.AbstractComponent<ChipProps, HTMLDivElement>;
+export {};
+//# sourceMappingURL=Chip.d.ts.map

package/lib/components/Chip/Chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAEhD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAQtC,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;EAOxB,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,OAAO,aAAa,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC;AAEhF,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACpF,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACzF,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;CAC1F,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,CAAC,CAAC,aAAa,CAAC,GAAG;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACtF,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,CAAC,CAAC,cAAc,CAAC,GAAG;IAChD,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,CAAC,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,CAAC,CAAC,aAAa,CAAC,GAAG;IAC9C,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC,CAAC;AAEH,MAAM,MAAM,SAAS,GAAG,cAAc,GAAG,eAAe,GAAG,cAAc,CAAC;AAE1E,eAAO,MAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAAC,SAAS,EAAE,cAAc,CA2I/D,CAAC"}

package/lib/components/Chip/Chip.js

@@ -25,19 +25,24 @@ const Chip = exports.Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     classNames,
     semantic = 'primary',
+    // @ts-ignore - TS2322 - Type '"medium"' is not assignable to type '"small" | "large"'.
     size = 'medium',
     children,
+    // @ts-ignore - TS2339 - Property 'iconName' does not exist on type 'ChipProps'.
     iconName = '',
+    // @ts-ignore - TS2339 - Property 'iconType' does not exist on type 'ChipProps'.
     iconType = 'regular',
     showStatusIndicator,
+    // @ts-ignore - TS2339 - Property 'dismissable' does not exist on type 'ChipProps'.
     dismissable = false,
+    // @ts-ignore - TS2339 - Property 'onDismiss' does not exist on type 'ChipProps'.
     onDismiss = () => null,
     onClick,
     disabled,
     line = 1,
     wordBreak,
-    disableHoverState = !onClick,
     // There is no reason for hover state to be active when there is no click handler attached
+    disableHoverState = !onClick,
     ...restProps
   } = _ref;
   /**
@@ -77,13 +82,16 @@ const Chip = exports.Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       [_ChipModule.default.danger]: semantic === CHIP_SEMANTIC.danger,
       [_ChipModule.default.secondary]: semantic === CHIP_SEMANTIC.secondary,
       [_ChipModule.default.large]: size === 'large',
+      // @ts-ignore - TS2367 - This condition will always return 'false' since the types '"small" | "large"' and '"medium"' have no overlap.
       [_ChipModule.default.medium]: size === 'medium',
       [_ChipModule.default.small]: size === 'small',
       [_ChipModule.default.dismissable]: dismissable,
       [_ChipModule.default.withIcon]: !!iconName && size !== 'small',
       [_ChipModule.default.disabled]: disabled,
       [_ChipModule.default.noHoverState]: showStatusIndicator || disableHoverState || disabled
-    }, classNames?.wrapper),
+    }, classNames?.wrapper)
+    // @ts-ignore - TS2322 - Type '((arg1: SyntheticEvent<HTMLElement, Event>) => unknown) | null | undefined' is not assignable to type 'MouseEventHandler<HTMLDivElement> | undefined'.
+    ,
     onClick: onClick,
     onKeyDown: handleKeyDown,
     tabIndex: showStatusIndicator || disableHoverState || disabled ? undefined : 0,