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

package/src/components/divider/divider.jsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styles from './divider.module.less';
-import { Text } from '../text/text';
-
-const cssAlignClass = (align) => {
-  switch (align) {
-    case 'left':
-      return styles.alignLeft;
-    case 'right':
-      return styles.alignRight;
-    default:
-      return '';
-  }
-};
-
-export const Divider = ({ children, margin, color, align }) => (
-  <div
-    className={`${styles.divider} ${cssAlignClass(align)}`}
-    style={{
-      marginTop: margin,
-      marginBottom: margin,
-      '--color': color,
-    }}
-  >
-    {typeof children === 'string' ? <Text muted>{children}</Text> : children}
-  </div>
-);
-
-Divider.defaultProps = {
-  margin: 20,
-  color: 'var(--color-border)',
-  align: 'center',
-};
-
-Divider.propTypes = {
-  margin: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  color: PropTypes.string,
-  align: PropTypes.string,
-};

package/src/components/divider/divider.module.less

@@ -1,28 +0,0 @@
-@import '../../style/variables.less';
-
-.divider {
-  display: flex;
-  align-items: center;
-  text-align: center;
-}
-
-.divider::before,
-.divider::after {
-  content: '';
-  flex: 1;
-  border-bottom: 1px solid var(--color);
-}
-
-.alignLeft::before {
-  flex-grow: 0.05;
-}
-.alignRight::after {
-  flex-grow: 0.05;
-}
-
-.divider:not(:empty)::before {
-  margin-right: 0.25em;
-}
-.divider:not(:empty)::after {
-  margin-left: 0.25em;
-}

package/src/components/divider/divider.stories.jsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import { Divider, Text } from '../../..';
-
-export default {
-  title: 'Layout/Divider',
-  component: Divider,
-  argTypes: {
-    align: {
-      control: {
-        type: 'inline-radio',
-      },
-      options: ['left', 'center', 'right'],
-    },
-  },
-  decorators: [(story) => <>content{story()}more content</>],
-  parameters: {
-    docs: {
-      source: {
-        excludeDecorators: true,
-      },
-    },
-  },
-};
-
-const Template = (args) => (
-  <Divider
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    {...args}
-  />
-);
-
-export const Default = Template.bind({});
-
-export const WithText = Template.bind({});
-WithText.args = {
-  children: 'Heading',
-  align: 'left',
-};
-
-export const Margin = Template.bind({});
-Margin.args = {
-  margin: 0,
-};
-
-export const CustomColor = Template.bind({});
-CustomColor.args = {
-  color: 'var(--color-text-success)',
-  children: <Text success>Colored text</Text>,
-  align: 'left',
-};

package/src/components/drawer/drawer-resize-wrapper.jsx

@@ -1,76 +0,0 @@
-import React, { useState } from 'react';
-import { FaGripLinesVertical } from 'react-icons/fa';
-import { Resizable } from 'react-resizable';
-import PropTypes from 'prop-types';
-import styles from './drawer.module.less';
-
-const ResizeHandle = React.forwardRef((props, ref) => {
-  const { handleAxis, ...rest } = props;
-  return (
-    <div
-      ref={ref}
-      className={styles.resizeHandle}
-      {...rest} // eslint-disable-line react/jsx-props-no-spreading
-    >
-      <FaGripLinesVertical />
-    </div>
-  );
-});
-
-export const DrawerResizeWrapper = ({
-  children,
-  width,
-  minWidth,
-  right,
-  onResize,
-  open,
-}) => {
-  const [isResizing, setIsResizing] = useState(false);
-  const MINIMUM_OPEN_WIDTH = 100;
-  const MAXIMUM_OPEN_WIDTH = window.innerWidth / 2;
-
-  const handleResize = (event, { node, size, handle }) => {
-    if (
-      open &&
-      size.width > MINIMUM_OPEN_WIDTH &&
-      size.width < MAXIMUM_OPEN_WIDTH
-    ) {
-      onResize(size.width);
-    }
-  };
-
-  return onResize ? (
-    <Resizable
-      width={width}
-      height={100} // Arbitrary height value. It's required by react-resizable even if height not adjustable but doesn't actually do anything in this case
-      minConstraints={[minWidth, null]}
-      onResize={handleResize}
-      handle={open ? <ResizeHandle /> : null}
-      resizeHandles={right ? ['w'] : ['e']}
-      axis="x"
-      className={isResizing ? styles.isResizing : ''}
-      onResizeStart={() => setIsResizing(true)}
-      onResizeStop={() => setIsResizing(false)}
-    >
-      {children}
-    </Resizable>
-  ) : (
-    <>{children}</>
-  );
-};
-
-DrawerResizeWrapper.defaultProps = {
-  right: false,
-  width: 400,
-  minWidth: null,
-  children: null,
-  onResize: null,
-};
-
-DrawerResizeWrapper.propTypes = {
-  right: PropTypes.bool,
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  children: PropTypes.node,
-  onResize: PropTypes.func,
-};

package/src/components/drawer/drawer-tabs.jsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import styles from './drawer.module.less';
-
-export const DrawerTabs = ({
-  tabs,
-  activeTab,
-  background,
-  handleTabClick,
-  width,
-  testId,
-}) => {
-  return (
-    <>
-      <div className={styles.tabs}>
-        {tabs.map((tab, index) => (
-          <div
-            key={index}
-            className={cx(styles.tab, activeTab === index && styles.active)}
-            style={{ background }}
-            onClick={() => handleTabClick(index)}
-            data-testid={testId && `${testId}-icon-${index}`}
-          >
-            {tab.icon}
-          </div>
-        ))}
-      </div>
-      {tabs.map((tab, index) => {
-        const active = activeTab === index;
-
-        return (
-          <div
-            style={{ width }}
-            className={styles.tabsContent}
-            key={index}
-            data-testid={testId && `${testId}-content-${index}`}
-          >
-            {active && tab.content}
-          </div>
-        );
-      })}
-    </>
-  );
-};

package/src/components/drawer/drawer.jsx

@@ -1,161 +0,0 @@
-import React, { isValidElement, useState } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
-import { Button } from '../button/button';
-import { DrawerTabs } from './drawer-tabs';
-import styles from './drawer.module.less';
-import { DrawerResizeWrapper } from './drawer-resize-wrapper';
-
-export const Drawer = ({
-  background,
-  children,
-  fixed,
-  open: openProp,
-  right,
-  shadow,
-  top,
-  width,
-  closedWidth,
-  button,
-  buttonAnimate,
-  buttonPosition,
-  border,
-  tabs,
-  defaultTabIndex,
-  testId,
-  onResize,
-}) => {
-  const isStandardButton = button === true;
-  const isCustomButton = !isStandardButton && isValidElement(button);
-  const [open, setOpen] =
-    isStandardButton || tabs ? useState(openProp) : [openProp, null];
-  const [activeTab, setActiveTab] = useState(open ? defaultTabIndex : null);
-  const openWidth = Array.isArray(width) ? width[activeTab] : width;
-  const TABS_WIDTH = 38;
-  const currentWidth = open ? openWidth : tabs ? TABS_WIDTH : closedWidth;
-
-  const handleTabClick = (index) => {
-    if (activeTab === index) {
-      setActiveTab(null);
-      setOpen(false);
-    } else {
-      setActiveTab(index);
-      setOpen(true);
-    }
-  };
-
-  return (
-    <DrawerResizeWrapper
-      width={currentWidth}
-      minWidth={tabs ? TABS_WIDTH : closedWidth}
-      onResize={onResize}
-      open={open}
-      right={right}
-    >
-      <div
-        className={cx(
-          styles.drawer,
-          shadow ? styles.shadow : '',
-          fixed ? styles.fixed : styles.inline,
-          right ? styles.right : styles.left,
-        )}
-        style={{ top }}
-      >
-        <div
-          className={cx(styles.drawerContent, border && styles.border)}
-          style={{ background, borderColor: border, width: currentWidth }}
-        >
-          {tabs ? (
-            <DrawerTabs
-              width={openWidth}
-              testId={testId}
-              open={open}
-              tabs={tabs}
-              activeTab={activeTab}
-              background={background}
-              handleTabClick={handleTabClick}
-            />
-          ) : (
-            <div style={{ width: openWidth }}>{children}</div>
-          )}
-        </div>
-
-        {button && (
-          <span
-            className={cx(
-              styles.toggleButton,
-              open && (isStandardButton || (isCustomButton && buttonAnimate))
-                ? styles.toggleButtonOpen
-                : '',
-              buttonPosition === 'top' ? styles.top : styles.bottom,
-            )}
-          >
-            {isCustomButton ? (
-              button
-            ) : (
-              <Button
-                onClick={setOpen ? () => setOpen(!open) : null}
-                round
-                icon={right ? <FaChevronRight /> : <FaChevronLeft />}
-              />
-            )}
-          </span>
-        )}
-      </div>
-    </DrawerResizeWrapper>
-  );
-};
-
-Drawer.defaultProps = {
-  background: 'transparent',
-  fixed: false,
-  open: false,
-  right: false,
-  width: 400,
-  closedWidth: 0,
-  shadow: false,
-  top: 0,
-  button: null,
-  buttonAnimate: true,
-  buttonPosition: 'bottom',
-  border: false,
-  children: null,
-  tabs: null,
-  defaultTabIndex: 0,
-  testId: undefined,
-  onResize: null,
-};
-
-Drawer.propTypes = {
-  background: PropTypes.string,
-  fixed: PropTypes.bool,
-  open: PropTypes.bool,
-  right: PropTypes.bool,
-  width: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-    PropTypes.arrayOf(
-      PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    ),
-  ]),
-  closedWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  children: PropTypes.node,
-  shadow: PropTypes.bool,
-  top: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  //button
-  button: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
-  buttonAnimate: PropTypes.bool,
-  buttonPosition: PropTypes.oneOf(['top', 'bottom']),
-  border: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  // tabs
-  tabs: PropTypes.arrayOf(
-    PropTypes.shape({
-      icon: PropTypes.node,
-      content: PropTypes.node,
-    }),
-  ),
-  testId: PropTypes.string,
-  defaultTabIndex: PropTypes.number,
-  onResize: PropTypes.func,
-};

package/src/components/drawer/drawer.module.less

@@ -1,217 +0,0 @@
-@import '../../style/variables.less';
-
-:root {
-  --color-background-drawer-tabs: var(--color-neutral-50);
-  --color-background-drawer-tab: #fff9f4;
-  --color-background-drawer-tab-hover: white;
-  --color-border-drawer-tab: #e4cbb7;
-}
-
-html[data-theme='dark'] {
-  --color-background-drawer-tabs: var(--color-neutral-900);
-  --color-background-drawer-tab: var(--color-primary-muted-800);
-  --color-background-drawer-tab-hover: var(--color-primary-muted-700);
-  --color-border-drawer-tab: var(--color-border);
-}
-
-.inline {
-  position: relative;
-
-  &.left {
-    order: -1;
-    margin-left: -1px;
-  }
-
-  &.right {
-    order: 9999;
-    margin-right: -1px;
-  }
-}
-
-.fixed {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  z-index: @zindex_drawer;
-
-  &.left {
-    left: 0;
-  }
-
-  &.right {
-    right: 0;
-  }
-}
-
-.border {
-  .left & {
-    border-right: 1px solid var(--color-border);
-  }
-
-  .right & {
-    border-left: 1px solid var(--color-border);
-  }
-}
-
-.shadow {
-  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
-}
-
-.drawerContent {
-  overflow-x: hidden;
-  overflow-y: auto;
-  max-height: 100%;
-  min-height: 100%;
-  transition: width 0.2s;
-
-  .isResizing & {
-    transition: none;
-  }
-
-  @media print {
-    background: transparent !important;
-  }
-
-  /* Hide scrollbar for Firefox */
-  scrollbar-width: none;
-  /* Hide scrollbar for IE 10+ */
-  -ms-overflow-style: none;
-
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-.toggleButton {
-  transition: transform 0.4s;
-  display: inline-block;
-  transform: rotate(180deg);
-  position: absolute;
-  z-index: @zindex_drawer + 3;
-
-  .left & {
-    right: -19px;
-  }
-
-  .right & {
-    left: -19px;
-  }
-
-  &.top {
-    top: 20px;
-  }
-
-  &.bottom {
-    bottom: 20px;
-  }
-
-  &.toggleButtonOpen {
-    transform: rotate(0deg);
-  }
-}
-
-.tabs {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  background-color: var(--color-background-drawer-tabs);
-  padding-top: 20px;
-  z-index: @zindex_drawer + 1;
-  border-left: 1px solid var(--color-border);
-  border-right: 1px solid var(--color-border);
-
-  .left & {
-    right: 0;
-  }
-
-  .right & {
-    left: 0;
-  }
-
-  .tab {
-    height: 38px;
-    width: 38px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    margin: -1px;
-    transition: color 0.3s, background-color 0.3s;
-    border: 1px solid var(--color-border-drawer-tab);
-
-    .left & {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-
-      &.active {
-        border-left-color: transparent;
-      }
-    }
-
-    .right & {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-
-      &.active {
-        border-right-color: transparent;
-      }
-    }
-
-    &:not(.active) {
-      color: var(--color-text-primary);
-      background-color: var(--color-background-drawer-tab) !important;
-
-      &:hover {
-        color: var(--color-text);
-        background-color: var(--color-background-drawer-tab-hover) !important;
-      }
-    }
-
-    &.active {
-      color: var(--color-text);
-      border-color: var(--color-border);
-    }
-  }
-}
-
-.tabsContent {
-  .left & {
-    padding-right: 36px;
-  }
-  .right & {
-    padding-left: 36px;
-  }
-}
-
-.resizeHandle {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 10px;
-  z-index: @zindex_drawer + 2;
-  cursor: ew-resize;
-  display: flex;
-  align-items: center;
-  color: var(--color-text-faint);
-  font-size: 12px;
-  transition: all 0.2s;
-
-  &:hover {
-    background: rgba(@colorPrimary, 0.15);
-    color: var(--color-text-primary);
-  }
-
-  &:active {
-    background: var(--color-text-primary);
-    color: white;
-  }
-
-  .left & {
-    right: 0;
-  }
-
-  .right & {
-    left: 0;
-  }
-}