@veeqo/ui 0.0.4 → 0.0.7

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

@@ -1,182 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Renders correctly 1`] = `
-.c3 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 8px;
-}
-
-.c3 svg {
-  width: 1rem;
-  height: 1rem;
-}
-
-.c1 {
-  position: relative;
-  box-sizing: border-box;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-weight: 400;
-  border: 1px solid;
-  background-color: transparent;
-  white-space: nowrap;
-  --outline-width: 4px;
-  height: 40px;
-  padding-left: 24px;
-  padding-right: 24px;
-  border-radius: 8px;
-  font-size: 16px;
-}
-
-.c1:hover {
-  cursor: pointer;
-}
-
-.c1:disabled {
-  pointer-events: none;
-  cursor: unset !important;
-}
-
-.c1 > span {
-  position: relative;
-  top: -1px;
-}
-
-.c2 {
-  border-color: #CDD1D5;
-  background-color: white;
-  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
-  color: #37424D;
-}
-
-.c2:hover {
-  background-color: #FAFAFB;
-}
-
-.c2:active {
-  background-color: #FAFAFB;
-  border-color: #0079D1;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-
-.c2:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-  outline: 0;
-}
-
-.c2:disabled {
-  box-shadow: none !important;
-  background-color: #DFE3E8 !important;
-  border-color: #DFE3E8 !important;
-  color: #637381 !important;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c0 > * {
-  margin-left: 0;
-  margin-right: 0;
-  box-shadow: none;
-}
-
-.c0 > *:not(:last-child) {
-  border-right-width: 0 !important;
-}
-
-.c0 > *:focus,
-.c0 > *:active {
-  z-index: 5;
-  border-right-width: 1px !important;
-}
-
-.c0 > *:focus + *,
-.c0 > *:active + * {
-  border-left-width: 0 !important;
-}
-
-.c0 > *:not(:first-child):not(:last-child) {
-  border-top-left-radius: 0 !important;
-  border-top-right-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-
-.c0 > *:first-child {
-  border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-
-.c0 > *:last-child {
-  border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
-}
-
-<div>
-  <div
-    class="c0"
-  >
-    <button
-      class="c1 c2"
-    >
-      <span
-        class="c3"
-      >
-        <span>
-          One
-        </span>
-      </span>
-    </button>
-    <button
-      class="c1 c2"
-    >
-      <span
-        class="c3"
-      >
-        <span>
-          Two
-        </span>
-      </span>
-    </button>
-    <button
-      class="c1 c2"
-    >
-      <span
-        class="c3"
-      >
-        <span>
-          Three
-        </span>
-      </span>
-    </button>
-  </div>
-</div>
-`;

package/src/components/InputGroup/index.ts

@@ -1,46 +0,0 @@
-import styled from 'styled-components';
-
-export const InputGroup = styled.div`
-  display: flex;
-
-  & > * {
-    margin-left: 0;
-    margin-right: 0;
-    box-shadow: none;
-  }
-
-  & > *:not(:last-child) {
-    border-right-width: 0 !important;
-  }
-
-  & > *:hover {
-  }
-
-  & > *:focus,
-  & > *:active {
-    z-index: 5;
-    border-right-width: 1px !important;
-  }
-
-  & > *:focus + *,
-  & > *:active + * {
-    border-left-width: 0 !important;
-  }
-
-  & > *:not(:first-child):not(:last-child) {
-    border-top-left-radius: 0 !important;
-    border-top-right-radius: 0 !important;
-    border-bottom-left-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
-  }
-
-  & > *:first-child {
-    border-top-right-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
-  }
-
-  & > *:last-child {
-    border-top-left-radius: 0 !important;
-    border-bottom-left-radius: 0 !important;
-  }
-`;

package/src/components/Loader/Docs.mdx

@@ -1,26 +0,0 @@
-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.Grid} />
-  <Story of={LoaderStories.TailSpin} />
-  <Story of={LoaderStories.ThreeDots} />
-</div>

package/src/components/Loader/Grid.tsx

@@ -1,111 +0,0 @@
-import React from 'react';
-
-export interface GridProps {
-  width?: number;
-  height?: number;
-  className?: string;
-  color?: string;
-  label?: string;
-}
-
-export 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>
-);

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

@@ -1,62 +0,0 @@
-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 Grid: 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.test.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { Loader } from './Loader';
-import { LoaderType } from './loaderTypes';
-
-describe('Loader', () => {
-  test.each(['Grid', 'TailSpin', 'ThreeDots', undefined] as (LoaderType | undefined)[])(
-    'renders %s loader',
-    (type) => {
-      const { container } = render(<Loader type={type} />);
-      expect(container.firstChild).toMatchSnapshot();
-    },
-  );
-});

package/src/components/Loader/Loader.tsx

@@ -1,28 +0,0 @@
-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} />;
-    }
-    case 'TailSpin':
-    default: {
-      return <TailSpin className={className} height={height} width={width} color={color} />;
-    }
-  }
-};

package/src/components/Loader/TailSpin.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-
-export interface TailSpinProps {
-  width?: number;
-  height?: number;
-  className?: string;
-  color?: string;
-  label?: string;
-}
-
-export 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>
-);

package/src/components/Loader/ThreeDots.tsx

@@ -1,88 +0,0 @@
-import React from 'react';
-
-export interface ThreeDotsProps {
-  width?: number;
-  height?: number;
-  className?: string;
-  color?: string;
-  label?: string;
-}
-
-export 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>
-);