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

package/src/components/layout-general.stories.mdx

@@ -0,0 +1,215 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Row, Column, Flex, Grid, Spacer, Button, Card } from '../..';
+
+<Meta title="Layout (General)" />
+
+# Layout (General)
+
+## Flex
+
+The `Flex` component is a basic flexbox wrapper with optional props for `alignItems`, `justifyContent` and `flexDirection`. This is a conveninent way to center items vertically and/or horizontally, to align them to opposite edges, or align them to the far side.
+
+This is best for situations for more fluid layouts, because the children set their own width.
+
+<Canvas>
+  <Flex alignItems="center">
+    <Button label="Button" />
+    <Spacer width="20px" />
+    Text
+  </Flex>
+</Canvas>
+
+<Canvas>
+  <Flex alignItems="center" justifyContent="space-between">
+    <Button label="Button" />
+    Text
+  </Flex>
+</Canvas>
+
+<Canvas>
+  <Flex alignItems="center" justifyContent="flex-end">
+    <Button label="Button" />
+    <Spacer width="20px" />
+    Text
+  </Flex>
+</Canvas>
+
+<Canvas>
+  <Flex alignItems="center" justifyContent="center">
+    <Button label="Button" />
+    <Spacer width="20px" />
+    Text
+  </Flex>
+</Canvas>
+
+<Canvas>
+  <Flex alignItems="center" direction="column">
+    <Button label="Button" />
+    <Spacer />
+    Text
+  </Flex>
+</Canvas>
+
+## Grid
+
+Similar to `Flex`, the `Grid` component is a conveninence wrapper for grid CSS. This is best for situations where the layout is predictable and static (i.e. you know how many columns there will be and how wide you want each to be).
+
+<Canvas>
+  <Grid columns="1fr 1fr 1fr">
+    <Card>Item 1</Card>
+    <Card>Item 2</Card>
+    <Card>Item 3</Card>
+  </Grid>
+</Canvas>
+
+<Canvas>
+  <Grid columns="100px 1fr 1fr">
+    <Card>Item 1</Card>
+    <Card>Item 2</Card>
+    <Card>Item 3</Card>
+  </Grid>
+</Canvas>
+
+<Canvas>
+  <Grid columns="1fr 1fr 1fr">
+    <Card>Item 1</Card>
+    <Card>Item 2</Card>
+    <Card>Item 3</Card>
+    <Card>Item 4</Card>
+    <Card>Item 5</Card>
+    <Card>Item 6</Card>
+  </Grid>
+</Canvas>
+
+### Gap
+
+Use the `gap` prop to set spacing between grid items. You can set to the spacing you need, or omit the value for default spacing (20px).
+
+<Canvas>
+  <Grid columns="1fr 1fr 1fr" gap>
+    <Card>Item 1</Card>
+    <Card>Item 2</Card>
+    <Card>Item 3</Card>
+    <Card>Item 4</Card>
+    <Card>Item 5</Card>
+    <Card>Item 6</Card>
+  </Grid>
+</Canvas>
+
+<Canvas>
+  <Grid columns="1fr 1fr 1fr" gap="5px">
+    <Card>Item 1</Card>
+    <Card>Item 2</Card>
+    <Card>Item 3</Card>
+    <Card>Item 4</Card>
+    <Card>Item 5</Card>
+    <Card>Item 6</Card>
+  </Grid>
+</Canvas>
+
+### Responsive grid
+
+To change the layout on smaller devices, you can set props for `columnsTablet` (up to 992px wide) and/or `columnsMobile` (up to 575px wide).
+
+<Canvas>
+  <Grid columns="1fr 1fr 1fr" columnsTablet="1fr 1fr" columnsMobile="1fr">
+    <Card>Item 1</Card>
+    <Card>Item 2</Card>
+    <Card>Item 3</Card>
+    <Card>Item 4</Card>
+    <Card>Item 5</Card>
+    <Card>Item 6</Card>
+  </Grid>
+</Canvas>
+
+## Rows & Columns
+
+`Row` and `Column` are a more opinionated flexbox layout, best used together for top-level layouts that require separate scrolling areas. For most layout needs it would be better to use something simpler like `Flex` or `Grid`.
+
+### Default
+
+Each `Column` shares the available width of its `Row`.
+
+<Canvas>
+  <Row spacing="0" height="100px">
+    <Column scroll>
+      Content of first column lorem ipsum dolor sit amet, consectetur adipiscing
+      elit. Donec varius est id purus tempus, at mattis sem cursus. In convallis
+      hendrerit massa, vitae elementum nisl porttitor eu. Proin id mauris ac
+      tellus ullamcorper feugiat quis vel odio. Quisque ultrices purus sed
+      finibus lobortis.
+    </Column>
+    <Column scroll background="#f5f7f9" borderLeft>
+      Content of second column lorem ipsum dolor sit amet, consectetur
+      adipiscing elit. Donec varius est id purus tempus, at mattis sem cursus.
+      In convallis hendrerit massa, vitae elementum nisl porttitor eu. Proin id
+      mauris ac tellus ullamcorper feugiat quis vel odio. Quisque ultrices purus
+      sed finibus lobortis.
+    </Column>
+  </Row>
+</Canvas>
+
+### Fixed width
+
+You can set a fixed or percentage `width` on a `Column`, and any others will share the remaining space.
+
+<Canvas>
+  <Row spacing="0" height="100px">
+    <Column width="100px" scroll>
+      Content of first column lorem ipsum dolor sit amet, consectetur adipiscing
+      elit. Donec varius est id purus tempus, at mattis sem cursus. In convallis
+      hendrerit massa, vitae elementum nisl porttitor eu.
+    </Column>
+    <Column scroll background="#f5f7f9" borderLeft>
+      Content of second column lorem ipsum dolor sit amet, consectetur
+      adipiscing elit. Donec varius est id purus tempus, at mattis sem cursus.
+      In convallis hendrerit massa, vitae elementum nisl porttitor eu.
+    </Column>
+  </Row>
+</Canvas>
+
+### Padding & spacing
+
+There is 20px `spacing` between each `Column` by default. You can set different `spacing`, or remove it entirely if you want them to be flush.
+
+There is no `padding` inside a `Column` by default. You can add the `padding` prop on its own for standard padding, or set it to what you need.
+
+<Canvas>
+  <Row spacing="0" height="100px">
+    <Column scroll padding>
+      Content of first column lorem ipsum dolor sit amet, consectetur adipiscing
+      elit. Donec varius est id purus tempus, at mattis sem cursus. In convallis
+      hendrerit massa, vitae elementum nisl porttitor eu.
+    </Column>
+    <Column scroll padding background="#f5f7f9" borderLeft>
+      Content of second column lorem ipsum dolor sit amet, consectetur
+      adipiscing elit. Donec varius est id purus tempus, at mattis sem cursus.
+      In convallis hendrerit massa, vitae elementum nisl porttitor eu.
+    </Column>
+  </Row>
+</Canvas>
+
+### Responsive
+
+To change the layout on smaller devices, you can set props for `widthTablet` (up to 992px wide) and/or `widthMobile` (up to 575px wide).
+
+<Canvas>
+  <Row wrap spacing="0">
+    <Column scroll width="30%" widthTablet="50%" widthMobile="100%">
+      Content of first column lorem ipsum dolor sit amet, consectetur adipiscing
+      elit. Donec varius est id purus tempus, at mattis sem cursus. In convallis
+      hendrerit massa, vitae elementum nisl porttitor eu.
+    </Column>
+    <Column
+      scroll
+      width="70%"
+      widthTablet="50%"
+      widthMobile="100%"
+      background="#f5f7f9"
+    >
+      Content of second column lorem ipsum dolor sit amet, consectetur
+      adipiscing elit. Donec varius est id purus tempus, at mattis sem cursus.
+      In convallis hendrerit massa, vitae elementum nisl porttitor eu.
+    </Column>
+  </Row>
+</Canvas>

package/src/components/list/list-row/item-content.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from '../list.module.less';
+
+export const ItemContent = ({ item, expanding }) => {
+  const onClick = (evt) => {
+    evt.preventDefault();
+    evt.stopPropagation();
+  };
+
+  return expanding && item.active && item.content ? (
+    <div className={styles.itemContent} onClick={onClick}>
+      {item.content}
+    </div>
+  ) : null;
+};

package/src/components/list/list-row/label.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Badge } from '../../badge/badge';
+import styles from '../list.module.less';
+
+export const Label = ({ label }) => {
+  return label ? (
+    <span className={styles.label}>
+      <Badge color={label.color} title={label.value} />
+    </span>
+  ) : null;
+};

package/src/components/list/list-row/list-heading.jsx

@@ -0,0 +1,52 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { ToggleNarrow } from '../toggle-narrow';
+import { Heading } from '../../heading/heading';
+import { Actions } from '../../actions/actions';
+import { actionsShape } from '../../actions/actions.shape';
+import styles from '../list.module.less';
+
+export const ListHeading = forwardRef(
+  (
+    { name, actions, toggleNarrow, onToggleNarrow, stickyHeader },
+    listHeadingRef,
+  ) => {
+    return (
+      <div
+        ref={listHeadingRef}
+        className={cx(styles.header, stickyHeader ? styles.stickyHeader : '')}
+      >
+        <ToggleNarrow
+          toggleNarrow={toggleNarrow}
+          onClickToggleNarrow={onToggleNarrow}
+        />
+        {name && (
+          <div className={styles.headerTitle}>
+            <Heading top marginBottom={0}>
+              {name}
+            </Heading>
+          </div>
+        )}
+        <div className={styles.right}>
+          <div className={styles.actions}>
+            <Actions actions={actions} right />
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+ListHeading.defaultProps = {
+  actions: [],
+  toggleNarrow: false,
+  onToggleNarrow: () => {},
+};
+
+ListHeading.propTypes = {
+  name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  actions: actionsShape,
+  toggleNarrow: PropTypes.bool,
+  onToggleNarrow: PropTypes.func,
+};

package/src/components/list/list-row/list-row.jsx

@@ -0,0 +1,128 @@
+import React, { forwardRef, useContext } from 'react';
+import cx from 'classnames';
+import { GrDrag } from 'react-icons/gr';
+import { BsArrowReturnRight } from 'react-icons/bs';
+import { Draggable } from 'react-beautiful-dnd';
+import { Actions } from '../../actions/actions';
+import { Label } from './label';
+import { MetaContent } from './meta-content';
+import { MetaCount } from './meta-count';
+import { ItemContent } from './item-content';
+import { Icon } from '../../icon/icon';
+import { ListSubheading } from './list-subheading';
+import styles from '../list.module.less';
+import { DisabledContext } from '../../../helpers/disabled-context';
+
+const getItemStyle = (draggableProps, item) => {
+  if (!draggableProps) return null;
+
+  return {
+    cursor: item.cursor ? item.cursor : '',
+    ...draggableProps.style,
+  };
+};
+
+export const ListRow = forwardRef(
+  (
+    { items, expanding, invokeEditOnRowClick, provided, draggable },
+    listRowRefs,
+  ) => {
+    const disabledContext = useContext(DisabledContext);
+
+    const listElement = (index, provided, item, indent, hasOnClick, edit) => {
+      return (
+        <a
+          href={item.url}
+          ref={provided?.innerRef}
+          {...provided.draggableProps} // eslint-disable-line react/jsx-props-no-spreading
+          style={getItemStyle(provided.draggableProps, item)}
+          className={cx(
+            styles.item,
+            item.active ? styles.active : '',
+            item.disabled || disabledContext ? styles.disabled : '',
+            hasOnClick ? styles.action : '',
+          )}
+          onClick={(evt) => {
+            if (invokeEditOnRowClick && edit) {
+              //If invokeEditOnRowClick (default) and an edit action exists
+              //Then clicking the list row will also invoke the edit action
+              edit.onClick(evt, item.id);
+            }
+            if (item.onClick) {
+              return item.onClick(evt);
+            }
+          }}
+          key={index}
+          data-id={index}
+          title={item.title}
+          data-testid={item.testId}
+        >
+          <div
+            ref={(el) => (listRowRefs.current[index] = el)}
+            style={{ paddingLeft: indent }}
+          >
+            <div className={styles.itemHeader}>
+              {draggable && (
+                <div
+                  className={styles.drag}
+                  {...provided.dragHandleProps} // eslint-disable-line react/jsx-props-no-spreading
+                >
+                  <Icon icon={<GrDrag />} />
+                </div>
+              )}
+              {item.level && item.level > 0 ? (
+                <div className={styles.indentIcon}>
+                  <Icon icon={<BsArrowReturnRight />} color="#777" />
+                </div>
+              ) : null}
+              <Label label={item.label} />
+              <MetaContent item={item} />
+              <div className={styles.right}>
+                <MetaCount item={item} />
+                {!(item.disabled || disabledContext) && item.actions && (
+                  <div className={styles.actions}>
+                    <Actions actions={item.actions} right />
+                  </div>
+                )}
+              </div>
+            </div>
+            <ItemContent item={item} expanding={expanding} />
+          </div>
+        </a>
+      );
+    };
+
+    return (
+      <>
+        {items.map((item, index) => {
+          const isSubheading = item.type === 'Heading';
+          const edit =
+            item.actions &&
+            item.actions.find(
+              (a) => a.label && a.label.toLowerCase() === 'edit',
+            );
+          const hasOnClick = edit || item.url || item.onClick;
+          const indent =
+            item.level && item.level > 1 ? (item.level - 1) * 20 : 0;
+          return isSubheading ? (
+            <ListSubheading
+              ref={listRowRefs}
+              item={item}
+              index={index}
+              key={index}
+            />
+          ) : draggable ? (
+            <Draggable key={item.id} draggableId={item.id + ''} index={index}>
+              {(provided) =>
+                listElement(index, provided, item, indent, hasOnClick, edit)
+              }
+            </Draggable>
+          ) : (
+            listElement(index, provided, item, indent, hasOnClick, edit)
+          );
+        })}
+        {provided.placeholder}
+      </>
+    );
+  },
+);

package/src/components/list/list-row/list-subheading.jsx

@@ -0,0 +1,72 @@
+import React, { useContext, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { FaAngleRight } from 'react-icons/fa';
+import { Icon } from '../../icon/icon';
+import { Actions } from '../../actions/actions';
+import { actionsShape } from '../../actions/actions.shape';
+import styles from '../list.module.less';
+import { DisabledContext } from '../../../helpers/disabled-context';
+import { Name } from './name';
+import { MetaCount } from './meta-count';
+
+export const ListSubheading = forwardRef(({ item, index }, listRowRefs) => {
+  const disabledContext = useContext(DisabledContext);
+
+  const { actions, disabled, expanded, onClick, title, name, icon } = item;
+  return (
+    <div
+      ref={(el) =>
+        listRowRefs ? (listRowRefs.current[index] = el) : undefined
+      }
+      className={cx(
+        styles.item,
+        styles.heading,
+        disabled || disabledContext ? styles.disabled : '',
+        onClick ? styles.action : '',
+      )}
+      onClick={(evt) => {
+        if (onClick) {
+          onClick(evt);
+        }
+      }}
+      title={title}
+    >
+      <div>
+        <div className={styles.itemHeader}>
+          {typeof expanded === 'boolean' && (
+            <div className={cx(styles.expandIcon, expanded && styles.expanded)}>
+              <Icon icon={<FaAngleRight />} color="#777" />
+            </div>
+          )}
+          <Name name={name} icon={icon} />
+
+          <div className={styles.right}>
+            <MetaCount item={item} />
+            {!(disabled || disabledContext) && item.actions && (
+              <div className={styles.actions}>
+                <Actions actions={item.actions} right />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+ListSubheading.defaultProps = {
+  index: undefined,
+};
+
+ListSubheading.propTypes = {
+  item: PropTypes.shape({
+    actions: actionsShape,
+    disabled: PropTypes.bool,
+    expanded: PropTypes.bool,
+    name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    onClick: PropTypes.func,
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  }).isRequired,
+  index: PropTypes.number,
+};

package/src/components/list/list-row/meta-content.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styles from '../list.module.less';
+import { Badge } from '../../badge/badge';
+import { styleVariables } from '../../../helpers/styles';
+import { Name } from './name';
+
+export const MetaContent = ({ item }) => {
+  const { col_danger } = styleVariables;
+  const { name, icon, details, metadata, invalid } = item;
+
+  return (
+    <span className={styles.title}>
+      {invalid ? (
+        <Badge small margin="-2px" color={col_danger} title="!">
+          <Name name={name} icon={icon} />
+        </Badge>
+      ) : (
+        <Name name={name} icon={icon} />
+      )}
+      {details && <span className={styles.details}>{details}</span>}
+      {metadata && <span className={styles.metadata}>{metadata}</span>}
+    </span>
+  );
+};

package/src/components/list/list-row/meta-count.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Badge } from '../../badge/badge';
+
+export const MetaCount = ({ item }) => {
+  return (
+    item.metaCount !== undefined && (
+      <Badge color="var(--color-text-faint)" title={item.metaCount} />
+    )
+  );
+};

package/src/components/list/list-row/name.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { Icon } from '../../icon/icon';
+import styles from '../list.module.less';
+import { Tooltip } from '../../tooltip/tooltip';
+
+export const Name = ({ name, icon }) => {
+  const newIcon = icon && (
+    <Icon icon={icon.icon} color={icon.color || '#db2828'} size={12} />
+  );
+
+  return (
+    <span className={cx(styles.name, styles.bold)}>
+      {name}
+      {icon && icon.tooltip && icon.tooltip.text ? (
+        <span className={styles.iconTooltipMargin}>
+          <Tooltip text={icon.tooltip.text} maxWidth="350px">
+            {newIcon}
+          </Tooltip>
+        </span>
+      ) : (
+        icon &&
+        icon.icon && <span className={styles.iconTooltipMargin}>{newIcon}</span>
+      )}
+    </span>
+  );
+};
+
+Name.propTypes = {
+  name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  icon: PropTypes.shape({
+    icon: PropTypes.node, // JSX
+    color: PropTypes.string,
+    tooltip: PropTypes.shape({
+      text: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+    }),
+  }),
+};
+
+Name.defaultProps = {
+  icon: null,
+};
+
+export default Name;