trepur_components 2.3.7 → 2.3.9

package/archive/BreadcrumbsBordered/BreadcrumbsBordered.stories.tsx

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

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

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

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

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

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

package/archive/Button/style.module.css

@@ -1,76 +0,0 @@
-.classList {
-  @apply transform border-2 text-sm duration-500;
-  @apply inline-block text-center;
-}
-
-.classList:focus {
-  @apply outline;
-}
-
-.loading {
-  @apply absolute left-2/4 top-1/4 -ml-2;
-}
-
-.social {
-  @apply px-1 py-1;
-}
-
-.icon {
-  @apply px-3;
-}
-
-.default {
-  @apply px-8;
-}
-
-.padding {
-  @apply py-3;
-}
-
-.primary {
-  @apply border-secondary bg-primary text-secondary outline-primary;
-}
-
-.primaryNotDisabled:hover {
-  @apply border-primary bg-secondary text-primary;
-}
-
-.primaryNotDisabled:focus:hover {
-  @apply border-primary bg-secondary text-primary;
-}
-
-.secondary {
-  @apply border-primary bg-secondary text-primary outline-secondary;
-}
-
-.secondaryNotDisabled:hover {
-  @apply border-secondary bg-primary text-secondary;
-}
-
-.secondaryNotDisabled:focus:hover {
-  @apply border-primary bg-primary text-secondary;
-}
-
-.tertiary {
-  @apply border-secondary bg-secondary text-secondary outline-tertiary;
-}
-
-.tertiaryNotDisabled:hover {
-  @apply border-tertiary bg-secondary text-tertiary;
-}
-
-.tertiaryNotDisabled:focus:hover {
-  @apply border-secondary bg-secondary text-tertiary;
-}
-
-.disabled {
-  @apply opacity-50;
-}
-
-.rounded {
-  @apply rounded-lg;
-}
-
-.notRounded {
-  @apply rounded-none;
-}

package/archive/Calendar/Calendar.stories.tsx

@@ -1,82 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import Calendar from '.';
-
-const meta = {
-  title: 'Components/Calendar',
-  component: Calendar,
-  argTypes: {
-    ...idAndClassName,
-
-    useRange: {
-      type: { name: 'boolean', required: false },
-      description: 'Toggles the ability to select a range of dates',
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-      defaultValue: 'false',
-    },
-    showDoubleView: {
-      type: { name: 'boolean', required: false },
-      description: 'Toggles the 2 month mode',
-      table: {
-        defaultValue: { summary: 'true' },
-      },
-      defaultValue: 'true',
-    },
-    showNavigation: {
-      type: { name: 'boolean', required: false },
-      description: 'Toggles the navigation at the top of the calendar',
-      table: {
-        defaultValue: { summary: 'true' },
-      },
-      defaultValue: 'true',
-    },
-    minDetail: {
-      type: { name: 'string', required: false },
-      description: 'The detail in whuch you with the calendar to show',
-      table: {
-        defaultValue: { summary: 'month' },
-      },
-      defaultValue: 'month',
-    },
-    minDate: {
-      type: { name: 'date', required: false },
-      description: 'The minimum date to show as available on the calendar',
-      table: {
-        defaultValue: { summary: new Date() },
-      },
-      defaultValue: new Date(),
-    },
-    maxDate: {
-      type: { name: 'date', required: false },
-      description: 'The maximum date to show as available on the calendar',
-      table: {
-        defaultValue: {
-          summary: new Date(
-            new Date().setFullYear(new Date().getFullYear() + 1),
-          ),
-        },
-      },
-      defaultValue: new Date(
-        new Date().setFullYear(new Date().getFullYear() + 1),
-      ),
-    },
-    disabledDates: {
-      type: { name: 'array', required: false },
-      description: 'An array of dates as strings to grey out on the component',
-      table: {
-        defaultValue: { summary: [] },
-      },
-      defaultValue: [],
-    },
-  },
-  args: {},
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};