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

package/src/components/table/table.test.js

@@ -1,30 +0,0 @@
-import { hasRowActions, getColumnCount } from './table.viewdata';
-
-describe('table', () => {
-  test('hasRowActions', () => {
-    const withActions = [{ cells: [], actions: [{}] }, { cells: [] }];
-    const withOutActions = [{ cells: [] }, { cells: [] }];
-    expect(hasRowActions(withOutActions, withOutActions)).toBe(false);
-    expect(hasRowActions(withActions, withOutActions)).toBe(true);
-  });
-
-  test('getColumnCount', () => {
-    const noRows = [];
-    const unevenColumns = [
-      { cells: [{}, {}, {}] },
-      { cells: [{}, {}, {}, {}, {}] },
-      { cells: [{}, {}, {}] },
-    ];
-    expect(getColumnCount(noRows, unevenColumns)).toBe(5);
-  });
-
-  test('getColumnCount with colSpan', () => {
-    const noRows = [];
-    const unevenColumns = [
-      { cells: [{}, { colSpan: 2 }, {}] },
-      { cells: [{}, {}] },
-      { cells: [{}, {}, {}] },
-    ];
-    expect(getColumnCount(noRows, unevenColumns)).toBe(4);
-  });
-});

package/src/components/table/table.variables.less

@@ -1,11 +0,0 @@
-@import '../../style/variables.less';
-
-.cellWrapperPadding {
-  padding: @input_padding_y @input_padding_x !important;
-}
-
-.flexBlock {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}

package/src/components/table/table.viewdata.js

@@ -1,26 +0,0 @@
-const getMaxCellCount = (rows) => {
-  const count = Math.max(
-    ...rows.reduce((acc, row) => {
-      const count = row.cells
-        .map((c) => (c.colSpan ? c.colSpan : 1))
-        .reduce((a, b) => a + b, 0);
-      return acc.concat(count);
-    }, []),
-  );
-  return !isNaN(count) ? count : 0;
-};
-
-export const getColumnCount = (rows, headers) => {
-  const cellCount = [getMaxCellCount(headers), getMaxCellCount(rows)];
-  return Math.max(...cellCount);
-};
-
-const hasActions = (rows) =>
-  rows.reduce(
-    (acc, row) => (row.actions && row.actions.length > 0 ? 1 : acc),
-    0,
-  );
-
-export const hasRowActions = (rows, headers) => {
-  return hasActions(headers) > 0 || hasActions(rows) > 0;
-};

package/src/components/table/title/title.jsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styles from './title.module.less';
-import { Actions } from '../../actions/actions';
-import { actionsShape } from '../../actions/actions.shape';
-
-export const Title = (props) => {
-  const { colSpan, name, actions } = props;
-  return name ? (
-    <tr>
-      <th colSpan={colSpan} className={styles.cellWrapper}>
-        <div className={styles.title}>
-          <div>{name}</div>
-          <div>{actions && <Actions actions={actions} isBlockElement />}</div>
-        </div>
-      </th>
-    </tr>
-  ) : null;
-};
-
-Title.defaultProps = {
-  name: null,
-  actions: null,
-};
-
-Title.propTypes = {
-  actions: actionsShape,
-  colSpan: PropTypes.number.isRequired,
-  name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-};

package/src/components/table/title/title.module.less

@@ -1,11 +0,0 @@
-@import '../table.variables.less';
-
-.cellWrapper {
-  .cellWrapperPadding();
-}
-
-.title {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}

package/src/components/tabs/content.jsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import styles from './tabs.module.less';
-
-export const Content = ({ children, activeTabIndex, contentPadding }) => {
-  //The tab content is only rendered if the children props are provided, otherwise tab content is handled by the parent
-  return (
-    children && (
-      <div className={cx(contentPadding ? styles.contentPadding : '')}>
-        {children.map((child, index) => activeTabIndex === index && child)}
-      </div>
-    )
-  );
-};

package/src/components/tabs/label.jsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import styles from './tabs.module.less';
-import { Badge } from '../badge/badge';
-
-export const Label = ({
-  label,
-  url,
-  hidden,
-  disabled,
-  active,
-  onClick,
-  right,
-  invalid,
-  badge,
-  testId,
-}) => {
-  // TODO: Replace with named colors (error, success, warning) which can be defined in LESS
-  const col_danger = getComputedStyle(document.body).getPropertyValue(
-    '--color-text-error',
-  );
-  return (
-    // eslint-disable-next-line jsx-a11y/anchor-is-valid
-    <a
-      id={label}
-      href={url}
-      className={cx(
-        styles.item,
-        active ? styles.active : '',
-        disabled ? styles.disabled : '',
-        hidden && !active ? styles.hidden : '',
-        right ? styles.right : styles.left,
-      )}
-      onClick={onClick}
-      data-testid={testId}
-    >
-      {invalid ? (
-        <Badge small margin="-4px" color={col_danger} title="!">
-          {label}
-        </Badge>
-      ) : badge ? (
-        <Badge small margin="-4px" title={badge}>
-          {label}
-        </Badge>
-      ) : (
-        label
-      )}
-    </a>
-  );
-};

package/src/components/tabs/tabs.jsx

@@ -1,191 +0,0 @@
-import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { Label } from './label';
-import { Content } from './content';
-import styles from './tabs.module.less';
-import { standardizeInputs } from '../select/select.input';
-import { DisabledContext } from '../../helpers/disabled-context';
-
-export const Tabs = ({
-  name,
-  options: rawOptions,
-  children,
-  value: rawValue,
-  onChange,
-  padding,
-  margin,
-  contentPadding,
-  //deprecated:
-  onChangeTab,
-  activeTabIndex: rawActiveTabIndex,
-  tabs: tabsConfig,
-  testId,
-}) => {
-  const disabledContext = useContext(DisabledContext);
-
-  //----------------------------------------------------------------------------
-  // Deprecation / backwards-compatibility
-  const isDeprecated = onChangeTab !== undefined;
-
-  const rawTabs = children
-    ? children.map((c, i) => ({
-        value: i,
-        url: c.props.url,
-        label: c.props.label,
-        hidden: c.props.hidden,
-        disabled: c.props.disabled || disabledContext,
-        badge: c.props.badge,
-        testId: c.props?.testId && `${c.props.testId}-${i}`,
-      }))
-    : rawOptions || tabsConfig;
-  const {
-    simpleInputs,
-    options: tabs,
-    selectedOptions: value,
-  } = isDeprecated
-    ? {
-        simpleInputs: false,
-        options: rawTabs,
-        selectedOptions: undefined,
-      }
-    : standardizeInputs(rawTabs, rawValue);
-  const selectedValue =
-    isDeprecated || value === undefined || value === null
-      ? undefined
-      : simpleInputs
-      ? value
-      : value.value;
-  const activeTabIndexBase =
-    rawActiveTabIndex !== undefined
-      ? rawActiveTabIndex
-      : tabs.findIndex((t) => t.value === selectedValue);
-  const activeTabIndex = activeTabIndexBase === -1 ? 0 : activeTabIndexBase;
-  //----------------------------------------------------------------------------
-
-  const renderTab = (tab, index) => {
-    const {
-      label,
-      url,
-      hidden,
-      disabled,
-      value,
-      right,
-      invalid,
-      badge,
-      testId,
-    } = tab;
-    return (
-      <Label
-        label={label}
-        url={url}
-        key={index}
-        hidden={hidden}
-        disabled={disabled || disabledContext}
-        invalid={invalid}
-        badge={badge}
-        right={right}
-        active={
-          isDeprecated ? index === activeTabIndex : value === selectedValue
-        }
-        onClick={
-          isDeprecated
-            ? () => {
-                //deprecated
-                const value = tab.key || label || null; //return key if it exists, otherwise use label
-                onChangeTab(index, value);
-              }
-            : (evt) => {
-                evt.target.name = name;
-                evt.target.value = tab.value;
-                evt.target.label = label;
-                onChange(evt);
-              }
-        }
-        testId={testId}
-      />
-    );
-  };
-
-  if (tabs) {
-    return (
-      <div>
-        <div
-          className={cx(
-            styles.tabs,
-            padding ? styles.padding : '',
-            margin ? styles.margin : '',
-          )}
-          data-testid={testId}
-        >
-          {tabs.map(renderTab)}
-        </div>
-        <Content
-          activeTabIndex={activeTabIndex}
-          contentPadding={contentPadding}
-        >
-          {children}
-        </Content>
-      </div>
-    );
-  }
-  return null;
-};
-
-Tabs.defaultProps = {
-  name: undefined,
-  options: null,
-  children: null,
-  onChange: () => {},
-  padding: false,
-  margin: true,
-  contentPadding: true,
-  //deprecated:
-  activeTabIndex: undefined,
-  tabs: undefined,
-  onChangeTab: undefined,
-  testId: undefined,
-};
-
-export const tabOptionShape = PropTypes.shape({
-  label: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  url: PropTypes.string,
-  hidden: PropTypes.bool,
-  disabled: PropTypes.bool,
-  invalid: PropTypes.bool,
-  badge: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  right: PropTypes.bool,
-  testId: PropTypes.string,
-});
-
-export const tabSelectedOptionShape = PropTypes.shape({
-  label: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-});
-
-const TabsShapeDeprecated = {
-  tabs: PropTypes.arrayOf(tabOptionShape),
-  children: PropTypes.node,
-  activeTabIndex: PropTypes.number,
-  onChangeTab: PropTypes.func,
-  padding: PropTypes.bool,
-  margin: PropTypes.bool,
-  contentPadding: PropTypes.bool,
-};
-
-const TabsShape = {
-  name: PropTypes.string,
-  options: PropTypes.arrayOf(tabOptionShape),
-  children: PropTypes.node,
-  value: tabSelectedOptionShape,
-  onChange: PropTypes.func,
-  padding: PropTypes.bool,
-  margin: PropTypes.bool,
-  contentPadding: PropTypes.bool,
-};
-
-Tabs.propTypes = PropTypes.oneOfType([
-  PropTypes.shape(TabsShape), //only use this for new usages
-  PropTypes.shape(TabsShapeDeprecated), //deprecated Select interface
-]).isRequired;

package/src/components/tabs/tabs.module.less

@@ -1,73 +0,0 @@
-@import '../../style/variables.less';
-
-.tabs {
-  display: flex;
-  flex-wrap: wrap;
-  border-bottom: 1px solid var(--color-border);
-  flex-shrink: 0;
-
-  &.padding {
-    padding-left: 20px;
-    padding-right: 20px;
-  }
-
-  &.margin {
-    margin: 1rem 0;
-  }
-}
-
-.contentPadding {
-  padding-top: 10px;
-}
-
-.item {
-  align-self: flex-end;
-  display: flex;
-  align-items: center;
-  position: relative;
-  vertical-align: middle;
-  line-height: 1;
-  text-decoration: none;
-  flex: 0 0 auto;
-  user-select: none;
-  padding: 0.85714286em 0;
-  transition: border 0.1s ease, color 0.1s ease;
-  margin-bottom: -1px;
-  border-bottom: 1px solid transparent;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  font-weight: normal;
-  color: var(--color-text-primary);
-  cursor: pointer;
-
-  &:not(:last-child) {
-    margin-right: 1.5rem;
-  }
-
-  &:hover {
-    color: var(--color-text-primary-hover);
-  }
-
-  &:active {
-    color: var(--color-text-primary-active);
-  }
-
-  &.active {
-    border-color: var(--color-text);
-    color: var(--color-text);
-    cursor: default;
-  }
-
-  &.hidden {
-    display: none !important;
-  }
-
-  &.disabled {
-    color: var(--color-text-faint);
-    pointer-events: none;
-  }
-
-  &.left + .item.right {
-    margin-left: auto;
-  }
-}

package/src/components/tabs/tabs.stories.jsx

@@ -1,110 +0,0 @@
-import React, { useState } from 'react';
-import { Tabs } from '../../..';
-
-export default {
-  title: 'Navigation/Tabs',
-  component: Tabs,
-  args: {
-    name: 'example',
-    options: [
-      { label: 'Tab', value: 0 },
-      { label: 'Tab', value: 1 },
-      { label: 'With Badge', value: 2, badge: '3' },
-      { label: 'Invalid', value: 3, invalid: true },
-      { label: 'Disabled', value: 4, disabled: true },
-      { label: 'Hidden tab', value: 5, hidden: true },
-    ],
-    value: 0,
-  },
-};
-
-const Template = (args) => (
-  <Tabs
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    {...args}
-  />
-);
-export const Default = Template.bind({});
-
-export const WithChildren = Template.bind({});
-WithChildren.args = {
-  children: [
-    <div label="Tab 0">
-      <h3>Tab 0 Content</h3>
-    </div>,
-    <div label="Tab 1" hidden>
-      <h3>Tab 1 Content</h3>
-    </div>,
-    <div label="Tab 2" disabled>
-      <h3>Tab 2 Content</h3>
-    </div>,
-    <div label="Tab 3">
-      <h3>Tab 3 Content</h3>
-    </div>,
-    <div label="Tab 4">
-      <h3>Tab 4 Content</h3>
-    </div>,
-  ],
-};
-
-export const NoMargin = Template.bind({});
-NoMargin.args = { margin: false };
-
-export const HorizontalPadding = Template.bind({});
-HorizontalPadding.parameters = {
-  layout: 'fullscreen',
-  docs: {
-    description: {
-      story: 'When you want the divider to fill the edges of its container.',
-    },
-  },
-};
-HorizontalPadding.args = { padding: true };
-
-export const Alignment = Template.bind({});
-Alignment.args = {
-  options: [
-    { label: 'Tab 0', value: 0 },
-    { label: 'Tab 1', value: 1 },
-    { label: 'Tab 2', value: 2 },
-    { label: 'Tab 3', value: 3, right: true },
-    { label: 'Tab 4', value: 4, right: true },
-  ],
-};
-
-export const Managed = () => {
-  const options = [
-    {
-      label: 'Strawberries',
-      value: 'strawberries',
-    },
-    {
-      label: 'Bananas',
-      value: 'bananas',
-    },
-    {
-      label: 'Apples',
-      value: 'apples',
-      disabled: true,
-    },
-    {
-      label: 'Pomegranates',
-      value: 'pomegranates',
-    },
-  ];
-  const [selectedTab, setSelectedTab] = useState(options[0]);
-  return (
-    <>
-      <Tabs
-        name="example"
-        value={selectedTab}
-        options={options}
-        onChange={(evt) => {
-          const { value, label } = evt.target;
-          setSelectedTab({ value, label });
-        }}
-      />
-      <span>Eating {selectedTab.value}...</span>
-    </>
-  );
-};

package/src/components/text/text.jsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import styles from './text.module.less';
-
-export const Text = ({
-  children,
-  bold,
-  center,
-  error,
-  faint,
-  link,
-  muted,
-  onClick,
-  small,
-  success,
-  warning,
-}) => {
-  return (
-    <span
-      className={cx(
-        bold && styles.bold,
-        center && styles.center,
-        error && styles.error,
-        faint && styles.faint,
-        link && styles.link,
-        muted && styles.muted,
-        onClick && styles.clickable,
-        small && styles.small,
-        success && styles.success,
-        warning && styles.warning,
-      )}
-      onClick={onClick}
-    >
-      {children}
-    </span>
-  );
-};
-
-Text.defaultProps = {
-  bold: false,
-  center: false,
-  error: false,
-  faint: false,
-  link: false,
-  muted: false,
-  onClick: null,
-  small: false,
-  success: false,
-  warning: false,
-};
-
-Text.propTypes = {
-  bold: PropTypes.bool,
-  center: PropTypes.bool,
-  error: PropTypes.bool,
-  faint: PropTypes.bool,
-  link: PropTypes.bool,
-  muted: PropTypes.bool,
-  onClick: PropTypes.func,
-  small: PropTypes.bool,
-  success: PropTypes.bool,
-  warning: PropTypes.bool,
-};

package/src/components/text/text.module.less

@@ -1,45 +0,0 @@
-@import '../../style/variables.less';
-
-.bold {
-  font-weight: bold;
-}
-
-.center {
-  text-align: center;
-}
-
-.muted {
-  color: var(--color-text-muted);
-}
-
-.faint {
-  color: var(--color-text-faint);
-}
-
-.success {
-  color: var(--color-text-success);
-}
-
-.warning {
-  color: var(--color-text-warning);
-}
-
-.error {
-  color: var(--color-text-error);
-}
-
-.small {
-  font-size: 0.9em;
-}
-
-.link {
-  color: var(--color-text-primary);
-  cursor: pointer;
-
-  &:hover {
-    color: var(--color-text-primary-hover);
-  }
-  &:active {
-    color: var(--color-text-primary-active);
-  }
-}

package/src/components/text/text.stories.jsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { Text } from '../../..';
-
-export default {
-  title: 'Basic/Text',
-  component: Text,
-  args: {
-    children: 'Text goes here',
-    small: false,
-    muted: false,
-    error: false,
-    warning: false,
-    success: false,
-    link: false,
-    onClick: undefined,
-  },
-};
-
-const Template = (args) => (
-  <Text
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    {...args}
-  />
-);
-export const Default = Template.bind({});
-
-export const Small = Template.bind({});
-Small.args = { small: true };
-
-export const Link = Template.bind({});
-Link.args = { link: true, onClick: () => {} };