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

package/src/components/slider/slider.stories.jsx

@@ -1,110 +0,0 @@
-import React from 'react';
-import { useArgs } from '@storybook/addons';
-import { Slider, Text } from '../../..';
-
-const marks = [
-  { label: 'S1...', tooltip: 'S1 Production', value: 20 },
-  { label: 'S2...', tooltip: 'S2 Cementing', value: 40 },
-  {
-    label: 'S3...',
-    tooltip: (
-      <span>
-        <strong>S3</strong> Drilling
-      </span>
-    ),
-    value: 60,
-  },
-  { label: 'S4...', tooltip: 'S4 Shut in', value: 80 },
-  { label: 'S5...', tooltip: 'S5 Circulate', value: 100 },
-];
-
-export default {
-  title: 'Forms/Slider',
-  component: Slider,
-  args: {
-    value: 50,
-    min: 0,
-    max: 100,
-    step: 1,
-    showTooltip: false,
-    label: '',
-  },
-};
-
-const Template = (args) => {
-  const [_, updateArgs] = useArgs();
-  const handleChange = (evt) => {
-    updateArgs({ value: evt.target.value });
-  };
-  return (
-    <Slider
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...args}
-      onChange={handleChange}
-    />
-  );
-};
-export const Default = Template.bind({});
-
-export const Range = Template.bind({});
-Range.args = { range: true, value: [10, 40] };
-
-export const Label = Template.bind({});
-Label.args = { label: 'Number of aardvarks' };
-
-export const JSXLabel = () => {
-  const [{ value }, updateArgs] = useArgs();
-  const handleChange = (evt) => {
-    updateArgs({ value: evt.target.value });
-  };
-  return (
-    <>
-      <Slider
-        label={
-          <span>
-            Fixed width label: <strong>{value * Math.random()}</strong>
-          </span>
-        }
-        labelWidth="400px"
-        value={value}
-        onChange={handleChange}
-      />
-    </>
-  );
-};
-
-export const Tooltip = Template.bind({});
-Tooltip.args = { showTooltip: true };
-
-export const FormattedTooltip = () => (
-  <Slider
-    showTooltip
-    min={0}
-    max={100}
-    value={50}
-    tooltipFormatter={(v) => (
-      <Text warning>{`${v} extra info lorem ipsum`}</Text>
-    )}
-  />
-);
-
-export const Arrows = Template.bind({});
-Arrows.args = { showArrows: true };
-
-export const Marks = Template.bind({});
-Marks.args = {
-  marks,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = { disabled: true };
-
-export const Vertical = Template.bind({});
-Vertical.args = {
-  marks,
-  vertical: {
-    enabled: true,
-    width: '100px',
-    height: '400px',
-  },
-};

package/src/components/spinner/spinner.jsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import styles from './spinner.module.less';
-
-export const Spinner = ({ small, colored, dark, tiny }) => {
-  return (
-    <div
-      className={cx(
-        styles.spinner,
-        small ? styles.small : '',
-        tiny ? styles.tiny : '',
-        dark ? styles.dark : '',
-        colored ? styles.colored : '',
-      )}
-    >
-      <div />
-      <div />
-      <div />
-      <div />
-    </div>
-  );
-};
-
-Spinner.defaultProps = {
-  colored: false,
-  dark: false,
-  small: false,
-  tiny: false,
-};
-
-Spinner.propTypes = {
-  colored: PropTypes.bool,
-  dark: PropTypes.bool,
-  small: PropTypes.bool,
-  tiny: PropTypes.bool,
-};

package/src/components/spinner/spinner.module.less

@@ -1,115 +0,0 @@
-@import '../../style/variables.less';
-
-// source: https://loading.io/css/
-.spinner {
-  display: inline-block;
-  position: relative;
-  width: 40px;
-  height: 40px;
-
-  &.small {
-    width: 14px;
-    height: 14px;
-  }
-
-  &.tiny {
-    width: 10px;
-    height: 10px;
-  }
-
-  div {
-    box-sizing: border-box;
-    display: block;
-    position: absolute;
-    width: 40px;
-    height: 40px;
-    border: 6px solid #fff;
-    border-radius: 50%;
-    animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-    border-color: #fff transparent transparent transparent;
-  }
-
-  &.small {
-    div {
-      width: 14px;
-      height: 14px;
-      border: 3px solid #fff;
-      border-color: #fff transparent transparent transparent;
-    }
-  }
-
-  &.tiny {
-    div {
-      width: 10px;
-      height: 10px;
-      border: 2px solid #fff;
-      border-color: #fff transparent transparent transparent;
-    }
-  }
-
-  &.colored {
-    div {
-      border: 6px solid var(--color-background-primary);
-      border-color: var(--color-background-primary) transparent transparent
-        transparent;
-    }
-  }
-
-  &.small.colored {
-    div {
-      border: 3px solid var(--color-background-primary);
-      border-color: var(--color-background-primary) transparent transparent
-        transparent;
-    }
-  }
-
-  &.tiny.colored {
-    div {
-      border: 2px solid var(--color-background-primary);
-      border-color: var(--color-background-primary) transparent transparent
-        transparent;
-    }
-  }
-
-  &.dark {
-    div {
-      border: 6px solid var(--color-text-muted);
-      border-color: var(--color-text-muted) transparent transparent transparent;
-    }
-  }
-
-  &.small.dark {
-    div {
-      border: 3px solid var(--color-text-muted);
-      border-color: var(--color-text-muted) transparent transparent transparent;
-    }
-  }
-
-  &.tiny.dark {
-    div {
-      border: 2px solid var(--color-text-muted);
-      border-color: var(--color-text-muted) transparent transparent transparent;
-    }
-  }
-
-  div:nth-child(1) {
-    animation-delay: -0.45s;
-  }
-
-  div:nth-child(2) {
-    animation-delay: -0.3s;
-  }
-
-  div:nth-child(3) {
-    animation-delay: -0.15s;
-  }
-}
-
-@keyframes spinner {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}

package/src/components/spinner/spinner.stories.jsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Spinner } from '../../..';
-
-export default {
-  title: 'Progress/Spinner',
-  component: Spinner,
-  args: {
-    dark: true,
-    colored: false,
-    small: false,
-    tiny: false,
-  },
-};
-
-const Template = (args) => (
-  <div style={{ background: 'var(--color-background)', padding: 20 }}>
-    <Spinner
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...args}
-    />
-  </div>
-);
-
-export const Default = Template.bind({});