trepur_components 2.3.7 → 2.3.9

package/archive/Footer/Footer.stories.tsx

@@ -1,59 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import Footer from '.';
-
-const meta = {
-  title: 'Components/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',
-    },
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/Footer/index.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-
-import Button, { type Props as buttonProps } from '@components/Button';
-import Container from '@components/Container';
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id?: string;
-  className?: string;
-  buttonProps?: buttonProps;
-  text?: string;
-  variant?: 'light' | 'dark';
-}
-
-const Footer = ({
-  id,
-  className,
-  text,
-  buttonProps,
-  variant,
-}: Props): JSX.Element => {
-  const colours = variant === 'dark' ? [style.dark] : [style.light];
-  const classList = classNames(className, colours, 'theme-local');
-
-  return (
-    <div id={id} className={classList}>
-      <Container withPadding className={style.classList}>
-        <p className={style.textClassList}>{text}</p>
-        <div className={style.buttonClassList}>
-          {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>
-  );
-};
-
-export default Footer;

package/archive/Footer/style.module.css

@@ -1,19 +0,0 @@
-.classList {
-  @apply block h-auto flex-wrap items-center justify-between md:flex;
-}
-
-.textClassList {
-  @apply pb-4 pt-8 text-center md:my-8 md:pb-0 md:pt-0;
-}
-
-.buttonClassList {
-  @apply pb-8 pt-4 text-center md:pb-0 md:pt-0;
-}
-
-.dark {
-  @apply bg-primary text-white;
-}
-
-.light {
-  @apply bg-white text-primary;
-}

package/archive/FooterNav/FooterNav.stories.tsx

@@ -1,125 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import FooterNav from '.';
-
-const meta = {
-  title: 'Components/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: {
-          type: 'heart',
-          size: 2,
-          hollow: true,
-        },
-        onClick: action('clicked wishlist'),
-      },
-      {
-        title: 'Profile',
-        href: '#',
-        iconProps: {
-          type: 'star',
-          size: 2,
-          hollow: true,
-        },
-        onClick: action('clicked profile'),
-      },
-      {
-        title: 'sun',
-        href: '#',
-        iconProps: {
-          type: 'sun',
-          size: 2,
-          hollow: true,
-        },
-        onClick: action('clicked sun'),
-      },
-      {
-        title: 'moon',
-        href: '#',
-        iconProps: {
-          type: 'moon',
-          size: 2,
-          hollow: true,
-        },
-        onClick: action('clicked moon'),
-      },
-      {
-        title: 'snowflake',
-        href: '#',
-        iconProps: {
-          type: 'snowflake',
-          size: 2,
-          hollow: true,
-        },
-        onClick: action('clicked snowflake'),
-      },
-    ],
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/FooterNav/index.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-
-import FooterNavItem, {
-  type Props as 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[];
-}
-
-const FooterNav = ({
-  id,
-  className,
-  backgroundColour = 'white',
-  colour = 'black',
-  hoverColour = 'black',
-  hoverBgColour = 'black',
-  footerItems,
-}: Props): JSX.Element => {
-  const classList = classNames(
-    className,
-    style.classList,
-    style[backgroundColour],
-    'theme-local',
-  );
-
-  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>
-  );
-};
-
-export default FooterNav;

package/archive/FooterNav/style.module.css

@@ -1,32 +0,0 @@
-.classList {
-  @apply fixed bottom-0 flex w-full justify-between px-4;
-  @apply border-t border-lightest-grey;
-}
-
-.primary {
-  @apply bg-primary text-white;
-}
-.secondary {
-  @apply bg-secondary text-white;
-}
-.white {
-  @apply bg-white text-black;
-}
-.grey {
-  @apply bg-lightest-grey text-black;
-}
-.black {
-  @apply bg-black text-white;
-}
-.success {
-  @apply bg-success text-white;
-}
-.error {
-  @apply bg-error text-white;
-}
-.facebook {
-  @apply bg-facebook text-white;
-}
-.gold {
-  @apply bg-gold text-white;
-}

package/archive/FooterNavItem/FooterNavItem.stories.tsx

@@ -1,53 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import FooterNavItem from '.';
-
-const meta = {
-  title: 'Components/Footer Nav Item',
-  component: FooterNavItem,
-  argTypes: {
-    ...idAndClassName,
-
-    title: {
-      type: { name: 'string', required: true },
-      description: 'The title to display on the component',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    iconProps: {
-      type: { name: 'iconProps', required: false },
-      description: 'The props to pass to the icon to display on the component',
-      table: {
-        type: { summary: 'iconProps' },
-      },
-    },
-    backgroundColour: {
-      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: 'Wishlist',
-    href: '#',
-    iconProps: {
-      type: 'heart',
-      size: 2,
-      hollow: true,
-    },
-    onClick: action('clicked'),
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/FooterNavItem/index.tsx

@@ -1,80 +0,0 @@
-import React from 'react';
-
-import Icon, { type Props as iconProps } from '@components/Icon';
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id: string;
-  className?: string;
-  title?: string;
-  iconProps?: iconProps;
-  bgColour?: Colours;
-  hoverBgColour?: Colours;
-  colour?: Colours;
-  hoverColour?: Colours;
-
-  onClick?: () => void;
-  href: string;
-}
-
-const FooterNavItem = ({
-  id,
-  className,
-  title,
-  iconProps,
-  bgColour = 'white',
-  hoverBgColour = 'secondary',
-  colour = 'grey',
-  hoverColour = 'white',
-  onClick,
-  href,
-}: Props): JSX.Element => {
-  const formattedText =
-    typeof colour === 'string' ? `text_${colour}` : 'text_primary';
-  const formattedBg =
-    typeof bgColour === 'string' ? `bg_${bgColour}` : 'bg_secondary';
-  const formattedHoverText =
-    typeof hoverColour === 'string'
-      ? `hover_text_${hoverColour}`
-      : 'hover_text_secondary';
-  const formattedHoverBg =
-    typeof hoverBgColour === 'string'
-      ? `hover_bg_${hoverBgColour}`
-      : 'hover_bg_primary';
-
-  const classList = classNames(
-    className,
-    style.classList,
-    style[formattedBg],
-    style[formattedHoverBg],
-    style[formattedText],
-    style[formattedHoverText],
-    'theme-local',
-  );
-
-  return (
-    <div id={id} className={classList}>
-      <a href={href} onClick={onClick}>
-        {iconProps !== undefined && (
-          <Icon
-            {...iconProps}
-            className={style.icon}
-            bgColour={bgColour}
-            hoverBgColour={hoverBgColour}
-            colour={colour}
-            hoverColour={hoverColour}
-            rounded
-          />
-        )}
-        {title !== undefined && title !== '' && (
-          <p className={style.title}>{title}</p>
-        )}
-      </a>
-    </div>
-  );
-};
-
-export default FooterNavItem;

package/archive/FooterNavItem/style.module.css

@@ -1,139 +0,0 @@
-.classList {
-  @apply w-full cursor-pointer py-2 text-center transition-all duration-500;
-}
-
-.classList:hover .icon {
-  @apply bg-secondary text-white;
-}
-
-.icon {
-  @apply mx-auto;
-}
-
-.title {
-  @apply pt-0.5 text-xs font-regular;
-}
-
-.text_primary {
-  @apply text-primary;
-}
-.text_secondary {
-  @apply text-secondary;
-}
-.text_white {
-  @apply text-white;
-}
-.text_black {
-  @apply text-black;
-}
-.text_gold {
-  @apply text-gold;
-}
-.text_grey {
-  @apply text-light-grey;
-}
-.text_facebook {
-  @apply text-facebook;
-}
-.text_interactive-facebook {
-  @apply text-interactive-facebook;
-}
-.text_success {
-  @apply text-success;
-}
-.text_error {
-  @apply text-error;
-}
-
-.bg_primary {
-  @apply bg-primary;
-}
-.bg_secondary {
-  @apply bg-secondary;
-}
-.bg_white {
-  @apply bg-white;
-}
-.bg_black {
-  @apply bg-black;
-}
-.bg_gold {
-  @apply bg-gold;
-}
-.bg_grey {
-  @apply bg-light-grey;
-}
-.bg_facebook {
-  @apply bg-facebook;
-}
-.bg_interactive-facebook {
-  @apply bg-interactive-facebook;
-}
-.bg_success {
-  @apply bg-success;
-}
-.bg_error {
-  @apply bg-error;
-}
-
-.hover_text_primary {
-  @apply hover:text-primary;
-}
-.hover_text_secondary {
-  @apply hover:text-secondary;
-}
-.hover_text_white {
-  @apply hover:text-white;
-}
-.hover_text_black {
-  @apply hover:text-black;
-}
-.hover_text_gold {
-  @apply hover:text-gold;
-}
-.hover_text_grey {
-  @apply hover:text-light-grey;
-}
-.hover_text_facebook {
-  @apply hover:text-facebook;
-}
-.hover_text_interactive-facebook {
-  @apply hover:text-interactive-facebook;
-}
-.hover_text_success {
-  @apply hover:text-success;
-}
-.hover_text_error {
-  @apply hover:text-error;
-}
-
-.hover_bg_primary {
-  @apply hover:bg-primary;
-}
-.hover_bg_secondary {
-  @apply hover:bg-secondary;
-}
-.hover_bg_white {
-  @apply hover:bg-white;
-}
-.hover_bg_black {
-  @apply hover:bg-black;
-}
-.hover_bg_gold {
-  @apply hover:bg-gold;
-}
-.hover_bg_grey {
-  @apply hover:bg-light-grey;
-}
-.hover_bg_facebook {
-  @apply hover:bg-facebook;
-}
-.hover_bg_interactive-facebook {
-  @apply hover:bg-interactive-facebook;
-}
-.hover_bg_success {
-  @apply hover:bg-success;
-}
-.hover_bg_error {
-  @apply hover:bg-error;
-}

package/archive/Form/index.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-
-import Button, { type Props as buttonProps } from '@components/Button';
-import Container from '@components/Container';
-import Input, { type Props as inputProps } from '@components/Input';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  onSubmit?: () => void;
-  ref?: string;
-  components?: Array<inputProps & buttonProps & { htmlType: string }>;
-}
-
-const Form = ({
-  id,
-  className,
-  onSubmit,
-  ref,
-  components,
-}: Props): JSX.Element => {
-  return (
-    <Container withPadding>
-      <form
-        id={id}
-        ref={ref}
-        className={classNames(className, 'theme-local')}
-        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}
-                name={component?.name}
-              />
-            );
-          } else if (component.htmlType === 'Button') {
-            return (
-              <Button
-                key={`button_${i + 0}`}
-                type={component?.type}
-                onClick={component?.onClick}
-                className={classNames(component?.className)}
-              >
-                {component?.children}
-              </Button>
-            );
-          } else return <></>;
-        })}
-      </form>
-    </Container>
-  );
-};
-
-export default Form;

package/archive/FyreCard/FyreCard.stories.tsx

@@ -1,31 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import FyreCard from '.';
-
-const meta = {
-  title: 'Components/Fyre Card',
-  component: FyreCard,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    image: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      },
-    },
-  },
-  args: {
-    image: 'https://picsum.photos/500/300',
-    buttonProps: {
-      children: 'Shop Now',
-    },
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};