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

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

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

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

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

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

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

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

@@ -0,0 +1,40 @@
+@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;
+}