@smartbooks-ai/layout 0.0.5 → 0.0.7

package/src/theme/globalStyles.tsx

@@ -1,55 +0,0 @@
-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

@@ -1,228 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,14 +0,0 @@
-/**
- * @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

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

package/src/utils/shouldNotForwardPropsWithKeys.ts

@@ -1,7 +0,0 @@
-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

@@ -1,34 +0,0 @@
-{
-  "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"]
-}