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

package/lib/components/Input/Input.stories.js

@@ -0,0 +1,608 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._WithHelperText = exports._Required = exports._Password = exports._IconRight = exports._IconLeft = exports._Error = exports._Email = exports._DualIcon = exports._Default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Input = require("./Input");
+var _InputStoriesModule = _interopRequireDefault(require("./Input.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/Input',
+  component: _Input.Input,
+  argTypes: {
+    type: {
+      options: ['text', 'number', 'password', 'email', 'tel', 'url', 'search'],
+      description: 'Type of Input. Supported types are listed on the dropdown',
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: 'enum'
+        },
+        defaultValue: {
+          summary: 'text'
+        }
+      }
+    },
+    size: {
+      options: ['small', 'medium'],
+      description: 'Input supports only two size variants namely small and medium. `small` < `medium`',
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: 'enum'
+        },
+        defaultValue: {
+          summary: 'medium'
+        }
+      }
+    },
+    iconLeftName: {
+      description: 'Left icon to be applied to the button, it internally uses the `Icon` component to render icons',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    iconLeftType: {
+      description: 'Type of Left Icon. Type represents 4 unique icon styles :- Solid, Regular, Duotone and Brands',
+      options: ['regular', 'solid', 'duotone', 'brands'],
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: {
+          summary: 'regular'
+        }
+      }
+    },
+    iconRightName: {
+      description: 'Right icon to be applied to the button, it internally uses the `Icon` component to render icons',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    iconRightType: {
+      description: 'Type of Right Icon. Type represents 4 unique icon styles :- Solid, Regular, Duotone and Brands',
+      options: ['regular', 'solid', 'duotone', 'brands'],
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: {
+          summary: 'regular'
+        }
+      }
+    },
+    value: {
+      description: 'Value of the input',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    name: {
+      description: 'Name of the input',
+      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'
+        }
+      }
+    },
+    required: {
+      description: 'if **true**, a red star would be added to the label',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: 'false'
+        }
+      }
+    },
+    disallowExponents: {
+      description: 'if **true**, prevents users from typing exponent characters (`e`, `E`) in the input field',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: 'false'
+        }
+      }
+    },
+    placeholder: {
+      description: 'Placeholder of input. 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 input',
+      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 input. This appears on top of input',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    helperText: {
+      description: 'Secondary label of the input. This appears on bottom of input, 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'
+        }
+      }
+    },
+    classNames: {
+      description: 'External classnames to be applied',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: '{wrapper?: string, box?: string, iconLeft?: string, iconRight?: string}'
+        }
+      }
+    },
+    readOnly: {
+      description: 'if **true**, component would move to readonly state',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    hideNumberSpinner: {
+      description: 'if **true**, component would not show spinner for number input',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    hidePasswordToggleIcon: {
+      description: 'if **true**, component would not show password toggle icon for password input',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    minLength: {
+      description: 'Minimum length (number of characters) of `value`',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    maxLength: {
+      description: 'Maximum length (number of characters) of `value`',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    pattern: {
+      description: 'Pattern the `value` must match to be valid',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    min: {
+      description: 'Minimum `value`',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    max: {
+      description: 'Maximum `value`',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    step: {
+      description: 'Incremental `values` that are valid',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    onChange: {
+      description: '**onChange** handler is triggered when there is a change in input value',
+      action: 'changed',
+      table: {
+        type: {
+          summary: 'onChange?: ( evt: SyntheticInputEvent<HTMLInputElement>, isEnter?: boolean, ) => mixed'
+        }
+      }
+    },
+    onFocus: {
+      description: '**onFocus** handler is triggered when input is focussed',
+      action: 'focussed',
+      table: {
+        type: {
+          summary: '(e: SyntheticInputEvent<HTMLInputElement>) => mixed'
+        }
+      }
+    },
+    onBlur: {
+      description: '**onBlur** handler is triggered when input is blurred',
+      action: 'blurred',
+      table: {
+        type: {
+          summary: '(e: SyntheticInputEvent<HTMLInputElement>) => mixed'
+        }
+      }
+    },
+    onKeyDown: {
+      description: '**onKeyDown** handler is triggered on keypress',
+      action: 'onKeyDowned',
+      table: {
+        type: {
+          summary: '(e: SyntheticInputEvent<HTMLInputElement>) => mixed'
+        }
+      }
+    },
+    onIconRightClick: {
+      description: '**onIconRightClick** handler is triggered on click of the right icon',
+      action: 'onIconRightClicked',
+      table: {
+        type: {
+          summary: '(SyntheticEvent<HTMLElement>) => mixed'
+        }
+      }
+    },
+    onPaste: {
+      description: '**onPaste** handler is triggered when text is pasted from the clipboard',
+      action: 'pasted',
+      table: {
+        type: {
+          summary: '(e: ClipboardEvent) => mixed'
+        }
+      }
+    },
+    autoComplete: {
+      description: 'allows the browser to do a pattern match against a list of values locally stored with the browser',
+      action: 'autoComplete',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates a Input component',
+      description: {
+        component: `
+\`\`\`js
+import { Input } from "@spaced-out/ui-design-system/lib/components/Input";
+\`\`\`
+Basic input component which supports error, disabled and locked states. All values from the input component are sent as \`string\`<br>
+Input alo supports a bunch of **callbacks** listed below. There are multiple variants of input that render with defined set of actions
+like **password** input has a built in functionality to show and hide passwords. **Email** input would have an email icon set at the right.
+Input also supports \`helperText\` param to pass in the secondary label.
+        `
+      }
+    },
+    storySource: {
+      componentPath: '/src/components/Input'
+    }
+  }
+};
+const _Default = args => {
+  const [value, setValue] = React.useState(args.value);
+  React.useEffect(() => {
+    setValue(args.value);
+  }, [args.value]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _InputStoriesModule.default.inputContainer
+  }, /*#__PURE__*/React.createElement(_Input.Input, _extends({}, args, {
+    onChange: e => setValue(e.target.value),
+    value: value
+  })));
+};
+exports._Default = _Default;
+_Default.args = {
+  type: 'text',
+  label: 'Form Label',
+  placeholder: 'Input Some text here',
+  size: 'medium'
+};
+const _WithHelperText = args => {
+  const [value, setValue] = React.useState(args.value);
+  React.useEffect(() => {
+    setValue(args.value);
+  }, [args.value]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _InputStoriesModule.default.inputContainer
+  }, /*#__PURE__*/React.createElement(_Input.Input, _extends({}, args, {
+    onChange: e => setValue(e.target.value),
+    value: value
+  })));
+};
+exports._WithHelperText = _WithHelperText;
+_WithHelperText.args = {
+  type: 'text',
+  label: 'Form Label',
+  placeholder: 'Input Some text here',
+  helperText: 'Gain some help from here',
+  size: 'medium'
+};
+const _Required = args => {
+  const [value, setValue] = React.useState(args.value);
+  React.useEffect(() => {
+    setValue(args.value);
+  }, [args.value]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _InputStoriesModule.default.inputContainer
+  }, /*#__PURE__*/React.createElement(_Input.Input, _extends({}, args, {
+    onChange: e => setValue(e.target.value),
+    value: value
+  })));
+};
+exports._Required = _Required;
+_Required.args = {
+  type: 'text',
+  label: 'Form Label',
+  placeholder: 'Input Some text here',
+  required: true,
+  size: 'medium'
+};
+const _Email = args => {
+  const [value, setValue] = React.useState(args.value);
+  React.useEffect(() => {
+    setValue(args.value);
+  }, [args.value]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _InputStoriesModule.default.inputContainer
+  }, /*#__PURE__*/React.createElement(_Input.Input, _extends({}, args, {
+    onChange: e => setValue(e.target.value),
+    value: value
+  })));
+};
+exports._Email = _Email;
+_Email.args = {
+  type: 'email',
+  label: 'Email',
+  placeholder: 'Input Email here',
+  size: 'medium'
+};
+const _Password = args => {
+  const [value, setValue] = React.useState(args.value);
+  React.useEffect(() => {
+    setValue(args.value);
+  }, [args.value]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _InputStoriesModule.default.inputContainer
+  }, /*#__PURE__*/React.createElement(_Input.Input, _extends({}, args, {
+    onChange: e => setValue(e.target.value),
+    value: value
+  })));
+};
+exports._Password = _Password;
+_Password.args = {
+  type: 'password',
+  label: 'Password',
+  placeholder: 'Input Password here',
+  size: 'medium'
+};
+const _IconLeft = args => {
+  const [value, setValue] = React.useState(args.value);
+  React.useEffect(() => {
+    setValue(args.value);
+  }, [args.value]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _InputStoriesModule.default.inputContainer
+  }, /*#__PURE__*/React.createElement(_Input.Input, _extends({}, args, {
+    onChange: e => setValue(e.target.value),
+    value: value
+  })));
+};
+exports._IconLeft = _IconLeft;
+_IconLeft.args = {
+  type: 'text',
+  label: 'Form Label',
+  placeholder: 'Input Some text here',
+  iconLeftName: 'face-party'
+};
+const _IconRight = args => {
+  const [value, setValue] = React.useState(args.value);
+  React.useEffect(() => {
+    setValue(args.value);
+  }, [args.value]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _InputStoriesModule.default.inputContainer
+  }, /*#__PURE__*/React.createElement(_Input.Input, _extends({}, args, {
+    onChange: e => setValue(e.target.value),
+    value: value
+  })));
+};
+exports._IconRight = _IconRight;
+_IconRight.args = {
+  type: 'text',
+  label: 'Form Label',
+  placeholder: 'Input Some text here',
+  iconRightName: 'face-party'
+};
+const _DualIcon = args => {
+  const [value, setValue] = React.useState(args.value);
+  React.useEffect(() => {
+    setValue(args.value);
+  }, [args.value]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _InputStoriesModule.default.inputContainer
+  }, /*#__PURE__*/React.createElement(_Input.Input, _extends({}, args, {
+    onChange: e => setValue(e.target.value),
+    value: value
+  })));
+};
+exports._DualIcon = _DualIcon;
+_DualIcon.args = {
+  type: 'text',
+  label: 'Form Label',
+  placeholder: 'Input Some text here',
+  iconRightName: 'flag',
+  iconLeftName: 'face-party'
+};
+const _Error = args => {
+  const [value, setValue] = React.useState(args.value);
+  React.useEffect(() => {
+    setValue(args.value);
+  }, [args.value]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _InputStoriesModule.default.inputContainer
+  }, /*#__PURE__*/React.createElement(_Input.Input, _extends({}, args, {
+    onChange: e => setValue(e.target.value),
+    value: value
+  })));
+};
+exports._Error = _Error;
+_Error.args = {
+  type: 'password',
+  label: 'Password',
+  placeholder: 'Input Password here',
+  size: 'medium',
+  error: true,
+  errorText: 'Incorrect password'
+};