trepur_components 2.3.3 → 2.3.5

package/archive/ProductCardV2/ProductCardV2.stories.tsx

@@ -0,0 +1,50 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import ProductCardV2 from '.';
+
+const meta = {
+  title: 'Components/ProductCardV2',
+  component: ProductCardV2,
+  parameters: {
+    layout: 'padded',
+  },
+  argTypes: {
+    ...idAndClassName,
+    imageProps: {
+      description: '',
+    },
+    title: {
+      description: 'The title to display on the component',
+    },
+    subTitle: {
+      description: 'The subtitle to display on the component',
+    },
+    description: {
+      description: 'The description to display on the component',
+    },
+    href: {
+      description:
+        'The link to send the user to when clicking on the component',
+    },
+  },
+  args: {
+    imageProps: {
+      src: 'https://picsum.photos/500/300',
+    },
+    title: 'Osprey Exos Pro 55',
+    textLineOne: 'Weight: 600 grams',
+    topRightIcon: 'circle-check',
+    bottomRightIcon: {
+      colour: 'black',
+      type: 'edit',
+      size: 2,
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/archive/ProductCardV2/index.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+
+import Counter from '@components/Counter';
+import Icon, { type Props as iconProps } from '@components/Icon';
+import { type Props as imageProps } from '@components/Image';
+import classNames from 'classnames';
+
+
+
+export interface Props {
+  id?: string;
+  className?: string;
+  title?: string;
+  imageProps?: imageProps;
+  topRightIcon?: iconProps;
+  bottomRightIcon?: iconProps;
+  topLeftIcon?: iconProps;
+  bottomLeftIcon?: iconProps;
+  textLineOne?: string;
+  textLineTwo?: string;
+  textLineThree?: string;
+  onClick?: () => void;
+  onCounterClick?: (count: number) => void;
+  count?: number;
+  isSelected?: boolean;
+}
+
+const ProductCardV2: React.FC<Props> = ({
+  id,
+  className,
+  imageProps,
+  title,
+  textLineOne,
+  textLineTwo,
+  textLineThree,
+  topRightIcon,
+  bottomRightIcon,
+  topLeftIcon,
+  bottomLeftIcon,
+  onClick,
+  onCounterClick,
+  count,
+  isSelected = false,
+}: Props): JSX.Element => {
+  return (
+    <div
+      id={id}
+      className={classNames(
+        {
+          [style.cardSelected]: isSelected,
+        },
+        style.card,
+        className,
+        'theme-local',
+      )}
+      onClick={onClick}
+    >
+      <div className={style.imageContainer}>
+        <img className={style.image} {...imageProps} />
+        {topRightIcon && (
+          <Icon
+            {...topRightIcon}
+            className={classNames(topRightIcon.className, style.topRightIcon)}
+          />
+        )}
+        {bottomRightIcon && (
+          <Icon
+            {...bottomRightIcon}
+            colour="success"
+            className={classNames(
+              bottomRightIcon.className,
+              style.bottomRightIcon,
+            )}
+          />
+        )}
+        {topLeftIcon && (
+          <Icon
+            {...topLeftIcon}
+            className={classNames(topLeftIcon.className, style.topLeftIcon)}
+          />
+        )}
+        {bottomLeftIcon && (
+          <Icon
+            {...bottomLeftIcon}
+            colour="success"
+            className={classNames(
+              bottomLeftIcon.className,
+              style.bottomLeftIcon,
+            )}
+          />
+        )}
+        {count && (
+          <div className={classNames(style.counter)}>
+            <Counter
+              count={count}
+              onClick={(newCount: number) => {
+                onCounterClick?.(newCount);
+              }}
+            />
+          </div>
+        )}
+      </div>
+      <div className={style.contentWrapper}>
+        {title !== undefined && <h3 className={style.title}>{title}</h3>}
+        {textLineOne !== undefined && (
+          <h4 className={style.subtitle}>{textLineOne}</h4>
+        )}
+        {textLineTwo !== undefined && (
+          <h4 className={style.subtitle}>{textLineTwo}</h4>
+        )}
+        {textLineThree !== undefined && (
+          <h4 className={style.subtitle}>{textLineThree}</h4>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ProductCardV2;

package/archive/ProductCardV2/style.module.css

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

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

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

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

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

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

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

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

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

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