From 822e3533383064e2c51689bb6dfca93e3b16df03 Mon Sep 17 00:00:00 2001 From: Anselm Marie Date: Sun, 15 Sep 2024 08:50:38 -0400 Subject: [PATCH] Prepping code for ability to theme in react native --- apps/mobile-app/src/app/App.tsx | 8 +- apps/web-app/src/main.tsx | 2 +- apps/web-app/src/styles/styles.css | 12 -- .../cart.modal.content.scroll.native.tsx | 3 + .../lib/cart/cart.modal/cart.modal.view.tsx | 1 + libs/hooks/src/index.ts | 1 + libs/hooks/src/lib/hooks.module.css | 7 -- libs/hooks/src/lib/hooks.spec.tsx | 10 -- libs/hooks/src/lib/hooks.tsx | 11 -- libs/hooks/src/lib/use.render.styles.ts | 18 +++ libs/typing/src/lib-base/enum/detect.enum.ts | 4 + libs/typing/src/lib-base/enum/index.ts | 1 + libs/ui/src/index.ts | 3 - libs/ui/src/lib-base/styles/css/global.css | 109 ++++++++++++++++++ .../ui/src/lib-base/styles/css}/reset.css | 6 +- .../src/lib-base/styles/ts/theming.mobile.ts | 7 ++ .../ui/tag/tag.item/tag.item.module.native.ts | 6 +- .../ui/tag/tag.item/tag.item.view.tsx | 4 +- .../tag.wrapper/tag.wrapper.module.native.ts | 15 ++- .../ui/tag/tag.wrapper/tag.wrapper.view.tsx | 4 +- libs/utils/src/index.ts | 1 + .../src/lib-base/utils/detect.util.native.ts | 3 + libs/utils/src/lib-base/utils/detect.util.ts | 3 + tsconfig.base.json | 1 + 24 files changed, 179 insertions(+), 61 deletions(-) delete mode 100644 apps/web-app/src/styles/styles.css delete mode 100644 libs/hooks/src/lib/hooks.module.css delete mode 100644 libs/hooks/src/lib/hooks.spec.tsx delete mode 100644 libs/hooks/src/lib/hooks.tsx create mode 100644 libs/hooks/src/lib/use.render.styles.ts create mode 100644 libs/typing/src/lib-base/enum/detect.enum.ts create mode 100644 libs/ui/src/lib-base/styles/css/global.css rename {apps/web-app/src/styles => libs/ui/src/lib-base/styles/css}/reset.css (94%) create mode 100644 libs/ui/src/lib-base/styles/ts/theming.mobile.ts create mode 100644 libs/utils/src/lib-base/utils/detect.util.native.ts create mode 100644 libs/utils/src/lib-base/utils/detect.util.ts diff --git a/apps/mobile-app/src/app/App.tsx b/apps/mobile-app/src/app/App.tsx index a1e41c0..2f56a81 100644 --- a/apps/mobile-app/src/app/App.tsx +++ b/apps/mobile-app/src/app/App.tsx @@ -3,7 +3,7 @@ import { useRef } from 'react'; import { UiHeader } from '@pokemon-pet-shop/features'; import { UiModal } from '@pokemon-pet-shop/ui'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import { SafeAreaView, StyleSheet, ScrollView, StatusBar } from 'react-native'; +import { SafeAreaView, ScrollView, StatusBar } from 'react-native'; import 'react-native-svg'; import Homepage from '../homepage/homepage'; @@ -30,7 +30,6 @@ export const App = () => { scrollViewRef.current = ref; }} contentInsetAdjustmentBehavior="automatic" - style={styles.scrollView} > @@ -38,10 +37,5 @@ export const App = () => { ); }; -const styles = StyleSheet.create({ - scrollView: { - backgroundColor: '#ffffff', - }, -}); export default App; diff --git a/apps/web-app/src/main.tsx b/apps/web-app/src/main.tsx index 89f6d9a..1e72c1b 100644 --- a/apps/web-app/src/main.tsx +++ b/apps/web-app/src/main.tsx @@ -2,7 +2,7 @@ import * as ReactDOM from 'react-dom/client'; import { UiApp } from './providers/app'; -import './styles/reset.css'; +import '@pokemon-pet-shop/ui/styles'; const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); root.render(); diff --git a/apps/web-app/src/styles/styles.css b/apps/web-app/src/styles/styles.css deleted file mode 100644 index 8daba49..0000000 --- a/apps/web-app/src/styles/styles.css +++ /dev/null @@ -1,12 +0,0 @@ -:root, -html[data-theme='light'] { - --background-color: #fff; - --text-color: #121416d8; - --link-color: #543fd7; -} - -html[data-theme='dark'] { - --background-color: #212a2e; - --text-color: #f7f8f8; - --link-color: #828fff; -} diff --git a/libs/features/src/lib/cart/cart.modal/cart.modal.content.scroll.native.tsx b/libs/features/src/lib/cart/cart.modal/cart.modal.content.scroll.native.tsx index 8858439..1feae4d 100644 --- a/libs/features/src/lib/cart/cart.modal/cart.modal.content.scroll.native.tsx +++ b/libs/features/src/lib/cart/cart.modal/cart.modal.content.scroll.native.tsx @@ -1,11 +1,14 @@ import { PropsWithChildren, ReactElement, useRef } from 'react'; +import { useRenderStyles } from '@pokemon-pet-shop/hooks'; import { ScrollView } from 'react-native'; import { styles } from './cart.modal.module'; const CartModalScroll = ({ children }: PropsWithChildren): ReactElement => { const scrollViewRef = useRef(null); + // const { newStyles } = useRenderStyles(styles); + return ( { diff --git a/libs/features/src/lib/cart/cart.modal/cart.modal.view.tsx b/libs/features/src/lib/cart/cart.modal/cart.modal.view.tsx index d036867..f00d2bc 100644 --- a/libs/features/src/lib/cart/cart.modal/cart.modal.view.tsx +++ b/libs/features/src/lib/cart/cart.modal/cart.modal.view.tsx @@ -19,6 +19,7 @@ import useCartModalLogic from './use.cart.modal.logic'; const CartModal = (): ReactElement => { const { data, onHandleRemoveFromCart, onHandleAddToCart, onHandleRemoveCartItem } = useCartModalLogic(); + // const { newStyles } = useRenderStyles(styles); return ( diff --git a/libs/hooks/src/index.ts b/libs/hooks/src/index.ts index e69de29..c95626a 100644 --- a/libs/hooks/src/index.ts +++ b/libs/hooks/src/index.ts @@ -0,0 +1 @@ +export * from './lib/use.render.styles'; diff --git a/libs/hooks/src/lib/hooks.module.css b/libs/hooks/src/lib/hooks.module.css deleted file mode 100644 index 45c2aa4..0000000 --- a/libs/hooks/src/lib/hooks.module.css +++ /dev/null @@ -1,7 +0,0 @@ -/* - * Replace this with your own classes - * - * e.g. - * .container { - * } -*/ diff --git a/libs/hooks/src/lib/hooks.spec.tsx b/libs/hooks/src/lib/hooks.spec.tsx deleted file mode 100644 index ea98d32..0000000 --- a/libs/hooks/src/lib/hooks.spec.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { render } from '@testing-library/react'; - -import Hooks from './hooks'; - -describe('Hooks', () => { - it('should render successfully', () => { - const { baseElement } = render(); - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/hooks/src/lib/hooks.tsx b/libs/hooks/src/lib/hooks.tsx deleted file mode 100644 index 0925842..0000000 --- a/libs/hooks/src/lib/hooks.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import styles from './hooks.module.css'; - -export function Hooks() { - return ( -
-

Welcome to Hooks!

-
- ); -} - -export default Hooks; diff --git a/libs/hooks/src/lib/use.render.styles.ts b/libs/hooks/src/lib/use.render.styles.ts new file mode 100644 index 0000000..6765783 --- /dev/null +++ b/libs/hooks/src/lib/use.render.styles.ts @@ -0,0 +1,18 @@ +import { useMemo } from 'react'; + +import { useThemeStore } from '@pokemon-pet-shop/store'; +import { DetectEnum } from '@pokemon-pet-shop/typing'; +import { detectUtil } from '@pokemon-pet-shop/utils'; + +export const useRenderStyles = (styles: any): any => { + const theme = useThemeStore(); + const newStyles = useMemo(() => { + if (detectUtil() === DetectEnum.IS_WEB) { + return styles; + } + + return styles(theme); + }, [styles, theme]); + + return { newStyles }; +}; diff --git a/libs/typing/src/lib-base/enum/detect.enum.ts b/libs/typing/src/lib-base/enum/detect.enum.ts new file mode 100644 index 0000000..d3240be --- /dev/null +++ b/libs/typing/src/lib-base/enum/detect.enum.ts @@ -0,0 +1,4 @@ +export enum DetectEnum { + IS_WEB = 'isWeb', + IS_NATIVE = 'isNative', +} diff --git a/libs/typing/src/lib-base/enum/index.ts b/libs/typing/src/lib-base/enum/index.ts index 5671743..8343265 100644 --- a/libs/typing/src/lib-base/enum/index.ts +++ b/libs/typing/src/lib-base/enum/index.ts @@ -1 +1,2 @@ export * from './alignment.enum'; +export * from './detect.enum'; diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts index 3336e6a..72e2ce4 100644 --- a/libs/ui/src/index.ts +++ b/libs/ui/src/index.ts @@ -1,6 +1,3 @@ -/* Styles */ -// export * from './lib-base/styles'; - /* Providers */ // export * from './lib/providers'; diff --git a/libs/ui/src/lib-base/styles/css/global.css b/libs/ui/src/lib-base/styles/css/global.css new file mode 100644 index 0000000..bef3fc1 --- /dev/null +++ b/libs/ui/src/lib-base/styles/css/global.css @@ -0,0 +1,109 @@ +/* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Prevent font size inflation */ +html, +body { + text-size-adjust: none; + text-size-adjust: none; + text-size-adjust: none; + margin: 0; +} + +/* Remove default margin in favour of better control in authored CSS */ +body, +h1, +h2, +h3, +h4, +p, +figure, +blockquote, +dl, +dd { + margin-block-end: 0; + margin-block-start: 0; +} + +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul[role='list'], +ol[role='list'] { + list-style: none; +} + +/* Set core body defaults */ +body { + min-height: 100vh; + line-height: 1.5; +} + +/* Set shorter line heights on headings and interactive elements */ +h1, +h2, +h3, +h4, +button, +input, +label { + line-height: 1.1; +} + +/* Balance text wrapping on headings */ +h1, +h2, +h3, +h4, +h5, +h6 { + text-wrap: balance; + margin: 0; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; + color: currentcolor; +} + +/* Make images easier to work with */ +img, +picture { + max-width: 100%; + display: block; +} + +/* Inherit fonts for inputs and buttons */ +input, +button, +textarea, +select { + font-family: inherit; + font-size: inherit; +} + +/* Make sure textareas without a rows attribute are not tiny */ +textarea:not([rows]) { + min-height: 10em; +} + +/* Anything that has been anchored to should have extra scroll margin */ +:target { + scroll-margin-block: 5ex; +} + +:root, +html[data-theme='light'] { + --background-color: #fff; + --text-color: #121416d8; + --link-color: #543fd7; +} + +html[data-theme='dark'] { + --background-color: #212a2e; + --text-color: #f7f8f8; + --link-color: #828fff; +} diff --git a/apps/web-app/src/styles/reset.css b/libs/ui/src/lib-base/styles/css/reset.css similarity index 94% rename from apps/web-app/src/styles/reset.css rename to libs/ui/src/lib-base/styles/css/reset.css index d8f4ba0..9833f9a 100644 --- a/apps/web-app/src/styles/reset.css +++ b/libs/ui/src/lib-base/styles/css/reset.css @@ -8,8 +8,8 @@ /* Prevent font size inflation */ html, body { - -moz-text-size-adjust: none; - -webkit-text-size-adjust: none; + text-size-adjust: none; + text-size-adjust: none; text-size-adjust: none; margin: 0; } @@ -66,7 +66,7 @@ h6 { /* A elements that don't have a class get default styles */ a:not([class]) { text-decoration-skip-ink: auto; - color: currentColor; + color: currentcolor; } /* Make images easier to work with */ diff --git a/libs/ui/src/lib-base/styles/ts/theming.mobile.ts b/libs/ui/src/lib-base/styles/ts/theming.mobile.ts new file mode 100644 index 0000000..e3407b6 --- /dev/null +++ b/libs/ui/src/lib-base/styles/ts/theming.mobile.ts @@ -0,0 +1,7 @@ +export const lightTheme = { + grey600: '#707274', +}; + +export const darkTheme = { + grey600: '#434343', +}; diff --git a/libs/ui/src/lib-base/ui/tag/tag.item/tag.item.module.native.ts b/libs/ui/src/lib-base/ui/tag/tag.item/tag.item.module.native.ts index eb8bdb7..4612b50 100644 --- a/libs/ui/src/lib-base/ui/tag/tag.item/tag.item.module.native.ts +++ b/libs/ui/src/lib-base/ui/tag/tag.item/tag.item.module.native.ts @@ -1,7 +1,11 @@ import { StyleSheet } from 'react-native'; export const styles = StyleSheet.create({ - card: { + tag: { borderRadius: 100, + paddingTop: 10, + paddingBottom: 10, + paddingLeft: 15, + paddingRight: 15, }, }); diff --git a/libs/ui/src/lib-base/ui/tag/tag.item/tag.item.view.tsx b/libs/ui/src/lib-base/ui/tag/tag.item/tag.item.view.tsx index 655bfa5..60aeaf5 100644 --- a/libs/ui/src/lib-base/ui/tag/tag.item/tag.item.view.tsx +++ b/libs/ui/src/lib-base/ui/tag/tag.item/tag.item.view.tsx @@ -1,11 +1,11 @@ -import { memo, PropsWithChildren, ReactElement } from 'react'; +import { memo, type PropsWithChildren, type ReactElement } from 'react'; import { classNamesUtil } from '@pokemon-pet-shop/utils'; import { UiTypography, TypographyTypeEnum } from '../../typography'; import { TagItemColorEnum } from './tag.item.enum'; -import { TagProps } from './tag.item.interface'; +import type { TagProps } from './tag.item.interface'; import { styles } from './tag.item.module'; const Tag = ({ diff --git a/libs/ui/src/lib-base/ui/tag/tag.wrapper/tag.wrapper.module.native.ts b/libs/ui/src/lib-base/ui/tag/tag.wrapper/tag.wrapper.module.native.ts index eb8bdb7..42cacdd 100644 --- a/libs/ui/src/lib-base/ui/tag/tag.wrapper/tag.wrapper.module.native.ts +++ b/libs/ui/src/lib-base/ui/tag/tag.wrapper/tag.wrapper.module.native.ts @@ -1,7 +1,18 @@ import { StyleSheet } from 'react-native'; export const styles = StyleSheet.create({ - card: { - borderRadius: 100, + tagWrapper: { + display: 'flex', + flexDirection: 'row', + gap: 15, + }, + leftAlign: { + justifyContent: 'flex-start', + }, + centerAlign: { + justifyContent: 'center', + }, + rightAlign: { + justifyContent: 'flex-end', }, }); diff --git a/libs/ui/src/lib-base/ui/tag/tag.wrapper/tag.wrapper.view.tsx b/libs/ui/src/lib-base/ui/tag/tag.wrapper/tag.wrapper.view.tsx index 64b88e9..5750e16 100644 --- a/libs/ui/src/lib-base/ui/tag/tag.wrapper/tag.wrapper.view.tsx +++ b/libs/ui/src/lib-base/ui/tag/tag.wrapper/tag.wrapper.view.tsx @@ -1,11 +1,11 @@ -import { memo, PropsWithChildren, ReactElement } from 'react'; +import { memo, type PropsWithChildren, type ReactElement } from 'react'; import { classNamesUtil } from '@pokemon-pet-shop/utils'; import { UiElementLayout } from '../../element.layout'; import { TagWrapperAlignEnum } from './tag.wrapper.enum'; -import { TagProps } from './tag.wrapper.interface'; +import type { TagProps } from './tag.wrapper.interface'; import { styles } from './tag.wrapper.module'; const Tag = ({ diff --git a/libs/utils/src/index.ts b/libs/utils/src/index.ts index c53976c..85ca7a6 100644 --- a/libs/utils/src/index.ts +++ b/libs/utils/src/index.ts @@ -11,3 +11,4 @@ export * from './lib-base/utils/trim-content.util'; export * from './lib-base/utils/date-format.util'; export * from './lib-base/utils/noop.util'; export * from './lib-base/utils/pricing.util'; +export * from './lib-base/utils/detect.util'; diff --git a/libs/utils/src/lib-base/utils/detect.util.native.ts b/libs/utils/src/lib-base/utils/detect.util.native.ts new file mode 100644 index 0000000..5cff509 --- /dev/null +++ b/libs/utils/src/lib-base/utils/detect.util.native.ts @@ -0,0 +1,3 @@ +export const detectUtil = () => { + return 'isNative'; +}; diff --git a/libs/utils/src/lib-base/utils/detect.util.ts b/libs/utils/src/lib-base/utils/detect.util.ts new file mode 100644 index 0000000..68c1d85 --- /dev/null +++ b/libs/utils/src/lib-base/utils/detect.util.ts @@ -0,0 +1,3 @@ +export const detectUtil = () => { + return 'isWeb'; +}; diff --git a/tsconfig.base.json b/tsconfig.base.json index bfde3a8..7556c03 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -25,6 +25,7 @@ "@pokemon-pet-shop/typing/web": ["libs/typing/src/index_web.ts"], "@pokemon-pet-shop/ui": ["libs/ui/src/index.ts"], "@pokemon-pet-shop/ui/native": ["libs/ui/src/index_native.ts"], + "@pokemon-pet-shop/ui/styles": ["libs/ui/src/lib-base/styles/css/global.css"], "@pokemon-pet-shop/utils": ["libs/utils/src/index.ts"] } },