@toptal/picasso-provider 3.5.1 → 4.0.0

package/src/Picasso/styles.tsx

@@ -0,0 +1,19 @@
+import type { Theme } from '@material-ui/core'
+import { createStyles } from '@material-ui/core'
+
+export default ({ typography }: Theme) =>
+  createStyles({
+    root: {
+      flex: 1,
+      boxSizing: 'border-box',
+
+      '& *': {
+        fontFamily: typography.fontFamily,
+      },
+
+      // https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
+      '& *, & *::before, & *::after': {
+        boxSizing: 'inherit',
+      },
+    },
+  })

package/src/Picasso/utils/generate-random-string.ts

@@ -0,0 +1,12 @@
+const generateRandomStringOrGetEmptyInTest = (base = '') => {
+  if (process.env.NODE_ENV === 'test') {
+    return base
+  }
+
+  return base + generateRandomString()
+}
+
+// https://stackoverflow.com/questions/1349404/generate-random-string-characters-in-javascript
+const generateRandomString = () => Math.random().toString(36).substring(7)
+
+export { generateRandomString, generateRandomStringOrGetEmptyInTest }

package/src/Picasso/utils/get-serverside-stylesheets.ts

@@ -0,0 +1,17 @@
+import { createGenerateClassName, ServerStyleSheets } from '@material-ui/core'
+
+const getServersideStylesheets = (
+  generateClassNameSeed = ''
+): ServerStyleSheets => {
+  const generateClassName = createGenerateClassName({
+    seed: generateClassNameSeed,
+  })
+
+  const sheets = new ServerStyleSheets({
+    serverGenerateClassName: generateClassName,
+  })
+
+  return sheets
+}
+
+export { getServersideStylesheets }

package/src/Picasso/utils/index.ts

@@ -0,0 +1,4 @@
+export * from './generate-random-string'
+export * from './get-serverside-stylesheets'
+export * from './spacings'
+export * from './responsive-styles'

package/src/Picasso/utils/responsive-styles/create-jss-variable-class-names.test.ts

@@ -0,0 +1,17 @@
+import { createJssVariableClassNames } from './create-jss-variable-class-names'
+
+describe('createJssVariableClassNames', () => {
+  it('returns an object with the correct class name and CSS property', () => {
+    const breakpoint = 'md'
+    const cssProp = 'padding'
+
+    const expectedClassName = 'md--padding'
+    const expectedVariable = 'var(--picasso-responsive--md--padding)'
+
+    const result = createJssVariableClassNames(breakpoint, cssProp)
+
+    expect(Object.keys(result)).toHaveLength(1)
+    expect(result[expectedClassName]).toBeDefined()
+    expect(result[expectedClassName][cssProp]).toEqual(expectedVariable)
+  })
+})

package/src/Picasso/utils/responsive-styles/create-jss-variable-class-names.ts

@@ -0,0 +1,30 @@
+import type { BreakpointKeys } from '../../config'
+import { toClassName } from './to-class-name'
+import { toCssVariableName } from './to-css-variable-name'
+import type { ResponsiveCssProp } from './types'
+
+/**
+ * Creates a CSS class for a given breakpoint and CSS property
+ * that sets the value of the CSS property to the value of the CSS variable
+ * for that breakpoint and CSS property.
+ *
+ * Simplified example, for `margin-top` CSS property and `xs` breakpoint:
+ * ```css
+ * .xs--margin-top {
+ *    margin-top: var(--picasso-responsive--xs--margin-top);
+ * }
+ * ```
+ */
+export const createJssVariableClassNames = (
+  breakpoint: BreakpointKeys,
+  cssProp: ResponsiveCssProp
+) => {
+  const className = toClassName(breakpoint, cssProp)
+  const variable = `var(${toCssVariableName(breakpoint, cssProp)})`
+
+  return {
+    [className]: {
+      [cssProp]: variable,
+    },
+  }
+}

package/src/Picasso/utils/responsive-styles/create-media-queries.test.ts

@@ -0,0 +1,32 @@
+import type { Theme } from '@material-ui/core'
+
+import { createMediaQueries } from './create-media-queries'
+
+describe('createMediaQueries', () => {
+  it('returns media queries with the correct class names and CSS properties', () => {
+    const cssProp = 'padding'
+    const theme = {
+      breakpoints: {
+        keys: ['sm', 'md'],
+        up: (breakpoint: number) => `@media (min-width: ${breakpoint})`,
+      },
+    }
+
+    const expectedMediaQueries = {
+      '@media (min-width: md)': {
+        'md--padding': {
+          padding: 'var(--picasso-responsive--md--padding)',
+        },
+      },
+      '@media (min-width: sm)': {
+        'sm--padding': {
+          padding: 'var(--picasso-responsive--sm--padding)',
+        },
+      },
+    }
+
+    const result = createMediaQueries(cssProp, theme as Theme)
+
+    expect(result).toEqual(expectedMediaQueries)
+  })
+})

package/src/Picasso/utils/responsive-styles/create-media-queries.ts

@@ -0,0 +1,32 @@
+import type { Theme } from '@material-ui/core/styles'
+
+import { createJssVariableClassNames } from './create-jss-variable-class-names'
+import type { ResponsiveCssProp } from './types'
+
+/**
+ * Creates a CSS class for *every* breakpoint and a given CSS property
+ * containing a media query for that breakpoint and sets the value of the CSS property
+ * to the value of the CSS variable for that breakpoint and CSS property.
+ *
+ * Simplified example, for `margin-top` CSS property and `xs` breakpoint:
+ * ```css
+ * @media (min-width: 0px) {
+ *   .xs--margin-top {
+ *     margin-top: var(--picasso-responsive--xs--margin-top);
+ *   }
+ * }
+ * ```
+ */
+export const createMediaQueries = (
+  cssProp: ResponsiveCssProp,
+  theme: Theme
+) => {
+  const mediaQueries: Record<string, {}> = {}
+
+  for (const breakpoint of [...theme.breakpoints.keys].reverse()) {
+    mediaQueries[theme.breakpoints.up(breakpoint)] =
+      createJssVariableClassNames(breakpoint, cssProp)
+  }
+
+  return mediaQueries
+}

package/src/Picasso/utils/responsive-styles/create-variable-values-jss.test.ts

@@ -0,0 +1,24 @@
+import { SPACING_2, SPACING_4, SPACING_6 } from '../../config/spacings'
+import { createVariableValuesJss } from './create-variable-values-jss'
+
+describe('createVariableValuesJss', () => {
+  it('returns an object with the correct variable names and values', () => {
+    const spacing = {
+      sm: SPACING_2,
+      md: SPACING_4,
+      lg: SPACING_6,
+    }
+
+    const prop = 'margin'
+
+    const expectedStyles = {
+      '--picasso-responsive--lg--margin': '1.5rem',
+      '--picasso-responsive--md--margin': '1rem',
+      '--picasso-responsive--sm--margin': '0.5rem',
+    }
+
+    const result = createVariableValuesJss(spacing, prop)
+
+    expect(result).toEqual(expectedStyles)
+  })
+})

package/src/Picasso/utils/responsive-styles/create-variable-values-jss.ts

@@ -0,0 +1,21 @@
+import type { BreakpointKeys, ResponsiveSpacingType } from '../../config'
+import { spacingToRem } from '../spacings'
+import { toCssVariableName } from './to-css-variable-name'
+import type { ResponsiveCssProp } from './types'
+
+/**
+ * Creates a CSS class setting the picasso responsive CSS variable of the given CSS property
+ * for all breakpoints on the responsive spacing value
+ */
+export const createVariableValuesJss = (
+  spacing: ResponsiveSpacingType,
+  prop: ResponsiveCssProp
+) => {
+  const styles: Record<string, string> = {}
+
+  for (const [brk, value] of Object.entries(spacing)) {
+    styles[toCssVariableName(brk as BreakpointKeys, prop)] = spacingToRem(value)
+  }
+
+  return styles
+}

package/src/Picasso/utils/responsive-styles/default-css-prop.test.ts

@@ -0,0 +1,15 @@
+import { defaultCssProp } from './default-css-prop'
+
+describe('defaultCssProp', () => {
+  it('returns an object with the kebab-case CSS property converted to camelCase and the value converted to rem format', () => {
+    const value = 8
+    const prop = 'margin'
+    const expectedStyles = {
+      margin: '8rem',
+    }
+
+    const result = defaultCssProp(value, prop)
+
+    expect(result).toEqual(expectedStyles)
+  })
+})

package/src/Picasso/utils/responsive-styles/default-css-prop.ts

@@ -0,0 +1,15 @@
+import { kebabToCamelCase } from '../../../utils'
+import type { ResponsiveSpacingType, SpacingType } from '../../config'
+import type { ResponsiveCssProp } from './types'
+import { spacingToRem } from '../spacings'
+
+/**
+ * Just the default for a value that is not responsive
+ * Just set the prop directly on all media queries
+ */
+export const defaultCssProp = (
+  value: Exclude<SpacingType, ResponsiveSpacingType>,
+  prop: ResponsiveCssProp
+) => ({
+  [kebabToCamelCase(prop)]: spacingToRem(value),
+})

package/src/Picasso/utils/responsive-styles/generate-variable-inline-styles.test.ts

@@ -0,0 +1,20 @@
+import { SPACING_4, SPACING_8 } from '../../config/spacings'
+import { generateVariableInlineStyles } from './generate-variable-inline-styles'
+
+describe('generateVariableInlineStyles', () => {
+  it('returns an object with inline styles based on the provided props and values', () => {
+    const props = ['margin', 'padding']
+    const values = {
+      margin: SPACING_8,
+      padding: SPACING_4,
+    }
+    const expectedInlineStyles = {
+      margin: '2rem',
+      padding: '1rem',
+    }
+
+    const result = generateVariableInlineStyles(props, values)
+
+    expect(result).toEqual(expectedInlineStyles)
+  })
+})

package/src/Picasso/utils/responsive-styles/generate-variable-inline-styles.ts

@@ -0,0 +1,26 @@
+import { isResponsiveSpacing } from '../../config'
+import { createVariableValuesJss } from './create-variable-values-jss'
+import { defaultCssProp } from './default-css-prop'
+import type { ResponsiveCssSpacings } from './types'
+
+export const generateVariableInlineStyles = <K extends string>(
+  props: readonly K[],
+  values: ResponsiveCssSpacings<K>
+) => {
+  const styles: Record<string, string> = {}
+
+  for (const prop of props) {
+    const value = values[prop]
+
+    if (value) {
+      Object.assign(
+        styles,
+        isResponsiveSpacing(value)
+          ? createVariableValuesJss(value, prop)
+          : defaultCssProp(value, prop)
+      )
+    }
+  }
+
+  return styles
+}

package/src/Picasso/utils/responsive-styles/get-breakpoint-class-names-to-use.test.ts

@@ -0,0 +1,20 @@
+import { SPACING_1, SPACING_2, SPACING_4 } from '../../config/spacings'
+import { getBreakpointClassNamesToUse } from './get-breakpoint-class-names-to-use'
+
+describe('getBreakpointClassNamesToUse', () => {
+  it('returns an array of unique classNames based on the provided props and propSizes', () => {
+    const props = ['margin', 'padding']
+    const propSizes = {
+      margin: SPACING_1,
+      padding: {
+        sm: SPACING_2,
+        md: SPACING_4,
+      },
+    }
+    const expectedClassNames = ['sm--padding', 'md--padding']
+
+    const result = getBreakpointClassNamesToUse(props, propSizes)
+
+    expect(result).toEqual(expectedClassNames)
+  })
+})

package/src/Picasso/utils/responsive-styles/get-breakpoint-class-names-to-use.ts

@@ -0,0 +1,28 @@
+import type { BreakpointKeys } from '../../config'
+import { isResponsiveSpacing } from '../../config'
+import { toClassName } from './to-class-name'
+import type { ResponsiveCssSpacings } from './types'
+
+/**
+ * Filter which media queries CSS classes should be applied,
+ * we want to the element to fallback to the previous layer, so we only apply
+ * the media queries that are explicitly set on spacing value
+ */
+export const getBreakpointClassNamesToUse = <K extends string>(
+  props: readonly K[],
+  propSizes: ResponsiveCssSpacings<K>
+) => {
+  const classNames = new Set<string>()
+
+  for (const prop of props) {
+    const spacing = propSizes[prop]
+
+    if (spacing && isResponsiveSpacing(spacing)) {
+      Object.keys(spacing)
+        .map(brk => toClassName(brk as BreakpointKeys, prop))
+        .forEach(classNames.add, classNames)
+    }
+  }
+
+  return [...classNames]
+}

package/{Picasso/utils/responsive-styles/index.d.ts → src/Picasso/utils/responsive-styles/index.ts}

@@ -1 +1 @@
-export { default as makeResponsiveSpacingProps } from './make-responsive-spacing-props';
+export { default as makeResponsiveSpacingProps } from './make-responsive-spacing-props'

package/src/Picasso/utils/responsive-styles/make-responsive-spacing-props.ts

@@ -0,0 +1,34 @@
+import cx from 'classnames'
+import type { Theme } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core'
+
+import { mediaQueriesClasses } from './media-queries-classes'
+import type { ResponsiveCssProp, ResponsiveCssSpacings } from './types'
+import { getBreakpointClassNamesToUse } from './get-breakpoint-class-names-to-use'
+import { generateVariableInlineStyles } from './generate-variable-inline-styles'
+
+const makeResponsiveSpacingProps = <K extends ResponsiveCssProp>(
+  props: readonly K[],
+  name: string
+) => {
+  const useStyles = makeStyles<Theme>(
+    (theme: Theme) => mediaQueriesClasses(props, theme),
+    {
+      name: name,
+    }
+  )
+
+  const useResponsiveClassNames = (propValues: ResponsiveCssSpacings<K>) => {
+    const classes = useStyles()
+    const mediaQueries = getBreakpointClassNamesToUse(props, propValues)
+
+    return {
+      className: cx(...mediaQueries.map(brkClassName => classes[brkClassName])),
+      style: generateVariableInlineStyles(props, propValues),
+    }
+  }
+
+  return useResponsiveClassNames
+}
+
+export default makeResponsiveSpacingProps

package/src/Picasso/utils/responsive-styles/media-queries-classes.test.ts

@@ -0,0 +1,32 @@
+import type { Theme } from '@material-ui/core'
+
+import { mediaQueriesClasses } from './media-queries-classes'
+
+describe('mediaQueriesClasses', () => {
+  it('returns an object with media queries classes based on the responsive props and theme', () => {
+    const responsiveProps = ['margin']
+    const theme = {
+      breakpoints: {
+        keys: ['sm', 'md'],
+        up: (breakpoint: number) => `@media (min-width: ${breakpoint})`,
+      },
+    }
+
+    const expectedMediaQueries = {
+      '@media (min-width: md)': {
+        'md--margin': {
+          margin: 'var(--picasso-responsive--md--margin)',
+        },
+      },
+      '@media (min-width: sm)': {
+        'sm--margin': {
+          margin: 'var(--picasso-responsive--sm--margin)',
+        },
+      },
+    }
+
+    const result = mediaQueriesClasses(responsiveProps, theme as Theme)
+
+    expect(result).toEqual(expectedMediaQueries)
+  })
+})

package/src/Picasso/utils/responsive-styles/media-queries-classes.ts

@@ -0,0 +1,28 @@
+import type { Theme } from '@material-ui/core'
+
+import type { ResponsiveCssProp } from './types'
+import { createMediaQueries } from './create-media-queries'
+
+/**
+ * Just aggregate all the media queries classes
+ * for all responsive props passed
+ */
+export const mediaQueriesClasses = <K extends ResponsiveCssProp>(
+  responsiveProps: readonly K[],
+  theme: Theme
+) => {
+  const mediaQueries: Record<string, Record<string, string>> = {}
+
+  for (const prop of responsiveProps) {
+    const newMediaQueries = createMediaQueries(prop, theme)
+
+    for (const [brk, value] of Object.entries(newMediaQueries)) {
+      mediaQueries[brk] = {
+        ...mediaQueries[brk],
+        ...value,
+      }
+    }
+  }
+
+  return mediaQueries
+}

package/src/Picasso/utils/responsive-styles/to-class-name.test.ts

@@ -0,0 +1,13 @@
+import { toClassName } from './to-class-name'
+
+describe('toClassName', () => {
+  it('returns a string with the breakpoint and prop separated by a double dash', () => {
+    const breakpoint = 'md'
+    const prop = 'color'
+    const expectedClassName = 'md--color'
+
+    const result = toClassName(breakpoint, prop)
+
+    expect(result).toBe(expectedClassName)
+  })
+})

package/src/Picasso/utils/responsive-styles/to-class-name.ts

@@ -0,0 +1,9 @@
+import type { BreakpointKeys } from '../../config'
+import type { ResponsiveCssProp } from './types'
+
+export const toClassName = (
+  breakpoint: BreakpointKeys,
+  prop: ResponsiveCssProp
+) => {
+  return `${breakpoint}--${prop}`
+}

package/src/Picasso/utils/responsive-styles/to-css-variable-name.test.ts

@@ -0,0 +1,13 @@
+import { toCssVariableName } from './to-css-variable-name'
+
+describe('toCssVariableName', () => {
+  it('returns a string in the correct format with the breakpoint and prop', () => {
+    const breakpoint = 'md'
+    const prop = 'color'
+    const expectedCssVariableName = '--picasso-responsive--md--color'
+
+    const result = toCssVariableName(breakpoint, prop)
+
+    expect(result).toBe(expectedCssVariableName)
+  })
+})

package/src/Picasso/utils/responsive-styles/to-css-variable-name.ts

@@ -0,0 +1,9 @@
+import type { BreakpointKeys } from '../../config'
+import type { ResponsiveCssProp } from './types'
+
+export const toCssVariableName = (
+  breakpoint: BreakpointKeys,
+  prop: ResponsiveCssProp
+) => {
+  return `--picasso-responsive--${breakpoint}--${prop}`
+}

package/src/Picasso/utils/responsive-styles/types.ts

@@ -0,0 +1,7 @@
+import type { SpacingType } from '../../config'
+
+export type ResponsiveCssProp = string // String for now, we can narrow it to CSS props eventually
+
+export type ResponsiveCssSpacings<K extends ResponsiveCssProp> = {
+  [k in K]: SpacingType | undefined
+}

package/src/Picasso/utils/spacings.test.ts

@@ -0,0 +1,47 @@
+import { spacingToRem } from './spacings'
+import {
+  SPACING_0,
+  SPACING_1,
+  SPACING_2,
+  SPACING_3,
+  SPACING_4,
+  SPACING_6,
+  SPACING_8,
+  SPACING_10,
+  SPACING_12,
+} from '../config/spacings'
+
+describe('spacingUtils', () => {
+  describe('spacingToRem', () => {
+    describe('when spacing is a number', () => {
+      it('converts to rem', () => {
+        expect(spacingToRem(1)).toBe('1rem')
+        expect(spacingToRem(2.5)).toBe('2.5rem')
+      })
+    })
+
+    describe('when spacing is a valid Picasso spacing', () => {
+      it('converts to rem', () => {
+        expect(spacingToRem(SPACING_0)).toBe('0rem')
+        expect(spacingToRem(SPACING_1)).toBe('0.25rem')
+        expect(spacingToRem(SPACING_2)).toBe('0.5rem')
+        expect(spacingToRem(SPACING_3)).toBe('0.75rem')
+        expect(spacingToRem(SPACING_4)).toBe('1rem')
+        expect(spacingToRem(SPACING_6)).toBe('1.5rem')
+        expect(spacingToRem(SPACING_8)).toBe('2rem')
+        expect(spacingToRem(SPACING_10)).toBe('2.5rem')
+        expect(spacingToRem(SPACING_12)).toBe('3rem')
+      })
+    })
+
+    describe('when spacing is a string Picasso spacing', () => {
+      it('converts to rem', () => {
+        expect(spacingToRem('xsmall')).toBe('0.5rem')
+        expect(spacingToRem('small')).toBe('1rem')
+        expect(spacingToRem('medium')).toBe('1.5rem')
+        expect(spacingToRem('large')).toBe('2rem')
+        expect(spacingToRem('xlarge')).toBe('2.5rem')
+      })
+    })
+  })
+})

package/src/Picasso/utils/spacings.ts

@@ -0,0 +1,14 @@
+import type { ResponsiveSpacingType, SpacingType } from '../config/spacings'
+import { SpacingEnum, isPicassoSpacing } from '../config/spacings'
+
+const spacingToRem = (
+  spacing: Exclude<SpacingType, ResponsiveSpacingType>
+): string => {
+  if (typeof spacing == 'number' || isPicassoSpacing(spacing)) {
+    return `${spacing.valueOf()}rem`
+  }
+
+  return `${SpacingEnum[spacing]}rem`
+}
+
+export { spacingToRem }

package/src/PreventPageWidthChangeOnScrollbar/PreventPageWidthChangeOnScrollbar.tsx

@@ -0,0 +1,20 @@
+import type { Theme } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
+
+import styles from './styles'
+
+const useStyles = makeStyles<Theme>(styles, {
+  name: 'PicassoPreventPageWidthChangeOnScrollbar',
+})
+
+/**
+ * This component applies global styles that fix the problem with jumping page width.
+ * The problem comes from disappearing vertical page scrollbar due to varying page height.
+ */
+const PreventPageWidthChangeOnScrollbar = () => {
+  useStyles()
+
+  return null
+}
+
+export default PreventPageWidthChangeOnScrollbar

package/src/PreventPageWidthChangeOnScrollbar/index.ts

@@ -0,0 +1 @@
+export { default } from './PreventPageWidthChangeOnScrollbar'

package/src/PreventPageWidthChangeOnScrollbar/styles.ts

@@ -0,0 +1,17 @@
+import type { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/core/styles'
+
+export default ({ screens }: Theme) =>
+  createStyles({
+    '@global': {
+      [screens('md', 'lg', 'xl')]: {
+        html: {
+          width: '100%',
+          overflowX: 'hidden',
+        },
+        body: {
+          width: '100vw',
+        },
+      },
+    },
+  })

package/{hooks/index.d.ts → src/hooks/index.ts}

@@ -1 +1 @@
-export { default as useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
+export { default as useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect'

package/src/hooks/use-isomorphic-layout-effect.ts

@@ -0,0 +1,8 @@
+// eslint-disable-next-line no-restricted-imports
+import { useLayoutEffect, useEffect } from 'react'
+
+import isBrowser from '../utils/is-browser'
+
+const useIsomorphicLayoutEffect = isBrowser() ? useLayoutEffect : useEffect
+
+export default useIsomorphicLayoutEffect