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', }, ]} /> ));