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

package/src/components/side-bar/side-bar.jsx

@@ -1,102 +0,0 @@
-import React, { memo, useState } from 'react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import isEqual from 'react-fast-compare';
-import { FaArrowLeft } from 'react-icons/fa';
-import { Drawer } from '../drawer/drawer';
-import { Sections } from './sections';
-import styles from './side-bar.module.less';
-import { Button } from '../button/button';
-
-export const SideBar = memo(
-  ({ options, startOpen, onShiftClickToggleOpen, top }) => {
-    const [isOpen, setIsOpen] = useState(startOpen || false);
-
-    const onClick = (evt, value, label, clickHandler) => {
-      evt.preventDefault();
-      if (typeof clickHandler === 'function') {
-        evt.target.value = value;
-        evt.target.label = label;
-        clickHandler(evt);
-      }
-      setIsOpen(false);
-    };
-
-    const visible = options.sections.length > 0;
-    return (
-      <Drawer
-        fixed
-        open={isOpen}
-        top={top}
-        background="var(--color-background-sidebar)"
-        closedWidth={70}
-        enableButton={visible}
-        buttonPosition="bottom"
-        buttonAnimate
-        button={
-          visible && (
-            <Button
-              onClick={(evt) => {
-                if (evt.shiftKey) {
-                  onShiftClickToggleOpen(evt);
-                }
-                setIsOpen(!isOpen);
-              }}
-              colored
-              round
-              icon={<FaArrowLeft />}
-            />
-          )
-        }
-      >
-        <div className={cx(styles.sidebar, !isOpen ? styles.collapsed : '')}>
-          {visible && (
-            <div className={styles.inner}>
-              <h4 className={styles.title}>{options.title}</h4>
-              <Sections
-                isOpen={isOpen}
-                sections={options.sections}
-                onClick={onClick}
-              />
-            </div>
-          )}
-        </div>
-      </Drawer>
-    );
-  },
-  (prevProps, nextProps) => isEqual(prevProps, nextProps),
-);
-
-SideBar.defaultProps = {
-  startOpen: false,
-  onShiftClickToggleOpen: () => {},
-  top: undefined,
-};
-
-SideBar.propTypes = {
-  options: PropTypes.shape({
-    title: PropTypes.string.isRequired,
-    sections: PropTypes.arrayOf(
-      PropTypes.shape({
-        heading: PropTypes.string.isRequired,
-        items: PropTypes.arrayOf(
-          PropTypes.shape({
-            label: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
-              .isRequired,
-            value: PropTypes.string.isRequired,
-            icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
-              .isRequired,
-            onClick: PropTypes.func.isRequired,
-            isActive: PropTypes.bool,
-            isExperimental: PropTypes.bool,
-            invalid: PropTypes.bool,
-            testId: PropTypes.string,
-          }),
-        ).isRequired,
-      }),
-    ).isRequired,
-  }).isRequired,
-  startOpen: PropTypes.bool,
-  onShiftClickToggleOpen: PropTypes.func,
-  top: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-};

package/src/components/side-bar/side-bar.module.less

@@ -1,137 +0,0 @@
-@import '../../style/variables.less';
-
-:root {
-  --color-background-sidebar: var(--color-neutral-950);
-}
-
-@sidebarPadding: 1.4rem;
-
-.sidebar {
-  background-color: var(--color-background-sidebar);
-  color: white;
-  position: relative;
-
-  @media print {
-    display: none;
-  }
-}
-
-.inner {
-  padding: @sidebarPadding;
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE 10+ */
-
-  &::-webkit-scrollbar {
-    width: 0px; /* Remove scrollbar space */
-    background: transparent; /* Optional: just make scrollbar invisible */
-  }
-}
-
-.title,
-.subtitle,
-.label {
-  transition: opacity 0.2s, max-height 0.2s, margin 0.2s, color 0.2s;
-  max-height: 50px;
-
-  .collapsed & {
-    opacity: 0;
-    max-height: 0;
-    margin-bottom: 0;
-    margin-top: 0;
-  }
-}
-
-.title {
-  overflow: hidden;
-  max-width: 100%;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-top: 0;
-  font-size: 16px;
-}
-
-.subtitle {
-  margin-bottom: 0.75rem;
-  white-space: nowrap;
-  font-size: 12px;
-  letter-spacing: 0.1em;
-  opacity: 0.6;
-}
-
-.list {
-  margin-left: -@sidebarPadding;
-  margin-right: -@sidebarPadding;
-  margin-bottom: 2rem;
-  margin-top: 0;
-}
-
-.item {
-  font-size: 16px;
-  color: white;
-  font-weight: normal;
-  display: flex;
-  padding: 0.4rem @sidebarPadding;
-  align-items: center;
-
-  &:focus {
-    outline: none; // Remove dotted outline on FF
-  }
-
-  &::-moz-focus-inner {
-    border: 0; // Remove dotted outline on FF
-  }
-
-  &:hover,
-  &:focus {
-    color: var(--color-primary-400);
-  }
-
-  &:active {
-    color: var(--color-primary-300);
-  }
-
-  &.active {
-    color: white;
-    background: black;
-  }
-
-  &.experimental {
-    background: #40130b;
-  }
-}
-
-.icon {
-  margin-right: 10px;
-  line-height: 0;
-  flex-shrink: 0;
-  transition: opacity 0.4s;
-  opacity: 0.4;
-  display: block;
-
-  .item:hover &,
-  .item:focus & {
-    opacity: 0.6;
-  }
-
-  .item:active & {
-    opacity: 0.8;
-  }
-
-  .item.active & {
-    opacity: 1;
-  }
-
-  > * {
-    opacity: 1;
-  }
-
-  > span {
-    // Fix for Tooltip
-    display: block;
-  }
-}
-
-.label {
-  white-space: nowrap;
-  overflow: hidden;
-}

package/src/components/side-bar/side-bar.stories.jsx

@@ -1,101 +0,0 @@
-import React from 'react';
-import { FaAngleDoubleRight } from 'react-icons/fa';
-import { SideBar, Flex, Badge } from '../../..';
-import svgIcon from '../../images/icons/icons8-junction.svg';
-
-const sections = [
-  {
-    heading: 'First Heading',
-    items: [
-      {
-        label: 'Section A',
-        value: '/path/to/something',
-        onClick: () => {},
-        icon: svgIcon,
-      },
-      {
-        label: (
-          <Flex alignItems="center" gap="10px">
-            Section B
-            <Badge small title="BETA" />
-          </Flex>
-        ),
-        value: '/path/to/something',
-        onClick: () => {},
-        icon: svgIcon,
-        isActive: true,
-      },
-      {
-        label: 'Section C',
-        value: '/path/to/something',
-        onClick: () => {},
-        icon: svgIcon,
-      },
-      {
-        label: 'Experimental Section',
-        value: '/path/to/something',
-        onClick: () => {},
-        icon: svgIcon,
-        isExperimental: true,
-      },
-    ],
-  },
-  {
-    heading: 'Second Heading',
-    items: [
-      {
-        label: 'Section 1',
-        value: '/path/to/something',
-        onClick: () => {},
-        icon: <FaAngleDoubleRight />,
-      },
-      {
-        label: 'Section 2',
-        value: '/path/to/something',
-        onClick: () => {},
-        icon: <FaAngleDoubleRight />,
-      },
-      {
-        label: 'Invalid Section',
-        value: '/path/to/something',
-        onClick: () => {},
-        icon: svgIcon,
-        invalid: true,
-      },
-    ],
-  },
-];
-
-export default {
-  title: 'Navigation/SideBar',
-  component: SideBar,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      inlineStories: false,
-      iframeHeight: 500,
-    },
-  },
-  args: {
-    options: {
-      title: 'Title',
-      sections,
-    },
-    startOpen: false,
-  },
-  argTypes: {
-    top: { control: { type: 'text' } },
-    startOpen: { control: { type: 'boolean' } },
-  },
-};
-
-const Template = (args) => (
-  <SideBar // eslint-disable-next-line react/jsx-props-no-spreading
-    {...args}
-  />
-);
-
-export const Default = Template.bind({});
-
-export const StartOpen = Template.bind({});
-StartOpen.args = { startOpen: true };

package/src/components/slider/rc-slider.less

@@ -1,47 +0,0 @@
-@import '../../style/variables.less';
-@import '~rc-slider/assets/index.css';
-
-.rc-slider {
-  .rc-slider-rail {
-    background-color: var(--color-border);
-  }
-
-  .rc-slider-track {
-    background-color: var(--color-background-primary);
-  }
-
-  .rc-slider-dot {
-    border-color: var(--color-border);
-  }
-
-  .rc-slider-dot-active {
-    border-color: var(--color-background-primary);
-  }
-
-  .rc-slider-handle {
-    border-color: var(--color-background-primary);
-
-    &:focus {
-      border-color: var(--color-background-primary);
-      box-shadow: 0 0 0 3px var(--color-background-primary);
-    }
-  }
-
-  .rc-slider-mark-text {
-    color: var(--color-text-faint);
-  }
-
-  .rc-slider-mark-text-active {
-    color: var(--color-text-muted);
-  }
-
-  &-disabled {
-    background-color: transparent !important;
-
-    .rc-slider-mark-text,
-    .rc-slider-handle,
-    .rc-slider-dot {
-      cursor: default !important;
-    }
-  }
-}

package/src/components/slider/slider-tooltip.jsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { TooltipLayer } from '../tooltip/tooltip-layer';
-
-//See https://github.com/react-component/slider/issues/409#issuecomment-606750232
-export const SliderTooltip = ({ text }) => {
-  return (
-    <TooltipLayer
-      text={text}
-      layerProps={{
-        style: {
-          whiteSpace: 'nowrap',
-          position: 'fixed',
-          transform: 'translate(-50%, -100%)',
-          marginTop: -15,
-          marginLeft: 5,
-        },
-      }}
-    />
-  );
-};

package/src/components/slider/slider.jsx

@@ -1,233 +0,0 @@
-import _ from 'lodash';
-import React, { useContext } from 'react';
-import RcSlider, { Handle } from 'rc-slider';
-import memoizeOne from 'memoize-one';
-import isEqual from 'react-fast-compare';
-import { FaFastBackward, FaFastForward } from 'react-icons/fa';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { SliderTooltip } from './slider-tooltip';
-import './rc-slider.less';
-import styles from './slider.module.less';
-import { Tooltip } from '../tooltip/tooltip';
-import { Button } from '../button/button';
-import { DisabledContext } from '../../helpers/disabled-context';
-
-const formatMarkers = (marks) => {
-  const formatted = marks.reduce((acc, { label, tooltip, value }) => {
-    const isTooltip = tooltip !== undefined;
-    const formattedValue = isTooltip ? (
-      <Tooltip text={tooltip}>{label}</Tooltip>
-    ) : (
-      label || value
-    );
-    acc[value] = formattedValue;
-    return acc;
-  }, {});
-  return formatted;
-};
-
-const memoizedFormatMarkers = memoizeOne(formatMarkers, isEqual);
-
-export const Slider = ({
-  name,
-  label,
-  width,
-  labelWidth,
-  value,
-  min,
-  max,
-  step,
-  marks,
-  showArrows,
-  showTooltip,
-  tooltipFormatter,
-  disabled,
-  vertical,
-  onChange,
-  range,
-}) => {
-  const disabledContext = useContext(DisabledContext);
-
-  const formattedMarks = memoizedFormatMarkers(marks);
-
-  const onChangeValue = (value) => {
-    //rc-slider doesn't pass the Synthetic event
-    //but we can still follow the standard event format
-    onChange({
-      target: {
-        name,
-        value,
-        label,
-      },
-    });
-  };
-
-  const ButtonMin = () => (
-    <div className={styles.button}>
-      <Button
-        basic
-        small
-        onClick={() => onChangeValue(min)}
-        disabled={disabled || value === min || disabledContext}
-        icon={<FaFastBackward />}
-      />
-    </div>
-  );
-
-  const ButtonMax = () => (
-    <div className={styles.button}>
-      <Button
-        basic
-        small
-        onClick={() => onChangeValue(max)}
-        disabled={disabled || value === max || disabledContext}
-        icon={<FaFastForward />}
-      />
-    </div>
-  );
-
-  return (
-    <div
-      className={cx(
-        styles.container,
-        vertical.enabled ? styles.vertical : '',
-        !_.isEmpty(marks) ? styles.hasMarks : '',
-      )}
-      style={
-        vertical.enabled
-          ? { width: vertical.width, height: vertical.height }
-          : { width }
-      }
-    >
-      {showArrows && (vertical.enabled ? <ButtonMax /> : <ButtonMin />)}
-      {range ? (
-        <RcSlider.Range
-          allowCross={false}
-          className={cx(
-            (disabled || disabledContext) && styles.rcSliderDisabled,
-            showArrows && styles.hasArrows,
-          )}
-          value={value}
-          max={max}
-          min={min}
-          step={step}
-          marks={formattedMarks}
-          onChange={(v) => onChangeValue(v)}
-          disabled={disabled || disabledContext}
-          vertical={vertical.enabled}
-          handle={
-            showTooltip
-              ? ({ index, value, dragging, ...handleProps }) => (
-                  <Handle
-                    key={index}
-                    value={value}
-                    {...handleProps} // eslint-disable-line react/jsx-props-no-spreading
-                  >
-                    {dragging && (
-                      <SliderTooltip text={tooltipFormatter(value)} />
-                    )}
-                  </Handle>
-                )
-              : undefined
-          }
-        />
-      ) : (
-        <RcSlider
-          className={cx(
-            (disabled || disabledContext) && styles.rcSliderDisabled,
-            showArrows && styles.hasArrows,
-          )}
-          value={value}
-          max={max}
-          min={min}
-          step={step}
-          marks={formattedMarks}
-          onChange={(v) => onChangeValue(v)}
-          disabled={disabled || disabledContext}
-          vertical={vertical.enabled}
-          handle={
-            showTooltip
-              ? ({ index, value, dragging, ...handleProps }) => (
-                  <Handle
-                    key={index}
-                    value={value}
-                    {...handleProps} // eslint-disable-line react/jsx-props-no-spreading
-                  >
-                    {dragging && (
-                      <SliderTooltip text={tooltipFormatter(value)} />
-                    )}
-                  </Handle>
-                )
-              : undefined
-          }
-        />
-      )}
-
-      {showArrows && (vertical.enabled ? <ButtonMin /> : <ButtonMax />)}
-      {label && (
-        <label className={styles.label} style={{ width: labelWidth }}>
-          {label}
-        </label>
-      )}
-    </div>
-  );
-};
-
-Slider.defaultProps = {
-  name: undefined,
-  label: null,
-  width: '100%',
-  labelWidth: 'auto',
-  step: 1,
-  marks: [],
-  showArrows: false,
-  showTooltip: false,
-  tooltipFormatter: (v) => v,
-  disabled: false,
-  range: false,
-  vertical: {
-    enabled: false,
-    width: '100px',
-    height: '400px',
-  },
-};
-
-Slider.propTypes = {
-  name: PropTypes.string,
-  label: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-    PropTypes.node,
-  ]),
-  width: PropTypes.string,
-  labelWidth: PropTypes.string,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.array]).isRequired,
-  min: PropTypes.number.isRequired,
-  max: PropTypes.number.isRequired,
-  step: PropTypes.number,
-  marks: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-        .isRequired,
-      label: PropTypes.oneOfType([
-        PropTypes.number,
-        PropTypes.string,
-        PropTypes.node,
-      ]),
-      tooltip: PropTypes.oneOfType([
-        PropTypes.number,
-        PropTypes.string,
-        PropTypes.node,
-      ]),
-    }),
-  ),
-  onChange: PropTypes.func.isRequired,
-  showArrows: PropTypes.bool,
-  showTooltip: PropTypes.bool,
-  tooltipFormatter: PropTypes.func,
-  disabled: PropTypes.bool,
-  range: PropTypes.bool,
-  //for vertical variant:
-  vertical: PropTypes.object,
-};

package/src/components/slider/slider.module.less

@@ -1,40 +0,0 @@
-@import '../../style/variables.less';
-
-.container {
-  display: flex;
-  align-items: center;
-  min-height: 38px;
-
-  &.hasMarks {
-    padding-bottom: 20px;
-  }
-
-  &.vertical {
-    flex-direction: column;
-    padding-bottom: 0;
-
-    .hasArrows {
-      margin-top: 5px;
-      margin-bottom: 5px;
-    }
-
-    .button {
-      svg {
-        transform: rotate(-90deg);
-      }
-    }
-  }
-}
-
-.label {
-  white-space: nowrap;
-  margin-left: 10px;
-  line-height: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex-shrink: 0;
-}
-
-.rcSliderDisabled {
-  background-color: transparent;
-}