You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: x-pack/plugins/canvas/CONTRIBUTING.md
+35-5Lines changed: 35 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -70,11 +70,7 @@ These singletons can then be changed at will, as well as audited for unused meth
70
70
71
71
Canvas uses Redux. Component code is divided into React components and Redux containers. This way, components can be reused, their containers can be edited, and both can be tested independently.
72
72
73
-
Canvas has an "index-export" structure that has served it well, until recently. In this structure, the `index.ts` file serves as the primary export of the Redux component, (and holds that code). The component is then named-- `component.tsx`-- and consumed in the `index` file.
74
-
75
-
The problem we've run into is when you have sub-components which are also connected to Redux. To maintain this structure, each sub-component and its Redux container would then be stored in a subdirectory, (with only two files in it).
76
-
77
-
Therefore, we are migrating to a different structure which uses the `index.ts` file as a thin exporting index, rather than functional code:
73
+
Canvas is actively migrating to a structure which uses the `index.ts` file as a thin exporting index, rather than functional code:
78
74
79
75
```
80
76
- components
@@ -99,6 +95,14 @@ export { Foo } from './foo';
99
95
export { Foo as FooComponent } from './foo.component';
100
96
```
101
97
98
+
### Why?
99
+
100
+
Canvas has been using an "index-export" structure that has served it well, until recently. In this structure, the `index.ts` file serves as the primary export of the Redux component, (and holds that code). The component is then named-- `component.tsx`-- and consumed in the `index` file.
101
+
102
+
The problem we've run into is when you have sub-components which are also connected to Redux. To maintain this structure, each sub-component and its Redux container would then be stored in a subdirectory, (with only two files in it).
103
+
104
+
> NOTE: if a PR touches component code that is in the older structure, it should be migrated to the structure above.
105
+
102
106
## Storybook
103
107
104
108
Canvas uses [Storybook](https://storybook.js.org) to test and develop components. This has a number of benefits:
@@ -107,3 +111,29 @@ Canvas uses [Storybook](https://storybook.js.org) to test and develop components
107
111
- Testing components interactively without starting ES + Kibana.
108
112
- Automatic Storyshot integration with Jest
109
113
114
+
### Using Storybook
115
+
116
+
The Canvas Storybook instance can be started by running `node scripts/storybook` from the Canvas root directory. It has a number of options:
117
+
118
+
```
119
+
node scripts/storybook
120
+
121
+
Storybook runner for Canvas.
122
+
123
+
Options:
124
+
--clean Forces a clean of the Storybook DLL and exits.
125
+
--dll Cleans and builds the Storybook dependency DLL and exits.
126
+
--stats Produces a Webpack stats file.
127
+
--site Produces a site deployment of this Storybook.
128
+
--verbose, -v Log verbosely
129
+
--debug Log debug messages (less than verbose)
130
+
--quiet Only log errors
131
+
--silent Don't log anything
132
+
--help Show this message
133
+
```
134
+
135
+
### What about `kbn-storybook`?
136
+
137
+
Canvas wants to move to the Kibana Storybook instance as soon as feasible. There are few tweaks Canvas makes to Storybook, so we're actively working with the maintainers to make that migration successful.
138
+
139
+
In the meantime, people can test our progress by running `node scripts/storybook_new` from the Canvas root.
0 commit comments