@toptal/picasso-tabs 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-25389459e.4083

package/src/Tabs/index.ts

@@ -0,0 +1,6 @@
+import type { OmitInternalProps } from '@toptal/picasso-shared'
+
+import type { Props } from './Tabs'
+
+export { default as Tabs } from './Tabs'
+export type TabsProps = OmitInternalProps<Props>

package/src/Tabs/story/Default.example.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Container, Tabs } from '@toptal/picasso'
+import { SPACING_4 } from '@toptal/picasso-utils'
+
+const Example = () => {
+  const [value, setValue] = React.useState(0)
+
+  const handleChange = (_: React.ChangeEvent<{}>, newValue: number) => {
+    setValue(newValue)
+  }
+
+  return (
+    <div>
+      <Tabs value={value} onChange={handleChange}>
+        <Tabs.Tab label='Label' />
+        <Tabs.Tab label='Label' />
+        <Tabs.Tab label='Label' />
+      </Tabs>
+
+      {value === 0 && (
+        <Container top={SPACING_4}>Content of the first tab</Container>
+      )}
+      {value === 1 && (
+        <Container top={SPACING_4}>Content of the second tab</Container>
+      )}
+      {value === 2 && (
+        <Container top={SPACING_4}>Content of the third tab</Container>
+      )}
+    </div>
+  )
+}
+
+export default Example

package/src/Tabs/story/FullWidth.example.tsx

@@ -0,0 +1,27 @@
+/* eslint-disable react/no-array-index-key */
+import React from 'react'
+import { Container, Tabs } from '@toptal/picasso'
+import { SPACING_4, palette } from '@toptal/picasso-utils'
+
+const TAB_COUNT = 2
+
+const Example = () => {
+  const [value, setValue] = React.useState(0)
+
+  const handleChange = (_: React.ChangeEvent<{}>, newValue: number) => {
+    setValue(newValue)
+  }
+
+  return (
+    <div style={{ width: '45rem', border: `1px solid ${palette.grey.light}` }}>
+      <Tabs value={value} onChange={handleChange} variant='fullWidth'>
+        {Array.from({ length: TAB_COUNT }).map((_, index) => (
+          <Tabs.Tab key={index} label='Label' />
+        ))}
+      </Tabs>
+      <Container padded={SPACING_4}>Content of tab #{value}</Container>
+    </div>
+  )
+}
+
+export default Example

package/src/Tabs/story/ScrollButtons.example.tsx

@@ -0,0 +1,27 @@
+/* eslint-disable react/no-array-index-key */
+import React from 'react'
+import { Container, Tabs } from '@toptal/picasso'
+import { SPACING_4 } from '@toptal/picasso-utils'
+
+const TAB_COUNT = 10
+
+const Example = () => {
+  const [value, setValue] = React.useState(0)
+
+  const handleChange = (_: React.ChangeEvent<{}>, newValue: number) => {
+    setValue(newValue)
+  }
+
+  return (
+    <div style={{ width: '13rem' }}>
+      <Tabs value={value} onChange={handleChange}>
+        {Array.from({ length: TAB_COUNT }).map((_, index) => (
+          <Tabs.Tab key={index} label='Label' />
+        ))}
+      </Tabs>
+      <Container top={SPACING_4}>Content of tab #{value}</Container>
+    </div>
+  )
+}
+
+export default Example

package/src/Tabs/story/Vertical.example.tsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import { Container, Tabs } from '@toptal/picasso'
+import { SPACING_4, shadows, sizes, palette } from '@toptal/picasso-utils'
+
+type TabPanelProps = {
+  children: React.ReactNode
+  value: number
+  index: number
+}
+const TabPanel = ({ children, value, index }: TabPanelProps) => (
+  <Container role='tabpanel' hidden={value !== index}>
+    {children}
+  </Container>
+)
+
+// This component is not from BASE, just an example how it can be used
+const TabsContent = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Container
+      style={{
+        flex: '1 1 auto',
+        backgroundColor: palette.grey.lightest,
+        boxShadow: shadows[1],
+        borderRadius: sizes.borderRadius.medium,
+      }}
+      padded={SPACING_4}
+    >
+      {children}
+    </Container>
+  )
+}
+
+const Example = () => {
+  const [value, setValue] = React.useState(0)
+
+  const handleChange = (_: React.ChangeEvent<{}>, newValue: number) => {
+    setValue(newValue)
+  }
+
+  return (
+    <Container
+      style={{
+        backgroundColor: palette.grey.lighter,
+      }}
+      padded={SPACING_4}
+      flex
+    >
+      <Tabs onChange={handleChange} orientation='vertical' value={value}>
+        <Tabs.Tab
+          avatar='./jacqueline-with-flowers-1954-square.jpg'
+          description='UI specialist'
+          label='Jacqueline Roque'
+        />
+        <Tabs.Tab
+          avatar='./jacqueline-with-flowers-1954-square.jpg'
+          description='UI specialist'
+          label='Jacqueline Roque'
+        />
+        <Tabs.Tab
+          avatar=''
+          description='UI specialist'
+          label='Jacqueline Roque'
+        />
+        <Tabs.Tab avatar={null} description='UI specialist' label='John Doe' />
+      </Tabs>
+      <TabsContent>
+        <TabPanel value={value} index={0}>
+          Content of the first tab
+        </TabPanel>
+        <TabPanel value={value} index={1}>
+          Content of the second tab
+        </TabPanel>
+        <TabPanel value={value} index={2}>
+          Content of the third tab
+        </TabPanel>
+        <TabPanel value={value} index={3}>
+          Content of the third tab
+        </TabPanel>
+      </TabsContent>
+    </Container>
+  )
+}
+
+export default Example

package/src/Tabs/story/index.jsx

@@ -0,0 +1,58 @@
+import { Tabs } from '../Tabs'
+import tabStory from '../../Tab/story'
+import PicassoBook from '~/.storybook/components/PicassoBook'
+
+const page = PicassoBook.section('Layout').createPage(
+  'Tabs',
+  `
+  Tabs allow to switch between content sections
+
+  ${PicassoBook.createBaseDocsLink(
+    'https://www.figma.com/file/5SCTOPrCDcHuk5We091GBn/Product-Library?node-id=246%3A11213'
+  )}
+
+  ${PicassoBook.createSourceLink(__filename)}
+  `
+)
+
+page
+  .createTabChapter('Props')
+  .addComponentDocs({ component: Tabs, name: 'Tabs' })
+  .addComponentDocs(tabStory.componentDocs)
+
+page
+  .createChapter()
+  .addExample(
+    'Tabs/story/Default.example.tsx',
+    {
+      title: 'Default',
+      takeScreenshot: false,
+    },
+    'base/Tabs'
+  )
+  .addExample(
+    'Tabs/story/Vertical.example.tsx',
+    {
+      title: 'Vertical',
+      takeScreenshot: false,
+      description: '⚠️ Not responsive',
+    },
+    'base/Tabs'
+  )
+  .addExample(
+    'Tabs/story/ScrollButtons.example.tsx',
+    {
+      title: 'Scroll buttons',
+      takeScreenshot: false,
+    },
+    'base/Tabs'
+  )
+  .addExample(
+    'Tabs/story/FullWidth.example.tsx',
+    {
+      title: 'Full Width',
+      screenshotBreakpoints: true,
+    },
+    'base/Tabs'
+  )
+page.connect(tabStory.chapter)

package/src/Tabs/styles.ts

@@ -0,0 +1,45 @@
+import type { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/core/styles'
+import { PicassoProvider } from '@toptal/picasso-provider'
+
+PicassoProvider.override(({ palette }: Theme) => ({
+  MuiTabs: {
+    root: {
+      position: 'relative',
+      minHeight: 0,
+    },
+    vertical: {
+      width: 200,
+      margin: 0,
+      '& $scroller': {
+        // We need a bit of padding to allow active tab's shadow to be visible
+        paddingLeft: '0.5em',
+      },
+
+      '& $indicator': {
+        display: 'none',
+      },
+    },
+    indicator: {
+      backgroundColor: palette.blue.main,
+      zIndex: 1,
+    },
+  },
+}))
+
+export default ({ palette }: Theme) =>
+  createStyles({
+    horizontal: {
+      '&::after': {
+        position: 'absolute',
+        content: '""',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: 1,
+        backgroundColor: palette.grey.main,
+        zIndex: 0,
+      },
+    },
+    vertical: {},
+  })

package/src/Tabs/test.tsx

@@ -0,0 +1,165 @@
+/* eslint-disable react/no-array-index-key */
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import type { OmitInternalProps } from '@toptal/picasso-shared'
+import { TestingPicasso } from '@toptal/picasso-test-utils'
+
+import type { TabProps } from '../Tab'
+import type { Props } from './Tabs'
+import { TabsCompound as Tabs } from '../TabsCompound'
+
+const renderTabContent = (tab: TabProps, index: number, value: any) => {
+  const isTabActive = index + 1 === value || tab.value === value
+  const testId = `tab-${index + 1}-content`
+
+  if (isTabActive) {
+    return (
+      <div key={testId} data-testid={testId}>
+        Tab #{index + 1} content
+      </div>
+    )
+  }
+
+  return null
+}
+
+const renderTabs = (
+  tabs: TabProps[],
+  { value, onChange, variant }: OmitInternalProps<Props, 'children'>,
+  orientation: 'horizontal' | 'vertical' = 'horizontal'
+) => {
+  return render(
+    <TestingPicasso>
+      <Tabs
+        onChange={onChange}
+        value={value}
+        orientation={orientation}
+        variant={variant}
+      >
+        {tabs.map((tab, index) => (
+          <Tabs.Tab
+            key={index}
+            data-testid={`tab-${index + 1}`}
+            value={tab.value}
+            label={tab.label}
+            disabled={tab.disabled}
+          />
+        ))}
+      </Tabs>
+
+      {tabs.map((tab, index) => renderTabContent(tab, index, value))}
+    </TestingPicasso>
+  )
+}
+
+describe('Tabs', () => {
+  it('renders', () => {
+    const { container, queryByTestId } = renderTabs(
+      [{ label: 'Tab 1' }, { label: 'Tab 2' }],
+      {
+        value: false,
+      }
+    )
+
+    expect(queryByTestId('tab-1-content')).not.toBeInTheDocument()
+    expect(queryByTestId('tab-2-content')).not.toBeInTheDocument()
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders in vertical orientation', () => {
+    const { container } = renderTabs(
+      [{ label: 'Tab 1' }, { label: 'Tab 2' }],
+      { value: false },
+      'vertical'
+    )
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders with a pre-selected option', () => {
+    const { container, queryByTestId } = renderTabs(
+      [{ label: 'Tab 1' }, { label: 'Tab 2' }],
+      {
+        value: 1,
+      }
+    )
+
+    expect(queryByTestId('tab-2-content')).not.toBeInTheDocument()
+    expect(queryByTestId('tab-1-content')).toBeInTheDocument()
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders with a pre-selected option using custom value', () => {
+    const { container, queryByTestId } = renderTabs(
+      [
+        { label: 'Tab 1', value: 'tab-1' },
+        { label: 'Tab 2', value: 'tab-2' },
+      ],
+      {
+        value: 'tab-1',
+      }
+    )
+
+    expect(queryByTestId('tab-2-content')).not.toBeInTheDocument()
+    expect(queryByTestId('tab-1-content')).toBeInTheDocument()
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('fires onChange when clicked', () => {
+    const onChange = jest.fn()
+    const { getByTestId } = renderTabs(
+      [{ label: 'Tab 1' }, { label: 'Tab 2' }],
+      {
+        value: 1,
+        onChange,
+      }
+    )
+
+    fireEvent.click(getByTestId('tab-2'))
+    expect(onChange).toHaveBeenCalledTimes(1)
+  })
+
+  it('fires onChange with custom value when clicked', () => {
+    const onChange = jest.fn()
+    const { getByTestId } = renderTabs(
+      [
+        { label: 'Tab 1', value: 'first' },
+        { label: 'Tab 2', value: 'second' },
+      ],
+      {
+        value: 'first',
+        onChange,
+      }
+    )
+
+    fireEvent.click(getByTestId('tab-2'))
+    expect(onChange).toHaveBeenCalledTimes(1)
+    expect(onChange).toHaveBeenCalledWith(expect.anything(), 'second')
+  })
+
+  it('doesnt fire onChange when disabled', () => {
+    const onChange = jest.fn()
+    const { getByTestId } = renderTabs(
+      [{ label: 'Tab 1' }, { label: 'Tab 2', disabled: true }],
+      {
+        value: 1,
+        onChange,
+      }
+    )
+
+    fireEvent.click(getByTestId('tab-2'))
+    expect(onChange).toHaveBeenCalledTimes(0)
+  })
+
+  it('renders in full width', () => {
+    const { container } = renderTabs([{ label: 'Tab 1' }, { label: 'Tab 2' }], {
+      value: false,
+      variant: 'fullWidth',
+    })
+
+    expect(container).toMatchSnapshot()
+  })
+})

package/src/Tabs/use-tab-action.ts

@@ -0,0 +1,27 @@
+import type { Ref } from 'react'
+import { useEffect, useRef } from 'react'
+import type { TabsActions } from '@material-ui/core'
+
+/*
+ * MuiTabs break when the size of a tab changes without rendering with React.
+ * This issue happens when the font is loaded after the initial render of the component.
+ * To solve this issue, we imperatively update the indicator and scroll buttons when it happens.
+ */
+const useTabAction = (): Ref<TabsActions> => {
+  const ref = useRef<TabsActions>(null)
+
+  useEffect(() => {
+    const listener = () => {
+      ref.current?.updateIndicator()
+      ref.current?.updateScrollButtons()
+    }
+
+    window.addEventListener('load', listener)
+
+    return () => window.removeEventListener('load', listener)
+  }, [])
+
+  return ref
+}
+
+export default useTabAction

package/src/TabsCompound/index.ts

@@ -0,0 +1,6 @@
+import { Tab } from '../Tab'
+import { Tabs } from '../Tabs'
+
+export const TabsCompound = Object.assign(Tabs, {
+  Tab,
+})

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from './TabScrollButton'
+export * from './Tabs'
+export * from './Tab'
+export * from './TabDescription'
+export * from './TabsCompound'
+export * from './TabLabel'

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": { "outDir": "dist-package" },
+  "include": ["src"],
+  "references": [
+    { "path": "../../picasso-provider" },
+    { "path": "../../shared" },
+    { "path": "../Container" },
+    { "path": "../Icons" },
+    { "path": "../Typography" },
+    { "path": "../TypographyOverflow" },
+    { "path": "../UserBadge" },
+    { "path": "../Utils" }
+  ]
+}