From 366320866e5c126b7b13a467950a777cd10c8efd Mon Sep 17 00:00:00 2001 From: Micah Thomas Date: Fri, 15 Jul 2022 13:08:50 -0600 Subject: [PATCH] fix: lang package typescript - added tsconfig - added eslint for react props to be split into multiple lines - ran eslint auto fix --- apps/storefront/src/App.tsx | 10 +++- apps/storefront/src/components/Layout.tsx | 16 ++++- apps/storefront/src/main.tsx | 5 +- apps/storefront/src/pages/Form.tsx | 72 ++++++++++++++++++----- apps/storefront/src/pages/Home.tsx | 16 ++++- apps/storefront/src/theme.tsx | 3 +- packages/eslint-config-b3/index.js | 6 ++ packages/lang/LangProvider.tsx | 6 +- packages/lang/context/LangContext.tsx | 8 ++- packages/lang/locales/en-US/index.ts | 3 +- packages/lang/package.json | 9 +++ packages/lang/tsconfig.json | 8 +++ packages/lang/useB3CurrentLang.ts | 8 +-- packages/lang/useB3Lang.ts | 3 +- 14 files changed, 140 insertions(+), 33 deletions(-) create mode 100644 packages/lang/tsconfig.json diff --git a/apps/storefront/src/App.tsx b/apps/storefront/src/App.tsx index 4ddc1946..177b820f 100644 --- a/apps/storefront/src/App.tsx +++ b/apps/storefront/src/App.tsx @@ -28,8 +28,14 @@ export default function App() { setIsOpen(false)}> bundle b2b - } /> - } /> + } + /> + } + /> ) : null} diff --git a/apps/storefront/src/components/Layout.tsx b/apps/storefront/src/components/Layout.tsx index 2efcb69f..fb21de06 100644 --- a/apps/storefront/src/components/Layout.tsx +++ b/apps/storefront/src/components/Layout.tsx @@ -36,7 +36,11 @@ export function Layout({ sx={{ width: `calc(100% - ${drawerWidth}px)`, ml: `${drawerWidth}px` }} > - + B2B App @@ -60,8 +64,14 @@ export function Layout({ { label: 'Home', to: '/', icon: HomeIcon }, { label: 'Form', to: '/form', icon: VerifiedUserIcon }, ].map(({ label, icon: Icon, to }) => ( - - + + diff --git a/apps/storefront/src/main.tsx b/apps/storefront/src/main.tsx index e1160af2..9575eb0c 100644 --- a/apps/storefront/src/main.tsx +++ b/apps/storefront/src/main.tsx @@ -20,7 +20,10 @@ if (!container) { container.className = 'bundle-namespace' ReactDOM.createRoot(container).render( - + diff --git a/apps/storefront/src/pages/Form.tsx b/apps/storefront/src/pages/Form.tsx index 454980e0..6fde68a2 100644 --- a/apps/storefront/src/pages/Form.tsx +++ b/apps/storefront/src/pages/Form.tsx @@ -16,8 +16,15 @@ export function Form() { event.preventDefault() }} > - - + + - + - + - + - + - + - + - + - + - } + control={( + + )} label="Use this address for payment details" /> - diff --git a/apps/storefront/src/pages/Home.tsx b/apps/storefront/src/pages/Home.tsx index d5b8f81d..2072f805 100644 --- a/apps/storefront/src/pages/Home.tsx +++ b/apps/storefront/src/pages/Home.tsx @@ -20,10 +20,17 @@ export function Home() { return ( - + Word of the Day - + be {bull} nev @@ -32,7 +39,10 @@ export function Home() { {bull} lent - + adjective diff --git a/apps/storefront/src/theme.tsx b/apps/storefront/src/theme.tsx index 2b5e5c92..432bdee3 100644 --- a/apps/storefront/src/theme.tsx +++ b/apps/storefront/src/theme.tsx @@ -26,7 +26,8 @@ type Props = { children?: React.ReactNode; } -const theme = (lang: string) => createTheme({}, (materialMultiLanguages as MaterialMultiLanguagesType)[MUI_LANG_MAP[lang] || 'enUS']) +const theme = (lang: string) => createTheme({ +}, (materialMultiLanguages as MaterialMultiLanguagesType)[MUI_LANG_MAP[lang] || 'enUS']) function B3ThemeProvider({ children }: Props) { const [lang] = useB3CurrentLang() diff --git a/packages/eslint-config-b3/index.js b/packages/eslint-config-b3/index.js index 16ecae59..598a05a2 100644 --- a/packages/eslint-config-b3/index.js +++ b/packages/eslint-config-b3/index.js @@ -23,6 +23,12 @@ module.exports = { 'react/function-component-definition': 0, 'react/react-in-jsx-scope': 0, 'react/require-default-props': 0, + 'react/jsx-max-props-per-line': [ + 1, + { + maximum: 1, + }, + ], 'react/destructuring-assignment': 0, 'react/no-danger': 0, 'import/extensions': 0, diff --git a/packages/lang/LangProvider.tsx b/packages/lang/LangProvider.tsx index 6273850b..a0a92928 100644 --- a/packages/lang/LangProvider.tsx +++ b/packages/lang/LangProvider.tsx @@ -22,7 +22,11 @@ export const LangProvider = ({ return ( - + {children} diff --git a/packages/lang/context/LangContext.tsx b/packages/lang/context/LangContext.tsx index 63eb2e97..dd177dcc 100644 --- a/packages/lang/context/LangContext.tsx +++ b/packages/lang/context/LangContext.tsx @@ -35,7 +35,9 @@ type LangReducer = Reducer const langReducer: LangReducer = (state, action) => { switch (action.type) { case 'lang': - return { ...state, ...action.payload } + return { + ...state, ...action.payload, + } default: return state } @@ -50,7 +52,9 @@ export function LangContextProvider(props: LangContextProviderProps) { const { children } = props - const LangValue = useMemo(() => ({ state, dispatch }), [state.lang]) + const LangValue = useMemo(() => ({ + state, dispatch, + }), [state.lang]) return ( diff --git a/packages/lang/locales/en-US/index.ts b/packages/lang/locales/en-US/index.ts index 0e212055..14d60925 100644 --- a/packages/lang/locales/en-US/index.ts +++ b/packages/lang/locales/en-US/index.ts @@ -1 +1,2 @@ -export const en = {} +export const en = { +} diff --git a/packages/lang/package.json b/packages/lang/package.json index 71fc1ece..809e888d 100644 --- a/packages/lang/package.json +++ b/packages/lang/package.json @@ -8,5 +8,14 @@ }, "dependencies": { "react-intl": "^5.20.3" + }, + "devDependencies": { + "@b3/tsconfig": "*", + "@types/react": "^18.0.0", + "@types/react-dom": "^18.0.0", + "eslint": "^8.2.0", + "react": "^18.0.0", + "tsup": "^5.10.1", + "typescript": "^4.6.3" } } diff --git a/packages/lang/tsconfig.json b/packages/lang/tsconfig.json new file mode 100644 index 00000000..7bb426a6 --- /dev/null +++ b/packages/lang/tsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "lib": ["dom", "ES2015"], + }, + "extends": "@b3/tsconfig/react-library.json", + "include": ["."], + "exclude": ["dist", "build", "node_modules"] +} diff --git a/packages/lang/useB3CurrentLang.ts b/packages/lang/useB3CurrentLang.ts index 7bc10a28..2aa5fdbb 100644 --- a/packages/lang/useB3CurrentLang.ts +++ b/packages/lang/useB3CurrentLang.ts @@ -1,6 +1,4 @@ -import { - useContext, -} from 'react' +import { useContext } from 'react' import { LangContext } from './context/LangContext' @@ -10,7 +8,9 @@ export const useB3CurrentLang = () => { if (dispatch) { dispatch({ type: 'lang', - payload: { lang }, + payload: { + lang, + }, }) } } diff --git a/packages/lang/useB3Lang.ts b/packages/lang/useB3Lang.ts index 95ac8a82..545e2c4d 100644 --- a/packages/lang/useB3Lang.ts +++ b/packages/lang/useB3Lang.ts @@ -2,7 +2,8 @@ import { useIntl } from 'react-intl' export const useB3Lang = () => { const intl = useIntl() - return (id: string, options = {}) => ( + return (id: string, options = { + }) => ( id ? intl.formatMessage({ id, defaultMessage: id,