Merge pull request #226 from flexbox/feat/offline-app

feat: 🎸 init offline app with legend state

Author: MatthysDev

hackathon/offline-with-legend-state/.gitignore

@@ -0,0 +1,35 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

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

@@ -0,0 +1,45 @@
+import { Button, FlatList, SafeAreaView, StyleSheet, Text, View } from 'react-native';
+import { state$ } from './src/legend-state';
+import { observer } from "@legendapp/state/react";
+
+const App = observer(() => {
+
+  const addExpense = () => {
+    const newExpense = {
+      id: Math.random().toString(),
+      title: `Expense ${expenses.length + 1}`,
+      amount: Math.floor(Math.random()),
+    };
+    state$.expenses.set((currentExpenses) => [...currentExpenses, newExpense]);
+  };
+  const expenses = state$.expenses.get();
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <FlatList
+        data={expenses}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => (
+          <View>
+            <Text>
+              {item.title}: ${item.amount}
+            </Text>
+          </View>
+        )}
+      />
+      <Button title="Add Expense" onPress={addExpense} />
+    </SafeAreaView>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default App;
+// export { default } from "./.storybook";

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

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "offline-with-legend-state",
+    "slug": "offline-with-legend-state",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}