@veeqo/ui 0.0.1

package/src/components/Loader/ThreeDots.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+
+export interface ThreeDotsProps {
+  width?: number;
+  height?: number;
+  className?: string;
+  color?: string;
+  label?: string;
+}
+
+const ThreeDots = ({ width, height, className, color, label }: ThreeDotsProps) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 120 30"
+    xmlns="http://www.w3.org/2000/svg"
+    fill={color}
+    aria-label={label}
+  >
+    <circle cx="15" cy="15" r="15">
+      <animate
+        attributeName="r"
+        from="15"
+        to="15"
+        begin="0s"
+        dur="0.8s"
+        values="15;9;15"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+      <animate
+        attributeName="fillOpacity"
+        from="1"
+        to="1"
+        begin="0s"
+        dur="0.8s"
+        values="1;.5;1"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+    <circle cx="60" cy="15" r="9" attributeName="fillOpacity" from="1" to="0.3">
+      <animate
+        attributeName="r"
+        from="9"
+        to="9"
+        begin="0s"
+        dur="0.8s"
+        values="9;15;9"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+      <animate
+        attributeName="fillOpacity"
+        from="0.5"
+        to="0.5"
+        begin="0s"
+        dur="0.8s"
+        values=".5;1;.5"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+    <circle cx="105" cy="15" r="15">
+      <animate
+        attributeName="r"
+        from="15"
+        to="15"
+        begin="0s"
+        dur="0.8s"
+        values="15;9;15"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+      <animate
+        attributeName="fillOpacity"
+        from="1"
+        to="1"
+        begin="0s"
+        dur="0.8s"
+        values="1;.5;1"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+  </svg>
+);
+
+export default ThreeDots;

package/src/components/Loader/__snapshots__/Loader.test.tsx.snap

@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Loader it renders correctly 1`] = `
+<svg
+  height={24}
+  viewBox="0 0 38 38"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <defs>
+    <linearGradient
+      id="a"
+      x1="8.042%"
+      x2="65.682%"
+      y1="0%"
+      y2="23.865%"
+    >
+      <stop
+        offset="0%"
+        stopColor="#588CB0"
+        stopOpacity="0"
+      />
+      <stop
+        offset="63.146%"
+        stopColor="#588CB0"
+        stopOpacity=".631"
+      />
+      <stop
+        offset="100%"
+        stopColor="#588CB0"
+      />
+    </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="#588CB0"
+        strokeWidth="2"
+      >
+        <animateTransform
+          attributeName="transform"
+          dur="0.9s"
+          from="0 18 18"
+          repeatCount="indefinite"
+          to="360 18 18"
+          type="rotate"
+        />
+      </path>
+      <circle
+        cx="36"
+        cy="18"
+        fill="#fff"
+        r="1"
+      >
+        <animateTransform
+          attributeName="transform"
+          dur="0.9s"
+          from="0 18 18"
+          repeatCount="indefinite"
+          to="360 18 18"
+          type="rotate"
+        />
+      </circle>
+    </g>
+  </g>
+</svg>
+`;

package/src/components/Loader/index.ts

@@ -0,0 +1 @@
+export { Loader } from './Loader';

package/src/components/Loader/loaderTypes.ts

@@ -0,0 +1,9 @@
+export type LoaderType = 'Grid' | 'TailSpin' | 'ThreeDots';
+
+export interface LoaderProps {
+  className?: string;
+  height?: number;
+  width?: number;
+  color?: string;
+  type?: LoaderType;
+}

package/src/components/Stack/Alignments.ts

@@ -0,0 +1,10 @@
+enum Alignments {
+  start = 'flex-start',
+  center = 'center',
+  end = 'flex-end',
+  stretch = 'stretch',
+  between = 'space-between',
+  around = 'space-around',
+}
+
+export default Alignments;

package/src/components/Stack/Docs.mdx

@@ -0,0 +1,28 @@
+import { Meta, Primary, Controls, Story } from '@storybook/blocks';
+import * as StackStories from './Stack.stories';
+
+<Meta of={StackStories} />
+
+# Loader
+
+The Stack component is the main layout component used in Veeqo currently.
+
+It is an easy to use flexbox for aligning items.
+
+<Primary />
+
+## Props
+
+Type will default to TailSpin.
+
+<Controls />
+
+## Stories
+
+### Horizontal
+
+<Story of={StackStories.Horizontal} />
+
+### Vertical
+
+<Story of={StackStories.Vertical} />

package/src/components/Stack/Stack.stories.tsx

@@ -0,0 +1,112 @@
+import React, { ReactNode } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Stack } from './Stack';
+
+const meta = {
+  title: 'Components/Layout/Stack',
+  component: Stack,
+} satisfies Meta<typeof Stack>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const alignOptions = ['start', 'center', 'end', 'stretch', 'between', 'around'];
+
+export const Horizontal: Story = {
+  argTypes: {
+    alignX: {
+      options: alignOptions,
+      control: {
+        type: 'select',
+      },
+      defaultValue: 'center',
+    },
+    alignY: {
+      options: alignOptions,
+      control: {
+        type: 'select',
+      },
+      defaultValue: 'center',
+    },
+    direction: {
+      options: ['horizontal', 'vertical'],
+      control: {
+        type: 'radio',
+      },
+      defaultValue: 'horizontal',
+    },
+    spacing: {
+      options: ['xs', 'sm', 'base', 'md', 'lg', 'xl'],
+      control: {
+        type: 'select',
+      },
+      defaultValue: 'base',
+    },
+  },
+  args: {
+    className: 'test-classname',
+    alignX: 'center',
+    alignY: 'center',
+    direction: 'horizontal',
+    spacing: 'base',
+    children: (
+      <>
+        <button>Button 1</button>
+        <button>Button 2</button>
+        <button>Button 3</button>
+        <button>Button 4</button>
+        <button>Button 5</button>
+      </>
+    ) as ReactNode,
+  },
+};
+
+export const Vertical: Story = {
+  argTypes: {
+    alignX: {
+      options: alignOptions,
+      control: {
+        type: 'select',
+      },
+      defaultValue: 'center',
+    },
+    alignY: {
+      options: alignOptions,
+      control: {
+        type: 'select',
+      },
+      defaultValue: 'center',
+    },
+    direction: {
+      options: ['horizontal', 'vertical'],
+      control: {
+        type: 'radio',
+      },
+      defaultValue: 'horizontal',
+    },
+    spacing: {
+      options: ['xs', 'sm', 'base', 'md', 'lg', 'xl'],
+      control: {
+        type: 'select',
+      },
+      defaultValue: 'base',
+    },
+  },
+  args: {
+    className: 'test-classname',
+    alignX: 'center',
+    alignY: 'center',
+    direction: 'vertical',
+    spacing: 'base',
+    children: (
+      <>
+        <button>Button 1</button>
+        <button>Button 2</button>
+        <button>Button 3</button>
+        <button>Button 4</button>
+        <button>Button 5</button>
+      </>
+    ) as ReactNode,
+  },
+};

package/src/components/Stack/Stack.tsx

@@ -0,0 +1,61 @@
+import styled from 'styled-components';
+
+import { StackProps } from './types';
+import Alignments from './Alignments';
+
+import { theme } from '../../theme';
+
+/**
+ * Layout component.
+ */
+export const Stack = styled.div<StackProps>`
+  display: flex;
+
+  ${(props) => {
+    console.log('props', props.alignX, props.alignY);
+    const { direction = 'vertical', alignX = 'start', alignY = 'start', spacing = 'base' } = props;
+
+    let alignItems;
+    let justifyContent;
+    let flexDirection;
+    let itemFlex;
+    let marginTop = '';
+    let marginLeft = '';
+
+    if (direction === 'vertical') {
+      alignItems = alignX && Alignments[alignX];
+      justifyContent = alignY && Alignments[alignY];
+      marginTop = theme.sizes[spacing];
+      flexDirection = 'column';
+    } else {
+      alignItems = alignY && Alignments[alignY];
+      justifyContent = alignX && Alignments[alignX];
+      marginLeft = theme.sizes[spacing];
+      flexDirection = 'row';
+    }
+
+    // These options result in 'justify-content: stretch' which doesn't exist,
+    // so instead we set the flex of child elements
+    if (
+      (direction === 'vertical' && alignY === 'stretch') ||
+      (direction === 'horizontal' && alignX === 'stretch')
+    ) {
+      itemFlex = 1;
+    }
+
+    return `
+      align-items: ${alignItems};
+      justify-content: ${justifyContent};
+      flex-direction: ${flexDirection};
+
+      & > * {
+        flex: ${itemFlex};
+      }
+
+      & > * + * {
+        margin-top: ${marginTop};
+        margin-left: ${marginLeft};
+      }
+    `;
+  }}
+`;

package/src/components/Stack/__snapshots__/Stack.test.tsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders correctly 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c0 > * {
+  -webkit-flex: undefined;
+  -ms-flex: undefined;
+  flex: undefined;
+}
+
+.c0 > * + * {
+  margin-top: 1rem;
+}
+
+<div
+  className="c0"
+>
+  <div>
+    One
+  </div>
+  <div>
+    Two
+  </div>
+  <div>
+    Three
+  </div>
+</div>
+`;

package/src/components/Stack/index.ts

@@ -0,0 +1 @@
+export { Stack } from './Stack';

package/src/components/Stack/types.ts

@@ -0,0 +1,73 @@
+import { ReactNode } from 'react';
+import Alignments from './Alignments';
+
+type Alignment = keyof typeof Alignments;
+
+enum SizeAlias {
+  none = 'none',
+  line = 'line',
+  xs = 'xs',
+  sm = 'sm',
+  base = 'base',
+  md = 'md',
+  lg = 'lg',
+  xl = 'xl',
+  xxl = 'xxl',
+}
+
+export type SizeScaleIndex = number | keyof typeof SizeAlias;
+export type SizeScale = {
+  [index: number]: string;
+  [index: string]: string;
+};
+
+type SizeScaleBuilderConfig = {
+  increment: number;
+  unit: string;
+  count: number;
+};
+function buildSizeScale({ increment, unit, count }: SizeScaleBuilderConfig): SizeScale {
+  const sizes: SizeScale = {};
+  /* eslint-disable-next-line no-plusplus */
+  for (let i = 0; i <= count; i++) {
+    const value = i * increment;
+    sizes[i] = `${value}${unit}`;
+  }
+  return sizes;
+}
+
+export const sizeScale = buildSizeScale({ increment: 0.25, unit: 'rem', count: 20 });
+
+export const sizeAliases: SizeScale = {
+  [SizeAlias.none]: '0',
+  [SizeAlias.line]: '1px',
+  [SizeAlias.xs]: sizeScale[1],
+  [SizeAlias.sm]: sizeScale[2],
+  [SizeAlias.base]: sizeScale[4],
+  [SizeAlias.md]: sizeScale[6],
+  [SizeAlias.lg]: sizeScale[8],
+  [SizeAlias.xl]: sizeScale[12],
+  [SizeAlias.xxl]: sizeScale[16],
+};
+
+const sizes: SizeScale = {
+  ...sizeAliases,
+  ...sizeScale,
+};
+
+export type Size = keyof typeof sizes;
+
+export type StackProps = {
+  children: ReactNode;
+  /**
+   * Classname for description
+   */
+  className?: string;
+  /**
+   * Direction of component
+   */
+  direction?: 'vertical' | 'horizontal';
+  alignX?: Alignment;
+  alignY?: Alignment;
+  spacing?: Size;
+};

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export { Loader } from './Loader';
+export { Stack } from './Stack';

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './theme';

package/src/theme/index.ts

@@ -0,0 +1,18 @@
+import { colors } from './modules/colors';
+import { breakpoints } from './modules/breakpoints';
+import { layers } from './modules/layers';
+import { radius } from './modules/radius';
+import { shadows } from './modules/shadows';
+import { sizes } from './modules/sizes';
+import { text, common } from './modules/text';
+
+export const theme = {
+  ...common,
+  breakpoints,
+  colors,
+  layers,
+  radius,
+  shadows,
+  sizes,
+  text,
+};

package/src/theme/modules/breakpoints.ts

@@ -0,0 +1,7 @@
+export const breakpoints = {
+  mobile: '640px',
+  tablet: '720px',
+  lgTablet: '960px',
+  desktop: '1280px',
+  lgDesktop: '1440px',
+} as const;

package/src/theme/modules/colors.ts

@@ -0,0 +1,116 @@
+export const colors = {
+  brand: {
+    blue: {
+      lightest: '#E4F0F9',
+      light: '#93C6E8',
+      base: '#4CA1D9',
+      dark: '#3878A2',
+      darkest: '#1A384B',
+    },
+    peach: {
+      lightest: '#FDECE9',
+      light: '#F8B2A9',
+      base: '#F48070',
+      dark: '#B65F53',
+      darkest: '#562D27',
+    },
+  },
+  neutral: {
+    ink: {
+      lightest: '#959FA8',
+      light: '#637381',
+      base: '#37424D',
+      dark: '#1B2126',
+    },
+    grey: {
+      lightest: '#FAFAFB',
+      light: '#F2F3F5',
+      base: '#DFE3E8',
+      dark: '#CDD1D5',
+    },
+    greyBlue: {
+      lightest: '#AAC5D8',
+      light: '#558BB1',
+      base: '#406885',
+      dark: '#1E313E',
+    },
+  },
+  secondary: {
+    red: {
+      lightest: '#FDEEEE',
+      light: '#F7BCBC',
+      base: '#EB5757',
+      dark: '#A53D3D',
+      darkest: '#5E2323',
+    },
+    yellow: {
+      lightest: '#FFF6D9',
+      light: '#FFE999',
+      base: '#FFC900',
+      dark: '#BF9600',
+      darkest: '#594600',
+    },
+    green: {
+      lightest: '#E9F7EF',
+      light: '#BEE7CF',
+      base: '#27AE60',
+      dark: '#1B7A43',
+      darkest: '#104626',
+    },
+    lime: {
+      lightest: '#F6FAEB',
+      light: '#DBEBAE',
+      base: '#A5CD35',
+      dark: '#7B9927',
+      darkest: '#394712',
+    },
+    teal: {
+      lightest: '#E5F8F5',
+      light: '#99E5D7',
+      base: '#00BD9A',
+      dark: '#00715C',
+      darkest: '#00392E',
+    },
+    aqua: {
+      lightest: '#EEFAFE',
+      light: '#BBEBFA',
+      base: '#56CCF2',
+      dark: '#3C8FA9',
+      darkest: '#225261',
+    },
+    purple: {
+      lightest: '#F6EFFC',
+      light: '#D9C0F1',
+      base: '#A162DD',
+      dark: '#694090',
+      darkest: '#38224D',
+    },
+    blue: {
+      lightest: '#D9EBF8',
+      light: '#80BCE8',
+      base: '#0079D1',
+      dark: '#005A9C',
+      darkest: '#003053',
+    },
+    pink: {
+      lightest: '#FFF1FC',
+      light: '#FFC7F3',
+      base: '#FFA3EB',
+      dark: '#BF7AB0',
+      darkest: '#593852',
+    },
+    orange: {
+      lightest: '#FEF5ED',
+      light: '#FAD6B7',
+      base: '#F2994A',
+      dark: '#9D6330',
+      darkest: '#613D1E',
+    },
+  },
+  system: {
+    scrollbar: {
+      thumb: 'rgba(99, 115, 129, .5)',
+      background: 'transparent',
+    },
+  },
+};

package/src/theme/modules/layers.ts

@@ -0,0 +1,6 @@
+export const layers = {
+  base: 0,
+  popup: 1000,
+  modal: 2000,
+  tooltip: 3000,
+};

package/src/theme/modules/radius.ts

@@ -0,0 +1,7 @@
+export const radius = {
+  sm: '0.125rem',
+  base: '0.25rem',
+  md: '0.5rem',
+  lg: '0.75rem',
+  full: '50%',
+};

package/src/theme/modules/shadows.ts

@@ -0,0 +1,6 @@
+export enum shadows {
+  sm = '0px 1px 3px rgba(55, 66, 77, 0.15)',
+  base = '0px 4px 6px rgba(27, 33, 38, 0.2)',
+  md = '0px 10px 15px rgba(27, 33, 38, 0.2)',
+  lg = '0px 20px 25px rgba(27, 33, 38, 0.2)',
+}