Skip to content

Commit 8cfaf61

Browse files
benlohbenloh
committed
config-ip-filter: Add Storybook.
1 parent 5d1eed9 commit 8cfaf61

File tree

9 files changed

+20949
-5691
lines changed

9 files changed

+20949
-5691
lines changed

‎build/.storybook/main.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const path = require("path");
2+
3+
module.exports = {
4+
"stories": [
5+
"../app/**/*.stories.js"
6+
],
7+
"addons": [
8+
"@storybook/addon-links",
9+
"@storybook/addon-essentials"
10+
],
11+
"webpackFinal": (config) => {
12+
config.resolve.modules.push(
13+
path.resolve(__dirname, '../app/')
14+
);
15+
return config;
16+
}
17+
}

‎build/.storybook/preview.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
export const parameters = {
3+
actions: { argTypesRegex: "^on[A-Z].*" },
4+
}

‎build/app/view/netcreate/components/filter/FilterGroup.stories.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import FilterGroup from './FilterGroup';
2+
import React from 'react';
3+
import { action } from '@storybook/addon-actions';
4+
5+
6+
export default {
7+
component: FilterGroup,
8+
title: 'FilterGroup',
9+
// Our exports that end in "Data" are not stories.
10+
excludeStories: /.*Data$/,
11+
};
12+
13+
export const defaultFiltersData = [
14+
{
15+
id: '1',
16+
type: 'string',
17+
key: 'label',
18+
keylabel: 'Label',
19+
operator: 'contains',
20+
value: 'tacitus'
21+
},
22+
{
23+
id: '2',
24+
type: 'select',
25+
key: 'type',
26+
keylabel: 'Type',
27+
operator: 'contains',
28+
value: 'person',
29+
options: [
30+
'abc', 'def', 'ghi'
31+
]
32+
},
33+
{
34+
id: '3',
35+
type: 'number',
36+
key: 'notes',
37+
keylabel: 'Significance',
38+
operator: 'contains',
39+
value: 'xxx'
40+
}
41+
]
42+
43+
export const actionsData = {
44+
onFiltersChange: action('filtersChanged')
45+
};
46+
47+
export const Default = () => <FilterGroup filters={defaultFiltersData} {...actionsData} />;
48+
// export const NoValue = () => <FilterGroup filter={{ id: filterData.id, name: filterData.name }} {...actionsData} />;
49+
// export const Changed = () => <FilterGroup filter={{ ...filterData, state: 'CHANGED' }} {...actionsData} />;
50+

‎build/app/view/netcreate/components/filter/FiltersPanel.stories.js‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import FiltersPanel from './FiltersPanel';
2+
import React from 'react';
3+
import { action } from '@storybook/addon-actions';
4+
5+
6+
export default {
7+
component: FiltersPanel,
8+
title: 'FiltersPanel',
9+
// Our exports that end in "Data" are not stories.
10+
excludeStories: /.*Data$/,
11+
};
12+
13+
export const fdata = {
14+
nodes: {
15+
group: "nodes",
16+
label: "Nodes",
17+
filters: [
18+
{
19+
id: '1',
20+
type: 'string',
21+
key: 'label',
22+
keylabel: 'Label',
23+
operator: 'contains',
24+
value: 'tacitus'
25+
},
26+
{
27+
id: '2',
28+
type: 'select',
29+
key: 'type',
30+
keylabel: 'Type',
31+
operator: 'contains',
32+
value: 'person',
33+
options: [
34+
'abc', 'def', 'ghi'
35+
]
36+
},
37+
{
38+
id: '3',
39+
type: 'number',
40+
key: 'notes',
41+
keylabel: 'Significance',
42+
operator: 'contains',
43+
value: 'xxx'
44+
}
45+
]
46+
},
47+
edges: {
48+
group: "edges",
49+
label: "Edges",
50+
filters: [
51+
{
52+
id: '1',
53+
type: 'string',
54+
key: 'label',
55+
keylabel: 'Label',
56+
operator: 'contains',
57+
value: 'tacitus'
58+
},
59+
{
60+
id: '2',
61+
type: 'select',
62+
key: 'type',
63+
keylabel: 'Type',
64+
operator: 'contains',
65+
value: 'person',
66+
options: [
67+
'abc', 'def', 'ghi'
68+
]
69+
},
70+
{
71+
id: '3',
72+
type: 'number',
73+
key: 'notes',
74+
keylabel: 'Significance',
75+
operator: 'contains',
76+
value: 'xxx'
77+
}
78+
79+
]
80+
}
81+
}
82+
83+
export const actionsData = {
84+
onFiltersChange: action('filtersChanged')
85+
};
86+
87+
export const Default = () => <FiltersPanel filterGroups={fdata} {...actionsData} />;
88+
// export const NoValue = () => <FilterGroup filter={{ id: filterData.id, name: filterData.name }} {...actionsData} />;
89+
// export const Changed = () => <FilterGroup filter={{ ...filterData, state: 'CHANGED' }} {...actionsData} />;
90+

‎build/app/view/netcreate/components/filter/NumberFilter.stories.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import NumberFilter from './NumberFilter';
3+
import { action } from '@storybook/addon-actions';
4+
import FILTER from './FilterEnums';
5+
6+
export default {
7+
component: NumberFilter,
8+
title: 'NumberFilter',
9+
// Our exports that end in "Data" are not stories.
10+
excludeStories: /.*Data$/,
11+
};
12+
13+
export const filterData = {
14+
id: '1',
15+
type: 'number',
16+
key: 'degrees',
17+
keylabel: 'Degrees',
18+
operator: FILTER.OPERATORS.NUMBER.GT,
19+
value: 2
20+
};
21+
22+
export const actionsData = {
23+
onChangeHandler: action('filterChanged') // onChangeHandler: this key needs match the key passed to NumberFilter
24+
// action('filterChanged') is just a redux action label
25+
};
26+
27+
export const Default = () => <NumberFilter filter={{ ...filterData }} {...actionsData} />;

‎build/app/view/netcreate/components/filter/SelectFilter.stories.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
import SelectFilter from './SelectFilter';
3+
import { action } from '@storybook/addon-actions';
4+
import FILTER from './FilterEnums';
5+
6+
export default {
7+
component: SelectFilter,
8+
title: 'SelectFilter',
9+
// Our exports that end in "Data" are not stories.
10+
excludeStories: /.*Data$/,
11+
};
12+
13+
export const filterData = {
14+
id: '1',
15+
type: 'number',
16+
key: 'degrees',
17+
keylabel: 'Degrees',
18+
operator: FILTER.OPERATORS.NUMBER.GT,
19+
value: 2,
20+
options: [
21+
"Person","Group","Place","Thing","Event"
22+
]
23+
};
24+
25+
export const actionsData = {
26+
onChangeHandler: action('filterChanged') // onChangeHandler: this key needs match the key passed to SelectFilter
27+
// action('filterChanged') is just a redux action label
28+
};
29+
30+
export const Default = () => <SelectFilter filter={{ ...filterData }} {...actionsData} />;

‎build/app/view/netcreate/components/filter/StringFilter.stories.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react';
2+
import StringFilter from './StringFilter';
3+
import { action } from '@storybook/addon-actions';
4+
5+
export default {
6+
component: StringFilter,
7+
title: 'StringFilter',
8+
// Our exports that end in "Data" are not stories.
9+
excludeStories: /.*Data$/,
10+
};
11+
12+
export const filterData = {
13+
id: '1',
14+
type: 'string',
15+
key: 'label',
16+
keylabel: 'Label',
17+
operator: 'contains',
18+
value: 'tacitus'
19+
};
20+
21+
export const actionsData = {
22+
onChangeHandler: action('filterChanged') // onChangeHandler: this key needs match the key passed to StringFilter
23+
// action('filterChanged') is just a redux action label
24+
};
25+
26+
// commented out for now, results in "unexpected token error" by brunch
27+
export const Default = () => <StringFilter filter={{ ...filterData }} {...actionsData} />;
28+
// export const NoValue = () => <StringFilter filter={{ id: filterData.id, name: filterData.name }} {...actionsData} />;
29+
// export const Changed = () => <StringFilter filter={{ ...filterData, state: 'CHANGED' }} {...actionsData} />;
30+
31+
// export const Archived = () => (
32+
// <StringFilter task={{ ...taskData, state: 'TASK_ARCHIVED' }} {...actionsData} />
33+
// );

0 commit comments

Comments
 (0)