refactor: 💡 Refactor from Ignite Flame

.gitignore

@@ -81,6 +81,3 @@ web-build/
 # Configurations
 app/config/env.*.js
 !env.js
-
-# Misc
-.todo

App.js

@@ -7,9 +7,8 @@
 // side effect of breaking other tooling like mobile-center and react-native-rename.
 //
 // It's easier just to leave it here.
-import { AppRegistry } from 'react-native'
+import App from "./app/app.tsx";
+import { AppRegistry } from "react-native";
 
-import App from './app/app.tsx'
-
-AppRegistry.registerComponent('YourTimeline', () => App)
-export default App
+AppRegistry.registerComponent("KalleKula", () => App);
+export default App;

app.json

@@ -1,7 +1,7 @@
 {
   "expo": {
     "name": "YourTimeline",
-    "slug": "your-timeline",
+    "slug": "yourtimeline",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
@@ -15,17 +15,10 @@
     },
     "assetBundlePatterns": ["**/*"],
     "ios": {
-      "supportsTablet": true,
-      "bundleIdentifier": "app.yourtimeline.timeline",
-      "buildNumber": "1.0.0"
-    },
-    "android": {
-      "package": "app.yourtimeline.timeline",
-      "versionCode": 1
+      "supportsTablet": true
     },
     "web": {
       "favicon": "./assets/favicon.png"
-    },
-    "sdkVersion": "41.0.0"
+    }
   }
 }

app/app.tsx

@@ -10,43 +10,52 @@
  * if you're interested in adding screens and navigators.
  */
 
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from "react";
 import {
   DarkTheme as PaperDarkTheme,
   DefaultTheme as PaperDefaultTheme,
   Provider as PaperProvider,
-} from 'react-native-paper'
-import { initialWindowMetrics, SafeAreaProvider } from 'react-native-safe-area-context'
-import { enableScreens } from 'react-native-screens'
-import { OverflowMenuProvider } from 'react-navigation-header-buttons'
+} from "react-native-paper";
+import {
+  initialWindowMetrics,
+  SafeAreaProvider,
+} from "react-native-safe-area-context";
+import { enableScreens } from "react-native-screens";
+import { OverflowMenuProvider } from "react-navigation-header-buttons";
 import {
   DarkTheme as NavigationDarkTheme,
   DefaultTheme as NavigationDefaultTheme,
   NavigationContainerRef,
-} from '@react-navigation/native'
+} from "@react-navigation/native";
 
-import './i18n'
-import './utils/ignore-warnings'
+import "./i18n";
+import "./utils/ignore-warnings";
 
-import { ToggleStorybook } from '../storybook/toggle-storybook'
+import { ToggleStorybook } from "../storybook/toggle-storybook";
 
-import { initFonts } from './theme/fonts' // expo
-import * as storage from './utils/storage'
-import { RootStore, RootStoreProvider, setupRootStore } from './models'
-import { canExit, RootNavigator, setRootNavigation, useBackButtonHandler, useNavigationPersistence } from './navigators'
+import { initFonts } from "./theme/fonts"; // expo
+import * as storage from "./utils/storage";
+import { RootStore, RootStoreProvider, setupRootStore } from "./models";
+import {
+  canExit,
+  RootNavigator,
+  setRootNavigation,
+  useBackButtonHandler,
+  useNavigationPersistence,
+} from "./navigators";
 
 // This puts screens in a native ViewController or Activity. If you want fully native
 // stack navigation, use `createNativeStackNavigator` in place of `createStackNavigator`:
 // https://github.com/kmagiera/react-native-screens#using-native-stack-navigator
-enableScreens()
+enableScreens();
 
-export const NAVIGATION_PERSISTENCE_KEY = 'NAVIGATION_STATE'
+export const NAVIGATION_PERSISTENCE_KEY = "NAVIGATION_STATE";
 
 const CombinedDarkTheme = {
   ...PaperDarkTheme,
   ...NavigationDarkTheme,
   colors: { ...PaperDarkTheme.colors, ...NavigationDarkTheme.colors },
-}
+};
 
 const CombinedDefaultTheme = {
   ...PaperDefaultTheme,
@@ -55,38 +64,41 @@ const CombinedDefaultTheme = {
     ...PaperDefaultTheme.colors,
     ...NavigationDefaultTheme.colors,
   },
-}
+};
 
 /**
  * This is the root component of our app.
  */
 function App() {
-  const navigationRef = useRef<NavigationContainerRef>()
-  const [rootStore, setRootStore] = useState<RootStore | undefined>(undefined)
+  const navigationRef = useRef<NavigationContainerRef>();
+  const [rootStore, setRootStore] = useState<RootStore | undefined>(undefined);
 
-  setRootNavigation(navigationRef)
-  useBackButtonHandler(navigationRef, canExit)
-  const { initialNavigationState, onNavigationStateChange } = useNavigationPersistence(
-    storage,
-    NAVIGATION_PERSISTENCE_KEY,
-  )
+  setRootNavigation(navigationRef);
+  useBackButtonHandler(navigationRef, canExit);
+  const {
+    initialNavigationState,
+    onNavigationStateChange,
+  } = useNavigationPersistence(storage, NAVIGATION_PERSISTENCE_KEY);
 
   // Kick off initial async loading actions, like loading fonts and RootStore
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-extra-semi
-    ;(async () => {
-      await initFonts() // expo
-      setupRootStore().then(setRootStore)
-    })()
-  }, [])
+    (async () => {
+      await initFonts(); // expo
+      setupRootStore().then(setRootStore);
+    })();
+  }, []);
 
   // Before we show the app, we have to wait for our state to be ready.
   // In the meantime, don't render anything. This will be the background
   // color set in native by rootView's background color. You can replace
   // with your own loading component if you wish.
-  if (!rootStore) return null
+  if (!rootStore) return null;
 
-  const theme = rootStore.uiStore.theme === 'light' ? CombinedDefaultTheme : CombinedDarkTheme
+  const theme =
+    rootStore.uiStore.theme === "light"
+      ? CombinedDefaultTheme
+      : CombinedDarkTheme;
 
   // otherwise, we're ready to render the app
   return (
@@ -106,7 +118,7 @@ function App() {
         </RootStoreProvider>
       </PaperProvider>
     </ToggleStorybook>
-  )
+  );
 }
 
-export default App
+export default App;

app/components/addTimelineForm/addTimelineForm.story.tsx

@@ -1,18 +1,18 @@
-import * as React from 'react'
-import { storiesOf } from '@storybook/react-native'
+import * as React from "react";
+import { storiesOf } from "@storybook/react-native";
 
-import { Story, StoryScreen, UseCase } from '../../../storybook/views'
+import { Story, StoryScreen, UseCase } from "../../../storybook/views";
 
-import { AddTimelineForm } from './addTimelineForm'
+import { AddTimelineForm } from "./addTimelineForm";
 
-declare const module
+declare const module;
 
-storiesOf('AddTimelineForm', module)
-  .addDecorator(fn => <StoryScreen>{fn()}</StoryScreen>)
-  .add('Style Presets', () => (
+storiesOf("AddTimelineForm", module)
+  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
+  .add("Style Presets", () => (
     <Story>
       <UseCase text="Primary" usage="The primary.">
         <AddTimelineForm text="AddTimelineForm" />
       </UseCase>
     </Story>
-  ))
+  ));