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

package/src/components/top-bar/top-bar.stories.jsx

@@ -1,137 +0,0 @@
-import React from 'react';
-import { FaBell, FaSignOutAlt, FaUser } from 'react-icons/fa';
-import { TopBar, Menu, Button, Badge } from '../../..';
-import LogoSVG from '../../images/logo.svg';
-
-const content = [
-  {
-    type: 'Link',
-    label: 'Link',
-    onClick: () => {},
-  },
-  {
-    type: 'Link',
-    label: 'Active',
-    active: true,
-    onClick: () => {},
-  },
-  {
-    type: 'Link',
-    label: 'Disabled',
-    disabled: true,
-    onClick: () => {},
-  },
-  {
-    type: 'Menu',
-    label: 'Dropdown',
-    onClick: () => {},
-    sections: [
-      {
-        type: 'Option',
-        label: 'Alpacas',
-        onClick: () => {},
-      },
-      {
-        type: 'Option',
-        label: 'Llamas',
-        onClick: () => {},
-      },
-    ],
-  },
-  {
-    type: 'Button',
-    label: 'Save',
-    colored: true,
-    onClick: () => {},
-    testId: 'top-bar-button-save',
-  },
-];
-
-const contentRight = [
-  {
-    type: 'Component',
-    component: (
-      <Badge title="3" small margin="5px">
-        <Button icon={<FaBell />} round onClick={() => {}} />
-      </Badge>
-    ),
-  },
-  {
-    type: 'Component',
-    component: (
-      <Menu
-        menu={{
-          trigger: 'Component',
-          fullHeightTrigger: true,
-          placement: 'bottom-end',
-          component: <Button label="TU" round onClick={() => {}} />,
-          sections: [
-            {
-              type: 'Heading',
-              label: 'Test User',
-            },
-            {
-              type: 'Option',
-              label: 'Profile',
-              icon: <FaUser color="var(--color-text-primary)" />,
-              onClick: () => {},
-            },
-            { type: 'Divider' },
-            {
-              type: 'Option',
-              label: 'Sign out',
-              icon: <FaSignOutAlt color="var(--color-text-primary)" />,
-              onClick: () => {},
-            },
-          ],
-        }}
-      />
-    ),
-  },
-];
-
-export default {
-  title: 'Navigation/TopBar',
-  component: TopBar,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      inlineStories: false,
-      iframeHeight: 200,
-    },
-  },
-  argTypes: {
-    height: { control: 'text' },
-  },
-  args: {
-    title: {
-      logo: <img src={LogoSVG} alt="logo" />,
-      version: 'V1.2.3',
-      onClick: () => {},
-    },
-    content,
-    contentRight,
-  },
-};
-
-const Template = (args) => (
-  <TopBar // eslint-disable-next-line react/jsx-props-no-spreading
-    {...args}
-  />
-);
-
-export const Default = Template.bind({});
-
-export const WithWarning = Template.bind({});
-WithWarning.args = {
-  warning: 'Application update available. Please refresh your browser.',
-};
-
-export const TextBranding = Template.bind({});
-TextBranding.args = {
-  title: {
-    label: 'Text Branding',
-    version: 'V1.2.3',
-    onClick: () => {},
-  },
-};

package/src/components/top-bar/warning.jsx

@@ -1,6 +0,0 @@
-import React from 'react';
-import styles from './top-bar.module.less';
-
-export const Warning = ({ warning }) => {
-  return <div className={styles.alert}>{warning}</div>;
-};

package/src/components/tree/tree-item.jsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import { GrDrag } from 'react-icons/gr';
-import { AiOutlineMinusSquare, AiOutlinePlusSquare } from 'react-icons/ai';
-import listStyles from '../list/list.module.less';
-import styles from './tree.module.less';
-import { Actions } from '../actions/actions';
-import { MetaContent } from '../list/list-row/meta-content';
-import { Button } from '../button/button';
-
-// TODO: Replace this with reused list-item component
-
-export const TreeItem = ({
-  node,
-  depth,
-  isOpen,
-  onToggle,
-  hasChild,
-  draggable,
-}) => {
-  const { active, id, testId, onClick } = node;
-
-  const handleToggle = (e) => {
-    e.stopPropagation();
-    onToggle(id);
-  };
-
-  // TODO: Decide whether to implement open on drag over
-  // const dragOverProps = useDragOver(id, isOpen, onToggle);
-
-  return (
-    <div
-      className={cx(
-        listStyles.item,
-        listStyles.action,
-        active ? listStyles.active : '',
-      )}
-      data-testid={testId}
-      onClick={(e) => {
-        if (onClick) {
-          onClick(e);
-        }
-      }}
-    >
-      <div
-        className={listStyles.itemHeader}
-        style={{
-          marginInlineStart: depth * 24,
-        }}
-        // TODO: Decide whether to implement open on drag over
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        // {...dragOverProps}
-      >
-        {draggable && (
-          <div className={listStyles.drag}>
-            <GrDrag />
-          </div>
-        )}
-
-        {hasChild && (
-          <div className={styles.toggle}>
-            <Button
-              basic
-              colored="muted"
-              small
-              round
-              icon={isOpen ? <AiOutlineMinusSquare /> : <AiOutlinePlusSquare />}
-              onClick={handleToggle}
-            />
-          </div>
-        )}
-        <MetaContent item={node} />
-        <div className={listStyles.actions}>
-          <Actions actions={node.actions} right />
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/components/tree/tree-placeholder.jsx

@@ -1,6 +0,0 @@
-import React from 'react';
-import styles from './tree.module.less';
-
-export const TreePlaceholder = ({ depth }) => (
-  <div className={styles.placeholder} style={{ left: depth * 24 }}></div>
-);

package/src/components/tree/tree.jsx

@@ -1,129 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Tree as TreeView } from '@minoru/react-dnd-treeview';
-import { TreeItem } from './tree-item';
-import listStyles from '../list/list.module.less';
-import styles from './tree.module.less';
-import { ListHeading } from '../list/list-row/list-heading';
-import { TreePlaceholder } from './tree-placeholder';
-import { actionsShape } from '../actions/actions.shape';
-
-export const Tree = ({
-  list,
-  draggable,
-  onListReorder,
-  testId,
-  isInitialOpen,
-  treeRef,
-}) => {
-  const handleDrop = (newTree) => {
-    if (onListReorder) {
-      onListReorder(newTree);
-    }
-  };
-
-  return (
-    <div data-testid={testId}>
-      {list.name && !list.noHeader && (
-        <ListHeading name={list.name} actions={list.actions} />
-      )}
-      <div className={listStyles.list}>
-        <TreeView
-          ref={treeRef}
-          tree={list.items}
-          sort={false}
-          insertDroppableFirst={false}
-          canDrag={() => draggable}
-          canDrop={(tree, { dragSource, dropTargetId }) => {
-            if (dragSource?.parent === dropTargetId) {
-              return true;
-            }
-          }}
-          rootId={0}
-          render={(node, { depth, isOpen, onToggle, hasChild }) => {
-            return (
-              <TreeItem
-                hasChild={hasChild}
-                node={node}
-                depth={depth}
-                isOpen={isOpen}
-                onToggle={onToggle}
-                draggable={draggable}
-              />
-            );
-          }}
-          onDrop={handleDrop}
-          dropTargetOffset={5}
-          placeholderRender={(node, { depth }) => (
-            <TreePlaceholder depth={depth} />
-          )}
-          placeholderComponent="div"
-          listComponent="div"
-          listItemComponent="div"
-          classes={{
-            root: styles.tree,
-            draggingSource: styles.draggingSource,
-            dropTarget: styles.dropTarget,
-            placeholder: styles.placeholderContainer,
-          }}
-          initialOpen={isInitialOpen}
-        />
-      </div>
-    </div>
-  );
-};
-
-Tree.defaultProps = {
-  draggable: false,
-  onListReorder: () => {},
-  testId: undefined,
-  isInitialOpen: false,
-};
-
-Tree.propTypes = {
-  list: PropTypes.shape({
-    name: PropTypes.string,
-    actions: actionsShape,
-    items: PropTypes.arrayOf(
-      PropTypes.shape({
-        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-          .isRequired,
-        name: PropTypes.string.isRequired,
-        parent: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-          .isRequired,
-        droppable: PropTypes.bool,
-        details: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-        active: PropTypes.bool,
-        testId: PropTypes.string,
-        actions: actionsShape,
-        icon: PropTypes.shape({
-          icon: PropTypes.node.isRequired,
-          color: PropTypes.string.isRequired,
-          tooltip: PropTypes.shape({
-            text: PropTypes.oneOfType([
-              PropTypes.string,
-              PropTypes.number,
-              PropTypes.node,
-            ]),
-            error: PropTypes.bool,
-            warning: PropTypes.bool,
-            placement: PropTypes.string,
-            enabled: PropTypes.bool,
-            maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-            triggerOffset: PropTypes.oneOfType([
-              PropTypes.string,
-              PropTypes.number,
-            ]),
-            possiblePlacements: PropTypes.array,
-            fontSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-            padding: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-          }),
-        }),
-      }),
-    ).isRequired,
-  }).isRequired,
-  draggable: PropTypes.bool,
-  onListReorder: PropTypes.func,
-  testId: PropTypes.string,
-  isInitialOpen: PropTypes.bool,
-};

package/src/components/tree/tree.module.less

@@ -1,33 +0,0 @@
-@import '../../style/variables.less';
-
-.tree {
-  position: relative;
-}
-
-.toggle {
-  display: flex;
-  margin: -2px 7px -2px -7px;
-}
-
-.dropTarget > div:first-child {
-  background-color: var(--color-background-listitem-active);
-}
-
-.draggingSource {
-  opacity: 0.2;
-}
-
-.placeholderContainer {
-  position: relative;
-}
-
-.placeholder {
-  background-color: var(--color-background-primary);
-  height: 4px;
-  border-radius: 2px;
-  position: absolute;
-  right: 0;
-  top: 0;
-  transform: translateY(-50%);
-  z-index: 2;
-}

package/src/components/tree/tree.stories-data.jsx

@@ -1,89 +0,0 @@
-import React from 'react';
-import { FaArrowDown, FaArrowUp, FaPlus, FaTrash } from 'react-icons/fa';
-
-export const list = {
-  name: 'Animals',
-  items: [
-    {
-      id: 1,
-      parent: 0,
-      droppable: true,
-      name: 'Mammals',
-      onClick: () => console.log('Test'),
-    },
-    {
-      id: 2,
-      parent: 1,
-      droppable: true,
-      name: 'Cats',
-    },
-    {
-      id: 3,
-      parent: 1,
-      droppable: true,
-      name: 'Dogs',
-    },
-    {
-      id: 4,
-      parent: 0,
-      droppable: true,
-      name: 'Amphibians',
-    },
-    {
-      id: 5,
-      parent: 4,
-      droppable: true,
-      name: 'Frogs',
-    },
-    {
-      id: 6,
-      parent: 0,
-      droppable: true,
-      name: 'Reptiles',
-      active: true,
-    },
-  ],
-};
-
-export const listActions = {
-  ...list,
-  header: {
-    ...list.header,
-    actions: [
-      {
-        label: 'Add',
-        primary: true,
-        icon: <FaPlus />,
-        onClick: () => {},
-      },
-    ],
-  },
-  items: list.items.map((item) => ({
-    ...item,
-    actions: [
-      {
-        label: 'Delete',
-        icon: <FaTrash />,
-        onClick: () => {},
-      },
-    ],
-  })),
-};
-
-export const listControlParents = {
-  ...list,
-  items: list.items.map((item) => ({
-    ...item,
-    droppable: item.parent === 0,
-    details: item.parent === 0 ? 'Droppable' : 'Not droppable',
-  })),
-};
-
-export const listFlat = {
-  ...list,
-  items: list.items.map((item) => ({
-    ...item,
-    parent: 0,
-    droppable: 0,
-  })),
-};

package/src/components/tree/tree.stories.jsx

@@ -1,106 +0,0 @@
-import React, { useState } from 'react';
-import { FaPlus } from 'react-icons/fa';
-import { Tree } from '../../..';
-import * as storyData from './tree.stories-data';
-
-export default {
-  title: 'Basic/Tree',
-  component: Tree,
-  args: {
-    list: storyData.list,
-  },
-};
-
-const Template = (args) => (
-  <Tree
-    // 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 Draggable = Template.bind({});
-Draggable.args = { draggable: true };
-
-export const Droppable = Template.bind({});
-Droppable.args = { draggable: true, list: storyData.listControlParents };
-Droppable.parameters = {
-  docs: {
-    description: {
-      story:
-        'Use the `droppable` prop to specify which items can have other items dropped into them.',
-    },
-  },
-};
-
-export const Flat = Template.bind({});
-Flat.args = { draggable: true, list: storyData.listFlat };
-
-export const ExpandedByDefault = Template.bind({});
-ExpandedByDefault.args = { isInitialOpen: true };
-
-export const Managed = () => {
-  const [items, setItems] = useState([
-    {
-      id: 1,
-      parent: 0,
-      droppable: true,
-      name: 'Mammals',
-    },
-    {
-      id: 2,
-      parent: 1,
-      droppable: true,
-      name: 'Cats',
-    },
-    {
-      id: 3,
-      parent: 1,
-      droppable: true,
-      name: 'Dogs',
-    },
-    {
-      id: 4,
-      parent: 0,
-      droppable: true,
-      name: 'Amphibians',
-    },
-    {
-      id: 5,
-      parent: 4,
-      droppable: true,
-      name: 'Frogs',
-    },
-    {
-      id: 6,
-      parent: 0,
-      droppable: true,
-      name: 'Reptiles',
-    },
-  ]);
-  const addItem = () => {
-    const newItem = {
-      id: Math.max(...items.map((item) => item.id)) + 1,
-      parent: 0,
-      droppable: true,
-      name: 'New Item',
-    };
-    setItems([newItem].concat(items));
-  };
-  const list = {
-    name: 'Animals',
-    actions: [
-      {
-        label: 'Add',
-        primary: true,
-        icon: <FaPlus />,
-        onClick: () => addItem(),
-      },
-    ],
-    items,
-  };
-  return <Tree list={list} draggable onListReorder={setItems} />;
-};

package/src/docs/components/page/page.jsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { Page as PageBase } from '../../../../index';
-import { Footer } from '../../navigation/footer/footer';
-import { Header } from '../../navigation/header/header';
-
-export const Page = ({ children }) => {
-  return (
-    <>
-      <Header />
-      <PageBase padding="20px" left={0} top={60}>
-        {children}
-        <Footer />
-      </PageBase>
-    </>
-  );
-};

package/src/docs/config/config.js

@@ -1 +0,0 @@
-export const baseUrl = window.location.pathname || '/';

package/src/docs/html/index.html

@@ -1,11 +0,0 @@
-<!doctype html>
-<head>
-  <title>React UI Library</title>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no">
-  <meta name="apple-mobile-web-app-capable" content="yes">
-</head>
-<body>
-<div id="content"></div>
-</body>
-</html>

package/src/docs/navigation/footer/footer.jsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import { RiGitlabFill } from 'react-icons/ri';
-import { ImMobile } from 'react-icons/im';
-import {
-  Spacer,
-  TextLink,
-  Text,
-  Flex,
-  Heading,
-  Divider,
-} from '../../../../index';
-
-export const Footer = () => {
-  return (
-    <>
-      <Divider />
-      <Flex direction="column" alignItems="center">
-        <Heading top marginBottom={0}>
-          <Flex alignItems="center">
-            <ImMobile size={20} />
-            <Spacer width="5px" />
-            React UI Library
-          </Flex>
-        </Heading>
-        <Spacer height="10px" />
-        <Text muted>
-          &copy; {new Date().getFullYear()} Oliasoft AS and contributors
-        </Text>
-        <Spacer height="10px" />
-        <Flex>
-          <TextLink href="https://gitlab.com/oliasoft-open-source/react-ui-library/-/blob/master/LICENSE">
-            Code licensed MIT
-          </TextLink>
-          <Spacer width="15px" />
-          <TextLink href="https://gitlab.com/oliasoft-open-source/react-ui-library">
-            <Flex alignItems="center">
-              <RiGitlabFill />
-              <Spacer width="5px" />
-              Gitlab
-            </Flex>
-          </TextLink>
-          <Spacer width="15px" />
-          <TextLink href="https://www.oliasoft.com/">Oliasoft</TextLink>
-        </Flex>
-      </Flex>
-    </>
-  );
-};