@veeqo/ui 0.0.1 → 0.0.3

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

@@ -0,0 +1,165 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Video Modal it renders correctly 1`] = `
+.c5 {
+  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: 4px;
+}
+
+.c5 svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.c2 {
+  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: 8px;
+  padding-right: 8px;
+  border-radius: 8px;
+  font-size: 16px;
+}
+
+.c2:hover {
+  cursor: pointer;
+}
+
+.c2:disabled {
+  pointer-events: none;
+  cursor: unset !important;
+}
+
+.c2 > span {
+  position: relative;
+  top: -1px;
+}
+
+.c3 {
+  border-color: transparent;
+  box-shadow: none;
+  color: #37424D;
+}
+
+.c3:hover {
+  background-color: rgba(0,0,0,0.1);
+}
+
+.c3:active {
+  background-color: rgba(0,0,0,0.1);
+}
+
+.c3:focus-visible {
+  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
+  outline: 0;
+}
+
+.c3:disabled {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.c0 {
+  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;
+  height: 100%;
+}
+
+.c1 {
+  position: relative;
+}
+
+.c1 iframe {
+  width: 57vw;
+  height: calc(57vw * 0.5625);
+  border-radius: 8px;
+}
+
+.c4 {
+  position: absolute;
+  top: 0px;
+  right: -45px;
+}
+
+<div
+  class="c0 video-modal--visible"
+  data-testid="video-modal_popup-content"
+>
+  <div
+    class="c1"
+  >
+    <iframe
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowfullscreen=""
+      frameborder="0"
+      src="https://www.youtube.com/embed/Fb8C_i4o1yo"
+      title="watch_demonstration-video"
+    />
+    <button
+      class="c2 c3 c4"
+      data-testid="video-modal--close"
+    >
+      <span
+        class="c5"
+      >
+        <svg
+          color="white"
+          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>
+    </button>
+  </div>
+</div>
+`;

package/src/components/VideoModal/components/Popup.tsx

@@ -0,0 +1,44 @@
+import React, { ReactNode, FC } from 'react';
+
+// @ts-ignore
+import ScrollLock from 'react-scrolllock-configurable';
+import { Portal } from '../../Portal';
+
+import { Container, Shadow, Wrap } from './styled';
+import { buildClassnames } from '../../../utils/buildClassnames';
+
+interface WithPortalProps {
+  usePortal?: boolean;
+  children: ReactNode;
+}
+
+const WithPortal = ({ usePortal, children }: WithPortalProps) => (
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  <>{usePortal ? <Portal>{children}</Portal> : children}</>
+);
+
+export interface PopupProps {
+  children: ReactNode;
+  shouldShow: boolean;
+  usePortal?: boolean;
+  className?: string;
+}
+
+export const Popup: FC<PopupProps> = ({
+  className,
+  children = null,
+  shouldShow = false,
+  usePortal = true,
+}: PopupProps) => (
+  <WithPortal usePortal={usePortal}>
+    <Container
+      className={buildClassnames([`${className}-container`, className])}
+      shouldShow={shouldShow}
+    >
+      <Shadow />
+      <ScrollLock isActive={shouldShow}>
+        <Wrap className={buildClassnames([`${className}-wrap`, className])}>{children}</Wrap>
+      </ScrollLock>
+    </Container>
+  </WithPortal>
+);

package/src/components/VideoModal/components/styled.ts

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+import { theme } from '../../../theme';
+import { BaseContainer } from '../../BaseContainer';
+
+interface IContainer {
+  shouldShow: boolean;
+}
+
+const commonStyles = `
+  position: fixed;
+  height: 100%;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+`;
+
+export const Container = styled(BaseContainer)`
+  ${commonStyles}
+  display: ${(props: IContainer) => (props.shouldShow ? 'initial' : 'none')};
+  z-index: ${theme.layers.modal};
+`;
+
+export const Shadow = styled(BaseContainer)`
+  ${commonStyles}
+  background-color: rgba(55,66,77,0.5);
+`;
+
+export const Wrap = styled(BaseContainer)`
+  position: relative;
+  height: 100%;
+  width: 100%;
+  z-index: 1;
+`;

package/src/components/VideoModal/index.ts

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

package/src/components/VideoModal/styled.ts

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+import { Button } from '../Button';
+
+export const PopupContent = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+`;
+
+export const VideoWrapper = styled.div`
+  position: relative;
+  iframe {
+    width: 57vw;
+    height: calc(57vw * 0.5625); // keep 16:9 ratio
+    border-radius: 8px;
+  }
+`;
+
+export const ButtonSC = styled(Button)`
+  position: absolute;
+  top: 0px;
+  right: -45px;
+`;

package/src/components/VideoModal/types.ts

@@ -0,0 +1,9 @@
+export interface VideoModalProps {
+  id: string;
+  youtubeVideoId: string;
+  showVideoModal: boolean;
+  handleCloseClick: () => void;
+}
+export interface ClosingButtonProps {
+  onClick: () => void;
+}

package/src/components/View/View.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from './View';
+
+const meta = {
+  title: 'Components/UI/View',
+  component: View,
+  tags: ['autodocs'],
+} satisfies Meta<typeof View>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  argTypes: {
+    type: {
+      options: ['draft', 'fixed', 'saved'],
+    },
+  },
+  args: {
+    id: '1',
+    name: 'New title',
+    type: 'draft',
+    count: 4,
+  },
+};

package/src/components/View/View.test.tsx

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

package/src/components/View/View.tsx

@@ -0,0 +1,120 @@
+import React, { useCallback } from 'react';
+
+import { useHover } from '../../hooks';
+import { colors } from '../../theme/modules/colors';
+
+import { ViewProps, ViewTypes } from './types';
+
+import { Container, Contour, CounterContainer, CounterText, IconStyling, Text } from './styled';
+import { buildClassnames } from '../../utils/buildClassnames';
+import { CrossIcon } from '../../tempIcons/CrossIcon';
+import { MoreHorizIcon } from '../../tempIcons/MoreHorizIcon';
+import { EditIcon } from '../../tempIcons/EditIcon';
+
+export interface ClassNamesReturnPayload {
+  delete?: string;
+  options?: string;
+  edit?: string;
+  container?: string;
+  active?: string;
+  counter?: string;
+}
+
+const generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({
+  delete: prefix ? `${prefix}-delete` : undefined,
+  options: prefix ? `${prefix}-options` : undefined,
+  edit: prefix ? `${prefix}-edit` : undefined,
+  container: prefix ? `${prefix}-container` : undefined,
+  active: prefix ? `${prefix}-active` : undefined,
+  counter: prefix ? `${prefix}-counter` : undefined,
+});
+
+export const View = ({
+  id,
+  name,
+  type,
+  className,
+  count,
+  active = false,
+  onClick,
+  onDelete,
+  onEdit,
+  onOptions,
+  e2eClassName,
+}: ViewProps) => {
+  const classNames = generateClassNames(className);
+  const e2eClassNames = generateClassNames(e2eClassName);
+  const [isHovered, handleEnter, handleLeave] = useHover();
+
+  const handleClick = useCallback(() => onClick(id), [id, onClick]);
+  const handleDelete = useCallback(
+    (event) => {
+      event.stopPropagation();
+      if (onDelete) onDelete(id);
+    },
+    [onDelete, id],
+  );
+  const handleEdit = useCallback(
+    (event) => {
+      event.stopPropagation();
+      if (onEdit) onEdit(id);
+    },
+    [onEdit, id],
+  );
+  const handleOptions = useCallback(
+    (event) => {
+      event.stopPropagation();
+      if (onOptions) onOptions(id);
+    },
+    [onOptions, id],
+  );
+
+  const isDraft = type === ViewTypes.draft;
+  const isFixed = type === ViewTypes.fixed;
+  const isSaved = type === ViewTypes.saved;
+  const fill = active ? colors.neutral.ink.dark : colors.neutral.ink.base;
+
+  return (
+    <Container
+      className={`${buildClassnames([classNames?.container, e2eClassNames?.container])} ${
+        active ? classNames?.active : ''
+      }`}
+      onClick={handleClick}
+    >
+      <Contour active={active} onMouseEnter={handleEnter} onMouseLeave={handleLeave}>
+        <Text variant="bodyBold">{name}</Text>
+        {count && (
+          <CounterContainer active={active || isHovered}>
+            <CounterText className={e2eClassNames?.counter} variant="subheadingSmall">
+              {count}
+            </CounterText>
+          </CounterContainer>
+        )}
+        {isDraft && (
+          <CrossIcon
+            {...IconStyling}
+            color={fill}
+            className={e2eClassNames?.delete}
+            onClick={handleDelete}
+          />
+        )}
+        {isFixed && active && (
+          <MoreHorizIcon
+            {...IconStyling}
+            color={fill}
+            className={e2eClassNames?.options}
+            onClick={handleOptions}
+          />
+        )}
+        {isSaved && active && (
+          <EditIcon
+            {...IconStyling}
+            color={fill}
+            className={e2eClassNames?.edit}
+            onClick={handleEdit}
+          />
+        )}
+      </Contour>
+    </Container>
+  );
+};

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

@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`View it renders correctly 1`] = `
+.c3 {
+  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: 14px;
+  line-height: 20px;
+  color: #37424D;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-letter-spacing: -0.006rem;
+  -moz-letter-spacing: -0.006rem;
+  -ms-letter-spacing: -0.006rem;
+  letter-spacing: -0.006rem;
+}
+
+.c0 {
+  box-sizing: border-box;
+  position: relative;
+  margin: 0;
+  padding: 0;
+}
+
+.c1 {
+  padding: 14px 24px;
+}
+
+.c2 {
+  position: relative;
+  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;
+  height: 40px;
+  border-radius: 4px;
+  padding: 0 12px;
+  border: 1px solid transparent;
+  cursor: pointer;
+}
+
+.c2:hover {
+  border: 1px solid #0079D1;
+  background-color: #D9EBF8;
+}
+
+<div>
+  <div
+    class="c0 c1  "
+  >
+    <div
+      class="c0 c2"
+    >
+      <span
+        class="c3"
+      >
+        test-name
+      </span>
+    </div>
+  </div>
+</div>
+`;

package/src/components/View/index.ts

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

package/src/components/View/styled.ts

@@ -0,0 +1,82 @@
+import styled from 'styled-components';
+
+import { CSSProperties } from 'react';
+import { colors } from '../../theme/modules/colors';
+
+import { Text } from '../Text';
+import { BaseContainer } from '../BaseContainer';
+
+import { ViewProps } from './types';
+import { sizes } from '../../theme/modules/sizes';
+
+export type ContourProps = Pick<ViewProps, 'active'>;
+export type CounterProps = Pick<ViewProps, 'active'>;
+
+const Container = styled(BaseContainer)`
+  padding: 14px 24px;
+`;
+
+const Contour = styled(BaseContainer)<ContourProps>`
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 40px;
+  border-radius: 4px;
+  padding: 0 12px;
+  border: 1px solid transparent;
+  cursor: pointer;
+
+  &:hover {
+    border: 1px solid ${colors.secondary.blue.base};
+    background-color: ${colors.secondary.blue.lightest};
+  }
+
+  ${(props) =>
+    props.active &&
+    `
+    background-color: ${colors.secondary.blue.lightest};
+  `}
+`;
+
+const CounterText = styled(Text)<CounterProps>`
+  line-height: 1;
+`;
+
+const CounterContainer = styled(Text)<CounterProps>`
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: ${colors.neutral.grey.base};
+  border-radius: 4px;
+  padding: 2px 4px;
+  min-width: 20px;
+  height: 20px;
+  margin-left: 8px;
+
+  & > ${CounterText} {
+    color: ${colors.neutral.ink.dark};
+  }
+
+  ${(props) =>
+    props.active &&
+    `
+    background-color: ${colors.secondary.blue.base};
+
+    & > ${CounterText} {
+      color: #fff;
+    }
+  `}
+`;
+
+const IconStyling = {
+  style: {
+    marginLeft: '4px',
+    padding: '4px',
+    height: sizes.base,
+    width: sizes.base,
+  } as CSSProperties,
+};
+
+export { Container, Contour, Text, CounterContainer, CounterText, IconStyling };

package/src/components/View/types.ts

@@ -0,0 +1,42 @@
+export type ViewId = string;
+
+export enum ViewTypes {
+  saved = 'saved',
+  fixed = 'fixed',
+  draft = 'draft',
+}
+
+export interface ViewProps {
+  /** ClassName to override styles on outer root element */
+  className?: string;
+
+  /** Flag to toggle active state styles on the Tab */
+  active?: boolean;
+
+  /** View name, eg.: Jade's view */
+  name: string;
+
+  /** View's unique identifier */
+  id: ViewId;
+
+  /** View type */
+  type?: keyof typeof ViewTypes;
+
+  /** Number or string value to show near view label */
+  count?: number | string;
+
+  /** Event handler for when View component is clicked (should get activated) */
+  onClick: (id: ViewId) => void;
+
+  /** Event handler for when user clicks the delete/cross icon */
+  onDelete?: (id: ViewId) => void;
+
+  /** Event handler for when user clicks to edit the view */
+  onEdit?: (id: ViewId) => void;
+
+  /** Event handler for when user clicks to show options for FIXED view */
+  onOptions?: (id: ViewId) => void;
+
+  /** Class name for e2e testing */
+  e2eClassName?: string;
+}

package/src/components/WeightInput/WeightInput.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import WeightInput from '.';
+
+export default {
+  title: 'Components/Forms/WeightInput',
+  component: WeightInput,
+};
+
+const baseArgs = {};
+
+export const InputsOnly = (args: any) => (
+  <WeightInput {...args} />
+);
+
+InputsOnly.args = baseArgs;
+
+export const WithLabels = (args: any) => (
+  <WeightInput {...args} />
+);
+
+WithLabels.args = {
+  ...baseArgs,
+  label: 'Weight',
+  hint: 'Total package weight',
+  error: 'Weight exceeds the maximum limit',
+};

package/src/components/WeightInput/WeightInput.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { WeightUnit } from '../types';
+import { WeightInput } from './WeightInput';
+
+test('Renders correctly', () => {
+  const { container } = render(
+    <WeightInput weightUnit={WeightUnit.g} gram="123" handleChangeGram={() => {}} />,
+  );
+  expect(container).toMatchSnapshot();
+});