@storybook/components 6.4.0-beta.20 → 6.4.0-beta.24

package/dist/modern/controls/Range.js

@@ -1,184 +0,0 @@
-import React, { useMemo } from 'react';
-import { styled } from '@storybook/theming';
-import { lighten, darken, rgba } from 'polished';
-import { getControlId } from './helpers';
-import { parse } from './Number';
-const RangeInput = styled.input(({
-  theme,
-  min,
-  max,
-  value
-}) => ({
-  // Resytled using http://danielstern.ca/range.css/#/
-  '&': {
-    width: '100%',
-    backgroundColor: 'transparent',
-    appearance: 'none'
-  },
-  '&::-webkit-slider-runnable-track': {
-    background: theme.base === 'light' ? `linear-gradient(to right, 
-            ${theme.color.green} 0%, ${theme.color.green} ${(value - min) / (max - min) * 100}%, 
-            ${darken(0.02, theme.input.background)} ${(value - min) / (max - min) * 100}%, 
-            ${darken(0.02, theme.input.background)} 100%)` : `linear-gradient(to right, 
-            ${theme.color.green} 0%, ${theme.color.green} ${(value - min) / (max - min) * 100}%, 
-            ${lighten(0.02, theme.input.background)} ${(value - min) / (max - min) * 100}%, 
-            ${lighten(0.02, theme.input.background)} 100%)`,
-    boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
-    borderRadius: 6,
-    width: '100%',
-    height: 6,
-    cursor: 'pointer'
-  },
-  '&::-webkit-slider-thumb': {
-    marginTop: '-6px',
-    width: 16,
-    height: 16,
-    border: `1px solid ${rgba(theme.appBorderColor, 0.2)}`,
-    borderRadius: '50px',
-    boxShadow: `0 1px 3px 0px ${rgba(theme.appBorderColor, 0.2)}`,
-    cursor: 'grab',
-    appearance: 'none',
-    background: `${theme.input.background}`,
-    transition: 'all 150ms ease-out',
-    '&:hover': {
-      background: `${darken(0.05, theme.input.background)}`,
-      transform: 'scale3d(1.1, 1.1, 1.1) translateY(-1px)',
-      transition: 'all 50ms ease-out'
-    },
-    '&:active': {
-      background: `${theme.input.background}`,
-      transform: 'scale3d(1, 1, 1) translateY(0px)',
-      cursor: 'grabbing'
-    }
-  },
-  '&:focus': {
-    outline: 'none',
-    '&::-webkit-slider-runnable-track': {
-      borderColor: rgba(theme.color.secondary, 0.4)
-    },
-    '&::-webkit-slider-thumb': {
-      borderColor: theme.color.secondary,
-      boxShadow: `0 0px 5px 0px ${theme.color.secondary}`
-    }
-  },
-  '&::-moz-range-track': {
-    background: theme.base === 'light' ? `linear-gradient(to right, 
-            ${theme.color.green} 0%, ${theme.color.green} ${(value - min) / (max - min) * 100}%, 
-            ${darken(0.02, theme.input.background)} ${(value - min) / (max - min) * 100}%, 
-            ${darken(0.02, theme.input.background)} 100%)` : `linear-gradient(to right, 
-            ${theme.color.green} 0%, ${theme.color.green} ${(value - min) / (max - min) * 100}%, 
-            ${lighten(0.02, theme.input.background)} ${(value - min) / (max - min) * 100}%, 
-            ${lighten(0.02, theme.input.background)} 100%)`,
-    boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
-    borderRadius: 6,
-    width: '100%',
-    height: 6,
-    cursor: 'pointer',
-    outline: 'none'
-  },
-  '&::-moz-range-thumb': {
-    width: 16,
-    height: 16,
-    border: `1px solid ${rgba(theme.color.border, 0.2)}`,
-    borderRadius: '50px',
-    boxShadow: `0 1px 3px 0px ${rgba(theme.color.border, 0.2)}`,
-    cursor: 'grab',
-    background: `${theme.input.background}`,
-    transition: 'all 150ms ease-out',
-    '&:hover': {
-      background: `${darken(0.05, theme.input.background)}`,
-      transform: 'scale3d(1.1, 1.1, 1.1) translateY(-1px)',
-      transition: 'all 50ms ease-out'
-    },
-    '&:active': {
-      background: `${theme.input.background}`,
-      transform: 'scale3d(1, 1, 1) translateY(0px)',
-      cursor: 'grabbing'
-    }
-  },
-  '&::-ms-track': {
-    background: theme.base === 'light' ? `linear-gradient(to right, 
-            ${theme.color.green} 0%, ${theme.color.green} ${(value - min) / (max - min) * 100}%, 
-            ${darken(0.02, theme.input.background)} ${(value - min) / (max - min) * 100}%, 
-            ${darken(0.02, theme.input.background)} 100%)` : `linear-gradient(to right, 
-            ${theme.color.green} 0%, ${theme.color.green} ${(value - min) / (max - min) * 100}%, 
-            ${lighten(0.02, theme.input.background)} ${(value - min) / (max - min) * 100}%, 
-            ${lighten(0.02, theme.input.background)} 100%)`,
-    boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
-    color: 'transparent',
-    width: '100%',
-    height: '6px',
-    cursor: 'pointer'
-  },
-  '&::-ms-fill-lower': {
-    borderRadius: 6
-  },
-  '&::-ms-fill-upper': {
-    borderRadius: 6
-  },
-  '&::-ms-thumb': {
-    width: 16,
-    height: 16,
-    background: `${theme.input.background}`,
-    border: `1px solid ${rgba(theme.appBorderColor, 0.2)}`,
-    borderRadius: 50,
-    cursor: 'grab',
-    marginTop: 0
-  },
-  '@supports (-ms-ime-align:auto)': {
-    'input[type=range]': {
-      margin: '0'
-    }
-  }
-}));
-const RangeLabel = styled.span({
-  paddingLeft: 5,
-  paddingRight: 5,
-  fontSize: 12,
-  whiteSpace: 'nowrap',
-  fontFeatureSettings: 'tnum',
-  fontVariantNumeric: 'tabular-nums'
-});
-const RangeWrapper = styled.div({
-  display: 'flex',
-  alignItems: 'center',
-  width: '100%'
-});
-
-function getNumberOfDecimalPlaces(number) {
-  const match = number.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
-  return !match ? 0 : Math.max(0, // Number of digits right of decimal point.
-  (match[1] ? match[1].length : 0) - ( // Adjust for scientific notation.
-  match[2] ? +match[2] : 0));
-}
-
-export const RangeControl = ({
-  name,
-  value,
-  onChange,
-  min = 0,
-  max = 100,
-  step = 1,
-  onBlur,
-  onFocus
-}) => {
-  const handleChange = event => {
-    onChange(parse(event.target.value));
-  };
-
-  const hasValue = value !== undefined;
-  const numberOFDecimalsPlaces = useMemo(() => getNumberOfDecimalPlaces(step), [step]);
-  return /*#__PURE__*/React.createElement(RangeWrapper, null, /*#__PURE__*/React.createElement(RangeLabel, null, min), /*#__PURE__*/React.createElement(RangeInput, {
-    id: getControlId(name),
-    type: "range",
-    onChange: handleChange,
-    name,
-    value,
-    min,
-    max,
-    step,
-    onFocus,
-    onBlur
-  }), /*#__PURE__*/React.createElement(RangeLabel, null, `${hasValue ? value.toFixed(numberOFDecimalsPlaces) : '--'}`, " / ", max));
-};
-RangeControl.displayName = "RangeControl";

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, { Suspense } from 'react';
-export * from './types';
-export * from './Boolean';
-const LazyColorControl = /*#__PURE__*/React.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";