diff --git a/babel.config.js b/babel.config.js index f842b77..422ae19 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,3 +1,15 @@ module.exports = { presets: ['module:metro-react-native-babel-preset'], + plugins: [ + [ + 'module-resolver', + { + 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) => (