@smartbooks-ai/layout 0.0.3

package/src/theme/globalStyles.tsx

@@ -0,0 +1,55 @@
+import { GlobalStyles as MUIGlobalStyles } from '@mui/material';
+
+export default function GlobalStyles() {
+  const inputGlobalStyles = (
+    <MUIGlobalStyles
+      styles={{
+        '@keyframes mui-auto-fill': { from: { display: 'block' } },
+        '@keyframes mui-auto-fill-cancel': { from: { display: 'block' } },
+        '*': {
+          boxSizing: 'border-box',
+        },
+        html: {
+          margin: 0,
+          padding: 0,
+          width: '100%',
+          height: '100%',
+          WebkitOverflowScrolling: 'touch',
+        },
+        body: {
+          margin: 0,
+          padding: 0,
+          width: '100%',
+          height: '100%',
+        },
+        '#root': {
+          width: '100%',
+          height: '100%',
+        },
+        input: {
+          '&[type=number]': {
+            MozAppearance: 'textfield',
+            '&::-webkit-outer-spin-button': {
+              margin: 0,
+              WebkitAppearance: 'none',
+            },
+            '&::-webkit-inner-spin-button': {
+              margin: 0,
+              WebkitAppearance: 'none',
+            },
+          },
+        },
+        img: {
+          display: 'block',
+          maxWidth: '100%',
+        },
+        ul: {
+          margin: 0,
+          padding: 0,
+        },
+      }}
+    />
+  );
+
+  return inputGlobalStyles;
+}

package/src/theme/index.tsx

@@ -0,0 +1,228 @@
+import { forwardRef } from 'react';
+
+import { ThemeProvider as EmotionThemeProvider, css } from '@emotion/react';
+import ExpandedMoreRoundedIcon from '@mui/icons-material/ExpandMoreRounded';
+import { listItemTextClasses } from '@mui/material';
+import { buttonClasses } from '@mui/material/Button';
+import CssBaseline from '@mui/material/CssBaseline';
+import { LinkProps } from '@mui/material/Link';
+import {
+  ThemeProvider as MUIThemeProvider,
+  ThemeOptions as MuiThemeOptions,
+  StyledEngineProvider,
+  createTheme,
+} from '@mui/material/styles';
+import type {} from '@mui/x-date-pickers/themeAugmentation';
+import { rem } from 'polished';
+import { Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router';
+
+import { colorPrimitives } from './colorPrimitives';
+import { colors } from './colors';
+import { font } from './font';
+import GlobalStyles from './globalStyles';
+import { radius } from './radius';
+import { spacing } from './spacing';
+import typography from './typography';
+
+import { ThemeOptions } from '../emotion';
+
+const LinkBehavior = forwardRef<HTMLAnchorElement, Omit<RouterLinkProps, 'to'> & { href: RouterLinkProps['to'] }>(
+  ({ href, ...other }, ref) => <RouterLink ref={ref} to={href} {...other} />,
+);
+
+const muiTextField = {
+  defaultProps: {
+    variant: 'outlined',
+    margin: 'normal',
+    size: 'small',
+    InputLabelProps: { shrink: true },
+    SelectProps: { displayEmpty: true },
+  },
+} as const;
+
+const muiOutlinedInput = {
+  styleOverrides: {
+    notchedOutline: css`
+      border-color: ${colorPrimitives.darkNavy[100]};
+    `,
+  },
+} as const;
+
+const muiTheme: MuiThemeOptions = {
+  shape: { borderRadius: 6 },
+  typography,
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        a: css`
+          color: '#000000';
+
+          text-decoration: none;
+        `,
+      },
+    },
+    MuiAccordionDetails: {
+      styleOverrides: {
+        root: css`
+          display: flex;
+
+          flex-direction: column;
+
+          row-gap: ${spacing.xxs};
+        `,
+      },
+    },
+    MuiDialogContent: {
+      styleOverrides: {
+        root: css`
+          display: flex;
+
+          flex-direction: column;
+
+          row-gap: ${spacing.sm};
+
+          min-width: 30rem;
+        `,
+      },
+    },
+    MuiCheckbox: {
+      defaultProps: {
+        size: 'small',
+      },
+    },
+    MuiFormControlLabel: {
+      styleOverrides: {
+        label: css`
+          overflow: hidden;
+          text-overflow: ellipsis;
+
+          font: ${font.body2};
+
+          white-space: nowrap;
+        `,
+      },
+    },
+    MuiInputBase: {
+      defaultProps: {
+        disableInjectingGlobalStyles: true,
+      },
+    },
+    MuiTextField: muiTextField,
+    MuiPickersTextField: muiTextField,
+    MuiAccordion: {
+      defaultProps: {
+        elevation: 3,
+        slotProps: { transition: { unmountOnExit: true } },
+      },
+    },
+    MuiAccordionSummary: {
+      defaultProps: {
+        expandIcon: <ExpandedMoreRoundedIcon />,
+      },
+    },
+    MuiLink: {
+      defaultProps: {
+        component: LinkBehavior,
+      } as LinkProps,
+      styleOverrides: {
+        root: ({ theme }) => css`
+          color: ${theme.palette.primary.main};
+
+          text-decoration-color: inherit;
+          text-underline-offset: 0.25rem;
+
+          &:hover {
+            color: ${theme.palette.primary.dark};
+          }
+        `,
+      },
+    },
+    MuiOutlinedInput: muiOutlinedInput,
+    MuiPickersOutlinedInput: muiOutlinedInput,
+    MuiButtonGroup: {
+      defaultProps: {
+        disableRipple: true,
+      },
+    },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: css`
+          font: ${font.body3};
+        `,
+      },
+    },
+    MuiButtonBase: {
+      styleOverrides: {
+        root: css`
+          &.${buttonClasses.outlined} {
+            border: 0.0625rem solid ${colorPrimitives.darkNavy[100]};
+
+            &:hover {
+              /* For button groups - we should bring the border of hovered button in front of the other ones */
+              z-index: 1;
+
+              background: none;
+              border: 0.0625rem solid ${colorPrimitives.darkNavy[800]};
+            }
+          }
+        `,
+      },
+      defaultProps: {
+        disableRipple: true,
+        LinkComponent: LinkBehavior,
+        type: 'button',
+      },
+    },
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: css`
+          font: ${font.body3};
+
+          line-height: 1.5;
+
+          letter-spacing: 0.05rem;
+
+          background-color: ${colorPrimitives.darkNavy[900]};
+        `,
+      },
+    },
+    MuiSelect: {
+      styleOverrides: {
+        select: css`
+          .${listItemTextClasses.root} {
+            margin-top: ${rem(2)};
+            margin-bottom: ${rem(2)};
+          }
+        `,
+      },
+    },
+  },
+};
+
+const themeValue: ThemeOptions = {
+  ...muiTheme,
+  my: {
+    font,
+    radius,
+    spacing,
+    colors,
+  },
+};
+
+const theme = createTheme(themeValue);
+
+export function ThemeProvider(props: React.PropsWithChildren) {
+  return (
+    <StyledEngineProvider injectFirst={true}>
+      <MUIThemeProvider theme={theme}>
+        <EmotionThemeProvider theme={theme}>
+          <CssBaseline />
+
+          <GlobalStyles />
+
+          {props.children}
+        </EmotionThemeProvider>
+      </MUIThemeProvider>
+    </StyledEngineProvider>
+  );
+}

package/src/theme/radius.ts

@@ -0,0 +1,12 @@
+import { Theme } from '@emotion/react';
+
+export const radius: Theme['my']['radius'] = {
+  sq: '0',
+  xs: '0.125rem',
+  sm: '0.25rem',
+  md: '0.5rem',
+  lg: '0.75rem',
+  xl: '1rem',
+  xxl: '1.5rem',
+  xxxl: '2rem',
+};

package/src/theme/spacing.ts

@@ -0,0 +1,12 @@
+import { Theme } from '@emotion/react';
+
+export const spacing: Theme['my']['spacing'] = {
+  xxxs: '0.25rem',
+  xxs: '0.5rem',
+  xs: '0.75rem',
+  sm: '1rem',
+  md: '1.5rem',
+  lg: '2rem',
+  xl: '2.5rem',
+  xxl: '3rem',
+};

package/src/theme/typography.ts

@@ -0,0 +1,40 @@
+import { TypographyStyle, TypographyVariantsOptions } from '@mui/material';
+
+import { FONT_FAMILY, font } from './font';
+
+import { FontStyleName } from '../emotion';
+
+const stylesForFont = (fontName: FontStyleName): TypographyStyle => ({
+  font: font[fontName],
+
+  // This is needed to prevent overrides
+  fontFamily: undefined,
+  fontWeight: undefined,
+  fontSize: undefined,
+  lineHeight: undefined,
+});
+
+const typography: TypographyVariantsOptions = {
+  fontFamily: FONT_FAMILY,
+  fontWeightRegular: 400,
+  fontWeightMedium: 600,
+  fontWeightBold: 700,
+  h1: stylesForFont('h1'),
+  h2: stylesForFont('h2'),
+  h3: stylesForFont('h3'),
+  h4: stylesForFont('h4'),
+  h5: stylesForFont('h5'),
+  h6: stylesForFont('h6'),
+  subtitle1: stylesForFont('subtitle1'),
+  subtitle2: stylesForFont('subtitle2'),
+  body1: stylesForFont('body1'),
+  body2: stylesForFont('body2'),
+  caption: stylesForFont('caption'),
+  overline: stylesForFont('overline'),
+  button: {
+    ...stylesForFont('button1'),
+    textTransform: 'inherit',
+  },
+};
+
+export default typography;

package/src/utils/assertNever.ts

@@ -0,0 +1,14 @@
+/**
+ * @example
+ * const a: 'one' | 'two' = 'one';
+ *
+ * switch(a) {
+ *   case 'one':
+ *     return 1;
+ *   case 'two':
+ *     return 2;
+ *   default:
+ *     return assertNever(a); // Works fine, but if we change the type of `a` to `'one' | 'two' | 'three'` then we get an error here
+ * }
+ */
+export const assertNever = (input: never): never => input;

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export { assertNever } from './assertNever';
+export { shouldNotForwardPropsWithKeys } from './shouldNotForwardPropsWithKeys';

package/src/utils/shouldNotForwardPropsWithKeys.ts

@@ -0,0 +1,7 @@
+import { StyledOptions } from '@emotion/styled';
+
+export const shouldNotForwardPropsWithKeys = <TCustomProps extends object>(
+  keys: (keyof TCustomProps)[],
+): StyledOptions<TCustomProps> => ({
+  shouldForwardProp: (propName: PropertyKey) => !keys.map((key) => key.toString()).includes(propName.toString()),
+});

package/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "extends": "@tsconfig/vite-react/tsconfig.json",
+  "compilerOptions": {
+    "target": "ES2023",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": false,
+    "verbatimModuleSyntax": false,
+    "moduleDetection": "force",
+    "noEmit": false,
+    "emitDeclarationOnly": false,
+    "declaration": true,
+    "declarationMap": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "@emotion/react",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "erasableSyntaxOnly": false,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "incremental": true,
+    "composite": true,
+    "tsBuildInfoFile": "./tsconfig.layout.tsbuildinfo",
+    "baseUrl": ".",
+    "paths": {}
+  },
+  "include": ["src/**/*", "src/emotion.d.ts"],
+  "exclude": ["dist", "node_modules"]
+}