trepur_components 2.3.3 → 2.3.4

package/archive/FooterNavItem/FooterNavItem.stories.tsx

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,80 @@
+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

@@ -0,0 +1,139 @@
+.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/Form.stories.tsx

@@ -0,0 +1,86 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import Form from '.';
+
+const meta = {
+  title: 'Components/Form',
+  component: Form,
+  argTypes: {
+    ...idAndClassName,
+    title: {
+      type: { name: 'string', required: false },
+      description: 'The title to display on the component',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    onSubmit: {
+      type: { name: 'function', required: false },
+      description: 'The action to perform when submitting the component',
+      action: 'onClick',
+      table: {
+        type: {
+          summary: 'function',
+        },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    ref: {
+      type: { name: 'other', value: 'RefObject<TouchableOpacity>' },
+      description: 'An ref for highlighting the current element',
+      table: {
+        type: {
+          summary: 'object',
+        },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    components: {
+      description: 'An array of component objects to pass to the component',
+      control: 'array',
+      table: {
+        type: {
+          summary: 'array',
+        },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+  },
+  args: {
+    components: [
+      {
+        htmlType: 'Input',
+        label: 'This is a label',
+        placeholder: 'This is a placeholder',
+        children: 'Submit',
+        className: 'mb-4',
+      },
+      {
+        htmlType: 'Input',
+        label: 'This is a label',
+        placeholder: 'This is a placeholder',
+        children: 'Submit',
+        className: 'mb-4',
+      },
+      {
+        htmlType: 'Input',
+        label: 'This is a label',
+        placeholder: 'This is a placeholder',
+        children: 'Submit',
+        className: 'mb-4',
+      },
+      {
+        htmlType: 'Button',
+        children: 'Submit',
+      },
+    ],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/archive/Form/index.tsx

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,31 @@
+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 = {};

package/archive/FyreCard/index.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import Button, { type Props as buttonProps } from '@components/Button';
+import classNames from 'classnames';
+
+
+
+export interface Props {
+  id?: string;
+  className?: string;
+  image?: string;
+  imageClass?: string;
+  altText?: string;
+  bordered?: string;
+  buttonProps?: buttonProps;
+}
+
+const FyreCard = ({
+  id,
+  className,
+  image,
+  imageClass,
+  altText,
+  bordered,
+  buttonProps,
+}: Props): JSX.Element => {
+  const classList = classNames(
+    {
+      [style.bordered]: bordered,
+    },
+    className,
+    style.classList,
+  );
+  const imageClassList = classNames(imageClass, style.imageClassList);
+
+  return (
+    <div key={id} id={id} className={classList}>
+      <div
+        className={classNames(style.cardContent, 'card-content theme-local')}
+      >
+        <div>
+          <img className={imageClassList} src={image} alt={altText} />
+        </div>
+        <div className={style.buttonWrapper}>
+          <Button {...buttonProps}>{buttonProps?.children}</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FyreCard;

package/archive/FyreCard/style.module.css

@@ -0,0 +1,19 @@
+.classList {
+  @apply flex flex-col;
+}
+
+.cardContent {
+  @apply flex flex-1 flex-col;
+}
+
+.buttonWrapper {
+  @apply flex justify-end;
+}
+
+.bordered {
+  @apply border border-grey border-opacity-100;
+}
+
+.imageClassList {
+  @apply w-full;
+}

package/archive/Greeting/Greeting.stories.tsx

@@ -0,0 +1,41 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import Greeting from '.';
+
+const meta = {
+  title: 'Components/Greeting',
+  component: Greeting,
+  argTypes: {
+    ...idAndClassName,
+    morningMessage: {
+      type: { name: 'string', required: false },
+      description: 'Defines the morning message for the greeting component',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    afternoonMessage: {
+      type: { name: 'string', required: false },
+      description: 'Defines the afternoon message for the greeting component',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    eveningMessage: {
+      type: { name: 'string', required: false },
+      description: 'Defines the evening message for the greeting component',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+  },
+  args: {
+    morningMessage: 'What a beautiful morning it is today',
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/archive/Greeting/index.tsx

@@ -0,0 +1,32 @@
+export interface Props {
+  id?: string;
+  className?: string;
+  morningMessage?: string;
+  afternoonMessage?: string;
+  eveningMessage?: string;
+}
+
+const Greeting = ({
+  morningMessage = 'Good morning',
+  afternoonMessage = 'Good afternoon',
+  eveningMessage = 'Good evening',
+}: Props): string => {
+  const today = new Date();
+  const hours = `0${today.getHours().toString()}`.slice(-2);
+  const minutes = `0${today.getMinutes().toString()}`.slice(-2);
+  const seconds = `0${today.getSeconds().toString()}`.slice(-2);
+  const time = parseInt(`${hours}${minutes}${seconds}`);
+
+  let message = '';
+  if (time < 120000) {
+    message = morningMessage;
+  } else if (time > 115959 && time < 170000) {
+    message = afternoonMessage;
+  } else if (time > 165959) {
+    message = eveningMessage;
+  }
+
+  return message;
+};
+
+export default Greeting;

package/archive/HamburgerIcon/HamburgerIcon.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import HamburgerIcon from '.';
+
+const meta = {
+  title: 'Components/Hamburger Icon',
+  component: HamburgerIcon,
+  parameters: {
+    docs: {
+      description: {
+        component: 'An icon component',
+      },
+    },
+    layout: 'padded',
+  },
+  argTypes: {
+    ...idAndClassName,
+
+    onClick: {
+      type: { name: 'function', required: false },
+      description: 'Function to be called when the button is clicked',
+      table: { type: { summary: 'function' } },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};