@toptal/picasso-utils 1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-ca4ef823d.4082 → 1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-c6a9da7e9.4084

package/src/utils/Breakpoints/story/index.jsx

@@ -0,0 +1,60 @@
+import PicassoBook from '~/.storybook/components/PicassoBook'
+
+const page = PicassoBook.section('Utils').createPage(
+  'Breakpoints',
+  `
+      For optimal user experience, we need to be able to adapt layout
+      at various breakpoints. Each breakpoint matches with a fixed screen
+      width.
+    `
+)
+
+page
+  .createChapter()
+  .addExample(
+    'utils/Breakpoints/story/Breakpoints.example.tsx',
+    {
+      title: 'Breakpoints',
+      description: `
+    The list of breakpoint names and pixel-values we use while we design and do layouts
+  `,
+      showEditCode: false,
+      takeScreenshot: false,
+    },
+    'base/Utils'
+  )
+  .addExample(
+    'utils/Breakpoints/story/MediaQueries.example.tsx',
+    {
+      title: 'Media queries',
+      description: `
+    Picasso provides a function 'screens' to be able to 
+    easily create media queries based on the given breakpoints
+  `,
+      takeScreenshot: false,
+    },
+    'base/Utils'
+  )
+  .addExample(
+    'utils/Breakpoints/story/useBreakpoint.example.tsx',
+    {
+      title: 'useBreakpoint',
+      description: `
+    Provides programmatic way to check what screen size defined by breakpoints is active
+  `,
+      takeScreenshot: false,
+    },
+    'base/Utils'
+  )
+  .addExample(
+    'utils/Breakpoints/story/useScreens.example.tsx',
+    {
+      title: 'useScreens',
+      description: `
+    Provides a programmatic way to switch between different values depending on screen size. The function returned by useScreens is memoized per screen size, so there are no performance penalties if re-rendering happens often.
+  `,
+      showEditCode: true,
+      takeScreenshot: false,
+    },
+    'base/Utils'
+  )

package/src/utils/Breakpoints/story/useBreakpoint.example.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { useBreakpoint } from '@toptal/picasso-utils'
+import { Typography } from '@toptal/picasso'
+
+const Example = () => {
+  const isSmall = useBreakpoint('sm')
+  const isSmallOrMedium = useBreakpoint(['sm', 'md'])
+
+  return (
+    <>
+      <Typography>{`Breakpoint 'small' matches: ${isSmall}`}</Typography>
+      <Typography>{`Breakpoint 'small' or 'medium' matches: ${isSmallOrMedium}`}</Typography>
+    </>
+  )
+}
+
+export default Example

package/src/utils/Breakpoints/story/useScreens.example.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { useScreens, SPACING_8 } from '@toptal/picasso-utils'
+import type { ButtonVariantType } from '@toptal/picasso'
+import { Typography, Button, Container } from '@toptal/picasso'
+
+const Example = () => {
+  const screens = useScreens<ButtonVariantType>()
+  const screenTexts = useScreens<string>()
+
+  return (
+    <>
+      <Container bottom={SPACING_8}>
+        <Typography variant='heading' size='medium'>
+          Current screen breakpoint:{' '}
+          {screenTexts({
+            xs: 'xs',
+            sm: 'sm',
+            md: 'md',
+            lg: 'lg',
+            xl: 'xl',
+          })}
+        </Typography>
+      </Container>
+      <Typography as='span'>
+        The button below will use:
+        <ul>
+          <li>
+            <strong>secondary</strong> variant on small screens
+          </li>
+          <li>
+            <strong>positive</strong> variant on large screens
+          </li>
+          <li>
+            <strong>primary</strong> for all other screens (the default value)
+          </li>
+        </ul>
+      </Typography>
+
+      <Button
+        variant={screens(
+          {
+            sm: 'secondary',
+            lg: 'positive',
+          },
+          'primary'
+        )}
+      >
+        {screenTexts(
+          {
+            sm: 'small (secondary)',
+            lg: 'large (positive)',
+          },
+          'default (primary)'
+        )}
+      </Button>
+    </>
+  )
+}
+
+export default Example

package/src/utils/Colors/index.ts

@@ -0,0 +1,2 @@
+// Storybook only
+export {}

package/src/utils/Colors/story/Default.example.tsx

@@ -0,0 +1,59 @@
+import React, { Fragment } from 'react'
+import { palette, SPACING_8, SPACING_4 } from '@toptal/picasso-utils'
+import { Grid, Paper, Typography, Container } from '@toptal/picasso'
+
+const colorGroups = Object.entries(palette)
+
+const Example = () => (
+  <>
+    {colorGroups.map(([colorGroupName, colorGroup]) => (
+      <Fragment key={colorGroupName}>
+        <Container top={SPACING_8} bottom={SPACING_4}>
+          <Typography variant='heading' size='large'>
+            {colorGroupName}
+          </Typography>
+        </Container>
+        <ColorGroup
+          colors={Object.entries(colorGroup)}
+          colorGroupName={colorGroupName}
+        />
+      </Fragment>
+    ))}
+  </>
+)
+
+const ColorGroup = ({
+  colors,
+  colorGroupName,
+}: {
+  colors: [string, string][]
+  colorGroupName: string
+}) => (
+  <Grid spacing={16}>
+    {colors.map(([colorName, color]) => (
+      <Grid.Item key={colorName}>
+        <Paper style={{ padding: '1rem' }}>
+          <ColorRectangle color={color} />
+          <Typography size='xsmall'>
+            {`${colorGroupName}.${colorName}`}
+          </Typography>
+          <Typography variant='heading' size='small'>
+            {color.toUpperCase()}
+          </Typography>
+        </Paper>
+      </Grid.Item>
+    ))}
+  </Grid>
+)
+
+const ColorRectangle = ({ color }: { color: string }) => (
+  <div
+    style={{
+      width: '7rem',
+      height: '7rem',
+      backgroundColor: color,
+    }}
+  />
+)
+
+export default Example

package/src/utils/Colors/story/HowToUse.example.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { palette } from '@toptal/picasso-utils'
+import { Typography } from '@toptal/picasso'
+
+const Example = () => (
+  <Typography>
+    Use the color just directly from Picasso. For example,{' '}
+    <span style={{ color: palette.blue.main }}>
+      I am painted by the blue main color
+    </span>
+  </Typography>
+)
+
+export default Example

package/src/utils/Colors/story/index.jsx

@@ -0,0 +1,21 @@
+import PicassoBook from '~/.storybook/components/PicassoBook'
+
+const page = PicassoBook.section('Utils').createPage(
+  'Colors',
+  `
+      The Toptal color palette comprises the core brand colors
+      plus a range of shades and tints.
+    `
+)
+
+page
+  .createChapter()
+  .addExample(
+    'utils/Colors/story/HowToUse.example.tsx',
+    {
+      title: 'How to use',
+      takeScreenshot: false,
+    },
+    'base/Utils'
+  )
+  .addExample('utils/Colors/story/Default.example.tsx', 'Colors', 'base/Utils')

package/src/utils/Formatters/format-amount.ts

@@ -0,0 +1,34 @@
+export const DEFAULT_CURRENCY = 'USD'
+export const DEFAULT_LOCALE = 'en-US'
+
+export interface FormatAmount {
+  /** The amount to be formatted */
+  amount: number | string
+  /** Currency which need to be applied on the amount (ISO format) https://www.currency-iso.org/en/home/tables/table-a1.html */
+  currency?: string
+  /** Locale identifiers are case-insensitive ASCII. However, it's conventional to use title case (first letter capitalized, successive letters lower case) for script code, upper case for region codes, and lower case for everything else. */
+  locale?: string
+  options?: {
+    /** The minimum number of fraction digits to display **/
+    minimumFractionDigits?: number
+
+    /** The maximum number of fraction digits to display **/
+    maximumFractionDigits?: number
+  }
+}
+
+export const formatAmount = ({
+  amount,
+  currency = DEFAULT_CURRENCY,
+  locale = DEFAULT_LOCALE,
+  options,
+}: FormatAmount) => {
+  const transformedAmount = typeof amount === 'string' ? Number(amount) : amount
+
+  return Intl.NumberFormat(locale, {
+    style: 'currency',
+    minimumFractionDigits: options?.minimumFractionDigits,
+    maximumFractionDigits: options?.maximumFractionDigits,
+    currency,
+  }).format(transformedAmount)
+}

package/src/utils/Formatters/index.ts

@@ -0,0 +1,3 @@
+export { formatAmount, DEFAULT_LOCALE, DEFAULT_CURRENCY } from './format-amount'
+
+export type { FormatAmount } from './format-amount'

package/src/utils/Formatters/story/amount.example.tsx

@@ -0,0 +1,63 @@
+import { Container, Typography } from '@toptal/picasso'
+import { SPACING_4, formatAmount } from '@toptal/picasso-utils'
+import React from 'react'
+
+const exampleAmount1 = 1575
+const exampleAmount2 = '890'
+
+const Example = () => (
+  <div>
+    <Container bottom={SPACING_4}>
+      <Typography>
+        This component exposes a currency formatting utility, which converts
+        numbers, into string decorated with currency symbols/codes in the
+        required locale format.
+      </Typography>
+    </Container>
+    <Container bottom={SPACING_4}>
+      <Typography variant='heading' size='medium'>
+        Without using Amount format helper
+      </Typography>
+      <Typography>
+        This is an example pure string usage of the amount ${exampleAmount1} and{' '}
+        €{exampleAmount2}.
+      </Typography>
+    </Container>
+    <Container bottom={SPACING_4}>
+      <Typography variant='heading' size='medium'>
+        Using Amount format helper
+      </Typography>
+      <Typography>
+        This is an example pure string usage of the amount{' '}
+        {formatAmount({ amount: exampleAmount1 })} and{' '}
+        {formatAmount({ amount: exampleAmount2, currency: 'EUR' })}.
+      </Typography>
+    </Container>
+    <Container bottom={SPACING_4}>
+      <Typography variant='heading' size='medium'>
+        Using fraction digits options:
+      </Typography>
+      <Typography>
+        minimumFractionDigits: 3 with value: {exampleAmount1}
+      </Typography>
+      <Typography>
+        output:{' '}
+        {formatAmount({
+          amount: exampleAmount1,
+          options: { minimumFractionDigits: 3 },
+        })}
+      </Typography>
+      <Typography>minimumFractionDigits: 1 with value: 1575.1234</Typography>
+      <Typography>
+        output:{' '}
+        {formatAmount({
+          amount: 890.1234,
+          options: { maximumFractionDigits: 1 },
+          currency: 'EUR',
+        })}
+      </Typography>
+    </Container>
+  </div>
+)
+
+export default Example

package/src/utils/Formatters/story/index.jsx

@@ -0,0 +1,16 @@
+import PicassoBook from '~/.storybook/components/PicassoBook'
+
+const page = PicassoBook.section('Utils').createPage(
+  'Formatters',
+  `
+      For consistent user experience, we need to standardize formatters.
+  `
+)
+
+page
+  .createChapter()
+  .addExample(
+    'utils/Formatters/story/amount.example.tsx',
+    'Amount Formatter',
+    'base/Utils'
+  )

package/src/utils/Formatters/test.ts

@@ -0,0 +1,102 @@
+import { formatAmount } from './format-amount'
+
+describe('formatAmount', () => {
+  describe('when `locale` is defined', () => {
+    it('formats `en-US` locale by default', () => {
+      expect(formatAmount({ amount: 1500 })).toBe('$1,500.00')
+    })
+  })
+
+  describe('when `locale` is `fr-FR`', () => {
+    it('formats `fr-FR` locale', () => {
+      expect(formatAmount({ amount: 1500, locale: 'fr-FR' })).toBe(
+        '1 500,00 $US'
+      )
+    })
+  })
+
+  describe('when `EUR` currency provided', () => {
+    it('formats EUR currency', () => {
+      expect(formatAmount({ amount: 1750, currency: 'EUR' })).toBe('€1,750.00')
+    })
+  })
+
+  describe('when no currency provided', () => {
+    it('formats USD currency by default', () => {
+      expect(formatAmount({ amount: 1500 })).toBe('$1,500.00')
+    })
+  })
+
+  describe('when `amount` has 4 digits of decimals', () => {
+    it('formats two digit of decimals USD amount', () => {
+      expect(formatAmount({ amount: 24.2587 })).toBe('$24.26')
+    })
+  })
+
+  describe('when `amount` is negative', () => {
+    it('formats negative USD amount', () => {
+      expect(formatAmount({ amount: -14.25 })).toBe('-$14.25')
+    })
+  })
+
+  describe('when `amount` is zero', () => {
+    it('formats zero USD amount', () => {
+      expect(formatAmount({ amount: 0 })).toBe('$0.00')
+    })
+  })
+
+  describe('when `amount` is string', () => {
+    it('formats amount as a number', () => {
+      expect(formatAmount({ amount: '15' })).toBe('$15.00')
+    })
+  })
+
+  describe('options', () => {
+    it('displays decimals when options are not provided', () => {
+      expect(formatAmount({ amount: '15' })).toBe('$15.00')
+    })
+
+    it('does not display decimals when options are 0', () => {
+      expect(
+        formatAmount({
+          amount: '15',
+          options: {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0,
+          },
+        })
+      ).toBe('$15')
+    })
+
+    it('displays min number of decimal digits', () => {
+      expect(
+        formatAmount({
+          amount: '15',
+          options: {
+            minimumFractionDigits: 3,
+          },
+        })
+      ).toBe('$15.000')
+    })
+
+    it('displays max number of decimal digits', () => {
+      expect(
+        formatAmount({
+          amount: '15.1234',
+          options: {
+            maximumFractionDigits: 2,
+          },
+        })
+      ).toBe('$15.12')
+
+      expect(
+        formatAmount({
+          amount: '15.1294',
+          options: {
+            maximumFractionDigits: 2,
+          },
+        })
+      ).toBe('$15.13')
+    })
+  })
+})

package/src/utils/Gradients/index.ts

@@ -0,0 +1,2 @@
+// Storybook only
+export {}

package/src/utils/Gradients/story/Default.example.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { gradients, shadows } from '@toptal/picasso-utils'
+import { Typography, Grid, Container } from '@toptal/picasso'
+
+const Example = () => (
+  <Grid>
+    {Object.entries(gradients).map(([gradientKey, gradientValue]) => (
+      <Grid.Item sm={6} key={gradientKey}>
+        <Container>
+          <Typography size='large'>{gradientKey}</Typography>
+        </Container>
+        <Container>
+          <GradientRectangle gradient={gradientValue} />
+        </Container>
+      </Grid.Item>
+    ))}
+  </Grid>
+)
+
+const GradientRectangle = ({ gradient }: { gradient: string }) => (
+  <div
+    style={{
+      height: '14rem',
+      background: gradient,
+      boxShadow: shadows[5],
+    }}
+  />
+)
+
+export default Example

package/src/utils/Gradients/story/HowToUse.example.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { gradients, SPACING_4 } from '@toptal/picasso-utils'
+import { Typography, Container } from '@toptal/picasso'
+
+const Example = () => (
+  <>
+    <Container bottom={SPACING_4}>
+      <Typography>
+        Use the gradient just directly from Picasso and apply it to any element
+        as{' '}
+        <Typography inline underline='solid'>
+          background
+        </Typography>{' '}
+        style property.
+      </Typography>
+    </Container>
+    <div
+      style={{
+        height: '5rem',
+        background: gradients.blue,
+      }}
+    />
+  </>
+)
+
+export default Example

package/src/utils/Gradients/story/index.jsx

@@ -0,0 +1,26 @@
+import PicassoBook from '~/.storybook/components/PicassoBook'
+
+const page = PicassoBook.section('Utils').createPage(
+  'Gradients',
+  `Gradients are important visual elements. They are versatile and can be combined with other elements. To keep our visual language consistent it's important to make a correct use of our gradients. 
+  
+  These are the recommended gradients.
+  
+  Our gradients are made using our brand colors, always keeping a 200 points interval. For example: Blue 500 to Blue 700.`
+)
+
+page
+  .createChapter()
+  .addExample(
+    'utils/Gradients/story/HowToUse.example.tsx',
+    {
+      title: 'How to use',
+      takeScreenshot: false,
+    },
+    'base/Utils'
+  )
+  .addExample(
+    'utils/Gradients/story/Default.example.tsx',
+    'Gradients',
+    'base/Utils'
+  )