1 | import { storiesOf } from '@storybook/vue';
|
2 | import camelCase from 'lodash/camelCase';
|
3 | import upperFirst from 'lodash/upperFirst';
|
4 | import { configureReadme } from 'storybook-readme';
|
5 |
|
6 | import 'url-search-params-polyfill';
|
7 |
|
8 | import { GlExampleExplorer, GlComponentDocumentation } from '../documentation';
|
9 |
|
10 | import { componentValidator as isValidComponent } from './all_components';
|
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 | function getComponentName() {
|
37 | const urlParams = new URLSearchParams(window.location.search);
|
38 |
|
39 | const storySlug = urlParams.get('id').split('--')[0];
|
40 | const splitSlug = storySlug.split('-');
|
41 |
|
42 | let componentName;
|
43 |
|
44 | do {
|
45 | splitSlug.shift();
|
46 | componentName = `Gl${upperFirst(camelCase(splitSlug.join('-')))}`;
|
47 | } while (splitSlug.length > 0 && !isValidComponent(componentName));
|
48 |
|
49 | if (!isValidComponent(componentName)) {
|
50 | throw new Error('Could not find a matching component');
|
51 | }
|
52 |
|
53 | return componentName;
|
54 | }
|
55 |
|
56 | export const setupStorybookReadme = () =>
|
57 | configureReadme({
|
58 | StoryPreview: {
|
59 | disableForComponents: ['GlAlert', 'GlSprintf', 'GlLink'],
|
60 | components: {
|
61 | GlComponentDocumentation,
|
62 | GlExampleExplorer,
|
63 | },
|
64 | data() {
|
65 | return {
|
66 | componentName: null,
|
67 | error: '',
|
68 |
|
69 |
|
70 | styles: {
|
71 | padding: '50px 35px',
|
72 | margin: '16px 0',
|
73 | border: '1px dashed rgb(229, 229, 229)',
|
74 | },
|
75 | };
|
76 | },
|
77 |
|
78 |
|
79 |
|
80 | created() {
|
81 | try {
|
82 | this.componentName = getComponentName();
|
83 | this.error = '';
|
84 | } catch (error) {
|
85 | this.componentName = false;
|
86 | this.error = error.message;
|
87 | }
|
88 | },
|
89 | template: `
|
90 | <div>
|
91 | <slot v-if="$options.disableForComponents.includes(componentName)" />
|
92 | <template v-else>
|
93 | <div class="story-container" v-bind:style="styles"><slot></slot></div>
|
94 | {{ error }}
|
95 | <template v-if="componentName">
|
96 | <gl-example-explorer :componentName="componentName" />
|
97 | <gl-component-documentation :componentName="componentName" />
|
98 | </template>
|
99 | </template>
|
100 | </div>`,
|
101 | },
|
102 | });
|
103 |
|
104 | export const documentedStoriesOf = (name, readme) => {
|
105 | const story = storiesOf(name, module);
|
106 | if (process.env.NODE_ENV !== 'test') {
|
107 | story.addParameters({
|
108 | readme: {
|
109 | content: readme,
|
110 | },
|
111 | });
|
112 | }
|
113 | return story;
|
114 | };
|