trepur_components 2.3.7 → 2.3.9

package/archive/ProductCardV2/style.module.css

@@ -1,59 +0,0 @@
-.card {
-  max-width: 600px;
-  @apply scale-100 transform cursor-pointer duration-300;
-}
-
-.card:hover {
-  @apply scale-105 transform duration-300;
-}
-
-.cardSelected {
-  @apply rounded-lg border-2 border-border-light p-2;
-}
-
-.image {
-  @apply w-full rounded-xl;
-  @apply object-cover;
-  @apply bg-white;
-  aspect-ratio: 1 / 1;
-}
-
-.imageContainer {
-  @apply relative;
-}
-
-.contentWrapper {
-  @apply mt-4;
-}
-
-.title {
-  @apply text-md font-light text-ink;
-}
-
-.subtitle {
-  @apply text-sm font-extraLight text-border-dark;
-}
-
-.description {
-  @apply pb-6 text-sm font-light;
-}
-
-.topRightIcon {
-  @apply absolute right-4 top-4 cursor-pointer;
-}
-
-.topLeftIcon {
-  @apply absolute left-4 top-4 cursor-pointer;
-}
-
-.bottomRightIcon {
-  @apply absolute bottom-4 right-4 cursor-pointer;
-}
-
-.bottomLeftIcon {
-  @apply absolute bottom-4 left-4 cursor-pointer;
-}
-
-.counter {
-  @apply absolute bottom-4 left-4 cursor-pointer;
-}

package/archive/Proficiencies/Proficiencies.stories.tsx

@@ -1,50 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import Proficiencies from '.';
-
-const meta = {
-  title: 'Components/Proficiencies',
-  component: Proficiencies,
-  argTypes: {
-    ...idAndClassName,
-  },
-  args: {
-    title: 'Proficiencies',
-    proficiencies: [
-      { src: 'https://picsum.photos/200/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/200/201', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/200/202', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/200/203', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/200/204', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/200/205', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/200/206', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/200/207', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/200/208', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/200/209', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/201/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/202/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/203/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/204/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/205/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/206/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/207/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/208/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/209/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/201/201', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/201/202', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/201/203', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/201/204', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/201/205', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/201/205', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/201/206', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/201/207', overlayText: 'Logo' },
-    ],
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/Proficiencies/index.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-
-import Column from '@components/Column';
-import ComponentWrapper from '@components/ComponentWrapper';
-import Image, { type Props as imageProps } from '@components/Image';
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id?: string;
-  className?: string;
-  title?: string;
-  description?: string;
-  proficiencies: imageProps[];
-  bgColour: Colours;
-}
-
-const Proficiencies = ({
-  id,
-  className,
-  title,
-  description,
-  proficiencies,
-  bgColour,
-}: Props): JSX.Element => {
-  const classList = classNames(className, style.classList, 'theme-local');
-
-  return (
-    <ComponentWrapper
-      id={id}
-      className={classList}
-      title={title}
-      description={description}
-      bgColour={bgColour}
-    >
-      <div className={style.columnWrapper}>
-        {proficiencies.map((proficiency, i) => {
-          return (
-            <Column
-              key={`stat_${i}`}
-              className={style.column}
-              lg={2}
-              md={2}
-              sm={4}
-            >
-              <Image
-                className={style.image}
-                src={proficiency.src}
-                overlayText={proficiency.overlayText}
-                width={4}
-                height={4}
-              />
-            </Column>
-          );
-        })}
-      </div>
-    </ComponentWrapper>
-  );
-};
-
-export default Proficiencies;

package/archive/Proficiencies/style.module.css

@@ -1,31 +0,0 @@
-.classList {
-  @apply mx-auto w-full;
-}
-
-.container {
-  @apply py-8;
-}
-
-.heading {
-  @apply pt-0;
-}
-
-.title {
-  @apply pb-2 text-md font-medium text-grey;
-}
-
-.description {
-  @apply pb-8 text-sm font-medium text-grey;
-}
-
-.columnWrapper {
-  @apply flex flex-wrap;
-}
-
-.column {
-  @apply pb-4;
-}
-
-.image {
-  @apply mx-auto md:mx-0;
-}

package/archive/Profile/Profile.stories.tsx

@@ -1,49 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import Profile from '.';
-
-const meta = {
-  title: 'Components/Profile',
-  component: Profile,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    imageProps: {
-      type: { name: 'other', value: 'object' },
-      description: 'The props to pass to the image to display on the component',
-      table: {
-        type: {
-          summary: 'object',
-        },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    alignment: {
-      description: '',
-      control: 'select',
-      options: ['left', 'center', 'right'],
-      table: {
-        category: '',
-      },
-    },
-    profileLinks: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      },
-    },
-  },
-  args: {
-    imageProps: {
-      src: 'https://picsum.photos/200/200',
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/Profile/index.tsx

@@ -1,103 +0,0 @@
-import React, { useState } from 'react';
-
-import Image, { type Props as imageProps } from '@components/Image';
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id?: string;
-  className?: string;
-  profileLinks?: Array<{ name: string; link: string }>;
-  alignment?: 'left' | 'right';
-  imageHeight?: number;
-  imageWidth?: number;
-  rounded?: boolean;
-  bordered?: boolean;
-  imageProps?: imageProps;
-}
-
-const Profile = ({
-  id,
-  className,
-  profileLinks,
-  alignment,
-  imageHeight = 0,
-  imageWidth = 0,
-  rounded,
-  bordered,
-  imageProps,
-}: Props): JSX.Element => {
-  const [profileState, setProfileState] = useState(false);
-
-  const profileAlignment = classNames({
-    [style.floatRight]: alignment === 'right',
-    [style.floatLeft]: alignment === 'left',
-  });
-
-  const dropdownAlignement = classNames({
-    [style.dropdownRight]: alignment === 'right',
-    [style.dropdownLeft]: alignment === 'left',
-  });
-
-  const dropdownTextAlignement = classNames({
-    [style.center]: alignment !== 'right' && alignment !== 'left',
-  });
-
-  const classList = classNames(
-    {
-      [style.rounded]: rounded,
-      [style.bordered]: bordered,
-    },
-    className,
-    style.classList,
-    `h-${imageHeight} w-${imageWidth}`,
-    'theme-local',
-  );
-
-  const src = imageProps?.src !== undefined ? imageProps.src : '';
-  return (
-    <>
-      <div id={id} className={classList}>
-        <div className={classNames(style.buttonWrapper, profileAlignment)}>
-          <button
-            className={style.buttonClassList}
-            onClick={() => {
-              setProfileState(!profileState);
-            }}
-          >
-            <Image src={src} {...imageProps} />
-          </button>
-        </div>
-      </div>
-      {profileState && (
-        <div className={dropdownTextAlignement}>
-          <div
-            className={classNames(
-              style.linksWrapper,
-              profileAlignment,
-              dropdownAlignement,
-            )}
-          >
-            {profileLinks?.map((link, i) => {
-              return (
-                <a
-                  key={`profile_link_${i + 1}`}
-                  href={link.link}
-                  className={style.linkClassList}
-                  role="menuitem"
-                  // tabindex="-1"
-                  id={`user-menu-item-${i + 1}`}
-                >
-                  {link.name}
-                </a>
-              );
-            })}
-          </div>
-        </div>
-      )}
-    </>
-  );
-};
-
-export default Profile;

package/archive/Profile/style.module.css

@@ -1,47 +0,0 @@
-.classList {
-  @apply object-cover text-center;
-}
-
-.floatRight {
-  @apply float-right;
-}
-
-.floatLeft {
-  @apply float-left;
-}
-
-.dropdownRight {
-  @apply -mr-16 mt-16;
-}
-
-.dropdownLeft {
-  @apply -ml-16 mt-16;
-}
-
-.center {
-  @apply text-center;
-}
-
-.rouned {
-  @apply rounded-full;
-}
-
-.bordered {
-  @apply border;
-}
-
-.buttonClassList {
-  @apply flex rounded-full;
-}
-
-.linksWrapper {
-  @apply z-10 w-48 shadow-lg sm:inline-block;
-}
-
-.linkClassList {
-  @apply block border-b px-4 py-2 text-sm font-bold;
-}
-
-.buttonWrapper {
-  @apply inset-y-0 hidden  sm:inline-flex;
-}

package/archive/Row/Row.stories.tsx

@@ -1,53 +0,0 @@
-import CardWithTopImage from '@components/CardWithTopImage';
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import Row from '.';
-
-const cardChild = (
-  <CardWithTopImage
-    imageProps={{
-      src: 'https://picsum.photos/200/200',
-      rounded: true,
-      height: 4,
-      width: 4,
-      roundedFull: true,
-    }}
-    className="w-1/3"
-  >
-    <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/Row',
-  component: Row,
-  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' },
-      },
-    },
-  },
-  args: {
-    children: cardChild,
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/Row/index.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id?: string;
-  className?: string;
-  children: any;
-}
-
-const Row = ({ id, className, children }: Props): JSX.Element => {
-  const classList = classNames(className, style.classList, 'theme-local');
-
-  return (
-    <div id={id} className={classList}>
-      {children}
-    </div>
-  );
-};
-
-export default Row;

package/archive/Row/style.module.css

@@ -1,3 +0,0 @@
-.classList {
-  @apply flex flex-wrap;
-}

package/archive/Search/style.module.css

@@ -1,23 +0,0 @@
-.classList {
-  @apply flex;
-}
-
-.inputClassList {
-  @apply w-full rounded-md border-2 py-2 pr-9;
-}
-
-.leftIcon {
-  @apply pl-9;
-}
-
-.noLeftIcon {
-  @apply pl-2;
-}
-
-.text {
-  @apply py-2 pr-4;
-}
-
-.inputWrapper {
-  @apply relative flex w-full;
-}

package/archive/Select/style.module.css

@@ -1,52 +0,0 @@
-.classList {
-  @apply w-full rounded-xl bg-white;
-  @apply shadow drop-shadow;
-  @apply flex cursor-pointer flex-row justify-between px-4;
-}
-
-.fullWidth {
-  @apply w-full;
-}
-
-.notFullWidth {
-  @apply sm:w-72;
-}
-
-.labelContainer {
-  @apply flex flex-col;
-}
-
-.labelWrapper {
-  @apply absolute mt-2 flex bg-white text-xs font-thin;
-}
-
-.required {
-  @apply font-semiBold text-error;
-}
-
-.value {
-  @apply rounded-xl border-ink bg-white pb-1 pt-6 text-ink;
-  @apply flex justify-between;
-}
-
-.icon {
-  @apply my-auto;
-}
-
-.dropdownWrapper {
-  @apply relative z-20;
-}
-
-.optionList {
-  @apply absolute w-full bg-white;
-  @apply mt-2 rounded-2xl py-4;
-  @apply shadow-xl;
-  @apply border border-lightest-grey;
-  @apply h-64 overflow-scroll;
-}
-
-.option {
-  @apply bg-white text-ink hover:bg-lightest-grey;
-  @apply hover:cursor-pointer;
-  @apply px-4 py-2;
-}

package/archive/Showcase/index.tsx

@@ -1,75 +0,0 @@
-import React from 'react';
-
-import Avatar from '@components/Avatar';
-import ComponentWrapper from '@components/ComponentWrapper';
-import Container from '@components/Container';
-import Icon, { type Props as iconProps } from '@components/Icon';
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id: string;
-  className?: string;
-  title: string;
-  subTitle: string;
-  description: string;
-  bgColour?: Colours;
-  image: string;
-
-  size?: 'small' | 'medium' | 'large';
-  iconProps?: iconProps;
-}
-
-const Showcase: React.FC<Props> = ({
-  id,
-  className,
-  title,
-  subTitle,
-  description,
-  bgColour,
-  size = 'large',
-
-  iconProps,
-}: Props): JSX.Element => {
-  const classList = classNames(className, 'theme-local');
-
-  const containerSize = classNames(
-    {
-      [style.smallContainer]: size === 'small',
-      [style.mediumContainer]: size === 'medium',
-      [style.largeContainer]: size === 'large',
-    },
-    style.container,
-  );
-
-  return (
-    <ComponentWrapper id={id} className={classList} bgColour={bgColour}>
-      <Container className={containerSize}>
-        <div className={style.textWrapper}>
-          <h2 className={style.title}>{title}</h2>
-          <h2 className={style.subTitle}>{subTitle}</h2>
-          <p className={style.description}>{description}</p>
-        </div>
-        <div className={style.avatarWrapper}>
-          <Avatar />
-        </div>
-      </Container>
-      {iconProps?.type !== undefined && (
-        <div className={style.iconWrapper}>
-          <Icon
-            className={style.icon}
-            size={2}
-            rounded
-            {...iconProps}
-            type={iconProps.type}
-            onClick={iconProps.onClick}
-          />
-        </div>
-      )}
-    </ComponentWrapper>
-  );
-};
-
-export default Showcase;

package/archive/Showcase/style.module.css

@@ -1,47 +0,0 @@
-.container {
-  @apply flex flex-wrap text-center md:flex-nowrap md:text-left;
-}
-
-.smallContainer {
-  @apply h-56;
-}
-
-.mediumContainer {
-  @apply h-96;
-}
-
-.largeContainer {
-  @apply min-h-[calc(100vh-176px)];
-}
-
-.textWrapper {
-  @apply m-auto w-full md:w-2/3 md:pl-16 md:pr-4 lg:pl-32 lg:pr-8 xl:pl-64;
-}
-
-.title {
-  @apply text-lg font-bold leading-tight text-primary md:text-xxl;
-}
-
-.subTitle {
-  @apply text-lg font-bold leading-tight text-black md:text-xxl;
-}
-
-.description {
-  @apply pt-4 text-sm text-black md:text-md;
-}
-
-.avatarWrapper {
-  @apply m-auto flex w-full justify-center md:w-1/3 md:pb-20;
-}
-
-.avatar {
-  @apply max-h-96 md:m-auto md:w-full;
-}
-
-.iconWrapper {
-  @apply w-full;
-}
-
-.icon {
-  @apply mx-auto hover:scale-125 hover:cursor-pointer;
-}