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

package/src/components/inputs.stories.mdx

@@ -1,201 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import {
-  Input,
-  Button,
-  CheckBox,
-  Toggle,
-  TextArea,
-  Select,
-  RadioButton,
-  Slider,
-  FileInput,
-  FormRow,
-  OptionDropdown,
-} from '../..';
-
-<Meta title="Inputs" />
-
-# Inputs
-
-React UI Library provides a comprehensive set of user input components.
-
-## Button
-
-Use buttons when users need to invoke actions.
-
-<Canvas>
-  <FormRow>
-    <Button label="Save" colored />
-    <Button label="Cancel" />
-  </FormRow>
-</Canvas>
-
-**Guidelines**
-
-- only the primary button on a page or view should normally be colored
-- all other buttons should use the default style (try to limit using different variants and colors of buttons)
-- for serious actions (e.g. permanently deleting records), use a red button
-
-## Input
-
-Use an `Input` when users need to enter or edit single-line values.
-
-<Canvas>
-  <FormRow>
-    <Input width="200px" />
-  </FormRow>
-</Canvas>
-
-### Number Input
-
-<Canvas>
-  <FormRow>
-    <Input width="200px" type="number" value={3} />
-  </FormRow>
-</Canvas>
-
-### Date Input
-
-<Canvas>
-  <FormRow>
-    <Input width="200px" value="2020-05-22" type="date" />
-  </FormRow>
-</Canvas>
-
-## TextArea
-
-Use a `TextArea` when users need to enter or edit multiline text.
-
-<Canvas>
-  <FormRow>
-    <TextArea />
-  </FormRow>
-</Canvas>
-
-## Select
-
-Use a `Select` component when users need to choose from one or more values from a longer list of options (> 6 options).
-
-React UI Library provides two different `Select` components, through one unified interface.
-
-### Native Select
-
-Native `Select` is a styled native browser [select input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).
-You enable it via the `native` prop. It's most useful for simple situations. Its advantages come from the browser
-handling dropdown positioning, performance, and accessibility. Its drawbacks are limited features and styling
-possibilities. A native `Select` looks like this:
-
-<Canvas>
-  <FormRow>
-    <Select native options={['Rare', 'Medium', 'Well Done']} value="Medium" />
-  </FormRow>
-</Canvas>
-
-### Custom Select
-
-Custom `Select` is a full implementation of a select component as a custom React component. It covers many additional
-features not offered by native select inputs, such as filtering and multi-select. Its drawbacks are that positioning and
-accessibility are not handled out-the-box by the browser, requiring custom code internally within the component. The
-custom `Select` in GUI Library uses [react-laag](https://www.react-laag.com/) as a positioning engine.
-
-<Canvas>
-  <FormRow>
-    <Select
-      width="auto"
-      options={['Rare', 'Medium', 'Well Done']}
-      value="Medium"
-    />
-    <Select
-      width="300px"
-      options={['Onions', 'Olives', 'Mushrooms', 'Ham']}
-      value={['Olives', 'Mushrooms']}
-    />
-  </FormRow>
-</Canvas>
-
-## RadioButton
-
-Use a `RadioButton` group when users need to choose a single value from a short list of options (< 6 options). They are
-suitable for related but mutually exclusive choices.
-
-<Canvas>
-  <RadioButton
-    options={[
-      { label: 'Delivery', value: 'delivery' },
-      { label: 'Collection', value: 'collection' },
-    ]}
-    value={{ label: 'Collection', value: 'collection' }}
-    inline
-  />
-</Canvas>
-
-## CheckBox
-
-Use a `CheckBox` when users need to select between opposite states (switching a binary value on or off). A CheckBox
-should have a label prop which makes the opposite states clear.
-
-<Canvas>
-  <CheckBox checked label="I agree" />
-</Canvas>
-
-You can also use a group of checkboxes when users need to select multiple values from a short list of options
-(< 6 options).
-
-<Canvas>
-  <FormRow>
-    <CheckBox checked label="Breakfast" />
-    <CheckBox checked label="Lunch" />
-    <CheckBox checked label="Dinner" />
-  </FormRow>
-</Canvas>
-
-## OptionDropdown
-
-For a larger number of `CheckBox` options and where space is limited, there's a convenience component called `OptionDropdown`,
-which allows selecting a multiple values, by presenting them in a dropdown, with an easy way to select all or clear.
-
-<Canvas>
-  <OptionDropdown
-    label="Meals"
-    options={[
-      { label: 'Breakfast', value: 'breakfast' },
-      { label: 'Lunch', value: 'lunch' },
-      { label: 'Dinner', value: 'dinner', selected: true },
-    ]}
-    onChange={() => {}}
-  />
-</Canvas>
-
-## Toggle
-
-A `Toggle` is just an alternative variant to a `CheckBox` and has the same use-case (switching a binary value on or off).
-
-<Canvas>
-  <Toggle checked label="Express mode" onChange={() => {}} />
-</Canvas>
-
-## Slider
-
-A `Slider` helps a user to select a numerical value between two endpoints. It can be more convenient than typing values,
-particularly on touch devices.
-
-A `Slider` can also be used to set a range of values (start and end points).
-
-<Canvas>
-  <Slider
-    value={30}
-    min={0}
-    max={100}
-    step={1}
-    width="200px"
-    onChange={() => {}}
-  />
-</Canvas>
-
-## File Input
-
-Use a `FileInput` when a user needs to upload a file. The `accept` prop allows you to restrict the accepted file types.
-
-<Canvas>
-  <FileInput accept=".json" width="200px" />
-</Canvas>

package/src/components/label/label.jsx

@@ -1,115 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import { FaQuestionCircle, FaInfoCircle, FaBook } from 'react-icons/fa';
-import { HiLockClosed, HiLockOpen } from 'react-icons/hi';
-import { Tooltip } from '../tooltip/tooltip';
-import { IconWrapper } from '../heading/heading';
-import styles from './label.module.less';
-
-export const Label = ({
-  label,
-  width,
-  helpText,
-  helpTextMaxWidth,
-  onClickHelp,
-  lock,
-  info,
-  libraryIcon,
-  labelLeft,
-}) => {
-  return (
-    <div className={cx(styles.label, labelLeft ? styles.labelLeft : '')}>
-      <label style={{ width: width || '' }}>
-        {label}
-        <div className={styles.icons}>
-          {helpText && !onClickHelp ? (
-            <Tooltip text={helpText} maxWidth={helpTextMaxWidth}>
-              <FaQuestionCircle className={styles.icon} />
-            </Tooltip>
-          ) : (
-            onClickHelp && (
-              <IconWrapper
-                onClick={onClickHelp}
-                icon={<FaQuestionCircle />}
-                isHelp
-              />
-            )
-          )}
-          {info && (
-            <Tooltip text={info}>
-              <FaInfoCircle className={styles.icon} />
-            </Tooltip>
-          )}
-          {lock && lock.visible && lock.onClick && (
-            <Tooltip text={lock?.tooltip ?? ''}>
-              <IconWrapper
-                onClick={lock.onClick}
-                isLock
-                icon={lock.active ? <HiLockClosed /> : <HiLockOpen />}
-                isFaint={!lock.active}
-                testId={lock.testId}
-              />
-            </Tooltip>
-          )}
-          {libraryIcon && (
-            <Tooltip text={libraryIcon?.tooltip ?? ''}>
-              <IconWrapper onClick={libraryIcon.onClick} icon={<FaBook />} />
-            </Tooltip>
-          )}
-        </div>
-      </label>
-    </div>
-  );
-};
-
-Label.defaultProps = {
-  label: null,
-  helpText: null,
-  helpTextMaxWidth: '300px',
-  width: 'auto',
-  info: null,
-  onClickHelp: null,
-  lock: {
-    visible: false,
-    active: false,
-    onClick: () => {},
-    tooltip: '',
-    testId: undefined,
-  },
-  libraryIcon: null,
-  labelLeft: false,
-};
-
-Label.propTypes = {
-  label: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-    PropTypes.node,
-  ]),
-  /** Adds a help icon with a tooltip */
-  helpText: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-    PropTypes.node,
-  ]),
-  helpTextMaxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), //'none' to disable
-  width: PropTypes.string,
-  /** Adds an info icon with an optional tooltip and onClick event */
-  info: PropTypes.string,
-  onClickHelp: PropTypes.func,
-  /** Adds a lock icon with a tooltip */
-  lock: PropTypes.shape({
-    visible: PropTypes.bool,
-    active: PropTypes.bool,
-    onClick: PropTypes.func,
-    tooltip: PropTypes.string,
-    testId: PropTypes.string,
-  }),
-  /** Adds a library icon with a tooltip and onClick event */
-  libraryIcon: PropTypes.shape({
-    onClick: PropTypes.func,
-    tooltip: PropTypes.string,
-  }),
-  labelLeft: PropTypes.bool,
-};

package/src/components/label/label.module.less

@@ -1,43 +0,0 @@
-@import '../../style/variables.less';
-
-.label {
-  display: flex;
-  align-items: center;
-
-  &.labelLeft {
-    margin-bottom: 0;
-    flex-shrink: 0;
-    padding-right: 10px;
-
-    > label {
-      margin-bottom: 0;
-    }
-  }
-
-  .icons {
-    display: inline-flex;
-
-    > * {
-      margin-left: 8px;
-    }
-  }
-
-  .icon {
-    margin-left: auto;
-    color: var(--color-text-faint);
-    line-height: 0;
-    font-size: 13px;
-  }
-
-  > label {
-    display: flex;
-    align-items: center;
-    font-weight: bold;
-    font-size: 13px;
-    margin-bottom: 5px;
-
-    span {
-      line-height: 0; // Strip whitespace from icon
-    }
-  }
-}

package/src/components/label/label.stories.jsx

@@ -1,60 +0,0 @@
-import { useState } from '@storybook/addons';
-import React from 'react';
-import { Label } from '../../..';
-
-export default {
-  title: 'Forms/Label',
-  component: Label,
-  args: {
-    label: 'Label',
-  },
-};
-
-const Template = (args) => (
-  <Label
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    {...args}
-  />
-);
-
-export const Default = Template.bind({});
-
-export const HelpIconTooltip = Template.bind({});
-HelpIconTooltip.args = {
-  helpText: 'Tooltip goes here',
-};
-
-export const HelpIconClickable = Template.bind({});
-HelpIconClickable.args = {
-  onClickHelp: () => {},
-};
-
-export const InfoIcon = Template.bind({});
-InfoIcon.args = {
-  info: 'Info goes here',
-};
-
-export const LockIcon = () => {
-  const [locked, setLocked] = useState(false);
-  const handleToggleLock = () => setLocked(!locked);
-  return (
-    <Label
-      label="Label"
-      lock={{
-        visible: true,
-        active: locked,
-        onClick: handleToggleLock,
-        tooltip: locked ? 'Unlock' : 'Lock',
-        testId: 'testId',
-      }}
-    />
-  );
-};
-
-export const LibraryIcon = Template.bind({});
-LibraryIcon.args = {
-  libraryIcon: {
-    onClick: () => {},
-    tooltip: 'View in library',
-  },
-};

package/src/components/layout/column/column.jsx

@@ -1,85 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { StyledColumn } from './styles.js';
-
-export const Column = ({
-  background,
-  borderLeft,
-  borderRight,
-  children,
-  flex,
-  flexbox,
-  padding,
-  scroll,
-  showScrollbar,
-  spacing,
-  width,
-  widthMobile,
-  widthTablet,
-  testId,
-}) => {
-  const getWidthString = (w) => {
-    return typeof w === 'string'
-      ? w
-      : typeof w === 'number'
-      ? `${w}px`
-      : undefined;
-  };
-
-  return (
-    <StyledColumn
-      background={background}
-      borderLeft={borderLeft}
-      borderRight={borderRight}
-      flex={flex}
-      flexbox={flexbox}
-      padding={padding}
-      scroll={scroll}
-      showScrollbar={showScrollbar}
-      spacing={spacing}
-      width={getWidthString(width)}
-      widthTablet={getWidthString(widthTablet)}
-      widthMobile={getWidthString(widthMobile)}
-    >
-      <div className="inner" data-testid={testId}>
-        {children}
-      </div>
-    </StyledColumn>
-  );
-};
-
-Column.defaultProps = {
-  background: 'transparent',
-  borderLeft: null,
-  borderRight: null,
-  children: null,
-  flex: true,
-  flexbox: false,
-  padding: false,
-  scroll: false,
-  showScrollbar: true,
-  spacing: 20,
-  width: null,
-  widthMobile: null,
-  widthTablet: null,
-  testId: '',
-};
-
-Column.propTypes = {
-  background: PropTypes.string,
-  borderLeft: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  borderRight: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  children: PropTypes.node,
-  /** Fill available `Row` width */
-  flex: PropTypes.bool,
-  /** Give `Column` children flexbox layout */
-  flexbox: PropTypes.bool,
-  padding: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  scroll: PropTypes.bool,
-  showScrollbar: PropTypes.bool,
-  spacing: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  widthMobile: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  widthTablet: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  testId: PropTypes.string,
-};

package/src/components/layout/column/styles.js

@@ -1,45 +0,0 @@
-import styled, { css } from 'styled-components';
-
-const noScrollbars = css`
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-`;
-
-export const StyledColumn = styled.div`
-  position: relative; //for react-laag
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  flex-basis: ${(p) => p.width || 'auto'};
-  flex-grow: ${(p) => (!p.width && p.flex ? '1' : '0')};
-  flex-shrink: ${(p) => (p.width || !p.flex ? '0' : '1')};
-  overflow: ${(p) => (p.scroll ? 'auto' : 'initial')};
-  background: ${(p) => p.background};
-  border-left: ${(p) =>
-    p.borderLeft === true ? '1px solid var(--color-border)' : p.borderLeft};
-  border-right: ${(p) =>
-    p.borderRight === true ? '1px solid var(--color-border)' : p.borderRight};
-  padding: ${(p) => (p.spacing ? `0 ${p.spacing / 2}px` : '0')};
-  ${(p) => !p.showScrollbar && noScrollbars}
-
-  @media (max-width: 992px) {
-    ${(p) => p.widthTablet && `flex-basis: ${p.widthTablet};`}
-  }
-
-  @media (max-width: 575px) {
-    ${(p) => p.widthMobile && `flex-basis: ${p.widthMobile};`}
-  }
-
-  > .inner {
-    flex-basis: 100%;
-    position: relative;
-    z-index: 0;
-    min-height: 0;
-    display: ${(p) => (p.flexbox && !p.scroll ? 'flex' : 'block')};
-    ${(p) => p.flexbox && `flex-direction: column;`}
-    padding: ${(p) => (p.padding === true ? '16px 20px' : p.padding)};
-  }
-`;

package/src/components/layout/column.stories.jsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import { Column, Row, Heading } from '../../..';
-
-export default {
-  title: 'Layout/Columns & Rows',
-  component: Column,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  args: {
-    width: '400px',
-    padding: '20px',
-    borderRight: true,
-  },
-  argTypes: {
-    width: { control: { type: 'text' } },
-    padding: { control: { type: 'text' } },
-    borderLeft: { control: { type: 'boolean' } },
-    borderRight: { control: { type: 'boolean' } },
-  },
-};
-
-const Template = (args) => {
-  const { height, wrap, ...columnArgs } = args;
-  return (
-    <Row spacing={0} height={height} wrap={wrap}>
-      <Column
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...columnArgs}
-      >
-        <Heading top>Column</Heading>
-        {'Example content goes here lorem ipsum. '.repeat(20)}
-      </Column>
-      <Column padding="20px" background="var(--color-background)" />
-    </Row>
-  );
-};
-
-export const Default = Template.bind({});
-
-export const Scroll = Template.bind({});
-Scroll.args = {
-  scroll: true,
-  height: '200px',
-};
-
-export const HideScrollbar = Template.bind({});
-HideScrollbar.args = {
-  scroll: true,
-  showScrollbar: false,
-  height: '200px',
-};
-
-export const ResponsiveWidth = Template.bind({});
-ResponsiveWidth.args = {
-  wrap: true,
-  widthTablet: '50%',
-  widthMobile: '100%',
-  borderRight: false,
-};