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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.42.0-rc.3",
+  "version": "0.42.0-rc.5",
   "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.3",
+    "@axinom/mosaic-core": "^0.4.15-rc.5",
     "@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": "cb9bba0b7ae9543a415ea8eefbcb3444e76ac6f2"
+  "gitHead": "0a4a124c07abc12604ad50a1892c8ae6b4e49a15"
 }

package/src/components/FormElements/CustomTags/CustomTags.scss

@@ -85,14 +85,13 @@
 
       input,
       .autoComplete > li {
-        padding: 0 60px 0 12px;
+        padding: 15px;
         color: var(--input-color, $input-color);
       }
 
       .autoComplete {
         display: grid;
         grid-template-columns: 1fr;
-        grid-auto-rows: 25px;
         align-items: center;
 
         box-sizing: border-box;
@@ -101,25 +100,27 @@
         position: absolute;
         top: 36px;
         left: 0;
-        right: -25px;
+        right: 0;
 
         list-style-type: none;
         z-index: 10;
 
-        border: 1px solid gray;
+        border: 1px solid
+          var(--live-suggest-border-color, $live-suggest-border-color);
         background-color: #ffffff;
 
+        li {
+          color: var(--live-suggest-text-color, $live-suggest-text-color);
+        }
+
         li:hover {
-          color: #ffffff;
-          background-color: #1e90ff;
+          background-color: var(
+            --live-suggest-background-selected-color,
+            $live-suggest-background-selected-color
+          );
 
           cursor: pointer;
         }
-
-        li.selected {
-          color: #ffffff;
-          background-color: #1e90ff;
-        }
       }
 
       .plusButton {

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/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';