@toptal/picasso-provider 3.5.1 → 4.0.0

package/src/Picasso/config/breakpoints.ts

@@ -0,0 +1,194 @@
+/* eslint-disable complexity */
+import { useState, useEffect, useCallback } from 'react'
+import type { BreakpointValues } from '@material-ui/core/styles/createBreakpoints'
+import useMediaQuery from '@material-ui/core/useMediaQuery'
+
+import { isBrowser } from '../../utils'
+
+export type BreakpointKeys = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+type BreakpointsList = {
+  [key: string]: number
+}
+
+class BreakpointProvider {
+  breakpoints: Record<'values', BreakpointValues> = {
+    values: {
+      xs: 0,
+      sm: 480,
+      md: 768,
+      lg: 1024,
+      xl: 1440,
+    },
+  }
+
+  mediaQueries: {
+    [key in BreakpointKeys]: string
+  }
+
+  constructor() {
+    const { sm, md, lg, xl } = this.breakpoints.values
+
+    this.mediaQueries = {
+      xs: `(max-width: ${sm - 0.02}px)`,
+      sm: `(min-width: ${sm}px) and (max-width: ${md - 0.02}px)`,
+      md: `(min-width: ${md}px) and (max-width: ${lg - 0.02}px)`,
+      lg: `(min-width: ${lg}px) and (max-width: ${xl - 0.02}px)`,
+      xl: `(min-width: ${xl}px)`,
+    }
+  }
+
+  disableMobileBreakpoints() {
+    this.breakpoints.values.xs = 768
+    this.breakpoints.values.sm = 768
+
+    this.mediaQueries.xs = ''
+    this.mediaQueries.sm = ''
+    this.mediaQueries.md = ''
+  }
+}
+
+export const PicassoBreakpoints = new BreakpointProvider()
+
+export const breakpointsList: BreakpointsList =
+  PicassoBreakpoints.breakpoints.values
+
+export const screens = (...sizes: BreakpointKeys[]) => {
+  const validSizes = sizes.filter(size => PicassoBreakpoints.mediaQueries[size])
+
+  if (validSizes.length === 0) {
+    return ''
+  }
+
+  const mediaQueries = validSizes
+    .map(size => PicassoBreakpoints.mediaQueries[size])
+    .join(', ')
+
+  return `@media ${mediaQueries}`
+}
+
+const screenSizeToBreakpointKey = (size: number): BreakpointKeys => {
+  /**
+   * Gets a screen size nickname that corresponds to the given screen size.
+   *
+   * For the list of breakpoint names and pixel-values we use in designs, check
+   * https://picasso.toptal.net/?path=/story/utils-breakpoints--breakpoints
+   *
+   * @param {number} size Screen size
+   */
+
+  const { sm, md, lg, xl } = PicassoBreakpoints.breakpoints.values
+
+  if (size < sm) {
+    return 'xs'
+  } else if (size >= sm && size < md) {
+    return 'sm'
+  } else if (size >= md && size < lg) {
+    return 'md'
+  } else if (size >= lg && size < xl) {
+    return 'lg'
+  }
+
+  return 'xl'
+}
+
+export const isScreenSize = (
+  size: keyof BreakpointsList,
+  currentSize?: number
+): boolean => {
+  const sizeToUse = currentSize || window.innerWidth
+  const foundBreakpoint = screenSizeToBreakpointKey(sizeToUse)
+
+  return size === foundBreakpoint
+}
+
+export const useScreenSize = () => {
+  const [size, setSize] = useState(isBrowser() ? window.innerWidth : 0)
+
+  const updateSize = () => setSize(window.innerWidth)
+
+  useEffect(() => {
+    window.addEventListener('resize', updateSize)
+
+    return () => {
+      window.removeEventListener('resize', updateSize)
+    }
+  }, [])
+
+  return size
+}
+
+export const useBreakpoint = (sizes: BreakpointKeys[] | BreakpointKeys) => {
+  const mediaQueryString = screens(...([] as BreakpointKeys[]).concat(sizes))
+  const mediaQuery = useMediaQuery(mediaQueryString, {
+    noSsr: true,
+  })
+
+  if (!mediaQueryString) {
+    return false
+  }
+
+  return mediaQuery
+}
+
+/**
+ * Returns a function that picks a value from a {screenSize=>anyValue} object map.
+ *
+ * The function returned accepts 2 arguments:
+ * 1. An object mapping values to screen size nicknames, e.g.
+ *   { sm: 'secondary', lg: 'positive' }
+ * 2. A default value to use if no keys match in the object
+ *
+ * The function returns a value from the first argument that corresponds to the current
+ * screen size, or the default value, if no corresponding key found.
+ *
+ * The returned function is memoized per screen size name.
+ *
+ * @example <caption>Varying both `variant` prop and button text with using the hook</caption>
+ * const screens = useScreens()
+ * <Button
+ *   variant={screens(
+ *     {
+ *       sm: 'secondary',
+ *       lg: 'positive'
+ *     },
+ *     'primary'
+ *   )}
+ * >
+ * {screens(
+ *   {
+ *     sm: 'small (secondary)',
+ *     lg: 'large (positive)'
+ *   },
+ *   'default (primary)'
+ * )}
+ * </Button>
+ */
+export const useScreens = <T = unknown>() => {
+  // Get current screen size in pixels, e.g. 800
+  const currentSize = useScreenSize()
+
+  // Convert the retrieved screen size in pixels (e.g. 800)
+  // to its corresponding screen size name (e.g. 'large')
+  const screenKey = screenSizeToBreakpointKey(currentSize)
+
+  // For every screenKey value, memoize the instance of a function
+  // that picks a property from an object by screen name,
+  // and return this memoized version of the function.
+  return useCallback(
+    (
+      valuesByScreen: Partial<Record<BreakpointKeys, T>>,
+      defaultValue: T | undefined = undefined
+    ) => {
+      if (screenKey in valuesByScreen) {
+        return valuesByScreen[screenKey]
+      }
+
+      return defaultValue
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [screenKey]
+  )
+}
+
+export default PicassoBreakpoints.breakpoints

package/src/Picasso/config/index.ts

@@ -0,0 +1,28 @@
+import './theme'
+export { default as palette, colors, gradients } from './palette'
+export { default as transitions } from './transitions'
+export { default as typography } from './typography'
+export { default as sizes } from './sizes'
+export {
+  default as breakpoints,
+  PicassoBreakpoints,
+  screens,
+  isScreenSize,
+  breakpointsList,
+  useScreenSize,
+  useBreakpoint,
+  useScreens,
+  BreakpointKeys,
+} from './breakpoints'
+export { default as layout } from './layout'
+export { default as shadows } from './shadows'
+export * from './spacings'
+export { default as spacings } from './spacings'
+export type {
+  Sizes,
+  SizeType,
+  SpacingType,
+  ResponsiveSpacingType,
+  DeprecatedSpacingType,
+  PicassoSpacing,
+} from './spacings'

package/src/Picasso/config/layout.ts

@@ -0,0 +1,16 @@
+export interface Layout {
+  contentWidthWide: string
+  contentWidth: string
+  contentMinWidth?: string
+  contentPaddingHorizontal: string
+  contentMobilePaddingHorizontal: string
+}
+
+const layout: Layout = {
+  contentWidthWide: '90em',
+  contentWidth: '75em',
+  contentPaddingHorizontal: '2em',
+  contentMobilePaddingHorizontal: '1em',
+}
+
+export default layout

package/src/Picasso/config/palette.ts

@@ -0,0 +1,110 @@
+interface ColorSample {
+  lightest?: string
+  lighter?: string
+  lighter2?: string
+  light?: string
+  light2?: string
+  main?: string
+  main2?: string
+  dark?: string
+  darker?: string
+}
+
+declare module '@material-ui/core/styles/createPalette' {
+  export interface SimplePaletteColorOptions extends ColorSample {}
+
+  interface Palette {
+    blue: SimplePaletteColorOptions
+    green: SimplePaletteColorOptions
+    yellow: SimplePaletteColorOptions
+    red: SimplePaletteColorOptions
+    purple: SimplePaletteColorOptions
+    gradients: {
+      blue: string
+      darkerBlue: string
+      lightGrey: string
+      grey: string
+      darkerGrey: string
+    }
+  }
+}
+
+declare module '@material-ui/core' {
+  export interface Color extends ColorSample {}
+}
+
+export const colors = {
+  grey: {
+    lightest: '#fcfcfc',
+    lighter: '#f3f4f6',
+    lighter2: '#ebeced',
+    light: '#e5e7ea',
+    light2: '#d8d9dc',
+    main: '#c4c6ca',
+    main2: '#84888e',
+    dark: '#455065',
+    darker: '#262d3d',
+  },
+  blue: {
+    lighter: '#edf1fd',
+    light: '#25a9ef',
+    main: '#204ecf',
+    dark: '#183a9e',
+    darker: '#0f256e',
+  },
+  yellow: {
+    lighter: '#fff5e3',
+    main: '#e59c01',
+  },
+  red: {
+    lighter: '#fbedf1',
+    main: '#d42551',
+  },
+  green: {
+    lighter: '#eafbf5',
+    main: '#00cc83',
+    dark: '#03b080',
+    darker: '#05947c',
+  },
+  purple: {
+    main: '#6727cf',
+  },
+  common: {
+    black: '#000',
+    white: '#fff',
+  },
+}
+
+export const gradients = {
+  blue: `linear-gradient(to right bottom, ${colors.blue.darker}, ${colors.blue.main})`,
+  darkerBlue: `linear-gradient(to right bottom, #071237, ${colors.blue.darker})`,
+  lightGrey: `linear-gradient(to right bottom, ${colors.grey.light}, ${colors.common.white})`,
+  grey: `linear-gradient(to right bottom, ${colors.grey.darker}, ${colors.grey.dark})`,
+  darkerGrey: `linear-gradient(to right bottom, ${colors.common.black}, ${colors.grey.darker})`,
+}
+
+const palette = {
+  // MUI adds additional colors, like `contrastText` to the
+  // palette. So to prevent changing colors object we should
+  // deep copy it.
+  ...JSON.parse(JSON.stringify(colors)),
+  primary: JSON.parse(JSON.stringify(colors.blue)),
+  error: JSON.parse(JSON.stringify(colors.red)),
+  grey: {
+    100: colors.grey.lighter2,
+    200: colors.grey.light2,
+    300: colors.grey.main,
+    400: colors.grey.dark,
+    500: colors.grey.darker,
+    ...colors.grey,
+  },
+  text: {
+    primary: colors.grey.dark,
+  },
+  background: {
+    default: colors.common.white,
+  },
+  gradients,
+}
+
+export default palette

package/src/Picasso/config/shadows.ts

@@ -0,0 +1,73 @@
+type Shadows = [
+  'none',
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string
+]
+
+const muiShadows = [
+  '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)',
+  '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)',
+  '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)',
+  '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)',
+  '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)',
+  '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)',
+  '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)',
+  '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)',
+  '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)',
+  '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)',
+  '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)',
+  '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)',
+  '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)',
+  '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)',
+  '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)',
+  '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)',
+  '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)',
+  '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)',
+  '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)',
+]
+
+const shadows: Shadows = [
+  ...[
+    'none',
+
+    /** notification center, paper */
+    '0 0 8px 0 rgba(0,0,0, 0.08)',
+
+    /** modal */
+    '0 4px 8px 0 rgba(0,0,0, 0.08)',
+
+    /** nofication growl */
+    '0 0 0 1px rgba(0, 0, 0, 0.04), 0 0 8px 0 rgba(0, 0, 0, 0.16)',
+
+    /** tooltip */
+    '0 0 4px 0 rgba(0,0,0, 0.24), 0 0 32px 0 rgba(0,0,0, 0.12)',
+
+    /** scroll menu */
+    '0 0 0 1px rgba(0, 0, 0, 0.04), 0 8px 12px -3px rgba(0, 0, 0, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.04)',
+  ],
+  ...muiShadows,
+] as Shadows
+
+export default shadows

package/src/Picasso/config/sizes.ts

@@ -0,0 +1,27 @@
+export interface Sizes {
+  borderWidth: string
+  borderRadius: {
+    small: string
+    medium: string
+  }
+  input: {
+    height: string
+    width: string
+    padding: string
+  }
+}
+
+const sizes = {
+  borderWidth: '1px',
+  borderRadius: {
+    small: '4px',
+    medium: '8px',
+  },
+  input: {
+    height: '2rem',
+    width: '18.75rem',
+    padding: '0.5rem',
+  },
+}
+
+export default sizes

package/src/Picasso/config/spacings.ts

@@ -0,0 +1,102 @@
+import type { BreakpointKeys } from './breakpoints'
+
+// BASE-aligned spacing values in "rem" units
+type PicassoSpacingValues = 0 | 0.25 | 0.5 | 0.75 | 1 | 1.5 | 2 | 2.5 | 3
+
+export type Sizes =
+  | 'xxsmall'
+  | 'xsmall'
+  | 'small'
+  | 'medium'
+  | 'large'
+  | 'xlarge'
+
+export type SizeType<T extends Sizes> = T
+
+/**
+ * @deprecated [FX-4438] Use {@link PicassoSpacing} or {@link ResponsiveSpacingType} instead
+ **/
+export type DeprecatedSpacingType =
+  | number
+  | SizeType<'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'>
+
+export type ResponsiveSpacingType = {
+  [key in BreakpointKeys]?: PicassoSpacing
+}
+export type SpacingType =
+  | PicassoSpacing
+  | DeprecatedSpacingType
+  | ResponsiveSpacingType
+
+export enum SpacingEnum {
+  xsmall = 0.5,
+  small = 1,
+  medium = 1.5,
+  large = 2,
+  xlarge = 2.5,
+}
+
+class PicassoSpacing {
+  #value: PicassoSpacingValues
+  /**
+   * Corresponds to token index in https://toptal-core.atlassian.net/wiki/spaces/Base/pages/3217031216/Spacing
+   */
+  baseTokenIndex: number
+
+  private constructor(value: PicassoSpacingValues, index: number) {
+    this.#value = value
+    this.baseTokenIndex = index
+  }
+
+  static create(value: PicassoSpacingValues, index: number): PicassoSpacing {
+    return new PicassoSpacing(value, index)
+  }
+
+  /**
+   * @deprecated [FX-4713] Use "baseTokenIndex" property directly
+   */
+  indexOf(): number {
+    return this.baseTokenIndex
+  }
+
+  valueOf(): PicassoSpacingValues {
+    return this.#value
+  }
+
+  toString(): string {
+    return this.#value.toString()
+  }
+}
+
+export type { PicassoSpacing }
+
+export const isPicassoSpacing = (
+  spacing: SpacingType
+): spacing is PicassoSpacing => spacing instanceof PicassoSpacing
+
+export const isResponsiveSpacing = (
+  spacing: SpacingType
+): spacing is ResponsiveSpacingType =>
+  typeof spacing == 'object' && !isPicassoSpacing(spacing)
+
+export const SPACING_0 = PicassoSpacing.create(0, 0)
+export const SPACING_1 = PicassoSpacing.create(0.25, 1)
+export const SPACING_2 = PicassoSpacing.create(0.5, 2)
+export const SPACING_3 = PicassoSpacing.create(0.75, 3)
+export const SPACING_4 = PicassoSpacing.create(1, 4)
+export const SPACING_6 = PicassoSpacing.create(1.5, 6)
+export const SPACING_8 = PicassoSpacing.create(2, 8)
+export const SPACING_10 = PicassoSpacing.create(2.5, 10)
+export const SPACING_12 = PicassoSpacing.create(3, 12)
+
+export default {
+  SPACING_0,
+  SPACING_1,
+  SPACING_2,
+  SPACING_3,
+  SPACING_4,
+  SPACING_6,
+  SPACING_8,
+  SPACING_10,
+  SPACING_12,
+} as Record<string, PicassoSpacing>