trepur_components 2.3.8 → 2.3.9

package/src/components/Profile/index.tsx

@@ -1,103 +0,0 @@
-import { 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;
-}
-
-export const Profile = ({
-  id,
-  className,
-  profileLinks,
-  alignment,
-  imageHeight = 0,
-  imageWidth = 0,
-  rounded,
-  bordered,
-  imageProps,
-}: Props) => {
-  const [profileState, setProfileState] = useState(false);
-
-  const profileAlignment = classNames({
-    'float-right': alignment === 'right',
-    'float-left': alignment === 'left',
-  })
-
-  const dropdownAlignement = classNames({
-    '-mr-16 mt-16': alignment === 'right',
-    ' -ml-16 mt-16': alignment === 'left',
-  })
-
-  const dropdownTextAlignement = classNames({
-    'text-center': alignment !== 'right' && alignment !== 'left',
-  })
-
-  const classList = classNames(
-    {
-      'rounded-full': rounded,
-      border: bordered,
-    },
-    className,
-    `h-${imageHeight} w-${imageWidth}`,
-    'object-cover text-center',
-  )
-
-  const src = imageProps?.src !== undefined ? imageProps.src : '';
-  return (
-    <>
-      <div id={id} className={classList}>
-        <div
-          className={classNames(
-            'inset-y-0 hidden  sm:inline-flex',
-            profileAlignment,
-          )}
-        >
-          <button
-            className="flex rounded-full"
-            onClick={() => {
-              setProfileState(!profileState);
-            }}
-          >
-            <Image src={src} {...imageProps} />
-          </button>
-        </div>
-      </div>
-      {profileState && (
-        <div className={dropdownTextAlignement}>
-          <div
-            className={classNames(
-              'z-10 w-48 shadow-lg sm:inline-block',
-              profileAlignment,
-              dropdownAlignement,
-            )}
-          >
-            {profileLinks?.map((link, i) => {
-              return (
-                <a
-                  key={`profile_link_${i + 1}`}
-                  href={link.link}
-                  className="block border-b px-4 py-2 text-sm font-bold"
-                  role="menuitem"
-                  // tabindex="-1"
-                  id={`user-menu-item-${i + 1}`}
-                >
-                  {link.name}
-                </a>
-              );
-            })}
-          </div>
-        </div>
-      )}
-    </>
-  );
-}

package/src/components/Row/Row.stories.tsx

@@ -1,53 +0,0 @@
-import { CardWithTopImage } from '@components/CardWithTopImage';
-import { Meta, type 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 Row>;
-
-export const Default: Story = {};

package/src/components/Row/index.tsx

@@ -1,17 +0,0 @@
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  children: any;
-}
-
-export const Row = ({ id, className, children }: Props) => {
-  const classList = classNames(className, 'flex flex-wrap');
-
-  return (
-    <div id={id} className={classList}>
-      {children}
-    </div>
-  );
-}

package/src/components/SocialBlock/SocialBlock.stories.tsx

@@ -1,58 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { SocialBlock } from '.';
-
-const socialButtons = [
-  { type: 'facebook', href: '/facebook' },
-  { type: 'instagram', href: '/insta' },
-  { type: 'github', href: '/github' },
-]
-
-const meta = {
-  title: 'Components/Social Block',
-  component: SocialBlock,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-
-    withLiveUpdates: {
-      description: '',
-      control: 'boolean',
-      table: { category: '' },
-    },
-    onSave: {
-      type: { name: 'function', required: false },
-      description: 'Fires a function when you click save',
-      action: 'onClick',
-      table: {
-        type: { summary: 'function' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    variant: {
-      type: { name: 'string', required: false },
-      options: ['dark', 'light'],
-      description: 'The variant of button to render',
-      table: { type: { summary: 'dark' }, defaultValue: { summary: 'dark' } },
-      defaultValue: 'dark',
-      control: { type: 'radio' },
-    }
-  },
-  args: {
-    title: 'Why not connect with me on LinkedIn or Facebook?',
-    description: 'Or send me a E-Mail to get in touch',
-    editTitleClasses: 'text-md sm:text-lg ',
-    editTextClasses: '',
-    editInputClasses: 'mt-4 border border-black text-black bg-white',
-    onSave: action('button-save'),
-    withLiveUpdates: true,
-    socialButtons,
-  }
-}
-export default meta;
-
-type Story = StoryObj<typeof SocialBlock>;
-
-export const Default: Story = {};

package/src/components/SocialBlock/index.tsx

@@ -1,59 +0,0 @@
-import { ComponentWrapper } from '@components/ComponentWrapper';
-import { SocialButton } from '@components/SocialButton';
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-export interface SocialBlockProps {
-  id?: string;
-  className?: string;
-  title?: string;
-  description?: string;
-  bgColour?: Colours;
-  socialButtons?: Array<{ type: string }>;
-  variant: 'light' | 'dark';
-}
-
-export const SocialBlock = ({
-  id,
-  className,
-  title,
-  description,
-  bgColour,
-  socialButtons,
-  variant = 'light',
-}: SocialBlockProps) => {
-  const colours =
-    variant === 'dark'
-      ? 'bg-primary text-white placeholder-white'
-      : 'bg-white text-black placeholder-primary';
-  const classList = classNames('w-full', className, colours);
-
-  return (
-    <ComponentWrapper
-      id={id}
-      className={classList}
-      title={title}
-      description={description}
-      bgColour={bgColour}
-    >
-      <div className="flex w-full">
-        <div className="mx-auto inline-block rounded-full px-2">
-          <div className="flex">
-            {socialButtons?.map((button: any, i: number) => {
-              return (
-                button.href !== undefined && (
-                  <SocialButton
-                    key={`socual_button_${i}`}
-                    className="mx-1 my-2"
-                    type={button.type}
-                    href={button.href}
-                  />
-                )
-              );
-            })}
-          </div>
-        </div>
-      </div>
-    </ComponentWrapper>
-  );
-}

package/src/components/StarRating/StarRating.stories.tsx

@@ -1,23 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { StarRating } from '.';
-
-const meta = {
-  title: 'Components/Star Rating',
-  component: StarRating,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-  },
-  args: {
-    stars: 3,
-    size: 2,
-  }
-}
-
-export default meta;
-
-type Story = StoryObj<typeof StarRating>;
-
-export const Default: Story = {};

package/src/components/StarRating/index.tsx

@@ -1,65 +0,0 @@
-import { Icon } from '@components/Icon';
-import { faStar } from '@fortawesome/fontawesome-free-solid';
-import {
-  type IconProp,
-  type SizeProp,
-} from '@fortawesome/fontawesome-svg-core';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  stars?: number;
-  size?: SizeProp;
-}
-
-export const StarRating = ({
-  id,
-  className,
-  stars = 1,
-  size = '2x',
-}: Props) => {
-  const classList = classNames(className, 'flex');
-
-  const getStars = () => {
-    const starsArr = [];
-    for (let i = 0; i < stars; i++) {
-      starsArr.push(
-        <Icon
-          key={`checked_star_${i + 0}`}
-          id={`checked-${i}`}
-          icon={faStar as IconProp}
-          size={size}
-          colour="gold"
-        />,
-      )
-    }
-    return starsArr;
-  }
-
-  const getStarsChecked = () => {
-    const starsArr = [];
-    for (let i = 0; i < 5 - stars; i++) {
-      starsArr.push(
-        <Icon
-          key={`unchecked_star_${i + 0}`}
-          id={`unchecked-${i}`}
-          icon={faStar as IconProp}
-          size={size}
-        />,
-      )
-    }
-    return starsArr;
-  }
-
-  const getAllStars = () => {
-    const starArray = [...getStars(), ...getStarsChecked()];
-    return starArray;
-  }
-
-  return (
-    <div id={id} className={classList}>
-      {getAllStars()}
-    </div>
-  );
-}

package/src/components/TextAndTitle/TextAndTitle.stories.tsx

@@ -1,71 +0,0 @@
-import { Greeting } from '@components/Greeting';
-import { action } from '@storybook/addon-actions';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { TextAndTitle } from '.';
-
-const meta = {
-  title: 'Components/Text And Title',
-  component: TextAndTitle,
-  argTypes: {
-    ...idAndClassName,
-
-    onSave: {
-      type: { name: 'function', required: false },
-      description: 'Fires a function when you click save',
-      action: 'onClick',
-      table: {
-        type: {
-          summary: 'function',
-        },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    bgColour: {
-      type: { name: 'string', required: false },
-      options: ['primary', 'secondary', 'white', 'black', 'gold'],
-      description: 'The background colour of the component',
-      table: {
-        type: { summary: 'string' },
-      },
-      defaultValue: 'primary',
-      control: 'select',
-    }
-  },
-  args: {
-    title: 'This is a title',
-    description: 'what do you recon to this?',
-    children: <p>This is a child</p>,
-    editTitleClasses: 'text-md sm:text-lg ',
-    editTextClasses: 'break-words',
-    editInputClasses: 'border border-black text-black bg-white',
-    textLineOne: (
-      <div>
-        <Greeting />
-        <p>Loremipsumdolorsitamet consectetur adipisicing elit</p>
-      </div>
-    ),
-    textLineTwo:
-      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi impedit sed, quis aspernatur voluptate minima vel placeat ipsa amet voluptatem reprehenderit ullam rem cum tempora explicabo veritatis numquam libero asperiores!',
-    textLineThree:
-      'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur nihil voluptas ipsum labore? Eligendi et ipsam, repellat culpa porro a animi laudantium molestiae provident facere non tempora odit? Perferendis, assumenda.',
-    onSave: action('button-save'),
-    withLiveUpdates: true,
-    isHorizontal: true,
-    saveButtonProps: {
-      className: 'mt-4',
-      children: 'Save',
-    },
-    cancelButtonProps: {
-      className: 'mt-4 ml-4',
-      children: 'Cancel',
-    }
-  }
-};
-
-export default meta;
-
-type Story = StoryObj<typeof TextAndTitle>;
-
-export const Default: Story = {};

package/src/components/TextAndTitle/index.tsx

@@ -1,119 +0,0 @@
-import React, { useState } from 'react';
-
-import { type Props as buttonProps } from '@components/Button';
-import { ComponentWrapper } from '@components/ComponentWrapper';
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-export interface Props {
-  id: string;
-  className?: string;
-  title?: string;
-  description?: string;
-  bgColour?: Colours;
-  titleClasses?: string;
-  textClasses?: string;
-  textLineOne?: string;
-  textLineTwo?: string;
-  textLineThree?: string;
-  titleBold?: boolean;
-  textCenter?: boolean;
-  titleCenter?: boolean;
-  withLiveUpdates?: boolean;
-  onSave?: (arr: any[], id: string | undefined) => void;
-  saveButtonProps?: buttonProps;
-  cancelButtonProps?: buttonProps;
-  isHorizontal?: boolean;
-  children?: any;
-}
-
-export const TextAndTitle = ({
-  id,
-  className,
-  title,
-  description,
-  bgColour,
-  titleClasses,
-  textClasses,
-  textLineOne,
-  textLineTwo,
-  textLineThree,
-  titleBold,
-  textCenter,
-  titleCenter,
-  withLiveUpdates = false,
-  isHorizontal = true,
-  children,
-}: Props) => {
-  const [isInEditingMode, setIsInEditingMode] = useState(false);
-  const borderClasses = 'border-4 border-transparent';
-  const classList = classNames(className);
-
-  const titleClassList = classNames(
-    {
-      'font-bold': titleBold,
-      'text-center': titleCenter,
-      [borderClasses]: withLiveUpdates && !isInEditingMode && isHorizontal,
-    },
-    titleClasses,
-    'break-words text-lg font-light',
-  )
-
-  const textClassList = classNames(
-    {
-      'text-center': textCenter,
-      [borderClasses]: withLiveUpdates && !isInEditingMode && isHorizontal,
-    },
-    textClasses,
-    'mt-2 pt-2 text-md font-light',
-  )
-
-  const toggleEditState = (): void => {
-    withLiveUpdates && setIsInEditingMode(!isInEditingMode);
-  }
-
-  const wrapperClassList = classNames({
-    'flex flex-wrap justify-center md:items-center': isHorizontal,
-    'hover:border-4 hover:border-dashed': withLiveUpdates && !isInEditingMode,
-    'border-4 border-transparent': isHorizontal,
-  })
-
-  const titleWrapperClassList = classNames({
-    'md:w-1/2 md:text-center': isHorizontal,
-  })
-
-  const textWrapperClassList = classNames({
-    'md:w-1/2 md:text-center': isHorizontal,
-  })
-
-  return (
-    <ComponentWrapper
-      id={id}
-      className={classList}
-      title={title}
-      description={description}
-      bgColour={bgColour}
-    >
-      <div className={wrapperClassList} onClick={toggleEditState}>
-        <div className={titleWrapperClassList}>
-          {children !== undefined && children !== null ? (
-                children
-              ) : (
-            <h1 className={titleClassList}>{title}</h1>
-              )}
-        </div>
-        <div className={textWrapperClassList}>
-          <div id="textLineOne" className={textClassList}>
-            {textLineOne}
-          </div>
-          <div id="textLineTwo" className={textClassList}>
-            {textLineTwo}
-          </div>
-          <div id="textLineThree" className={textClassList}>
-            {textLineThree}
-          </div>
-        </div>
-      </div>
-    </ComponentWrapper>
-  );
-}

package/src/components/TimelineV2/TimelineV2.stories.tsx

@@ -1,95 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { TimelineV2 } from '.';
-
-const meta = {
-  title: 'Components/TimelineV2',
-  component: TimelineV2,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-
-    isHorizontal: {
-      description: '',
-      control: 'boolean',
-      table: {
-        category: '',
-      }
-    },
-    useImages: {
-      description: '',
-      control: 'boolean',
-      table: {
-        category: '',
-      }
-    },
-    items: {
-      description: '',
-      control: 'array',
-      table: {
-        category: '',
-      }
-    }
-  },
-  args: {
-    title: 'This is a timeline',
-    description: 'What do you think to it?',
-    items: [
-      {
-        preText:
-          'Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laudantium ratione optio ipsa repellat voluptatum in reiciendis corrupti officiis similique aliquid ex voluptas placeat autem blanditiis doloribus nisi, accusantium hic.',
-        title:
-          'Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laudantium ratione optio ipsa repellat voluptatum in reiciendis corrupti officiis similique aliquid ex voluptas placeat autem blanditiis doloribus nisi, accusantium hic.',
-        subtitle:
-          'Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laudantium ratione optio ipsa repellat voluptatum in reiciendis corrupti officiis similique aliquid ex voluptas placeat autem blanditiis doloribus nisi, accusantium hic.',
-        imageProps: {
-          src: 'https://picsum.photos/101/100',
-        },
-        children:
-          'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam culpa dolores animi voluptatum dolore ducimus illum ad magni iste adipisci, officiis, pariatur architecto tenetur cupiditate rem minima itaque nostrum voluptate.',
-      },
-      {
-        title: 'Title 2',
-        subtitle: 'Subtitle 2',
-        imageProps: {
-          src: 'https://picsum.photos/100/101',
-        },
-        children:
-          'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam culpa dolores animi voluptatum dolore ducimus illum ad magni iste adipisci, officiis, pariatur architecto tenetur cupiditate rem minima itaque nostrum voluptate.',
-      },
-      {
-        title: 'Title 3',
-        subtitle: 'Subtitle 3',
-        imageProps: {
-          src: 'https://picsum.photos/102/100',
-        },
-        children:
-          'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam culpa dolores animi voluptatum dolore ducimus illum ad magni iste adipisci, officiis, pariatur architecto tenetur cupiditate rem minima itaque nostrum voluptate.',
-      },
-      {
-        title: 'Title 4',
-        subtitle: 'Subtitle 4',
-        imageProps: {
-          src: 'https://picsum.photos/100/102',
-        },
-        children:
-          'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam culpa dolores animi voluptatum dolore ducimus illum ad magni iste adipisci, officiis, pariatur architecto tenetur cupiditate rem minima itaque nostrum voluptate.',
-      },
-      {
-        title: 'Title 5',
-        subtitle: 'Subtitle 5',
-        imageProps: {
-          src: 'https://picsum.photos/102/101',
-        },
-        children:
-          'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam culpa dolores animi voluptatum dolore ducimus illum ad magni iste adipisci, officiis, pariatur architecto tenetur cupiditate rem minima itaque nostrum voluptate.',
-      }
-    ]
-  },
-}
-export default meta;
-
-type Story = StoryObj<typeof TimelineV2>;
-
-export const Default: Story = {};