Skip to content

Commit

Permalink
Traverse Rewrite (Memmy-App#767)
Browse files Browse the repository at this point in the history
  • Loading branch information
joshua-davis-rose authored Jul 21, 2023
1 parent 8438773 commit 2472749
Show file tree
Hide file tree
Showing 50 changed files with 2,655 additions and 140 deletions.
1 change: 1 addition & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,5 +46,6 @@ module.exports = {
"react/jsx-no-useless-fragment": "off",
"import/prefer-default-export": "off",
"jsx-a11y/anchor-is-valid": "off",
"no-else-return": ["error", {allowElseIf: true}]
},
};
32 changes: 18 additions & 14 deletions Start.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import { AppState, useColorScheme } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import merge from "deepmerge";
import { setRootViewBackgroundColor } from "@pnthach95/react-native-root-view-background";
import { GluestackUIProvider } from "./src/components/common/Gluestack";
import { config } from "./gluestack-ui.config";
import Stack from "./Stack";
import MemmyErrorView from "./src/components/common/Loading/MemmyErrorView";
import { writeToLog } from "./src/helpers/LogHelper";
Expand Down Expand Up @@ -200,20 +202,22 @@ function Start({ onReady }: StartProps) {
}

return (
<NativeBaseProvider theme={selectedTheme}>
<ErrorBoundary onError={logError} FallbackComponent={MemmyErrorView}>
{/* eslint-disable-next-line react/style-prop-object */}
<StatusBar style={statusBarColor} />
<GestureHandlerRootView
style={{ flex: 1, backgroundColor: selectedTheme.colors.app.bg }}
>
<>
<Toast />
<Stack onReady={onStackReady} />
</>
</GestureHandlerRootView>
</ErrorBoundary>
</NativeBaseProvider>
<GluestackUIProvider config={config.theme}>
<NativeBaseProvider theme={selectedTheme}>
<ErrorBoundary onError={logError} FallbackComponent={MemmyErrorView}>
{/* eslint-disable-next-line react/style-prop-object */}
<StatusBar style={statusBarColor} />
<GestureHandlerRootView
style={{ flex: 1, backgroundColor: selectedTheme.colors.app.bg }}
>
<>
<Toast />
<Stack onReady={onStackReady} />
</>
</GestureHandlerRootView>
</ErrorBoundary>
</NativeBaseProvider>
</GluestackUIProvider>
);
}

Expand Down
304 changes: 304 additions & 0 deletions gluestack-ui.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,304 @@
export const config = {
componentPath: "./src/components/common/gluestack",
theme: {
aliases: {
bg: "backgroundColor",
bgColor: "backgroundColor",
h: "height",
w: "width",
p: "padding",
px: "paddingHorizontal",
py: "paddingVertical",
pt: "paddingTop",
pb: "paddingBottom",
pr: "paddingRight",
pl: "paddingLeft",
m: "margin",
mx: "marginHorizontal",
my: "marginVertical",
mt: "marginTop",
mb: "marginBottom",
mr: "marginRight",
ml: "marginLeft",
rounded: "borderRadius",
} as const,
tokens: {
space: {
px: "1px",
"0": 0,
"0.5": 2,
"1": 4,
"1.5": 6,
"2": 8,
"2.5": 10,
"3": 12,
"3.5": 14,
"4": 16,
"4.5": 18,
"5": 20,
"6": 24,
"7": 28,
"8": 32,
"9": 36,
"10": 40,
"11": 44,
"12": 48,
"16": 64,
"20": 80,
"24": 96,
"32": 128,
"40": 160,
"48": 192,
"56": 224,
"64": 256,
"72": 288,
"80": 320,
"96": 384,
"1/2": "50%",
"1/3": "33.333%",
"2/3": "66.666%",
"1/4": "25%",
"2/4": "50%",
"3/4": "75%",
"1/5": "20%",
"2/5": "40%",
"3/5": "60%",
"4/5": "80%",
"1/6": "16.666%",
"2/6": "33.333%",
"3/6": "50%",
"4/6": "66.666%",
"5/6": "83.333%",
full: "100%",
},
borderWidths: {
"0": 0,
"1": 1,
"2": 2,
"4": 4,
"8": 8,
},
radii: {
none: 0,
xs: 2,
sm: 4,
md: 6,
lg: 8,
xl: 12,
"2xl": 16,
"3xl": 24,
full: 9999,
},
breakpoints: {
base: 0,
sm: 480,
md: 768,
lg: 992,
xl: 1280,
},
mediaQueries: {
base: "@media screen and (min-width: 0)",
xs: "@media screen and (min-width: 400px)",
sm: "@media screen and (min-width: 480px)",
md: "@media screen and (min-width: 768px)",
lg: "@media screen and (min-width: 992px)",
xl: "@media screen and (min-width: 1280px)",
},
letterSpacings: {
xs: -0.4,
sm: -0.2,
md: 0,
lg: 0.2,
xl: 0.4,
"2xl": 1.6,
},
lineHeights: {
"2xs": 16,
xs: 18,
sm: 20,
md: 22,
lg: 24,
xl: 28,
"2xl": 32,
"3xl": 40,
"4xl": 48,
"5xl": 56,
"6xl": 72,
"7xl": 90,
},
fontWeights: {
hairline: "100",
thin: "200",
light: "300",
normal: "400",
medium: "500",
semibold: "600",
bold: "700",
extrabold: "800",
black: "900",
extraBlack: "950",
},
fonts: {
heading: undefined,
body: undefined,
mono: undefined,
},
fontSizes: {
"2xs": 10,
xs: 12,
sm: 14,
md: 16,
lg: 18,
xl: 20,
"2xl": 24,
"3xl": 30,
"4xl": 36,
"5xl": 48,
"6xl": 60,
"7xl": 72,
"8xl": 96,
"9xl": 128,
},
opacity: {
0: 0,
5: 0.05,
10: 0.1,
20: 0.2,
25: 0.25,
30: 0.3,
40: 0.4,
50: 0.5,
60: 0.6,
70: 0.7,
75: 0.75,
80: 0.8,
90: 0.9,
95: 0.95,
100: 1,
},
} as const,
globalStyle: {
variants: {
hardShadow: {
"1": {
shadowColor: "$backgroundLight900",
shadowOffset: {
width: -2,
height: 2,
},
shadowRadius: 8,
shadowOpacity: 0.5,
elevation: 10,
},
"2": {
shadowColor: "$backgroundLight900",
shadowOffset: {
width: 0,
height: 3,
},
shadowRadius: 8,
shadowOpacity: 0.5,
elevation: 10,
},
"3": {
shadowColor: "$backgroundLight900",
shadowOffset: {
width: 2,
height: 2,
},
shadowRadius: 8,
shadowOpacity: 0.5,
elevation: 10,
},
"4": {
shadowColor: "$backgroundLight900",
shadowOffset: {
width: 0,
height: -3,
},
shadowRadius: 8,
shadowOpacity: 0.5,
elevation: 10,
},
// this 5th version is only for toast shadow
// temporary
"5": {
shadowColor: "$backgroundLight900",
shadowOffset: {
width: 0,
height: 3,
},
shadowRadius: 8,
shadowOpacity: 0.2,
elevation: 10,
},
},
softShadow: {
"1": {
shadowColor: "$backgroundLight900",
shadowOffset: {
width: 0,
height: 0,
},
shadowRadius: 10,
shadowOpacity: 0.1,
_android: {
shadowColor: "$backgroundLight500",
elevation: 5,
shadowOpacity: 0.05,
},
},
"2": {
shadowColor: "$backgroundLight900",
shadowOffset: {
width: 0,
height: 0,
},
shadowRadius: 20,
elevation: 3,
shadowOpacity: 0.1,
_android: {
shadowColor: "$backgroundLight500",
elevation: 10,
shadowOpacity: 0.1,
},
},
"3": {
shadowColor: "$backgroundLight900",
shadowOffset: {
width: 0,
height: 0,
},
shadowRadius: 30,
shadowOpacity: 0.1,
elevation: 4,
_android: {
shadowColor: "$backgroundLight500",
elevation: 15,
shadowOpacity: 0.15,
},
},
"4": {
shadowColor: "$backgroundLight900",
shadowOffset: {
width: 0,
height: 0,
},
shadowRadius: 40,
shadowOpacity: 0.1,
elevation: 10,
_android: {
shadowColor: "$backgroundLight500",
elevation: 20,
shadowOpacity: 0.2,
},
},
},
},
},
},
} as const;
type Config = typeof config.theme;
declare module "@gluestack-style/react" {
interface ICustomConfig extends Config {}
}
4 changes: 2 additions & 2 deletions ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -689,7 +689,7 @@ PODS:
- React-RCTImage
- RNShare (9.2.0):
- React-Core
- RNSVG (13.9.0):
- RNSVG (13.4.0):
- React-Core
- RNVectorIcons (9.2.0):
- React-Core
Expand Down Expand Up @@ -1135,7 +1135,7 @@ SPEC CHECKSUMS:
RNReanimated: 9f7068e43b9358a46a688d94a5a3adb258139457
RNScreens: 68fd1060f57dd1023880bf4c05d74784b5392789
RNShare: b71572a3219740b60ffa7dbcf5d79b08e5625f4a
RNSVG: 53c661b76829783cdaf9b7a57258f3d3b4c28315
RNSVG: 07dbd870b0dcdecc99b3a202fa37c8ca163caec2
RNVectorIcons: fcc2f6cb32f5735b586e66d14103a74ce6ad61f8
SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
Expand Down
Loading

0 comments on commit 2472749

Please sign in to comment.