trepur_components 2.3.2 → 2.3.4

package/.eslintrc.cjs

@@ -0,0 +1,43 @@
+module.exports = {
+  settings: {
+    'import/resolver': {
+      typescript: {},
+    },
+  },
+  extends: ['plugin:storybook/recommended'],
+  ignorePatterns: [
+    'archive',
+    '.eslintrc.cjs',
+    'tailwind.config.js',
+    'webpack.config.js',
+    'tailwind/*.js',
+    'vite.config.mjs',
+    'lib/*',
+    'postcss.config.js',
+  ],
+  rules: {
+    'react/jsx-no-bind': 'off',
+    'sort-keys': [
+      'error',
+      'asc',
+      { caseSensitive: true, natural: false, minKeys: 2 },
+    ],
+    'import/no-extraneous-dependencies': [
+      'error',
+      {
+        devDependencies: ['**/*.stories.*', '**/*.test.*', '**/story-utils/*'],
+        peerDependencies: true,
+      },
+    ],
+  },
+  overrides: [
+    {
+      files: ['*.stories.*', '*.test.*'],
+      rules: {
+        'react-hooks/rules-of-hooks': 'off',
+        'jest/no-standalone-expect': 'off',
+        '@typescript-eslint/no-floating-promises': 'off',
+      },
+    },
+  ],
+};

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint

package/.prettierrc.json

@@ -0,0 +1,22 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "importOrder": [
+    "^react$",
+    "<THIRD_PARTY_MODULES>",
+    "^effects(/.+)?$",
+    "^@(/.+)?$",
+    "^hooks(/.+)?$",
+    "^layout(/.+)?$",
+    "^next(/.+)?$",
+    "^styles(/.+)?$",
+    "^types(/.+)?$",
+    "^utils(/.+)?$",
+    "^\\.?\\.(/.+)?$"
+  ],
+  "importOrderSeparation": true,
+  "plugins": [
+    "@trivago/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss"
+  ]
+}

package/archive/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,46 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import Breadcrumbs from '.';
+
+const meta = {
+  title: 'Components/Breadcrumbs',
+  component: Breadcrumbs,
+  argTypes: {
+    ...idAndClassName,
+
+    links: {
+      description: 'An array of items to be displayed in the component',
+      table: {
+        category: '',
+        type: { summary: 'array' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+  },
+  args: {
+    links: [
+      {
+        href: '/',
+        name: 'link 1',
+      },
+      {
+        href: '/',
+        name: 'link 2',
+      },
+      {
+        href: '/',
+        name: 'link 3',
+      },
+      {
+        href: '/',
+        name: 'link 4',
+      },
+    ],
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/archive/Breadcrumbs/index.tsx

@@ -0,0 +1,42 @@
+import classNames from 'classnames';
+
+export interface Props {
+  id?: string;
+  className?: string;
+  links?: Array<{ name: string; href: string }>;
+}
+
+const Breadcrumbs = ({ id, className, links }: Props): JSX.Element => {
+  const linksLength = links != null ? Object.keys(links).length : 0;
+
+  const classList = classNames(className, 'flex py-2', 'theme-local');
+
+  return (
+    <ul id={id} className={classList}>
+      {links?.map((link, i) => {
+        return (
+          <div key={`breadcrumb_${i + 1}`} className='flex'>
+            <li className="h-8">
+              {i + 1 >= linksLength ? (
+                <p className='px-1 py-1'>{link.name}</p>
+              ) : (
+                <p className='px-1 py-1'>
+                  <a className='text-facebook hover:underline' href={link.href}>
+                    {link.name}
+                  </a>
+                </p>
+              )}
+            </li>
+            {i + 1 < linksLength && (
+              <li className='h-8'>
+                <p className='py-1'>&nbsp; &#62; &nbsp;</p>
+              </li>
+            )}
+          </div>
+        );
+      })}
+    </ul>
+  );
+};
+
+export default Breadcrumbs;

package/archive/BreadcrumbsBordered/BreadcrumbsBordered.stories.tsx

@@ -0,0 +1,52 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import BreadcrumbsBordered from '.';
+
+const meta = {
+  title: 'Components/BreadcrumbsBordered',
+  component: BreadcrumbsBordered,
+  parameters: {},
+  argTypes: {
+    ...idAndClassName,
+    links: {
+      description: 'An array of objects to be displayed in the component',
+      control: { type: 'array', default: undefined },
+      table: {
+        category: '',
+        type: { summary: 'array' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+  },
+  args: {
+    links: [
+      {
+        link: '/',
+        name: 'link 1',
+      },
+      {
+        link: '/',
+        name: 'link 2',
+      },
+      {
+        link: '/',
+        name: 'link 3',
+      },
+      {
+        link: '/',
+        name: 'link 4',
+      },
+      {
+        link: '/',
+        name: 'link 5',
+      },
+    ],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/archive/BreadcrumbsBordered/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+
+import classNames from 'classnames';
+import { BreadcrumbsItem } from 'src';
+
+
+
+export interface Props {
+  id?: string;
+  className?: string;
+  links?: any[];
+}
+
+const BreadcrumbsBordered: React.FC<Props> = ({ id, className, links }) => {
+  const linksLength = links?.length !== undefined ? links.length : 0;
+  const classList = classNames(className, 'flex theme-local');
+
+  return (
+    <ul id={id} className={classList}>
+      {links?.map((link: any, i: number) => {
+        const margin = i === 0 ? 'mr-3' : 'mx-3';
+        const first = i === 0;
+
+        let bType = 'standard';
+        if (linksLength >= 1 && i + 1 < linksLength) {
+          bType = 'link';
+        }
+        return (
+          <BreadcrumbsItem
+            key={`breadcrumb_item_${i + 0}`}
+            className={margin}
+            name={link.name}
+            link={link.link}
+            type={bType}
+            firstItem={first}
+          />
+        );
+      })}
+    </ul>
+  );
+};
+
+export default BreadcrumbsBordered;

package/archive/BreadcrumbsItem/BreadcrumbsItem.stories.tsx

@@ -0,0 +1,40 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import BreadcrumbsItem from '.';
+
+const meta = {
+  title: 'Components/Breadcrumbs Item',
+  component: BreadcrumbsItem,
+  parameters: {},
+  argTypes: {
+    ...idAndClassName,
+
+    name: {
+      description: 'Specifies the name for the key attribute',
+      table: {
+        category: '',
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    type: {
+      description: 'Specifies the type of breadcrumbs to display ie link',
+      table: {
+        category: '',
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+  },
+  args: {
+    name: 'Link 1',
+    href: '/',
+    firstItem: false,
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/archive/BreadcrumbsItem/index.tsx

@@ -0,0 +1,149 @@
+import { useState } from 'react';
+
+import classNames from 'classnames';
+
+export interface Props {
+  id?: string;
+  className?: string;
+  name: string;
+  link: string;
+  type?: string;
+  firstItem?: boolean;
+  href?: string;
+}
+
+const BreadcrumbsItem = ({
+  id,
+  className,
+  name,
+  link,
+  href,
+  type,
+  firstItem,
+}: Props): JSX.Element => {
+  const [isHovering, setIsHovering] = useState(false);
+
+  const classList = classNames(className, 'item theme-local');
+
+  const itemClassList = classNames(
+    {
+      'hover:underline': type === 'link',
+      'mb-0': isHovering,
+    },
+    'bc-item relative px-4 h-8',
+  );
+
+  const frontArrow = (
+    <span
+      style={{
+        borderTop: '17px solid transparent',
+        borderBottom: '15px solid transparent',
+        borderLeft: '16px solid',
+        right: '-16px',
+      }}
+      className='absolute top-0 h-0 w-0 border-t'
+    />
+  );
+
+  const backArrows = (
+    <>
+      <span
+        style={{
+          borderTop: '17px solid',
+          borderBottom: '18px solid transparent',
+          borderLeft: '17px solid transparent',
+          left: '-17px',
+          // '-webkit-transform': 'scaleY(-1)',
+          transform: 'scaleY(-1)',
+        }}
+        className='absolute h-0 w-0 border-l-transparent bg-transparent bottom-0'
+      />
+      <span
+        style={{
+          borderTop: '18px solid',
+          borderBottom: '17px solid transparent',
+          borderLeft: '17px solid transparent',
+          left: '-17px',
+        }}
+        className='top-0 absolute h-0 w-0 border-l-transparent bg-transparent'
+      />
+    </>
+  );
+
+  const renderWithFrontArrow = (
+    <div className={itemClassList}>
+      <p className='pt-1 text-center'>
+        {name}
+        {frontArrow}
+      </p>
+    </div>
+  );
+
+  const renderWithBackArrows = (
+    <div className={itemClassList}>
+      <p className='pt-1 text-center'>
+        {backArrows}
+        {name}
+        {frontArrow}
+      </p>
+    </div>
+  );
+
+  return (
+    <div id={id} className={classList}>
+      {type === 'link' ? (
+        firstItem !== null ? (
+          <a
+            onMouseOver={() => {
+              setIsHovering(true);
+            }}
+            onMouseOut={() => {
+              setIsHovering(false);
+            }}
+            href={href}
+          >
+            <li className='list-none'>{renderWithFrontArrow}</li>
+          </a>
+        ) : (
+          <a
+            onMouseOver={() => {
+              setIsHovering(true);
+            }}
+            onMouseOut={() => {
+              setIsHovering(false);
+            }}
+            href={href}
+          >
+            <li className='list-none'>{renderWithBackArrows}</li>
+          </a>
+        )
+      ) : firstItem !== null ? (
+        <li
+          className='list-none'
+          onMouseOver={() => {
+            setIsHovering(true);
+          }}
+          onMouseOut={() => {
+            setIsHovering(false);
+          }}
+        >
+          {renderWithFrontArrow}
+        </li>
+      ) : (
+        <li
+          className='list-none'
+          onMouseOver={() => {
+            setIsHovering(true);
+          }}
+          onMouseOut={() => {
+            setIsHovering(false);
+          }}
+        >
+          {renderWithBackArrows}
+        </li>
+      )}
+    </div>
+  );
+};
+
+export default BreadcrumbsItem;

package/archive/Button/Button.stories.tsx

@@ -0,0 +1,150 @@
+import { action } from '@storybook/addon-actions';
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import Button from '.';
+
+const meta = {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A Button which can either be internal, external or social as well as a standard design or a slide design.',
+      },
+    },
+  },
+  argTypes: {
+    ...idAndClassName,
+    onClick: {
+      type: { name: 'function', required: false },
+      description: 'The action to perform when clicking on the component',
+      action: 'onClick',
+      table: {
+        type: {
+          summary: 'function',
+        },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    hoverText: {
+      type: {
+        name: 'string',
+        required: false,
+      },
+      description: 'The text to display when hovering on the component',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: 'undefined',
+        },
+      },
+    },
+    variant: {
+      type: {
+        name: 'string',
+        required: false,
+      },
+      options: ['primary', 'secondary'],
+      description: 'The variant of button to render',
+      table: {
+        type: {
+          summary: 'primary',
+        },
+        defaultValue: {
+          summary: 'primary',
+        },
+      },
+      defaultValue: 'primary',
+      control: {
+        type: 'radio',
+      },
+    },
+    type: {
+      type: {
+        name: 'string',
+        required: false,
+      },
+      options: ['default', 'social', 'icon'],
+      description: 'The type of button to render',
+      table: {
+        type: {
+          summary: 'default',
+        },
+        defaultValue: {
+          summary: 'default',
+        },
+      },
+      defaultValue: 'default',
+      control: { type: 'radio' },
+    },
+    href: {
+      type: { name: 'string', required: false },
+      description: 'The link attached to the component',
+      table: {
+        type: {
+          summary: 'default',
+        },
+        defaultValue: {
+          summary: 'undefined',
+        },
+      },
+    },
+    rounded: {
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+      description: 'rounds the borders when true',
+      defaultValue: 'true',
+    },
+    disabled: {
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+      description: 'Can the carousel be dragged or not',
+    },
+    isLoading: {
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+      table: {
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+      description: 'Toggles the loading state of the compnent',
+    },
+    openInNewTab: {
+      type: { name: 'boolean', required: false },
+      description: 'Opens the link in a new tab when set to true',
+      defaultValue: 'false',
+    },
+    children: {
+      type: { name: 'other', value: 'string | React.ReactNode' },
+      description: 'The child elements to show in the component',
+      table: {
+        type: {
+          summary: 'Array',
+        },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+  },
+  args: {
+    children: 'This is a button',
+    rounded: true,
+    onClick: action('button clicked'),
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/archive/Button/index.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+
+import Icon from '@components/Icon';
+import classNames from 'classnames';
+
+
+
+interface AnchorAttributes
+  extends Partial<
+    Pick<JSX.IntrinsicElements['a'], 'href' | 'title' | 'target'>
+  > {}
+
+export interface Props {
+  id?: string;
+  className?: string;
+  onClick?: React.MouseEventHandler;
+  hoverText?: string;
+  variant?: 'primary' | 'secondary' | 'tertiary';
+  type?: 'social' | 'icon' | 'default';
+  href?: string;
+  label?: string;
+  target?: string;
+  rounded?: boolean;
+  disabled?: boolean;
+  isLoading?: boolean;
+  openInNewTab?: boolean;
+  children?: any;
+}
+
+const Button = ({
+  id,
+  className,
+  onClick,
+  variant = 'primary',
+  type = 'default',
+  href,
+  target,
+  label,
+  rounded = true,
+  disabled = false,
+  isLoading = false,
+  openInNewTab = false,
+  children,
+}: Props): JSX.Element => {
+  const padding = classNames(
+    {
+      [style.social]: type === 'social',
+      [style.icon]: type === 'icon',
+      [style.default]: type === 'default',
+    },
+    [style.padding],
+  );
+
+  const loadingClasses = classNames(
+    {
+      invisible: !isLoading,
+    },
+    style.loading,
+  );
+
+  const classList = classNames(
+    {
+      [style.primary]: variant === 'primary',
+      [style.primaryNotDisabled]: !disabled && variant === 'primary',
+      [style.secondary]: variant === 'secondary',
+      [style.secondaryNotDisabled]: !disabled && variant === 'secondary',
+      [style.disabled]: disabled,
+      [style.rounded]: rounded,
+      [style.notRounded]: !rounded,
+    },
+    style.classList,
+    className,
+    padding,
+    'theme-local',
+  );
+
+  const loadingIcon = (
+    <Icon
+      size={1}
+      type="spinner"
+      animation="pulse"
+      colour="white"
+      bgColour="primary"
+    />
+  );
+
+  let Tag: keyof Pick<JSX.IntrinsicElements, 'a' | 'button'> = 'button';
+  let attributes: AnchorAttributes = {};
+
+  if (Boolean(href) || Boolean(target)) {
+    Tag = 'a';
+    attributes = { href, target };
+  }
+
+  return (
+    <Tag
+      {...attributes}
+      id={id}
+      className={classList}
+      aria-busy={isLoading}
+      aria-label={label}
+      {...(onClick != null && { onClick })}
+      {...(disabled && { disabled })}
+    >
+      <div className={classNames({ invisible: isLoading })}>{children}</div>
+      {isLoading && <div className={loadingClasses}>{loadingIcon}</div>}
+    </Tag>
+  );
+};
+
+export default Button;