trepur_components 2.3.9 → 2.3.11

package/lib/styles/themes/penrithmrt.css

@@ -0,0 +1,101 @@
+body.theme-penrithmrt {
+  --color-ink: #495863;
+  --color-transparent: transparent;
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-red: #bb0a1e;
+  --color-grey: #2c373b;
+  --color-light-grey: #495c63;
+  --color-lightest-grey: #f5f5f5;
+  --color-primary-strict: #ff007d;
+  --color-border: #d0d0d0;
+  --color-border-lightest: #eeeeee;
+  --color-border-light: #d8d8d8;
+  --color-border-dark: #616161;
+  --color-facebook: #3b5999;
+  --color-whatsapp: #25d366;
+  --color-twitter: #55acee;
+  --color-linkedin: #0a66c2;
+  --color-email: #c71610;
+  --color-github: #171515;
+  --color-instagram: #8a3ab9;
+  --color-interactive-facebook: #2d4474;
+  --color-interactive-whatsapp: #25d566;
+  --color-interactive-twitter: #55acee;
+  --color-interactive-linkedin: #0a66c2;
+  --color-interactive-instagram: #6d2e92;
+  --color-interactive-email: #9f110c;
+  --color-interactive-github: #000000;
+  --color-gold: #e2b13c;
+  --color-linkedin: #0e76a8;
+
+  --color-primary: #3C2F71;
+  --color-secondary: #c71f1f;
+  --color-tertiary: #921457;
+
+  --color-loading: #a3a3a3;
+
+  /* pill */
+  --color-error-default: #b91c1c;
+  --color-warning-default: #a16207;
+  --color-success-default: #047857;
+  --color-info-default: #0369a1;
+
+  --color-error-light: #fca5a5;
+  --color-warning-light: #fde047;
+  --color-success-light: #6ee7b7;
+  --color-info-light: #7dd3fc;
+
+  /* Button */
+  --color-button-primary-active: #3C2F71;
+  --color-button-primary-border: #3C2F71;
+  --color-button-primary-bg: #3C2F71;
+  --color-button-primary-text: #ffffff;
+  --color-button-primary-hover: #3C2F71;
+
+  --color-button-secondary-active: #c71f1f;
+  --color-button-secondary-border: #c71f1f;
+  --color-button-secondary-bg: #c71f1f;
+  --color-button-secondary-text: #ffffff;
+  --color-button-secondary-hover: #c71f1f;
+
+  --color-button-ghost-active: #242424;
+  --color-button-ghost-border: #ffffff00;
+  --color-button-ghost-bg: #0055ff00;
+  --color-button-ghost-text: #3C2F71;
+  --color-button-ghost-hover: #bdbdbd;
+
+  --color-button-bordered-active: #242424;
+  --color-button-bordered-border: #9d9d9d;
+  --color-button-bordered-bg: #0055ff00;
+  --color-button-bordered-text: #000000;
+  --color-button-bordered-hover: #5f5f5f;
+
+  /* Footer */
+  --color-footer-bg: #1b54c6;
+  --color-footer-text: #ffffff;
+
+  /* Star */
+  --color-star: #f5bf1f;
+
+  /* Tubestops */
+  --color-tubestop-station-active: #57e31b;
+  --color-tubestop-station-complete: #c9c8c8;
+  --color-tubestop-station-future: #5a4f45;
+  --color-tubestop-line-complete: #c9c8c8;
+  --color-tubestop-line-future: #707070;
+  --color-tubestop-text-active: #000000;
+  --color-tubestop-text-complete: #c9c8c8;
+  --color-tubestop-text-future: #5b5b5b;
+
+  /* Carousel */
+  --color-carousel-dots-active: #1a1dd9;
+  --color-carousel-dots-default: #2c2525;
+  --color-carousel-dots-hover: #1a1dd9;
+  --color-carousel-arrow-default: #31a3dd;
+  --color-carousel-arrow-hover: #ae127a;
+
+  /* Nav */
+  --color-nav-bg: #c8c6c6;
+  --color-nav-text: #3C2F71;
+}

package/{tailwind → lib/tailwind}/colors.ts

@@ -4,7 +4,11 @@ export default {
   secondary: 'var(--color-secondary)',
   tertiary: 'var(--color-tertiary)',
   star: 'var(--color-star)',
-  nav: 'var(--color-nav)',
+  nav: {
+    bg: 'var(--color-nav-bg)',
+    text: 'var(--color-nav-text)',
+  },
+  loading: 'var(--color-loading)',
   footer: {
     bg: 'var(--color-footer-bg)',
     text: 'var(--color-footer-text)',
@@ -47,6 +51,13 @@ export default {
       text: 'var(--color-button-ghost-text)',
       hover: 'var(--color-button-ghost-hover)',
     },
+    bordered: {
+      active: 'var(--color-button-bordered-active)',
+      border: 'var(--color-button-bordered-border)',
+      bg: 'var(--color-button-bordered-bg)',
+      text: 'var(--color-button-bordered-text)',
+      hover: 'var(--color-button-bordered-hover)',
+    },
   },
   tubestop: {
     station: {

package/lib/utils/controls.d.ts

@@ -0,0 +1,36 @@
+export type Colours = 'primary' | 'secondary' | 'white' | 'black' | 'grey' | 'gold' | 'facebook' | 'linkedin' | 'email' | 'instagram' | 'github' | 'interactive-facebook' | 'interactive-email' | 'interactive-linkedin' | 'interactive-instagram' | 'interactive-github' | 'success' | 'error' | 'ink' | 'transparent';
+export type SocialTypes = 'facebook' | 'instagram' | 'github' | 'linkedin';
+export declare const idAndClassName: {
+    id: {
+        description: string;
+        control: {
+            type: string;
+            default: boolean;
+        };
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
+    className: {
+        description: string;
+        control: {
+            type: string;
+            default: boolean;
+        };
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
+};

package/lib/utils/matchMedia.d.ts

@@ -0,0 +1,2 @@
+declare const MatchMedia: (query: string) => boolean;
+export default MatchMedia;

package/lib/utils/screens.d.ts

@@ -0,0 +1,7 @@
+export declare const Screens: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trepur_components",
-  "version": "2.3.9",
+  "version": "2.3.11",
   "description": "component lib",
   "author": "trepur_ttenneb",
   "private": false,
@@ -9,6 +9,9 @@
     "components",
     "ui"
   ],
+  "files": [
+    "lib/**/*"
+  ],
   "license": "UNLICENSED",
   ".": {
     "import": "./lib/index.js"

package/.eslintrc.cjs

@@ -1,72 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  settings: {
-    'import/resolver': {
-      typescript: {},
-    },
-  },
-  extends: ['plugin:storybook/recommended'],
-  parserOptions: {
-    project: ['tsconfig.eslint.json'],
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  plugins: ['react', 'prettier'],
-  ignorePatterns: [
-    'archive',
-    '.eslintrc.cjs',
-    'tailwind.config.js',
-    'webpack.config.js',
-    'tailwind/*.js',
-    'vite.config.mjs',
-    'lib/*',
-    'postcss.config.js',
-  ],
-  rules: {
-    'react/jsx-no-bind': 'off',
-    'sort-keys': [
-      'error',
-      'asc',
-      { caseSensitive: true, natural: false, minKeys: 2 },
-    ],
-    'import/no-extraneous-dependencies': [
-      'error',
-      {
-        devDependencies: ['**/*.stories.*', '**/*.test.*', '**/story-utils/*'],
-        peerDependencies: true,
-      },
-    ],
-  },
-  overrides: [
-    {
-      files: ['*.tsx', '*.jsx'],
-      rules: {
-        '@typescript-eslint/ban-types': [
-          'error',
-          {
-            extendDefaults: true,
-            types: {
-              '{}': false,
-            },
-          },
-        ],
-      },
-      extends: 'love',
-    },
-  ],
-  ignorePatterns: ['.eslintrc.js', 'tailwind.config.js'],
-  rules: {
-    '@typescript-eslint/consistent-type-imports': 'off',
-    '@typescript-eslint/strict-boolean-expressions': 'off',
-    'no-empty-pattern': 'off',
-    'prettier/prettier': [
-      'error',
-      {
-        singleQuote: true,
-      },
-    ],
-  },
-};

package/.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npm run lint

package/.prettierignore

@@ -1,10 +0,0 @@
-.github/
-.husky/
-.prettierignore
-.storybook/tailwind/
-coverage/
-deployment/
-lib/
-node_modules/
-storybook-build/
-**/*.svg

package/.prettierrc.json

@@ -1,22 +0,0 @@
-{
-  "singleQuote": true,
-  "trailingComma": "all",
-  "importOrder": [
-    "^react$",
-    "<THIRD_PARTY_MODULES>",
-    "^effects(/.+)?$",
-    "^@(/.+)?$",
-    "^hooks(/.+)?$",
-    "^layout(/.+)?$",
-    "^next(/.+)?$",
-    "^styles(/.+)?$",
-    "^types(/.+)?$",
-    "^utils(/.+)?$",
-    "^\\.?\\.(/.+)?$"
-  ],
-  "importOrderSeparation": true,
-  "plugins": [
-    "@trivago/prettier-plugin-sort-imports",
-    "prettier-plugin-tailwindcss"
-  ]
-}

package/postcss.config.js

@@ -1,8 +0,0 @@
-const config = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
-
-export default config;

package/src/components/Accordion/Accordion.stories.tsx

@@ -1,39 +0,0 @@
-import { Collapsible } from '@components/Collapsible';
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Accordion } from '.';
-import { items } from './const';
-
-const meta = {
-  title: 'V2Components/Accordion',
-  component: Accordion,
-  argTypes: {
-    ...idAndClassName,
-  },
-  args: {
-    children: items.map((item) => {
-      return (
-        <Collapsible>
-          <Collapsible.Header>
-            {item.image && <Collapsible.Image src={item.image} />}
-            <Collapsible.HeaderContent>
-              <Collapsible.Label>{item.label}</Collapsible.Label>
-              <Collapsible.Title>{item.title}</Collapsible.Title>
-              <Collapsible.Subtitle>{item.subtitle}</Collapsible.Subtitle>
-            </Collapsible.HeaderContent>
-          </Collapsible.Header>
-          <Collapsible.Content>
-            <Collapsible.Text>{item.content}</Collapsible.Text>
-          </Collapsible.Content>
-        </Collapsible>
-      );
-    }),
-  },
-} satisfies Meta<typeof Accordion>;
-
-export default meta;
-
-type Story = StoryObj<typeof Accordion>;
-
-export const Default: Story = {};

package/src/components/Accordion/const.tsx

@@ -1,34 +0,0 @@
-export const items = [
-  {
-    label: 'This is some text',
-    title: 'This is a title',
-    subtitle: 'This is a subtitle',
-    image: 'https://picsum.photos/100/100',
-    content:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper in neque in venenatis. Mauris scelerisque orci magna, et ultricies nulla lobortis ac. Aliquam vitae faucibus nisl. Nunc in tellus libero. Donec ut augue consequat, convallis risus in, pulvinar nibh. Duis mi nibh, posuere molestie pharetra cursus, viverra ut dolor. Vivamus eget arcu dui. Donec ullamcorper ornare justo sed feugiat. Curabitur aliquam lectus sed quam pharetra scelerisque. Integer vitae eleifend dolor. Duis luctus metus ipsum, et commodo magna bibendum quis. Quisque gravida leo sodales quam feugiat, id vulputate arcu pulvinar. Duis dictum gravida risus, et bibendum nunc condimentum eu.',
-  },
-  {
-    title: 'This is a title',
-    content:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper in neque in venenatis. Mauris scelerisque orci magna, et ultricies nulla lobortis ac. Aliquam vitae faucibus nisl. Nunc in tellus libero. Donec ut augue consequat, convallis risus in, pulvinar nibh. Duis mi nibh, posuere molestie pharetra cursus, viverra ut dolor. Vivamus eget arcu dui. Donec ullamcorper ornare justo sed feugiat. Curabitur aliquam lectus sed quam pharetra scelerisque. Integer vitae eleifend dolor. Duis luctus metus ipsum, et commodo magna bibendum quis. Quisque gravida leo sodales quam feugiat, id vulputate arcu pulvinar. Duis dictum gravida risus, et bibendum nunc condimentum eu.',
-  },
-  {
-    label:
-      'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus nihil, molestias amet sed, corrupti debitis odit doloribus perspiciatis est, quasi illum culpa iusto. Molestias, ducimus. Provident, quibusdam fuga. Voluptatem, saepe.',
-    title: 'This is a title',
-    image: 'https://picsum.photos/101/100',
-    content:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper in neque in venenatis. Mauris scelerisque orci magna, et ultricies nulla lobortis ac. Aliquam vitae faucibus nisl. Nunc in tellus libero. Donec ut augue consequat, convallis risus in, pulvinar nibh. Duis mi nibh, posuere molestie pharetra cursus, viverra ut dolor. Vivamus eget arcu dui. Donec ullamcorper ornare justo sed feugiat. Curabitur aliquam lectus sed quam pharetra scelerisque. Integer vitae eleifend dolor. Duis luctus metus ipsum, et commodo magna bibendum quis. Quisque gravida leo sodales quam feugiat, id vulputate arcu pulvinar. Duis dictum gravida risus, et bibendum nunc condimentum eu.',
-  },
-  {
-    subtitle: 'This is a subtitle',
-    image: 'https://picsum.photos/100/101',
-    content:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper in neque in venenatis. Mauris scelerisque orci magna, et ultricies nulla lobortis ac. Aliquam vitae faucibus nisl. Nunc in tellus libero. Donec ut augue consequat, convallis risus in, pulvinar nibh. Duis mi nibh, posuere molestie pharetra cursus, viverra ut dolor. Vivamus eget arcu dui. Donec ullamcorper ornare justo sed feugiat. Curabitur aliquam lectus sed quam pharetra scelerisque. Integer vitae eleifend dolor. Duis luctus metus ipsum, et commodo magna bibendum quis. Quisque gravida leo sodales quam feugiat, id vulputate arcu pulvinar. Duis dictum gravida risus, et bibendum nunc condimentum eu.',
-  },
-  {
-    image: 'https://picsum.photos/102/100',
-    content:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper in neque in venenatis. Mauris scelerisque orci magna, et ultricies nulla lobortis ac. Aliquam vitae faucibus nisl. Nunc in tellus libero. Donec ut augue consequat, convallis risus in, pulvinar nibh. Duis mi nibh, posuere molestie pharetra cursus, viverra ut dolor. Vivamus eget arcu dui. Donec ullamcorper ornare justo sed feugiat. Curabitur aliquam lectus sed quam pharetra scelerisque. Integer vitae eleifend dolor. Duis luctus metus ipsum, et commodo magna bibendum quis. Quisque gravida leo sodales quam feugiat, id vulputate arcu pulvinar. Duis dictum gravida risus, et bibendum nunc condimentum eu.',
-  },
-];

package/src/components/Accordion/index.tsx

@@ -1,22 +0,0 @@
-import { forwardRef, HTMLAttributes } from 'react';
-
-import clsx from 'clsx';
-
-export interface AccordionProps {
-  loading?: boolean;
-}
-
-const AccordionComponent = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement> & AccordionProps
->(({ id, className, children, loading = false, ...props }, ref) => (
-  <div id={id} className={clsx('', className)} ref={ref} {...props}>
-    {children}
-  </div>
-));
-
-AccordionComponent.displayName = 'Accordion';
-
-const Accordion = Object.assign(AccordionComponent);
-
-export { Accordion };

package/src/components/AlertBar/AlertBar.stories.tsx

@@ -1,89 +0,0 @@
-import { AlertBar } from './';
-import {
-  faCheckCircle,
-  faExclamationCircle,
-  faHeart,
-  faQuestionCircle,
-  faStopCircle,
-} from '@fortawesome/fontawesome-free-solid';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
-
-const meta = {
-  title: 'V2Components/Alert Bar',
-  component: AlertBar,
-
-  args: {
-    children: [
-      <AlertBar.Icon icon={faHeart} />,
-      <AlertBar.Label>This is an alert bar</AlertBar.Label>,
-    ],
-  },
-} satisfies Meta<typeof AlertBar>;
-export default meta;
-
-type Story = StoryObj<typeof AlertBar>;
-
-export const Default: Story = {};
-
-export const Error: Story = {
-  ...Default,
-  args: {
-    ...Default.args,
-    children: [
-      <AlertBar.Icon icon={faStopCircle} />,
-      <AlertBar.Label>This is an alert bar</AlertBar.Label>,
-    ],
-    variant: 'error',
-  },
-};
-
-export const Success: Story = {
-  ...Default,
-  args: {
-    ...Default.args,
-    children: [
-      <AlertBar.Icon icon={faCheckCircle} />,
-      <AlertBar.Label>This is an alert bar</AlertBar.Label>,
-    ],
-    variant: 'success',
-  },
-};
-
-export const Warning: Story = {
-  ...Default,
-  args: {
-    ...Default.args,
-    children: [
-      <AlertBar.Icon icon={faExclamationCircle} />,
-      <AlertBar.Label>This is an alert bar</AlertBar.Label>,
-    ],
-    variant: 'warning',
-  },
-};
-
-export const Info: Story = {
-  ...Default,
-  args: {
-    ...Default.args,
-    children: [
-      <AlertBar.Icon icon={faQuestionCircle} />,
-      <AlertBar.Label>This is an alert bar</AlertBar.Label>,
-    ],
-    variant: 'info',
-  },
-};
-
-export const Dismiss: Story = {
-  ...Default,
-  args: {
-    ...Default.args,
-    children: [
-      <AlertBar.Icon icon={faQuestionCircle} />,
-      <AlertBar.Label>This is an alert bar</AlertBar.Label>,
-      <AlertBar.Dismiss onClick={action('clicked')} />,
-    ],
-    variant: 'info',
-  },
-};

package/src/components/AlertBar/index.tsx

@@ -1,82 +0,0 @@
-import { ComponentPropsWithoutRef, forwardRef, HTMLAttributes } from 'react';
-
-import { PickU } from '@components/Pill';
-import { faExclamation } from '@fortawesome/fontawesome-free-solid';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import clsx from 'clsx';
-
-import { Button } from '..';
-import { Icon } from '../Icon';
-
-export interface AlertBarProps {
-  id?: string;
-  className?: string;
-  variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
-  loading?: boolean;
-}
-
-const AlertBarComponent = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement> & AlertBarProps
->(
-  (
-    { id, className, children, variant = 'default', loading, ...props },
-    ref,
-  ) => {
-    return (
-      <div
-        id={id}
-        className={clsx('flex w-full items-center gap-x-4 px-8 py-2', {
-          '': variant === 'default',
-          'border-error-default bg-error-light text-error-default':
-            variant === 'error',
-          'border-info-default bg-info-light text-info-default':
-            variant === 'info',
-          'border-success-default bg-success-light text-success-default':
-            variant === 'success',
-          'border-warning-default bg-warning-light text-warning-default':
-            variant === 'warning',
-        })}
-        ref={ref}
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  },
-);
-
-const AlertBarLabel = forwardRef<
-  HTMLParagraphElement,
-  HTMLAttributes<HTMLParagraphElement>
->(({ ...props }, ref) => (
-  <p className="text-md text-light-grey flex-1 truncate" ref={ref} {...props} />
-));
-
-const AlertBarIcon = forwardRef<
-  SVGSVGElement,
-  PickU<ComponentPropsWithoutRef<typeof Icon>, 'icon'>
->(({ icon }, ref) => <Icon ref={ref} icon={icon} />);
-
-const AlertBarDismiss = forwardRef<
-  HTMLButtonElement,
-  Omit<HTMLAttributes<HTMLButtonElement>, 'icon'>
->(({ ...props }) => (
-  <Button variant="ghost" {...props}>
-    <Icon icon={faExclamation} />
-  </Button>
-));
-
-AlertBarComponent.displayName = 'AlertBar';
-
-AlertBarLabel.displayName = 'AlertBar.Label';
-AlertBarIcon.displayName = 'AlertBar.Icon';
-AlertBarDismiss.displayName = 'AlertBar.Dismiss';
-
-const AlertBar = Object.assign(AlertBarComponent, {
-  Label: AlertBarLabel,
-  Icon: AlertBarIcon,
-  Dismiss: AlertBarDismiss,
-});
-
-export { AlertBar };

package/src/components/Avatar/Avatar.stories.tsx

@@ -1,14 +0,0 @@
-import { Avatar } from './';
-import { Meta, StoryObj } from '@storybook/react';
-
-const meta = {
-  title: 'Components/Avatar',
-  component: Avatar,
-  args: {},
-} satisfies Meta<typeof Avatar>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};