fix: lang package typescript

- added tsconfig - added eslint for react props to be split into multiple lines - ran eslint auto fix
bigcommerce · Jul 15, 2022 · 3663208 · 3663208
1 parent 7976a20
commit 3663208
Show file tree

Hide file tree

Showing 14 changed files with 140 additions and 33 deletions.
diff --git a/apps/storefront/src/App.tsx b/apps/storefront/src/App.tsx
@@ -28,8 +28,14 @@ export default function App() {
             <Layout close={() => setIsOpen(false)}>
               bundle b2b
               <Routes>
-                <Route path="/" element={<Home />} />
-                <Route path="/form" element={<Form />} />
+                <Route
+                  path="/"
+                  element={<Home />}
+                />
+                <Route
+                  path="/form"
+                  element={<Form />}
+                />
               </Routes>
             </Layout>
           ) : null}

diff --git 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` }}
       >
         <Toolbar>
-          <Typography variant="h6" noWrap component="div">
+          <Typography
+            variant="h6"
+            noWrap
+            component="div"
+          >
             B2B App
           </Typography>
         </Toolbar>
@@ -60,8 +64,14 @@ export function Layout({
             { label: 'Home', to: '/', icon: HomeIcon },
             { label: 'Form', to: '/form', icon: VerifiedUserIcon },
           ].map(({ label, icon: Icon, to }) => (
-            <ListItem disablePadding key={label}>
-              <ListItemButton component={RouterLink} to={to}>
+            <ListItem
+              disablePadding
+              key={label}
+            >
+              <ListItemButton
+                component={RouterLink}
+                to={to}
+              >
                 <ListItemIcon>
                   <Icon />
                 </ListItemIcon>

diff --git 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(
-  <LangProvider locales={locales} supportLang={SUPPORT_LANGUAGE}>
+  <LangProvider
+    locales={locales}
+    supportLang={SUPPORT_LANGUAGE}
+  >
     <B3ThemeProvider>
       <App />
     </B3ThemeProvider>

diff --git a/apps/storefront/src/pages/Form.tsx b/apps/storefront/src/pages/Form.tsx
@@ -16,8 +16,15 @@ export function Form() {
         event.preventDefault()
       }}
     >
-      <Grid container spacing={3}>
-        <Grid item xs={12} sm={6}>
+      <Grid
+        container
+        spacing={3}
+      >
+        <Grid
+          item
+          xs={12}
+          sm={6}
+        >
           <TextField
             required
             id="firstName"
@@ -28,7 +35,11 @@ export function Form() {
             variant={Variant}
           />
         </Grid>
-        <Grid item xs={12} sm={6}>
+        <Grid
+          item
+          xs={12}
+          sm={6}
+        >
           <TextField
             required
             id="lastName"
@@ -39,7 +50,10 @@ export function Form() {
             variant={Variant}
           />
         </Grid>
-        <Grid item xs={12}>
+        <Grid
+          item
+          xs={12}
+        >
           <TextField
             required
             id="address1"
@@ -50,7 +64,10 @@ export function Form() {
             variant={Variant}
           />
         </Grid>
-        <Grid item xs={12}>
+        <Grid
+          item
+          xs={12}
+        >
           <TextField
             id="address2"
             name="address2"
@@ -60,7 +77,11 @@ export function Form() {
             variant={Variant}
           />
         </Grid>
-        <Grid item xs={12} sm={6}>
+        <Grid
+          item
+          xs={12}
+          sm={6}
+        >
           <TextField
             required
             id="city"
@@ -71,7 +92,11 @@ export function Form() {
             variant={Variant}
           />
         </Grid>
-        <Grid item xs={12} sm={6}>
+        <Grid
+          item
+          xs={12}
+          sm={6}
+        >
           <TextField
             id="state"
             name="state"
@@ -80,7 +105,11 @@ export function Form() {
             variant={Variant}
           />
         </Grid>
-        <Grid item xs={12} sm={6}>
+        <Grid
+          item
+          xs={12}
+          sm={6}
+        >
           <TextField
             required
             id="zip"
@@ -91,7 +120,11 @@ export function Form() {
             variant={Variant}
           />
         </Grid>
-        <Grid item xs={12} sm={6}>
+        <Grid
+          item
+          xs={12}
+          sm={6}
+        >
           <TextField
             required
             id="country"
@@ -102,17 +135,28 @@ export function Form() {
             variant={Variant}
           />
         </Grid>
-        <Grid item xs={12}>
+        <Grid
+          item
+          xs={12}
+        >
           <FormControlLabel
-            control={
-              <Checkbox color="secondary" name="saveAddress" value="yes" />
-            }
+            control={(
+              <Checkbox
+                color="secondary"
+                name="saveAddress"
+                value="yes"
+              />
+            )}
             label="Use this address for payment details"
           />
         </Grid>
       </Grid>
       <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-        <Button type="submit" variant="contained" sx={{ mt: 3, ml: 1 }}>
+        <Button
+          type="submit"
+          variant="contained"
+          sx={{ mt: 3, ml: 1 }}
+        >
           Save
         </Button>
       </Box>

diff --git a/apps/storefront/src/pages/Home.tsx b/apps/storefront/src/pages/Home.tsx
@@ -20,10 +20,17 @@ export function Home() {
   return (
     <Card sx={{ minWidth: 275 }}>
       <CardContent>
-        <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
+        <Typography
+          sx={{ fontSize: 14 }}
+          color="text.secondary"
+          gutterBottom
+        >
           Word of the Day
         </Typography>
-        <Typography variant="h5" component="div">
+        <Typography
+          variant="h5"
+          component="div"
+        >
           be
           {bull}
           nev
@@ -32,7 +39,10 @@ export function Home() {
           {bull}
           lent
         </Typography>
-        <Typography sx={{ mb: 1.5 }} color="text.secondary">
+        <Typography
+          sx={{ mb: 1.5 }}
+          color="text.secondary"
+        >
           adjective
         </Typography>
         <Typography variant="body2">

diff --git 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
@@ -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
@@ -22,7 +22,11 @@ export const LangProvider = ({
 
   return (
     <LangContextProvider>
-      <IntlProvider messages={locales[lang]} locale={lang} defaultLocale="en">
+      <IntlProvider
+        messages={locales[lang]}
+        locale={lang}
+        defaultLocale="en"
+      >
         {children}
       </IntlProvider>
     </LangContextProvider>

diff --git a/packages/lang/context/LangContext.tsx b/packages/lang/context/LangContext.tsx
@@ -35,7 +35,9 @@ type LangReducer = Reducer<LangContextState, LangContextAction>
 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 (
     <LangContext.Provider value={LangValue}>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,