trepur_components 2.3.8 → 2.3.9

package/src/components/Footer/Footer.stories.tsx

@@ -1,57 +1,45 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Footer } from '.';
+import { Footer } from './';
+import { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
-  title: 'Components/Footer',
+  title: 'V2Components/Footer',
   component: Footer,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    text: {
-      type: { name: 'string', required: false },
-      description: 'The text to show on the component',
-      table: {
-        type: { summary: 'default' },
-      },
-      defaultValue: { summary: 'undefined' },
-    },
-    buttonProps: {
-      type: { name: 'other', value: 'object' },
-      description:
-        'The props to pass to the button to display on the component',
-      table: {
-        type: {
-          summary: 'object',
-        },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    variant: {
-      type: { name: 'string', required: false },
-      options: ['dark', 'light'],
-      description: 'The variant of button to render',
-      table: {
-        type: { summary: 'light' },
-        defaultValue: { summary: 'light' },
-      },
-      defaultValue: 'light',
-      control: { type: 'radio' },
-    }
-  },
   args: {
-    text: 'Copyright All rights reserved',
-    variant: 'dark',
-    buttonProps: {
-      children: 'Admin Panel',
-      onClick: action('button clicked'),
-      href: '/',
-      target: '_blank',
-    }
-  }
-};
+    children: [
+      <Footer.Section>
+        <Footer.Column>
+          <Footer.Title>Title</Footer.Title>
+          <Footer.Text>
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure hic
+            itaque dolore doloribus ducimus iste qui totam. Adipisci recusandae
+            sed voluptatum odio consequuntur, amet sint totam libero quasi
+            tenetur expedita?
+          </Footer.Text>
+        </Footer.Column>
+        <Footer.Column>
+          <Footer.Title>Title</Footer.Title>
+          <Footer.Text>
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure hic
+            itaque dolore doloribus ducimus iste qui totam. Adipisci recusandae
+            sed voluptatum odio consequuntur, amet sint totam libero quasi
+            tenetur expedita?
+          </Footer.Text>
+        </Footer.Column>
+        <Footer.Column>
+          <Footer.Title>Title</Footer.Title>
+          <Footer.Text>
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure hic
+            itaque dolore doloribus ducimus iste qui totam. Adipisci recusandae
+            sed voluptatum odio consequuntur, amet sint totam libero quasi
+            tenetur expedita?
+          </Footer.Text>
+        </Footer.Column>
+      </Footer.Section>,
+      <Footer.Bar>All right reserved</Footer.Bar>,
+    ],
+  },
+} satisfies Meta<typeof Footer>;
+
 export default meta;
 
 type Story = StoryObj<typeof Footer>;

package/src/components/Footer/index.tsx

@@ -1,48 +1,96 @@
-import { Button, type Props as buttonProps } from '@components/Button';
-import { Container } from '@components/Container';
-import classNames from 'classnames';
+import { forwardRef, HTMLAttributes } from 'react';
+
+import clsx from 'clsx';
 
 export interface Props {
   id?: string;
   className?: string;
-  buttonProps?: buttonProps;
   text?: string;
   variant?: 'light' | 'dark';
 }
 
-export const Footer = ({
-  id,
-  className,
-  text,
-  buttonProps,
-  variant,
-}: Props) => {
-  const colours =
-    variant === 'dark' ? 'bg-primary text-white' : 'bg-white text-primary';
-  const classList = classNames(className, colours);
+const FooterComponent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ children, className }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={clsx(
+        'grid grid-cols-1 gap-y-12 bg-footer-bg p-8 text-footer-text',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+});
+
+const FooterBar = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement>
+>(({ children, className }, ref) => {
+  return (
+    <p ref={ref} className={clsx('text-center', className)}>
+      {children}
+    </p>
+  );
+});
 
+const FooterSection = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ children, className }, ref) => {
   return (
-    <div id={id} className={classList}>
-      <Container
-        withPadding
-        className="block h-auto flex-wrap items-center justify-between md:flex"
-      >
-        <p className="pb-4 pt-8 text-center md:my-8 md:pb-0 md:pt-0">{text}</p>
-        <div className="pb-8 pt-4 text-center md:pb-0 md:pt-0">
-          {buttonProps?.children !== undefined &&
-            (buttonProps?.href !== undefined ||
-              buttonProps?.onClick !== undefined) && (
-              <Button
-                variant={variant === 'dark' ? 'primary' : 'secondary'}
-                rounded
-                href={buttonProps?.href}
-                onClick={buttonProps?.onClick}
-              >
-                {buttonProps?.children}
-              </Button>
-            )}
-        </div>
-      </Container>
+    <div ref={ref} className={clsx('grid grid-cols-3 gap-12', className)}>
+      {children}
     </div>
   );
-}
+});
+
+const FooterColumn = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ children, className }, ref) => {
+    return (
+      <div ref={ref} className={className}>
+        {children}
+      </div>
+    );
+  },
+);
+
+const FooterTitle = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ children, className }, ref) => {
+    return (
+      <div ref={ref} className={className}>
+        {children}
+      </div>
+    );
+  },
+);
+
+const FooterText = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ children, className }, ref) => {
+    return (
+      <div ref={ref} className={className}>
+        {children}
+      </div>
+    );
+  },
+);
+
+FooterComponent.displayName = 'Footer';
+FooterBar.displayName = 'Footer.Bar';
+FooterSection.displayName = 'Footer.Section';
+FooterColumn.displayName = 'Footer.Column';
+FooterTitle.displayName = 'Footer.Title';
+FooterText.displayName = 'Footer.Text';
+
+const Footer = Object.assign(FooterComponent, {
+  Bar: FooterBar,
+  Section: FooterSection,
+  Column: FooterColumn,
+  Title: FooterTitle,
+  Text: FooterText,
+});
+
+export { Footer };

package/src/components/FooterNav/FooterNav.stories.tsx

@@ -1,3 +1,4 @@
+import { FooterNav } from './';
 import {
   faHeart,
   faMoon,
@@ -6,115 +7,24 @@ import {
   faSun,
 } from '@fortawesome/fontawesome-free-solid';
 import { action } from '@storybook/addon-actions';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { FooterNav } from '.';
+import { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
-  title: 'Components/Footer Nav',
+  title: 'V2Components/Footer Nav',
   component: FooterNav,
-  argTypes: {
-    ...idAndClassName,
-    title: {
-      type: { name: 'string', required: true },
-      description: 'The title to display on the component',
-      table: {
-        type: { summary: 'string' },
-      }
-    },
-    subtitle: {
-      type: { name: 'string', value: 'string | number' },
-      description: 'The subtitle to display on the component',
-      table: {
-        type: {
-          summary: 'string',
-        },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    withAnimation: {
-      type: { name: 'boolean', required: false },
-      description: 'Enabled the counter animation on the component',
-      table: {
-        type: { summary: 'boolean' },
-      },
-      defaultValue: 'false',
-    },
-    withHoverEffect: {
-      type: { name: 'boolean', required: false },
-      description: 'Enabled the hover effect on the component',
-      table: {
-        type: { summary: 'boolean' },
-      },
-      defaultValue: 'true',
-    },
-    iconProps: {
-      type: { name: 'iconProps', required: false },
-      description: 'The props to pass to the icon to display on the component',
-      table: {
-        type: { summary: 'iconProps' },
-      }
-    },
-
-    large: {
-      description: 'Defines the top and bottom padding size',
-      control: 'boolean',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'true' },
-      },
-      defaultValue: 'true',
-    }
-  },
   args: {
-    backgroundColour: 'white',
-    colour: 'grey',
-    hoverColour: 'primary',
-    footerItems: [
-      {
-        title: 'wishlists',
-        href: '#',
-        iconProps: {
-          icon: faHeart,
-        },
-        onClick: action('clicked wishlist'),
-      },
-      {
-        title: 'Profile',
-        href: '#',
-        iconProps: {
-          icon: faStar,
-        },
-        onClick: action('clicked profile'),
-      },
-      {
-        title: 'sun',
-        href: '#',
-        iconProps: {
-          icon: faSun,
-        },
-        onClick: action('clicked sun'),
-      },
-      {
-        title: 'moon',
-        href: '#',
-        iconProps: {
-          icon: faMoon,
-        },
-        onClick: action('clicked moon'),
-      },
-      {
-        title: 'snowflake',
-        href: '#',
-        iconProps: {
-          icon: faSnowflake,
-        },
-        onClick: action('clicked snowflake'),
-      }
-    ]
+    children: [
+      <FooterNav.Item>
+        <FooterNav.Label>Item 1</FooterNav.Label>
+        <FooterNav.Icon icon={faHeart} />
+      </FooterNav.Item>,
+      <FooterNav.Item>
+        <FooterNav.Label>Item 2</FooterNav.Label>
+        <FooterNav.Icon icon={faMoon} />
+      </FooterNav.Item>,
+    ],
   },
-}
+} satisfies Meta<typeof FooterNav>;
 export default meta;
 
 type Story = StoryObj<typeof FooterNav>;

package/src/components/FooterNav/index.tsx

@@ -1,49 +1,75 @@
-import {
-  FooterNavItem,
-  type FooterNavItemProps,
-} from '@components/FooterNavItem';
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-export interface Props {
-  id: string;
-  className?: string;
-  backgroundColour?: Colours;
-  colour?: Colours;
-  hoverColour?: Colours;
-  hoverBgColour?: Colours;
-  footerItems: FooterNavItemProps[];
-}
-
-export const FooterNav = ({
-  id,
-  className,
-  backgroundColour = 'white',
-  colour = 'black',
-  hoverColour = 'black',
-  hoverBgColour = 'black',
-  footerItems,
-}: Props) => {
-  const classList = classNames(
-    className,
-    'fixed bottom-0 flex w-full justify-between px-4 border-t border-lightest-grey',
-  )
+import { forwardRef, HTMLAttributes } from 'react';
 
+import { IconDefinition } from '@fortawesome/fontawesome-free-solid';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import clsx from 'clsx';
+
+import { Icon } from '..';
+
+const FooterNavComponent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => {
   return (
-    <div id={id} className={classList}>
-      {footerItems?.map((footerItem: any, i) => {
-        footerItem.iconProps.colour = colour;
-        footerItem.iconProps.hoverColour = hoverColour;
-        footerItem.iconProps.hoverBgColour = hoverBgColour;
-        footerItem.iconProps.size = 2;
-        return (
-          <FooterNavItem
-            key={i}
-            {...footerItem}
-            backgroundColour={backgroundColour}
-          />
-        );
-      })}
+    <div
+      className={clsx(
+        'border-lightest-grey fixed bottom-0 flex w-full justify-between border-t px-4',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    >
+      {children}
     </div>
   );
-}
+});
+
+const FooterNavItem = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & { href?: string; onClick?: any }
+>(({ className, children, href, onClick, ...props }) => {
+  return (
+    <div
+      className={clsx(
+        'group w-full cursor-pointer py-2 text-center transition-all duration-500',
+        className,
+      )}
+      {...props}
+    >
+      <a href={href} onClick={onClick}>
+        {children}
+      </a>
+    </div>
+  );
+});
+
+const FooterNavLabel = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <p className={(clsx('font-regular pt-0.5 text-xs'), className)} {...props}>
+      {children}
+    </p>
+  );
+});
+
+const FooterNavIcon = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & { icon: IconDefinition | IconProp }
+>(({ className, icon, ...props }) => {
+  return <Icon icon={icon} {...props} />;
+});
+
+FooterNavComponent.displayName = 'FooterNav';
+FooterNavItem.displayName = 'FooterNav.Item';
+FooterNavIcon.displayName = 'FooterNav.Icon';
+FooterNavLabel.displayName = 'FooterNav.Label';
+
+const FooterNav = Object.assign(FooterNavComponent, {
+  Item: FooterNavItem,
+  Label: FooterNavLabel,
+  Icon: FooterNavIcon,
+});
+
+export { FooterNav };

package/src/components/Form/Form.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, type StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
 import { Form } from '.';
@@ -14,7 +14,7 @@ const meta = {
       table: {
         type: { summary: 'string' },
         defaultValue: { summary: 'undefined' },
-      }
+      },
     },
     onSubmit: {
       type: { name: 'function', required: false },
@@ -25,7 +25,7 @@ const meta = {
           summary: 'function',
         },
         defaultValue: { summary: 'undefined' },
-      }
+      },
     },
     ref: {
       type: { name: 'other', value: 'RefObject<TouchableOpacity>' },
@@ -35,7 +35,7 @@ const meta = {
           summary: 'object',
         },
         defaultValue: { summary: 'undefined' },
-      }
+      },
     },
     components: {
       description: 'An array of component objects to pass to the component',
@@ -45,8 +45,8 @@ const meta = {
           summary: 'array',
         },
         defaultValue: { summary: 'undefined' },
-      }
-    }
+      },
+    },
   },
   args: {
     components: [
@@ -74,10 +74,10 @@ const meta = {
       {
         htmlType: 'Button',
         children: 'Submit',
-      }
-    ]
+      },
+    ],
   },
-}
+};
 
 export default meta;
 

package/src/components/Form/index.tsx

@@ -1,26 +1,26 @@
-import { Button, type Props as buttonProps } from '@components/Button';
-import { Container } from '@components/Container';
-import { Input, type Props as inputProps } from '@components/Input';
+import { Button, ButtonProps } from '@components/Button';
+import { Input, InputContextProps } from '@components/Input';
 import classNames from 'classnames';
 
+import { Card } from '..';
+
 export interface Props {
   id?: string;
   className?: string;
   onSubmit?: () => void;
   ref?: string;
-  components?: Array<inputProps & buttonProps & { htmlType: string }>;
+  components?: Array<InputContextProps & ButtonProps & { htmlType: string }>;
 }
 
 export const Form = ({ id, className, onSubmit, ref, components }: Props) => {
   return (
-    <Container withPadding>
+    <Card>
       <form id={id} ref={ref} className={className} onSubmit={onSubmit}>
         {components?.map((component, i) => {
           if (component?.htmlType === 'Input') {
             return (
               <Input
                 key={`input_${i + 0}`}
-                className={classNames(component?.className)}
                 label={component?.label}
                 placeholder={component?.placeholder}
                 type={component?.type}
@@ -29,18 +29,13 @@ export const Form = ({ id, className, onSubmit, ref, components }: Props) => {
             );
           } else if (component.htmlType === 'Button') {
             return (
-              <Button
-                key={`button_${i + 0}`}
-                type={component?.type}
-                onClick={component?.onClick}
-                className={classNames(component?.className)}
-              >
-                {component?.children}
+              <Button key={`button_${i + 0}`} onClick={component?.onClick}>
+                <Button.Label></Button.Label>
               </Button>
             );
           } else return <></>;
         })}
       </form>
-    </Container>
+    </Card>
   );
-}
+};

package/src/components/Gallery/Gallery.stories.tsx

@@ -0,0 +1,39 @@
+import { Gallery } from './';
+import { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'V2Components/Gallery',
+  component: Gallery,
+  args: {
+    className: 'grid-cols-7',
+    children: [
+      <Gallery.Item src="https://picsum.photos/200/200" />,
+      <Gallery.Item src="https://picsum.photos/201/200" />,
+      <Gallery.Item src="https://picsum.photos/202/200" />,
+      <Gallery.Item src="https://picsum.photos/203/200" />,
+      <Gallery.Item src="https://picsum.photos/204/200" />,
+      <Gallery.Item src="https://picsum.photos/205/200" />,
+      <Gallery.Item src="https://picsum.photos/206/200" />,
+      <Gallery.Item src="https://picsum.photos/207/200" />,
+      <Gallery.Item src="https://picsum.photos/208/200" />,
+      <Gallery.Item src="https://picsum.photos/209/200" />,
+      <Gallery.Item src="https://picsum.photos/210/200" />,
+      <Gallery.Item src="https://picsum.photos/200/201" />,
+      <Gallery.Item src="https://picsum.photos/200/202" />,
+      <Gallery.Item src="https://picsum.photos/200/203" />,
+      <Gallery.Item src="https://picsum.photos/200/204" />,
+      <Gallery.Item src="https://picsum.photos/200/205" />,
+      <Gallery.Item src="https://picsum.photos/200/206" />,
+      <Gallery.Item src="https://picsum.photos/200/207" />,
+      <Gallery.Item src="https://picsum.photos/200/208" />,
+      <Gallery.Item src="https://picsum.photos/200/209" />,
+      <Gallery.Item src="https://picsum.photos/200/210" />,
+    ],
+  },
+} satisfies Meta<typeof Gallery>;
+
+export default meta;
+
+type Story = StoryObj<typeof Gallery>;
+
+export const Default: Story = {};

package/src/components/Gallery/index.tsx

@@ -0,0 +1,31 @@
+import { forwardRef, HTMLAttributes } from 'react';
+
+import { Image, ImageProps } from '@components/Image';
+import clsx from 'clsx';
+
+const GalleryComponent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <div className={clsx('grid', className)} ref={ref} {...props}>
+      {children}
+    </div>
+  );
+});
+
+const GalleryItem = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & ImageProps
+>(({ src }) => {
+  return <Image className="aspect-square w-full" src={src} />;
+});
+
+GalleryComponent.displayName = 'Gallery';
+GalleryItem.displayName = 'Gallery.Item';
+
+const Gallery = Object.assign(GalleryComponent, {
+  Item: GalleryItem,
+});
+
+export { Gallery };