@axinom/mosaic-ui 0.42.0 → 0.43.0-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.42.0",
+  "version": "0.43.0-rc.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",
+    "@axinom/mosaic-core": "^0.4.16-rc.0",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.11.8",
     "clsx": "^1.1.0",
@@ -43,6 +43,7 @@
     "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"
   },
@@ -104,5 +105,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "dcabfd315342d0d428c437a1e0915f080c38ea9f"
+  "gitHead": "b1b5a9a050664bc07d31401fec2b0f58b5c88f4b"
 }

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

@@ -24,6 +24,7 @@ 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';
@@ -294,6 +295,177 @@ 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/src/components/List/ListRow/Renderers/ExternalLinkRenderer/ExternalLinkRenderer.tsx

@@ -55,10 +55,10 @@ export const createExternalLinkRenderer = <T extends Data>(
         rel="noopener noreferrer"
         onClick={handleClick}
       >
+        <p title={value}>{value}</p>
         {showNewTabIcon && (
           <Icons icon={IconName.External} className={classes.externalIcon} />
         )}
-        <p title={value}>{value}</p>
       </a>
     );
   };

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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