feat: remove storybook in favor of custom sandbox (#243)

* feat: remove storybook module and create a new entrypoint

* feat: first draft of the custom sandbox

* feat: convert all remaining stories to the sandbox

* chore: update eslint package

* chore: remove story generator

* refactor: create a sandbox wrapper

* test: update input snapshots

index.js

@@ -2,6 +2,6 @@ import 'react-native-gesture-handler';
 import { AppRegistry } from 'react-native';
 
 import { name as appName } from './app.json';
-import Root from './App.tsx';
+import Root from './src/App.tsx';
 
 AppRegistry.registerComponent(appName, () => Root);

package.json

@@ -45,8 +45,6 @@
  "tsc": "tsc",
  "lint": "eslint ./ --ext .js,.ts,.tsx --fix --ignore-path .gitignore",
  "prettify": "yarn prettier --write './**/*.{js,ts,tsx}'",
- "prestorybook": "rnstl",
- "storybook": "(adb reverse tcp:7007 tcp:7007 || true) && start-storybook",
  "//// UTILITIES ////": "",
  "image:add": "node scripts/images.js",
  "generate:page": "npx hygen generators page",
@@ -61,6 +59,7 @@
  },
  "dependencies": {
  "@react-native-masked-view/masked-view": "0.2.6",
+ "@react-navigation/core": "6.1.0",
  "@react-navigation/native": "6.0.6",
  "@react-navigation/stack": "6.0.11",
  "i18n-js": "3.8.0",
@@ -82,14 +81,6 @@
  "@babel/runtime": "7.16.3",
  "@commitlint/cli": "15.0.0",
  "@commitlint/config-conventional": "15.0.0",
- "@storybook/addon-actions": "5.3.21",
- "@storybook/addon-backgrounds": "5.3.21",
- "@storybook/addon-knobs": "5.3.21",
- "@storybook/addon-ondevice-actions": "5.3.23",
- "@storybook/addon-ondevice-backgrounds": "5.3.23",
- "@storybook/addon-ondevice-knobs": "5.3.25",
- "@storybook/react-native": "5.3.25",
- "@storybook/react-native-server": "5.3.23",
  "@testing-library/jest-native": "4.0.4",
  "@testing-library/react-native": "8.0.0",
  "@types/i18n-js": "3.8.2",
@@ -108,7 +99,7 @@
  "chalk": "4.1.2",
  "detox": "19.1.0",
  "eslint": "8.3.0",
- "eslint-config-tsyirvo-react-native": "1.0.1",
+ "eslint-config-tsyirvo-react-native": "1.0.2",
  "husky": "7.0.4",
  "hygen": "6.1.0",
  "imageoptim": "0.5.0",
@@ -123,7 +114,6 @@
  "prettier": "2.5.0",
  "react-dom": "17.0.1",
  "react-native-dev-menu": "4.0.2",
- "react-native-storybook-loader": "2.0.2",
  "react-test-renderer": "17.0.2",
  "sharp": "0.29.3",
  "standard-version": "9.3.2",
@@ -140,16 +130,6 @@
  "bash -c yarn prettify"
  ]
  },
- "config": {
- "react-native-storybook-loader": {
- "searchDir": [
- "./src",
- "./storybook"
- ],
- "pattern": "**/*.stories.tsx",
- "outputFile": "./storybook/storyLoader.js"
- }
- },
  "jest": {
  "cacheDirectory": ".jest/cache",
  "moduleFileExtensions": [

App.tsx → src/App.tsx

@@ -8,12 +8,13 @@ import {
 import { enableScreens } from 'react-native-screens';
 import { ThemeProvider } from 'styled-components';
 
-import ErrorBoundary from './src/components/errorBoundary';
-import { config, getDimensionRatio } from './src/core/constants';
-import { initI18n } from './src/i18n/config';
-import AppContainer from './src/routes/routes';
-import theme from './src/styles/theme';
-import StorybookProvider from './storybook/Storybook';
+import ErrorBoundary from './components/errorBoundary';
+import { config, getDimensionRatio } from './core/constants';
+import { initI18n } from './i18n/config';
+import AppContainer from './routes/routes';
+import theme from './styles/theme';
+
+import Sandbox from '$sandbox';
 
 enableScreens();
 
@@ -25,11 +26,11 @@ const Root = () => (
  <StatusBar barStyle="light-content" />
 
  <ErrorBoundary>
- <StorybookProvider>
- <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+ <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+ <Sandbox>
  <AppContainer />
- </SafeAreaProvider>
- </StorybookProvider>
+ </Sandbox>
+ </SafeAreaProvider>
  </ErrorBoundary>
  </ThemeProvider>
 );

src/components/shared/primitives/Input/Input.tsx

@@ -29,7 +29,7 @@ const STextInput = styled(TextInput)<{ error?: string }>`
 
 const Input = forwardRef<TextInput, Props>(
  ({ label, error, editable = true, ...props }, ref) => (
- <Box width="80%" mt="medium">
+ <Box width="80%">
  {label && (
  <Text color="black" mb="small" testID="input-label">
  {label}

src/components/shared/primitives/__tests__/__snapshots__/Input.test.tsx.snap

@@ -2,11 +2,9 @@
 
 exports[`Shared primitives Input component should render correctly 1`] = `
 <View
- mt="medium"
  style={
  Array [
  Object {
- "marginTop": 16,
  "width": "80%",
  },
  ]

src/routes/routes.types.ts

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-
 import { StackNavigationProp } from '@react-navigation/stack';
 
 /* ***** ***** Stack router types ***** ***** */