@veeqo/ui 0.0.3 → 0.0.6

package/src/components/WeightInput/WeightInput.tsx

@@ -1,66 +0,0 @@
-import React, { FC } from 'react';
-
-import { WeightProps, isWeightImperial, isWeightMetric } from './types';
-import { ComponentSize } from '../types';
-import { InputGroup } from '../InputGroup';
-import { withLabels } from '../../hoc';
-
-import { Container, TextField, Row, Button } from './styled';
-
-export const WeightInput: FC<WeightProps> = withLabels(
-  ({ size = ComponentSize.base, hasError, className, ...rest }: WeightProps) => (
-    <Container className={className}>
-      <Row>
-        {isWeightMetric(rest) && (
-          <InputGroup>
-            <TextField
-              size={size}
-              onChange={rest.handleChangeGram}
-              name="gram"
-              type="number"
-              value={rest.gram}
-              hasError={hasError}
-              {...rest}
-            />
-            <Button hasError={hasError} size={size}>
-              g
-            </Button>
-          </InputGroup>
-        )}
-
-        {isWeightImperial(rest) && (
-          <>
-            <InputGroup>
-              <TextField
-                size={size}
-                onChange={rest.handleChangePound}
-                name="ounce"
-                type="number"
-                value={rest.pound}
-                hasError={hasError}
-                {...rest}
-              />
-              <Button hasError={hasError} size={size}>
-                lb
-              </Button>
-            </InputGroup>
-            <InputGroup>
-              <TextField
-                size={size}
-                onChange={rest.handleChangeOunce}
-                name="pound"
-                type="number"
-                value={rest.ounce}
-                hasError={hasError}
-                {...rest}
-              />
-              <Button hasError={hasError} size={size}>
-                oz
-              </Button>
-            </InputGroup>
-          </>
-        )}
-      </Row>
-    </Container>
-  ),
-);

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

@@ -1,272 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Renders correctly 1`] = `
-.c3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c3 > * {
-  margin-left: 0;
-  margin-right: 0;
-  box-shadow: none;
-}
-
-.c3 > *:not(:last-child) {
-  border-right-width: 0 !important;
-}
-
-.c3 > *:focus,
-.c3 > *:active {
-  z-index: 5;
-  border-right-width: 1px !important;
-}
-
-.c3 > *:focus + *,
-.c3 > *:active + * {
-  border-left-width: 0 !important;
-}
-
-.c3 > *:not(:first-child):not(:last-child) {
-  border-top-left-radius: 0 !important;
-  border-top-right-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-
-.c3 > *:first-child {
-  border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-
-.c3 > *:last-child {
-  border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
-}
-
-.c9 {
-  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: 8px;
-}
-
-.c9 svg {
-  width: 1rem;
-  height: 1rem;
-}
-
-.c6 {
-  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: 24px;
-  padding-right: 24px;
-  border-radius: 8px;
-  font-size: 16px;
-}
-
-.c6:hover {
-  cursor: pointer;
-}
-
-.c6:disabled {
-  pointer-events: none;
-  cursor: unset !important;
-}
-
-.c6 > span {
-  position: relative;
-  top: -1px;
-}
-
-.c7 {
-  border-color: #CDD1D5;
-  background-color: white;
-  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
-  color: #37424D;
-}
-
-.c7:hover {
-  background-color: #FAFAFB;
-}
-
-.c7:active {
-  background-color: #FAFAFB;
-  border-color: #0079D1;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-
-.c7:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-  outline: 0;
-}
-
-.c7:disabled {
-  box-shadow: none !important;
-  background-color: #DFE3E8 !important;
-  border-color: #DFE3E8 !important;
-  color: #637381 !important;
-}
-
-.c4 {
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  box-sizing: border-box;
-  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;
-  padding: 0 12px;
-  border-radius: 4px;
-  border: 1px solid #959fa8;
-  color: #1b2126;
-  height: 40px;
-  font-size: 14px;
-}
-
-.c4 {
-  --outline-size: 4px;
-}
-
-.c4:focus {
-  border-color: #0079d1;
-  box-shadow: 0 0 0 var(--outline-size) #80bce8;
-  outline: 0;
-}
-
-.c4:invalid {
-  border-color: #eb5757;
-  box-shadow: 0 0 0 var(--outline-size) #f7bcbc;
-}
-
-.c4:disabled {
-  box-shadow: none;
-  background-color: #f2f3f5;
-  border-color: #959fa8;
-  color: #637381;
-}
-
-.c4::-webkit-outer-spin-button,
-.c4::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.c4[type='number'] {
-  -moz-appearance: textfield;
-  width: 8ch;
-  text-align: right;
-}
-
-.c0 {
-  box-sizing: border-box;
-  position: relative;
-  margin: 0;
-  padding: 0;
-}
-
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-}
-
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c5.c5.c5 {
-  text-align: left;
-  width: 52px;
-}
-
-.c8 {
-  padding: 0 4px;
-  border-color: #959FA8;
-  margin-right: 4px;
-}
-
-<div>
-  <div
-    class="c0 c1"
-  >
-    <div
-      class="c0 c2"
-    >
-      <div
-        class="c3"
-      >
-        <input
-          class="c4 c5"
-          id="test-id"
-          name="gram"
-          spellcheck="false"
-          type="number"
-          value="123"
-        />
-        <button
-          class="c6 c7 c8"
-        >
-          <span
-            class="c9"
-          >
-            <span>
-              g
-            </span>
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;

package/src/components/WeightInput/styled.ts

@@ -1,39 +0,0 @@
-import styled from 'styled-components';
-
-import { theme } from '../../theme';
-
-import { Button } from '../Button';
-import { TextField } from '../TextField';
-import { BaseContainer } from '../BaseContainer';
-
-const Container = styled(BaseContainer)`
-  display: flex;
-  flex-direction: column;
-  position: relative;
-`;
-
-const Row = styled(BaseContainer)`
-  display: flex;
-  flex-direction: row;
-`;
-
-const StyledTextField = styled(TextField)`
-  &&& {
-    text-align: left;
-    width: 52px;
-  }
-`;
-
-const StyledButton = styled(Button)<{ hasError?: boolean }>`
-  padding: 0 4px;
-  border-color: ${theme.colors.neutral.ink.lightest};
-  margin-right: 4px;
-
-  ${(props) =>
-    props.hasError &&
-    `
-    border-color: ${theme.colors.secondary.red.base};
-  `};
-`;
-
-export { Container, Row, StyledTextField as TextField, StyledButton as Button };

package/src/components/WeightInput/types.ts

@@ -1,31 +0,0 @@
-import { ComponentSize, WeightUnit } from '../types';
-
-export interface BaseWeightProps {
-  hasError?: boolean;
-  size?: ComponentSize;
-  className?: string;
-}
-
-export interface GramWeightProps extends BaseWeightProps {
-  weightUnit: WeightUnit.g;
-  gram: string;
-  handleChangeGram: (value: string) => void;
-}
-
-export interface LbWeightProps extends BaseWeightProps {
-  weightUnit: WeightUnit.lb;
-  ounce: string;
-  pound: string;
-  handleChangeOunce: (value: string) => void;
-  handleChangePound: (value: string) => void;
-}
-
-export type WeightProps = GramWeightProps | LbWeightProps;
-
-export const isWeightMetric = (props: WeightProps): props is GramWeightProps => {
-  return props.weightUnit === WeightUnit.g;
-};
-
-export const isWeightImperial = (props: WeightProps): props is LbWeightProps => {
-  return props.weightUnit === WeightUnit.lb;
-};

package/src/components/types.ts

@@ -1,23 +0,0 @@
-import { SyntheticEvent } from 'react';
-
-export enum ComponentSize {
-  base = 'base',
-  sm = 'sm',
-}
-
-export enum WeightUnit {
-  g = 'g',
-  lb = 'lb',
-}
-
-export type EventHandlerProps = {
-  onClick?: (event: SyntheticEvent) => void;
-  onKeyUp?: (event: SyntheticEvent) => void;
-  onKeyDown?: (event: SyntheticEvent) => void;
-  onKeyPress?: (event: SyntheticEvent) => void;
-  onMouseEnter?: (event: SyntheticEvent) => void;
-  onMouseLeave?: (event: SyntheticEvent) => void;
-  onChange?: (event: SyntheticEvent) => void;
-  onBlur?: (event: SyntheticEvent) => void;
-  onFocus?: (event: SyntheticEvent) => void;
-};

package/src/hoc/withDeprecated.tsx

@@ -1,11 +0,0 @@
-import React, { useEffect } from 'react';
-
-export const withDeprecated =
-  <P extends object>(Component: React.ComponentType<P>): React.FC<P> =>
-  (props: P) => {
-    useEffect(() => {
-      // eslint-disable-next-line no-console
-      console.warn(`${Component.name} is deprecated.`);
-    }, []);
-    return <Component {...(props as P)} />;
-  };

package/src/hoc/withLabels/styled.ts

@@ -1,54 +0,0 @@
-import styled from 'styled-components';
-import { Stack } from '../../components/Stack';
-import { Tooltip } from '../../components/Tooltip';
-import { theme } from '../../theme';
-
-export const Label = styled.label`
-  display: block;
-  font-family: ${theme.text.inputLabel.fontFamily};
-  font-size: ${theme.text.inputLabel.fontSize};
-  font-weight: ${theme.text.inputLabel.fontWeight};
-  line-height: ${theme.text.inputLabel.lineHeight};
-  color: ${theme.text.inputLabel.color};
-`;
-
-export const Hint = styled.span`
-  display: block;
-  font-family: ${theme.fontFamily};
-  font-size: ${theme.sizes[3]};
-  line-height: ${theme.sizes[4]};
-  color: ${theme.colors.neutral.ink.light};
-`;
-
-export const Error = styled.span`
-  display: block;
-  font-family: ${theme.text.error.fontFamily};
-  font-size: ${theme.text.error.fontSize};
-  font-weight: ${theme.text.error.fontWeight};
-  line-height: ${theme.text.error.lineHeight};
-  color: ${theme.text.error.color};
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: calc(${theme.sizes[2]} * -1);
-    width: 2px;
-    background-color: ${theme.colors.secondary.red.base};
-  }
-`;
-
-export const RootStack = styled(Stack)`
-  position: relative;
-`;
-
-export const BlockTooltip = styled(Tooltip)`
-  /* Tooltip uses inline-block containers which add more height when
-     the child component is an inline element (e.g. Glyph or an SVG),
-     so we need to set to block to preserve the height and fix alignment. */
-  display: block;
-  &-hoverable {
-    display: block;
-  }
-`;

package/src/hoc/withLabels/withLabels.tsx

@@ -1,46 +0,0 @@
-import React, { useMemo, ComponentType, FC } from 'react';
-import { theme } from '../../theme';
-import { Stack } from '../../components/Stack';
-
-import { RootStack, Label, Hint, Error, BlockTooltip } from './styled';
-import { HelpIcon } from '../../tempIcons/HelpIcon';
-import { generateId } from '../../utils/generateId';
-
-export interface WithLabelsProps {
-  label?: string;
-  hint?: string | React.ReactNode;
-  error?: string;
-  tooltip?: string;
-}
-
-export const withLabels =
-  <P extends object>(Component: ComponentType<P>): FC<P & WithLabelsProps> =>
-  ({ label, hint, error, tooltip, ...otherProps }: WithLabelsProps) => {
-    const componentId = useMemo(() => generateId(Component.name), []);
-
-    if (!label) {
-      return <Component hasError={!!error} {...(otherProps as P)} />;
-    }
-
-    return (
-      <RootStack spacing="sm" alignX="stretch">
-        <div>
-          <Stack direction="horizontal" alignY="center" spacing="sm">
-            <Label htmlFor={componentId}>{label}</Label>
-            {tooltip && (
-              <BlockTooltip text={tooltip}>
-                <HelpIcon
-                  width={theme.sizes.base}
-                  height={theme.sizes.base}
-                  color={theme.colors.neutral.ink.light}
-                />
-              </BlockTooltip>
-            )}
-          </Stack>
-          {hint && <Hint>{hint}</Hint>}
-        </div>
-        <Component id={componentId} hasError={!!error} {...(otherProps as P)} />
-        {error && <Error>{error}</Error>}
-      </RootStack>
-    );
-  };

package/src/hooks/useClickOutside.ts

@@ -1,40 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react';
-
-/**
- * Close a menu or modal by clicking out of it
- */
-export const useClickOutside = (isOpen: boolean, onClose: () => void) => {
-  const ref = useRef(null);
-
-  const escapeListener = useCallback(
-    (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onClose?.();
-      }
-    },
-    [onClose],
-  );
-
-  const clickListener = useCallback(
-    (e: MouseEvent) => {
-      if (!(ref.current! as any).contains(e.target)) {
-        onClose?.();
-      }
-    },
-    [onClose],
-  );
-
-  useEffect(() => {
-    if (isOpen) {
-      document.addEventListener('click', clickListener);
-      document.addEventListener('keyup', escapeListener);
-      return () => {
-        document.removeEventListener('click', clickListener);
-        document.removeEventListener('keyup', escapeListener);
-      };
-    }
-    return undefined;
-  }, [clickListener, escapeListener, isOpen]);
-
-  return ref;
-};

package/src/hooks/useDebounce.ts

@@ -1,15 +0,0 @@
-import { useState, useEffect } from 'react';
-
-export const useDebounce = (value: any, timeout: number) => {
-  const [state, setState] = useState(value);
-
-  useEffect(() => {
-    // Set timeout to run after delay
-    const handler = setTimeout(() => setState(value), timeout);
-
-    // clear the setTimeout listener on unMount
-    return () => clearTimeout(handler);
-  }, [value, timeout]);
-
-  return state;
-};

package/src/hooks/useDropdown.ts

@@ -1,22 +0,0 @@
-import { useState, useCallback } from 'react';
-
-export function useDropdown(): {
-  shouldShowDropdown: boolean;
-  toggleShouldShowDropdown: () => void;
-  setShouldShowDropdown: (state: boolean) => void;
-  closeDropdown: () => void;
-} {
-  const [shouldShowDropdown, setShouldShowDropdown] = useState(false);
-  const toggleShouldShowDropdown = useCallback(
-    () => setShouldShowDropdown(!shouldShowDropdown),
-    [shouldShowDropdown, setShouldShowDropdown],
-  );
-  const closeDropdown = useCallback(() => setShouldShowDropdown(false), [setShouldShowDropdown]);
-
-  return {
-    shouldShowDropdown,
-    toggleShouldShowDropdown,
-    setShouldShowDropdown,
-    closeDropdown,
-  };
-}