trepur_components 2.3.8 → 2.3.9

package/lib/tailwind/spacing.ts

@@ -1,14 +0,0 @@
-/* eslint-disable sort-keys */
-export default {
-  '0.25': '0.0625rem' /* 1px */,
-  '0.75': '0.1875rem' /* 3px */,
-  '1.25': '0.3125rem' /* 5px */,
-  '4.5': '1.125rem' /* 18px */,
-  '5.5': '1.375rem' /* 22px */,
-  '6.5': '1.625rem' /* 26px */,
-  '7.5': '1.875rem' /* 30px */,
-  '8.5': '2.125rem' /* 34px */,
-  '9.5': '2.375rem' /* 38px */,
-  13: '3.25rem' /* 52px */,
-  'app-header-height': 'var(--app-header-height, 0)',
-};

package/lib/utils/controls.d.ts

@@ -1,36 +0,0 @@
-export type Colours = 'primary' | 'secondary' | 'white' | 'black' | 'grey' | 'gold' | 'facebook' | 'linkedin' | 'email' | 'instagram' | 'github' | 'interactive-facebook' | 'interactive-email' | 'interactive-linkedin' | 'interactive-instagram' | 'interactive-github' | 'success' | 'error' | 'ink' | 'transparent';
-export type SocialTypes = 'facebook' | 'instagram' | 'github' | 'linkedin';
-export declare const idAndClassName: {
-    id: {
-        description: string;
-        control: {
-            type: string;
-            default: boolean;
-        };
-        table: {
-            category: string;
-            type: {
-                summary: string;
-            };
-            defaultValue: {
-                summary: string;
-            };
-        };
-    };
-    className: {
-        description: string;
-        control: {
-            type: string;
-            default: boolean;
-        };
-        table: {
-            category: string;
-            type: {
-                summary: string;
-            };
-            defaultValue: {
-                summary: string;
-            };
-        };
-    };
-};

package/lib/utils/matchMedia.d.ts

@@ -1,2 +0,0 @@
-declare const MatchMedia: (query: string) => boolean;
-export default MatchMedia;

package/lib/utils/matchMedia.js

@@ -1,9 +0,0 @@
-const a = (e) => {
-  if (typeof window > "u")
-    return !1;
-  const t = window.matchMedia(e);
-  return t == null ? void 0 : t.matches;
-};
-export {
-  a as default
-};

package/lib/utils/screens.d.ts

@@ -1,7 +0,0 @@
-export declare const Screens: {
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-};

package/src/components/BreadcrumbsBordered/BreadcrumbsBordered.stories.tsx

@@ -1,52 +0,0 @@
-import { Meta, type 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 BreadcrumbsBordered>;
-
-export const Default: Story = {};

package/src/components/BreadcrumbsBordered/index.tsx

@@ -1,41 +0,0 @@
-import classNames from 'classnames';
-import { BreadcrumbsItem } from 'src';
-
-export interface BreadcrumbsBorderedProps {
-  id?: string;
-  className?: string;
-  links?: any[];
-}
-
-export const BreadcrumbsBordered = ({
-  id,
-  className,
-  links,
-}: BreadcrumbsBorderedProps) => {
-  const linksLength = links?.length !== undefined ? links.length : 0;
-  const classList = classNames(className, 'flex');
-
-  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>
-  );
-}

package/src/components/BreadcrumbsItem/BreadcrumbsItem.stories.tsx

@@ -1,40 +0,0 @@
-import { Meta, type 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 BreadcrumbsItem>;
-
-export const Default: Story = {};

package/src/components/BreadcrumbsItem/index.tsx

@@ -1,147 +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;
-}
-
-export const BreadcrumbsItem = ({
-  id,
-  className,
-  name,
-  link,
-  href,
-  type,
-  firstItem,
-}: Props) => {
-  const [isHovering, setIsHovering] = useState(false);
-
-  const classList = classNames(className, 'item');
-
-  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 bottom-0 h-0 w-0 border-l-transparent bg-transparent"
-      />
-      <span
-        style={{
-          borderTop: '18px solid',
-          borderBottom: '17px solid transparent',
-          borderLeft: '17px solid transparent',
-          left: '-17px',
-        }}
-        className="absolute top-0 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>
-  );
-}

package/src/components/CardWithTopImage/CardWithTopImage.stories.tsx

@@ -1,50 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { CardWithTopImage } from '.';
-
-const meta = {
-  title: 'Components/Card With Top Image',
-  component: CardWithTopImage,
-  argTypes: {
-    ...idAndClassName,
-    children: {
-      type: { name: 'other', value: 'string | React.ReactNode' },
-      description: 'The child elements to show in the component',
-      table: {
-        type: {
-          summary: 'Array',
-        },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    imageProps: {
-      type: { name: 'other', value: 'object' },
-      description: 'The props to pass to the image on the component',
-      table: {
-        type: {
-          summary: 'object',
-        },
-        defaultValue: { summary: 'undefined' },
-      }
-    }
-  },
-  args: {
-    imageProps: {
-      src: 'https://picsum.photos/500/300',
-      roundedFull: true,
-      width: 4,
-      height: 4,
-    },
-    children: [
-      <p key="1">This is a child</p>,
-      <p key="2">This is another child</p>,
-    ]
-  }
-};
-
-export default meta;
-
-type Story = StoryObj<typeof CardWithTopImage>;
-
-export const Default: Story = {};

package/src/components/CardWithTopImage/index.tsx

@@ -1,35 +0,0 @@
-import { Image, type Props as imageProps } from '@components/Image';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  children?: any;
-  imageProps?: imageProps;
-}
-
-export const CardWithTopImage = ({
-  id,
-  className,
-  children,
-  imageProps,
-}: Props) => {
-  const src = imageProps?.src !== undefined ? imageProps.src : '';
-  const cardClassList = classNames(className, 'max-w-[500px]');
-  return (
-    <div
-      style={{
-        filter: 'drop-shadow(0 4px 8px rgb(154, 154, 154))',
-      }}
-      id={id}
-      className={cardClassList}
-    >
-      <div className="mx-auto max-w-max rounded-full bg-white p-4">
-        <Image src={src} {...imageProps} />
-      </div>
-      <div className="-mt-12 h-auto bg-white px-4 pb-16 pt-12 text-black">
-        {children}
-      </div>
-    </div>
-  );
-}

package/src/components/Column/Column.stories.tsx

@@ -1,89 +0,0 @@
-import { CardWithTopImage } from '@components/CardWithTopImage';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Column } from '.';
-
-const cardChild = (
-  <CardWithTopImage
-    id="cardwithtopimage"
-    imageProps={{
-      src: 'https://picsum.photos/200/200',
-      roundedFull: true,
-    }}
-  >
-    <p>This is some text</p>
-    <p>This is some more text</p>
-    <p>This is a bit more text</p>
-    <p>
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem odit ad
-      sed, quam recusandae voluptatem provident eveniet beatae omnis vero minus
-      unde facilis. Quia commodi quas odit iusto ut enim!
-    </p>
-  </CardWithTopImage>
-);
-
-const meta = {
-  title: 'Components/Column',
-  component: Column,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    sm: {
-      type: { name: 'number', required: false },
-      description:
-        'The number of sections out of 12 that the component should span on sm screens',
-      table: {
-        type: { summary: 'number' },
-      }
-    },
-    md: {
-      type: { name: 'number', required: false },
-      description:
-        'The number of sections out of 12 that the component should span on md screens',
-      table: {
-        type: { summary: 'number' },
-      }
-    },
-    lg: {
-      type: { name: 'number', required: false },
-      description:
-        'The number of sections out of 12 that the component should span on lg screens',
-      table: {
-        type: { summary: 'number' },
-      }
-    },
-    xl: {
-      type: { name: 'number', required: false },
-      description:
-        'The number of sections out of 12 that the component should span on xl screens',
-      table: {
-        type: { summary: 'number' },
-      }
-    },
-    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: {
-    sm: 12,
-    md: 8,
-    lg: 4,
-    xl: 2,
-    className: 'bg-facebook md:bg-twitter lg-whatsapp xl:bg-linkedin border',
-    children: cardChild,
-  }
-}
-
-export default meta;
-
-type Story = StoryObj<typeof Column>;
-
-export const Default: Story = {};

package/src/components/Column/index.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  sm?: number;
-  md?: number;
-  lg?: number;
-  xl?: number;
-  children?: any;
-}
-export const Column = ({
-  id,
-
-  children,
-}: Props) => {
-  return <div id={id}>{children}</div>;
-}

package/src/components/ComponentWrapper/ComponentWrapper.stories.tsx

@@ -1,40 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { ComponentWrapper } from '.';
-
-const meta = {
-  title: 'Components/ComponentWrapper',
-  component: ComponentWrapper,
-  argTypes: {
-    ...idAndClassName,
-    maxWidth: {
-      type: { name: 'number', required: false },
-      description: 'The number of pixles for the component to span',
-      control: { type: 'number', min: 1, step: 1 },
-      defaultValue: '1200',
-    },
-    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: {
-    title: 'This is a title',
-    description:
-      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis blanditiis cupiditate officiis aperiam culpa unde vitae quaerat, incidunt aliquam ut qui alias accusamus aspernatur in ad voluptatibus itaque, quibusdam distinctio.',
-    children: <p>This is a centered ComponentWrapper with a max width</p>,
-  }
-}
-
-export default meta;
-
-type Story = StoryObj<typeof ComponentWrapper>;
-
-export const Default: Story = {};

package/src/components/ComponentWrapper/index.tsx

@@ -1,48 +0,0 @@
-import { type CSSProperties } from 'react';
-
-import { Container } from '@components/Container';
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  title?: string;
-  description?: string;
-  bgColour?: Colours;
-  children?: any;
-  styles?: CSSProperties;
-  withContainerPadding?: boolean;
-}
-
-export const ComponentWrapper = ({
-  id,
-  className,
-  title,
-  description,
-  bgColour = 'grey',
-  children,
-  styles,
-  withContainerPadding = true,
-}: Props) => {
-  const classList = classNames(className, 'mx-auto w-full');
-  const containerClasses = classNames({
-    'py-8': withContainerPadding,
-  })
-
-  return (
-    <div id={id} className={classList} style={styles}>
-      <Container withPadding className={containerClasses}>
-        <div className="pt-0">
-          {title !== undefined && (
-            <h2 className="pb-2 text-lg font-regular">{title}</h2>
-          )}
-          {description !== undefined && (
-            <p className="pb-8 text-md font-light">{description}</p>
-          )}
-        </div>
-        {children}
-      </Container>
-    </div>
-  );
-}

package/src/components/Container/Container.stories.tsx

@@ -1,40 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Container } from '.';
-
-const meta = {
-  title: 'Components/Container',
-  component: Container,
-  argTypes: {
-    ...idAndClassName,
-    maxWidth: {
-      type: { name: 'number', required: false },
-      description: 'The number of pixles for the component to span',
-      control: { type: 'number', min: 1, step: 1 },
-      defaultValue: '1200',
-    },
-    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: (
-      <div className="w-full border">
-        <p className="my-20 text-center">This is a container</p>
-      </div>
-    ),
-  }
-}
-export default meta;
-
-type Story = StoryObj<typeof Container>;
-
-export const Default: Story = {};