docs: improve documentation with knobs (#285)

* docs: improve documentation with Storybook knobs

* docs: add more knobs to tweak props

* docs: add usage with Form inside new stories

Author: arthurdenner

.storybook/addons.js

@@ -1,2 +1,3 @@
+import '@storybook/addon-knobs/register';
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';

package.json

@@ -46,6 +46,7 @@
   "devDependencies": {
     "@babel/core": "7.9.6",
     "@storybook/addon-actions": "5.3.19",
+    "@storybook/addon-knobs": "5.3.19",
     "@storybook/addon-links": "5.3.19",
     "@storybook/addons": "5.3.19",
     "@storybook/react": "5.3.19",

stories/basic.stories.tsx

@@ -5,7 +5,24 @@ type ContentProps = {
 };
 
 export const Content: React.FC<ContentProps> = ({ children, style }) => (
-  <div style={{ display: 'flex', flex: 1, justifyContent: 'center', ...style }}>
+  <div
+    style={{
+      display: 'flex',
+      position: 'absolute',
+      height: '100%',
+      width: '100%',
+      alignItems: 'center',
+      justifyContent: 'center',
+      ...style,
+    }}
+  >
     {children}
   </div>
 );
+
+export const onChange = (_: any, data: any) =>
+  console.log('[react-semantic-ui-datepickers]\n', data);
+
+export const isWeekday = (date: Date) => ![0, 6].includes(date.getDay());
+
+export * from './data';

stories/common.tsx

@@ -0,0 +1,37 @@
+const types = <const>['basic', 'range'];
+const pointing = <const>['left', 'right', 'top left', 'top right'];
+const locale = <const>[
+  'bg-BG',
+  'ca-ES',
+  'cs-CZ',
+  'de-DE',
+  'en-US',
+  'es-ES',
+  'fi-FL',
+  'fr-FR',
+  'he-IL',
+  'it-IT',
+  'ja-JP',
+  'nb-NO',
+  'pl-PL',
+  'pt-BR',
+  'ru-RU',
+  'sv-SE',
+  'tr-TR',
+  'zh-CN',
+];
+
+function arrayToMap<T extends string>(
+  arr: readonly T[]
+): { [key in typeof arr[number]]: typeof arr[number] } {
+  return arr.reduce(
+    (acc, cur) => ({ ...acc, [cur]: cur }),
+    {} as { [key in T]: T }
+  );
+}
+
+export const typeMap = arrayToMap(types);
+
+export const pointingMap = arrayToMap(pointing);
+
+export const localeMap = arrayToMap([...locale].sort());

stories/data.ts

@@ -0,0 +1,109 @@
+import React from 'react';
+import {
+  withKnobs,
+  boolean,
+  date,
+  number,
+  select,
+  text,
+} from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+import { Form } from 'semantic-ui-react';
+import 'semantic-ui-css/semantic.min.css';
+import SemanticDatepicker from '../src';
+import {
+  Content,
+  isWeekday,
+  localeMap,
+  onChange,
+  pointingMap,
+  typeMap,
+} from './common';
+// import { parseISO } from 'date-fns';
+
+const stories = storiesOf('Datepickers', module);
+
+stories.addDecorator(withKnobs);
+stories.addParameters({
+  info: {
+    disable: true,
+  },
+  options: {
+    panelPosition: 'right',
+  },
+});
+
+stories.add('Basic usage', () => {
+  const type = select('Type', typeMap, typeMap.basic);
+  const allowOnlyNumbers = boolean('Allow only numbers', false);
+  const clearOnSameDateClick = boolean('Clear on same date click', true);
+  const datePickerOnly = boolean('Datepicker only', false);
+  const firstDayOfWeek = number('First day of week', 0, { max: 6, min: 0 });
+  const format = text('Format', 'YYYY-MM-DD');
+  const keepOpenOnClear = boolean('Keep open on clear', false);
+  const keepOpenOnSelect = boolean('Keep open on select', false);
+  const locale = select('Locale', localeMap, localeMap['en-US']);
+  const pointing = select('Pointing', pointingMap, pointingMap.left);
+  const clearable = boolean('Clearable', true);
+  const readOnly = boolean('Read-only', false);
+  const showOutsideDays = boolean('Show outside days', false);
+  const minDate = new Date(date('Min date', new Date('2018-01-01')));
+  const maxDate = new Date(date('Max date', new Date('2030-01-01')));
+  const onlyWeekdays = boolean('Only weekdays (filterDate example)', false);
+  const controlValue = boolean('Control value', false);
+  const initialValue = controlValue
+    ? type === 'basic'
+      ? new Date(date('Initial value'))
+      : [new Date(date('Initial value')), new Date(date('Final value'))]
+    : undefined;
+  const filterDate = onlyWeekdays ? isWeekday : undefined;
+  const key = type + format + readOnly;
+
+  return (
+    <Content>
+      <SemanticDatepicker
+        key={key}
+        allowOnlyNumbers={allowOnlyNumbers}
+        clearOnSameDateClick={clearOnSameDateClick}
+        clearable={clearable}
+        datePickerOnly={datePickerOnly}
+        filterDate={filterDate}
+        firstDayOfWeek={firstDayOfWeek}
+        format={format}
+        keepOpenOnClear={keepOpenOnClear}
+        keepOpenOnSelect={keepOpenOnSelect}
+        locale={locale}
+        maxDate={maxDate}
+        minDate={minDate}
+        onChange={onChange}
+        pointing={pointing}
+        readOnly={readOnly}
+        showOutsideDays={showOutsideDays}
+        type={type}
+        value={initialValue}
+      />
+    </Content>
+  );
+});
+
+stories.add('Usage with Form', () => {
+  return (
+    <Content>
+      <Form>
+        <Form.Group width="equals">
+          <SemanticDatepicker
+            label="Initial date"
+            id="initialDate"
+            onChange={onChange}
+            required
+          />
+          <SemanticDatepicker
+            label="Final date"
+            id="finalDate"
+            onChange={onChange}
+          />
+        </Form.Group>
+      </Form>
+    </Content>
+  );
+});