wix-style-react/dist/es/stories/DataTable/index.js

wix-style-react

import React from 'react';
import { storiesOf } from '@storybook/react';
import Markdown from 'wix-storybook-utils/Markdown';
import CodeExample from 'wix-storybook-utils/CodeExample';
import TabbedView from 'wix-storybook-utils/TabbedView';

import Readme from '../../src/DataTable/README.md';
import ReadmeTestKit from '../../src/DataTable/README.TESTKIT.md';

import Example from './Example';
import ExampleRaw from '!raw-loader!./Example';

import ExampleCallingServer from './ExampleCallingServer';
import ExampleCallingServerRaw from '!raw-loader!./ExampleCallingServer';

import ExampleWithoutHeader from './ExampleWithoutHeader';
import ExampleWithoutHeaderRaw from '!raw-loader!./ExampleWithoutHeader';

import ExampleWithAnimatedRowDetails from './ExampleWithAnimatedRowDetails';
import ExampleWithAnimatedRowDetailsRaw from '!raw-loader!./ExampleWithAnimatedRowDetails';

import ExampleSortable from './ExampleSortable';
import ExampleSortableRaw from '!raw-loader!./ExampleSortable';

import ExampleSortableOldDesign from './ExampleSortableOldDesign';
import ExampleSortableOldDesignRaw from '!raw-loader!./ExampleSortableOldDesign';

storiesOf('10. Tables', module).add('10.1 DataTable (Legacy)', function () {
  return React.createElement(
    TabbedView,
    { tabs: ['API', 'TestKits'] },
    React.createElement(
      'div',
      null,
      React.createElement(Markdown, { source: Readme }),
      React.createElement(
        'h1',
        null,
        'Usage examples'
      ),
      React.createElement(
        'h2',
        null,
        'IMPORTANT NOTE - New Design!!!'
      ),
      React.createElement(
        'p',
        { style: { fontSize: 24 } },
        'These examples are using a prop `newDesign=true` which applies new css rules from updates UX specs.',
        React.createElement('br', null),
        'These rules include layout changes that could potentialy break design.',
        ' ',
        React.createElement('br', null),
        React.createElement(
          'span',
          { style: { fontWeight: 'bold' } },
          'Please enable this flag so you can adapt to the changes before the breaking version is released'
        ),
        '.'
      ),
      React.createElement(
        CodeExample,
        { title: 'With infinite scroll', code: ExampleRaw },
        React.createElement(Example, null)
      ),
      React.createElement(
        CodeExample,
        {
          title: 'With animated row details',
          code: ExampleWithAnimatedRowDetailsRaw
        },
        React.createElement(ExampleWithAnimatedRowDetails, null)
      ),
      React.createElement(
        CodeExample,
        {
          title: 'Within a dynamic width container (80%)',
          code: ExampleSortableRaw
        },
        React.createElement(ExampleSortable, {
          style: { width: '80%' },
          dataHook: 'storybook-responsive-width'
        })
      ),
      React.createElement(
        CodeExample,
        {
          title: 'With sorting & info tooltip',
          code: ExampleSortableRaw
        },
        React.createElement(ExampleSortable, null)
      ),
      React.createElement(
        CodeExample,
        {
          title: 'With sorting - old design',
          code: ExampleSortableOldDesignRaw
        },
        React.createElement(ExampleSortableOldDesign, null)
      ),
      React.createElement(
        CodeExample,
        { title: 'Without header', code: ExampleWithoutHeaderRaw },
        React.createElement(ExampleWithoutHeader, null)
      ),
      React.createElement(
        CodeExample,
        {
          title: 'With server calling (up to 100 items)',
          code: ExampleCallingServerRaw
        },
        React.createElement(ExampleCallingServer, null)
      )
    ),
    React.createElement(Markdown, { source: ReadmeTestKit })
  );
});