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

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

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

@@ -0,0 +1,50 @@
+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-tabs.jsx

@@ -0,0 +1,43 @@
+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 }}
+            key={index}
+            data-testid={testId && `${testId}-content-${index}`}
+          >
+            {active && tab.content}
+          </div>
+        );
+      })}
+    </>
+  );
+};

package/src/components/drawer/drawer.jsx

@@ -0,0 +1,150 @@
+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';
+
+export const Drawer = ({
+  background,
+  children,
+  fixed,
+  open: openProp,
+  right,
+  shadow,
+  top,
+  width,
+  closedWidth,
+  button,
+  buttonAnimate,
+  buttonPosition,
+  border,
+  tabs,
+  defaultTabIndex,
+  testId,
+}) => {
+  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 currentWidth = open ? openWidth : closedWidth;
+
+  const handleTabClick = (index) => {
+    if (activeTab === index) {
+      setActiveTab(null);
+      setOpen(false);
+    } else {
+      setActiveTab(index);
+      setOpen(true);
+    }
+  };
+
+  return (
+    <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>
+  );
+};
+
+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,
+};
+
+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,
+};

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

@@ -0,0 +1,167 @@
+@import '../../style/variables.less';
+
+:root {
+  --color-background-drawer-tab: #fff9f4;
+  --color-background-drawer-tab-hover: white;
+  --color-border-drawer-tab: #e4cbb7;
+}
+
+html[data-theme='dark'] {
+  --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;
+  }
+
+  &.right {
+    order: 9999;
+  }
+}
+
+.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;
+
+  @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: 1;
+
+  .left & {
+    right: -19px;
+  }
+
+  .right & {
+    left: -19px;
+  }
+
+  &.top {
+    top: 20px;
+  }
+
+  &.bottom {
+    bottom: 20px;
+  }
+
+  &.toggleButtonOpen {
+    transform: rotate(0deg);
+  }
+}
+
+.tabs {
+  position: absolute;
+  top: 20px;
+  z-index: @zindex_drawer + 1;
+
+  .left & {
+    left: 100%;
+    margin-left: -1px;
+  }
+
+  .right & {
+    right: 100%;
+    margin-right: -1px;
+  }
+
+  .tab {
+    height: 40px;
+    width: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 1px;
+    border-radius: 4px;
+    cursor: pointer;
+    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);
+    }
+  }
+}

package/src/components/drawer/drawer.stories.jsx

@@ -0,0 +1,156 @@
+import React, { useState } from 'react';
+import {
+  FaArrowLeft,
+  FaChevronLeft,
+  FaCogs,
+  FaPenAlt,
+  FaQuestion,
+} from 'react-icons/fa';
+import { Drawer, Button, List, Heading, Flex } from '../../..';
+import { listSubheadingsBadges } from '../list/list.stories-data';
+
+export default {
+  title: 'Layout/Drawer',
+  component: Drawer,
+  args: {
+    button: true,
+    open: true,
+    right: false,
+    border: true,
+    shadow: false,
+    width: '300px',
+    closedWidth: '50px',
+    top: undefined,
+    background: 'var(--color-background-raised)',
+    children: <div style={{ padding: 20 }}>Drawer content</div>,
+  },
+  argTypes: {
+    button: { table: { disable: true } },
+  },
+  decorators: [
+    (story) => (
+      <Flex height="400px">
+        <div
+          style={{
+            flexGrow: 1,
+            padding: 20,
+            background: 'var(--color-background)',
+          }}
+        >
+          Page content
+        </div>
+        {story()}
+      </Flex>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+const Template = (args) => {
+  return (
+    <Drawer
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...args}
+    />
+  );
+};
+export const Default = Template.bind({});
+
+export const Right = Template.bind({});
+Right.args = { right: true };
+
+export const Fixed = Template.bind({});
+Fixed.args = {
+  fixed: true,
+};
+Fixed.parameters = {
+  docs: {
+    inlineStories: false,
+    iframeHeight: '400px',
+  },
+};
+
+export const CustomButton = Template.bind({});
+CustomButton.args = {
+  buttonType: 'custom',
+  button: <Button colored round icon={<FaArrowLeft />} />,
+  buttonAnimate: true,
+};
+
+export const WithList = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <Drawer
+      button={
+        <Button onClick={() => setOpen(!open)} round icon={<FaChevronLeft />} />
+      }
+      width="300px"
+      closedWidth="50px"
+      border
+      open={open}
+    >
+      <List
+        drawer
+        list={listSubheadingsBadges}
+        marginBottom={10}
+        narrow={!open}
+      />
+    </Drawer>
+  );
+};
+WithList.parameters = {
+  docs: {
+    description: {
+      story:
+        'To hide `List` headings when the `Drawer` is closed, set the `narrow` prop on the `List`.',
+    },
+  },
+};
+
+export const Tabs = Template.bind({});
+Tabs.args = {
+  right: true,
+  button: false,
+  closedWidth: 0,
+  width: ['200px', '300px', '400px'],
+  defaultTabIndex: 1,
+  tabs: [
+    {
+      icon: <FaQuestion />,
+      content: (
+        <div style={{ padding: 20 }}>
+          <Heading top>Help</Heading>
+          {'Example content goes here lorem ipsum. '.repeat(500)}
+        </div>
+      ),
+    },
+    {
+      icon: <FaCogs />,
+      content: (
+        <div style={{ padding: 20 }}>
+          <Heading top>Settings</Heading>
+          {'Example content goes here lorem ipsum. '.repeat(500)}
+        </div>
+      ),
+    },
+    {
+      icon: <FaPenAlt />,
+      content: (
+        <div style={{ padding: 20 }}>
+          <Heading top>Edit</Heading>
+          {'Example content goes here lorem ipsum. '.repeat(500)}
+        </div>
+      ),
+    },
+  ],
+};
+Tabs.parameters = {
+  docs: {
+    description: {
+      story:
+        'The top tab will be open by default, but you can set `defaultTabIndex` if you need a different tab open. If you need different widths per tab, pass an array of widths to `width`.',
+    },
+  },
+};

package/src/components/empty/empty.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Text } from '../text/text';
+import styles from './empty.module.less';
+
+export const Empty = ({ width, height, text, children }) => {
+  return (
+    <div className={styles.empty} style={{ width, height }}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="64" height="41">
+        <g transform="translate(0 1)" fill="none" fillRule="evenodd">
+          <ellipse
+            cx="32"
+            cy="33"
+            rx="32"
+            ry="7"
+            fill="rgba(0,0,0,0.1)"
+          ></ellipse>
+          <g fillRule="nonzero" stroke="var(--color-text)" strokeOpacity="0.2">
+            <path
+              d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+              fill="rgba(0,0,0,0.05)"
+            ></path>
+            <path
+              d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+              fill="var(--color-background-raised)"
+            ></path>
+          </g>
+        </g>
+      </svg>
+      {text !== '' && (
+        <div className={styles.text}>
+          <Text faint>{text}</Text>
+        </div>
+      )}
+      {children}
+    </div>
+  );
+};
+
+Empty.defaultProps = {
+  width: 'auto',
+  height: 'auto',
+  text: 'No data',
+  children: null,
+};
+
+Empty.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  children: PropTypes.node,
+};

package/src/components/empty/empty.module.less

@@ -0,0 +1,17 @@
+@import '../../style/variables.less';
+
+.empty {
+  position: relative;
+  border-radius: inherit;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 10px;
+
+  .text {
+    max-width: 40ch;
+    margin-bottom: 3px;
+  }
+}

package/src/components/empty/empty.stories.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Empty, Button } from '../../..';
+
+export default {
+  title: 'Progress/Empty',
+  component: Empty,
+  args: {
+    text: 'No data',
+    width: '100%',
+    height: '100%',
+  },
+};
+
+const Template = (args) => (
+  <Empty
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args}
+  />
+);
+export const Default = Template.bind({});
+
+export const WithButton = Template.bind({});
+WithButton.args = {
+  text: 'Please apply at least one casing in Well Schematics to perform drilling mechanics',
+  children: <Button colored label="Add casing" />,
+};