@veeqo/ui 0.0.1 → 0.0.4

package/src/components/ActionList/types.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { ButtonVariant } from '../Button/types';
+
+export type ActionListItem = {
+  title: string;
+  icon?: Omit<ReactNode, string>;
+  variant?: 'item' | 'action' | 'link';
+  onClick: () => void;
+};
+
+export type ActionListSection = {
+  title?: string;
+  items: ActionListItem[];
+};
+
+export interface ActionListProps {
+  title: string;
+  items?: ActionListItem[];
+  sections?: ActionListSection[];
+  buttonVariant?: ButtonVariant;
+  buttonSize?: 'sm' | 'base';
+}

package/src/components/Anchor/Anchor.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Anchor } from './Anchor';
+
+const meta = {
+  title: 'Components/Common/Anchor',
+  component: Anchor,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Anchor>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const WithText: Story = {
+  args: {
+    href: '#',
+    text: 'Click me!',
+  },
+};
+
+export const WithChildren: Story = {
+  args: {
+    href: '#',
+    children: (
+      <div>
+        <img
+          alt="The clickable Meerkat"
+          src="https://www.dudleyzoo.org.uk/wp-content/uploads/DZG_Meerkat_5-1200x794.jpg"
+          width={512}
+        />
+      </div>
+    ),
+  },
+};

package/src/components/Anchor/Anchor.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Anchor } from './Anchor';
+
+describe('Anchor', () => {
+  test('it renders correctly', () => {
+    const { container } = render(<Anchor href="https://veeqo.com">Go to Veeqo</Anchor>);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/Anchor/Anchor.tsx

@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react';
+
+import { CommonAnchor } from './styled';
+
+export interface AnchorProps {
+  children?: ReactNode;
+  href: string;
+  text?: string;
+  className?: string;
+  target?: string;
+}
+
+export const Anchor = ({ children, className, text, href, target }: AnchorProps) => (
+  <CommonAnchor href={href} target={target} className={className}>
+    {children || text}
+  </CommonAnchor>
+);

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

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Anchor it renders correctly 1`] = `
+.c0 {
+  box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  margin: 0;
+  padding: 0;
+  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: normal;
+  font-size: 14px;
+  line-height: 20px;
+  color: #0079D1;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c0:hover {
+  color: #005A9C;
+}
+
+<div>
+  <a
+    class="c0"
+    href="https://veeqo.com"
+  >
+    Go to Veeqo
+  </a>
+</div>
+`;

package/src/components/Anchor/index.ts

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

package/src/components/Anchor/styled.ts

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+import { theme } from '../../theme';
+
+export const CommonAnchor = styled.a`
+  box-sizing: border-box;
+  display: inline-flex;
+  margin: 0;
+  padding: 0;
+
+  font-family: ${theme.text.link.fontFamily};
+  font-style: ${theme.text.link.fontStyle};
+  font-weight: ${theme.text.link.fontWeight};
+  font-size: ${theme.text.link.fontSize};
+  line-height: ${theme.text.link.lineHeight};
+  color: ${theme.colors.secondary.blue.base};
+  text-decoration: ${theme.text.link.textDecoration};
+
+  &:hover {
+    color: ${theme.colors.secondary.blue.dark};
+  }
+`;

package/src/components/AnimatedDropdown/AnimatedDropdown.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { AnimatedDropdown } from './AnimatedDropdown';
+
+const meta = {
+  title: 'Components/Common/AnimatedDropdown',
+  component: AnimatedDropdown,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div style={{ height: '500px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof AnimatedDropdown>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  argTypes: {
+    shouldShowDropdown: {
+      control: {
+        type: 'boolean',
+      },
+      defaultValue: false,
+    },
+  },
+  args: {
+    shouldShowDropdown: false,
+    children: (
+      <div>
+        Test content
+        <img
+          alt="The clickable Meerkat"
+          src="https://www.dudleyzoo.org.uk/wp-content/uploads/DZG_Meerkat_5-1200x794.jpg"
+          width={512}
+        />
+      </div>
+    ),
+  },
+};

package/src/components/AnimatedDropdown/AnimatedDropdown.test.tsx

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

package/src/components/AnimatedDropdown/AnimatedDropdown.tsx

@@ -0,0 +1,54 @@
+import React, { useRef } from 'react';
+import { useClickAway } from 'react-use';
+import { CSSTransition } from 'react-transition-group';
+
+import { Wrap, Dropdown, Container } from './styled';
+
+import { AnimatedDropdownProps } from './types';
+
+export const AnimatedDropdown = ({
+  cta,
+  shouldShowDropdown,
+  children,
+  className = 'animated-dropdown',
+  reversed = false,
+  onClickAway = () => {},
+  timeout = 350,
+  transitionClassnames = 'dropdown',
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+}: AnimatedDropdownProps) => {
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useClickAway(dropdownRef, (event: Event) => {
+    if (shouldShowDropdown) {
+      onClickAway(event);
+    }
+  });
+
+  return (
+    <Container
+      className={`${className}-container ${className}`}
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      ref={dropdownRef}
+    >
+      {!reversed && cta}
+      <Wrap className={`${className}-wrap ${className}`}>
+        <CSSTransition
+          in={shouldShowDropdown}
+          timeout={timeout}
+          classNames={transitionClassnames}
+          unmountOnExit
+        >
+          <Dropdown reversed={reversed} className={`${className}-basic-dropdown ${className}`}>
+            {children}
+          </Dropdown>
+        </CSSTransition>
+      </Wrap>
+      {reversed && cta}
+    </Container>
+  );
+};

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

@@ -0,0 +1,117 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AnimatedDropdown it renders correctly 1`] = `
+.c0 {
+  box-sizing: border-box;
+  position: relative;
+  margin: 0;
+  padding: 0;
+}
+
+.c3 {
+  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;
+}
+
+.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: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+}
+
+.c2 {
+  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: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  min-width: 100%;
+}
+
+.c4 {
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: absolute;
+  z-index: 3;
+  top: 6px;
+}
+
+.c4.dropdown-enter {
+  opacity: 0;
+  -webkit-transform: translateY(-6px);
+  -ms-transform: translateY(-6px);
+  transform: translateY(-6px);
+}
+
+.c4.dropdown-enter-active {
+  opacity: 1;
+  -webkit-transition: all 200ms;
+  transition: all 200ms;
+  -webkit-transform: translateY(0px);
+  -ms-transform: translateY(0px);
+  transform: translateY(0px);
+}
+
+.c4.dropdown-exit {
+  opacity: 1;
+  -webkit-transform: translateY(0px);
+  -ms-transform: translateY(0px);
+  transform: translateY(0px);
+}
+
+.c4.dropdown-exit-active {
+  opacity: 0;
+  -webkit-transition: all 200ms;
+  transition: all 200ms;
+  -webkit-transform: translateY(-6px);
+  -ms-transform: translateY(-6px);
+  transform: translateY(-6px);
+}
+
+<div>
+  <div
+    class="c0 c1 animated-dropdown-container animated-dropdown"
+  >
+    <div
+      class="c0 c2 animated-dropdown-wrap animated-dropdown"
+    >
+      <div
+        class="c0 c3 c4 animated-dropdown-basic-dropdown animated-dropdown"
+      >
+        <p>
+          Dropdown content
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

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

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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,31 @@
+// 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

@@ -0,0 +1,11 @@
+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/index.ts

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

package/src/components/AnimatedDropdown/styled.ts

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,23 @@
+/* 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

@@ -0,0 +1,47 @@
+// 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/index.ts

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

package/src/components/Avatar/styled.ts

@@ -0,0 +1,24 @@
+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

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