diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index 3e8f7f3..0000000 --- a/package-lock.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "name": "react-native-template-storybook", - "version": "0.2.0", - "lockfileVersion": 2, - "requires": true, - "packages": { - "": { - "name": "react-native-template-storybook", - "version": "0.2.0", - "license": "MIT" - } - } -} diff --git a/package.json b/package.json index 04b4e46..3b53a16 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-template-storybook", - "version": "0.2.0", + "version": "0.3.0-1", "description": "React Native template for a quick start with storybook.", "scripts": { "test": "exit 0" diff --git a/template/_ondevice/Storybook.tsx b/template/_ondevice/Storybook.tsx index 2b7f376..4a5c257 100644 --- a/template/_ondevice/Storybook.tsx +++ b/template/_ondevice/Storybook.tsx @@ -1,4 +1,5 @@ -import { getStorybookUI } from '@storybook/react-native'; -import './storybook.requires'; +import { getStorybookUI } from "@storybook/react-native"; +import "./doctools"; +import "./storybook.requires"; const StorybookUIRoot = getStorybookUI({}); export default StorybookUIRoot; diff --git a/template/_ondevice/doctools.js b/template/_ondevice/doctools.js new file mode 100644 index 0000000..d116605 --- /dev/null +++ b/template/_ondevice/doctools.js @@ -0,0 +1,10 @@ +import { extractArgTypes } from "@storybook/react/dist/modern/client/docs/extractArgTypes"; +import { addArgTypesEnhancer, addParameters } from "@storybook/react-native"; +import { enhanceArgTypes } from "@storybook/docs-tools"; + +addArgTypesEnhancer(enhanceArgTypes); +addParameters({ + docs: { + extractArgTypes, + }, +}); diff --git a/template/_ondevice/preview.js b/template/_ondevice/preview.js index b7197d3..5b12425 100644 --- a/template/_ondevice/preview.js +++ b/template/_ondevice/preview.js @@ -1,9 +1,19 @@ -import {withBackgrounds} from '@storybook/addon-ondevice-backgrounds'; +import { withBackgrounds } from "@storybook/addon-ondevice-backgrounds"; export const decorators = [withBackgrounds]; export const parameters = { - backgrounds: [ - {name: 'plain', value: 'white', default: true}, - {name: 'warm', value: 'hotpink'}, - {name: 'cool', value: 'deepskyblue'}, - ], + backgrounds: { + default: "plain", + values: [ + { name: "plain", value: "white" }, + { name: "warm", value: "hotpink" }, + { name: "cool", value: "deepskyblue" }, + ], + }, + actions: { argTypesRegex: "^on[A-Z].*" }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, }; diff --git a/template/_ondevice/storybook.requires.js b/template/_ondevice/storybook.requires.js index a34ec32..8349f48 100644 --- a/template/_ondevice/storybook.requires.js +++ b/template/_ondevice/storybook.requires.js @@ -5,6 +5,7 @@ import { addDecorator, addParameters, addArgsEnhancer, + clearDecorators, } from "@storybook/react-native"; import "@storybook/addon-ondevice-notes/register"; @@ -17,6 +18,14 @@ import { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addAr import { decorators, parameters } from "./preview"; if (decorators) { + if (__DEV__) { + // stops the warning from showing on every HMR + require("react-native").LogBox.ignoreLogs([ + "`clearDecorators` is deprecated and will be removed in Storybook 7.0", + ]); + } + // workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185 + clearDecorators(); decorators.forEach((decorator) => addDecorator(decorator)); } @@ -24,7 +33,9 @@ if (parameters) { addParameters(parameters); } -argsEnhancers.forEach((enhancer) => addArgsEnhancer(enhancer)); +try { + argsEnhancers.forEach((enhancer) => addArgsEnhancer(enhancer)); +} catch {} const getStories = () => { return [require("../components/Button/Button.stories.tsx")]; diff --git a/template/babel.config.js b/template/babel.config.js index f842b77..cee813b 100644 --- a/template/babel.config.js +++ b/template/babel.config.js @@ -1,3 +1,6 @@ module.exports = { - presets: ['module:metro-react-native-babel-preset'], + presets: ["module:metro-react-native-babel-preset"], + plugins: [ + ["babel-plugin-react-docgen-typescript", { exclude: "node_modules" }], + ], }; diff --git a/template/package.json b/template/package.json index ca55a8b..388307a 100644 --- a/template/package.json +++ b/template/package.json @@ -16,11 +16,11 @@ }, "dependencies": { "@react-native-async-storage/async-storage": "^1.17.3", - "@react-native-community/datetimepicker": "^6.1.2", - "@react-native-community/slider": "^4.2.1", + "@react-native-community/datetimepicker": "^6.7.1", + "@react-native-community/slider": "^4.3.3", "react": "18.2.0", "react-dom": "^18.2.0", - "react-native-web": "^0.18.9", + "react-native-web": "^0.18.10", "react-native": "0.70.6", "react-native-safe-area-context": "^4.4.1" }, @@ -28,17 +28,18 @@ "@babel/core": "^7.12.9", "@babel/runtime": "^7.12.5", "@react-native-community/eslint-config": "^2.0.0", - "@storybook/addon-actions": "6.3", - "@storybook/addon-controls": "6.3", - "@storybook/addon-essentials": "6.3", - "@storybook/addon-links": "6.3", - "@storybook/addon-ondevice-actions": "^6.0.1-beta.8", - "@storybook/addon-ondevice-backgrounds": "^6.0.1-beta.8", - "@storybook/addon-ondevice-controls": "^6.0.1-beta.8", - "@storybook/addon-ondevice-notes": "^6.0.1-beta.8", - "@storybook/addon-react-native-web": "^0.0.18", - "@storybook/react-native": "^6.0.1-beta.8", - "@storybook/react": "6.3", + "@storybook/addon-actions": "^6.5.14", + "@storybook/addon-controls": "^6.5.14", + "@storybook/addon-essentials": "^6.5.14", + "@storybook/addon-links": "^6.5.14", + "@storybook/addon-ondevice-actions": "next", + "@storybook/addon-ondevice-backgrounds": "next", + "@storybook/addon-ondevice-controls": "next", + "@storybook/addon-ondevice-notes": "next", + "@storybook/addon-react-native-web": "^0.0.19", + "@storybook/react-native": "next", + "@storybook/react": "^6.5.14", + "babel-plugin-react-docgen-typescript": "^1.5.1", "@storybook/testing-library": "^0.0.13", "@tsconfig/react-native": "^2.0.2", "@types/jest": "^26.0.23", @@ -49,7 +50,7 @@ "@typescript-eslint/parser": "^5.37.0", "babel-jest": "^26.6.3", "babel-loader": "^8.2.4", - "babel-plugin-react-native-web": "^0.17.7", + "babel-plugin-react-native-web": "^0.18.10", "eslint": "^7.32.0", "jest": "^26.6.3", "metro-react-native-babel-preset": "0.72.3",