trepur_components 2.3.3 → 2.3.4

package/archive/Tubestops/style.module.css

@@ -0,0 +1,54 @@
+.wrapper {
+  @apply flex py-4;
+}
+
+.item {
+  @apply w-full;
+  min-width: 120px;
+}
+
+.circle {
+  @apply z-10 mx-auto h-6 w-6 rounded-full;
+}
+
+.completedCircle {
+  @apply -mt-4 bg-success;
+}
+
+.inactiveCircle {
+  @apply -mt-4 bg-border-light;
+}
+
+.activeCircle {
+  @apply -mt-4 bg-gold;
+}
+
+.circleLast {
+  @apply mt-1;
+}
+
+.line {
+  @apply mt-4 h-1 w-full bg-border-light;
+  margin-left: 50%;
+}
+
+.completedLine {
+  @apply mt-4 h-1 w-full bg-success;
+  margin-left: 50%;
+}
+
+.text {
+  @apply mt-2 text-center;
+}
+
+.activeStop {
+  @apply font-bold text-gold;
+}
+
+.inactiveStop {
+  @apply font-medium text-border-light;
+}
+
+.completedStop {
+  @apply font-medium text-success;
+}

package/archive/UserIcon/UserIcon.stories.tsx

@@ -0,0 +1,52 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import UserIcon from '.';
+
+const meta = {
+  title: 'Components/User Icon',
+  component: UserIcon,
+  argTypes: {
+    ...idAndClassName,
+
+    name: {
+      description: '',
+      control: 'text',
+      table: {
+        category: '',
+      },
+    },
+    description: {
+      description: '',
+      control: 'text',
+      table: {
+        category: '',
+      },
+    },
+    imageProps: {
+      type: { name: 'other', value: 'object' },
+      description: 'The props to pass to the image to display on the component',
+      table: {
+        type: {
+          summary: 'object',
+        },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+  },
+  args: {
+    imageProps: {
+      title: '',
+      altText: '',
+      src: 'https://picsum.photos/200/200',
+    },
+    name: 'Someones name',
+    description: 'someone info',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/archive/UserIcon/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import Image, { type Props as imageProps } from '@components/Image';
+import classNames from 'classnames';
+
+
+
+export interface Props {
+  id?: string;
+  className?: string;
+  name?: string;
+  description?: string;
+  imageProps?: imageProps;
+}
+const UserIcon = ({
+  id,
+  className,
+  name,
+  description,
+  imageProps,
+}: Props): JSX.Element => {
+  const classList = classNames(
+    {
+      className: className !== undefined,
+    },
+    style.classList,
+    'theme-local',
+  );
+
+  imageProps = {
+    ...imageProps,
+    src: imageProps?.src !== undefined ? imageProps.src : '',
+    className: classNames(imageProps?.className, style.imageClassList),
+  };
+  return (
+    <div id={id} className={classList}>
+      <Image {...imageProps} />
+      <div className={style.contentWrapper}>
+        <p className={style.name}>{name}</p>
+        <p className={style.description}>{description}</p>
+      </div>
+    </div>
+  );
+};
+
+export default UserIcon;

package/archive/UserIcon/style.module.css

@@ -0,0 +1,19 @@
+.classList {
+  @apply flex items-center;
+}
+
+.imageClassList {
+  @apply mr-4 h-12 w-12 shrink-0 rounded-full;
+}
+
+.name {
+  @apply text-md font-regular;
+}
+
+.description {
+  @apply text-sm font-light;
+}
+
+.contentWrapper {
+  @apply ltr:ml-3 rtl:mr-3;
+}

package/archive/Video/Video.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import Video from '.';
+
+const meta = {
+  title: 'Components/Video',
+  component: Video,
+  argTypes: {
+    ...idAndClassName,
+  },
+  args: {
+    withControls: true,
+    autoPlay: true,
+    muted: true,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/archive/Video/index.tsx

@@ -0,0 +1,47 @@
+export interface Props {
+  id?: string;
+  className?: string;
+  autoPlay?: boolean;
+  muted?: boolean;
+  poster?: string;
+  mp4File?: string;
+  webmFile?: string;
+  ogvFile?: string;
+  height?: string;
+  width?: string;
+  withControls?: boolean;
+  withPoster?: boolean;
+}
+
+const Video = ({
+  id,
+  className,
+  autoPlay,
+  muted,
+  poster,
+  mp4File,
+  webmFile,
+  ogvFile,
+  height,
+  width,
+  withControls,
+}: Props): JSX.Element => {
+  return (
+    <video
+      id={id}
+      className={className}
+      poster={poster}
+      width={width}
+      height={height}
+      controls={withControls}
+      autoPlay={autoPlay}
+      muted={muted}
+    >
+      <source src={mp4File} type="video/mp4" />
+      {webmFile !== null && <source src={webmFile} type="video/webm" />}
+      {ogvFile !== undefined && <source src={ogvFile} type="video/ogg" />}
+    </video>
+  );
+};
+
+export default Video;

package/archive/fonts/Sora/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2019 The Sora Project Authors (https://github.com/sora-xor/sora-font)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/archive/fonts/Sora/README.txt

@@ -0,0 +1,70 @@
+Sora Variable Font
+==================
+
+This download contains Sora as both a variable font and static fonts.
+
+Sora is a variable font with this axis:
+  wght
+
+This means all the styles are contained in a single file:
+  Sora-VariableFont_wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Sora:
+  static/Sora-Thin.ttf
+  static/Sora-ExtraLight.ttf
+  static/Sora-Light.ttf
+  static/Sora-Regular.ttf
+  static/Sora-Medium.ttf
+  static/Sora-SemiBold.ttf
+  static/Sora-Bold.ttf
+  static/Sora-ExtraBold.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.

package/archive/theme.ts

@@ -0,0 +1,39 @@
+import  from '../../tailwind.config.js';
+
+// const tokenUnits: string[] = ['em', 'ex', '%', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ch', 'rem', 'vh', 'vw', 'vmin', 'vmax']
+let themeName: string;
+
+export const setTheme = (theme: string): void => {
+  themeName = theme;
+};
+
+export const getTheme = (): string => {
+  return themeName;
+};
+
+const getThemeFromOptions = (themeName?: string): any => {
+  const themes = tailwindConfig.themes;
+
+  if (themeName == null) return tailwindConfig.theme;
+
+  // eslint-disable-next-line @typescript-eslint/no-confusing-void-expression
+  const theme = themes.find((t: any) => t.name === themeName);
+  return theme ?? tailwindConfig.theme;
+};
+
+export function getTwVal<Type>(
+  section: string,
+  property: string,
+): Type | undefined {
+  try {
+    const theme =
+      section === 'colors'
+        ? getThemeFromOptions(themeName)
+        : tailwindConfig.theme;
+    return theme[section][property];
+  } catch (e) {
+    console.warn(e);
+    console.warn(`Unable to get tailwind value ${section}: ${property}`);
+    return undefined;
+  }
+}

package/archive/typography/Fonts/Fonts.stories.tsx

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

package/archive/typography/Fonts/Fonts.tsx

@@ -0,0 +1,181 @@
+import React from 'react';
+
+import Icon from '@components/Icon';
+
+import '../../styles/base.css';
+
+const Fonts: React.FC<{}> = (): JSX.Element => {
+  return (
+    <div className="theme-local">
+      <h2>Font sizes</h2>
+      <div className="flex items-center">
+        <Icon
+          className="mx-4"
+          type="check"
+          bgColour="success"
+          colour="white"
+          rounded
+          size={1}
+        />
+        <p className="text-xxs font-regular">This text is xxs</p>
+      </div>
+      <div className="flex items-center">
+        <Icon
+          className="mx-4"
+          type="check"
+          bgColour="success"
+          colour="white"
+          rounded
+          size={1}
+        />
+        <p className="text-xs font-regular">This text is xs</p>
+      </div>
+      <div className="flex items-center">
+        <Icon
+          className="mx-4"
+          type="check"
+          bgColour="success"
+          colour="white"
+          rounded
+          size={1}
+        />
+        <p className="text-sm font-regular">This text is sm</p>
+      </div>
+      <div className="flex items-center">
+        <Icon
+          className="mx-4"
+          type="check"
+          bgColour="success"
+          colour="white"
+          rounded
+          size={1}
+        />
+        <p className="text-md font-regular">This text is md</p>
+      </div>
+      <div className="flex items-center">
+        <Icon
+          className="mx-4"
+          type="check"
+          bgColour="success"
+          colour="white"
+          rounded
+          size={1}
+        />
+        <p className="text-lg font-regular">This text is lg</p>
+      </div>
+      <div className="flex items-center">
+        <Icon
+          className="mx-4"
+          type="check"
+          bgColour="success"
+          colour="white"
+          rounded
+          size={1}
+        />
+        <p className="text-xl font-regular">This text is xl</p>
+      </div>
+      <div className="flex items-center">
+        <Icon
+          className="mx-4"
+          type="check"
+          bgColour="success"
+          colour="white"
+          rounded
+          size={1}
+        />
+        <p className="text-xxl font-regular">This text is xxl</p>
+      </div>
+      <h2>Font weights</h2>
+      <div className="flex items-center">
+        <Icon
+          className="mx-4"
+          type="check"
+          bgColour="success"
+          colour="white"
+          rounded
+          size={1}
+        />
+        <p className="text-md font-thin">This font is thin</p>
+      </div>
+      <div className="flex items-center">
+        <Icon
+          className="mx-4"
+          type="check"
+          bgColour="success"
+          colour="white"
+          rounded
+          size={1}
+        />
+        <p className="text-md font-extraLight">This font is extra light</p>
+      </div>
+      <div className="flex items-center">
+        <Icon
+          className="mx-4"
+          type="check"
+          bgColour="success"
+          colour="white"
+          rounded
+          size={1}
+        />
+        <p className="text-md font-light">This font is light</p>
+      </div>
+      <div className="flex items-center">
+        <Icon
+          className="mx-4"
+          type="check"
+          bgColour="success"
+          colour="white"
+          rounded
+          size={1}
+        />
+        <p className="text-md font-regular">This font is regular</p>
+      </div>
+      <div className="flex items-center">
+        <Icon
+          className="mx-4"
+          type="check"
+          bgColour="success"
+          colour="white"
+          rounded
+          size={1}
+        />
+        <p className="text-md font-medium">This font is medium</p>
+      </div>
+      <div className="flex items-center">
+        <Icon
+          className="mx-4"
+          type="check"
+          bgColour="success"
+          colour="white"
+          rounded
+          size={1}
+        />
+        <p className="text-md font-semiBold">This font is semi bold</p>
+      </div>
+      <div className="flex items-center">
+        <Icon
+          className="mx-4"
+          type="check"
+          bgColour="success"
+          colour="white"
+          rounded
+          size={1}
+        />
+        <p className="text-md font-bold">This font is bold</p>
+      </div>
+      <div className="flex items-center">
+        <Icon
+          className="mx-4"
+          type="check"
+          bgColour="success"
+          colour="white"
+          rounded
+          size={1}
+        />
+        <p className="text-md font-extraBold">This font is extra bold</p>
+      </div>
+    </div>
+  );
+};
+
+export default Fonts;