feat: update versions

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"

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;

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,
+  },
+});

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$/,
+    },
+  },
 };

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,14 +18,24 @@ 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));
 }
 
 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")];

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" }],
+  ],
 };

template/package.json

@@ -16,29 +16,30 @@
   },
   "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"
   },
   "devDependencies": {
     "@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",