@utrecht/web-component-library-stencil 1.0.0-alpha.16 → 1.0.0-alpha.163

package/dist/collection/node_modules/@storybook/components/dist/modern/controls/Boolean.js

@@ -0,0 +1,103 @@
+import React, { useCallback } from 'react';
+import { opacify, transparentize } from 'polished';
+import { styled } from '@storybook/theming';
+import { getControlId } from './helpers';
+import { Form } from '../form';
+const Label = styled.label(({
+  theme
+}) => ({
+  lineHeight: '18px',
+  alignItems: 'center',
+  marginBottom: 8,
+  display: 'inline-block',
+  position: 'relative',
+  whiteSpace: 'nowrap',
+  background: `${opacify(0.05, theme.appBorderColor)}`,
+  borderRadius: '3em',
+  padding: 1,
+  input: {
+    appearance: 'none',
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    margin: 0,
+    padding: 0,
+    border: 'none',
+    background: 'transparent',
+    cursor: 'pointer',
+    borderRadius: '3em',
+    '&:focus': {
+      outline: 'none',
+      boxShadow: `${theme.color.secondary} 0 0 0 1px inset !important`
+    }
+  },
+  span: {
+    textAlign: 'center',
+    fontSize: theme.typography.size.s1,
+    fontWeight: theme.typography.weight.bold,
+    lineHeight: '1',
+    cursor: 'pointer',
+    display: 'inline-block',
+    padding: '7px 15px',
+    transition: 'all 100ms ease-out',
+    userSelect: 'none',
+    borderRadius: '3em',
+    color: transparentize(0.4, theme.color.defaultText),
+    background: 'transparent',
+    '&:hover': {
+      boxShadow: `${opacify(0.3, theme.appBorderColor)} 0 0 0 1px inset`
+    },
+    '&:active': {
+      boxShadow: `${opacify(0.05, theme.appBorderColor)} 0 0 0 2px inset`,
+      color: opacify(1, theme.appBorderColor)
+    },
+    '&:first-of-type': {
+      paddingRight: 8
+    },
+    '&:last-of-type': {
+      paddingLeft: 8
+    }
+  },
+  'input:checked ~ span:last-of-type, input:not(:checked) ~ span:first-of-type': {
+    background: theme.background.bar,
+    boxShadow: `${opacify(0.1, theme.appBorderColor)} 0 0 2px`,
+    color: theme.color.defaultText,
+    padding: '7px 15px'
+  }
+}));
+
+const format = value => value ? String(value) : null;
+
+const parse = value => value === 'true';
+
+export const BooleanControl = ({
+  name,
+  value,
+  onChange,
+  onBlur,
+  onFocus
+}) => {
+  const onSetFalse = useCallback(() => onChange(false), [onChange]);
+
+  if (value === undefined) {
+    return /*#__PURE__*/React.createElement(Form.Button, {
+      onClick: onSetFalse
+    }, "Set boolean");
+  }
+
+  return /*#__PURE__*/React.createElement(Label, {
+    htmlFor: name,
+    title: value ? 'Change to false' : 'Change to true'
+  }, /*#__PURE__*/React.createElement("input", {
+    id: getControlId(name),
+    type: "checkbox",
+    onChange: e => onChange(e.target.checked),
+    checked: value || false,
+    name,
+    onBlur,
+    onFocus
+  }), /*#__PURE__*/React.createElement("span", null, "False"), /*#__PURE__*/React.createElement("span", null, "True"));
+};
+BooleanControl.displayName = "BooleanControl";

package/dist/collection/node_modules/@storybook/components/dist/modern/controls/Boolean.stories.js

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

package/dist/collection/node_modules/@storybook/components/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..."
+  }), /*#__PURE__*/React.createElement(ToggleIcon, {
+    icon: "markup",
+    onClick: cycleColorSpace
+  }));
+};
+ColorControl.displayName = "ColorControl";
+export default ColorControl;

package/dist/collection/node_modules/@storybook/components/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/collection/node_modules/@storybook/components/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/collection/node_modules/@storybook/components/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);