@veeqo/ui 0.0.1

package/lib/theme/modules/text.d.ts

@@ -0,0 +1,315 @@
+export declare const common: {
+    fontFamily: string;
+};
+export declare const text: {
+    headingXXL: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: number;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    headingXL: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: number;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    headingLarge: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: number;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    headingMedium: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: number;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    headingSmall: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: number;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    headingTable: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: number;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    subheadingLarge: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: string;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    subheadingMedium: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: string;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    subheadingSmall: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: string;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    subheadingSmallBold: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: number;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    body: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: string;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    bodySmall: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: string;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    bodyBold: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: number;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    bodyBoldDark: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: number;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    bodySmallBold: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: number;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    button: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: number;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    buttonSmall: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: number;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    linkLarge: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: string;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    linkMedium: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: string;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    link: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: string;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    linkSmall: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: string;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    inputLabel: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: number;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    inputLabelSmall: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: number;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    hintText: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: string;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    placeholder: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: string;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    placeholderSmall: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: string;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    placeholderCode: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: string;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    placeholderCodeSmall: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: string;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    error: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: number;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    errorSmall: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: number;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+    successSmall: {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: number;
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+        textDecoration: string;
+        letterSpacing: string;
+    };
+};

package/lib/theme/storybook/components.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Swatch: ({ color }: any) => React.JSX.Element;

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@veeqo/ui",
+  "version": "0.0.1",
+  "description": "New optimised component library for Veeqo.",
+  "author": "Robert Wealthall",
+  "license": "UNLICENSED",
+  "sideEffects": false,
+  "main": "lib/index.js",
+  "module": "lib/index.esm.js",
+  "types": "lib/index.d.ts",
+  "directories": {
+    "lib": "lib"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "rollup -c",
+    "release": "release-it && npm publish"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^15.2.1",
+    "@rollup/plugin-terser": "^0.4.3",
+    "@rollup/plugin-typescript": "^11.1.3",
+    "@storybook/addon-essentials": "^7.4.1",
+    "@storybook/addon-interactions": "^7.4.1",
+    "@storybook/addon-links": "^7.4.1",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.4.1",
+    "@storybook/react": "^7.4.1",
+    "@storybook/react-vite": "^7.4.1",
+    "@storybook/testing-library": "^0.2.0",
+    "@types/react": "^18.2.21",
+    "framer-motion": "^10.16.4",
+    "prettier": "^3.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "release-it": "^16.1.5",
+    "rollup": "^3.29.2",
+    "rollup-plugin-dts": "^6.0.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "storybook": "^7.4.1",
+    "styled-components": "^6.0.8",
+    "typescript": "^5.2.2"
+  },
+  "peerDependencies": {
+    "framer-motion": "^10.16.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.0.8"
+  }
+}

package/rollup.config.mjs

@@ -0,0 +1,49 @@
+import typescriptEngine from 'typescript';
+import dts from 'rollup-plugin-dts';
+import terser from '@rollup/plugin-terser';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import resolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+
+import packageJson from './package.json' assert { type: 'json' };
+
+export default [
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        file: packageJson.main,
+        format: 'cjs',
+        sourcemap: true,
+      },
+      {
+        file: packageJson.module,
+        format: 'esm',
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      peerDepsExternal(), // Don't include peer dependencies, should be given by client.
+      resolve(), // Resolve paths
+      typescript({
+        tsconfig: './tsconfig.json',
+        typescript: typescriptEngine,
+        sourceMap: true,
+        exclude: [
+          '**/__snapshots__/*',
+          '**/__tests__',
+          '**/*.test.ts+(|x)',
+          '**/*.story.ts+(|x)',
+          '**/*.stories.ts+(|x)',
+          '**/*.mdx',
+        ],
+      }),
+      terser(),
+    ],
+  },
+  {
+    input: 'lib/index.d.ts',
+    output: [{ file: 'lib/index.d.ts', format: 'esm' }],
+    plugins: [dts()],
+  },
+];

package/src/components/Loader/Docs.mdx

@@ -0,0 +1,26 @@
+import { Meta, Primary, Controls, Story } from '@storybook/blocks';
+import * as LoaderStories from './Loader.stories';
+
+<Meta of={LoaderStories} />
+
+# Loader
+
+The loader component should be used to indicate to a user that something is loading, such as a page or a button.
+
+<Primary />
+
+## Props
+
+Type will default to TailSpin.
+
+<Controls />
+
+## Stories
+
+Grid, TailSpin and ThreeDots loading states.
+
+<div style={{ display: 'flex', gap: '20px' }}>
+  <Story of={LoaderStories.Primary} />
+  <Story of={LoaderStories.TailSpin} />
+  <Story of={LoaderStories.ThreeDots} />
+</div>

package/src/components/Loader/Grid.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+
+export interface GridProps {
+  width?: number;
+  height?: number;
+  className?: string;
+  color?: string;
+  label?: string;
+}
+
+const Grid = ({ width, height, className, color, label }: GridProps) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 105 105"
+    fill={color}
+    aria-label={label}
+  >
+    <circle cx="12.5" cy="12.5" r="12.5">
+      <animate
+        attributeName="fill-opacity"
+        begin="0s"
+        dur="1s"
+        values="1;.2;1"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+    <circle cx="12.5" cy="52.5" r="12.5">
+      <animate
+        attributeName="fill-opacity"
+        begin="100ms"
+        dur="1s"
+        values="1;.2;1"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+    <circle cx="52.5" cy="12.5" r="12.5">
+      <animate
+        attributeName="fill-opacity"
+        begin="300ms"
+        dur="1s"
+        values="1;.2;1"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+    <circle cx="52.5" cy="52.5" r="12.5">
+      <animate
+        attributeName="fill-opacity"
+        begin="600ms"
+        dur="1s"
+        values="1;.2;1"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+    <circle cx="92.5" cy="12.5" r="12.5">
+      <animate
+        attributeName="fill-opacity"
+        begin="800ms"
+        dur="1s"
+        values="1;.2;1"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+    <circle cx="92.5" cy="52.5" r="12.5">
+      <animate
+        attributeName="fill-opacity"
+        begin="400ms"
+        dur="1s"
+        values="1;.2;1"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+    <circle cx="12.5" cy="92.5" r="12.5">
+      <animate
+        attributeName="fill-opacity"
+        begin="700ms"
+        dur="1s"
+        values="1;.2;1"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+    <circle cx="52.5" cy="92.5" r="12.5">
+      <animate
+        attributeName="fill-opacity"
+        begin="500ms"
+        dur="1s"
+        values="1;.2;1"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+    <circle cx="92.5" cy="92.5" r="12.5">
+      <animate
+        attributeName="fill-opacity"
+        begin="200ms"
+        dur="1s"
+        values="1;.2;1"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+  </svg>
+);
+
+export default Grid;

package/src/components/Loader/Loader.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Loader } from './Loader';
+
+const meta = {
+  title: 'Components/Common/Loader',
+  component: Loader,
+} satisfies Meta<typeof Loader>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  argTypes: {
+    type: {
+      options: ['Grid', 'TailSpin', 'ThreeDots'],
+      control: {
+        type: 'select',
+      },
+      defaultValue: 'Grid',
+    },
+  },
+  args: {
+    type: 'Grid',
+    height: 32,
+    width: 32,
+  },
+};
+
+export const TailSpin: Story = {
+  argTypes: {
+    type: {
+      options: ['Grid', 'TailSpin', 'ThreeDots'],
+      control: {
+        type: 'select',
+      },
+      defaultValue: 'TailSpin',
+    },
+  },
+  args: {
+    type: 'TailSpin',
+    height: 32,
+    width: 32,
+  },
+};
+
+export const ThreeDots: Story = {
+  argTypes: {
+    type: {
+      options: ['Grid', 'TailSpin', 'ThreeDots'],
+      control: {
+        type: 'select',
+      },
+      defaultValue: 'ThreeDots',
+    },
+  },
+  args: {
+    type: 'ThreeDots',
+    height: 32,
+    width: 32,
+  },
+};

package/src/components/Loader/Loader.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import TailSpin from './TailSpin';
+import Grid from './Grid';
+import ThreeDots from './ThreeDots';
+
+import { LoaderProps } from './loaderTypes';
+
+export const Loader = ({
+  className,
+  height = 24,
+  width = 24,
+  color = '#588CB0',
+  type = 'TailSpin',
+}: LoaderProps) => {
+  switch (type) {
+    case 'Grid': {
+      return <Grid className={className} height={height} width={width} color={color} />;
+    }
+    case 'ThreeDots': {
+      return <ThreeDots className={className} height={height} width={width} color={color} />;
+    }
+    default:
+    case 'TailSpin': {
+      return <TailSpin className={className} height={height} width={width} color={color} />;
+    }
+  }
+};

package/src/components/Loader/TailSpin.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+export interface TailSpinProps {
+  width?: number;
+  height?: number;
+  className?: string;
+  color?: string;
+  label?: string;
+}
+
+const TailSpin = ({ width, height, className, color, label }: TailSpinProps) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 38 38"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-label={label}
+  >
+    <defs>
+      <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
+        <stop stopColor={color} stopOpacity="0" offset="0%" />
+        <stop stopColor={color} stopOpacity=".631" offset="63.146%" />
+        <stop stopColor={color} offset="100%" />
+      </linearGradient>
+    </defs>
+    <g fill="none" fillRule="evenodd">
+      <g transform="translate(1 1)">
+        <path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke={color} strokeWidth="2">
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            from="0 18 18"
+            to="360 18 18"
+            dur="0.9s"
+            repeatCount="indefinite"
+          />
+        </path>
+        <circle fill="#fff" cx="36" cy="18" r="1">
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            from="0 18 18"
+            to="360 18 18"
+            dur="0.9s"
+            repeatCount="indefinite"
+          />
+        </circle>
+      </g>
+    </g>
+  </svg>
+);
+
+export default TailSpin;