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

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

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

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

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

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

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

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

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

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

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

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

package/src/docs/html/index.html

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

@@ -0,0 +1,48 @@
+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>
+    </>
+  );
+};