@smartbooks-ai/layout 0.0.6 → 0.0.8

package/src/theme/colorPrimitives.ts

@@ -1,107 +0,0 @@
-import { ColorPrimitives } from '../emotion';
-
-export const colorPrimitives: ColorPrimitives = {
-  darkNavy: {
-    '50': '#E6E8EC',
-    '100': '#CBCCD9',
-    '200': '#B2B5C6',
-    '300': '#989BB2',
-    '400': '#7E82A0',
-    '500': '#65698B',
-    '600': '#4E5376',
-    '700': '#373B60',
-    '800': '#20244A',
-    '900': '#120A32',
-    '950': '#0E0828',
-  },
-  coolMint: {
-    '50': '#ECF7F7',
-    '100': '#DAEEEF',
-    '200': '#C7E6E7',
-    '300': '#B5DEDF',
-    '400': '#A2D6D7',
-    '500': '#8FCDCF',
-    '600': '#7DC5C7',
-    '700': '#6ABDBF',
-    '800': '#58B4B7',
-    '900': '#45ACAF',
-    '950': '#3E9B9E',
-  },
-  coral: {
-    '50': '#FFF2ED',
-    '100': '#FEE5DB',
-    '200': '#FED8C9',
-    '300': '#FDCBB7',
-    '400': '#FDBEA6',
-    '500': '#FCB194',
-    '600': '#FCA482',
-    '700': '#FB9770',
-    '800': '#FB8A5E',
-    '900': '#FA7D4C',
-    '950': '#E17144',
-  },
-  navy: {
-    '50': '#E8EDF9',
-    '100': '#D0DCF3',
-    '200': '#B9CAEC',
-    '300': '#A1B9E6',
-    '400': '#8AA7E0',
-    '500': '#7395DA',
-    '600': '#5B84D4',
-    '700': '#4472CD',
-    '800': '#2C61C7',
-    '900': '#154FC1',
-    '950': '#1347AE',
-  },
-  skyBlue: {
-    '50': '#ECF9FB',
-    '100': '#D9F2F8',
-    '200': '#C6ECF4',
-    '300': '#B3E5F1',
-    '400': '#A0DFED',
-    '500': '#8CD9E9',
-    '600': '#79D2E6',
-    '700': '#66CCE2',
-    '800': '#53C5DF',
-    '900': '#40BFDB',
-    '950': '#3AACC5',
-  },
-  grey: {
-    '50': '#FAFAFA',
-    '100': '#FAF9F9',
-    '200': '#F0EFEF',
-    '300': '#E1E0E0',
-    '400': '#C8C7C7',
-    '500': '#AFAEAE',
-    '600': '#969595',
-    '700': '#7D7D7D',
-    '800': '#4E4E4E',
-    '900': '#383838',
-    '950': '#222222',
-  },
-  common: {
-    black: '#000000',
-    white: '#ffffff',
-  },
-  warning: {
-    '100': '#FEF7F0',
-    '300': '#FCE6CF',
-    '600': '#F7B46E',
-    '900': '#DF770C',
-    '950': '#B25F0A',
-  },
-  error: {
-    '100': '#FDF2F1',
-    '300': '#F9D2D2',
-    '600': '#EE7877',
-    '900': '#D11C1A',
-    '950': '#A71615',
-  },
-  success: {
-    '100': '#F1F8F6',
-    '300': '#D9F2E8',
-    '600': '#88DDBC',
-    '900': '#26A675',
-    '950': '#1E855E',
-  },
-};

package/src/theme/colors.ts

@@ -1,78 +0,0 @@
-import { Theme } from '@emotion/react';
-
-import { colorPrimitives } from './colorPrimitives';
-
-export const colors: Theme['my']['colors'] = {
-  primitives: colorPrimitives,
-  text: {
-    main: colorPrimitives.darkNavy[800],
-    light: colorPrimitives.darkNavy[600],
-    lighter: colorPrimitives.darkNavy[400],
-    disabled: colorPrimitives.grey[600],
-    placeholder: colorPrimitives.grey[400],
-    white: colorPrimitives.common.white,
-  },
-  primary: {
-    main: colorPrimitives.darkNavy[900],
-    light: colorPrimitives.darkNavy[600],
-    dark: colorPrimitives.darkNavy[950],
-    contrast: colorPrimitives.common.white,
-  },
-  secondary: {
-    main: colorPrimitives.coolMint[900],
-    light: colorPrimitives.coolMint[600],
-    dark: colorPrimitives.coolMint[950],
-    contrast: colorPrimitives.common.white,
-  },
-  tertiary: {
-    main: colorPrimitives.coral[900],
-    light: colorPrimitives.coral[600],
-    dark: colorPrimitives.coral[950],
-    contrast: colorPrimitives.common.white,
-  },
-  quaternary: {
-    main: colorPrimitives.navy[900],
-    light: colorPrimitives.navy[600],
-    dark: colorPrimitives.navy[950],
-    contrast: colorPrimitives.common.white,
-  },
-  quinary: {
-    main: colorPrimitives.skyBlue[900],
-    light: colorPrimitives.skyBlue[600],
-    dark: colorPrimitives.skyBlue[950],
-    contrast: colorPrimitives.common.white,
-  },
-  neutral: {
-    main: colorPrimitives.grey[900],
-    light: colorPrimitives.grey[500],
-    dark: colorPrimitives.grey[950],
-    contrast: colorPrimitives.common.white,
-  },
-  warning: {
-    main: colorPrimitives.warning[900],
-    light: colorPrimitives.warning[600],
-    dark: colorPrimitives.warning[950],
-    contrast: colorPrimitives.common.white,
-  },
-  error: {
-    main: colorPrimitives.error[900],
-    light: colorPrimitives.error[600],
-    dark: colorPrimitives.error[950],
-    contrast: colorPrimitives.common.white,
-  },
-  success: {
-    main: colorPrimitives.success[900],
-    light: colorPrimitives.success[600],
-    dark: colorPrimitives.success[950],
-    contrast: colorPrimitives.common.white,
-  },
-  background: {
-    white: colorPrimitives.common.white,
-    lightGrey: colorPrimitives.grey[50],
-    transparent: 'transparent',
-    light: colorPrimitives.darkNavy[50],
-    hover: 'rgb(255 255 255 / 8%)',
-    hoverDark: 'rgb(0 0 0 / 8%)',
-    hoverDarkNonTransparent: '#ebebeb',
-  },
-};

package/src/theme/font.ts

@@ -1,27 +0,0 @@
-import { Theme } from '@emotion/react';
-
-export const FONT_FAMILY = 'Arial, sans-serif';
-
-export const font: Theme['my']['font'] = {
-  h1: `        600 1.5rem/2       ${FONT_FAMILY}`,
-  h2: `        700 1.25rem/1.75   ${FONT_FAMILY}`,
-  h3: `        700 1.125rem/1.5   ${FONT_FAMILY}`,
-  h4: `        700 1rem/1.25      ${FONT_FAMILY}`,
-  h5: `        700 0.875rem/1.25  ${FONT_FAMILY}`,
-  h6: `        700 0.8125rem/1    ${FONT_FAMILY}`,
-  subtitle1: ` 500 1.25rem/1.75   ${FONT_FAMILY}`,
-  subtitle2: ` 500 1rem/1.5       ${FONT_FAMILY}`,
-  body1: `     400 1rem/1.5       ${FONT_FAMILY}`,
-  body2: `     400 0.875rem/1.25  ${FONT_FAMILY}`,
-  body3: `     400 0.8125rem/1    ${FONT_FAMILY}`,
-  highlight1: `700 1rem/1.5       ${FONT_FAMILY}`,
-  highlight2: `700 0.875rem/1.25  ${FONT_FAMILY}`,
-  highlight3: `500 0.8125rem/1    ${FONT_FAMILY}`,
-  button1: `   500 0.875rem/1.5   ${FONT_FAMILY}`,
-  button2: `   500 0.875rem/1.25  ${FONT_FAMILY}`,
-  caption: `   400 1rem/1.5       ${FONT_FAMILY}`,
-  overline: `  500 1rem/1.5       ${FONT_FAMILY}`,
-  label: `     500 0.875rem/1.25  ${FONT_FAMILY}`,
-  nav1: `      400 0.8125rem/1.25 ${FONT_FAMILY}`,
-  nav2: `      700 0.8125rem/1.25 ${FONT_FAMILY}`,
-};

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"]
-}