@axinom/mosaic-ui 0.42.0-rc.5 → 0.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.42.0-rc.5",
+  "version": "0.42.0",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.15-rc.5",
+    "@axinom/mosaic-core": "^0.4.15",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.11.8",
     "clsx": "^1.1.0",
@@ -43,7 +43,6 @@
     "react-content-loader": "^6.0.3",
     "react-imask": "^6.4.3",
     "react-popper": "^2.2.5",
-    "react-tabs": "4.3.0",
     "react-transition-group": "^4.3.0",
     "yup": "^0.32.11"
   },
@@ -105,5 +104,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0a4a124c07abc12604ad50a1892c8ae6b4e49a15"
+  "gitHead": "dcabfd315342d0d428c437a1e0915f080c38ea9f"
 }

package/src/components/FormStation/FormStation.stories.tsx

@@ -24,7 +24,6 @@ import { CheckboxField } from '../FormElements/Checkbox/CheckboxField';
 import { DynamicDataListField } from '../FormElements/DynamicDataListControl/DynamicDataListField';
 import { MaskedSingleLineTextField } from '../FormElements/MaskedSingleLineText/MaskedSingleLineTextField';
 import { InfoPanel, Paragraph, Section } from '../InfoPanel';
-import { Tab, TabList, TabPanel, Tabs } from '../Tabs';
 import { ErrorType } from '../models';
 import { Details, DetailsProps } from './Details/Details';
 import { ObjectSchemaDefinition } from './FormStation';
@@ -295,177 +294,6 @@ export const Extended: StoryObj<typeof Details> = (() => {
   };
 })();
 
-export const TabbedContent: StoryObj<typeof Details> = (() => {
-  const listData = generateItemArray(4, (index) => ({
-    position: index + 1,
-    id: index,
-    locale: faker.random.locale(),
-    country: faker.address.country(),
-  }));
-  return {
-    args: {
-      titleProperty: 'title',
-      subtitle: 'Movies',
-      actions: generateActions(7),
-      validationSchema: Yup.object<ObjectSchemaDefinition<DetailsValues>>({
-        title: Yup.string().required().max(25).label('Title'),
-        genres: Yup.array<DetailsValues>()
-          .of(Yup.string())
-          .max(2)
-          .label('Genres'),
-        shortDescription: Yup.string().required().label('Short Description'),
-        cast: Yup.array<DetailsValues>().of(Yup.string()).min(1).label('Cast'),
-      }),
-      initialData: {
-        loading: false,
-        data: {
-          id: 12344567890,
-          title: 'My Movie',
-          publishState: 'PUBLISHED',
-          genres: [],
-          licenses: [],
-          ratings: 'PG-13',
-          shortDescription: 'Some short abstract...',
-          longDescription: '',
-          cast: ['Jane Doe', 'John Doe'],
-          released: '2020-04-03T00:00:00.000+00:00',
-          list: listData,
-          archived: false,
-          timestamp: '00:00:00.001',
-        },
-      },
-      children: (
-        <Tabs>
-          <TabList>
-            <Tab>Tab 1</Tab>
-            <Tab>Tab 2</Tab>
-          </TabList>
-          <TabPanel>
-            <div
-              style={{
-                display: 'grid',
-                gridAutoRows: 'max-content',
-                rowGap: '20px',
-                paddingTop: '20px',
-                paddingBottom: '20px',
-              }}
-            >
-              <Field name="id" label="Id" as={ReadOnlyField} />
-              <Field name="title" label="Title" as={SingleLineTextField} />
-              <Field
-                name="publishState"
-                label="Publish State"
-                as={ReadOnlyField}
-              />
-              <Field
-                name="genres"
-                label="Genre(s)"
-                tagsOptions={['Crime', 'Drama', 'Thriller']}
-                as={TagsField}
-              />
-
-              <Field
-                name="ratings"
-                label="Age Rating"
-                options={[
-                  { value: 'PG', label: 'Parental Guidance Suggested (PG)' },
-                  {
-                    value: 'PG-13',
-                    label: 'Parents Strongly Cautioned (PG-13)',
-                  },
-                  { value: 'R', label: 'Restricted (R)' },
-                ]}
-                as={SelectField}
-              />
-
-              <Field
-                name="shortDescription"
-                label="Short Description"
-                placeholder="Enter a short description..."
-                as={SingleLineTextField}
-              />
-              <Field
-                name="longDescription"
-                label="Long Description"
-                placeholder="Enter a description..."
-                as={SingleLineTextField}
-              />
-              <Field name="cast" label="Cast" as={CustomTagsField} />
-              <Field name="released" label="Released" as={DateTimeTextField} />
-              <Field
-                name="password"
-                label="Password"
-                as={SingleLineTextField}
-                type="password"
-              />
-
-              <Field
-                name="licenses"
-                label="License Countries"
-                tagsOptions={[
-                  { value: 'DE', key: 'Germany' },
-                  { value: 'EE', key: 'Estonia' },
-                  { value: 'LK', key: 'Sri Lanka' },
-                ]}
-                as={TagsField}
-                displayKey="key"
-                valueKey="value"
-              />
-              <Field
-                name="list"
-                label="Subtitles"
-                columns={[
-                  {
-                    propertyName: 'id',
-                    label: 'Id',
-                    size: '50px',
-                  },
-                  {
-                    propertyName: 'locale',
-                    label: 'Locale',
-                    dataEntryRender: createInputRenderer({
-                      placeholder: 'Enter Locale',
-                    }),
-                  },
-                  {
-                    propertyName: 'country',
-                    label: 'Country',
-                    dataEntryRender: createSelectRenderer({
-                      options: [
-                        { value: 'Country 10', label: 'Country 10' },
-                        { value: 'Country 11', label: 'Country 11' },
-                        { value: 'Country 12', label: 'Country 12' },
-                      ],
-                      placeholder: 'Enter Country',
-                    }),
-                  },
-                ]}
-                data={listData}
-                positionPropertyName={'position'}
-                allowReordering={true}
-                allowRowDragging={true}
-                allowNewData={true}
-                as={DynamicDataListField}
-              />
-              <Field name="archived" label="Set Archived" as={CheckboxField} />
-              <Field
-                name="timestamp"
-                label="Timestamp"
-                mask="00:00:00.000"
-                as={MaskedSingleLineTextField}
-              />
-            </div>
-          </TabPanel>
-          <TabPanel>
-            <h2>Tab 2</h2>
-            <p>{faker.lorem.paragraph(20)}</p>
-          </TabPanel>
-        </Tabs>
-      ),
-    },
-  };
-})();
-
 const errorGroups = createGroups({
   'Storybook (Loading Error)': [
     'loadingError',

package/dist/components/Tabs/Tab/CustomTab.d.ts

@@ -1,3 +0,0 @@
-import { ReactTabsFunctionComponent, TabProps } from 'react-tabs';
-export declare const CustomTab: ReactTabsFunctionComponent<TabProps>;
-//# sourceMappingURL=CustomTab.d.ts.map

package/dist/components/Tabs/Tab/CustomTab.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CustomTab.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tab/CustomTab.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAO,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGvE,eAAO,MAAM,SAAS,EAAE,0BAA0B,CAAC,QAAQ,CA2B1D,CAAC"}

package/dist/components/Tabs/Tab/index.d.ts

@@ -1,2 +0,0 @@
-export { CustomTab as Tab } from './CustomTab';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Tabs/Tab/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tab/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,GAAG,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/Tabs/TabList/CustomTabList.d.ts

@@ -1,3 +0,0 @@
-import { ReactTabsFunctionComponent, TabListProps } from 'react-tabs';
-export declare const CustomTabList: ReactTabsFunctionComponent<TabListProps>;
-//# sourceMappingURL=CustomTabList.d.ts.map

package/dist/components/Tabs/TabList/CustomTabList.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CustomTabList.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/TabList/CustomTabList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAW,YAAY,EAAE,MAAM,YAAY,CAAC;AAI/E,eAAO,MAAM,aAAa,EAAE,0BAA0B,CAAC,YAAY,CAOlE,CAAC"}

package/dist/components/Tabs/TabList/ScrollContainer/ScrollContainer.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const ScrollContainer: React.FC;
-//# sourceMappingURL=ScrollContainer.d.ts.map

package/dist/components/Tabs/TabList/ScrollContainer/ScrollContainer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScrollContainer.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tabs/TabList/ScrollContainer/ScrollContainer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EA+BnC,CAAC"}

package/dist/components/Tabs/TabList/ScrollContainer/index.d.ts

@@ -1,2 +0,0 @@
-export { ScrollContainer } from './ScrollContainer';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Tabs/TabList/ScrollContainer/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tabs/TabList/ScrollContainer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/Tabs/TabList/ScrollContainer/useScroll.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-export declare const useScroll: <T extends HTMLElement>() => {
-    scrollLeft: () => void;
-    scrollRight: () => void;
-    scrollRef: React.RefObject<T>;
-    showScroll: boolean;
-    enableScrollLeft: boolean;
-    enableScrollRight: boolean;
-};
-//# sourceMappingURL=useScroll.d.ts.map

package/dist/components/Tabs/TabList/ScrollContainer/useScroll.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useScroll.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tabs/TabList/ScrollContainer/useScroll.ts"],"names":[],"mappings":"AACA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAE/E,eAAO,MAAM,SAAS;gBACR,MAAM,IAAI;iBACT,MAAM,IAAI;;gBAEX,OAAO;sBACD,OAAO;uBACN,OAAO;CAwG3B,CAAC"}

package/dist/components/Tabs/TabList/index.d.ts

@@ -1,2 +0,0 @@
-export { CustomTabList as TabList } from './CustomTabList';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Tabs/TabList/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/TabList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/Tabs/TabPanel/CustomTabPanel.d.ts

@@ -1,3 +0,0 @@
-import { ReactTabsFunctionComponent, TabPanelProps } from 'react-tabs';
-export declare const CustomTabPanel: ReactTabsFunctionComponent<TabPanelProps>;
-//# sourceMappingURL=CustomTabPanel.d.ts.map

package/dist/components/Tabs/TabPanel/CustomTabPanel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CustomTabPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/TabPanel/CustomTabPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,0BAA0B,EAE1B,aAAa,EACd,MAAM,YAAY,CAAC;AAGpB,eAAO,MAAM,cAAc,EAAE,0BAA0B,CAAC,aAAa,CAcpE,CAAC"}

package/dist/components/Tabs/TabPanel/index.d.ts

@@ -1,2 +0,0 @@
-export { CustomTabPanel as TabPanel } from './CustomTabPanel';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Tabs/TabPanel/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/TabPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/Tabs/index.d.ts

@@ -1,5 +0,0 @@
-export { Tabs } from 'react-tabs';
-export { Tab } from './Tab';
-export { TabList } from './TabList';
-export { TabPanel } from './TabPanel';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Tabs/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/src/components/Tabs/Tab/CustomTab.scss

@@ -1,42 +0,0 @@
-@import '../../../styles/common.scss';
-
-.tab {
-  @include boxSizing;
-
-  display: grid;
-  height: 49px;
-  min-width: 180px;
-  background-color: $blue;
-  color: white;
-  font-size: 16px;
-  border: 1px solid $blue;
-  border-bottom: none;
-
-  padding: 0 15px;
-
-  cursor: pointer;
-
-  &.selected {
-    background: white;
-    color: $dark-gray;
-    border: 1px solid $light-gray;
-    border-bottom: none;
-  }
-
-  &.disabled {
-    background-color: $dark-gray;
-    cursor: default;
-  }
-
-  &:focus {
-    outline: none;
-  }
-}
-
-.content {
-  display: grid;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-  justify-content: center;
-}

package/src/components/Tabs/Tab/CustomTab.tsx

@@ -1,34 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { ReactTabsFunctionComponent, Tab, TabProps } from 'react-tabs';
-import classes from './CustomTab.scss';
-
-export const CustomTab: ReactTabsFunctionComponent<TabProps> = ({
-  children,
-  ...otherProps
-}) => {
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (ref.current && ref.current.parentElement && otherProps.selected) {
-      ref.current.parentElement.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest',
-      });
-    }
-  }, [otherProps.selected]);
-
-  return (
-    <Tab
-      {...otherProps}
-      className={classes.tab}
-      selectedClassName={classes.selected}
-      data-test-id="tab"
-    >
-      <div className={classes.content} ref={ref}>
-        {children}
-      </div>
-    </Tab>
-  );
-};
-
-CustomTab.tabsRole = 'Tab';

package/src/components/Tabs/Tab/index.ts

@@ -1 +0,0 @@
-export { CustomTab as Tab } from './CustomTab';

package/src/components/Tabs/TabList/CustomTabList.scss

@@ -1,7 +0,0 @@
-@import '../../../styles/common.scss';
-
-.tablist {
-  border: none;
-  margin: 0;
-  padding: 0;
-}

package/src/components/Tabs/TabList/CustomTabList.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { ReactTabsFunctionComponent, TabList, TabListProps } from 'react-tabs';
-import classes from './CustomTabList.scss';
-import { ScrollContainer } from './ScrollContainer';
-
-export const CustomTabList: ReactTabsFunctionComponent<TabListProps> = ({
-  children,
-  ...otherProps
-}) => (
-  <TabList {...otherProps} className={classes.tablist}>
-    <ScrollContainer>{children}</ScrollContainer>
-  </TabList>
-);
-
-CustomTabList.tabsRole = 'TabList';

package/src/components/Tabs/TabList/ScrollContainer/ScrollContainer.scss

@@ -1,34 +0,0 @@
-@import '../../../../styles/common.scss';
-
-.tablistWrapper {
-  overflow-x: auto;
-  overflow-y: hidden;
-  display: grid;
-  width: 100%;
-  white-space: nowrap;
-  grid-auto-flow: column;
-  grid-auto-columns: minmax(max-content, auto);
-  gap: 2px;
-
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-}
-
-/* Hide scrollbar for Chrome, Safari and Opera */
-.tablistWrapper::-webkit-scrollbar {
-  display: none;
-}
-
-.container {
-  display: grid;
-  // grid-template-columns: 50px auto 50px;
-
-  &.scroll {
-    grid-template-columns: 50px auto 50px;
-    gap: 2px;
-  }
-}
-
-.hide {
-  display: none;
-}

package/src/components/Tabs/TabList/ScrollContainer/ScrollContainer.tsx

@@ -1,39 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-import { Button } from '../../../Buttons';
-import { IconName } from '../../../Icons';
-import classes from './ScrollContainer.scss';
-import { useScroll } from './useScroll';
-
-export const ScrollContainer: React.FC = ({ children }) => {
-  const {
-    scrollRef,
-    showScroll,
-    scrollLeft,
-    scrollRight,
-    enableScrollLeft,
-    enableScrollRight,
-  } = useScroll<HTMLDivElement>();
-
-  return (
-    <div className={clsx(classes.container, { [classes.scroll]: showScroll })}>
-      <Button
-        icon={IconName.ChevronLeft}
-        onButtonClicked={scrollLeft}
-        className={clsx({ [classes.hide]: !showScroll })}
-        disabled={!enableScrollLeft}
-      />
-
-      <div className={classes.tablistWrapper} ref={scrollRef}>
-        {children}
-      </div>
-
-      <Button
-        icon={IconName.ChevronRight}
-        onButtonClicked={scrollRight}
-        className={clsx({ [classes.hide]: !showScroll })}
-        disabled={!enableScrollRight}
-      />
-    </div>
-  );
-};

package/src/components/Tabs/TabList/ScrollContainer/index.ts

@@ -1 +0,0 @@
-export { ScrollContainer } from './ScrollContainer';

package/src/components/Tabs/TabList/ScrollContainer/useScroll.ts

@@ -1,114 +0,0 @@
-import debounce from 'lodash/debounce';
-import React, { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
-
-export const useScroll = <T extends HTMLElement>(): {
-  scrollLeft: () => void;
-  scrollRight: () => void;
-  scrollRef: React.RefObject<T>;
-  showScroll: boolean;
-  enableScrollLeft: boolean;
-  enableScrollRight: boolean;
-} => {
-  const scrollRef = useRef<T>(null);
-
-  const scrollLeft = useCallback(() => {
-    if (scrollRef.current) {
-      scrollRef.current.scrollBy({
-        left: -220,
-        behavior: 'smooth',
-      });
-    }
-  }, []);
-
-  const scrollRight = useCallback(() => {
-    if (scrollRef.current) {
-      scrollRef.current.scrollBy({
-        left: 220,
-        behavior: 'smooth',
-      });
-    }
-  }, []);
-
-  const [showScroll, setShowScroll] = React.useState<boolean>(false);
-  const [enableScrollLeft, setEnableScrollLeft] =
-    React.useState<boolean>(false);
-  const [enableScrollRight, setEnableScrollRight] =
-    React.useState<boolean>(false);
-
-  const updateScroll = useCallback(() => {
-    if (scrollRef.current) {
-      const { scrollWidth, clientWidth } = scrollRef.current;
-
-      if (showScroll) {
-        // take into account the width of the scroll buttons
-        setShowScroll(scrollWidth > clientWidth + 100);
-      } else {
-        setShowScroll(scrollWidth > clientWidth);
-      }
-    }
-  }, [showScroll]);
-
-  const updateScrollButtons = useCallback(() => {
-    if (scrollRef.current) {
-      const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
-
-      setEnableScrollLeft(scrollLeft > 0);
-      setEnableScrollRight(scrollLeft + clientWidth < scrollWidth);
-    }
-  }, []);
-
-  // Omitting the dependency array here since this effect needs to run at every render
-  // to handle the case where the components are dynamically added/removed
-  useEffect(updateScroll);
-  useEffect(updateScrollButtons);
-
-  useLayoutEffect(() => {
-    // debounce is needed to avoid re-rendering everything on every resize event
-    const debouncedUpdateScroll = debounce(updateScroll, 50);
-
-    // add window resize event listener on mount
-    window.addEventListener('resize', debouncedUpdateScroll);
-
-    debouncedUpdateScroll();
-
-    const scrollContainer = scrollRef.current;
-    const debouncedUpdateScrollButtons = debounce(updateScrollButtons, 50);
-
-    scrollContainer?.addEventListener('scroll', debouncedUpdateScrollButtons);
-
-    updateScrollButtons();
-
-    const transformScroll = (event: WheelEvent): void => {
-      if (event.deltaY !== 0 && scrollContainer) {
-        scrollContainer.scrollLeft += event.deltaY;
-      }
-    };
-
-    scrollContainer?.addEventListener('wheel', transformScroll, {
-      passive: false, // added for scrolling on Safari
-    });
-
-    // clear all event listeners on unmount
-    return () => {
-      debouncedUpdateScroll.cancel();
-      window.removeEventListener('resize', debouncedUpdateScroll);
-
-      debouncedUpdateScrollButtons.cancel();
-      scrollContainer?.removeEventListener(
-        'scroll',
-        debouncedUpdateScrollButtons,
-      );
-
-      scrollContainer?.removeEventListener('wheel', transformScroll);
-    };
-  }, [showScroll, updateScroll, updateScrollButtons]);
-
-  return {
-    scrollLeft,
-    scrollRight,
-    scrollRef,
-    showScroll,
-    enableScrollLeft,
-    enableScrollRight,
-  };
-};

package/src/components/Tabs/TabList/index.ts

@@ -1 +0,0 @@
-export { CustomTabList as TabList } from './CustomTabList';

package/src/components/Tabs/TabPanel/CustomTabPanel.scss

@@ -1,10 +0,0 @@
-@import '../../../styles/common.scss';
-
-.tabpanel {
-  border-bottom: 1px solid $light-gray;
-  display: none;
-
-  &.selected {
-    display: block;
-  }
-}

package/src/components/Tabs/TabPanel/CustomTabPanel.tsx

@@ -1,26 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-import {
-  ReactTabsFunctionComponent,
-  TabPanel,
-  TabPanelProps,
-} from 'react-tabs';
-import classes from './CustomTabPanel.scss';
-
-export const CustomTabPanel: ReactTabsFunctionComponent<TabPanelProps> = ({
-  children,
-  className,
-  selectedClassName,
-  ...otherProps
-}) => (
-  <TabPanel
-    {...otherProps}
-    className={clsx(className, classes.tabpanel)}
-    selectedClassName={clsx(selectedClassName, classes.selected)}
-    data-test-id="tab"
-  >
-    {children}
-  </TabPanel>
-);
-
-CustomTabPanel.tabsRole = 'TabPanel';

package/src/components/Tabs/TabPanel/index.ts

@@ -1 +0,0 @@
-export { CustomTabPanel as TabPanel } from './CustomTabPanel';

package/src/components/Tabs/Tabs.stories.tsx

@@ -1,108 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-import { faker } from '@faker-js/faker';
-import { useArgs } from '@storybook/preview-api';
-import { Meta, StoryObj } from '@storybook/react';
-import React, { useMemo } from 'react';
-import { TabsProps } from 'react-tabs';
-import { Tab, TabList, TabPanel, Tabs } from '.';
-import { createGroups } from '../../helpers/storybook';
-
-const groups = createGroups({
-  Storybook: ['amount'],
-});
-
-type TabsStoryComponentProps = React.FC<
-  typeof Tabs & {
-    amount: number;
-    selectedIndex?: number;
-  }
->;
-
-const meta: Meta<TabsStoryComponentProps> = {
-  title: 'Other Components/Tabs',
-  component: Tabs,
-  argTypes: {
-    ...groups,
-    amount: {
-      ...groups.amount,
-      description: '<b>[Storybook only]</b> The amount of tabs to render.',
-      type: 'number',
-      control: { type: 'number', min: 0, max: 30 },
-    },
-    children: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-  args: {
-    amount: 3,
-  },
-};
-
-const generateItems = (count: number): [JSX.Element[], JSX.Element[]] => {
-  const tabs = [];
-  const panels = [];
-
-  for (let i = 0; i < count; i++) {
-    const title = faker.random.words(faker.datatype.number({ min: 1, max: 3 }));
-    tabs.push(<Tab key={i}>{title}</Tab>);
-    panels.push(
-      <TabPanel key={i}>
-        <h2>{title}</h2>
-        <p>{faker.lorem.paragraph(20)}</p>
-      </TabPanel>,
-    );
-  }
-
-  return [tabs, panels];
-};
-
-export default meta;
-
-export const Default: StoryObj<TabsStoryComponentProps> = {
-  render: (props) => {
-    const [tabs, panels] = generateItems(props.amount);
-
-    return (
-      <Tabs>
-        <TabList>{tabs}</TabList>
-        {panels}
-      </Tabs>
-    );
-  },
-};
-
-export const Controlled: StoryObj<TabsStoryComponentProps> = {
-  argTypes: {
-    ...meta.argTypes,
-    selectedIndex: {
-      ...groups.amount,
-      description: '<b>[Storybook only]</b> Index of the selected Tab.',
-      type: 'number',
-      control: { type: 'number', min: 0, max: 30 },
-    },
-  },
-  args: {
-    ...meta.args,
-    selectedIndex: 0,
-  },
-  render: (props) => {
-    const [tabs, panels] = useMemo(
-      () => generateItems(props.amount),
-      [props.amount],
-    );
-    const [{ selectedIndex }, updateArgs] = useArgs();
-
-    const onSelect: TabsProps['onSelect'] = (index) => {
-      updateArgs({ selectedIndex: index });
-    };
-
-    return (
-      <Tabs selectedIndex={selectedIndex} onSelect={onSelect}>
-        <TabList>{tabs}</TabList>
-        {panels}
-      </Tabs>
-    );
-  },
-};

package/src/components/Tabs/index.ts

@@ -1,4 +0,0 @@
-export { Tabs } from 'react-tabs';
-export { Tab } from './Tab';
-export { TabList } from './TabList';
-export { TabPanel } from './TabPanel';