trepur_components 2.3.2 → 2.3.4

package/archive/Modal/index.tsx

@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from 'react';
+
+import classNames from 'classnames';
+
+
+
+export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
+  children?: React.ReactNode;
+  visible?: boolean;
+  onOverlayClick?: () => void;
+  mobileGutter?: boolean;
+  animationStyle?: 'fade' | 'slideBottom';
+}
+
+const Modal = ({
+  id,
+  className,
+  children,
+  visible = false,
+  onOverlayClick,
+  mobileGutter,
+  animationStyle = 'fade',
+}: Props): JSX.Element => {
+  const [hidden, setHidden] = useState(!visible);
+  const [showModal, setShowModal] = useState(visible);
+
+  useEffect(() => {
+    let timeoutId: ReturnType<typeof setTimeout>;
+
+    if (visible) {
+      setHidden(false);
+      timeoutId = setTimeout(() => {
+        setShowModal(true);
+      }, 100);
+    } else {
+      setShowModal(false);
+      timeoutId = setTimeout(() => {
+        setHidden(true);
+      }, 300);
+    }
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [visible]);
+
+  const classList = classNames(
+    {
+      [style.visible]: !hidden && showModal,
+    },
+    style.overlay,
+    className,
+  );
+
+  const childrenClassList = classNames(
+    {
+      [style.visible]: showModal,
+      [style.mobileGutter]: mobileGutter,
+      [style.slideBottom]: animationStyle === 'slideBottom',
+    },
+    style.children,
+  );
+
+  if (hidden) return <></>;
+
+  return (
+    <>
+      <div id={id} className={classList} onClick={onOverlayClick} />
+      {children && <div className={childrenClassList}>{children}</div>}
+    </>
+  );
+};
+
+export default Modal;

package/archive/Modal/style.module.css

@@ -0,0 +1,35 @@
+.overlay {
+  @apply block h-screen w-screen;
+  @apply fixed right-0 top-0 z-50;
+  background: rgba(0, 0, 0, 0.6);
+  @apply opacity-0;
+  @apply transition-opacity duration-300 ease-linear ease-out;
+}
+
+.children {
+  @apply mx-auto flex w-full md:w-auto;
+  @apply fixed left-1/2 top-1/2 z-50 block -translate-x-1/2 -translate-y-1/2 transform;
+  @apply opacity-0 transition-opacity duration-300 ease-linear ease-out;
+}
+
+.mobileGutter {
+  @apply px-4 md:px-0;
+}
+
+.visible {
+  @apply opacity-100;
+}
+
+.hide {
+  @apply hidden;
+}
+
+.children.slideBottom {
+  @apply transition-transform duration-300 ease-linear ease-out;
+  @apply opacity-100;
+  @apply translate-y-full;
+}
+
+.children.slideBottom.visible {
+  @apply -translate-y-1/2;
+}

package/archive/NavItem/NavItem.stories.tsx

@@ -0,0 +1,90 @@
+import { action } from '@storybook/addon-actions';
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import NavItem from '.';
+
+const meta = {
+  title: 'Components/Nav Item',
+  component: NavItem,
+  parameters: {},
+  argTypes: {
+    ...idAndClassName,
+    title: {
+      type: { name: 'string', required: false },
+      description: 'A title for the component',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    href: {
+      type: { name: 'string', required: false },
+      description: 'A href for the component',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    onClick: {
+      type: { name: 'function', required: false },
+      description:
+        'An on click handle to execute when clicking on the component',
+      table: {
+        type: { summary: 'function' },
+      },
+    },
+    bordered: {
+      type: { name: 'boolean', required: false },
+      description: 'Enables borders around the component',
+      table: {
+        type: { summary: 'boolean' },
+      },
+      defaultValue: false,
+    },
+    rounded: {
+      type: { name: 'boolean', required: false },
+      description: 'Roundes the corners of the component',
+      table: {
+        type: { summary: 'boolean' },
+      },
+      defaultValue: true,
+    },
+    underlineOnHover: {
+      type: { name: 'boolean', required: false },
+      description: 'Underlines the title when hovering over the component',
+      table: {
+        type: { summary: 'boolean' },
+      },
+      defaultValue: true,
+    },
+    isActive: {
+      type: { name: 'boolean', required: false },
+      description: 'Set the active state to the component',
+      table: {
+        type: { summary: 'array' },
+      },
+      defaultValue: false,
+    },
+    variant: {
+      type: { name: 'string', required: false },
+      options: ['primary', 'secondary', 'tertiary'],
+      description: 'The varient of the component to render',
+      table: {
+        type: { summary: 'string' },
+      },
+      defaultValue: 'primary',
+      control: 'radio',
+    },
+  },
+  args: {
+    title: 'Home',
+    href: '/',
+    underlineOnHover: true,
+    onClick: action('button-click'),
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/archive/NavItem/index.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+
+
+export interface Props {
+  id?: string;
+  className?: string;
+  title: string;
+  href?: string;
+  onClick?: React.MouseEventHandler;
+  bordered?: boolean;
+  rounded?: boolean;
+  underlineOnHover?: boolean;
+  isActive?: boolean;
+  variant?: 'primary' | 'secondary' | 'tertiary';
+  tabindex?: number;
+}
+
+const NavItem = ({
+  id,
+  className,
+  title,
+  href = '/',
+  onClick,
+  bordered = false,
+  rounded = true,
+  underlineOnHover = true,
+  isActive = false,
+  variant = 'primary',
+
+  tabindex,
+}: Props): JSX.Element => {
+  const classList = classNames(className, style.navItem, 'theme-local');
+
+  const anchorClassList = classNames(
+    {
+      [style.underline]: underlineOnHover,
+      [style.active]: isActive,
+      [style.inactive]: !isActive,
+      [style.bordered]: bordered,
+      [style.rounded]: rounded,
+      [style.primary]: variant === 'primary',
+      [style.secondary]: variant === 'secondary',
+      [style.tertiary]: variant === 'tertiary',
+    },
+    [style.anchorClassList],
+  );
+
+  return (
+    <div id={id} className={classList}>
+      <a
+        href={href}
+        onClick={onClick}
+        className={anchorClassList}
+        {...(tabindex !== undefined && { tabIndex: tabindex })}
+      >
+        <span className={style.spanClassList}>{title}</span>
+      </a>
+    </div>
+  );
+};
+
+export default NavItem;

package/archive/NavItem/style.module.css

@@ -0,0 +1,71 @@
+.bordered {
+  @apply border-2 px-2 py-2;
+}
+
+.rounded {
+  @apply rounded-md;
+}
+
+.navItem {
+  @apply w-auto list-none;
+}
+
+.underline > span {
+  @apply relative ease-linear;
+}
+
+.underline > span:before {
+  @apply absolute -bottom-1 left-0 h-1 transition-all;
+}
+
+.underline:hover > span:before {
+  @apply w-full;
+}
+
+.active > span {
+  @apply before:w-full;
+}
+
+.inactive > span {
+  @apply before:w-0;
+}
+
+.anchorClassList {
+  @apply rounded-xl border-2 border-transparent p-2;
+}
+
+.anchorClassList:focus > span:before {
+  @apply w-full;
+}
+
+.anchorClassList:focus {
+  @apply rounded-xl border-2 border-secondary p-2;
+}
+
+.spanClassList {
+  @apply whitespace-nowrap text-center;
+}
+
+.secondary {
+  @apply bg-secondary text-primary;
+}
+
+.secondary > span:before {
+  @apply bg-primary text-primary;
+}
+
+.primary {
+  @apply bg-primary text-secondary;
+}
+
+.primary > span:before {
+  @apply bg-secondary text-secondary;
+}
+
+.tertiary {
+  @apply bg-tertiary text-secondary;
+}
+
+.tertiary > span:before {
+  @apply bg-secondary text-secondary;
+}

package/archive/NavOld/NavOld.stories.tsx

@@ -0,0 +1,193 @@
+import { action } from '@storybook/addon-actions';
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import NavOld from '.';
+
+const navLinks = [
+  { title: 'Home', href: '/', isActive: true },
+  { title: 'Resume', href: '/', isActive: false },
+  { title: 'Contact Me', href: '/', isActive: false },
+];
+
+const meta = {
+  title: 'Components/Nav',
+  component: NavOld,
+  parameters: {
+    backgrounds: {
+      default: 'grey',
+      values: [
+        {
+          name: 'grey',
+          value: '#f3f3f3',
+        },
+      ],
+    },
+  },
+  argTypes: {
+    ...idAndClassName,
+    navLinks: {
+      description: 'An array of nav links to display in the component',
+      table: {
+        type: { summary: 'array' },
+      },
+    },
+    withMobileSideBar: {
+      type: { name: 'boolean', required: false },
+      description:
+        'Sets the expanding mechanism to work as a side bar on mobile',
+      table: {
+        type: { summary: 'boolean' },
+      },
+      defaultValue: false,
+    },
+    withMobileDropdown: {
+      type: { name: 'boolean', required: false },
+      description:
+        'Sets the expanding mechanism to work as a drop down on mobile',
+      table: {
+        type: { summary: 'boolean' },
+      },
+      defaultValue: false,
+    },
+    dropdownNavHeight: {
+      type: { name: 'string', required: false },
+      description: 'The distance in which the dropdown should come on mobile',
+      table: {
+        type: { summary: 'string' },
+      },
+      defaultValue: undefined,
+    },
+    logo: {
+      type: { name: 'string', required: false },
+      description: 'The logo to display on the component',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    logoDarkTheme: {
+      type: { name: 'string', required: false },
+      description: 'An optional dark them logo for dark mode',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    mobileLogo: {
+      type: { name: 'string', required: false },
+      description: 'An optional mobile logo for mobile devices',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    mobileLogoDarkTheme: {
+      type: { name: 'string', required: false },
+      description: 'An optional dark them mobile logo for mobile dark mode',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    logoLink: {
+      type: { name: 'string', required: false },
+      description: 'The link to navigate to when clicking on the logo',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    mobileClasses: {
+      type: { name: 'string', required: false },
+      description: '',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    fixedTop: {
+      type: { name: 'boolean', required: false },
+      description: 'Sets the header to fix at the top when true',
+      table: {
+        type: { summary: 'boolean' },
+      },
+    },
+    profileMenuItems: {
+      type: { name: 'array', required: false },
+      description: 'toggles the profile option',
+      table: {
+        type: { summary: 'array' },
+      },
+    },
+    getNavStatus: {
+      type: { name: 'boolean', required: false },
+      description:
+        'Returns the status of the header, opened or closed in mobile',
+      table: {
+        type: { summary: 'function' },
+      },
+    },
+    variant: {
+      type: { name: 'string', required: false },
+      options: ['primary', 'secondary', 'tertiary'],
+      description: 'The them to render the component in',
+      table: {
+        type: { summary: 'primary' },
+        defaultValue: { summary: 'primary' },
+      },
+      defaultValue: 'primary',
+      control: { type: 'radio' },
+    },
+
+    text: {
+      type: { name: 'string', required: false },
+      description: 'Text to display on the component',
+      table: {
+        type: { summary: 'string' },
+      },
+      defaultValue: 'undefined',
+    },
+    textLink: {
+      type: { name: 'string', required: false },
+      description:
+        'A link to navigate to when clicking on the text in the component',
+      table: {
+        type: { summary: 'string' },
+      },
+      defaultValue: undefined,
+    },
+    bgColour: {
+      type: { name: 'select', required: false },
+      options: ['primary', 'secondary', 'white', 'black', 'gold'],
+      description: 'The background colour of the component',
+      table: {
+        type: { summary: 'select' },
+      },
+      defaultValue: 'primary',
+    },
+  },
+  args: {
+    logoLink: '/',
+    navLinks,
+    logo: 'https://picsum.photos/200/200',
+    logoDarkTheme: 'https://picsum.photos/201/201',
+    mobileLogo: 'https://picsum.photos/201/200',
+    mobileLogoDarkTheme: 'https://picsum.photos/200/201',
+    getNavStatus: (asSideBar, status) => {
+      action('nav status: [side bar, open]')(asSideBar, status);
+    },
+    withStickyNavShadow: true,
+    withDesktopShadow: true,
+    withMobileSideBar: true,
+    profileMenu: {
+      menuItems: [
+        { name: 'Profile', href: '/profile' },
+        { name: 'Events', href: '/events' },
+        { name: 'Whats on', href: '/whatson' },
+        { name: 'Help', href: '/help' },
+        { name: 'Log Out', href: '/logout' },
+      ],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};