@wix/design-system/dist/esm/TimeTable/docs/index.story.js

@wix/design-system

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/TimeTable/docs/index.story.jsx";
import React from 'react';
import { header, tabs, tab, description, importExample, title, divider, code, example, playground, api, testkit, columns } from '@wix/wix-storybook-utils/Sections';
import cloneDeep from 'lodash/cloneDeep';
import { storySettings } from '../test/storySettings';
import TimeTableHeaderExample from './examples/header';
import structureExample from '!raw-loader!./examples/structure';
import disabledExample from '!raw-loader!./examples/disabled';
import customContentExample from '!raw-loader!./examples/customContent';
import multipleActions from '!raw-loader!./examples/multipleActions';
import TimeTable from '..';
import Box from '../../Box';
import { defaultColumns } from './playgroundData';
export default {
  category: storySettings.category,
  storyName: 'TimeTable',
  component: TimeTable,
  componentPath: '..',
  componentProps: function componentProps(setState, getState) {
    return {
      dataHook: storySettings.dataHook,
      addItemButtonLabel: 'Add',
      columns: defaultColumns,
      insertPosition: 'any',
      onChange: function onChange(newColumns) {
        return setState({
          columns: newColumns
        });
      },
      onAdd: function onAdd(columnIndex) {
        var newColumns = cloneDeep(getState().columns);
        newColumns[columnIndex].items.push({
          content: 'New Item'
        });
        setState({
          columns: newColumns
        });
      }
    };
  },
  exampleProps: {
    columns: [{
      label: '4 days',
      value: defaultColumns
    }],
    onChange: function onChange(cols, details) {
      return "I was called with (".concat(cols, ",").concat(details, ")");
    },
    onAdd: function onAdd(columnIndex) {
      return "I was called with ".concat(columnIndex);
    }
  },
  sections: [header({
    component: /*#__PURE__*/React.createElement(Box, {
      width: "60%",
      minWidth: "500px",
      height: "130px",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 60,
        columnNumber: 9
      }
    }, /*#__PURE__*/React.createElement(TimeTableHeaderExample, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 61,
        columnNumber: 11
      }
    }))
  }), tabs([tab({
    title: 'Description',
    sections: [columns([description({
      title: 'Description',
      text: 'TimeTable allows site owner to group and manage items. Items can be sorted and regrouped using drag and drop feature. It can be used to review scheduled tasks or events.'
    })]), importExample("import { TimeTable } from '@wix/design-system';"), divider(), title('Examples'), example({
      title: 'Structure',
      description: 'Each group has a title and subtitle, it can be set to `active`. Items can be used with plain text or node. "Add Item" button can be renamed or removed.',
      source: structureExample
    }), example({
      title: 'Multiple actions',
      description: 'Multiple column actions, for each column individually',
      source: multipleActions
    }), example({
      title: 'Disabled',
      description: "Groups and items can be disabled indepentendly. New items cannot be added to disabled groups. Active items placed in a disabled group can be dragged out, but cannot be put back. It's allowed to set `draggable` on disabled item.",
      source: disabledExample
    }), code({
      autoRender: false,
      title: 'Custom Content',
      description: "Item's content can render any content with complex logic. Example below demonstrates how it can be used with a `<Popover/>` or `<Badge/>`.",
      source: customContentExample,
      compact: true
    })]
  })].concat(_toConsumableArray([{
    title: 'API',
    sections: [api()]
  }, {
    title: 'Testkit',
    sections: [testkit()]
  }, {
    title: 'Playground',
    sections: [playground()]
  }].map(tab))))]
};