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