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

package/src/components/text-link/text-link.jsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Text } from '../text/text';
-
-export const TextLink = ({ children, href, target, testId }) => {
-  return (
-    <a href={href} target={target} data-testid={testId}>
-      <Text link>{children}</Text>
-    </a>
-  );
-};
-
-TextLink.defaultProps = {
-  href: null,
-  target: null,
-  testId: undefined,
-};
-
-TextLink.propTypes = {
-  href: PropTypes.string,
-  target: PropTypes.string,
-  testId: PropTypes.string,
-};

package/src/components/text-link/text-link.stories.jsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { TextLink } from '../../..';
-
-export default {
-  title: 'Basic/TextLink',
-  component: TextLink,
-  args: {
-    children: 'Link text goes here',
-    href: 'http://oliasoft.com',
-  },
-};
-
-const Template = (args) => (
-  <TextLink
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    {...args}
-  />
-);
-
-export const Default = Template.bind({});

package/src/components/textarea/textarea.jsx

@@ -1,126 +0,0 @@
-import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import styles from './textarea.module.less';
-import { Tooltip } from '../tooltip/tooltip';
-import { isStringNumberOrNode } from '../../helpers/types';
-import { DisabledContext } from '../../helpers/disabled-context';
-
-export const TextArea = ({
-  name,
-  value,
-  placeholder,
-  cols,
-  rows,
-  disabled,
-  onChange,
-  onKeyPress,
-  onFocus,
-  onBlur,
-  tabIndex,
-  error,
-  warning,
-  tooltip,
-  maxTooltipWidth,
-  resize,
-  monospace,
-  testId,
-}) => {
-  const disabledContext = useContext(DisabledContext);
-
-  const textarea = (
-    <textarea
-      className={cx(
-        styles.textarea,
-        error ? styles.error : '',
-        warning ? styles.warning : '',
-        monospace ? styles.monospace : '',
-      )}
-      name={name}
-      value={value}
-      placeholder={placeholder}
-      cols={cols}
-      rows={rows}
-      onChange={onChange}
-      disabled={disabled || disabledContext}
-      onKeyPress={onKeyPress}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      tabIndex={tabIndex}
-      style={{ resize }}
-      data-testid={testId}
-    />
-  );
-
-  return (
-    <Tooltip
-      error={!!error}
-      warning={!!warning}
-      text={tooltip || error || warning}
-      enabled={
-        (tooltip && isStringNumberOrNode(tooltip)) ||
-        (error && isStringNumberOrNode(error)) ||
-        (warning && isStringNumberOrNode(warning)) ||
-        false
-      }
-      maxWidth={maxTooltipWidth}
-      placement="bottom-center"
-    >
-      {textarea}
-    </Tooltip>
-  );
-};
-
-TextArea.defaultProps = {
-  error: null,
-  warning: null,
-  tooltip: null,
-  name: undefined,
-  onChange: () => {},
-  onKeyPress: () => {},
-  onFocus: () => {},
-  onBlur: () => {},
-  placeholder: '',
-  tabIndex: 0,
-  value: '',
-  disabled: false,
-  cols: undefined,
-  rows: undefined,
-  resize: undefined,
-  maxTooltipWidth: undefined,
-  monospace: false,
-  testId: undefined,
-};
-
-TextArea.propTypes = {
-  error: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-    PropTypes.node,
-  ]),
-  warning: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-    PropTypes.node,
-  ]),
-  tooltip: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-    PropTypes.node,
-  ]),
-  name: PropTypes.string,
-  onChange: PropTypes.func,
-  onKeyPress: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  placeholder: PropTypes.string,
-  tabIndex: PropTypes.number,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  disabled: PropTypes.bool,
-  cols: PropTypes.number,
-  rows: PropTypes.number,
-  resize: PropTypes.string,
-  maxTooltipWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  monospace: PropTypes.bool,
-  testId: PropTypes.string,
-};

package/src/components/textarea/textarea.module.less

@@ -1,55 +0,0 @@
-@import '../../style/variables.less';
-@import '../../style/mixins.less';
-
-.textarea {
-  margin: 0;
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  outline: 0;
-  text-align: left;
-  font-family: @default_font;
-  padding: @input_padding_y @input_padding_x;
-  background: var(--color-background-input);
-  border: 1px solid var(--color-border);
-  color: var(--color-text);
-  border-radius: @input_border_radius;
-  transition: box-shadow 0.1s ease, border-color 0.1s ease;
-  box-shadow: none;
-  min-height: @input_height;
-
-  &::placeholder {
-    color: var(--color-text-faint);
-  }
-
-  &:hover {
-    border-color: var(--color-border-hover);
-  }
-
-  &:focus {
-    .inputFocus();
-  }
-
-  &[disabled] {
-    .inputDisabled();
-  }
-
-  &.small {
-    font-size: @input_font_size_small;
-    min-height: @input_height_small;
-    padding: @input_padding_small_y @input_padding_small_x;
-    line-height: 1.2;
-  }
-
-  &.error {
-    .inputError();
-  }
-
-  &.warning {
-    .inputWarning();
-  }
-
-  &.monospace {
-    font-family: monospace;
-  }
-}

package/src/components/textarea/textarea.stories.jsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { useArgs } from '@storybook/addons';
-import { TextArea } from './textarea';
-
-export default {
-  title: 'Forms/TextArea',
-  component: TextArea,
-  args: {
-    disabled: false,
-  },
-};
-
-const Template = (args) => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt) => {
-    updateArgs({ value: evt.target.value });
-  };
-  return (
-    <TextArea
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...args}
-      onChange={handleChange}
-    />
-  );
-};
-export const Default = Template.bind({});

package/src/components/toaster/toaster.jsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { toast as toastBase, Slide } from 'react-toastify';
-import { Message } from '../message/message';
-import { Dismiss } from '../message/dismiss';
-import './toaster.less';
-
-export { ToastContainer as Toaster } from 'react-toastify';
-
-export const toast = ({ id, message, autoClose = 6000, onClose }) => {
-  const { type } = message;
-
-  const CloseButton = (
-    { closeToast }, //Dismiss button that looks like the one in Message
-  ) => <Dismiss type={type} onClose={closeToast} isInToast />;
-
-  const content = (
-    <Message
-      message={{
-        ...message,
-        visible: true,
-        width: '100%',
-        maxHeight: '500px',
-        withDismiss: false,
-      }}
-    />
-  );
-
-  return toastBase(content, {
-    toastId: id,
-    autoClose,
-    onClose,
-    hideProgressBar: true,
-    closeOnClick: false,
-    pauseOnHover: true,
-    draggable: false,
-    closeButton: CloseButton,
-    transition: Slide,
-  });
-};

package/src/components/toaster/toaster.less

@@ -1,17 +0,0 @@
-@import '~react-toastify/dist/ReactToastify.css';
-
-.Toastify__toast {
-  padding: 0;
-  min-height: inherit;
-  font-family: inherit;
-  background-color: rgba(0, 0, 0, 0);
-
-  .Toastify__toast-body {
-    display: block;
-    padding: 0;
-
-    > div > div {
-      padding-right: 35px; // Adds offset for dismiss icon
-    }
-  }
-}

package/src/components/toaster/toaster.stories.jsx

@@ -1,116 +0,0 @@
-import React from 'react';
-import { Button, Spacer, toast } from '../../..';
-
-const messageSuccess = {
-  type: 'Success',
-  icon: true,
-  heading: 'Heading',
-  content: 'Great results',
-};
-
-const messageError = {
-  type: 'Error',
-  icon: true,
-  heading: 'Heading',
-  content: 'An error has happened',
-  details: 'Bad input data lorem ipsum dolor est compendum lorem ipsum.',
-};
-
-const messageWarning = {
-  type: 'Warning',
-  icon: true,
-  heading: 'Heading',
-  content: 'Warning message',
-};
-
-const messageInfo = {
-  type: 'Info',
-  icon: true,
-  heading: 'Heading',
-  content: 'Long content lorem ipsum dolor est compendum lorem ipsum.',
-};
-
-export default {
-  title: 'Modals/Toaster',
-  parameters: {
-    docs: {
-      inlineStories: false,
-      iframeHeight: 400,
-    },
-  },
-  source: { type: 'code' },
-  args: {
-    id: undefined,
-    message: messageInfo,
-    autoClose: 6000,
-    onClose: () => {},
-  },
-};
-
-const Template = (args) => {
-  return (
-    <>
-      <Button
-        label="Info"
-        onClick={() =>
-          toast({
-            message: messageInfo,
-            onClose: () => console.log('toast closed'),
-          })
-        }
-      />
-      <Spacer />
-      <Button
-        label="Error"
-        onClick={() =>
-          toast({
-            message: messageError,
-            onClose: () => console.log('toast closed'),
-          })
-        }
-      />
-      <Spacer />
-      <Button
-        label="Warning"
-        onClick={() =>
-          toast({
-            message: messageWarning,
-            onClose: () => console.log('toast closed'),
-          })
-        }
-      />
-      <Spacer />
-      <Button
-        label="Success"
-        onClick={() =>
-          toast({
-            message: messageSuccess,
-            onClose: () => console.log('toast closed'),
-          })
-        }
-      />
-    </>
-  );
-};
-export const Default = Template.bind({});
-
-export const PreventDuplicates = () => (
-  <Button
-    label="Show Toast"
-    onClick={() =>
-      toast({
-        message: messageError,
-        onClose: () => console.log('toast closed'),
-        id: 'uniqueId',
-      })
-    }
-  />
-);
-PreventDuplicates.parameters = {
-  docs: {
-    iframeHeight: 200,
-    description: {
-      story: 'Pass a unique `id` in the `toast` object to prevent duplicates.',
-    },
-  },
-};

package/src/components/toggle/toggle.jsx

@@ -1,65 +0,0 @@
-import React, { useContext } from 'react';
-import PropTypes, { oneOfType } from 'prop-types';
-import cx from 'classnames';
-import styles from './toggle.module.less';
-import { DisabledContext } from '../../helpers/disabled-context';
-
-export const Toggle = ({
-  name,
-  label,
-  checked,
-  disabled,
-  small,
-  onChange,
-  noMargin,
-  testId,
-}) => {
-  const disabledContext = useContext(DisabledContext);
-
-  return (
-    <div
-      className={cx(
-        styles.toggle,
-        disabled || disabledContext ? styles.disabled : null,
-        small ? styles.small : null,
-        noMargin ? styles.noMargin : null,
-      )}
-      onClick={(evt) => {
-        evt.target.name = name;
-        evt.target.checked = !checked;
-        evt.target.value = !checked;
-        onChange(evt);
-      }}
-      data-testid={testId}
-    >
-      <input
-        type="checkbox"
-        name={name}
-        value={checked}
-        disabled={disabled || disabledContext}
-        checked={checked}
-        onChange={() => {}}
-      />
-      <label>{label}</label>
-    </div>
-  );
-};
-
-Toggle.defaultProps = {
-  label: null,
-  name: undefined,
-  checked: false,
-  small: false,
-  noMargin: false,
-  testId: undefined,
-};
-
-Toggle.propTypes = {
-  name: PropTypes.string,
-  checked: PropTypes.bool,
-  onChange: PropTypes.func.isRequired,
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  small: PropTypes.bool,
-  noMargin: PropTypes.bool,
-  testId: PropTypes.string,
-};

package/src/components/toggle/toggle.module.less

@@ -1,139 +0,0 @@
-@import '../../style/variables.less';
-
-:root {
-  --color-background-toggle: rgba(black, 0.2);
-  --color-background-toggle-hover: rgba(black, 0.3);
-}
-
-[data-theme='dark'] {
-  --color-background-toggle: rgba(white, 0.2);
-  --color-background-toggle-hover: rgba(white, 0.3);
-}
-
-@toggleSize: 17px;
-
-.toggle {
-  position: relative;
-  display: inline-block;
-  backface-visibility: hidden;
-  outline: 0;
-  vertical-align: baseline;
-  font-style: normal;
-  min-height: @toggleSize;
-  font-size: inherit;
-  line-height: @toggleSize;
-  min-width: @toggleSize;
-  margin: 10px 0 11px 0;
-
-  &.small {
-    margin: 3px 0;
-    font-size: @input_font_size_small;
-  }
-
-  input {
-    width: @toggleSize * 2;
-    height: @toggleSize;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0 !important;
-    outline: 0;
-    z-index: 3;
-    box-sizing: border-box;
-    padding: 0;
-    overflow: visible;
-    font-family: sans-serif;
-    font-size: 100%;
-    line-height: 1.15;
-    margin: 0;
-  }
-
-  label {
-    min-height: @toggleSize;
-    padding-left: (@toggleSize * 2) + 9px;
-    transition: color 0.1s ease;
-    cursor: auto;
-    position: relative;
-    display: block;
-    outline: 0;
-    font-size: 1em;
-
-    &:before,
-    &:after {
-      display: block;
-      position: absolute;
-      content: '';
-      top: 0;
-      height: @toggleSize;
-      border-radius: calc(@toggleSize / 2);
-    }
-
-    &:before {
-      z-index: 1;
-      transform: none;
-      background: var(--color-background-toggle);
-      box-shadow: none;
-      width: @toggleSize * 2;
-      left: 0;
-      transition: background 0.3s ease, border 0.1s ease, opacity 0.1s ease,
-        transform 0.1s ease, box-shadow 0.1s ease;
-    }
-
-    &:after {
-      left: -0.05rem;
-      box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15),
-        0 0 0 1px rgba(34, 36, 38, 0.15) inset;
-      background: #fff linear-gradient(transparent, rgba(0, 0, 0, 0.05));
-      opacity: 1;
-      z-index: 2;
-      width: @toggleSize;
-      transition: background 0.3s ease, left 0.3s ease;
-    }
-  }
-
-  input:hover ~ label {
-    &:before {
-      background: var(--color-background-toggle-hover);
-    }
-  }
-
-  input:checked ~ label {
-    &:before {
-      border-color: rgba(34, 36, 38, 0.35);
-      background-color: var(--color-background-button-primary);
-    }
-
-    &:after {
-      left: @toggleSize;
-    }
-  }
-
-  input:checked:hover ~ label {
-    &:before {
-      background-color: var(--color-background-button-primary-hover);
-    }
-  }
-
-  &.disabled {
-    cursor: default;
-    pointer-events: none;
-    color: var(--color-text-muted);
-
-    label {
-      &:before {
-        background-color: var(--color-background-disabled) !important;
-      }
-    }
-
-    input:checked ~ label {
-      &:before {
-        background-color: var(--color-text-faint);
-      }
-    }
-  }
-}
-
-.noMargin {
-  margin: 0;
-}

package/src/components/toggle/toggle.stories.jsx

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