@veeqo/ui 0.0.4 → 0.0.6

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,11 +0,0 @@
-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();
-});