@oliasoft-open-source/react-ui-library 2.4.8 → 3.0.1

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

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

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

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

@@ -1,63 +0,0 @@
-@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;
-}