feat: cli init template

app/react-native/package.json

@@ -28,7 +28,8 @@
     "README.md",
     "*.js",
     "*.d.ts",
-    "scripts/*"
+    "scripts/*",
+    "template/**/*"
   ],
   "scripts": {
     "preprepare": "rm -rf dist/",

app/react-native/template/cli/index.js

@@ -0,0 +1,7 @@
+import { getStorybookUI } from '@storybook/react-native';
+
+import './storybook.requires';
+
+const StorybookUIRoot = getStorybookUI({});
+
+export default StorybookUIRoot;

app/react-native/template/cli/main.js

@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['./stories/**/*.stories.?(ts|tsx|js|jsx)'],
+  addons: ['@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-actions'],
+};

app/react-native/template/cli/preview.js

@@ -0,0 +1,8 @@
+export const parameters = {
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

app/react-native/template/cli/stories/Button/Button.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { TouchableOpacity, Text, StyleSheet } from 'react-native';
+
+export const MyButton = ({ onPress, text }) => {
+  return (
+    <TouchableOpacity style={styles.container} onPress={onPress} activeOpacity={0.8}>
+      <Text style={styles.text}>{text}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    backgroundColor: 'purple',
+    borderRadius: 8,
+  },
+  text: { color: 'white' },
+});

app/react-native/template/cli/stories/Button/Button.stories.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { View } from 'react-native';
+import { MyButton } from './Button';
+
+const MyButtonMeta = {
+  title: 'MyButton',
+  component: MyButton,
+  argTypes: {
+    onPress: { action: 'pressed the button' },
+  },
+  args: {
+    text: 'Hello world',
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
+        <Story />
+      </View>
+    ),
+  ],
+};
+
+export default MyButtonMeta;
+
+export const Basic = {};
+
+export const AnotherExample = {
+  args: {
+    text: 'Another example',
+  },
+};