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

package/dist/modern/controls/Color.js

@@ -0,0 +1,343 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { HexColorPicker, HslaStringColorPicker, RgbaStringColorPicker } from 'react-colorful';
+import convert from 'color-convert';
+import throttle from 'lodash/throttle';
+import { styled } from '@storybook/theming';
+import { TooltipNote } from '../tooltip/TooltipNote';
+import { WithTooltip } from '../tooltip/lazy-WithTooltip';
+import { Form } from '../form';
+import { Icons } from '../icon/icon';
+import { getControlId } from './helpers';
+const Wrapper = styled.div({
+  position: 'relative',
+  maxWidth: 250
+});
+const PickerTooltip = styled(WithTooltip)({
+  position: 'absolute',
+  zIndex: 1,
+  top: 4,
+  left: 4
+});
+const TooltipContent = styled.div({
+  width: 200,
+  margin: 5,
+  '.react-colorful__saturation': {
+    borderRadius: '4px 4px 0 0'
+  },
+  '.react-colorful__hue': {
+    boxShadow: 'inset 0 0 0 1px rgb(0 0 0 / 5%)'
+  },
+  '.react-colorful__last-control': {
+    borderRadius: '0 0 4px 4px'
+  }
+});
+const Note = styled(TooltipNote)(({
+  theme
+}) => ({
+  fontFamily: theme.typography.fonts.base
+}));
+const Swatches = styled.div({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(9, 16px)',
+  gap: 6,
+  padding: 3,
+  marginTop: 5,
+  width: 200
+});
+const SwatchColor = styled.div(({
+  theme,
+  active
+}) => ({
+  width: 16,
+  height: 16,
+  boxShadow: active ? `${theme.appBorderColor} 0 0 0 1px inset, ${theme.color.mediumdark}50 0 0 0 4px` : `${theme.appBorderColor} 0 0 0 1px inset`,
+  borderRadius: theme.appBorderRadius
+}));
+const swatchBackground = `url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')`;
+
+const Swatch = (_ref) => {
+  let {
+    value,
+    active,
+    onClick,
+    style
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["value", "active", "onClick", "style"]);
+
+  const backgroundImage = `linear-gradient(${value}, ${value}), ${swatchBackground}, linear-gradient(#fff, #fff)`;
+  return /*#__PURE__*/React.createElement(SwatchColor, _extends({}, props, {
+    active,
+    onClick,
+    style: Object.assign({}, style, {
+      backgroundImage
+    })
+  }));
+};
+
+Swatch.displayName = "Swatch";
+const Input = styled(Form.Input)(({
+  theme
+}) => ({
+  width: '100%',
+  paddingLeft: 30,
+  paddingRight: 30,
+  boxSizing: 'border-box',
+  fontFamily: theme.typography.fonts.base
+}));
+const ToggleIcon = styled(Icons)(({
+  theme
+}) => ({
+  position: 'absolute',
+  zIndex: 1,
+  top: 6,
+  right: 7,
+  width: 20,
+  height: 20,
+  padding: 4,
+  boxSizing: 'border-box',
+  cursor: 'pointer',
+  color: theme.input.color
+}));
+var ColorSpace;
+
+(function (ColorSpace) {
+  ColorSpace["RGB"] = "rgb";
+  ColorSpace["HSL"] = "hsl";
+  ColorSpace["HEX"] = "hex";
+})(ColorSpace || (ColorSpace = {}));
+
+const COLOR_SPACES = Object.values(ColorSpace);
+const COLOR_REGEXP = /\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/;
+const RGB_REGEXP = /^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i;
+const HSL_REGEXP = /^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i;
+const HEX_REGEXP = /^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i;
+const SHORTHEX_REGEXP = /^\s*#?([0-9a-f]{3})\s*$/i;
+const ColorPicker = {
+  [ColorSpace.HEX]: HexColorPicker,
+  [ColorSpace.RGB]: RgbaStringColorPicker,
+  [ColorSpace.HSL]: HslaStringColorPicker
+};
+const fallbackColor = {
+  [ColorSpace.HEX]: 'transparent',
+  [ColorSpace.RGB]: 'rgba(0, 0, 0, 0)',
+  [ColorSpace.HSL]: 'hsla(0, 0%, 0%, 0)'
+};
+
+const stringToArgs = value => {
+  const match = value === null || value === void 0 ? void 0 : value.match(COLOR_REGEXP);
+  if (!match) return [0, 0, 0, 1];
+  const [, x, y, z, a = 1] = match;
+  return [x, y, z, a].map(Number);
+};
+
+const parseValue = value => {
+  if (!value) return undefined;
+  let valid = true;
+
+  if (RGB_REGEXP.test(value)) {
+    const [r, g, b, a] = stringToArgs(value);
+    const [h, s, l] = convert.rgb.hsl([r, g, b]) || [0, 0, 0];
+    return {
+      valid,
+      value,
+      keyword: convert.rgb.keyword([r, g, b]),
+      colorSpace: ColorSpace.RGB,
+      [ColorSpace.RGB]: value,
+      [ColorSpace.HSL]: `hsla(${h}, ${s}%, ${l}%, ${a})`,
+      [ColorSpace.HEX]: `#${convert.rgb.hex([r, g, b]).toLowerCase()}`
+    };
+  }
+
+  if (HSL_REGEXP.test(value)) {
+    const [h, s, l, a] = stringToArgs(value);
+    const [r, g, b] = convert.hsl.rgb([h, s, l]) || [0, 0, 0];
+    return {
+      valid,
+      value,
+      keyword: convert.hsl.keyword([h, s, l]),
+      colorSpace: ColorSpace.HSL,
+      [ColorSpace.RGB]: `rgba(${r}, ${g}, ${b}, ${a})`,
+      [ColorSpace.HSL]: value,
+      [ColorSpace.HEX]: `#${convert.hsl.hex([h, s, l]).toLowerCase()}`
+    };
+  }
+
+  const plain = value.replace('#', '');
+  const rgb = convert.keyword.rgb(plain) || convert.hex.rgb(plain);
+  const hsl = convert.rgb.hsl(rgb);
+  let mapped = value;
+  if (/[^#a-f0-9]/i.test(value)) mapped = plain;else if (HEX_REGEXP.test(value)) mapped = `#${plain}`;
+
+  if (mapped.startsWith('#')) {
+    valid = HEX_REGEXP.test(mapped);
+  } else {
+    try {
+      convert.keyword.hex(mapped);
+    } catch (e) {
+      valid = false;
+    }
+  }
+
+  return {
+    valid,
+    value: mapped,
+    keyword: convert.rgb.keyword(rgb),
+    colorSpace: ColorSpace.HEX,
+    [ColorSpace.RGB]: `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 1)`,
+    [ColorSpace.HSL]: `hsla(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%, 1)`,
+    [ColorSpace.HEX]: mapped
+  };
+};
+
+const getRealValue = (value, color, colorSpace) => {
+  if (!value || !(color !== null && color !== void 0 && color.valid)) return fallbackColor[colorSpace];
+  if (colorSpace !== ColorSpace.HEX) return (color === null || color === void 0 ? void 0 : color[colorSpace]) || fallbackColor[colorSpace];
+
+  if (!color.hex.startsWith('#')) {
+    try {
+      return `#${convert.keyword.hex(color.hex)}`;
+    } catch (e) {
+      return fallbackColor.hex;
+    }
+  }
+
+  const short = color.hex.match(SHORTHEX_REGEXP);
+  if (!short) return HEX_REGEXP.test(color.hex) ? color.hex : fallbackColor.hex;
+  const [r, g, b] = short[1].split('');
+  return `#${r}${r}${g}${g}${b}${b}`;
+};
+
+const useColorInput = (initialValue, onChange) => {
+  const [value, setValue] = useState(initialValue || '');
+  const [color, setColor] = useState(() => parseValue(value));
+  const [colorSpace, setColorSpace] = useState((color === null || color === void 0 ? void 0 : color.colorSpace) || ColorSpace.HEX); // Reset state when initialValue becomes undefined (when resetting controls)
+
+  useEffect(() => {
+    if (initialValue !== undefined) return;
+    setValue('');
+    setColor(undefined);
+    setColorSpace(ColorSpace.HEX);
+  }, [initialValue]);
+  const realValue = useMemo(() => getRealValue(value, color, colorSpace).toLowerCase(), [value, color, colorSpace]);
+  const updateValue = useCallback(update => {
+    const parsed = parseValue(update);
+    setValue((parsed === null || parsed === void 0 ? void 0 : parsed.value) || update || '');
+    if (!parsed) return;
+    setColor(parsed);
+    setColorSpace(parsed.colorSpace);
+    onChange(parsed.value);
+  }, [onChange]);
+  const cycleColorSpace = useCallback(() => {
+    let next = COLOR_SPACES.indexOf(colorSpace) + 1;
+    if (next >= COLOR_SPACES.length) next = 0;
+    setColorSpace(COLOR_SPACES[next]);
+    const update = (color === null || color === void 0 ? void 0 : color[COLOR_SPACES[next]]) || '';
+    setValue(update);
+    onChange(update);
+  }, [color, colorSpace, onChange]);
+  return {
+    value,
+    realValue,
+    updateValue,
+    color,
+    colorSpace,
+    cycleColorSpace
+  };
+};
+
+const id = value => value.replace(/\s*/, '').toLowerCase();
+
+const usePresets = (presetColors, currentColor, colorSpace) => {
+  const [selectedColors, setSelectedColors] = useState(currentColor !== null && currentColor !== void 0 && currentColor.valid ? [currentColor] : []); // Reset state when currentColor becomes undefined (when resetting controls)
+
+  useEffect(() => {
+    if (currentColor !== undefined) return;
+    setSelectedColors([]);
+  }, [currentColor]);
+  const presets = useMemo(() => {
+    const initialPresets = (presetColors || []).map(preset => {
+      if (typeof preset === 'string') return parseValue(preset);
+      if (preset.title) return Object.assign({}, parseValue(preset.color), {
+        keyword: preset.title
+      });
+      return parseValue(preset.color);
+    });
+    return initialPresets.concat(selectedColors).filter(Boolean).slice(-27);
+  }, [presetColors, selectedColors]);
+  const addPreset = useCallback(color => {
+    if (!(color !== null && color !== void 0 && color.valid)) return;
+    if (presets.some(preset => id(preset[colorSpace]) === id(color[colorSpace]))) return;
+    setSelectedColors(arr => arr.concat(color));
+  }, [colorSpace, presets]);
+  return {
+    presets,
+    addPreset
+  };
+};
+
+export const ColorControl = ({
+  name,
+  value: initialValue,
+  onChange,
+  onFocus,
+  onBlur,
+  presetColors,
+  startOpen
+}) => {
+  const {
+    value,
+    realValue,
+    updateValue,
+    color,
+    colorSpace,
+    cycleColorSpace
+  } = useColorInput(initialValue, throttle(onChange, 200));
+  const {
+    presets,
+    addPreset
+  } = usePresets(presetColors, color, colorSpace);
+  const Picker = ColorPicker[colorSpace];
+  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(PickerTooltip, {
+    trigger: "click",
+    startOpen: startOpen,
+    closeOnClick: true,
+    onVisibilityChange: () => addPreset(color),
+    tooltip: /*#__PURE__*/React.createElement(TooltipContent, null, /*#__PURE__*/React.createElement(Picker, {
+      color: realValue === 'transparent' ? '#000000' : realValue,
+      onChange: updateValue,
+      onFocus,
+      onBlur
+    }), presets.length > 0 && /*#__PURE__*/React.createElement(Swatches, null, presets.map((preset, index) => /*#__PURE__*/React.createElement(WithTooltip // eslint-disable-next-line react/no-array-index-key
+    , {
+      key: `${preset.value}-${index}`,
+      hasChrome: false,
+      tooltip: /*#__PURE__*/React.createElement(Note, {
+        note: preset.keyword || preset.value
+      })
+    }, /*#__PURE__*/React.createElement(Swatch, {
+      value: preset[colorSpace],
+      active: color && id(preset[colorSpace]) === id(color[colorSpace]),
+      onClick: () => updateValue(preset.value)
+    })))))
+  }, /*#__PURE__*/React.createElement(Swatch, {
+    value: realValue,
+    style: {
+      margin: 4
+    }
+  })), /*#__PURE__*/React.createElement(Input, {
+    id: getControlId(name),
+    value: value,
+    onChange: e => updateValue(e.target.value),
+    onFocus: e => e.target.select(),
+    placeholder: "Choose color..."
+  }), value ? /*#__PURE__*/React.createElement(ToggleIcon, {
+    icon: "markup",
+    onClick: cycleColorSpace
+  }) : null);
+};
+ColorControl.displayName = "ColorControl";
+export default ColorControl;

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

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import { ColorControl } from './Color';
+export default {
+  title: 'Controls/Color',
+  component: ColorControl
+};
+
+const Template = (initialValue, presetColors) => {
+  const [value, setValue] = useState(initialValue);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorControl, {
+    name: "Color",
+    value: value,
+    onChange: newVal => setValue(newVal),
+    presetColors: presetColors,
+    startOpen: true
+  }), /*#__PURE__*/React.createElement("pre", null, JSON.stringify(value) || 'undefined'));
+};
+
+export const Basic = () => Template('#ff0');
+export const Undefined = () => Template(undefined);
+export const WithPresetColors = () => Template('tan', [{
+  color: '#ff4785',
+  title: 'Coral'
+}, {
+  color: '#1EA7FD',
+  title: 'Ocean'
+}, {
+  color: 'rgb(252, 82, 31)',
+  title: 'Orange'
+}, {
+  color: 'RGBA(255, 174, 0, 0.5)',
+  title: 'Gold'
+}, {
+  color: 'hsl(101, 52%, 49%)',
+  title: 'Green'
+}, {
+  color: 'HSLA(179,65%,53%,0.5)',
+  title: 'Seafoam'
+}, {
+  color: '#6F2CAC',
+  title: 'Purple'
+}, {
+  color: '#2A0481',
+  title: 'Ultraviolet'
+}, {
+  color: 'black'
+}, {
+  color: '#333',
+  title: 'Darkest'
+}, {
+  color: '#444',
+  title: 'Darker'
+}, {
+  color: '#666',
+  title: 'Dark'
+}, {
+  color: '#999',
+  title: 'Mediumdark'
+}, {
+  color: '#ddd',
+  title: 'Medium'
+}, {
+  color: '#EEE',
+  title: 'Mediumlight'
+}, {
+  color: '#F3F3F3',
+  title: 'Light'
+}, {
+  color: '#F8F8F8',
+  title: 'Lighter'
+}, {
+  color: '#FFFFFF',
+  title: 'Lightest'
+}, '#fe4a49', '#FED766', 'rgba(0, 159, 183, 1)', 'HSLA(240,11%,91%,0.5)', 'slategray']);

package/dist/modern/controls/Date.js

@@ -0,0 +1,118 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { styled } from '@storybook/theming';
+import { Form } from '../form';
+import { getControlId } from './helpers';
+
+const parseDate = value => {
+  const [year, month, day] = value.split('-');
+  const result = new Date();
+  result.setFullYear(parseInt(year, 10), parseInt(month, 10) - 1, parseInt(day, 10));
+  return result;
+};
+
+const parseTime = value => {
+  const [hours, minutes] = value.split(':');
+  const result = new Date();
+  result.setHours(parseInt(hours, 10));
+  result.setMinutes(parseInt(minutes, 10));
+  return result;
+};
+
+const formatDate = value => {
+  const date = new Date(value);
+  const year = `000${date.getFullYear()}`.slice(-4);
+  const month = `0${date.getMonth() + 1}`.slice(-2);
+  const day = `0${date.getDate()}`.slice(-2);
+  return `${year}-${month}-${day}`;
+};
+
+const formatTime = value => {
+  const date = new Date(value);
+  const hours = `0${date.getHours()}`.slice(-2);
+  const minutes = `0${date.getMinutes()}`.slice(-2);
+  return `${hours}:${minutes}`;
+};
+
+const FlexSpaced = styled.div(({
+  theme
+}) => ({
+  flex: 1,
+  display: 'flex',
+  input: {
+    marginLeft: 10,
+    flex: 1,
+    height: 32,
+    // hardcode height bc Chromium bug https://bugs.chromium.org/p/chromium/issues/detail?id=417606
+    '&::-webkit-calendar-picker-indicator': {
+      opacity: 0.5,
+      height: 12,
+      filter: theme.base === 'light' ? undefined : 'invert(1)'
+    }
+  },
+  'input:first-of-type': {
+    marginLeft: 0
+  }
+}));
+export const DateControl = ({
+  name,
+  value,
+  onChange,
+  onFocus,
+  onBlur
+}) => {
+  const [valid, setValid] = useState(true);
+  const dateRef = useRef();
+  const timeRef = useRef();
+  useEffect(() => {
+    if (valid !== false) {
+      if (dateRef && dateRef.current) {
+        dateRef.current.value = formatDate(value);
+      }
+
+      if (timeRef && timeRef.current) {
+        timeRef.current.value = formatTime(value);
+      }
+    }
+  }, [value]);
+
+  const onDateChange = e => {
+    const parsed = parseDate(e.target.value);
+    const result = new Date(value);
+    result.setFullYear(parsed.getFullYear(), parsed.getMonth(), parsed.getDate());
+    const time = result.getTime();
+    if (time) onChange(time);
+    setValid(!!time);
+  };
+
+  const onTimeChange = e => {
+    const parsed = parseTime(e.target.value);
+    const result = new Date(value);
+    result.setHours(parsed.getHours());
+    result.setMinutes(parsed.getMinutes());
+    const time = result.getTime();
+    if (time) onChange(time);
+    setValid(!!time);
+  };
+
+  const controlId = getControlId(name);
+  return /*#__PURE__*/React.createElement(FlexSpaced, null, /*#__PURE__*/React.createElement(Form.Input, {
+    type: "date",
+    max: "9999-12-31" // I do this because of a rendering bug in chrome
+    ,
+    ref: dateRef,
+    id: `${controlId}-date`,
+    name: `${controlId}-date`,
+    onChange: onDateChange,
+    onFocus,
+    onBlur
+  }), /*#__PURE__*/React.createElement(Form.Input, {
+    type: "time",
+    id: `${controlId}-time`,
+    name: `${controlId}-time`,
+    ref: timeRef,
+    onChange: onTimeChange,
+    onFocus,
+    onBlur
+  }), !valid ? /*#__PURE__*/React.createElement("div", null, "invalid") : null);
+};
+DateControl.displayName = "DateControl";

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

@@ -0,0 +1,18 @@
+import React, { useState } from 'react';
+import { DateControl } from './Date';
+export default {
+  title: 'Controls/Date',
+  component: DateControl
+};
+
+const Template = initialValue => {
+  const [value, setValue] = useState(initialValue);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DateControl, {
+    name: "date",
+    value: value,
+    onChange: newVal => setValue(newVal)
+  }), /*#__PURE__*/React.createElement("pre", null, JSON.stringify(value) || 'undefined'));
+};
+
+export const Basic = () => Template(new Date(2020, 4, 20));
+export const Undefined = () => Template(undefined);

package/dist/modern/controls/Files.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { Form } from '../form';
+import { getControlId } from './helpers';
+const FileInput = styled(Form.Input)({
+  padding: 10
+});
+
+function revokeOldUrls(urls) {
+  urls.forEach(url => {
+    if (url.startsWith('blob:')) {
+      URL.revokeObjectURL(url);
+    }
+  });
+}
+
+export const FilesControl = ({
+  onChange,
+  name,
+  accept = 'image/*',
+  value
+}) => {
+  function handleFileChange(e) {
+    if (!e.target.files) {
+      return;
+    }
+
+    const fileUrls = Array.from(e.target.files).map(file => URL.createObjectURL(file));
+    onChange(fileUrls);
+    revokeOldUrls(value);
+  }
+
+  return /*#__PURE__*/React.createElement(FileInput, {
+    id: getControlId(name),
+    type: "file",
+    name: name,
+    multiple: true,
+    onChange: handleFileChange,
+    accept: accept,
+    size: "flex"
+  });
+};
+FilesControl.displayName = "FilesControl";

package/dist/modern/controls/Number.js

@@ -0,0 +1,72 @@
+import React, { useState, useCallback, useEffect, useRef } from 'react';
+import { styled } from '@storybook/theming';
+import { Form } from '../form';
+import { getControlId, getControlSetterButtonId } from './helpers';
+const Wrapper = styled.label({
+  display: 'flex'
+});
+export const parse = value => {
+  const result = parseFloat(value);
+  return Number.isNaN(result) ? undefined : result;
+};
+export const format = value => value != null ? String(value) : '';
+export const NumberControl = ({
+  name,
+  value,
+  onChange,
+  min,
+  max,
+  step,
+  onBlur,
+  onFocus
+}) => {
+  const [inputValue, setInputValue] = useState(typeof value === 'number' ? value : '');
+  const [forceVisible, setForceVisible] = useState(false);
+  const [parseError, setParseError] = useState(null);
+  const handleChange = useCallback(event => {
+    setInputValue(event.target.value);
+    const result = parseFloat(event.target.value);
+
+    if (Number.isNaN(result)) {
+      setParseError(new Error(`'${event.target.value}' is not a number`));
+    } else {
+      onChange(result);
+      setParseError(null);
+    }
+  }, [onChange, setParseError]);
+  const onForceVisible = useCallback(() => {
+    setInputValue('0');
+    onChange(0);
+    setForceVisible(true);
+  }, [setForceVisible]);
+  const htmlElRef = useRef(null);
+  useEffect(() => {
+    if (forceVisible && htmlElRef.current) htmlElRef.current.select();
+  }, [forceVisible]);
+
+  if (!forceVisible && value === undefined) {
+    return /*#__PURE__*/React.createElement(Form.Button, {
+      id: getControlSetterButtonId(name),
+      onClick: onForceVisible
+    }, "Set number");
+  }
+
+  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Form.Input, {
+    ref: htmlElRef,
+    id: getControlId(name),
+    type: "number",
+    onChange: handleChange,
+    size: "flex",
+    placeholder: "Edit number...",
+    value: inputValue,
+    valid: parseError ? 'error' : null,
+    autoFocus: forceVisible,
+    name,
+    min,
+    max,
+    step,
+    onFocus,
+    onBlur
+  }));
+};
+NumberControl.displayName = "NumberControl";

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

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