npm - @toptal/picasso-utils - Versions diffs - 1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-77646e396.4080 → 1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-25389459e.4083 - Mend

@toptal/picasso-utils 1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-77646e396.4080 → 1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-25389459e.4083

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (82) hide show

package/dist-package/tsconfig.tsbuildinfo +1 -0
package/package.json +5 -9
package/src/index.ts +1 -0
package/src/utils/Breakpoints/story/Breakpoints.example.tsx +49 -0
package/src/utils/Breakpoints/story/MediaQueries.example.tsx +18 -0
package/src/utils/Breakpoints/story/index.jsx +60 -0
package/src/utils/Breakpoints/story/useBreakpoint.example.tsx +17 -0
package/src/utils/Breakpoints/story/useScreens.example.tsx +60 -0
package/src/utils/Colors/index.ts +2 -0
package/src/utils/Colors/story/Default.example.tsx +59 -0
package/src/utils/Colors/story/HowToUse.example.tsx +14 -0
package/src/utils/Colors/story/index.jsx +21 -0
package/src/utils/Formatters/format-amount.ts +34 -0
package/src/utils/Formatters/index.ts +3 -0
package/src/utils/Formatters/story/amount.example.tsx +63 -0
package/src/utils/Formatters/story/index.jsx +16 -0
package/src/utils/Formatters/test.ts +102 -0
package/src/utils/Gradients/index.ts +2 -0
package/src/utils/Gradients/story/Default.example.tsx +30 -0
package/src/utils/Gradients/story/HowToUse.example.tsx +26 -0
package/src/utils/Gradients/story/index.jsx +26 -0
package/src/utils/Modal/__snapshots__/test.tsx.snap +209 -0
package/src/utils/Modal/index.ts +2 -0
package/src/utils/Modal/modal-manager.ts +27 -0
package/src/utils/Modal/test.tsx +86 -0
package/src/utils/Modal/use-modal.tsx +17 -0
package/src/utils/Shadows/story/Default.example.tsx +45 -0
package/src/utils/Shadows/story/HowToUse.example.tsx +19 -0
package/src/utils/Shadows/story/index.jsx +19 -0
package/src/utils/Transitions/Rotate180/Rotate180.tsx +44 -0
package/src/utils/Transitions/Rotate180/__snapshots__/test.tsx.snap +29 -0
package/src/utils/Transitions/Rotate180/index.ts +4 -0
package/src/utils/Transitions/Rotate180/story/Default.example.tsx +22 -0
package/src/utils/Transitions/Rotate180/styles.ts +11 -0
package/src/utils/Transitions/Rotate180/test.tsx +26 -0
package/src/utils/Transitions/index.ts +2 -0
package/src/utils/Transitions/story/index.jsx +13 -0
package/src/utils/Utils/story/Browser.example.tsx +28 -0
package/src/utils/Utils/story/Colors.example.tsx +29 -0
package/src/utils/Utils/story/Generic.example.tsx +30 -0
package/src/utils/Utils/story/React.example.tsx +32 -0
package/src/utils/Utils/story/Strings.example.tsx +33 -0
package/src/utils/__tests__/use-page-scroll-lock.test.tsx +117 -0
package/src/utils/capitalize.ts +1 -0
package/src/utils/constants.ts +1 -0
package/src/utils/disable-unsupported-props.ts +45 -0
package/src/utils/forward-ref.ts +38 -0
package/src/utils/get-name-initials.ts +15 -0
package/src/utils/get-react-node-text-content.ts +36 -0
package/src/utils/index.ts +92 -0
package/src/utils/is-boolean.ts +3 -0
package/src/utils/is-number.ts +3 -0
package/src/utils/is-overflown.ts +20 -0
package/src/utils/is-pointer-device.ts +9 -0
package/src/utils/is-string.ts +3 -0
package/src/utils/is-substring.ts +4 -0
package/src/utils/kebab-to-camel-case.ts +7 -0
package/src/utils/loader-palette.ts +9 -0
package/src/utils/monads.ts +1 -0
package/src/utils/noop.ts +1 -0
package/src/utils/sum.ts +4 -0
package/src/utils/test.tsx +372 -0
package/src/utils/to-title-case.ts +14 -0
package/src/utils/unsafe-error-log.ts +5 -0
package/src/utils/use-combined-refs.ts +26 -0
package/src/utils/use-deprecation-warnings.ts +56 -0
package/src/utils/use-multiple-forward-refs.ts +37 -0
package/src/utils/use-page-scroll-lock.ts +64 -0
package/src/utils/use-safe-state.ts +25 -0
package/src/utils/use-width-of.ts +26 -0
package/src/utils/useBoolean/index.ts +1 -0
package/src/utils/useBoolean/test.tsx +25 -0
package/src/utils/useBoolean/use-boolean.ts +30 -0
package/src/utils/useInterval/index.ts +1 -0
package/src/utils/useInterval/test.ts +61 -0
package/src/utils/useInterval/use-interval.ts +46 -0
package/src/utils/useMouseEnter/index.ts +1 -0
package/src/utils/useMouseEnter/test.ts +51 -0
package/src/utils/useMouseEnter/use-mouse-enter.ts +30 -0
package/src/utils/useOnScreen/index.ts +1 -0
package/src/utils/useOnScreen/use-on-screen.ts +50 -0
package/tsconfig.json +9 -0

package/src/utils/Modal/__snapshots__/test.tsx.snap ADDED Viewed

@@ -0,0 +1,209 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`Modal useModal opens and closes modal 1`] = `
+<body>
+  <div
+    id="modal-root"
+  />
+  <div>
+    <div
+      class="Picasso-root"
+    >
+      <button
+        aria-hidden="true"
+        class="MuiButtonBase-root PicassoButton-medium PicassoButton-primary PicassoButton-root"
+        data-component-type="button"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+        >
+          Show
+        </span>
+      </button>
+      <div
+        class="MuiDialog-root PicassoModal-root"
+        role="presentation"
+        style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
+      >
+        <div
+          aria-hidden="true"
+          class="MuiBackdrop-root"
+          style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+        />
+        <div
+          data-test="sentinelStart"
+          tabindex="0"
+        />
+        <div
+          class="MuiDialog-container PicassoModal-container MuiDialog-scrollPaper"
+          role="none presentation"
+          style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+          tabindex="-1"
+        >
+          <div
+            class="MuiPaper-root MuiDialog-paper PicassoModal-paper PicassoModal-medium MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse MuiPaper-elevation2"
+            role="dialog"
+          >
+            <p>
+              Modal content
+            </p>
+            <button
+              class="MuiButtonBase-root PicassoButton-medium PicassoButton-primary PicassoButton-root"
+              data-component-type="button"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+              >
+                Hide
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          data-test="sentinelEnd"
+          tabindex="0"
+        />
+      </div>
+    </div>
+  </div>
+</body>
+`;
+exports[`Modal useModal opens and closes modal 2`] = `
+<body>
+  <div
+    id="modal-root"
+  />
+  <div>
+    <div
+      class="Picasso-root"
+    >
+      <button
+        class="MuiButtonBase-root PicassoButton-medium PicassoButton-primary PicassoButton-root"
+        data-component-type="button"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+        >
+          Show
+        </span>
+      </button>
+    </div>
+  </div>
+</body>
+`;
+exports[`Modal useModal shows multiple modals at the same time 1`] = `
+<body>
+  <div
+    id="modal-root"
+  />
+  <div>
+    <div
+      class="Picasso-root"
+    >
+      <button
+        aria-hidden="true"
+        class="MuiButtonBase-root PicassoButton-medium PicassoButton-primary PicassoButton-root"
+        data-component-type="button"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+        >
+          Show first
+        </span>
+      </button>
+      <button
+        aria-hidden="true"
+        class="MuiButtonBase-root PicassoButton-medium PicassoButton-primary PicassoButton-root"
+        data-component-type="button"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+        >
+          Show second
+        </span>
+      </button>
+      <div
+        aria-hidden="true"
+        class="MuiDialog-root PicassoModal-root"
+        role="presentation"
+        style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
+      >
+        <div
+          aria-hidden="true"
+          class="MuiBackdrop-root"
+          style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+        />
+        <div
+          data-test="sentinelStart"
+          tabindex="0"
+        />
+        <div
+          class="MuiDialog-container PicassoModal-container MuiDialog-scrollPaper"
+          role="none presentation"
+          style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+          tabindex="-1"
+        >
+          <div
+            class="MuiPaper-root MuiDialog-paper PicassoModal-paper PicassoModal-medium MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse MuiPaper-elevation2"
+            role="dialog"
+          >
+            <p>
+              First modal content
+            </p>
+          </div>
+        </div>
+        <div
+          data-test="sentinelEnd"
+          tabindex="0"
+        />
+      </div>
+      <div
+        class="MuiDialog-root PicassoModal-root"
+        role="presentation"
+        style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
+      >
+        <div
+          aria-hidden="true"
+          class="MuiBackdrop-root"
+          style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+        />
+        <div
+          data-test="sentinelStart"
+          tabindex="0"
+        />
+        <div
+          class="MuiDialog-container PicassoModal-container MuiDialog-scrollPaper"
+          role="none presentation"
+          style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+          tabindex="-1"
+        >
+          <div
+            class="MuiPaper-root MuiDialog-paper PicassoModal-paper PicassoModal-medium MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse MuiPaper-elevation2"
+            role="dialog"
+          >
+            <p>
+              Second modal content
+            </p>
+          </div>
+        </div>
+        <div
+          data-test="sentinelEnd"
+          tabindex="0"
+        />
+      </div>
+    </div>
+  </div>
+</body>
+`;

package/src/utils/Modal/index.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { ModalManager } from './modal-manager'
2	+ export { useModal } from './use-modal'

package/src/utils/Modal/modal-manager.ts ADDED Viewed

@@ -0,0 +1,27 @@
+export class ModalManager {
+  modals: number[] = []
+  add(modalId: number) {
+    if (this.modals.includes(modalId)) {
+      return
+    }
+    this.modals.push(modalId)
+  }
+  remove(modalId: number) {
+    const modalIndex = this.modals.indexOf(modalId)
+    if (modalIndex === -1) {
+      return
+    }
+    this.modals.splice(modalIndex, 1)
+  }
+  isTopModal(modalId: number) {
+    return (
+      this.modals.length > 0 && this.modals[this.modals.length - 1] === modalId
+    )
+  }
+}

package/src/utils/Modal/test.tsx ADDED Viewed

@@ -0,0 +1,86 @@
+import React from 'react'
+import {
+  render,
+  fireEvent,
+  waitForElementToBeRemoved,
+} from '@toptal/picasso-test-utils'
+import { Button } from '@toptal/picasso-button'
+import { Modal } from '@toptal/picasso-modal'
+import { useModal } from './use-modal'
+let modalRoot: HTMLElement
+describe('Modal', () => {
+  beforeAll(() => {
+    modalRoot = document.createElement('div')
+    modalRoot.setAttribute('id', 'modal-root')
+    document.body.appendChild(modalRoot)
+  })
+  it('useModal opens and closes modal', async () => {
+    const TestComponent = () => {
+      const { showModal, hideModal, isOpen } = useModal()
+      return (
+        <>
+          <Button onClick={showModal}>Show</Button>
+          <Modal open={isOpen}>
+            <p>Modal content</p>
+            <Button onClick={hideModal}>Hide</Button>
+          </Modal>
+        </>
+      )
+    }
+    const { getByText, queryByText, baseElement } = render(<TestComponent />)
+    const showModalButton = getByText('Show')
+    fireEvent.click(showModalButton)
+    expect(queryByText('Modal content')).toBeTruthy()
+    expect(baseElement).toMatchSnapshot()
+    const hideModalButton = getByText('Hide')
+    fireEvent.click(hideModalButton)
+    await waitForElementToBeRemoved(() => getByText('Hide'))
+    expect(queryByText('Modal content')).toBeFalsy()
+    expect(baseElement).toMatchSnapshot()
+  })
+  it('useModal shows multiple modals at the same time', () => {
+    const TestComponent = () => {
+      const { showModal: showModal1, isOpen: isOpen1 } = useModal()
+      const { showModal: showModal2, isOpen: isOpen2 } = useModal()
+      return (
+        <>
+          <Button onClick={showModal1}>Show first</Button>
+          <Modal open={isOpen1}>
+            <p>First modal content</p>
+          </Modal>
+          <Button onClick={showModal2}>Show second</Button>
+          <Modal open={isOpen2}>
+            <p>Second modal content</p>
+          </Modal>
+        </>
+      )
+    }
+    const { getByText, queryByText, baseElement } = render(<TestComponent />)
+    fireEvent.click(getByText('Show first'))
+    fireEvent.click(getByText('Show second'))
+    expect(queryByText('First modal content')).toBeTruthy()
+    expect(queryByText('Second modal content')).toBeTruthy()
+    expect(baseElement).toMatchSnapshot()
+  })
+})

package/src/utils/Modal/use-modal.tsx ADDED Viewed

@@ -0,0 +1,17 @@
+import { useCallback, useState } from 'react'
+const useModal = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const hideModal = useCallback(() => setIsOpen(false), [setIsOpen])
+  const showModal = useCallback(() => setIsOpen(true), [setIsOpen])
+  return {
+    showModal,
+    hideModal,
+    isOpen,
+  }
+}
+export { useModal }

package/src/utils/Shadows/story/Default.example.tsx ADDED Viewed

@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react'
+import React from 'react'
+import { shadows, SPACING_6, SPACING_8, SPACING_4 } from '@toptal/picasso-utils'
+import { Container, Typography, Grid } from '@toptal/picasso'
+const Example = () => (
+  <Container flex direction='column' gap={SPACING_6} top={SPACING_8}>
+    <Grid spacing={80}>
+      <ShadowBox shadow={shadows[0]} index={0} description={'none'} />
+      <ShadowBox
+        shadow={shadows[1]}
+        index={1}
+        description={'notification center, paper'}
+      />
+      <ShadowBox shadow={shadows[2]} index={2} description={'modal'} />
+      <ShadowBox
+        shadow={shadows[3]}
+        index={3}
+        description={'notification growl'}
+      />
+      <ShadowBox shadow={shadows[4]} index={4} description={'tooltip'} />
+      <ShadowBox shadow={shadows[5]} index={5} description={'scroll menu'} />
+    </Grid>
+  </Container>
+)
+interface ShadowBoxProps {
+  shadow: string
+  index: number
+  description?: ReactNode
+}
+const ShadowBox = ({ index, shadow, description }: ShadowBoxProps) => (
+  <Grid.Item sm={4}>
+    <Container padded={SPACING_4} style={{ boxShadow: shadow }}>
+      <Typography variant='heading' size='large' align='center'>
+        {index}
+      </Typography>
+      <Typography size='xsmall' align='center'>
+        {description}
+      </Typography>
+    </Container>
+  </Grid.Item>
+)
+export default Example

package/src/utils/Shadows/story/HowToUse.example.tsx ADDED Viewed

@@ -0,0 +1,19 @@
+import React from 'react'
+import { shadows, SPACING_4 } from '@toptal/picasso-utils'
+import { Container, Typography } from '@toptal/picasso'
+const Example = () => (
+  <Typography>
+    Use the shadow just directly from Picasso. For example,
+    <Container
+      padded={SPACING_4}
+      top={SPACING_4}
+      style={{ boxShadow: shadows[4] }}
+      rounded
+    >
+      I have a box-shadow like a tooltip
+    </Container>
+  </Typography>
+)
+export default Example

package/src/utils/Shadows/story/index.jsx ADDED Viewed

@@ -0,0 +1,19 @@
+import PicassoBook from '~/.storybook/components/PicassoBook'
+const page = PicassoBook.section('Utils').createPage('Shadows')
+page
+  .createChapter()
+  .addExample(
+    'utils/Shadows/story/HowToUse.example.tsx',
+    {
+      title: 'How to use',
+      takeScreenshot: false,
+    },
+    'base/Utils'
+  )
+  .addExample(
+    'utils/Shadows/story/Default.example.tsx',
+    'Shadows',
+    'base/Utils'
+  )

package/src/utils/Transitions/Rotate180/Rotate180.tsx ADDED Viewed

@@ -0,0 +1,44 @@
+import type { ReactElement, ReactNode } from 'react'
+import React from 'react'
+import cx from 'classnames'
+import type { BaseProps } from '@toptal/picasso-shared'
+import type { Theme } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
+import styles from './styles'
+export interface Props extends BaseProps {
+  /** Flag for transition execution. */
+  on: boolean
+  /** Element to apply transitions. */
+  children: ReactNode
+}
+const useStyles = makeStyles<Theme>(styles, {
+  name: 'Rotate180',
+})
+export const Rotate180 = (props: Props) => {
+  const { children, style, className, on, ...rest } = props
+  const classes = useStyles()
+  const childProps = {
+    className: cx(className, classes.transition, {
+      [classes.rotate180]: on,
+    }),
+    style,
+    ...rest,
+  }
+  return (
+    <>
+      {React.Children.map(children, child =>
+        React.cloneElement(child as ReactElement, childProps)
+      )}
+    </>
+  )
+}
+Rotate180.displayName = 'Rotate180'
+export default Rotate180

package/src/utils/Transitions/Rotate180/__snapshots__/test.tsx.snap ADDED Viewed

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`Rotate180 render with transformation 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <div
+      class="Rotate180-transition Rotate180-rotate180"
+    >
+      Rotating component
+    </div>
+  </div>
+</div>
+`;
+exports[`Rotate180 render without transformation 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <div
+      class="Rotate180-transition"
+    >
+      Rotating component
+    </div>
+  </div>
+</div>
+`;

package/src/utils/Transitions/Rotate180/index.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import type { Props } from './Rotate180'
+export { default } from './Rotate180'
+export type Rotate180Props = Props

package/src/utils/Transitions/Rotate180/story/Default.example.tsx ADDED Viewed

@@ -0,0 +1,22 @@
+import React, { useState } from 'react'
+import { Transitions, SPACING_6 } from '@toptal/picasso-utils'
+import { Button, Container } from '@toptal/picasso'
+import { ArrowDownMinor24 } from '@toptal/picasso-icons'
+const Example = () => {
+  const [isRotated, setIsRotated] = useState(false)
+  return (
+    <>
+      <Button onClick={() => setIsRotated(!isRotated)}>Rotate</Button>
+      <Container top={SPACING_6}>
+        <Transitions.Rotate180 on={isRotated}>
+          <ArrowDownMinor24 />
+        </Transitions.Rotate180>
+      </Container>
+    </>
+  )
+}
+export default Example

package/src/utils/Transitions/Rotate180/styles.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import { createStyles } from '@material-ui/core/styles'
+export default () =>
+  createStyles({
+    transition: {
+      transition: 'transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+    },
+    rotate180: {
+      transform: 'rotate(180deg)',
+    },
+  })

package/src/utils/Transitions/Rotate180/test.tsx ADDED Viewed

@@ -0,0 +1,26 @@
+import React from 'react'
+import { render } from '@toptal/picasso-test-utils'
+import { Rotate180 } from './Rotate180'
+describe('Rotate180', () => {
+  it('render without transformation', () => {
+    const { container } = render(
+      <Rotate180 on={false}>
+        <div>Rotating component</div>
+      </Rotate180>
+    )
+    expect(container).toMatchSnapshot()
+  })
+  it('render with transformation', () => {
+    const { container } = render(
+      <Rotate180 on>
+        <div>Rotating component</div>
+      </Rotate180>
+    )
+    expect(container).toMatchSnapshot()
+  })
+})

package/src/utils/Transitions/index.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default as Rotate180 } from './Rotate180'
2	+ export type { Rotate180Props } from './Rotate180'

package/src/utils/Transitions/story/index.jsx ADDED Viewed

@@ -0,0 +1,13 @@
+import PicassoBook from '~/.storybook/components/PicassoBook'
+const page = PicassoBook.section('Utils').createPage('Transitions')
+page.createChapter().addExample(
+  'utils/Transitions/Rotate180/story/Default.example.tsx',
+  {
+    title: 'Rotate180',
+    description: 'Transition for 180 deg rotation',
+    takeScreenshot: false,
+  },
+  'base/Utils'
+)

package/src/utils/Utils/story/Browser.example.tsx ADDED Viewed

@@ -0,0 +1,28 @@
+import { Table } from '@toptal/picasso'
+import React from 'react'
+const data = {
+  isPointerDevice: `Checks if the primary input mechanism includes an accurate pointing device`,
+  isBrowser: `Checks if there is a browser or not.`,
+}
+const Example = () => (
+  <Table>
+    <Table.Head>
+      <Table.Row>
+        <Table.Cell>Name</Table.Cell>
+        <Table.Cell>Description</Table.Cell>
+      </Table.Row>
+    </Table.Head>
+    <Table.Body>
+      {Object.entries(data).map(([name, description]) => (
+        <Table.Row key={name}>
+          <Table.Cell>{name}</Table.Cell>
+          <Table.Cell>{description}</Table.Cell>
+        </Table.Row>
+      ))}
+    </Table.Body>
+  </Table>
+)
+export default Example

package/src/utils/Utils/story/Colors.example.tsx ADDED Viewed

@@ -0,0 +1,29 @@
+import { Table } from '@toptal/picasso'
+import React from 'react'
+const data = {
+  'colorUtils.alpha': `Sets the alpha channel for the color and returns the hex color format`,
+  'colorUtils.lighten': `Sets the lightness of the color and returns the hex color format`,
+  'colorUtils.darken': `Sets the darkness of the color and returns the hex color format`,
+}
+const Example = () => (
+  <Table>
+    <Table.Head>
+      <Table.Row>
+        <Table.Cell>Name</Table.Cell>
+        <Table.Cell>Description</Table.Cell>
+      </Table.Row>
+    </Table.Head>
+    <Table.Body>
+      {Object.entries(data).map(([name, description]) => (
+        <Table.Row key={name}>
+          <Table.Cell>{name}</Table.Cell>
+          <Table.Cell>{description}</Table.Cell>
+        </Table.Row>
+      ))}
+    </Table.Body>
+  </Table>
+)
+export default Example

package/src/utils/Utils/story/Generic.example.tsx ADDED Viewed

@@ -0,0 +1,30 @@
+import { Table } from '@toptal/picasso'
+import React from 'react'
+const data = {
+  noop: `A function that does nothing, a replacement for () => {}`,
+  isBoolean: `Checks if the provided value is a boolean`,
+  isNumber: `Checks if the provided value is a number`,
+  isString: `Checks if the provided value is a string`,
+}
+const Example = () => (
+  <Table>
+    <Table.Head>
+      <Table.Row>
+        <Table.Cell>Name</Table.Cell>
+        <Table.Cell>Description</Table.Cell>
+      </Table.Row>
+    </Table.Head>
+    <Table.Body>
+      {Object.entries(data).map(([name, description]) => (
+        <Table.Row key={name}>
+          <Table.Cell>{name}</Table.Cell>
+          <Table.Cell>{description}</Table.Cell>
+        </Table.Row>
+      ))}
+    </Table.Body>
+  </Table>
+)
+export default Example