@atlaskit/tabs 17.2.0 → 17.2.2

package/codemods/__tests__/on-select-to-on-change.tsx

@@ -1,541 +0,0 @@
-import { createTransformer } from '@atlaskit/codemod-utils';
-
-import { migrateOnSelectType } from '../migrations/on-select-to-on-change';
-
-const transformer = createTransformer([migrateOnSelectType]);
-
-const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
-
-describe('change onSelect to onChange', () => {
-	defineInlineTest(
-		{ default: transformer, parser: 'tsx' },
-		{},
-		`
-    import React, { useState } from 'react';
-    import Tabs from '@atlaskit/tabs';
-    import { TabData } from '@atlaskit/tabs/types';
-
-    const tabs: Array<TabData> = [
-      { label: 'Tab 1', content: One, testId: 'one' },
-      { label: 'Tab 2', content: Two },
-      { label: 'Tab 3', content: Three },
-      { label: 'Tab 4', content: Four },
-    ];
-
-    export default function defaultTabs() {
-      const [selected, setSelected] = useState(0);
-
-      return (
-        <Tabs
-          onSelect={(selected, selectedIndex, analyticsEvent) => setSelected(selectedIndex)}
-          selected={selected}
-          tabs={tabs}
-        />
-      );
-    }
-    `,
-		`
-    /* TODO: (from codemod) 
-    This file uses onSelect and this prop has been changed names to onChange.
-
-    The type of onChange has also changed from
-    (selected: TabData, selectedIndex: number, analyticsEvent: UIAnalyticsEvent) => void;
-    to
-    (index: number, analyticsEvent: UIAnalyticsEvent) => void;
-
-    The logic around selecting tabs has changed internally and there is no longer the concept of TabData.
-    Tabs is now composable and the tabs prop has been removed.
-
-    The codemod has changed your usage of onSelect to be one of onChange. We are using the tabs
-    array and the selected index to pass the "selected tab" to your old onSelect function. This is
-    functional but you may like to update your usage of tabs to fit with the new API.
-
-    If you are using the selected prop you will need to ensure that you are passing in the index
-    of the selected tab as it also doesn't accept TabData anymore. */
-    import React, { useState } from 'react';
-    import Tabs from '@atlaskit/tabs';
-    import { TabData } from '@atlaskit/tabs/types';
-
-    const tabs: Array<TabData> = [
-      { label: 'Tab 1', content: One, testId: 'one' },
-      { label: 'Tab 2', content: Two },
-      { label: 'Tab 3', content: Three },
-      { label: 'Tab 4', content: Four },
-    ];
-
-    export default function defaultTabs() {
-      const [selected, setSelected] = useState(0);
-
-      return (
-        <Tabs
-          onChange={(index, analyticsEvent) => {
-            const selectedTab = tabs[index];
-            ((selected, selectedIndex, analyticsEvent) => setSelected(selectedIndex))(selectedTab, index, analyticsEvent);
-          }}
-          selected={selected}
-          tabs={tabs}
-        />
-      );
-    }
-    `,
-		'should change inline usage of onSelect to IIFE onChange and find the relevant tab data',
-	);
-
-	defineInlineTest(
-		{ default: transformer, parser: 'tsx' },
-		{},
-		`
-    import React, { useState } from 'react';
-    import Tabs from '@atlaskit/tabs';
-
-    export default function defaultTabs() {
-      const [selected, setSelected] = useState(0);
-
-      return (
-        <Tabs
-          onSelect={(selected, selectedIndex, analyticsEvent) => setSelected(selectedIndex)}
-          selected={selected}
-          tabs={[
-            { label: 'Tab 1', content: One, testId: 'one' },
-            { label: 'Tab 2', content: Two },
-            { label: 'Tab 3', content: Three },
-            { label: 'Tab 4', content: Four },
-          ]}
-        />
-      );
-    }
-    `,
-		`
-    /* TODO: (from codemod) 
-    This file uses onSelect and this prop has been changed names to onChange.
-
-    The type of onChange has also changed from
-    (selected: TabData, selectedIndex: number, analyticsEvent: UIAnalyticsEvent) => void;
-    to
-    (index: number, analyticsEvent: UIAnalyticsEvent) => void;
-
-    The logic around selecting tabs has changed internally and there is no longer the concept of TabData.
-    Tabs is now composable and the tabs prop has been removed.
-
-    The codemod has changed your usage of onSelect to be one of onChange. We are using the tabs
-    array and the selected index to pass the "selected tab" to your old onSelect function. This is
-    functional but you may like to update your usage of tabs to fit with the new API.
-
-    If you are using the selected prop you will need to ensure that you are passing in the index
-    of the selected tab as it also doesn't accept TabData anymore. */
-    import React, { useState } from 'react';
-    import Tabs from '@atlaskit/tabs';
-
-    export default function defaultTabs() {
-      const [selected, setSelected] = useState(0);
-
-      return (
-        <Tabs
-          onChange={(index, analyticsEvent) => {
-            const selectedTab = [
-              { label: 'Tab 1', content: One, testId: 'one' },
-              { label: 'Tab 2', content: Two },
-              { label: 'Tab 3', content: Three },
-              { label: 'Tab 4', content: Four },
-            ][index];
-
-            ((selected, selectedIndex, analyticsEvent) => setSelected(selectedIndex))(selectedTab, index, analyticsEvent);
-          }}
-          selected={selected}
-          tabs={[
-            { label: 'Tab 1', content: One, testId: 'one' },
-            { label: 'Tab 2', content: Two },
-            { label: 'Tab 3', content: Three },
-            { label: 'Tab 4', content: Four },
-          ]}
-        />
-      );
-    }
-    `,
-		'should change inline usage of onSelect to IIFE onChange and find the relevant tab data if tabs is defined inline',
-	);
-
-	defineInlineTest(
-		{ default: transformer, parser: 'tsx' },
-		{},
-		`
-    import React, { useState } from 'react';
-
-    import Tabs from '@atlaskit/tabs';
-    import { TabData } from '@atlaskit/tabs/types';
-
-    const tabs: Array<TabData> = [
-      { label: 'Tab 1', content: One, testId: 'one' },
-      { label: 'Tab 2', content: Two },
-      { label: 'Tab 3', content: Three },
-      { label: 'Tab 4', content: Four },
-    ];
-
-    export default function defaultTabs() {
-      const [selected, setSelected] = useState(0);
-
-      const onSelect = (selected, selectedIndex) => setSelected(selectedIndex);
-
-      return (
-        <Tabs
-          onSelect={onSelect}
-          selected={selected}
-          tabs={tabs}
-        />
-      );
-    }
-    `,
-		`
-    /* TODO: (from codemod) 
-    This file uses onSelect and this prop has been changed names to onChange.
-
-    The type of onChange has also changed from
-    (selected: TabData, selectedIndex: number, analyticsEvent: UIAnalyticsEvent) => void;
-    to
-    (index: number, analyticsEvent: UIAnalyticsEvent) => void;
-
-    The logic around selecting tabs has changed internally and there is no longer the concept of TabData.
-    Tabs is now composable and the tabs prop has been removed.
-
-    The codemod has changed your usage of onSelect to be one of onChange. We are using the tabs
-    array and the selected index to pass the "selected tab" to your old onSelect function. This is
-    functional but you may like to update your usage of tabs to fit with the new API.
-
-    If you are using the selected prop you will need to ensure that you are passing in the index
-    of the selected tab as it also doesn't accept TabData anymore. */
-    import React, { useState } from 'react';
-
-    import Tabs from '@atlaskit/tabs';
-    import { TabData } from '@atlaskit/tabs/types';
-
-    const tabs: Array<TabData> = [
-      { label: 'Tab 1', content: One, testId: 'one' },
-      { label: 'Tab 2', content: Two },
-      { label: 'Tab 3', content: Three },
-      { label: 'Tab 4', content: Four },
-    ];
-
-    export default function defaultTabs() {
-      const [selected, setSelected] = useState(0);
-
-      const onSelect = (selected, selectedIndex) => setSelected(selectedIndex);
-
-      return (
-        <Tabs
-          onChange={(index, analyticsEvent) => {
-            const selectedTab = tabs[index];
-            onSelect(selectedTab, index, analyticsEvent);
-          }}
-          selected={selected}
-          tabs={tabs}
-        />
-      );
-    }
-    `,
-		'should change usage of onSelect to onChange with the relevant tab data',
-	);
-
-	defineInlineTest(
-		{ default: transformer, parser: 'tsx' },
-		{},
-		`
-    import React, { useState } from 'react';
-
-    import Tabs from '@atlaskit/tabs';
-
-    export default function defaultTabs() {
-      const [selected, setSelected] = useState(0);
-
-      const onSelect = (selected, selectedIndex) => setSelected(selectedIndex);
-
-      return (
-        <Tabs
-          onSelect={onSelect}
-          selected={selected}
-          tabs={[
-            { label: 'Tab 1', content: One, testId: 'one' },
-            { label: 'Tab 2', content: Two },
-            { label: 'Tab 3', content: Three },
-            { label: 'Tab 4', content: Four },
-          ]}
-        />
-      );
-    }
-    `,
-		`
-    /* TODO: (from codemod) 
-    This file uses onSelect and this prop has been changed names to onChange.
-
-    The type of onChange has also changed from
-    (selected: TabData, selectedIndex: number, analyticsEvent: UIAnalyticsEvent) => void;
-    to
-    (index: number, analyticsEvent: UIAnalyticsEvent) => void;
-
-    The logic around selecting tabs has changed internally and there is no longer the concept of TabData.
-    Tabs is now composable and the tabs prop has been removed.
-
-    The codemod has changed your usage of onSelect to be one of onChange. We are using the tabs
-    array and the selected index to pass the "selected tab" to your old onSelect function. This is
-    functional but you may like to update your usage of tabs to fit with the new API.
-
-    If you are using the selected prop you will need to ensure that you are passing in the index
-    of the selected tab as it also doesn't accept TabData anymore. */
-    import React, { useState } from 'react';
-
-    import Tabs from '@atlaskit/tabs';
-
-    export default function defaultTabs() {
-      const [selected, setSelected] = useState(0);
-
-      const onSelect = (selected, selectedIndex) => setSelected(selectedIndex);
-
-      return (
-        <Tabs
-          onChange={(index, analyticsEvent) => {
-            const selectedTab = [
-              { label: 'Tab 1', content: One, testId: 'one' },
-              { label: 'Tab 2', content: Two },
-              { label: 'Tab 3', content: Three },
-              { label: 'Tab 4', content: Four },
-            ][index];
-
-            onSelect(selectedTab, index, analyticsEvent);
-          }}
-          selected={selected}
-          tabs={[
-            { label: 'Tab 1', content: One, testId: 'one' },
-            { label: 'Tab 2', content: Two },
-            { label: 'Tab 3', content: Three },
-            { label: 'Tab 4', content: Four },
-          ]}
-        />
-      );
-    }
-    `,
-		'should change usage of onSelect to onChange with the relevant tab data if tabs is defined inline',
-	);
-	defineInlineTest(
-		{ default: transformer, parser: 'tsx' },
-		{},
-		`
-    import React, { useState } from 'react';
-
-    import Tabs from '@atlaskit/tabs';
-
-    const getTabs = () => (
-      [
-        { label: 'Tab 1', content: One, testId: 'one' },
-        { label: 'Tab 2', content: Two },
-        { label: 'Tab 3', content: Three },
-        { label: 'Tab 4', content: Four },
-      ]
-    );
-
-    export default function defaultTabs() {
-      const [selected, setSelected] = useState(0);
-
-      const onSelect = (selected, selectedIndex) => setSelected(selectedIndex);
-
-      return (
-        <Tabs
-          onSelect={onSelect}
-          selected={selected}
-          tabs={getTabs()}
-        />
-      );
-    }
-    `,
-		`
-    /* TODO: (from codemod) 
-    This file uses onSelect and this prop has been changed names to onChange.
-
-    The type of onChange has also changed from
-    (selected: TabData, selectedIndex: number, analyticsEvent: UIAnalyticsEvent) => void;
-    to
-    (index: number, analyticsEvent: UIAnalyticsEvent) => void;
-
-    The logic around selecting tabs has changed internally and there is no longer the concept of TabData.
-    Tabs is now composable and the tabs prop has been removed.
-
-    The codemod has changed your usage of onSelect to be one of onChange. We are using the tabs
-    array and the selected index to pass the "selected tab" to your old onSelect function. This is
-    functional but you may like to update your usage of tabs to fit with the new API.
-
-    If you are using the selected prop you will need to ensure that you are passing in the index
-    of the selected tab as it also doesn't accept TabData anymore. */
-    import React, { useState } from 'react';
-
-    import Tabs from '@atlaskit/tabs';
-
-    const getTabs = () => (
-      [
-        { label: 'Tab 1', content: One, testId: 'one' },
-        { label: 'Tab 2', content: Two },
-        { label: 'Tab 3', content: Three },
-        { label: 'Tab 4', content: Four },
-      ]
-    );
-
-    export default function defaultTabs() {
-      const [selected, setSelected] = useState(0);
-
-      const onSelect = (selected, selectedIndex) => setSelected(selectedIndex);
-
-      return (
-        <Tabs
-          onChange={(index, analyticsEvent) => {
-            const selectedTab = getTabs()[index];
-            onSelect(selectedTab, index, analyticsEvent);
-          }}
-          selected={selected}
-          tabs={getTabs()}
-        />
-      );
-    }
-  `,
-		'should change usage of onSelect to onChange with the relevant tab data if tabs is a function',
-	);
-	defineInlineTest(
-		{ default: transformer, parser: 'tsx' },
-		{},
-		`
-    import React, { useState } from 'react';
-
-    import Tabs from '@atlaskit/tabs';
-
-    export default function defaultTabs(props) {
-      const [selected, setSelected] = useState(0);
-
-      const onSelect = (selected, selectedIndex) => setSelected(selectedIndex);
-
-      return (
-        <Tabs
-          onSelect={onSelect}
-          selected={selected}
-          {...props}
-        />
-      );
-    }
-    `,
-		`
-    /* TODO: (from codemod) 
-    This file uses onSelect and this prop has been changed names to onChange.
-
-    The type of onChange has also changed from
-    (selected: TabData, selectedIndex: number, analyticsEvent: UIAnalyticsEvent) => void;
-    to
-    (index: number, analyticsEvent: UIAnalyticsEvent) => void;
-
-    The logic around selecting tabs has changed internally and there is no longer the concept of TabData.
-    Tabs is now composable and the tabs prop has been removed.
-
-    The codemod has changed your usage of onSelect to be one of onChange. We are using the tabs
-    array and the selected index to pass the "selected tab" to your old onSelect function. This is
-    functional but you may like to update your usage of tabs to fit with the new API.
-
-    If you are using the selected prop you will need to ensure that you are passing in the index
-    of the selected tab as it also doesn't accept TabData anymore. */
-    import React, { useState } from 'react';
-
-    import Tabs from '@atlaskit/tabs';
-
-    export default function defaultTabs(props) {
-      const [selected, setSelected] = useState(0);
-
-      const onSelect = (selected, selectedIndex) => setSelected(selectedIndex);
-
-      return (
-        <Tabs
-          onChange={(index, analyticsEvent) => {
-            const selectedTab = props.tabs[index];
-            onSelect(selectedTab, index, analyticsEvent);
-          }}
-          selected={selected}
-          {...props}
-        />
-      );
-    }
-  `,
-		'should change usage of onSelect to onChange if the tabs prop is spread',
-	);
-
-	defineInlineTest(
-		{ default: transformer, parser: 'tsx' },
-		{},
-		`
-    import React, { useState } from 'react';
-
-    import Tabs from '@atlaskit/tabs';
-
-    export default function defaultTabs() {
-      const [selected, setSelected] = useState(0);
-
-      const onSelect = (selected, selectedIndex) => setSelected(selectedIndex);
-
-      return (
-        <Tabs
-          selected={selected}
-          tabs={[
-            { label: 'Tab 1', content: One, testId: 'one' },
-            { label: 'Tab 2', content: <CustomElement onChange={() => {console.log('big change')}} /> },
-            { label: 'Tab 3', content: Three },
-            { label: 'Tab 4', content: Four },
-          ]}
-          onSelect={onSelect}
-        />
-      );
-    }
-    `,
-		`
-    /* TODO: (from codemod) 
-    This file uses onSelect and this prop has been changed names to onChange.
-
-    The type of onChange has also changed from
-    (selected: TabData, selectedIndex: number, analyticsEvent: UIAnalyticsEvent) => void;
-    to
-    (index: number, analyticsEvent: UIAnalyticsEvent) => void;
-
-    The logic around selecting tabs has changed internally and there is no longer the concept of TabData.
-    Tabs is now composable and the tabs prop has been removed.
-
-    The codemod has changed your usage of onSelect to be one of onChange. We are using the tabs
-    array and the selected index to pass the "selected tab" to your old onSelect function. This is
-    functional but you may like to update your usage of tabs to fit with the new API.
-
-    If you are using the selected prop you will need to ensure that you are passing in the index
-    of the selected tab as it also doesn't accept TabData anymore. */
-    import React, { useState } from 'react';
-
-    import Tabs from '@atlaskit/tabs';
-
-    export default function defaultTabs() {
-      const [selected, setSelected] = useState(0);
-
-      const onSelect = (selected, selectedIndex) => setSelected(selectedIndex);
-
-      return (
-        <Tabs
-          selected={selected}
-          tabs={[
-            { label: 'Tab 1', content: One, testId: 'one' },
-            { label: 'Tab 2', content: <CustomElement onChange={() => {console.log('big change')}} /> },
-            { label: 'Tab 3', content: Three },
-            { label: 'Tab 4', content: Four },
-          ]}
-          onChange={(index, analyticsEvent) => {
-            const selectedTab = [
-              { label: 'Tab 1', content: One, testId: 'one' },
-              { label: 'Tab 2', content: <CustomElement onChange={() => {console.log('big change')}} /> },
-              { label: 'Tab 3', content: Three },
-              { label: 'Tab 4', content: Four },
-            ][index];
-
-            onSelect(selectedTab, index, analyticsEvent);
-          }}
-        />
-      );
-    }
-    `,
-		'should change usage of onSelect to onChange with the relevant tab data if onChange is defined in tabs children',
-	);
-});

package/codemods/__tests__/remove-components-prop.tsx

@@ -1,151 +0,0 @@
-import { createTransformer } from '@atlaskit/codemod-utils';
-
-import { removeComponentsProp } from '../migrations/remove-components-prop';
-
-const transformer = createTransformer([removeComponentsProp]);
-
-const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
-
-describe('remove components prop', () => {
-	defineInlineTest(
-		{ default: transformer, parser: 'tsx' },
-		{},
-		`
-    import React from 'react';
-
-    import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
-    import { customComponents } from './custom';
-
-    export default function defaultTabs() {
-      return (
-        <Tabs
-          onChange={index => console.log('Selected Tab', index + 1)}
-          id="default"
-          testId="default"
-          components={customComponents}
-        >
-          <TabList>
-            <Tab>Tab 1</Tab>
-            <Tab>Tab 2</Tab>
-            <Tab>Tab 3</Tab>
-            <Tab>Tab 4</Tab>
-          </TabList>
-          <TabPanel>One</TabPanel>
-          <TabPanel>Two</TabPanel>
-          <TabPanel>Three</TabPanel>
-          <TabPanel>Four</TabPanel>
-        </Tabs>
-      );
-    }
-    `,
-		`
-    /* TODO: (from codemod) 
-    We could not automatically convert this code to the new API.
-
-    This file uses \`Tabs\`’s \`component\` prop. This has been removed as part of moving to
-    a compositional API.
-
-    To create a custom tab (replacement for \`Item\` component) refer to the docs at
-    https://atlassian.design/components/tabs/examples#customizing-tab
-
-    To create a custom tab panel (replacement for \`Content\` component) refer to the docs at
-    https://atlassian.design/components/tabs/examples#customizing-tab-panel */
-    import React from 'react';
-
-    import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
-    import { customComponents } from './custom';
-
-    export default function defaultTabs() {
-      return (
-        <Tabs
-          onChange={index => console.log('Selected Tab', index + 1)}
-          id="default"
-          testId="default">
-          <TabList>
-            <Tab>Tab 1</Tab>
-            <Tab>Tab 2</Tab>
-            <Tab>Tab 3</Tab>
-            <Tab>Tab 4</Tab>
-          </TabList>
-          <TabPanel>One</TabPanel>
-          <TabPanel>Two</TabPanel>
-          <TabPanel>Three</TabPanel>
-          <TabPanel>Four</TabPanel>
-        </Tabs>
-      );
-    }
-    `,
-		'should remove component prop if using variable',
-	);
-
-	defineInlineTest(
-		{ default: transformer, parser: 'tsx' },
-		{},
-		`
-    import React from 'react';
-
-    import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
-    import { TooltipItem, CustomContent } from './custom';
-
-    export default function defaultTabs() {
-      return (
-        <Tabs
-          onChange={index => console.log('Selected Tab', index + 1)}
-          id="default"
-          testId="default"
-          components={{ Item: TooltipItem, Content: CustomContent}}
-        >
-          <TabList>
-            <Tab>Tab 1</Tab>
-            <Tab>Tab 2</Tab>
-            <Tab>Tab 3</Tab>
-            <Tab>Tab 4</Tab>
-          </TabList>
-          <TabPanel>One</TabPanel>
-          <TabPanel>Two</TabPanel>
-          <TabPanel>Three</TabPanel>
-          <TabPanel>Four</TabPanel>
-        </Tabs>
-      );
-    }
-    `,
-		`
-    /* TODO: (from codemod) 
-    We could not automatically convert this code to the new API.
-
-    This file uses \`Tabs\`’s \`component\` prop. This has been removed as part of moving to
-    a compositional API.
-
-    To create a custom tab (replacement for \`Item\` component) refer to the docs at
-    https://atlassian.design/components/tabs/examples#customizing-tab
-
-    To create a custom tab panel (replacement for \`Content\` component) refer to the docs at
-    https://atlassian.design/components/tabs/examples#customizing-tab-panel */
-    import React from 'react';
-
-    import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
-    import { TooltipItem, CustomContent } from './custom';
-
-    export default function defaultTabs() {
-      return (
-        <Tabs
-          onChange={index => console.log('Selected Tab', index + 1)}
-          id="default"
-          testId="default">
-          <TabList>
-            <Tab>Tab 1</Tab>
-            <Tab>Tab 2</Tab>
-            <Tab>Tab 3</Tab>
-            <Tab>Tab 4</Tab>
-          </TabList>
-          <TabPanel>One</TabPanel>
-          <TabPanel>Two</TabPanel>
-          <TabPanel>Three</TabPanel>
-          <TabPanel>Four</TabPanel>
-        </Tabs>
-      );
-    }
-    `,
-		'should remove component prop if using an object',
-	);
-});