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

package/src/components/buttons-and-links.stories.mdx

@@ -0,0 +1,55 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { FormRow, Button, TextLink } from '../..';
+
+<Meta title="Buttons & Links" />
+
+# Buttons & Links
+
+## A single primary button
+
+Primary (`colored`) buttons help highlight the most important action, but not if there are too many of them. Try not to use more than one per view or section.
+
+<Canvas>
+  <FormRow>
+    <Button colored label="Save" />
+    <Button label="Cancel" />
+  </FormRow>
+</Canvas>
+
+## Error & success buttons
+
+Like primary buttons, these should be used sparingly for particularly risky actions (`colored="red"`) or particularly rewarding ones (`colored="green"`).
+
+<Canvas>
+  <FormRow>
+    <Button colored="red" label="Delete everything" />
+    <Button colored="green" label="Prevent disaster" />
+  </FormRow>
+</Canvas>
+
+## Basic buttons
+
+Same height as other buttons, but without a background. Use when a default button is too heavy, but you want to line up with other buttons or form elements.
+
+If you need a very unobtrusive button, combine `basic` with `colored="muted"`.
+
+<Canvas>
+  <FormRow>
+    <Button colored label="Login" />
+    <Button label="Register" />
+    <Button basic label="Forgot password" />
+    <Button basic colored="muted" label="Help" />
+  </FormRow>
+</Canvas>
+
+## Links (`TextLink`)
+
+Inline links without extra padding. Use when space is limited and/or extra padding would cause problems (e.g. for a link in a `Table` or an inline link).
+
+<Canvas>
+  <>
+    Want to know more before trying Oliasoft WellDesign? – our{' '}
+    <TextLink onClick={() => {}}>Customer Success team</TextLink> is here to
+    answer your questions
+  </>
+</Canvas>

package/src/components/card/card.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import styles from './card.module.less';
+
+export const Card = ({
+  bordered,
+  heading,
+  children,
+  margin,
+  padding,
+  raised,
+}) => {
+  return (
+    <div
+      className={cx(
+        styles.card,
+        bordered ? styles.bordered : '',
+        raised ? styles.raised : '',
+      )}
+      style={{ margin }}
+    >
+      {heading ? <div className={cx(styles.cardHeader)}>{heading}</div> : null}
+      <div
+        className={cx(
+          styles.cardContent,
+          heading ? styles.cardContentBorderTop : '',
+          padding ? styles.padding : '',
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+Card.defaultProps = {
+  bordered: true,
+  heading: null,
+  margin: '0',
+  padding: true,
+  raised: false,
+};
+
+Card.propTypes = {
+  bordered: PropTypes.bool,
+  heading: PropTypes.node,
+  margin: PropTypes.string,
+  padding: PropTypes.bool,
+  raised: PropTypes.bool,
+};

package/src/components/card/card.module.less

@@ -0,0 +1,48 @@
+@import '../../style/variables.less';
+
+.card {
+  color: var(--color-text);
+}
+
+.card.bordered {
+  background: var(--color-background-raised);
+  border: 1px solid var(--color-border);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  border-radius: @card_border_radius;
+
+  &.raised {
+    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.1), 0 3px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .cardHeader {
+    background-color: var(--color-background);
+    padding: @card_padding_y @card_padding_x;
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  .cardContentBorderTop {
+    border-top: 1px solid var(--color-border);
+  }
+
+  .padding {
+    padding: @card_padding_y @card_padding_x;
+  }
+}
+
+.cardContent {
+  &:first-child {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+  &:last-child {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+}
+
+.cardHeader {
+  display: flex;
+  align-items: center;
+  padding: @card_padding_y 0;
+}

package/src/components/card/card.stories.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Card, Heading } from '../../..';
+
+export default {
+  title: 'Layout/Card',
+  component: Card,
+
+  args: {
+    raised: false,
+    children: 'Content goes here',
+    padding: true,
+    bordered: true,
+  },
+};
+
+const Template = (args) => (
+  <Card
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args}
+  />
+);
+
+export const Default = Template.bind({});
+
+export const WithHeading = Template.bind({});
+WithHeading.args = {
+  heading: <Heading>Heading</Heading>,
+};
+
+export const WithHelpHeading = Template.bind({});
+WithHelpHeading.args = {
+  heading: <Heading onClickHelp={() => console.log('help!')}>Heading</Heading>,
+};
+
+export const NoPadding = Template.bind({});
+NoPadding.args = { padding: false };
+
+export const NoBorder = Template.bind({});
+NoBorder.args = { bordered: false };

package/src/components/check-box/check-box.jsx

@@ -0,0 +1,92 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { FaCheck } from 'react-icons/fa';
+import styles from './check-box.module.less';
+import { DisabledContext } from '../../helpers/disabled-context';
+
+export const CheckBox = ({
+  noMargin,
+  dataix,
+  isInTable,
+  tabIndex,
+  checked,
+  name,
+  key,
+  label,
+  disabled,
+  small,
+  onChange,
+  testId,
+  value,
+}) => {
+  const disabledContext = useContext(DisabledContext);
+
+  return (
+    <div
+      className={cx(
+        styles.checkbox,
+        noMargin ? styles.noMargin : null,
+        isInTable ? styles.isInTable : null,
+        disabled || disabledContext ? styles.disabled : null,
+        small ? styles.small : null,
+        !label ? styles.noLabel : null,
+      )}
+      data-ix={dataix}
+      onClick={(evt) => {
+        evt.target.name = name;
+        evt.target.value = !checked;
+        evt.target.customValue = value;
+        evt.target.checked = !checked;
+        onChange(evt);
+      }}
+      data-testid={testId}
+    >
+      <input
+        type="checkbox"
+        tabIndex={tabIndex}
+        checked={checked}
+        name={name}
+        key={key}
+        onChange={() => {}}
+        disabled={disabled || disabledContext}
+      />
+      <label htmlFor={name}>
+        <FaCheck className={styles.checkmark} />
+        {label}
+      </label>
+    </div>
+  );
+};
+
+CheckBox.defaultProps = {
+  checked: false,
+  isInTable: false,
+  label: '',
+  name: undefined,
+  noMargin: false,
+  onChange: () => {},
+  tabIndex: 0,
+  disabled: false,
+  small: false,
+  testId: undefined,
+  key: '',
+  dataix: 0,
+  value: undefined,
+};
+
+CheckBox.propTypes = {
+  checked: PropTypes.bool,
+  isInTable: PropTypes.bool,
+  label: PropTypes.string,
+  name: PropTypes.string,
+  noMargin: PropTypes.bool,
+  onChange: PropTypes.func,
+  tabIndex: PropTypes.number,
+  disabled: PropTypes.bool,
+  small: PropTypes.bool,
+  testId: PropTypes.string,
+  key: PropTypes.string, //deprecated
+  dataix: PropTypes.number, //deprecated (used in GenericTable)
+  value: PropTypes.string,
+};

package/src/components/check-box/check-box.module.less

@@ -0,0 +1,101 @@
+@import '../../style/variables.less';
+
+.checkbox {
+  margin: 10px 0 11px 0;
+  position: relative;
+  display: inline-block;
+  backface-visibility: hidden;
+  vertical-align: baseline;
+  font-style: normal;
+  min-height: 17px;
+  font-size: inherit;
+  line-height: 17px;
+  min-width: 17px;
+  outline: 0px;
+
+  &.noLabel {
+    width: 17px;
+  }
+
+  &.small {
+    margin: 3px 0;
+    font-size: @input_font_size_small;
+  }
+
+  input {
+    cursor: pointer;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 17px;
+    height: 17px;
+    opacity: 0 !important;
+    outline: 0px;
+    z-index: -1;
+  }
+
+  label {
+    cursor: pointer;
+    user-select: none;
+    color: var(--color-text);
+    transition: color 0.1s ease 0s;
+    position: relative;
+    display: block;
+    padding-left: 1.85714em;
+    font-size: 1em;
+    outline: 0px;
+
+    .checkmark {
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      width: 17px;
+      height: 17px;
+      padding: 2px;
+      background: var(--color-background-input);
+      border-radius: 0.214286rem;
+      transition: border 0.1s ease 0s, opacity 0.1s ease 0s,
+        transform 0.1s ease 0s, box-shadow 0.1s ease 0s;
+      border: 1px solid var(--color-border);
+      color: transparent;
+
+      &:hover {
+        border-color: var(--color-border-hover);
+      }
+    }
+  }
+
+  input:checked ~ label .checkmark {
+    background: var(--color-background-primary);
+    border-color: transparent;
+    color: white;
+  }
+
+  &.disabled {
+    cursor: default;
+    pointer-events: none;
+
+    label {
+      color: var(--color-text-muted);
+    }
+
+    .checkmark {
+      background: var(--color-background-disabled) !important;
+      border-color: var(--color-border) !important;
+    }
+
+    input:checked ~ label .checkmark {
+      color: var(--color-text-faint);
+    }
+  }
+}
+
+.noMargin {
+  margin: 0;
+}
+
+.isInTable {
+  margin: 0;
+  position: relative;
+  top: 1px;
+}

package/src/components/check-box/check-box.stories.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useArgs } from '@storybook/addons';
+import { CheckBox } from './check-box';
+
+export default {
+  title: 'Forms/CheckBox',
+  component: CheckBox,
+  args: {
+    disabled: false,
+    label: 'Label',
+  },
+};
+
+const Template = (args) => {
+  const [{ checked }, updateArgs] = useArgs();
+  const handleChange = () => {
+    updateArgs({ checked: !checked });
+  };
+  return (
+    <CheckBox
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...args}
+      onChange={handleChange}
+    />
+  );
+};
+export const Default = Template.bind({});

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

@@ -0,0 +1,71 @@
+import React, { Fragment } from 'react';
+import { toast } from '../../..';
+
+export const colorsText = [
+  '--color-text',
+  '--color-text-muted',
+  '--color-text-faint',
+  '--color-text-error',
+  '--color-text-warning',
+  '--color-text-success',
+  '--color-text-info',
+  '--color-text-primary',
+  '--color-text-primary-hover',
+  '--color-text-primary-active',
+];
+
+export const colorsBackground = [
+  '--color-background',
+  '--color-background-raised',
+  '--color-background-primary',
+  '--color-background-info',
+  '--color-background-warning',
+  '--color-background-success',
+  '--color-background-error',
+];
+
+export const colorsBorder = [
+  '--color-border',
+  '--color-border-error',
+  '--color-border-warning',
+  '--color-border-focus',
+];
+
+export const ColorPalette = ({ colors }) => {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'auto 1fr auto 1fr',
+        gap: 20,
+        alignItems: 'center',
+      }}
+    >
+      {colors.map((color, index) => {
+        const variable = `var(${color})`;
+        const handleClick = () => {
+          navigator.clipboard.writeText(variable);
+          toast({
+            message: {
+              type: 'Success',
+              content: 'Copied to clipboard',
+            },
+          });
+        };
+        return (
+          <Fragment key={index}>
+            <div
+              style={{
+                padding: '16px 20px',
+                backgroundColor: variable,
+                border: '1px solid rgba(0,0,0,0.1)',
+              }}
+              onClick={handleClick}
+            ></div>
+            <code onClick={handleClick}>{variable}</code>
+          </Fragment>
+        );
+      })}
+    </div>
+  );
+};

package/src/components/color/color.stories.mdx

@@ -0,0 +1,37 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Fragment } from 'react';
+import { toast, Toaster } from '../../..';
+import {
+  ColorPalette,
+  colorsText,
+  colorsBackground,
+  colorsBorder,
+} from './color.stories-data';
+
+<Meta title="Colors" />
+
+# Colors
+
+When setting colors (either by component props or in custom styling), prefer CSS variables to literal color values.
+
+**Click on a color below to copy the variable name to the clipboard.**
+
+## Text
+
+<Canvas>
+  <ColorPalette colors={colorsText} />
+</Canvas>
+
+## Backgrounds
+
+<Canvas>
+  <ColorPalette colors={colorsBackground} />
+</Canvas>
+
+## Borders
+
+<Canvas>
+  <ColorPalette colors={colorsBorder} />
+</Canvas>
+
+<Toaster />

package/src/components/dialog/dialog.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FaTimes } from 'react-icons/fa';
+import cx from 'classnames';
+import { Heading } from '../heading/heading';
+import styles from './dialog.module.less';
+
+export const Dialog = ({ dialog }) => {
+  const {
+    heading,
+    content,
+    contentPadding = 20,
+    footer,
+    scroll,
+    width,
+    height,
+    onClose,
+  } = dialog;
+  return (
+    <div
+      className={cx(
+        styles.dialog,
+        width ? styles.inline : null,
+        scroll ? styles.scroll : null,
+      )}
+      style={{ width, height }}
+    >
+      <div className={styles.header}>
+        <Heading top marginBottom={0}>
+          {heading}
+        </Heading>
+        {onClose ? (
+          <div className={styles.dismiss}>
+            <FaTimes onClick={onClose} />
+          </div>
+        ) : null}
+      </div>
+      <div className={styles.content} style={{ padding: contentPadding }}>
+        {content}
+      </div>
+      {footer && <div className={styles.footer}>{footer}</div>}
+    </div>
+  );
+};
+
+const dialogShape = PropTypes.shape({
+  heading: PropTypes.string,
+  content: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.node,
+  ]).isRequired,
+  contentPadding: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  footer: PropTypes.node,
+  width: PropTypes.string,
+  height: PropTypes.string,
+  bordered: PropTypes.bool,
+  onClose: PropTypes.func,
+  scroll: PropTypes.bool,
+});
+
+Dialog.propTypes = {
+  dialog: dialogShape.isRequired,
+};

package/src/components/dialog/dialog.module.less

@@ -0,0 +1,76 @@
+@line_height: 20px;
+@line_spacing: 3px;
+
+.dialog {
+  border-radius: 4px;
+  background: var(--color-background-raised);
+  line-height: @line_height;
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+
+  > :first-child {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  > :last-child {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  &.inline {
+    display: inline-flex;
+  }
+
+  &.scroll {
+    max-height: 100%;
+  }
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  padding: 16px 20px;
+  background-color: var(--color-background);
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+
+  .dismiss {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 20px;
+    opacity: 0.4;
+
+    &:hover {
+      opacity: 0.8;
+      cursor: pointer;
+    }
+  }
+}
+
+.content {
+  flex-grow: 1;
+
+  .scroll & {
+    overflow: auto;
+    min-height: 0;
+    height: 100%;
+    flex: 1 1 auto;
+  }
+}
+
+.footer {
+  display: flex;
+  padding: 16px 20px;
+  background-color: var(--color-background);
+  border-top: 1px solid var(--color-border);
+  flex-shrink: 0;
+
+  button:not(:last-child) {
+    margin-right: 12px;
+  }
+}

package/src/components/divider/divider.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './divider.module.less';
+import { Text } from '../text/text';
+
+const cssAlignClass = (align) => {
+  switch (align) {
+    case 'left':
+      return styles.alignLeft;
+    case 'right':
+      return styles.alignRight;
+    default:
+      return '';
+  }
+};
+
+export const Divider = ({ children, margin, color, align }) => (
+  <div
+    className={`${styles.divider} ${cssAlignClass(align)}`}
+    style={{
+      marginTop: margin,
+      marginBottom: margin,
+      '--color': color,
+    }}
+  >
+    {typeof children === 'string' ? <Text muted>{children}</Text> : children}
+  </div>
+);
+
+Divider.defaultProps = {
+  margin: 20,
+  color: 'var(--color-border)',
+  align: 'center',
+};
+
+Divider.propTypes = {
+  margin: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  color: PropTypes.string,
+  align: PropTypes.string,
+};