@veeqo/ui 0.0.4 → 0.0.7

package/src/components/AnimatedDropdown/components/BasicDropdown.tsx

@@ -1,17 +0,0 @@
-import React, { forwardRef } from 'react';
-
-import { Container } from './styled';
-
-import { BasicDropdownProps } from '../types';
-
-export const BasicDropdown = forwardRef<HTMLDivElement, BasicDropdownProps>(
-  (props: BasicDropdownProps, ref) => {
-    const { children, className } = props;
-
-    return (
-      <Container className={className} ref={ref}>
-        {children}
-      </Container>
-    );
-  },
-);

package/src/components/AnimatedDropdown/components/__snapshots__/BasicDropdown.test.tsx.snap

@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BasicDropdown it renders correctly 1`] = `
-.c0 {
-  box-sizing: border-box;
-  position: relative;
-  margin: 0;
-  padding: 0;
-}
-
-.c1 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  background-color: #ffffff;
-  box-shadow: 1px 4px 15px rgba(27,33,38,0.25);
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-<div>
-  <div
-    class="c0 c1"
-  >
-    <p>
-      Dropdown content
-    </p>
-  </div>
-</div>
-`;

package/src/components/AnimatedDropdown/components/styled.ts

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-
-import { BaseContainer } from '../../BaseContainer/BaseContainer';
-
-export const Container = styled(BaseContainer)`
-  display: inline-flex;
-  background-color: #ffffff;
-  box-shadow: 1px 4px 15px rgba(27, 33, 38, 0.25);
-  border-radius: 4px;
-  overflow: hidden;
-`;

package/src/components/AnimatedDropdown/styled.ts

@@ -1,51 +0,0 @@
-import styled from 'styled-components';
-
-import { BasicDropdown } from './components/BasicDropdown';
-import { BaseContainer as BasicContainer } from '../BaseContainer/BaseContainer';
-
-const Container = styled(BasicContainer)`
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-`;
-
-const Wrap = styled(BasicContainer)`
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-  min-width: 100%;
-`;
-
-const Dropdown = styled(BasicDropdown)<{ reversed?: boolean }>`
-  flex-direction: column;
-  position: absolute;
-  z-index: 3;
-
-  ${(props) => (props.reversed ? 'bottom: 8px;' : 'top: 6px;')}
-
-  &.dropdown-enter {
-    opacity: 0;
-    transform: translateY(-6px);
-  }
-
-  &.dropdown-enter-active {
-    opacity: 1;
-    transition: all 200ms;
-    transform: translateY(0px);
-  }
-
-  &.dropdown-exit {
-    opacity: 1;
-    transform: translateY(0px);
-  }
-
-  &.dropdown-exit-active {
-    opacity: 0;
-    transition: all 200ms;
-    transform: translateY(-6px);
-  }
-`;
-
-export { Wrap, Dropdown, Container };

package/src/components/AnimatedDropdown/types.ts

@@ -1,16 +0,0 @@
-import { ReactNode } from 'react';
-import { EventHandlerProps } from '../types';
-
-export type BasicDropdownProps = EventHandlerProps & {
-  className?: string;
-  children: ReactNode;
-};
-
-export type AnimatedDropdownProps = BasicDropdownProps & {
-  cta?: ReactNode;
-  shouldShowDropdown: boolean;
-  timeout?: number;
-  transitionClassnames?: string;
-  onClickAway?: (event: Event) => void;
-  reversed?: boolean;
-};

package/src/components/Avatar/Avatar.stories.tsx

@@ -1,30 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Avatar } from './Avatar';
-
-const meta = {
-  title: 'Components/Common/Avatar',
-  component: Avatar,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Avatar>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  argTypes: {
-    bgColor: {
-      control: {
-        type: 'color',
-      },
-    },
-    textColor: {
-      control: {
-        type: 'color',
-      },
-    },
-  },
-  args: {
-    name: 'John Doe',
-  },
-};

package/src/components/Avatar/Avatar.test.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { Avatar } from './Avatar';
-
-describe('PageHeader', () => {
-  test('it renders correctly', () => {
-    const { container } = render(<Avatar name="Matt Warren" />);
-    expect(container).toMatchSnapshot();
-  });
-});

package/src/components/Avatar/Avatar.tsx

@@ -1,23 +0,0 @@
-/* eslint-disable react/no-array-index-key */
-
-import React from 'react';
-import { theme } from '../../theme';
-import { AvatarSC } from './styled';
-import { AvatarProps } from './types';
-
-export const Avatar = ({
-  width = '40px',
-  name = 'Veeqo',
-  bgColor = theme.colors.secondary.blue.base,
-  textColor = '#ffffff',
-}: AvatarProps) => {
-  const userInitials = name.toUpperCase().match(/\b(\w)/g);
-
-  return (
-    <AvatarSC width={width} bgColor={bgColor} textColor={textColor} className="avatar">
-      {userInitials
-        ?.slice(0, 2)
-        .map((initial, i) => <span key={`${initial}-${i}`}>{initial}</span>)}
-    </AvatarSC>
-  );
-};

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

@@ -1,47 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PageHeader it renders correctly 1`] = `
-.c0 {
-  width: 40px;
-  height: 40px;
-  border: 3px solid #DFE3E8;
-  color: #ffffff;
-  background-color: #0079D1;
-  cursor: pointer;
-  border-radius: 50%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  background-size: cover;
-}
-
-.c0 span {
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 16px;
-}
-
-<div>
-  <div
-    class="c0 avatar"
-    width="40px"
-  >
-    <span>
-      M
-    </span>
-    <span>
-      W
-    </span>
-  </div>
-</div>
-`;

package/src/components/Avatar/styled.ts

@@ -1,24 +0,0 @@
-import styled from 'styled-components';
-import { theme } from '../../theme';
-import { AvatarSCProps } from './types';
-
-export const AvatarSC = styled.div<AvatarSCProps>`
-  width: ${(props) => props.width};
-  height: ${(props) => props.width};
-  border: 3px solid ${theme.colors.neutral.grey.base};
-  color: ${(props) => props.textColor};
-  background-color: ${(props) => props.bgColor};
-  cursor: pointer;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-size: cover;
-
-  span {
-    font-family: ${theme.text.bodySmallBold.fontFamily};
-    font-weight: ${theme.text.bodySmallBold.fontWeight};
-    font-size: ${theme.text.bodySmallBold.fontSize};
-    line-height: ${theme.text.bodySmallBold.lineHeight};
-  }
-`;

package/src/components/Avatar/types.ts

@@ -1,12 +0,0 @@
-export interface AvatarProps {
-  name: string;
-  width?: string;
-  bgColor?: string;
-  textColor?: string;
-}
-
-export interface AvatarSCProps {
-  width: string;
-  bgColor: string;
-  textColor: string;
-}

package/src/components/Badge/Badge.stories.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Badge } from '.';
-import { DropdownIcon } from '../../tempIcons/DropdownIcon';
-
-const meta = {
-  title: 'Components/UI/Badge',
-  component: Badge,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Badge>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    children: 'Some badge text',
-    iconSlot: <DropdownIcon />,
-  },
-};
-
-export const WithTooltip: Story = {
-  args: {
-    children: 'Some badge text',
-    iconSlot: <DropdownIcon />,
-    tooltip: 'Some tooltip text',
-  },
-};

package/src/components/Badge/Badge.test.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { Badge } from '.';
-import { CrossIcon } from '../../tempIcons/CrossIcon';
-
-describe('Badge', () => {
-  test('it renders correctly', () => {
-    const { container } = render(
-      <Badge iconSlot={<CrossIcon />} variant="primary">
-        Text
-      </Badge>,
-    );
-    expect(container).toMatchSnapshot();
-  });
-});

package/src/components/Badge/Badge.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { Tooltip } from '../Tooltip';
-
-import { BadgeProps } from './types';
-import { DefaultBadge, PrimaryBadge, WarningBadge } from './styled';
-import { buildClassnames } from '../../utils/buildClassnames';
-
-const variantMap = {
-  default: DefaultBadge,
-  primary: PrimaryBadge,
-  warning: WarningBadge,
-};
-
-export const Badge = ({
-  variant = 'default',
-  hideBorder = false,
-  iconSlot,
-  tooltip,
-  className,
-  e2eClassName,
-  children,
-}: BadgeProps) => {
-  const BadgeVariant = variantMap[variant];
-
-  return (
-    <Tooltip text={tooltip}>
-      <BadgeVariant className={buildClassnames([className, e2eClassName])} hideBorder={hideBorder}>
-        {iconSlot && iconSlot}
-        {children && <span>{children}</span>}
-      </BadgeVariant>
-    </Tooltip>
-  );
-};

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

@@ -1,78 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Badge it renders correctly 1`] = `
-.c0 {
-  display: inline-block;
-}
-
-.c1 {
-  box-sizing: border-box;
-  position: relative;
-  margin: 0;
-  padding: 0;
-}
-
-.c2 {
-  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;
-  vertical-align: middle;
-  gap: 4px;
-  padding: 0.35em 0.65em;
-  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: 75%;
-  line-height: 16px;
-  border-radius: 0.75rem;
-  border: 1px solid transparent;
-  cursor: default;
-}
-
-.c2 svg {
-  width: 1rem;
-  height: 1rem;
-}
-
-.c3 {
-  border-color: #0079D1;
-  background-color: #D9EBF8;
-  color: #0079D1;
-}
-
-<div>
-  <div
-    class="c0"
-  >
-    <div
-      class="c0"
-    >
-      <div
-        class="c1 c2 c3"
-      >
-        <svg
-          fill="none"
-          height="1.5rem"
-          role="presentation"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            clip-rule="evenodd"
-            d="M19 6.51071L17.4893 5L11.5 10.9893L5.51071 5L4 6.51071L9.98929 12.5L4 18.4893L5.51071 20L11.5 14.0107L17.4893 20L19 18.4893L13.0107 12.5L19 6.51071Z"
-            fill="currentColor"
-            fill-rule="evenodd"
-          />
-        </svg>
-        <span>
-          Text
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;

package/src/components/Badge/styled.ts

@@ -1,50 +0,0 @@
-import styled from 'styled-components';
-import { BaseContainer } from '../BaseContainer';
-import { text } from '../../theme/modules/text';
-import { colors } from '../../theme/modules/colors';
-import { sizes } from '../../theme/modules/sizes';
-
-type BaseBadgeProps = {
-  hideBorder: boolean;
-};
-
-const BaseBadge = styled(BaseContainer)<BaseBadgeProps>`
-  display: inline-flex;
-  align-items: center;
-  vertical-align: middle;
-  gap: 4px;
-  padding: 0.35em 0.65em;
-
-  font-family: ${text.bodySmall.fontFamily};
-  font-weight: ${text.bodySmall.fontWeight};
-  font-size: 75%;
-  line-height: 16px;
-
-  border-radius: 0.75rem;
-  border: ${(props) => (props.hideBorder ? 'none' : '1px solid transparent')};
-
-  cursor: default;
-
-  svg {
-    width: ${sizes.base};
-    height: ${sizes.base};
-  }
-`;
-
-export const DefaultBadge = styled(BaseBadge)`
-  background-color: inherit;
-  border-color: ${colors.secondary.blue.base};
-  color: ${colors.secondary.blue.base};
-`;
-
-export const PrimaryBadge = styled(BaseBadge)`
-  border-color: ${colors.secondary.blue.base};
-  background-color: ${colors.secondary.blue.lightest};
-  color: ${colors.secondary.blue.base};
-`;
-
-export const WarningBadge = styled(BaseBadge)`
-  border-color: ${colors.secondary.yellow.base};
-  background-color: ${colors.secondary.yellow.lightest};
-  color: ${colors.secondary.orange.dark};
-`;

package/src/components/Badge/types.ts

@@ -1,43 +0,0 @@
-import React, { ReactNode } from 'react';
-
-export type BadgeVariant = 'default' | 'primary' | 'warning';
-
-/**
- * Badge properties.
- */
-export type BadgeProps = {
-  /**
-   * Specifies the Badge variant.
-   */
-  variant?: BadgeVariant;
-
-  /**
-   * Renders an optional icon inside the Badge.
-   */
-  iconSlot?: Omit<ReactNode, string>;
-
-  /**
-   * Specifies tooltip text to display on hover.
-   */
-  tooltip?: string;
-
-  /**
-   * Specifies whether or not to hide the Badge border.
-   */
-  hideBorder?: boolean;
-
-  /**
-   * Specifies an optional class name.
-   */
-  className?: string;
-
-  /**
-   * Specifies an optional class name for E2E testing.
-   */
-  e2eClassName?: string;
-
-  /**
-   * Children.
-   */
-  children: React.ReactNode;
-};

package/src/components/Banner/Banner.stories.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Banner } from '.';
-import { DropdownIcon } from '../../tempIcons/DropdownIcon';
-import { BannerTypes } from './types';
-
-const meta = {
-  title: 'Components/UI/Banner',
-  component: Banner,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Banner>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  argTypes: {
-    type: {
-      options: Object.values(BannerTypes),
-      control: { type: 'select' },
-    },
-  },
-  args: {
-    type: 'info',
-    text: 'Banner main content',
-    icon: <DropdownIcon />,
-    onClose: () => alert('Close'),
-  },
-};

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

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

package/src/components/Banner/Banner.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-
-import { colors } from '../../theme/modules/colors';
-
-import { BannerTypes, BannerProps } from './types';
-
-import { Pill, Text, Row, Col, HeaderCol } from './styled';
-import { Button } from '../Button';
-import { CrossIcon } from '../../tempIcons/CrossIcon';
-import { sizes } from '../../theme/modules/sizes';
-
-const accentColors = {
-  [BannerTypes.help]: colors.secondary.blue.base,
-  [BannerTypes.info]: colors.neutral.ink.base,
-  [BannerTypes.error]: colors.secondary.red.base,
-  [BannerTypes.success]: colors.secondary.green.base,
-};
-
-/**
- * The `Banner` component was previously called `Alert` (and similarly `Pill`).
- */
-export const Banner = ({
-  type = BannerTypes.info,
-  text,
-  icon,
-  onClose,
-  className,
-  header,
-}: BannerProps) => {
-  const accentColor = accentColors[type as BannerTypes];
-
-  return (
-    <Pill accentColor={accentColor} className={className}>
-      <Row>
-        {icon && <Col style={{ marginRight: sizes.md }}>{icon}</Col>}
-        <HeaderCol>{header || <Text variant="headingSmall">{text}</Text>}</HeaderCol>
-        <Col>
-          {onClose && (
-            <Button variant="flat" aria-label="Close" icon={<CrossIcon />} onClick={onClose} />
-          )}
-        </Col>
-      </Row>
-    </Pill>
-  );
-};