forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
📕 Storybook for everyone (take 2) (elastic#43529)
* chore: 🤖 add Infra sample Storybook story * chore: 🤖 add @kbn/storybook package * chore: 🤖 add sample SIEM stories * chore: 🤖 add Canvas new Storybook config * fix: 🐛 fix TypeScript errors * chore: 🤖 add @kbn/babel-preset to package.json * chore: 🤖 move dependencies to devDependencies * chore: 🤖 make Storybook dependencies non-dev * chore: 🤖 upgrade Storybook dependencies * chore: 🤖 add packages to webpack * fix: 🐛 fix TypeScript type check * chore: 🤖 disable ESLint warnings * chore: 🤖 remove Storybook info plugin * chore: 🤖 upate yarn.lock * chore: 🤖 add Storbook to Embeddables * feat: 🎸 add --clean flag to Storybook CLI * coalesce yarn.lock versions * update kbn/pm dist * This reverts commit 97d8ff9 and 49b07cd. * chore: 🤖 use fs instead of mkdirp * chore: 🤖 use debug for message logging * chore: 🤖 update yarn.lock * feat: 🎸 add link to kbn-storybook package * docs: ✏️ add Storybook readme * chore: 🤖 remove packages that failed DLL build * style: 💄 add ESLint comma * chore: 🤖 apply changes from elastic#52209 * fix: 🐛 make Canvas Storybook build again * chore: 🤖 move Canvas stories to global Storybook * chore: 🤖 move more Canvas components to global Storybook * chore: 🤖 move more Canvas stories to global Storybook * chore: 🤖 move <ItemGrid> and <KeyboardShortcutsDoc> to NP SB * chore: 🤖 move shape picker Canvas stories to global Storybook * chore: 🤖 move Canvas sidebar stories to global Storybook * fix: 🐛 split imports to not import path.resolve in Storybook * chore: 🤖 move tag and PDF panel Canvas stories to global SB * chore: 🤖 move Canvas share website flyout stories to global SB * fix: 🐛 clean up <ShareWebsiteFlyout> imports * chore: 🤖 add back Canvas withInfo decorator * chore: 🤖 look for Canvas stories everywhere in /canvas folder * test: 💍 mock correct files in Storyshots * test: 💍 update Canvas Storyshot snapshots * chore: 🤖 move more Canvas components to global Storybook * chore: 🤖 move more Canvas components to global Storybook * test: 💍 update Canvas Storyshots * chore: 🤖 rebuild @kbn/pm * chore: 🤖 refresh @kbn/pm dist/index.js artifact * chore: 🤖 update yarn.lock * chore: 🤖 update @kbn/pm artifact * feat: 🎸 address review comments * fix: 🐛 remove circular import * chore: 🤖 update yarn.lock * test: 💍 disable a test suite * test: 💍 update Canvas storyshots * chore: 🤖 remvoe build step from @kbn/storybook * chore: 🤖 enable disabled functional test suite Co-authored-by: Spencer <[email protected]> Co-authored-by: Elastic Machine <[email protected]>
- Loading branch information
Showing
140 changed files
with
2,478 additions
and
851 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -18,3 +18,4 @@ | |
| */ | ||
|
|
||
| export { withProcRunner } from './with_proc_runner'; | ||
| export { ProcRunner } from './proc_runner'; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| # Kibana Storybook | ||
|
|
||
| This package provides ability to add [Storybook](https://storybook.js.org/) to any Kibana plugin. | ||
|
|
||
| - [Setup Instructions](#setup-instructions) | ||
|
|
||
|
|
||
| ## Setup Instructions | ||
|
|
||
| 1. Add `storybook.js` launcher file to your plugin. For example, create a file at | ||
| `src/plugins/<plugin>/scripts/storybook.js`, with the following contents: | ||
|
|
||
| ```js | ||
| import { join } from 'path'; | ||
|
|
||
| // eslint-disable-next-line | ||
| require('@kbn/storybook').runStorybookCli({ | ||
| name: '<plugin>', | ||
| storyGlobs: [join(__dirname, '..', 'public', 'components', '**', '*.examples.tsx')], | ||
| }); | ||
| ``` | ||
| 2. Add your plugin alias to `src/dev/storybook/aliases.ts` config. | ||
| 3. Create sample Storybook stories. For example, in your plugin create create a file at | ||
| `src/plugins/<plugin>/public/components/hello_world/__examples__/hello_world.examples.tsx` with | ||
| the following contents: | ||
|
|
||
| ```jsx | ||
| import * as React from 'react'; | ||
| import { storiesOf } from '@storybook/react'; | ||
|
|
||
| storiesOf('Hello world', module).add('default', () => <div>Hello world!</div>); | ||
| ``` | ||
| 4. Launch Storybook with `yarn storybook <plugin>`. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| /* | ||
| * Licensed to Elasticsearch B.V. under one or more contributor | ||
| * license agreements. See the NOTICE file distributed with | ||
| * this work for additional information regarding copyright | ||
| * ownership. Elasticsearch B.V. licenses this file to you under | ||
| * the Apache License, Version 2.0 (the "License"); you may | ||
| * not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, | ||
| * software distributed under the License is distributed on an | ||
| * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | ||
| * KIND, either express or implied. See the License for the | ||
| * specific language governing permissions and limitations | ||
| * under the License. | ||
| */ | ||
|
|
||
| const fs = require('fs'); | ||
| const { join } = require('path'); | ||
| const Rx = require('rxjs'); | ||
| const { first } = require('rxjs/operators'); | ||
| const storybook = require('@storybook/react/standalone'); | ||
| const { run } = require('@kbn/dev-utils'); | ||
| const { generateStorybookEntry } = require('./lib/storybook_entry'); | ||
| const { REPO_ROOT, CURRENT_CONFIG } = require('./lib/constants'); | ||
| const { buildDll } = require('./lib/dll'); | ||
|
|
||
| exports.runStorybookCli = config => { | ||
| const { name, storyGlobs } = config; | ||
| run( | ||
| async ({ flags, log, procRunner }) => { | ||
| log.debug('Global config:\n', require('./lib/constants')); | ||
|
|
||
| const currentConfig = JSON.stringify(config, null, 2); | ||
| const currentConfigDir = join(CURRENT_CONFIG, '..'); | ||
| await fs.promises.mkdir(currentConfigDir, { recursive: true }); | ||
| log.debug('Writing currentConfig:\n', CURRENT_CONFIG + '\n', currentConfig); | ||
| await fs.promises.writeFile(CURRENT_CONFIG, `exports.currentConfig = ${currentConfig};`); | ||
|
|
||
| await buildDll({ | ||
| rebuildDll: flags.rebuildDll, | ||
| log, | ||
| procRunner, | ||
| }); | ||
|
|
||
| // Build sass and continue when initial build complete | ||
| await procRunner.run('watch sass', { | ||
| cmd: process.execPath, | ||
| args: ['scripts/build_sass', '--watch'], | ||
| cwd: REPO_ROOT, | ||
| wait: /scss bundles created/, | ||
| }); | ||
|
|
||
| const subj = new Rx.ReplaySubject(1); | ||
| generateStorybookEntry({ log, storyGlobs }).subscribe(subj); | ||
|
|
||
| await subj.pipe(first()).toPromise(); | ||
|
|
||
| await Promise.all([ | ||
| // route errors | ||
| subj.toPromise(), | ||
|
|
||
| new Promise(() => { | ||
| // storybook never completes, so neither will this promise | ||
| const configDir = join(__dirname, 'storybook_config'); | ||
| log.debug('Config dir:', configDir); | ||
| storybook({ | ||
| mode: 'dev', | ||
| port: 9001, | ||
| configDir, | ||
| }); | ||
| }), | ||
| ]); | ||
| }, | ||
| { | ||
| flags: { | ||
| boolean: ['rebuildDll'], | ||
| }, | ||
| description: ` | ||
| Run the storybook examples for ${name} | ||
| `, | ||
| } | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| /* | ||
| * Licensed to Elasticsearch B.V. under one or more contributor | ||
| * license agreements. See the NOTICE file distributed with | ||
| * this work for additional information regarding copyright | ||
| * ownership. Elasticsearch B.V. licenses this file to you under | ||
| * the Apache License, Version 2.0 (the "License"); you may | ||
| * not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, | ||
| * software distributed under the License is distributed on an | ||
| * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | ||
| * KIND, either express or implied. See the License for the | ||
| * specific language governing permissions and limitations | ||
| * under the License. | ||
| */ | ||
|
|
||
| const { resolve, dirname } = require('path'); | ||
|
|
||
| exports.REPO_ROOT = dirname(require.resolve('../../../package.json')); | ||
| exports.ASSET_DIR = resolve(exports.REPO_ROOT, 'built_assets/storybook'); | ||
| exports.CURRENT_CONFIG = resolve(exports.ASSET_DIR, 'current.config.js'); | ||
| exports.STORY_ENTRY_PATH = resolve(exports.ASSET_DIR, 'stories.entry.js'); | ||
| exports.DLL_DIST_DIR = resolve(exports.ASSET_DIR, 'dll'); | ||
| exports.DLL_NAME = 'storybook_dll'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| /* | ||
| * Licensed to Elasticsearch B.V. under one or more contributor | ||
| * license agreements. See the NOTICE file distributed with | ||
| * this work for additional information regarding copyright | ||
| * ownership. Elasticsearch B.V. licenses this file to you under | ||
| * the Apache License, Version 2.0 (the "License"); you may | ||
| * not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, | ||
| * software distributed under the License is distributed on an | ||
| * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | ||
| * KIND, either express or implied. See the License for the | ||
| * specific language governing permissions and limitations | ||
| * under the License. | ||
| */ | ||
|
|
||
| const { resolve } = require('path'); | ||
| const { existsSync } = require('fs'); | ||
|
|
||
| const { REPO_ROOT, DLL_DIST_DIR } = require('./constants'); | ||
|
|
||
| exports.buildDll = async ({ rebuildDll, log, procRunner }) => { | ||
| if (rebuildDll) { | ||
| log.info('rebuilding dll'); | ||
| } else if (!existsSync(resolve(DLL_DIST_DIR, 'dll.js'))) { | ||
| log.info('dll missing, rebuilding'); | ||
| } else { | ||
| log.info('dll exists'); | ||
| return; | ||
| } | ||
|
|
||
| await procRunner.run('build dll ', { | ||
| cmd: require.resolve('webpack/bin/webpack'), | ||
| args: ['--config', require.resolve('./webpack.dll.config.js')], | ||
| cwd: REPO_ROOT, | ||
| wait: true, | ||
| }); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| /* | ||
| * Licensed to Elasticsearch B.V. under one or more contributor | ||
| * license agreements. See the NOTICE file distributed with | ||
| * this work for additional information regarding copyright | ||
| * ownership. Elasticsearch B.V. licenses this file to you under | ||
| * the Apache License, Version 2.0 (the "License"); you may | ||
| * not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, | ||
| * software distributed under the License is distributed on an | ||
| * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | ||
| * KIND, either express or implied. See the License for the | ||
| * specific language governing permissions and limitations | ||
| * under the License. | ||
| */ | ||
|
|
||
| const { resolve, relative, dirname } = require('path'); | ||
| const Fs = require('fs'); | ||
| const Rx = require('rxjs'); | ||
| const { mergeMap, map, debounceTime } = require('rxjs/operators'); | ||
| const normalize = require('normalize-path'); | ||
| const { promisify } = require('util'); | ||
|
|
||
| const watch = require('glob-watcher'); | ||
| const mkdirp = require('mkdirp'); // eslint-disable-line | ||
| const glob = require('fast-glob'); | ||
|
|
||
| const mkdirpAsync = promisify(mkdirp); | ||
| const writeFileAsync = promisify(Fs.writeFile); | ||
|
|
||
| const { REPO_ROOT, STORY_ENTRY_PATH } = require('./constants'); | ||
| const STORE_ENTRY_DIR = dirname(STORY_ENTRY_PATH); | ||
|
|
||
| exports.generateStorybookEntry = ({ log, storyGlobs }) => { | ||
| const globs = ['built_assets/css/**/*.light.css', ...storyGlobs]; | ||
| log.info('Storybook globs:\n', globs); | ||
| const norm = p => normalize(relative(STORE_ENTRY_DIR, p)); | ||
|
|
||
| return Rx.defer(() => | ||
| glob(globs, { | ||
| absolute: true, | ||
| cwd: REPO_ROOT, | ||
| onlyFiles: true, | ||
| }) | ||
| ).pipe( | ||
| map(paths => { | ||
| log.info('Discovered Storybook entry points:\n', paths); | ||
| return new Set(paths.map(norm)); | ||
| }), | ||
| mergeMap( | ||
| paths => | ||
| new Rx.Observable(observer => { | ||
| observer.next(paths); | ||
|
|
||
| const chokidar = watch(globs, { cwd: REPO_ROOT }) | ||
| .on('add', path => { | ||
| observer.next(paths.add(norm(resolve(REPO_ROOT, path)))); | ||
| }) | ||
| .on('unlink', path => { | ||
| observer.next(paths.delete(norm(resolve(REPO_ROOT, path)))); | ||
| }); | ||
|
|
||
| return () => { | ||
| chokidar.close(); | ||
| }; | ||
| }) | ||
| ), | ||
| debounceTime(200), | ||
| mergeMap(async (paths, i) => { | ||
| await mkdirpAsync(STORE_ENTRY_DIR); | ||
|
|
||
| let content = ''; | ||
| for (const path of paths) { | ||
| content += `require('${path}');\n`; | ||
| } | ||
|
|
||
| await writeFileAsync(STORY_ENTRY_PATH, content); | ||
|
|
||
| if (i === 0) { | ||
| log.info('%d paths written to entry file', paths.size); | ||
| } else { | ||
| log.info('entry file updated'); | ||
| } | ||
| }) | ||
| ); | ||
| }; |
Oops, something went wrong.