From 5927593fd7e470f79a4490232aabaefa0b71206d Mon Sep 17 00:00:00 2001
From: Gabriel Moncea <gabimoncha@gmail.com>
Date: Tue, 19 Apr 2022 12:11:34 +0300
Subject: [PATCH 1/2] Add absolute path

---
 babel.config.js                      | 13 +++++++++++
 components/Button/Button.stories.tsx |  2 +-
 components/Button/Button.tsx         | 23 ++-----------------
 components/Button/index.tsx          |  1 +
 components/index.tsx                 |  1 +
 package.json                         |  5 +++--
 styles/index.tsx                     | 21 ++++++++++++++++++
 tsconfig.json                        |  9 ++++++--
 yarn.lock                            | 33 ++++++++++++++++++++++++++--
 9 files changed, 80 insertions(+), 28 deletions(-)
 create mode 100644 components/Button/index.tsx
 create mode 100644 components/index.tsx
 create mode 100644 styles/index.tsx

diff --git a/babel.config.js b/babel.config.js
index f842b77..d9e019f 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,3 +1,16 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
+  plugins: [
+    [
+      'module-resolver',
+      {
+        root: './',
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.ios.js', '.android.js'],
+        alias: {
+          '@components': 'components',
+          '@styles': 'styles',
+        },
+      },
+    ],
+  ],
 };
diff --git a/components/Button/Button.stories.tsx b/components/Button/Button.stories.tsx
index a88c41b..c6a6122 100644
--- a/components/Button/Button.stories.tsx
+++ b/components/Button/Button.stories.tsx
@@ -2,7 +2,7 @@
 import React from 'react';
 import {ComponentMeta, ComponentStory} from '@storybook/react';
 
-import {MyButton} from './Button';
+import {MyButton} from '@components';
 
 export default {
   title: 'components/MyButton',
diff --git a/components/Button/Button.tsx b/components/Button/Button.tsx
index 432947b..1768e96 100644
--- a/components/Button/Button.tsx
+++ b/components/Button/Button.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {Text, TouchableOpacity, View} from 'react-native';
+import {styles} from '@styles';
 
 export type ButtonProps = {
   onPress: () => void;
@@ -8,26 +9,6 @@ export type ButtonProps = {
   textColor?: string;
 };
 
-const styles = StyleSheet.create({
-  button: {
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-    borderRadius: 4,
-    alignSelf: 'flex-start',
-    flexGrow: 0,
-    backgroundColor: 'purple',
-  },
-  buttonText: {
-    color: 'white',
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
-  buttonContainer: {
-    alignItems: 'flex-start',
-    flex: 1,
-  },
-});
-
 export const MyButton = ({text, onPress, color, textColor}: ButtonProps) => (
   <View style={styles.buttonContainer}>
     <TouchableOpacity
diff --git a/components/Button/index.tsx b/components/Button/index.tsx
new file mode 100644
index 0000000..8b166a8
--- /dev/null
+++ b/components/Button/index.tsx
@@ -0,0 +1 @@
+export * from './Button';
diff --git a/components/index.tsx b/components/index.tsx
new file mode 100644
index 0000000..8b166a8
--- /dev/null
+++ b/components/index.tsx
@@ -0,0 +1 @@
+export * from './Button';
diff --git a/package.json b/package.json
index 69935fe..5413af5 100644
--- a/package.json
+++ b/package.json
@@ -18,9 +18,9 @@
     "@react-native-async-storage/async-storage": "^1.17.3",
     "@react-native-community/datetimepicker": "^6.1.2",
     "@react-native-community/slider": "^4.2.1",
-    "react-native": "0.68.0",
     "react": "17.0.2",
     "react-dom": "^17.0.0",
+    "react-native": "0.68.0",
     "react-native-web": "^0.17.7"
   },
   "devDependencies": {
@@ -36,8 +36,8 @@
     "@storybook/addon-ondevice-controls": "^6.0.1-beta.5",
     "@storybook/addon-ondevice-notes": "^6.0.1-beta.5",
     "@storybook/addon-react-native-web": "^0.0.18",
-    "@storybook/react-native": "^6.0.1-beta.5",
     "@storybook/react": "6.3",
+    "@storybook/react-native": "^6.0.1-beta.5",
     "@storybook/testing-library": "^0.0.9",
     "@types/jest": "^26.0.23",
     "@types/react-native": "^0.67.3",
@@ -46,6 +46,7 @@
     "@typescript-eslint/parser": "^5.17.0",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.4",
+    "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-react-native-web": "^0.17.7",
     "eslint": "^7.32.0",
     "jest": "^26.6.3",
diff --git a/styles/index.tsx b/styles/index.tsx
new file mode 100644
index 0000000..de3a3d1
--- /dev/null
+++ b/styles/index.tsx
@@ -0,0 +1,21 @@
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  button: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    borderRadius: 4,
+    alignSelf: 'flex-start',
+    flexGrow: 0,
+    backgroundColor: 'purple',
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  buttonContainer: {
+    alignItems: 'flex-start',
+    flex: 1,
+  },
+});
diff --git a/tsconfig.json b/tsconfig.json
index 87abee5..7265d9d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -37,8 +37,13 @@
 
     /* Module Resolution Options */
     "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
-    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
-    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": ["components/*"],
+      "@components": ["components"],
+      "@styles/*": ["styles/*"],
+      "@styles": ["styles"],
+    },
     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
     // "typeRoots": [],                       /* List of folders to include type definitions from. */
     // "types": [],                           /* Type declaration files to be included in compilation. */
diff --git a/yarn.lock b/yarn.lock
index 55a1a9a..e4c8d90 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4137,6 +4137,17 @@ babel-plugin-macros@^3.0.1:
     cosmiconfig "^7.0.0"
     resolve "^1.19.0"
 
+babel-plugin-module-resolver@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-module-resolver/-/babel-plugin-module-resolver-4.1.0.tgz#22a4f32f7441727ec1fbf4967b863e1e3e9f33e2"
+  integrity sha512-MlX10UDheRr3lb3P0WcaIdtCSRlxdQsB1sBqL7W0raF070bGl1HQQq5K3T2vf2XAYie+ww+5AKC/WrkjRO2knA==
+  dependencies:
+    find-babel-config "^1.2.0"
+    glob "^7.1.6"
+    pkg-up "^3.1.0"
+    reselect "^4.0.0"
+    resolve "^1.13.1"
+
 babel-plugin-named-asset-import@^0.3.1:
   version "0.3.8"
   resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.8.tgz#6b7fa43c59229685368683c28bc9734f24524cc2"
@@ -6575,6 +6586,14 @@ finalhandler@1.1.2, finalhandler@~1.1.2:
     statuses "~1.5.0"
     unpipe "~1.0.0"
 
+find-babel-config@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/find-babel-config/-/find-babel-config-1.2.0.tgz#a9b7b317eb5b9860cda9d54740a8c8337a2283a2"
+  integrity sha512-jB2CHJeqy6a820ssiqwrKMeyC6nNdmrcgkKWJWmpoxpE8RKciYJXCcXRq1h2AzCo5I5BJeN2tkGEO3hLTuePRA==
+  dependencies:
+    json5 "^0.5.1"
+    path-exists "^3.0.0"
+
 find-cache-dir@^2.0.0, find-cache-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.1.0.tgz#8d0f94cd13fe43c6c7c261a0d86115ca918c05f7"
@@ -8665,6 +8684,11 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
 
+json5@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+  integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
+
 json5@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
@@ -10349,7 +10373,7 @@ pkg-dir@^5.0.0:
   dependencies:
     find-up "^5.0.0"
 
-pkg-up@3.1.0:
+pkg-up@3.1.0, pkg-up@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-3.1.0.tgz#100ec235cc150e4fd42519412596a28512a0def5"
   integrity sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==
@@ -11370,6 +11394,11 @@ require-main-filename@^2.0.0:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
   integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
 
+reselect@^4.0.0:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.5.tgz#852c361247198da6756d07d9296c2b51eddb79f6"
+  integrity sha512-uVdlz8J7OO+ASpBYoz1Zypgx0KasCY20H+N8JD13oUMtPvSHQuscrHop4KbXrbsBcdB9Ds7lVK7eRkBIfO43vQ==
+
 resolve-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
@@ -11397,7 +11426,7 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
-resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.18.1, resolve@^1.19.0, resolve@^1.3.2:
+resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.18.1, resolve@^1.19.0, resolve@^1.3.2:
   version "1.22.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
   integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==

From 3b21c69c5753d44f57c1afc67bb1935fda9b4ff5 Mon Sep 17 00:00:00 2001
From: Gabriel Moncea <gabimoncha@gmail.com>
Date: Tue, 19 Apr 2022 13:08:59 +0300
Subject: [PATCH 2/2] Update babel.config.js

---
 babel.config.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/babel.config.js b/babel.config.js
index d9e019f..422ae19 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -4,11 +4,10 @@ module.exports = {
     [
       'module-resolver',
       {
-        root: './',
         extensions: ['.js', '.jsx', '.ts', '.tsx', '.ios.js', '.android.js'],
         alias: {
-          '@components': 'components',
-          '@styles': 'styles',
+          '@components': './components',
+          '@styles': './styles',
         },
       },
     ],