@oliasoft-open-source/react-ui-library 1.0.0

package/src/components/list/list.stories.jsx

@@ -0,0 +1,458 @@
+import React, { useReducer, useState } from 'react';
+import produce from 'immer';
+import { FaPlus, FaTrash } from 'react-icons/fa';
+import { List, ListHeading, ListSubheading, Flex } from '../../..';
+import * as storyData from './list.stories-data';
+
+export default {
+  title: 'Basic/List',
+  component: List,
+  args: {
+    list: storyData.list,
+    noHeader: true,
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+const Template = (args) => {
+  return (
+    <List
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...args}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+
+export const Actions = Template.bind({});
+Actions.args = { list: storyData.listActions };
+
+export const Menus = Template.bind({});
+Menus.args = { list: storyData.listSubmenus };
+
+export const Details = Template.bind({});
+Details.args = { list: storyData.listDetails };
+
+export const Expanding = Template.bind({});
+Expanding.args = { list: storyData.listExpanding, expanding: true };
+
+export const Header = Template.bind({});
+Header.args = { list: storyData.listHeader, noHeader: false };
+
+export const Badges = Template.bind({});
+Badges.args = { list: storyData.listBadges };
+
+export const Nested = Template.bind({});
+Nested.args = { list: storyData.listNested };
+
+export const InvalidItems = Template.bind({});
+InvalidItems.args = { list: storyData.listInvalid };
+
+export const Bordered = Template.bind({});
+Bordered.args = { bordered: true };
+
+export const IconWithTooltip = Template.bind({});
+IconWithTooltip.args = { list: storyData.listIconTooltip };
+
+export const Metacount = Template.bind({});
+Metacount.args = { list: storyData.listCounts };
+
+export const StickyHeader = Template.bind({});
+StickyHeader.args = {
+  list: storyData.listLong,
+  noHeader: false,
+  stickyHeader: true,
+};
+StickyHeader.parameters = {
+  docs: {
+    inlineStories: false,
+    iframeHeight: 200,
+  },
+};
+
+export const Scrollable = Template.bind({});
+Scrollable.args = {
+  list: storyData.listLong,
+  scrollDetails: {
+    scrollable: true,
+  },
+};
+Scrollable.parameters = {
+  docs: {
+    description: {
+      story:
+        'Adds an internal scrollbar to the `List`, which will fill its parent height unless a `height` is set. The scrollbar can be toggled using `hideScrollbar`.',
+    },
+  },
+};
+Scrollable.decorators = [
+  (story) => <div style={{ height: 200, overflow: 'hidden' }}>{story()}</div>,
+];
+
+// TODO: Fix this story in Docs (works in Canvas)
+export const InfiniteScroll = Template.bind({});
+InfiniteScroll.args = {
+  list: storyData.listLong,
+  scrollDetails: {
+    scrollable: true,
+    infiniteScroll: true,
+    limit: 10,
+  },
+};
+InfiniteScroll.decorators = [
+  (story) => <div style={{ height: 200, overflow: 'auto' }}>{story()}</div>,
+];
+
+export const ScrollToActiveItem = () => {
+  const reducer = (state, action) => {
+    switch (action.type) {
+      case 'headingClicked': {
+        const { headingKey } = action.payload;
+        return produce(state, (draft) => {
+          const heading = draft[headingKey];
+          heading.expanded = !heading.expanded;
+        });
+      }
+      case 'itemClicked': {
+        const { headingKey, itemIndex } = action.payload;
+        return produce(state, (draft) => {
+          Object.keys(draft).forEach((key) => {
+            draft[key].items.forEach((item, i) => {
+              item.active = key === headingKey && i === itemIndex;
+            });
+          });
+        });
+      }
+      case 'addClicked': {
+        const { headingKey } = action.payload;
+        return produce(state, (draft) => {
+          const heading = draft[headingKey];
+          heading.expanded = true;
+          heading.items.push({
+            name: `${heading.label} #${heading.items.length + 1}`,
+          });
+        });
+      }
+      case 'deleteClicked': {
+        const { headingKey, itemIndex } = action.payload;
+        return produce(state, (draft) => {
+          let { items } = draft[headingKey];
+          delete items[itemIndex];
+          draft[headingKey].items = items.filter((i) => i); //remove empty slots
+        });
+      }
+      default:
+        return state;
+    }
+  };
+  const initialState = () => ({
+    mammals: {
+      draggable: true,
+      name: 'Mammals',
+      key: 'mammals',
+      label: 'Mammals',
+      expanded: true,
+      items: [
+        { name: 'Click item to scroll', type: 'Heading' },
+        { name: 'Mammal #1', active: true },
+        { name: 'Mammal #2' },
+        { name: 'Mammal #3' },
+        { name: 'Mammal #4' },
+        { name: 'Mammal #5' },
+        { name: 'Mammal #6' },
+        { name: 'Mammal #7' },
+        { name: 'Mammal #8' },
+        { name: 'Mammal #9' },
+        { name: 'Mammal #10' },
+      ],
+    },
+    amphibians: {
+      name: 'Amphibians (sticky header)',
+      key: 'amphibians',
+      label: 'Amphibians',
+      expanded: true,
+      items: [
+        { name: 'Click item to scroll', type: 'Heading' },
+        { name: 'Amphibian #1', active: true },
+        { name: 'Amphibian #2' },
+        { name: 'Amphibian #3' },
+        { name: 'Amphibian #4' },
+        { name: 'Amphibian #5' },
+        { name: 'Amphibian #6' },
+        { name: 'Amphibian #7' },
+        { name: 'Amphibian #8' },
+        { name: 'Amphibian #9' },
+        { name: 'Amphibian #10' },
+      ],
+    },
+  });
+  const [state, dispatch] = useReducer(reducer, {}, () => initialState());
+  const [triggerScroll, setTriggerScroll] = useState(false);
+  const onClickItem = (headingKey, itemIndex) => {
+    setTriggerScroll(true);
+    dispatch({
+      type: 'itemClicked',
+      payload: { headingKey, itemIndex },
+    });
+    // will execute after stack is cleared
+    setTimeout(() => setTriggerScroll(false), 0);
+  };
+  const onAddItem = (headingKey) => {
+    dispatch({ type: 'addClicked', payload: { headingKey } });
+  };
+  const onDeleteItem = (headingKey, itemIndex) =>
+    dispatch({
+      type: 'deleteClicked',
+      payload: { headingKey, itemIndex },
+    });
+  const { mammals, amphibians } = state;
+  const hydrateList = (list) => ({
+    ...list,
+    actions: [
+      {
+        label: 'Add',
+        primary: true,
+        icon: <FaPlus />,
+        onClick: () => onAddItem(list.key),
+      },
+    ],
+    items: list.items.map((item, itemIndex) => {
+      if (item.type == 'Heading') {
+        return {
+          ...item,
+          id: itemIndex,
+        };
+      }
+      return {
+        ...item,
+        id: itemIndex,
+        onClick: () => onClickItem(list.key, itemIndex),
+        actions: [
+          {
+            label: 'Delete',
+            icon: <FaTrash />,
+            onClick: () => onDeleteItem(list.key, itemIndex),
+          },
+        ],
+      };
+    }),
+  });
+  const height = 300;
+  return (
+    <Flex gap>
+      <List
+        list={hydrateList(mammals)}
+        bordered
+        height={height}
+        scrollDetails={{
+          scrollable: true,
+          hideScrollbar: false,
+          triggerScrollToActiveItem: triggerScroll,
+        }}
+      />
+      <List
+        list={hydrateList(amphibians)}
+        bordered
+        stickyHeader
+        height={height}
+        scrollDetails={{
+          scrollable: true,
+          hideScrollbar: false,
+          triggerScrollToActiveItem: triggerScroll,
+        }}
+      />
+    </Flex>
+  );
+};
+
+export const HeadingsManaged = () => {
+  const reducer = (state, action) => {
+    switch (action.type) {
+      case 'headingClicked': {
+        const { headingKey } = action.payload;
+        return produce(state, (draft) => {
+          const heading = draft[headingKey];
+          heading.expanded = !heading.expanded;
+        });
+      }
+      case 'itemClicked': {
+        const { headingKey, itemIndex } = action.payload;
+        return produce(state, (draft) => {
+          Object.keys(draft).forEach((key) => {
+            draft[key].items.forEach((item, i) => {
+              item.active = key === headingKey && i === itemIndex;
+            });
+          });
+        });
+      }
+      case 'addClicked': {
+        const { headingKey } = action.payload;
+        return produce(state, (draft) => {
+          const heading = draft[headingKey];
+          heading.expanded = true;
+          heading.items.push({
+            name: `${heading.label} #${heading.items.length + 1}`,
+          });
+        });
+      }
+      case 'deleteClicked': {
+        const { headingKey, itemIndex } = action.payload;
+        return produce(state, (draft) => {
+          let { items } = draft[headingKey];
+          delete items[itemIndex];
+          draft[headingKey].items = items.filter((i) => i); //remove empty slots
+        });
+      }
+      default:
+        return state;
+    }
+  };
+  const initialState = () => ({
+    mammals: {
+      key: 'mammals',
+      label: 'Mammals',
+      expanded: true,
+      items: [{ name: 'Aardvark', active: true }, { name: 'Kangaroo' }],
+    },
+    amphibians: {
+      key: 'amphibians',
+      label: 'Amphibians',
+      expanded: true,
+      items: [{ name: 'Frog' }],
+    },
+  });
+  const [state, dispatch] = useReducer(reducer, {}, () => initialState());
+  const onClickHeading = (headingKey) =>
+    dispatch({ type: 'headingClicked', payload: { headingKey } });
+  const onClickItem = (headingKey, itemIndex) =>
+    dispatch({
+      type: 'itemClicked',
+      payload: { headingKey, itemIndex },
+    });
+  const onAddItem = (headingKey) =>
+    dispatch({ type: 'addClicked', payload: { headingKey } });
+  const onDeleteItem = (headingKey, itemIndex) =>
+    dispatch({
+      type: 'deleteClicked',
+      payload: { headingKey, itemIndex },
+    });
+  const { mammals, amphibians } = state;
+  const hydrateHeading = (list) => ({
+    name: list.label,
+    metaCount: list.items.length,
+    expanded: list.expanded,
+    onClick: () => onClickHeading(list.key),
+    actions: [
+      {
+        label: 'Add',
+        primary: true,
+        icon: <FaPlus />,
+        onClick: () => onAddItem(list.key),
+      },
+    ],
+  });
+  const hydrateList = (list) => ({
+    ...list,
+    items: list.items.map((item, itemIndex) => ({
+      ...item,
+      id: itemIndex,
+      onClick: () => onClickItem(list.key, itemIndex),
+      actions: [
+        {
+          label: 'Delete',
+          icon: <FaTrash />,
+          onClick: () => onDeleteItem(list.key, itemIndex),
+        },
+      ],
+    })),
+  });
+  return (
+    <>
+      <ListHeading name="Animals" />
+      <ListSubheading item={hydrateHeading(mammals)} />
+      {mammals.expanded && <List noHeader list={hydrateList(mammals)} />}
+      <ListSubheading item={hydrateHeading(amphibians)} />
+      {amphibians.expanded && <List noHeader list={hydrateList(amphibians)} />}
+    </>
+  );
+};
+
+export const ManagedDragAndDrop = () => {
+  const arraymove = (arr, from, to) => {
+    if (isNaN(from) || isNaN(to) || from === to) {
+      return arr;
+    }
+    const copy = [...arr];
+    copy.splice(to, 0, copy.splice(from, 1)[0]);
+    return copy;
+  };
+  const beautifulDnD = {
+    name: 'List Name',
+    draggable: true,
+    items: [
+      {
+        id: 1,
+        name: 'element 1',
+        actions: [
+          {
+            label: 'Delete',
+            icon: <FaTrash />,
+            onClick: () => {},
+          },
+        ],
+      },
+      {
+        id: 2,
+        name: 'element 2',
+        actions: [
+          {
+            label: 'Delete',
+            icon: <FaTrash />,
+            onClick: () => {},
+          },
+        ],
+      },
+      {
+        id: 3,
+        name: 'element 3',
+      },
+      {
+        id: 4,
+        name: 'element 4',
+        actions: [
+          {
+            label: 'Delete',
+            icon: <FaTrash />,
+            onClick: () => {},
+          },
+        ],
+      },
+      {
+        id: 5,
+        name: 'element 5',
+        actions: [
+          {
+            label: 'Delete',
+            icon: <FaTrash />,
+            onClick: () => {},
+          },
+        ],
+      },
+    ],
+  };
+  const [reorderedItems, setReorderedItems] = useState(beautifulDnD.items);
+  const onListReorder = (reorderData) => {
+    const { to, from } = reorderData;
+    setReorderedItems(arraymove(reorderedItems, from, to));
+  };
+  return (
+    <List
+      list={{ ...beautifulDnD, items: reorderedItems }}
+      draggable
+      onListReorder={onListReorder}
+    />
+  );
+};

package/src/components/list/toggle-narrow.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { FaChevronLeft } from 'react-icons/fa';
+import { Icon } from '../icon/icon';
+import styles from './list.module.less';
+
+export const ToggleNarrow = ({ toggleNarrow, onClickToggleNarrow }) => {
+  return toggleNarrow ? (
+    // eslint-disable-next-line jsx-a11y/anchor-is-valid
+    <a className={styles.toggleNarrow} onClick={onClickToggleNarrow}>
+      <Icon icon={<FaChevronLeft />} />
+    </a>
+  ) : null;
+};

package/src/components/loader/loader.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import styles from './loader.module.less';
+
+export const Loader = ({
+  width,
+  height,
+  text,
+  details,
+  fullViewPortSize,
+  cover,
+  children,
+  theme,
+}) => {
+  const color = theme === 'dark' ? 'white' : 'inherit';
+
+  const background =
+    theme === 'white'
+      ? 'var(--color-background-raised)'
+      : theme === 'light'
+      ? 'var(--color-background)'
+      : 'black';
+
+  return (
+    <div
+      className={cx(styles.loader, cover ? styles.cover : '', {
+        [styles.fullViewPortSize]: fullViewPortSize,
+      })}
+      style={{ width, height }}
+    >
+      <div className={styles.dimmer} style={{ background, color }}>
+        <div className={styles.content}>
+          {children}
+          {text !== '' && <div className={styles.text}>{text}</div>}
+          {details !== '' && <div className={styles.details}>{details}</div>}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+Loader.defaultProps = {
+  fullViewPortSize: false,
+  cover: false,
+  width: null,
+  height: null,
+  text: '',
+  details: '',
+  children: null,
+  theme: 'dark',
+};
+
+Loader.propTypes = {
+  fullViewPortSize: PropTypes.bool,
+  cover: PropTypes.bool,
+  width: PropTypes.string,
+  height: PropTypes.string,
+  text: PropTypes.string,
+  details: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  children: PropTypes.node,
+  theme: PropTypes.string,
+};

package/src/components/loader/loader.module.less

@@ -0,0 +1,63 @@
+@import '../../style/variables.less';
+
+.loader {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  border-radius: inherit;
+
+  &.fullViewPortSize {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+  }
+
+  &.cover {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+}
+
+.dimmer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  vertical-align: middle;
+  padding: 1em;
+  opacity: 0;
+  line-height: 1;
+  animation-fill-mode: both;
+  animation-duration: 0.5s;
+  transition: background-color 0.5s linear;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  will-change: opacity;
+  z-index: @zindex_dimmer;
+  display: flex;
+  opacity: 0.95;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.text {
+  margin-top: 12px;
+  opacity: 0.6;
+}
+
+.details {
+  margin-top: 8px;
+}