@veeqo/ui 0.0.4 → 0.0.7

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

@@ -1,124 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Banner it renders correctly 1`] = `
-.c5 {
-  box-sizing: border-box;
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 12px;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  line-height: 16px;
-  color: #37424d;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-style: normal;
-  font-weight: 600;
-  font-size: 16px;
-  line-height: 20px;
-  color: #37424D;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-letter-spacing: -0.011rem;
-  -moz-letter-spacing: -0.011rem;
-  -ms-letter-spacing: -0.011rem;
-  letter-spacing: -0.011rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  position: relative;
-  margin: 0;
-  padding: 0;
-}
-
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  padding: 20px 24px 24px 24px;
-  border-radius: 4px;
-  box-shadow: 0px 1px 3px rgba(55,66,77,0.15),inset 4px 0px 0px #37424D;
-}
-
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-.c3 svg {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-.c4 {
-  -webkit-box-flex: 2;
-  -webkit-flex-grow: 2;
-  -ms-flex-positive: 2;
-  flex-grow: 2;
-  margin-right: 12px;
-}
-
-.c6 {
-  position: relative;
-  top: -2px;
-}
-
-<div>
-  <div
-    class="c0 c1"
-  >
-    <div
-      class="c0 c2"
-    >
-      <div
-        class="c0 c3 c4"
-      >
-        <h3
-          class="c5 c6"
-        >
-          Banner content
-        </h3>
-      </div>
-      <div
-        class="c0 c3"
-      />
-    </div>
-  </div>
-</div>
-`;

package/src/components/Banner/styled.ts

@@ -1,49 +0,0 @@
-import styled from 'styled-components';
-
-import { Text } from '../Text';
-import { BaseContainer } from '../BaseContainer';
-import { PillProps } from './types';
-import { sizes } from '../../theme/modules/sizes';
-
-const Pill = styled(BaseContainer)<PillProps>`
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: stretch;
-  padding: 20px 24px 24px 24px;
-  border-radius: 4px;
-  ${({ accentColor }) =>
-    accentColor &&
-    `
-    box-shadow: 0px 1px 3px rgba(55, 66, 77, 0.15), inset 4px 0px 0px ${accentColor};
-  `}
-`;
-
-const Row = styled(BaseContainer)`
-  display: flex;
-  flex-direction: row;
-`;
-
-const Col = styled(BaseContainer)`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  flex-wrap: wrap;
-
-  svg {
-    width: ${sizes.md};
-    height: ${sizes.md};
-  }
-`;
-
-const HeaderCol = styled(Col)`
-  flex-grow: 2;
-  margin-right: 12px;
-`;
-
-const StyledText = styled(Text)`
-  position: relative;
-  top: -2px;
-`;
-
-export { Pill, StyledText as Text, Row, Col, HeaderCol };

package/src/components/Banner/types.ts

@@ -1,23 +0,0 @@
-import { ReactNode, ReactEventHandler } from 'react';
-
-export enum BannerTypes {
-  help = 'help',
-  info = 'info',
-  error = 'error',
-  success = 'success',
-}
-
-export type BannerProps = {
-  type?: keyof typeof BannerTypes | string;
-  text?: string;
-  icon?: Omit<ReactNode, string>;
-  onClose?: ReactEventHandler;
-  className?: string;
-  header?: ReactNode;
-};
-
-export type PillProps = {
-  children?: ReactNode;
-  className?: string;
-  accentColor?: string;
-};

package/src/components/BaseContainer/BaseContainer.test.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { BaseContainer } from './BaseContainer';
-
-describe('Container', () => {
-  test('it renders correctly', () => {
-    const { container } = render(<BaseContainer>Container content</BaseContainer>);
-    expect(container).toMatchSnapshot();
-  });
-});

package/src/components/BaseContainer/BaseContainer.ts

@@ -1,8 +0,0 @@
-import styled from 'styled-components';
-
-export const BaseContainer = styled.div`
-  box-sizing: border-box;
-  position: relative;
-  margin: 0;
-  padding: 0;
-`;

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

@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Container it renders correctly 1`] = `
-.c0 {
-  box-sizing: border-box;
-  position: relative;
-  margin: 0;
-  padding: 0;
-}
-
-<div>
-  <div
-    class="c0"
-  >
-    Container content
-  </div>
-</div>
-`;

package/src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Breadcrumbs } from './Breadcrumbs';
-
-const meta = {
-  title: 'Components/UI/Breadcrumbs',
-  component: Breadcrumbs,
-  tags: ['autodocs'],
-  decorators: [
-    (Story) => (
-      <div
-        style={{
-          background: '#0079D1',
-          color: 'white',
-          padding: '0.875rem 1.5rem',
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
-} satisfies Meta<typeof Breadcrumbs>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const crumbs = [
-  {
-    pathname: '/',
-    title: 'Home',
-  },
-  {
-    pathname: '/settings',
-    title: 'Settings',
-  },
-];
-
-export const Default: Story = {
-  args: {
-    items: crumbs,
-  },
-};

package/src/components/Breadcrumbs/Breadcrumbs.test.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { Breadcrumbs } from '.';
-
-describe('Breadcrumbs', () => {
-  test('it renders correctly', () => {
-    const crumbs = [
-      {
-        pathname: '/',
-        title: 'Home',
-      },
-      {
-        pathname: '/settings',
-        title: 'Settings',
-      },
-    ];
-
-    const { container } = render(<Breadcrumbs items={crumbs} />);
-    expect(container).toMatchSnapshot();
-  });
-});

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { BreadcrumbsSC } from './components/styled';
-import { BreadcrumbsProps, DefaultLinkProps } from './types';
-import { RightArrowIcon } from '../../tempIcons/RightArrowIcon';
-import { sizes } from '../../theme/modules/sizes';
-import { Breadcrumb } from './components/Breadcrumb';
-
-const DefaultSeparator = () => (
-  <RightArrowIcon className="separator" width={sizes.base} height={sizes.base} />
-);
-
-const DefaultLink = ({ children, href }: DefaultLinkProps) => <a href={href}>{children}</a>;
-
-export const Breadcrumbs = ({
-  items,
-  Separator = <DefaultSeparator />,
-  LinkComponent = DefaultLink,
-}: BreadcrumbsProps) => (
-  <BreadcrumbsSC className="breadcrumbs">
-    {items.map((item, i) => (
-      <Breadcrumb
-        key={item.title}
-        title={item.title}
-        href={item.pathname}
-        LinkComponent={LinkComponent}
-      >
-        {items.length !== i + 1 && Separator}
-      </Breadcrumb>
-    ))}
-  </BreadcrumbsSC>
-);

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

@@ -1,91 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Breadcrumbs it renders correctly 1`] = `
-.c0 {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  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;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-weight: normal;
-  font-size: 14px;
-  line-height: 20px;
-}
-
-.c1 {
-  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;
-}
-
-.c1 .separator {
-  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;
-  padding: 0px 0.4rem;
-}
-
-.c1 a {
-  color: inherit;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  text-transform: capitalize;
-}
-
-<div>
-  <ul
-    class="c0 breadcrumbs"
-  >
-    <li
-      class="c1 breadcrumb"
-    >
-      <a
-        href="/"
-      >
-        Home
-      </a>
-      <svg
-        class="separator"
-        fill="none"
-        height="1rem"
-        viewBox="0 0 16 16"
-        width="1rem"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          clip-rule="evenodd"
-          d="M5.99994 11.06L9.05327 8L5.99994 4.94L6.93994 4L10.9399 8L6.93994 12L5.99994 11.06Z"
-          fill="currentColor"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </li>
-    <li
-      class="c1 breadcrumb"
-    >
-      <a
-        href="/settings"
-      >
-        Settings
-      </a>
-    </li>
-  </ul>
-</div>
-`;

package/src/components/Breadcrumbs/components/Breadcrumb.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { BreadcrumbProps } from '../types';
-import { BreadcrumbSC } from './styled';
-
-export const Breadcrumb = ({ children, title, LinkComponent, href }: BreadcrumbProps) => {
-  if (LinkComponent) {
-    return (
-      <BreadcrumbSC className="breadcrumb">
-        <LinkComponent href={href}>{title}</LinkComponent>
-        {children}
-      </BreadcrumbSC>
-    );
-  }
-  return (
-    <BreadcrumbSC className="breadcrumb">
-      {title}
-      {children}
-    </BreadcrumbSC>
-  );
-};

package/src/components/Breadcrumbs/components/styled.ts

@@ -1,31 +0,0 @@
-import styled from 'styled-components';
-import { text } from '../../../theme/modules/text';
-
-export const BreadcrumbsSC = styled.ul`
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  font-family: ${text.body.fontFamily};
-  font-weight: ${text.body.fontWeight};
-  font-size: ${text.body.fontSize};
-  line-height: ${text.body.lineHeight};
-`;
-
-export const BreadcrumbSC = styled.li`
-  display: flex;
-  align-items: center;
-
-  .separator {
-    display: flex;
-    align-items: center;
-    padding: 0px 0.4rem;
-  }
-
-  a {
-    color: inherit;
-    text-decoration: none;
-    text-transform: capitalize;
-  }
-`;

package/src/components/Breadcrumbs/types.ts

@@ -1,23 +0,0 @@
-type Item = {
-  pathname: string;
-  title: string;
-};
-
-type LinkComponentProps = false | React.ComponentType<any>;
-
-export interface BreadcrumbsProps {
-  items: Item[];
-  Separator?: string | React.ReactNode;
-  LinkComponent?: LinkComponentProps;
-}
-export interface BreadcrumbProps {
-  title: string;
-  href: string;
-  LinkComponent?: LinkComponentProps;
-  children?: React.ReactNode;
-}
-
-export interface DefaultLinkProps {
-  children: React.ReactNode;
-  href: string;
-}

package/src/components/Button/Button.stories.tsx

@@ -1,111 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Button } from '.';
-
-const meta = {
-  title: 'Components/Common/Button',
-  component: Button,
-} satisfies Meta<typeof Button>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const argTypes = {
-  loading: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  variant: {
-    options: [
-      'default',
-      'destructive',
-      'primary',
-      'primaryDestructive',
-      'flat',
-      'link',
-      'unstyled',
-    ],
-    control: {
-      type: 'select',
-    },
-  },
-  size: {
-    options: ['sm', 'base'],
-    control: {
-      type: 'select',
-    },
-  },
-};
-
-export const Standard: Story = {
-  argTypes,
-  args: {
-    size: 'base',
-    variant: 'default',
-    children: 'Click me!',
-  },
-};
-
-const testIcon = () => (
-  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" role="presentation">
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M4.22222 2H19.7778C21 2 22 3 22 4.22222V19.7778C22 21 21 22 19.7778 22H4.22222C3 22 2 21 2 19.7778V4.22222C2 3 3 2 4.22222 2ZM6.44444 17.5556H8.66667V9.77778H6.44444V17.5556ZM13.1111 17.5556H10.8889V6.44444H13.1111V17.5556ZM15.3333 17.5556H17.5556V13.1111H15.3333V17.5556Z"
-      fill="currentColor"
-    ></path>
-  </svg>
-);
-
-export const LinkButton: Story = {
-  argTypes,
-  args: {
-    size: 'sm',
-    variant: 'link',
-    children: 'Click me!',
-    icon: testIcon(),
-  },
-};
-
-export const IconButton: Story = {
-  argTypes,
-  args: {
-    size: 'base',
-    variant: 'default',
-    icon: testIcon(),
-  },
-};
-
-export const TextIconButton: Story = {
-  argTypes,
-  args: {
-    size: 'base',
-    variant: 'default',
-    children: 'Click me!',
-    icon: testIcon(),
-  },
-};
-
-export const DropdownButton: Story = {
-  argTypes,
-  args: {
-    size: 'base',
-    variant: 'default',
-    children: 'Click me!',
-    icon: testIcon(),
-    dropdown: true,
-  },
-};
-
-export const LoadingButton: Story = {
-  argTypes,
-  args: {
-    size: 'base',
-    variant: 'default',
-    children: 'Click me!',
-    icon: testIcon(),
-    loading: true,
-  },
-};