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

package/lib/components/Toggle/Toggle.stories.js

@@ -0,0 +1,207 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Toggle = exports._CustomToggle = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Avatar = require("../Avatar");
+var _Text = require("../Text");
+var _Truncate = require("../Truncate");
+var _Toggle2 = require("./Toggle");
+var _ToggleStoriesModule = _interopRequireDefault(require("./Toggle.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/Toggle',
+  component: _Toggle2.Toggle,
+  argTypes: {
+    name: {
+      description: 'Specify the name of the underlying `input` node'
+    },
+    value: {
+      description: 'The value to be used in the input type checkbox internally. This is the value that will be returned on form submission',
+      name: 'value',
+      table: {
+        type: {
+          summary: 'string'
+        }
+      },
+      control: {
+        disable: true
+      }
+    },
+    // controlled checked prop
+    checked: {
+      table: {
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    disabled: {
+      description: 'if **true**, the component is disabled',
+      options: [false, true],
+      control: 'boolean',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: false
+        }
+      }
+    },
+    focused: {
+      description: 'if **true**, the component is focussed',
+      options: [false, true],
+      control: 'boolean',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: false
+        }
+      }
+    },
+    labelPosition: {
+      description: 'Position of the label',
+      options: ['left', 'right'],
+      control: 'radio',
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: {
+          summary: 'right'
+        }
+      }
+    },
+    classNames: {
+      description: 'External classNames to be applied',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: '{wrapper?: string, label?: string}'
+        }
+      }
+    },
+    children: {
+      description: 'The label of the Toggle',
+      table: {
+        type: {
+          summary: 'React.Component | string'
+        }
+      }
+    },
+    onChange: {
+      description: '**onChange** handler that is applied to the element',
+      action: 'selected',
+      type: {
+        summary: '({value: string, checked: boolean}) => mixed'
+      }
+    },
+    ariaLabel: {
+      description: 'Pass label as ariaLabel. It is mandatory parameter for accessibility in case children is not a simple string.',
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates a Toggle component',
+      description: {
+        component: `
+\`\`\`js
+import { Toggle } from "@spaced-out/ui-design-system/lib/components/Toggle";
+\`\`\`
+Toggle changes the state of a single setting on or off.
+        `
+      }
+    },
+    storySource: {
+      componentPath: '/src/components/Toggle/Toggle.jsx'
+    }
+  }
+};
+const _Toggle = args => {
+  const [selected, setSelected] = React.useState(args.checked);
+  // @ts-ignore - TS7031 - Binding element 'value' implicitly has an 'any' type. | TS7031 - Binding element 'checked' implicitly has an 'any' type.
+  const onChangeHandler = _ref => {
+    let {
+      value,
+      checked
+    } = _ref;
+    args.onChange && args.onChange({
+      value,
+      checked
+    });
+    setSelected(checked);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: _ToggleStoriesModule.default.storyContainer
+  }, /*#__PURE__*/React.createElement(_Toggle2.Toggle, _extends({}, args, {
+    onChange: onChangeHandler,
+    checked: selected
+  })));
+};
+exports._Toggle = _Toggle;
+_Toggle.args = {
+  name: 'sample-toggle',
+  disabled: false,
+  focused: false,
+  children: 'Toggle Label',
+  checked: false,
+  value: 'sample-value',
+  labelPosition: 'left'
+};
+const _CustomToggle = args => {
+  const [selected, setSelected] = React.useState(args.checked);
+  // @ts-ignore - TS7031 - Binding element 'value' implicitly has an 'any' type. | TS7031 - Binding element 'checked' implicitly has an 'any' type.
+  const onChangeHandler = _ref2 => {
+    let {
+      value,
+      checked
+    } = _ref2;
+    args.onChange && args.onChange({
+      value,
+      checked
+    });
+    setSelected(checked);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: _ToggleStoriesModule.default.storyContainer
+  }, /*#__PURE__*/React.createElement(_Toggle2.Toggle, _extends({}, args, {
+    onChange: onChangeHandler,
+    checked: selected,
+    classNames: {
+      label: _ToggleStoriesModule.default.toggleLabel
+    }
+  }), /*#__PURE__*/React.createElement(_Avatar.Avatar, {
+    iconType: "regular",
+    size: "small",
+    text: 'Toggle Label',
+    color: 'green'
+  }), /*#__PURE__*/React.createElement(_Text.ButtonTextMedium, {
+    color: "secondary"
+  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, 'Toggle Label'))));
+};
+exports._CustomToggle = _CustomToggle;
+_CustomToggle.args = {
+  name: 'sample-toggle',
+  disabled: false,
+  focused: false,
+  children: 'Toggle Label',
+  checked: false,
+  value: 'sample-value',
+  ariaLabel: 'Toggle Label',
+  labelPosition: 'left'
+};

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

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

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

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

package/lib/components/TokenListInput/TokenListInput.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import type { ClickAwayRefType } from '../../utils/click-away/click-away';
+import type { InputProps } from '../Input';
+import type { BaseMenuProps } from '../Menu';
+import { ElevationType } from '../Tooltip';
+import type { ResolveTokenValueProps } from './TokenValueChips';
+export declare const DEFAULT_LIMIT_VALUE = 100;
+type ClassNames = Readonly<{
+    wrapper?: string;
+    box?: string;
+    input?: string;
+}>;
+export type TokenListMenuOptionTypes<T> = {
+    options?: Array<T>;
+    groupTitleOptions?: Array<TokenGroupTitleOption<T>>;
+    resolveLabel?: (option: T) => string;
+};
+export type TokenGroupTitleOption<T> = {
+    groupTitle?: React.ReactNode;
+    options?: Array<T>;
+    showLineDivider?: boolean;
+};
+export type TokenListMenuProps<T> = ((BaseMenuProps) & (TokenListMenuOptionTypes<T>));
+export type Props<T> = {
+    classNames?: ClassNames;
+    clickAwayRef?: ClickAwayRefType;
+    disabled?: boolean;
+    error?: boolean;
+    errorText?: string;
+    focusOnMount?: boolean;
+    helperText?: string;
+    inputValue?: string;
+    inputPlaceholder?: string;
+    limit?: number;
+    isLoading?: boolean;
+    locked?: boolean;
+    onChange: (values: Array<T>) => unknown;
+    onInputBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => unknown;
+    onInputChange?: (value: string) => unknown;
+    onInputFocus?: (e: React.SyntheticEvent<HTMLInputElement>) => unknown;
+    placeholder?: string;
+    size?: 'medium' | 'small';
+    tabIndex?: number;
+    values: Array<T>;
+    menu?: TokenListMenuProps<T>;
+    onMenuOpen?: () => unknown;
+    onMenuClose?: () => unknown;
+    resolveTokenValue?: (arg1: ResolveTokenValueProps<T>) => React.ReactNode;
+    inputProps?: InputProps;
+    elevation?: ElevationType;
+};
+export declare function TokenListInput<T>(props: Props<T>): React.JSX.Element;
+export declare namespace TokenListInput {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=TokenListInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TokenListInput.d.ts","sourceRoot":"","sources":["../../../src/components/TokenListInput/TokenListInput.tsx"],"names":[],"mappings":"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"}

package/lib/components/TokenListInput/TokenListInput.js

@@ -68,12 +68,17 @@ function TokenListInput(props) {
     context
   } = (0, _react2.useFloating)({
     open: true,
+    // @ts-ignore - TS2322 - Type 'string' is not assignable to type 'Strategy | undefined'.
     strategy: _ButtonDropdown.STRATEGY_TYPE.absolute,
+    // @ts-ignore - TS2322 - Type 'string' is not assignable to type 'Placement | undefined'.
     placement: _ButtonDropdown.ANCHOR_POSITION_TYPE.bottomStart,
     whileElementsMounted: _react2.autoUpdate,
     middleware: [(0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]
   });
+
+  // @ts-ignore - TS2554 - Expected 1 arguments, but got 0.
   const inputRef = React.useRef();
+  // @ts-ignore - TS2345 - Argument of type '(ReferenceType & ReferenceType) | null' is not assignable to parameter of type 'HTMLElement | null | undefined'.
   const dropdownWidth = (0, _hooks.useReferenceElementWidth)(refs.reference?.current);
   const onOpenToggle = isOpen => {
     if (isOpen) {
@@ -90,11 +95,12 @@ function TokenListInput(props) {
     }
   }, [focusOnMount]);
   const addValue = value => {
+    // @ts-ignore - TS2339 - Property 'disabled' does not exist on type 'T'.
     if (locked || !value || value.disabled) {
       return; // Prevent adding values when disabled or locked
     }
     onInputChange?.('');
-    // $FlowFixMe[incompatible-use] - token has key property
+    // @ts-ignore - TS2339 - Property 'key' does not exist on type 'T'. | TS2339 - Property 'key' does not exist on type 'T'.
     const existingToken = values.find(token => token.key === value.key);
     if (!existingToken) {
       onChange([...values, value]);
@@ -121,14 +127,14 @@ function TokenListInput(props) {
         event.preventDefault();
         let firstOption = null;
         if (menu?.options && menu.options.length > 0) {
-          //$FlowFixMe
+          // @ts-ignore - TS2345 - Argument of type 'T[]' is not assignable to parameter of type 'V[]'.
           firstOption = (0, _tokenListInput.getFirstOption)(menu.options);
         } else if (menu?.groupTitleOptions && menu.groupTitleOptions.length > 0) {
-          //$FlowFixMe
+          // @ts-ignore - TS2345 - Argument of type 'TokenGroupTitleOption<T>[]' is not assignable to parameter of type 'Group<V>[]'.
           firstOption = (0, _tokenListInput.getFirstOptionFromGroup)(menu.groupTitleOptions);
         }
         if (firstOption) {
-          //$FlowFixMe
+          // @ts-ignore - TS2345 - Argument of type 'V' is not assignable to parameter of type 'T'.
           addValue(firstOption);
         }
       }
@@ -175,9 +181,11 @@ function TokenListInput(props) {
         if (!isOpen) {
           onOpen();
         }
+        // @ts-ignore - TS2345 - Argument of type 'FocusEvent<HTMLDivElement, Element>' is not assignable to parameter of type 'SyntheticEvent<HTMLInputElement, Event>'.
         onInputFocus?.(e);
       },
       onBlur: e => {
+        // @ts-ignore - TS2345 - Argument of type 'FocusEvent<HTMLDivElement, Element>' is not assignable to parameter of type 'SyntheticEvent<HTMLInputElement, Event>'.
         onInputBlur?.(e);
       },
       className: (0, _classify.default)(_TokenListInputModule.default.box, {
@@ -186,7 +194,9 @@ function TokenListInput(props) {
         [_TokenListInputModule.default.small]: size === 'small',
         [_TokenListInputModule.default.withError]: error,
         [_TokenListInputModule.default.inputLocked]: locked
-      }, classNames?.box),
+      }, classNames?.box)
+      // @ts-ignore - TS2322 - Type '((node: ReferenceType | null) => void) & ((node: ReferenceType | null) => void)' is not assignable to type '{ current: HTMLElement | null | undefined; }'.
+      ,
       ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef])
     }, /*#__PURE__*/React.createElement(_TokenValueChips.TokenValueChips, {
       values: values,
@@ -194,7 +204,14 @@ function TokenListInput(props) {
       disabled: disabled,
       locked: locked,
       onDismiss: removeValue
-    }), !hideInput && /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
+    }), !hideInput && /*#__PURE__*/React.createElement("input", _extends({}, (() => {
+      const {
+        size: _,
+        ...restInputProps
+      } = inputProps || {};
+      return restInputProps;
+    })(), {
+      // @ts-ignore - TS2322 - Type 'RefObject<HTMLInputElement | null | undefined>' is not assignable to type 'Ref<HTMLInputElement> | undefined'.
       ref: inputRef,
       type: "text",
       readOnly: locked,
@@ -232,10 +249,14 @@ function TokenListInput(props) {
     }, helperText) : helperText), !locked && isOpen && menu && /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, {
       modal: false,
       context: context,
-      returnFocus: false,
+      returnFocus: false
+      // @ts-ignore - TS2322 - Type 'MutableRefObject<ReferenceType | null> & MutableRefObject<ReferenceType | null>' is not assignable to type 'number | MutableRefObject<HTMLElement | null> | undefined'.
+      ,
       initialFocus: refs.reference
     }, /*#__PURE__*/React.createElement("div", {
-      className: _TokenListInputModule.default.menuWrapper,
+      className: _TokenListInputModule.default.menuWrapper
+      // @ts-ignore - TS2322 - Type '((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void)' is not assignable to type '{ current: HTMLElement | null | undefined; }'.
+      ,
       ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
       style: {
         position: strategy,
@@ -256,8 +277,7 @@ function TokenListInput(props) {
         if (values.length >= limit) {
           return;
         }
-        // $FlowFixMe[incompatible-call] option from Menu is MenuOption but addValue expects T
-        // $FlowFixMe[prop-missing] MenuOption properties are missing in T
+        // @ts-ignore - TS2345 - Argument of type 'MenuOption' is not assignable to parameter of type 'T'.
         addValue(option);
         clickAway();
         inputRef.current?.focus();