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

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

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

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

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

@@ -0,0 +1,24 @@
+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({});