feat: 🎸 add storybook

Author: MatthysDev

hackathon/offline-with-legend-state/.storybook/index.ts

@@ -0,0 +1,11 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { view } from './storybook.requires';
+
+const StorybookUIRoot = view.getStorybookUI({
+  storage: {
+    getItem: AsyncStorage.getItem,
+    setItem: AsyncStorage.setItem,
+  },
+});
+
+export default StorybookUIRoot;

hackathon/offline-with-legend-state/.storybook/main.ts

@@ -0,0 +1,8 @@
+import { StorybookConfig } from '@storybook/react-native';
+
+const main: StorybookConfig = {
+  stories: ['./stories/**/*.stories.?(ts|tsx|js|jsx)'],
+  addons: ['@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-actions'],
+};
+
+export default main;

hackathon/offline-with-legend-state/.storybook/preview.tsx

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

hackathon/offline-with-legend-state/.storybook/stories/Button/Button.stories.tsx

@@ -0,0 +1,31 @@
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react';
+import { MyButton } from './Button';
+
+const MyButtonMeta: Meta<typeof MyButton> = {
+  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: StoryObj<typeof MyButton> = {};
+
+export const AnotherExample: StoryObj<typeof MyButton> = {
+  args: {
+    text: 'Another example',
+  },
+};

hackathon/offline-with-legend-state/.storybook/stories/Button/Button.tsx

@@ -0,0 +1,24 @@
+import { TouchableOpacity, Text, StyleSheet } from 'react-native';
+
+export type MyButtonProps = {
+  onPress: () => void;
+  text: string;
+};
+
+export const MyButton = ({ onPress, text }: MyButtonProps) => {
+  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' },
+});

hackathon/offline-with-legend-state/.storybook/storybook.requires.ts

@@ -0,0 +1,34 @@
+/* do not change this file, it is auto generated by storybook. */
+
+import { start } from '@storybook/react-native';
+
+import '@storybook/addon-ondevice-controls/register';
+import '@storybook/addon-ondevice-actions/register';
+
+const normalizedStories = [
+  {
+    titlePrefix: '',
+    directory: './.storybook/stories',
+    files: '**/*.stories.?(ts|tsx|js|jsx)',
+    importPathMatcher:
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
+    // @ts-ignore
+    req: require.context(
+      './stories',
+      true,
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/
+    ),
+  },
+];
+
+// @ts-ignore
+global.STORIES = normalizedStories;
+
+export const view = start({
+  annotations: [
+    require('./preview'),
+    require('@storybook/react-native/dist/preview'),
+    require('@storybook/addon-actions/preview'),
+  ],
+  storyEntries: normalizedStories,
+});

hackathon/offline-with-legend-state/App.tsx

@@ -41,4 +41,5 @@ const styles = StyleSheet.create({
   },
 });
 
-export default App;
+// export default App;
+export { default } from "./.storybook";

hackathon/offline-with-legend-state/metro.config.js

@@ -0,0 +1,9 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+const { getDefaultConfig } = require('expo/metro-config');
+
+/** @type {import('expo/metro-config').MetroConfig} */
+const config = getDefaultConfig(__dirname);
+
+config.transformer.unstable_allowRequireContext = true;
+
+module.exports = config;

hackathon/offline-with-legend-state/package.json

@@ -6,7 +6,9 @@
     "start": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
-    "web": "expo start --web"
+    "web": "expo start --web",
+    "storybook-generate": "sb-rn-get-stories",
+    "storybook": "sb-rn-get-stories && expo start"
   },
   "dependencies": {
     "@legendapp/state": "^2.1.8",
@@ -17,8 +19,17 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
+    "@react-native-async-storage/async-storage": "^1.22.3",
+    "@react-native-community/datetimepicker": "^7.6.2",
+    "@react-native-community/slider": "^4.5.0",
+    "@storybook/addon-ondevice-actions": "^7.6.15",
+    "@storybook/addon-ondevice-controls": "^7.6.15",
+    "@storybook/react-native": "^7.6.15",
     "@types/react": "~18.2.45",
+    "babel-loader": "^8.3.0",
+    "react-dom": "18.2.0",
+    "react-native-safe-area-context": "^4.9.0",
     "typescript": "^5.1.3"
   },
   "private": true
-}
+}