@storybook/components 6.5.0-alpha.34 → 6.5.0-alpha.39

package/dist/modern/controls/Range.stories.js

@@ -1,44 +0,0 @@
-import React, { useState } from 'react';
-import { RangeControl } from './Range';
-export default {
-  title: 'Controls/Range',
-  component: RangeControl
-};
-
-const Template = ({
-  initialValue,
-  step,
-  max
-}) => {
-  const [value, setValue] = useState(initialValue);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RangeControl, {
-    name: "range",
-    value: value,
-    onChange: newVal => setValue(newVal),
-    min: 0,
-    max: max,
-    step: step
-  }), /*#__PURE__*/React.createElement("pre", null, JSON.stringify(value) || 'undefined'));
-};
-
-export const Basic = () => Template({
-  initialValue: 10,
-  max: 20,
-  step: 2
-});
-export const Zero = () => Template({
-  initialValue: 0,
-  max: 20,
-  step: 2
-});
-export const Decimals = () => Template({
-  step: 0.000000000002,
-  initialValue: 1989.123123123123,
-  max: 2000
-});
-export const BigMaxValue = () => Template({
-  step: 1000,
-  initialValue: 15,
-  max: 10000000000
-});
-export const Undefined = () => Template({});

package/dist/modern/controls/Text.js

@@ -1,46 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { styled } from '@storybook/theming';
-import { Form } from '../form';
-import { getControlId, getControlSetterButtonId } from './helpers';
-const Wrapper = styled.label({
-  display: 'flex'
-});
-export const TextControl = ({
-  name,
-  value,
-  onChange,
-  onFocus,
-  onBlur
-}) => {
-  const handleChange = event => {
-    onChange(event.target.value);
-  };
-
-  const [forceVisible, setForceVisible] = useState(false);
-  const onForceVisible = useCallback(() => {
-    onChange('');
-    setForceVisible(true);
-  }, [setForceVisible]);
-
-  if (value === undefined) {
-    return /*#__PURE__*/React.createElement(Form.Button, {
-      id: getControlSetterButtonId(name),
-      onClick: onForceVisible
-    }, "Set string");
-  }
-
-  const isValid = typeof value === 'string';
-  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Form.Textarea, {
-    id: getControlId(name),
-    onChange: handleChange,
-    size: "flex",
-    placeholder: "Edit string...",
-    autoFocus: forceVisible,
-    valid: isValid ? null : 'error',
-    name,
-    value: isValid ? value : '',
-    onFocus,
-    onBlur
-  }));
-};
-TextControl.displayName = "TextControl";

package/dist/modern/controls/Text.stories.js

@@ -1,19 +0,0 @@
-import React, { useState } from 'react';
-import { TextControl } from './Text';
-export default {
-  title: 'Controls/Text',
-  component: TextControl
-};
-
-const Template = initialValue => {
-  const [value, setValue] = useState(initialValue);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextControl, {
-    name: "Text",
-    value: value,
-    onChange: newVal => setValue(newVal)
-  }), /*#__PURE__*/React.createElement("pre", null, JSON.stringify(value) || 'undefined'));
-};
-
-export const Basic = () => Template('Hello text');
-export const Empty = () => Template('');
-export const Undefined = () => Template(undefined);

package/dist/modern/controls/helpers.js

@@ -1,15 +0,0 @@
-/**
- * Adds `control` prefix to make ID attribute more specific.
- * Removes spaces because spaces are not allowed in ID attributes
- * @link http://xahlee.info/js/html_allowed_chars_in_attribute.html
- * @example getControlId('my prop name') -> 'control-my-prop-name'
- */
-export const getControlId = value => `control-${value.replace(/\s+/g, '-')}`;
-/**
- * Adds `set` prefix to make ID attribute more specific.
- * Removes spaces because spaces are not allowed in ID attributes
- * @link http://xahlee.info/js/html_allowed_chars_in_attribute.html
- * @example getControlSetterButtonId('my prop name') -> 'set-my-prop-name'
- */
-
-export const getControlSetterButtonId = value => `set-${value.replace(/\s+/g, '-')}`;

package/dist/modern/controls/index.js

@@ -1,15 +0,0 @@
-import React, { lazy, Suspense } from 'react';
-export * from './types';
-export * from './Boolean';
-const LazyColorControl = /*#__PURE__*/lazy(() => import('./Color'));
-export const ColorControl = props => /*#__PURE__*/React.createElement(Suspense, {
-  fallback: /*#__PURE__*/React.createElement("div", null)
-}, /*#__PURE__*/React.createElement(LazyColorControl, props));
-ColorControl.displayName = "ColorControl";
-export * from './Date';
-export * from './Number';
-export * from './options';
-export * from './Object';
-export * from './Range';
-export * from './Text';
-export * from './Files';

package/dist/modern/controls/options/Checkbox.js

@@ -1,81 +0,0 @@
-import React, { useState } from 'react';
-import { styled } from '@storybook/theming';
-import { logger } from '@storybook/client-logger';
-import { selectedKeys, selectedValues } from './helpers';
-import { getControlId } from '../helpers';
-const Wrapper = styled.div(({
-  isInline
-}) => isInline ? {
-  display: 'flex',
-  flexWrap: 'wrap',
-  alignItems: 'flex-start',
-  label: {
-    display: 'inline-flex',
-    marginRight: 15
-  }
-} : {
-  label: {
-    display: 'flex'
-  }
-});
-const Text = styled.span({});
-const Label = styled.label({
-  lineHeight: '20px',
-  alignItems: 'center',
-  marginBottom: 8,
-  '&:last-child': {
-    marginBottom: 0
-  },
-  input: {
-    margin: 0,
-    marginRight: 6
-  }
-});
-export const CheckboxControl = ({
-  name,
-  options,
-  value,
-  onChange,
-  isInline
-}) => {
-  if (!options) {
-    logger.warn(`Checkbox with no options: ${name}`);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, "-");
-  }
-
-  const initial = selectedKeys(value, options);
-  const [selected, setSelected] = useState(initial);
-
-  const handleChange = e => {
-    const option = e.target.value;
-    const updated = [...selected];
-
-    if (updated !== null && updated !== void 0 && updated.includes(option)) {
-      updated.splice(updated.indexOf(option), 1);
-    } else {
-      updated.push(option);
-    }
-
-    onChange(selectedValues(updated, options));
-    setSelected(updated);
-  };
-
-  const controlId = getControlId(name);
-  return /*#__PURE__*/React.createElement(Wrapper, {
-    isInline: isInline
-  }, Object.keys(options).map((key, index) => {
-    const id = `${controlId}-${index}`;
-    return /*#__PURE__*/React.createElement(Label, {
-      key: id,
-      htmlFor: id
-    }, /*#__PURE__*/React.createElement("input", {
-      type: "checkbox",
-      id: id,
-      name: id,
-      value: key,
-      onChange: handleChange,
-      checked: selected === null || selected === void 0 ? void 0 : selected.includes(key)
-    }), /*#__PURE__*/React.createElement(Text, null, key));
-  }));
-};
-CheckboxControl.displayName = "CheckboxControl";

package/dist/modern/controls/options/Options.js

@@ -1,67 +0,0 @@
-import "core-js/modules/es.array.reduce.js";
-import React from 'react';
-import dedent from 'ts-dedent';
-import { once } from '@storybook/client-logger';
-import { CheckboxControl } from './Checkbox';
-import { RadioControl } from './Radio';
-import { SelectControl } from './Select';
-
-/**
- * Options can accept `options` in two formats:
- * - array: ['a', 'b', 'c'] OR
- * - object: { a: 1, b: 2, c: 3 } (deprecated)
- *
- * We always normalize to the more generalized object format and ONLY handle
- * the object format in the underlying control implementations.
- *
- * While non-primitive values are deprecated, they might still not be valid
- * object keys, so the resulting object is a Label -> Value mapping.
- */
-const normalizeOptions = (options, labels) => {
-  if (Array.isArray(options)) {
-    return options.reduce((acc, item) => {
-      acc[(labels === null || labels === void 0 ? void 0 : labels[item]) || String(item)] = item;
-      return acc;
-    }, {});
-  }
-
-  return options;
-};
-
-const Controls = {
-  check: CheckboxControl,
-  'inline-check': CheckboxControl,
-  radio: RadioControl,
-  'inline-radio': RadioControl,
-  select: SelectControl,
-  'multi-select': SelectControl
-};
-export const OptionsControl = props => {
-  const {
-    type = 'select',
-    options,
-    labels,
-    argType
-  } = props;
-  const normalized = Object.assign({}, props, {
-    options: normalizeOptions(options || argType.options, labels),
-    isInline: type.includes('inline'),
-    isMulti: type.includes('multi')
-  });
-
-  if (options) {
-    once.warn(dedent`
-      'control.options' is deprecated and will be removed in Storybook 7.0. Define 'options' directly on the argType instead, and use 'control.labels' for custom labels.
-
-      More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-controloptions
-    `);
-  }
-
-  const Control = Controls[type];
-
-  if (Control) {
-    return /*#__PURE__*/React.createElement(Control, normalized);
-  }
-
-  throw new Error(`Unknown options type: ${type}`);
-};

package/dist/modern/controls/options/Options.stories.js

@@ -1,55 +0,0 @@
-import React, { useState } from 'react';
-import { OptionsControl } from './Options';
-export default {
-  title: 'Controls/Options',
-  component: OptionsControl
-};
-const arrayOptions = ['Bat', 'Cat', 'Rat'];
-const objectOptions = {
-  A: {
-    id: 'Aardvark'
-  },
-  B: {
-    id: 'Bat'
-  },
-  C: {
-    id: 'Cat'
-  }
-};
-
-const rawOptionsHelper = (options, type, isMulti, initial) => {
-  const [value, setValue] = useState(isMulti ? [initial] : initial);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OptionsControl, {
-    name: "options",
-    options: options,
-    value: value,
-    type: type,
-    onChange: newVal => setValue(newVal)
-  }), /*#__PURE__*/React.createElement("pre", null, JSON.stringify(value) || 'undefined'));
-};
-
-const optionsHelper = (options, type, isMulti) => rawOptionsHelper(options, type, isMulti, Array.isArray(options) ? options[1] : options.B); // Check
-
-
-export const ArrayCheck = () => optionsHelper(arrayOptions, 'check', true);
-export const ArrayInlineCheck = () => optionsHelper(arrayOptions, 'inline-check', true);
-export const ObjectCheck = () => optionsHelper(objectOptions, 'check', true);
-export const ObjectInlineCheck = () => optionsHelper(objectOptions, 'inline-check', true);
-export const ArrayCheckUndefined = () => rawOptionsHelper(arrayOptions, 'check', false, undefined);
-export const ObjectCheckUndefined = () => rawOptionsHelper(objectOptions, 'check', false, undefined); // Radio
-
-export const ArrayRadio = () => optionsHelper(arrayOptions, 'radio', false);
-export const ArrayInlineRadio = () => optionsHelper(arrayOptions, 'inline-radio', false);
-export const ObjectRadio = () => optionsHelper(objectOptions, 'radio', false);
-export const ObjectInlineRadio = () => optionsHelper(objectOptions, 'inline-radio', false);
-export const ArrayRadioUndefined = () => rawOptionsHelper(arrayOptions, 'radio', false, undefined);
-export const ObjectRadioUndefined = () => rawOptionsHelper(objectOptions, 'radio', false, undefined); // Select
-
-export const ArraySelect = () => optionsHelper(arrayOptions, 'select', false);
-export const ArrayMultiSelect = () => optionsHelper(arrayOptions, 'multi-select', true);
-export const ObjectSelect = () => optionsHelper(objectOptions, 'select', false);
-export const ObjectMultiSelect = () => optionsHelper(objectOptions, 'multi-select', true);
-export const ArraySelectUndefined = () => rawOptionsHelper(arrayOptions, 'select', false, undefined);
-export const ObjectSelectUndefined = () => rawOptionsHelper(objectOptions, 'select', false, undefined);
-export const ArrayMultiSelectUndefined = () => rawOptionsHelper(arrayOptions, 'multi-select', false, undefined);
-export const ObjectMultiSelectUndefined = () => rawOptionsHelper(objectOptions, 'multi-select', false, undefined);

package/dist/modern/controls/options/Radio.js

@@ -1,70 +0,0 @@
-import React from 'react';
-import { styled } from '@storybook/theming';
-import { logger } from '@storybook/client-logger';
-import { selectedKey } from './helpers';
-import { getControlId } from '../helpers';
-const Wrapper = styled.div(({
-  isInline
-}) => isInline ? {
-  display: 'flex',
-  flexWrap: 'wrap',
-  alignItems: 'flex-start',
-  label: {
-    display: 'inline-flex',
-    marginRight: 15
-  }
-} : {
-  label: {
-    display: 'flex'
-  }
-});
-const Fieldset = styled.fieldset({
-  border: 0,
-  padding: 0,
-  margin: 0
-});
-const Text = styled.span({});
-const Label = styled.label({
-  lineHeight: '20px',
-  alignItems: 'center',
-  marginBottom: 8,
-  '&:last-child': {
-    marginBottom: 0
-  },
-  input: {
-    margin: 0,
-    marginRight: 6
-  }
-});
-export const RadioControl = ({
-  name,
-  options,
-  value,
-  onChange,
-  isInline
-}) => {
-  if (!options) {
-    logger.warn(`Radio with no options: ${name}`);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, "-");
-  }
-
-  const selection = selectedKey(value, options);
-  const controlId = getControlId(name);
-  return /*#__PURE__*/React.createElement(Wrapper, {
-    isInline: isInline
-  }, Object.keys(options).map((key, index) => {
-    const id = `${controlId}-${index}`;
-    return /*#__PURE__*/React.createElement(Label, {
-      key: id,
-      htmlFor: id
-    }, /*#__PURE__*/React.createElement("input", {
-      type: "radio",
-      id: id,
-      name: id,
-      value: key,
-      onChange: e => onChange(options[e.currentTarget.value]),
-      checked: key === selection
-    }), /*#__PURE__*/React.createElement(Text, null, key));
-  }));
-};
-RadioControl.displayName = "RadioControl";

package/dist/modern/controls/options/Select.js

@@ -1,143 +0,0 @@
-import React from 'react';
-import { styled } from '@storybook/theming';
-import { logger } from '@storybook/client-logger';
-import { selectedKey, selectedKeys, selectedValues } from './helpers';
-import { Icons } from '../../icon/icon';
-import { getControlId } from '../helpers';
-const styleResets = {
-  // resets
-  appearance: 'none',
-  border: '0 none',
-  boxSizing: 'inherit',
-  display: ' block',
-  margin: ' 0',
-  background: 'transparent',
-  padding: 0,
-  fontSize: 'inherit',
-  position: 'relative'
-};
-const OptionsSelect = styled.select(({
-  theme
-}) => Object.assign({}, styleResets, {
-  boxSizing: 'border-box',
-  position: 'relative',
-  padding: '6px 10px',
-  width: '100%',
-  color: theme.input.color || 'inherit',
-  background: theme.input.background,
-  borderRadius: theme.input.borderRadius,
-  boxShadow: `${theme.input.border} 0 0 0 1px inset`,
-  fontSize: theme.typography.size.s2 - 1,
-  lineHeight: '20px',
-  '&:focus': {
-    boxShadow: `${theme.color.secondary} 0 0 0 1px inset`,
-    outline: 'none'
-  },
-  '&[disabled]': {
-    cursor: 'not-allowed',
-    opacity: 0.5
-  },
-  '::placeholder': {
-    color: theme.color.mediumdark
-  },
-  '&[multiple]': {
-    overflow: 'auto',
-    padding: 0,
-    option: {
-      display: 'block',
-      padding: '6px 10px',
-      marginLeft: 1,
-      marginRight: 1
-    }
-  }
-}));
-const SelectWrapper = styled.span`
-  display: inline-block;
-  line-height: normal;
-  overflow: hidden;
-  position: relative;
-  vertical-align: top;
-  width: 100%;
-
-  svg {
-    position: absolute;
-    z-index: 1;
-    pointer-events: none;
-    height: 12px;
-    margin-top: -6px;
-    right: 12px;
-    top: 50%;
-
-    path {
-      fill: currentColor;
-    }
-  }
-`;
-const NO_SELECTION = 'Choose option...';
-
-const SingleSelect = ({
-  name,
-  value,
-  options,
-  onChange
-}) => {
-  const handleChange = e => {
-    onChange(options[e.currentTarget.value]);
-  };
-
-  const selection = selectedKey(value, options) || NO_SELECTION;
-  const controlId = getControlId(name);
-  return /*#__PURE__*/React.createElement(SelectWrapper, null, /*#__PURE__*/React.createElement(Icons, {
-    icon: "arrowdown"
-  }), /*#__PURE__*/React.createElement(OptionsSelect, {
-    id: controlId,
-    value: selection,
-    onChange: handleChange
-  }, /*#__PURE__*/React.createElement("option", {
-    key: "no-selection",
-    disabled: true
-  }, NO_SELECTION), Object.keys(options).map(key => /*#__PURE__*/React.createElement("option", {
-    key: key
-  }, key))));
-};
-
-SingleSelect.displayName = "SingleSelect";
-
-const MultiSelect = ({
-  name,
-  value,
-  options,
-  onChange
-}) => {
-  const handleChange = e => {
-    const selection = Array.from(e.currentTarget.options).filter(option => option.selected).map(option => option.value);
-    onChange(selectedValues(selection, options));
-  };
-
-  const selection = selectedKeys(value, options);
-  const controlId = getControlId(name);
-  return /*#__PURE__*/React.createElement(SelectWrapper, null, /*#__PURE__*/React.createElement(OptionsSelect, {
-    id: controlId,
-    multiple: true,
-    value: selection,
-    onChange: handleChange
-  }, Object.keys(options).map(key => /*#__PURE__*/React.createElement("option", {
-    key: key
-  }, key))));
-};
-
-MultiSelect.displayName = "MultiSelect";
-export const SelectControl = props => {
-  const {
-    name,
-    options
-  } = props;
-
-  if (!options) {
-    logger.warn(`Select with no options: ${name}`);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, "-");
-  } // eslint-disable-next-line react/destructuring-assignment
-
-
-  return props.isMulti ? /*#__PURE__*/React.createElement(MultiSelect, props) : /*#__PURE__*/React.createElement(SingleSelect, props);
-};

package/dist/modern/controls/options/helpers.js

@@ -1,6 +0,0 @@
-export const selectedKey = (value, options) => {
-  const entry = options && Object.entries(options).find(([_key, val]) => val === value);
-  return entry ? entry[0] : undefined;
-};
-export const selectedKeys = (value, options) => value && options ? Object.entries(options).filter(entry => value.includes(entry[1])).map(entry => entry[0]) : [];
-export const selectedValues = (keys, options) => keys && options && keys.map(key => options[key]);

package/dist/modern/controls/options/index.js

@@ -1 +0,0 @@
-export * from './Options';