-
-
Notifications
You must be signed in to change notification settings - Fork 159
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: config location is now flexible and paths relative from main.js (…
…#278) - you can now specify a config location and you can change the folder name #278 - note that this folder should still contain all the same files - `—absolute` option will use absolute imports in the requires.js file - paths in general should work better with the watcher and get stories script - In main.js stories are relative from the config directory and no longer add "../", this should fix absolute paths and other bugs #278 - `sbn-get-stories` and `sbn-watcher` are now `sb-rn-get-stories` and `sb-rn-watcher`
- Loading branch information
Showing
27 changed files
with
468 additions
and
135 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
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,3 @@ | ||
| module.exports = { | ||
| presets: ['module:metro-react-native-babel-preset'], | ||
| }; |
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
83 changes: 83 additions & 0 deletions
83
app/react-native/scripts/__snapshots__/loader.test.js.snap
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,83 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`loader writeRequires when there is a story glob writes the story imports 1`] = ` | ||
| " | ||
| /* do not change this file, it is auto generated by storybook. */ | ||
| import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native'; | ||
| import \\"@storybook/addon-ondevice-notes/register\\"; | ||
| import \\"@storybook/addon-ondevice-controls/register\\"; | ||
| import \\"@storybook/addon-ondevice-backgrounds/register\\"; | ||
| import \\"@storybook/addon-ondevice-actions/register\\"; | ||
| import { argsEnhancers } from \\"@storybook/addon-actions/dist/modern/preset/addArgs\\" | ||
| import { decorators, parameters } from './preview'; | ||
| if (decorators) { | ||
| decorators.forEach((decorator) => addDecorator(decorator)); | ||
| } | ||
| if (parameters) { | ||
| addParameters(parameters); | ||
| } | ||
| argsEnhancers.forEach(enhancer => addArgsEnhancer(enhancer)) | ||
| const getStories=() => { | ||
| return [require(\\"./FakeStory.stories.tsx\\")]; | ||
| } | ||
| configure(getStories, module, false) | ||
| " | ||
| `; | ||
|
|
||
| exports[`loader writeRequires when there is no preview does not add preview related stuff 1`] = ` | ||
| " | ||
| /* do not change this file, it is auto generated by storybook. */ | ||
| import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native'; | ||
| import \\"@storybook/addon-ondevice-notes/register\\"; | ||
| import \\"@storybook/addon-ondevice-controls/register\\"; | ||
| import \\"@storybook/addon-ondevice-backgrounds/register\\"; | ||
| import \\"@storybook/addon-ondevice-actions/register\\"; | ||
| import { argsEnhancers } from \\"@storybook/addon-actions/dist/modern/preset/addArgs\\" | ||
| argsEnhancers.forEach(enhancer => addArgsEnhancer(enhancer)) | ||
| const getStories=() => { | ||
| return [require(\\"./FakeStory.stories.tsx\\")]; | ||
| } | ||
| configure(getStories, module, false) | ||
| " | ||
| `; | ||
|
|
||
| exports[`loader writeRequires when there is no story glob or addons writes no story imports or addons 1`] = ` | ||
| " | ||
| /* do not change this file, it is auto generated by storybook. */ | ||
| import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native'; | ||
| const getStories=() => { | ||
| return []; | ||
| } | ||
| configure(getStories, module, false) | ||
| " | ||
| `; |
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 |
|---|---|---|
| @@ -1,3 +1,5 @@ | ||
| const { writeRequires } = require('./loader'); | ||
| const { getArguments } = require('./handle-args'); | ||
| const args = getArguments(); | ||
|
|
||
| writeRequires(); | ||
| writeRequires(args); |
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,18 @@ | ||
| function getArguments() { | ||
| const { program } = require('commander'); | ||
|
|
||
| program | ||
| .description('Getter and watcher for react native storybook') | ||
| .option( | ||
| '-c, --config-path <path>', | ||
| 'The path to your config folder relative to your project-dir', | ||
| './.storybook' | ||
| ) | ||
| .option('-a, --absolute', 'Use absolute paths for story imports'); | ||
|
|
||
| program.parse(); | ||
|
|
||
| return program.opts(); | ||
| } | ||
|
|
||
| module.exports = { getArguments }; |
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 |
|---|---|---|
| @@ -1,107 +1,96 @@ | ||
| const path = require('path'); | ||
| const fs = require('fs'); | ||
| const glob = require('glob'); | ||
| const storybookRequiresLocation = '/.storybook/storybook.requires.js'; | ||
| const prettier = require('prettier'); | ||
|
|
||
| const cwd = process.cwd(); | ||
|
|
||
| const previewImports = ` | ||
| import { decorators, parameters } from './preview'; | ||
| if (decorators) { | ||
| decorators.forEach((decorator) => addDecorator(decorator)); | ||
| } | ||
| if (parameters) { | ||
| addParameters(parameters); | ||
| } | ||
| `; | ||
|
|
||
| function requireUncached(module) { | ||
| delete require.cache[require.resolve(module)]; | ||
| return require(module); | ||
| } | ||
|
|
||
| function getMainPath() { | ||
| const cwd = process.cwd(); | ||
| return path.join(cwd, '.storybook/main.js'); | ||
| function getMain({ configPath }) { | ||
| const mainPath = path.resolve(cwd, configPath, 'main.js'); | ||
| return requireUncached(mainPath); | ||
| } | ||
|
|
||
| function getPreviewPath() { | ||
| const cwd = process.cwd(); | ||
| return path.join(cwd, '.storybook/preview.js'); | ||
| } | ||
|
|
||
| function getPreviewExists() { | ||
| return fs.existsSync(getPreviewPath()); | ||
| } | ||
|
|
||
| function getGlobs() { | ||
| // we need to invalidate the cache because otherwise the latest changes don't get loaded | ||
| const { stories: storyGlobs } = requireUncached(getMainPath()); | ||
|
|
||
| return storyGlobs; | ||
| function getPreviewExists({ configPath }) { | ||
| const previewPath = path.resolve(cwd, configPath, 'preview.js'); | ||
| return fs.existsSync(previewPath); | ||
| } | ||
|
|
||
| function getAddons() { | ||
| const { addons } = requireUncached(getMainPath()); | ||
| function writeRequires({ configPath, absolute = false }) { | ||
| const storybookRequiresLocation = path.resolve(cwd, configPath, 'storybook.requires.js'); | ||
|
|
||
| return addons; | ||
| } | ||
|
|
||
| function getPaths() { | ||
| return getGlobs().reduce((acc, storyGlob) => { | ||
| const paths = glob.sync(storyGlob); | ||
| return [...acc, ...paths.map((storyPath) => `../${storyPath}`)]; | ||
| const main = getMain({ configPath }); | ||
| const storyPaths = main.stories.reduce((acc, storyGlob) => { | ||
| const paths = glob.sync(storyGlob, { cwd: path.resolve(cwd, configPath), absolute }); | ||
| return [...acc, ...paths]; | ||
| }, []); | ||
| } | ||
|
|
||
| function writeRequires() { | ||
| const cwd = process.cwd(); | ||
| fs.writeFileSync(storybookRequiresLocation, ''); | ||
|
|
||
| const storyPaths = getPaths(); | ||
| const addons = getAddons(); | ||
| const previewExists = getPreviewExists({ configPath }); | ||
|
|
||
| fs.writeFileSync(path.join(cwd, storybookRequiresLocation), ''); | ||
|
|
||
| const previewExists = getPreviewExists(); | ||
| let previewJs = previewExists | ||
| ? ` | ||
| import { decorators, parameters } from './preview'; | ||
| if (decorators) { | ||
| decorators.forEach((decorator) => addDecorator(decorator)); | ||
| } | ||
| if (parameters) { | ||
| addParameters(parameters); | ||
| }` | ||
| : ''; | ||
| let previewJs = previewExists ? previewImports : ''; | ||
|
|
||
| const storyRequires = storyPaths.map((storyPath) => `\t\trequire("${storyPath}")`).join(', \n'); | ||
| const path_array_str = `[\n${storyRequires}\n\t]`; | ||
| const storyRequires = storyPaths.map((storyPath) => `require("${storyPath}")`).join(','); | ||
| const path_array_str = `[${storyRequires}]`; | ||
|
|
||
| const registerAddons = addons.map((addon) => `import "${addon}/register";`).join('\n'); | ||
| const registerAddons = main.addons.map((addon) => `import "${addon}/register";`).join('\n'); | ||
| let enhancersImport = ''; | ||
| let enhancers = ''; | ||
|
|
||
| // TODO: implement presets or something similar | ||
| if (addons.includes('@storybook/addon-ondevice-actions')) { | ||
| enhancers = `import { argsEnhancers } from '@storybook/addon-actions/dist/modern/preset/addArgs'; | ||
| argsEnhancers.forEach(enhancer => addArgsEnhancer(enhancer))`; | ||
| if (main.addons.includes('@storybook/addon-ondevice-actions')) { | ||
| enhancersImport = | ||
| 'import { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addArgs"'; | ||
| enhancers = 'argsEnhancers.forEach(enhancer => addArgsEnhancer(enhancer))'; | ||
| } | ||
|
|
||
| const fileContent = ` | ||
| /* | ||
| do not change this file, it is auto generated by storybook. | ||
| */ | ||
| import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native'; | ||
| ${registerAddons} | ||
| /* do not change this file, it is auto generated by storybook. */ | ||
| ${enhancers} | ||
| import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native'; | ||
| ${previewJs} | ||
| ${registerAddons} | ||
| const getStories=() => { | ||
| return ${path_array_str}; | ||
| } | ||
| configure(getStories, module, false) | ||
| ${enhancersImport} | ||
| ${previewJs} | ||
| ${enhancers} | ||
| const getStories=() => { | ||
| return ${path_array_str}; | ||
| } | ||
| configure(getStories, module, false) | ||
| `; | ||
|
|
||
| fs.writeFileSync(path.join(cwd, storybookRequiresLocation), fileContent, { | ||
| const formattedFileContent = prettier.format(fileContent, { parser: 'babel' }); | ||
|
|
||
| fs.writeFileSync(storybookRequiresLocation, formattedFileContent, { | ||
| encoding: 'utf8', | ||
| flag: 'w', | ||
| }); | ||
| } | ||
|
|
||
| module.exports = { | ||
| writeRequires, | ||
| getGlobs, | ||
| getMainPath, | ||
| getMain, | ||
| getPreviewExists, | ||
| getPreviewPath, | ||
| }; |
Oops, something went wrong.