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

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

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

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

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

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

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

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

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

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

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

@@ -1,77 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FaTimes } from 'react-icons/fa';
-import cx from 'classnames';
-import { isArray } from 'lodash';
-import { Heading } from '../heading/heading';
-import styles from './dialog.module.less';
-
-const convertStringToJsx = (children) => {
-  if (isArray(children)) {
-    return children.map((text) => (
-      <>
-        {text} <br />
-      </>
-    ));
-  }
-  return children;
-};
-
-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 }}>
-        {convertStringToJsx(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,
-    PropTypes.arrayOf(PropTypes.string),
-  ]).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

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