Skip to content

Commit db7b880

Browse files
daboigbaedaboigbae
committed
Set-up storybook and created expo project with tailwind
1 parent 6b58077 commit db7b880

20 files changed

+13508
-21674
lines changed

‎.eslintrc.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
node: true,
5+
browser: true,
6+
es2021: true,
7+
"react-native/react-native": true,
8+
"jest/globals": true
9+
},
10+
extends: [
11+
"plugin:react/recommended",
12+
"prettier",
13+
"eslint:recommended",
14+
"plugin:jest/recommended"
15+
],
16+
17+
parserOptions: {
18+
ecmaFeatures: {
19+
jsx: true
20+
},
21+
ecmaVersion: "latest",
22+
sourceType: "module"
23+
},
24+
25+
plugins: ["react", "react-native", "detox"],
26+
ignorePatterns: ["!.*", "dist", "node_modules"],
27+
rules: {
28+
indent: [
29+
"error",
30+
"tab",
31+
{
32+
SwitchCase: 1,
33+
ignoredNodes: ["ConditionalExpression"]
34+
}
35+
],
36+
"linebreak-style": ["error", "unix"],
37+
quotes: ["error", "double"],
38+
semi: ["error", "always"],
39+
"no-console": ["error"],
40+
"no-unused-vars": ["error", { vars: "all" }]
41+
},
42+
43+
settings: {
44+
react: {
45+
version: "detect"
46+
}
47+
}
48+
};

‎.prettierrc.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
semi: true,
3+
trailingComma: "none",
4+
singleQuote: false,
5+
printWidth: 80,
6+
useTabs: true
7+
};

‎.vscode/settings.json

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"workbench.colorCustomizations": {
3+
"activityBar.activeBackground": "#ff9ccd",
4+
"activityBar.background": "#ff9ccd",
5+
"activityBar.foreground": "#15202b",
6+
"activityBar.inactiveForeground": "#15202b99",
7+
"activityBarBadge.background": "#3f8000",
8+
"activityBarBadge.foreground": "#e7e7e7",
9+
"commandCenter.border": "#15202b99",
10+
"sash.hoverBorder": "#ff9ccd",
11+
"statusBar.background": "#ff69b4",
12+
"statusBar.foreground": "#15202b",
13+
"statusBarItem.hoverBackground": "#ff369a",
14+
"statusBarItem.remoteBackground": "#ff69b4",
15+
"statusBarItem.remoteForeground": "#15202b",
16+
"titleBar.activeBackground": "#ff69b4",
17+
"titleBar.activeForeground": "#15202b",
18+
"titleBar.inactiveBackground": "#ff69b499",
19+
"titleBar.inactiveForeground": "#15202b99"
20+
},
21+
"peacock.color": "#ff69b4"
22+
}

‎App.tsx

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1 @@
1-
import { StatusBar } from 'expo-status-bar';
2-
import { StyleSheet, Text, View } from 'react-native';
3-
4-
export default function App() {
5-
return (
6-
<View style={styles.container}>
7-
<Text>Open up App.tsx to start working on your app!</Text>
8-
<StatusBar style="auto" />
9-
</View>
10-
);
11-
}
12-
13-
const styles = StyleSheet.create({
14-
container: {
15-
flex: 1,
16-
backgroundColor: '#fff',
17-
alignItems: 'center',
18-
justifyContent: 'center',
19-
},
20-
});
1+
export { default } from './storybook';

‎README.md

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
React Native Basic App Template 💿 💿 💿
2+
This is the repo of the mobile app for Wasabi Music.
3+
4+
The application was written in React Native. Currently uses a hard coded playlist of our favorite NFT songs as we implement the support to utilize the full catalog of NFT music found at https://wasabimusic.io/
5+
6+
📱📱📱📱📱 Try the app now on TestFlight for iOS https://testflight.apple.com/join/4nCSJUqq Android coming soon
7+
8+
Folder Structure 📁 📁 📁 📁
9+
App.js - main application
10+
11+
e2e
12+
13+
detox test cases
14+
src
15+
16+
assets - for all images and test input data
17+
components - for screen components
18+
navigation - for all navigation objects
19+
redux - using redux slices for state
20+
screens - a place for all our screens
21+
styles - shared styling
22+
utils - for all helper functions
23+
Running the project 🏃‍♀️ 🏃‍♀️ 🏃‍♀️ 🏃‍♀️ 🏃‍♀️
24+
iOS
25+
Take the following steps to run the application locally for iOS
26+
27+
run yarn install
28+
navigate to the iOS folder using a terminal cd ios
29+
run pod install
30+
run yarn start within the directory in a terminal
31+
open the temp.xworspace using xcode
32+
run the project using xcode once everything loads
33+
Android
34+
Take the following steps to run the application locally for iOS
35+
36+
run yarn install
37+
run yarn android
38+
If you run into any issues, please make sure your development environment is set-up with a fresh react native app.
39+
40+
If your android app runs, but it can't connect to the react native server
41+
42+
Open a new terminal and navigate to the project
43+
Run adb reverse tcp:8081 tcp:8081
44+
Run yarn start
45+
Run yarn android
46+
Running Test Cases 🧪 🧪 🧪 🧪 🧪 🧪
47+
iOS
48+
Take the following steps to run the test cases for the application
49+
50+
yarn install
51+
navigate to the iOS folder using a terminal cd ios
52+
run pos install
53+
run detox build -c ios.sim.debug to build the debug version of the app for testing
54+
run detox test -c ios.sim.debug to run the test cases
55+
Android coming soon
56+
If everything is installed correctly, the tests should run

‎babel.config.js

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1-
module.exports = function(api) {
2-
api.cache(true);
3-
return {
4-
presets: ['babel-preset-expo'],
5-
};
1+
module.exports = function (api) {
2+
api.cache(true);
3+
return {
4+
presets: ["babel-preset-expo"],
5+
plugins: [
6+
"@babel/plugin-proposal-export-namespace-from",
7+
"nativewind/babel"
8+
],
9+
};
610
};

0 commit comments

Comments
 (0)