@veeqo/ui 0.0.1 → 0.0.3

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

@@ -0,0 +1,117 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FilterTag it renders correctly 1`] = `
+.c0 {
+  box-sizing: border-box;
+  position: relative;
+  margin: 0;
+  padding: 0;
+}
+
+.c2 {
+  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: 12px;
+  line-height: 16px;
+  color: #37424D;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+}
+
+.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;
+}
+
+.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-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;
+  background-color: #DFE3E8;
+  border-radius: 4px;
+  padding: 4px 8px;
+  cursor: pointer;
+}
+
+.c3 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.c4 {
+  margin-right: 4px;
+}
+
+.c6 {
+  margin-left: 4px;
+  height: 10px;
+  width: 10px;
+}
+
+<div>
+  <div
+    class="c0 c1"
+  >
+    <span
+      class="c2 c3 c4"
+    >
+      test-label:
+    </span>
+    <span
+      class="c5"
+    >
+      test-text
+    </span>
+    <svg
+      class="c6"
+      color="#37424D"
+      fill="none"
+      height="1.5rem"
+      name="cross"
+      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>
+  </div>
+</div>
+`;

package/src/components/FilterTag/index.ts

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

package/src/components/FilterTag/styled.ts

@@ -0,0 +1,77 @@
+import styled from 'styled-components';
+
+import { colors } from '../../theme/modules/colors';
+
+import { BaseContainer } from '../BaseContainer';
+import { Text } from '../Text';
+import { AnimatedDropdown } from '../AnimatedDropdown';
+import { CrossIcon } from '../../tempIcons/CrossIcon';
+import { DownArrowIcon } from '../../tempIcons/DownArrowIcon';
+
+const Container = styled(BaseContainer)`
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: ${colors.neutral.grey.base};
+  border-radius: 4px;
+  padding: 4px 8px;
+  cursor: pointer;
+`;
+
+const NonSelectableText = styled(Text)`
+  user-select: none;
+`;
+
+const GroupLabel = styled(NonSelectableText)`
+  margin-right: 4px;
+`;
+
+const MainIcon = styled(DownArrowIcon)<{ shouldShow?: boolean }>`
+  margin-left: 4px;
+  transform: rotate(${(props) => (props.shouldShow ? '180deg' : '0')});
+`;
+
+const StyledCrossIcon = styled(CrossIcon)`
+  margin-left: 4px;
+  height: 10px;
+  width: 10px;
+`;
+
+// const Icon = styled(CommonGlyph)`
+//   width: 18px;
+//   height: 18px;
+//   margin-right: 10px;
+// `;
+
+const Content = styled(BaseContainer)`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+`;
+
+const Header = styled(BaseContainer)`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 12px 18px;
+  border-bottom: 1px solid ${colors.neutral.grey.base};
+
+  svg {
+    width: 18px;
+    height: 18px;
+    margin-right: 10px;
+  }
+`;
+
+export {
+  Container,
+  Text,
+  AnimatedDropdown as Dropdown,
+  GroupLabel,
+  Content,
+  Header,
+  MainIcon,
+  StyledCrossIcon as CrossIcon,
+};

package/src/components/FilterTag/types.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+
+export interface FilterTagProps {
+  className?: string;
+  e2eClassName?: string;
+  iconSlot?: Omit<ReactNode, string>;
+  label?: string;
+  text: string;
+  fill?: string;
+  content?: ReactNode;
+  footer?: ReactNode;
+  onClickAway?: (event: Event, closeDropdown?: () => void) => void;
+  onClick?: () => void;
+  shouldCloseOnClickAway?: boolean;
+}

package/src/components/Grid/Grid.stories.mdx

@@ -0,0 +1,34 @@
+import { Meta, Canvas, Props } from '@storybook/addon-docs/blocks';
+import { Button } from 'components/common';
+import Grid from './';
+
+<Meta title="Components/Layouts/Grid" component={Grid} />
+
+# Grid
+
+<Canvas>
+  <Grid columns={2}>
+    <Button>One</Button>
+    <Button>Two</Button>
+    <Button>Three</Button>
+    <Button>Four</Button>
+  </Grid>
+</Canvas>
+
+## Usage
+
+```jsx
+import { VeeqoLayouts } from '@veeqo/components';
+const { Grid } = VeeqoLayouts;
+
+<Grid columns={2}>
+  <Button>One</Button>
+  <Button>Two</Button>
+  <Button>Three</Button>
+  <Button>Four</Button>
+</Grid>
+```
+
+## Props
+
+<Props of={Grid} />

package/src/components/Grid/Grid.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Grid } from '.';
+
+test('Renders correctly', () => {
+  const { container } = render(
+    <Grid columns={3}>
+      <div>One</div>
+      <div>Two</div>
+      <div>Three</div>
+    </Grid>,
+  );
+  expect(container).toMatchSnapshot();
+});

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

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders correctly 1`] = `
+.c0 {
+  box-sizing: border-box;
+  position: relative;
+  margin: 0;
+  padding: 0;
+}
+
+.c1 {
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  grid-gap: 1rem;
+}
+
+<div>
+  <div
+    class="c0 c1"
+  >
+    <div>
+      One
+    </div>
+    <div>
+      Two
+    </div>
+    <div>
+      Three
+    </div>
+  </div>
+</div>
+`;

package/src/components/Grid/index.ts

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+import { BaseContainer } from '../BaseContainer';
+import { sizes } from '../../theme/modules/sizes';
+
+import { GridProps } from './types';
+
+export const Grid = styled(BaseContainer)<GridProps>`
+  display: grid;
+  grid-template-columns: repeat(${({ columns }) => columns}, 1fr);
+  grid-gap: ${({ spacing = 'base' }) => (spacing ? sizes[spacing] : 0)};
+`;

package/src/components/Grid/types.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+
+import { Size } from '../Stack/types';
+
+export type GridProps = {
+  children: ReactNode;
+  className?: string;
+  columns: number;
+  spacing?: Size;
+};

package/src/components/Image/Image.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Image } from './Image';
+
+const meta = {
+  title: 'Components/Common/Image',
+  component: Image,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Image>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    src: 'https://source.unsplash.com/random/400x400',
+    width: '200',
+    height: '200',
+  },
+};

package/src/components/Image/Image.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Image } from './Image';
+
+describe('Image', () => {
+  test('it renders correctly', () => {
+    const { container } = render(<Image src="https://source.unsplash.com/WLUHO9A_xik/1600x900" />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/Image/Image.tsx

@@ -0,0 +1,122 @@
+import React, { useState, useCallback } from 'react';
+import { usePopper } from 'react-popper';
+import { createPortal } from 'react-dom';
+import { Placement } from '@popperjs/core';
+import { PlaceholderImage } from './components/PlaceholderImage';
+
+import { Container, CommonImage, PreviewImageContainer, PreviewImage } from './components/styled';
+import { generateClassNames } from './utils';
+import { buildClassnames } from '../../utils/buildClassnames';
+
+type ImageProps = {
+  src: string;
+  alt?: string;
+  className?: string;
+  e2eClassName?: string;
+  width?: string;
+  height?: string;
+  previewWidth?: string;
+  previewHeight?: string;
+  previewPlacement?: Placement;
+  previewEnabled?: boolean;
+  placeholder?: React.ReactNode;
+  placeholderWidth?: string;
+  placeholderHeight?: string;
+  disablePlaceholder?: boolean;
+};
+
+export const Image = ({
+  src,
+  alt = '',
+  className,
+  e2eClassName,
+  width,
+  height,
+  previewWidth,
+  previewHeight,
+  previewPlacement = 'right',
+  previewEnabled = false,
+  placeholder,
+  placeholderWidth,
+  placeholderHeight,
+  disablePlaceholder = false,
+}: ImageProps) => {
+  const classNames = generateClassNames(className);
+  const e2eClassNames = generateClassNames(e2eClassName);
+
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+  const [imageState, setImageState] = useState({ isLoaded: false, isError: false });
+
+  const [referenceElement, setReferenceElement] = React.useState<HTMLImageElement | null>(null);
+  const [popperElement, setPopperElement] = React.useState<HTMLDivElement | null>(null);
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: previewPlacement,
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [0, 12],
+        },
+      },
+    ],
+  });
+
+  const openImagePreview = useCallback(
+    () => (previewEnabled ? setIsPreviewOpen(true) : {}),
+    [previewEnabled],
+  );
+  const closeImagePreview = useCallback(
+    () => (previewEnabled ? setIsPreviewOpen(false) : {}),
+    [previewEnabled],
+  );
+
+  const onLoad = () => setImageState({ isLoaded: true, isError: false });
+  const onError = () => setImageState({ isLoaded: true, isError: true });
+
+  const isImageHidden = !imageState.isLoaded || imageState.isError;
+
+  return (
+    <Container
+      className={buildClassnames([classNames?.container, e2eClassNames?.container, className])}
+    >
+      <CommonImage
+        src={src}
+        alt={alt}
+        className={buildClassnames([classNames?.image, e2eClassNames?.image])}
+        width={width}
+        height={height}
+        onLoad={onLoad}
+        onError={onError}
+        previewEnabled={previewEnabled}
+        onMouseEnter={openImagePreview}
+        onMouseLeave={closeImagePreview}
+        style={isImageHidden ? { display: 'none' } : {}}
+        ref={setReferenceElement}
+      />
+      {!disablePlaceholder &&
+        isImageHidden &&
+        (placeholder || (
+          <PlaceholderImage
+            className={buildClassnames([classNames?.placeholder, e2eClassNames?.placeholder])}
+            width={placeholderWidth || width}
+            height={placeholderHeight || height}
+          />
+        ))}
+      {isPreviewOpen &&
+        createPortal(
+          <PreviewImageContainer
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+            className={buildClassnames([
+              classNames?.previewImageContainer,
+              e2eClassNames?.previewImageContainer,
+            ])}
+          >
+            <PreviewImage src={src} alt="" width={previewWidth} height={previewHeight} />
+          </PreviewImageContainer>,
+          document.body,
+        )}
+    </Container>
+  );
+};

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

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Image it renders correctly 1`] = `
+.c0 {
+  box-sizing: border-box;
+  cursor: default;
+}
+
+<div>
+  <div
+    class=""
+  >
+    <img
+      alt=""
+      class="c0"
+      src="https://source.unsplash.com/WLUHO9A_xik/1600x900"
+      style="display: none;"
+    />
+    <svg
+      class=""
+      fill="none"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clip-rule="evenodd"
+        d="M21.3333 0C22.8 0 24 1.2 24 2.66667V21.3333C24 22.8 22.8 24 21.3333 24H2.66667C1.2 24 0 22.8 0 21.3333V2.66667C0 1.2 1.2 0 2.66667 0H21.3333ZM10.6667 18.0133L7.33333 14L2.66667 20H21.3333L15.3333 12L10.6667 18.0133Z"
+        fill="#CDD1D5"
+        fill-rule="evenodd"
+      />
+    </svg>
+  </div>
+</div>
+`;

package/src/components/Image/components/PlaceholderImage.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export const PlaceholderImage = (props: any) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M21.3333 0C22.8 0 24 1.2 24 2.66667V21.3333C24 22.8 22.8 24 21.3333 24H2.66667C1.2 24 0 22.8 0 21.3333V2.66667C0 1.2 1.2 0 2.66667 0H21.3333ZM10.6667 18.0133L7.33333 14L2.66667 20H21.3333L15.3333 12L10.6667 18.0133Z"
+      fill="#CDD1D5"
+    />
+  </svg>
+);

package/src/components/Image/components/styled.ts

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+export const Container = styled.div``;
+
+export const CommonImage = styled.img<{ previewEnabled?: boolean }>`
+  box-sizing: border-box;
+  cursor: ${({ previewEnabled }) => (previewEnabled ? 'zoom-in' : 'default')};
+`;
+
+export const PreviewImageContainer = styled.div`
+  z-index: 10;
+  background-color: transparent;
+`;
+
+export const PreviewImage = styled.img`
+  box-shadow: 0 4px 12px rgba(27, 33, 38, 0.2);
+`;

package/src/components/Image/index.ts

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

package/src/components/Image/types.ts

@@ -0,0 +1,6 @@
+export type ClassNamesReturnPayload = {
+  container?: string;
+  image?: string;
+  placeholder?: string;
+  previewImageContainer?: string;
+};

package/src/components/Image/utils.ts

@@ -0,0 +1,8 @@
+import { ClassNamesReturnPayload } from './types';
+
+export const generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({
+  container: prefix ? `${prefix}-image-container` : undefined,
+  image: prefix ? `${prefix}-image` : undefined,
+  placeholder: prefix ? `${prefix}-image-placeholder` : undefined,
+  previewImageContainer: prefix ? `${prefix}-image-preview-container` : undefined,
+});

package/src/components/InputGroup/InputGroup.stories.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ToggleButton } from '../ToggleButton/ToggleButton';
+import { TextField } from '../DimensionsInput/styled';
+import { InputGroup } from '../InputGroup';
+import { Stepper } from '../Stepper';
+
+const meta = {
+  title: 'Components/Forms/InputGroup',
+  component: InputGroup,
+  tags: ['autodocs'],
+} satisfies Meta<typeof InputGroup>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <ToggleButton checked={false} onChange={() => {}}>
+          Add
+        </ToggleButton>
+        <ToggleButton checked={true} onChange={() => {}}>
+          Set
+        </ToggleButton>
+        <TextField value="" onChange={(value) => {}} />
+        <Stepper onIncrement={() => {}} onDecrement={() => {}} />
+      </>
+    ),
+  },
+};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Button } from '../Button';
+import { InputGroup } from '.';
+
+test('Renders correctly', () => {
+  const { container } = render(
+    <InputGroup>
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Three</Button>
+    </InputGroup>,
+  );
+  expect(container).toMatchSnapshot();
+});