trepur_components 2.3.8 → 2.3.9

package/src/components/Calendar/Calendar.stories.tsx

@@ -1,82 +1,21 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { CalendarComponent } from '.';
+import { CalendarComponent } from './';
+import { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
-  title: 'Components/Calendar',
+  title: 'V2Components/Calendar',
   component: CalendarComponent,
-  argTypes: {
-    ...idAndClassName,
-
-    useRange: {
-      type: { name: 'boolean', required: false },
-      description: 'Toggles the ability to select a range of dates',
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-      defaultValue: 'false',
-    },
-    showDoubleView: {
-      type: { name: 'boolean', required: false },
-      description: 'Toggles the 2 month mode',
-      table: {
-        defaultValue: { summary: 'true' },
-      },
-      defaultValue: 'true',
-    },
-    showNavigation: {
-      type: { name: 'boolean', required: false },
-      description: 'Toggles the navigation at the top of the calendar',
-      table: {
-        defaultValue: { summary: 'true' },
-      },
-      defaultValue: 'true',
-    },
-    minDetail: {
-      type: { name: 'string', required: false },
-      description: 'The detail in whuch you with the calendar to show',
-      table: {
-        defaultValue: { summary: 'month' },
-      },
-      defaultValue: 'month',
-    },
-    minDate: {
-      type: { name: 'date', required: false },
-      description: 'The minimum date to show as available on the calendar',
-      table: {
-        defaultValue: { summary: new Date() },
-      },
-      defaultValue: new Date(),
-    },
-    maxDate: {
-      type: { name: 'date', required: false },
-      description: 'The maximum date to show as available on the calendar',
-      table: {
-        defaultValue: {
-          summary: new Date(
-            new Date().setFullYear(new Date().getFullYear() + 1),
-          )
-        }
-      },
-      defaultValue: new Date(
-        new Date().setFullYear(new Date().getFullYear() + 1),
-      )
-    },
-    disabledDates: {
-      type: { name: 'array', required: false },
-      description: 'An array of dates as strings to grey out on the component',
-      table: {
-        defaultValue: { summary: [] },
-      },
-      defaultValue: [],
-    }
-  },
-  args: {},
-}
+} satisfies Meta<typeof CalendarComponent>;
 
 export default meta;
 
 type Story = StoryObj<typeof CalendarComponent>;
 
 export const Default: Story = {};
+
+export const ShowDoubleView: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    showDoubleView: true,
+  },
+};

package/src/components/Calendar/index.tsx

@@ -1,14 +1,12 @@
-import React, { useState } from 'react';
+import { forwardRef, HTMLAttributes, 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;
+
+export interface CalendarProps {
   onChange?: () => void;
   useRange?: boolean;
   minDetail?: Detail;
@@ -19,33 +17,49 @@ export interface Props {
   showDoubleView?: boolean;
 }
 
-export const CalendarComponent = ({
-  id,
-  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) => {
-  const [today, setToday] = useState(new Date());
+interface Tile {
+  activeStartDate: Date;
+  date: Date;
+  view: string;
+}
+
+const CalendarComp = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & CalendarProps
+>(
+  (
+    {
+      onChange,
+      useRange,
+      minDetail,
+      minDate,
+      maxDate,
+      showNavigation,
+      disabledDates,
+      showDoubleView,
+    },
+    ref,
+  ) => {
+    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);
+    const calculateDisabledDates = (
+      date: Tile,
+      disabledDates?: string[],
+    ): boolean => {
+      const formattedDate = new Intl.DateTimeFormat('en-gb', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+      }).format(date?.date);
 
-    return disabledDates.includes(formattedDate);
-  }
+      if (!disabledDates) return false;
 
-  return (
-    <div id={id} className={className}>
+      return disabledDates.includes(formattedDate);
+    };
+
+    return (
       <Calendar
+        ref={ref}
         onActiveStartDateChange={({ value, activeStartDate, action }) => {
           const toFormat = activeStartDate !== null ? activeStartDate : today;
           if (action === 'next') {
@@ -63,10 +77,16 @@ export const CalendarComponent = ({
         maxDate={maxDate}
         showNavigation={showNavigation}
         showDoubleView={showDoubleView}
-        tileDisabled={(date: any) =>
-          calculateDisabledDates(date, disabledDates)
-        }
+        tileDisabled={(date: Tile) => {
+          return calculateDisabledDates(date, disabledDates);
+        }}
       />
-    </div>
-  );
-}
+    );
+  },
+);
+
+CalendarComp.displayName = 'Calendar';
+
+const CalendarComponent = Object.assign(CalendarComp);
+
+export { CalendarComponent };

package/src/components/Card/Card.stories.tsx

@@ -1,73 +1,12 @@
-import { type Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { Card } from '.';
 
 const meta = {
-  title: 'Components/Card',
+  title: 'V2Components/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,
-    }
-  }
+  args: {},
 } satisfies Meta<typeof Card>;
-
 export default meta;
 
 type Story = StoryObj<typeof Card>;

package/src/components/Card/index.tsx

@@ -1,96 +1,39 @@
-import React from 'react';
+import { forwardRef, HTMLAttributes } 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 clsx from 'clsx';
 
 interface AnchorAttributes
-  extends Partial<
-    Pick<JSX.IntrinsicElements['a'], 'href' | 'title' | 'target'>
-  > {}
+  extends Partial<Pick<JSX.IntrinsicElements['a'], 'href' | 'target'>> {}
 
-export interface Props {
-  id?: string;
-  className?: string;
-  title?: string;
-  imageProps?: imageProps;
-  videoProps?: videoProps;
-  subTitle?: string;
-  description?: string;
-  href?: string;
-  target?: string;
-  buttonProps?: buttonProps;
-}
-
-export const Card = ({
-  id,
-  className,
-  imageProps,
-  videoProps,
-  title,
-  subTitle,
-  description,
-  href,
-  target,
-  buttonProps,
-}: Props) => {
+const CardComponent = forwardRef<
+  HTMLAnchorElement,
+  HTMLAttributes<HTMLDivElement> & { href: string; target: string }
+>(({ className, href, target, children, ...props }, ref) => {
   let Tag: keyof Pick<JSX.IntrinsicElements, 'a' | 'div'> = 'div';
   let attributes: AnchorAttributes = {};
 
   if (Boolean(href) || Boolean(target)) {
     Tag = 'a';
-    attributes = { href, title, target };
+    attributes = { href, target, ...props };
   }
-
-  const shouldDisplayButton =
-    buttonProps?.children !== undefined &&
-    (buttonProps.href !== undefined || buttonProps.onClick !== undefined) &&
-    Tag === 'div';
-
   return (
     <Tag
-      id={id}
-      className={`${className} flex max-w-96 flex-col overflow-hidden rounded-lg shadow-xl`}
+      className={clsx(
+        'grid grid-cols-1 rounded-xl bg-white p-4 drop-shadow',
+        {
+          'hover:cursor-pointer': href,
+        },
+        className,
+      )}
       {...attributes}
     >
-      <div>
-        {videoProps?.mp4File !== undefined ||
-        videoProps?.webmFile !== undefined ||
-        videoProps?.ogvFile !== undefined ? (
-          <Video {...videoProps} />
-        ) : (
-          imageProps !== undefined && (
-            <img
-              className="w-full"
-              title={`${title?.replace(/\s/g, '-') ?? 'a'}-logo`}
-              alt={
-                title !== undefined
-                  ? `${title?.replace(/\s/g, '-')}-image`
-                  : 'image'
-              }
-              {...imageProps}
-            />
-          )
-        )}
-      </div>
-      <div className="p-2">
-        <div>
-          {title !== undefined && (
-            <h3 className="text-md font-regular">{title}</h3>
-          )}
-          {subTitle !== undefined && (
-            <h4 className="text-sm font-regular text-ink">{subTitle}</h4>
-          )}
-        </div>
-        <div>
-          {description !== undefined && (
-            <p className="flex-1 pb-6 text-sm font-light">{description}</p>
-          )}
-          {shouldDisplayButton && (
-            <Button {...buttonProps}>{buttonProps?.children}</Button>
-          )}
-        </div>
-      </div>
+      {children}
     </Tag>
   );
-}
+});
+
+CardComponent.displayName = 'Card';
+
+const Card = Object.assign(CardComponent);
+
+export { Card };