1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import React from 'react';
import { storiesOf } from '@storybook/react';
import App from '../App';
import data from '../data';

const newData = data.map(item => ({ ...item, enabled: false }));

storiesOf('Components', module).add('structure-files', () => <App />);

storiesOf('Search input', module)
  .add('search by all', () => <App searchType="all" />)
  .add('search by start with', () => <App searchType="startWith" />)
  .add('search by start exact', () => <App searchType="exact" />);
storiesOf('Choice files and folders', module)
  .add('no multiple choice', () => <App choiceMultiple={false} />)
  .add('multiple choice', () => <App />)
  .add('forbidden choice', () => <App structure={newData} />);
storiesOf('Icons', module)
  .add('different colors', () => (
    <App
      icons={[
        {
          ext: 'csv',
          color: 'green',
        },
        {
          ext: '',
          color: 'blue',
        },
        {
          name: 'folder',
          color: 'brown',
        },
        {
          name: 'folderOpen',
          color: 'red',
        },
      ]}
    />
  ))
  .add('different icons', () => (
    <App
      icons={[
        {
          ext: 'png',
          iconName: 'file-code',
        },
        {
          ext: '',
          iconName: 'file-alt',
        },
        {
          ext: 'csv',
          iconName: 'file-excel',
        },
        {
          name: 'folder',
          iconName: 'folder-open',
        },
      ]}
    />
  ))
  .add('different sizes', () => (
    <App
      icons={[
        {
          ext: 'png',
          size: '2x',
        },
        {
          ext: '',
          size: 'sm',
        },
        {
          ext: 'csv',
          size: '3x',
        },
        {
          name: 'folder',
          size: '3x',
        },
        {
          name: 'folderOpen',
          size: 'lg',
        },
      ]}
    />
  ));