@toptal/picasso-tabs 1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-81b5d3814.4045 → 1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-461e5c0da.4048

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

@@ -1,84 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,165 +0,0 @@
-/* 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

@@ -1,27 +0,0 @@
-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

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

package/src/index.ts

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

package/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "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" }
-  ]
-}