trepur_components 2.3.7 → 2.3.9

package/archive/Calendar/index.tsx

@@ -1,76 +0,0 @@
-import React, { useState } from 'react';
-
-import classNames from 'classnames';
-import Calendar from 'react-calendar';
-
-import './style.css';
-
-export type Detail = 'month' | 'year' | 'decade' | 'century';
-export interface Props {
-  id?: string;
-  className?: string;
-
-  onChange?: () => void;
-  useRange?: boolean;
-  minDetail?: Detail;
-  minDate?: Date;
-  maxDate?: Date;
-  showNavigation?: true;
-  disabledDates?: string[];
-  showDoubleView?: boolean;
-}
-
-const CalendarComponent: React.FC<Props> = ({
-  id = 'sdfghj',
-  className,
-  onChange,
-
-  useRange = false,
-  minDetail = 'month',
-  minDate = new Date(),
-  maxDate = new Date(new Date().setFullYear(new Date().getFullYear() + 1)),
-  showNavigation = true,
-  disabledDates = [],
-  showDoubleView = true,
-}: Props): JSX.Element => {
-  const [today, setToday] = useState(new Date());
-
-  const calculateDisabledDates = (date: any, disabledDates: any): boolean => {
-    const formattedDate = new Intl.DateTimeFormat('en-gb', {
-      year: 'numeric',
-      month: '2-digit',
-      day: '2-digit',
-    }).format(date?.date);
-
-    return disabledDates.includes(formattedDate);
-  };
-
-  return (
-    <div id={id} className={classNames(className, 'theme-local')}>
-      <Calendar
-        onActiveStartDateChange={({ value, activeStartDate, action }) => {
-          const toFormat = activeStartDate !== null ? activeStartDate : today;
-          if (action === 'next') {
-            setToday(new Date(toFormat));
-          }
-          if (action === 'prev') {
-            setToday(new Date(toFormat));
-          }
-        }}
-        activeStartDate={today}
-        onChange={onChange}
-        selectRange={useRange}
-        minDetail={minDetail}
-        minDate={minDate}
-        maxDate={maxDate}
-        showNavigation={showNavigation}
-        showDoubleView={showDoubleView}
-        tileDisabled={(date: any) =>
-          calculateDisabledDates(date, disabledDates)
-        }
-      />
-    </div>
-  );
-};
-
-export default CalendarComponent;

package/archive/Card/Card.stories.tsx

@@ -1,75 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import Card from '.';
-
-const meta = {
-  title: 'Components/Card',
-  component: Card,
-  argTypes: {
-    ...idAndClassName,
-    imageProps: {
-      description: '',
-      table: {},
-    },
-    videoProps: {
-      description: '',
-      table: {},
-    },
-    title: {
-      description: 'The title to display on the component',
-      table: {},
-    },
-    subTitle: {
-      description: 'The subtitle to display on the component',
-      table: {},
-    },
-    description: {
-      description: 'The description to display on the component',
-      table: {},
-    },
-    href: {
-      description:
-        'The link to send the user to when clicking on the component',
-      table: {},
-    },
-    target: {
-      type: { name: 'string', required: false },
-      options: ['_blank', '_self'],
-      description: '',
-      table: {
-        type: { summary: '_blank' },
-        defaultValue: { summary: '_blank' },
-      },
-      defaultValue: '_blank',
-      control: { type: 'radio' },
-    },
-    buttonProps: {
-      description: '',
-      table: {},
-    },
-  },
-  args: {
-    imageProps: {
-      src: 'https://picsum.photos/500/300',
-    },
-    title: 'This is a title',
-    subTitle: 'This is a subtitle',
-    description:
-      'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga excepturi itaque in. Debitis et velit explicabo id quo repellendus architecto hic quis repellat corporis cumque dolorem officiis animi, dicta praesentium.',
-    href: '/',
-    buttonProps: {
-      children: 'Button Text',
-      disabled: false,
-      hoverText: 'buttonHoverText',
-      href: '/',
-      rounded: true,
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/Card/index.tsx

@@ -1,102 +0,0 @@
-import React from 'react';
-
-import Button, { type Props as buttonProps } from '@components/Button';
-import { type Props as imageProps } from '@components/Image';
-import Video, { type Props as videoProps } from '@components/Video';
-import classNames from 'classnames';
-
-
-
-interface AnchorAttributes
-  extends Partial<
-    Pick<JSX.IntrinsicElements['a'], 'href' | 'title' | 'target'>
-  > {}
-
-export interface Props {
-  id?: string;
-  className?: string;
-  title?: string;
-  imageProps?: imageProps;
-  videoProps?: videoProps;
-  subTitle?: string;
-  description?: string;
-  href?: string;
-  target?: string;
-  buttonProps?: buttonProps;
-}
-
-const Card: React.FC<Props> = ({
-  id,
-  className,
-  imageProps,
-  videoProps,
-  title,
-  subTitle,
-  description,
-  href,
-  target,
-  buttonProps,
-}: Props): JSX.Element => {
-  const cardTitleClasses = classNames(style.title);
-  const cardSubTitleClassList = classNames(style.subtitle);
-  const cardDescriptionClassList = classNames(style.description);
-  const classList = classNames(className, style.classList, 'theme-local');
-  const imageClassList = classNames(style.imageClassList);
-  let Tag: keyof Pick<JSX.IntrinsicElements, 'a' | 'div'> = 'div';
-  let attributes: AnchorAttributes = {};
-
-  if (Boolean(href) || Boolean(target)) {
-    Tag = 'a';
-    attributes = { href, title, target };
-  }
-
-  const shouldDisplayButton =
-    buttonProps?.children !== undefined &&
-    (buttonProps.href !== undefined || buttonProps.onClick !== undefined) &&
-    Tag === 'div';
-
-  return (
-    <Tag id={id} className={classList} {...attributes}>
-      <div>
-        {videoProps?.mp4File !== undefined ||
-        videoProps?.webmFile !== undefined ||
-        videoProps?.ogvFile !== undefined ? (
-          <Video {...videoProps} />
-        ) : (
-          imageProps !== undefined && (
-            <img
-              className={imageClassList}
-              title={`${title?.replace(/\s/g, '-') ?? 'a'}-logo`}
-              alt={
-                title !== undefined
-                  ? `${title?.replace(/\s/g, '-')}-image`
-                  : 'image'
-              }
-              {...imageProps}
-            />
-          )
-        )}
-      </div>
-      <div className={style.contentWrapper}>
-        <div className={style.movingContent}>
-          {title !== undefined && <h3 className={cardTitleClasses}>{title}</h3>}
-          {subTitle !== undefined && (
-            <h4 className={cardSubTitleClassList}>{subTitle}</h4>
-          )}
-        </div>
-        <div className={style.staticContent}>
-          {description !== undefined && (
-            <p className={cardDescriptionClassList}>{description}</p>
-          )}
-          {shouldDisplayButton && (
-            <Button className={style.buttonClassList} {...buttonProps}>
-              {buttonProps?.children}
-            </Button>
-          )}
-        </div>
-      </div>
-    </Tag>
-  );
-};
-
-export default Card;

package/archive/Card/style.module.css

@@ -1,75 +0,0 @@
-.classList {
-  @apply flex flex-col;
-  @apply rounded-lg;
-  @apply shadow-xl;
-}
-
-a .classList:hover {
-  @apply cursor-pointer;
-}
-
-.classList:hover .movingContent {
-  @apply -mt-8;
-  @apply transition-all duration-300;
-}
-
-.classList:hover .staticContent {
-  @apply mt-8;
-  @apply transition-all duration-300;
-}
-
-.classList:focus {
-  @apply border-2 border-primary;
-  border-radius: 10px;
-}
-
-.classList:focus .movingContent {
-  @apply -mt-8;
-  @apply transition-all duration-300;
-}
-
-.classList:focus .staticContent {
-  @apply mt-8;
-  @apply transition-all duration-300;
-}
-
-.imageClassList {
-  @apply h-full w-full object-cover;
-  @apply h-64 overflow-hidden object-cover;
-  @apply rounded-t-lg;
-  height: 256px;
-}
-
-.contentWrapper {
-  @apply flex flex-col items-stretch justify-between;
-  height: calc(100% - 256px);
-}
-
-.movingContent {
-  @apply bg-white;
-  @apply mt-0 px-6 pt-6;
-  @apply rounded-b-lg;
-  @apply transition-all duration-300;
-}
-
-.staticContent {
-  @apply h-full p-6;
-  @apply transition-all duration-300;
-  @apply flex flex-col items-stretch justify-between;
-}
-
-.title {
-  @apply text-md font-regular;
-}
-
-.subtitle {
-  @apply text-sm font-regular text-ink;
-}
-
-.description {
-  @apply flex-1 pb-6 text-sm font-light;
-}
-
-.buttonClassList {
-  @apply w-full;
-}

package/archive/CardWithTopImage/CardWithTopImage.stories.tsx

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

package/archive/CardWithTopImage/index.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-
-import Image, { type Props as imageProps } from '@components/Image';
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id?: string;
-  className?: string;
-  children?: any;
-  imageProps?: imageProps;
-}
-
-const CardWithTopImage = ({
-  id,
-  className,
-  children,
-  imageProps,
-}: Props): JSX.Element => {
-  const src = imageProps?.src !== undefined ? imageProps.src : '';
-  const cardClassList = classNames(className, style.cardClasses, 'theme-local');
-  return (
-    <div
-      style={{
-        filter: 'drop-shadow(0 4px 8px rgb(154, 154, 154))',
-      }}
-      id={id}
-      className={cardClassList}
-    >
-      <div className={style.wrapperClassList}>
-        <Image src={src} {...imageProps} />
-      </div>
-      <div className={style.contentClassList}>{children}</div>
-    </div>
-  );
-};
-
-export default CardWithTopImage;

package/archive/CardWithTopImage/style.module.css

@@ -1,11 +0,0 @@
-.cardClasses {
-  max-width: 500px;
-}
-
-.wrapperClassList {
-  @apply mx-auto max-w-max rounded-full bg-white p-4;
-}
-
-.contentClassList {
-  @apply -mt-12 h-auto bg-white px-4 pb-16 pt-12 text-black;
-}