@veeqo/ui 0.0.4 → 0.0.6

package/src/components/DataTable/SpecificState/styled.ts

@@ -1,42 +0,0 @@
-import styled from 'styled-components';
-import { theme } from '../../../theme';
-import { BaseContainer } from '../../BaseContainer';
-import { Text } from '../../Text';
-
-type SpecificStateContainerPropTypes = {
-  height: number;
-};
-
-const SpecificStateContainer = styled(BaseContainer)<SpecificStateContainerPropTypes>`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: ${(props) => props.height}px;
-  background: white;
-`;
-
-const EllipseContainer = styled(BaseContainer)`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 120px;
-  height: 120px;
-  border-radius: 100px;
-  background: ${theme.colors.neutral.grey.base};
-
-  svg {
-    width: 64px !important;
-    height: 64px !important;
-  }
-`;
-
-const TitleText = styled(Text)`
-  margin-top: 24px;
-`;
-
-const SubTitleText = styled(Text)`
-  margin-top: 8px;
-`;
-
-export { SpecificStateContainer, EllipseContainer, TitleText, SubTitleText };

package/src/components/DataTable/StickyHeader.tsx

@@ -1,64 +0,0 @@
-import React, { useState } from 'react';
-import { useScroll } from 'react-use';
-import { FakeHeaderTable, StickyHeaderWrapper } from './styled';
-import { useStickyHeader } from './utils/hooks';
-
-type StickyHeaderPropTypes = {
-  tableRef: React.RefObject<HTMLTableElement>;
-  wrapperRef: React.RefObject<HTMLDivElement>;
-  isFixedLayout: boolean;
-  renderHeader: (offset?: number) => React.ReactNode;
-  wrapperStyle?: React.CSSProperties;
-};
-
-export const StickyHeader = ({
-  renderHeader,
-  tableRef,
-  wrapperRef,
-  isFixedLayout,
-  wrapperStyle,
-}: StickyHeaderPropTypes) => {
-  const [headerWrapperRef, setHeaderWrapperRef] = useState<HTMLDivElement | null>(null);
-  const { isSticky } = useStickyHeader(
-    tableRef,
-    parseInt(
-      typeof wrapperStyle?.top === 'string' ? wrapperStyle?.top : `${wrapperStyle?.top}`,
-      10,
-    ),
-  );
-
-  // here we use 2, because we also have borders on each side by 1 px
-  const wrapperWidth = (wrapperRef.current?.getBoundingClientRect().width || 0) - 2;
-
-  // we use it just to re-render header to update scroll
-  // so we don't need to get any value from this hook
-  useScroll(wrapperRef);
-
-  const updateScroll = (ref?: HTMLDivElement | null) => {
-    const scrollLeft = wrapperRef.current?.scrollLeft || 0;
-
-    if (ref) {
-      // eslint-disable-next-line no-param-reassign
-      ref.scrollLeft = scrollLeft;
-      return;
-    }
-
-    if (headerWrapperRef) headerWrapperRef.scrollLeft = scrollLeft;
-  };
-
-  updateScroll();
-
-  return isSticky ? (
-    <StickyHeaderWrapper
-      ref={(ref) => {
-        setHeaderWrapperRef(ref);
-        updateScroll(ref);
-      }}
-      style={{ width: wrapperWidth, ...wrapperStyle }}
-    >
-      <FakeHeaderTable style={{ tableLayout: isFixedLayout ? 'fixed' : 'auto' }}>
-        {renderHeader()}
-      </FakeHeaderTable>
-    </StickyHeaderWrapper>
-  ) : null;
-};

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

@@ -1,439 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DataTable it renders correctly 1`] = `
-.c0 {
-  width: 100%;
-  overflow-x: auto;
-  overflow-y: hidden;
-  position: relative;
-  border-top: 1px solid #CDD1D5;
-  border-bottom: 1px solid #CDD1D5;
-}
-
-.c0 td:nth-child(undefined):after,
-.c0 th:nth-child(undefined):after {
-  right: 0;
-  -webkit-transform: translate(100%);
-  -ms-transform: translate(100%);
-  transform: translate(100%);
-  position: absolute;
-  top: 0;
-  bottom: -1px;
-  width: 30px;
-  content: "";
-  pointer-events: none;
-  box-sizing: border-box;
-  -webkit-transition: box-shadow .3s;
-  transition: box-shadow .3s;
-}
-
-.c0 td:nth-last-child(undefined):after,
-.c0 th:nth-last-child(undefined):after {
-  left: 0;
-  -webkit-transform: translate(-100%);
-  -ms-transform: translate(-100%);
-  transform: translate(-100%);
-  position: absolute;
-  top: 0;
-  bottom: -1px;
-  width: 30px;
-  content: "";
-  pointer-events: none;
-  box-sizing: border-box;
-  -webkit-transition: box-shadow .3s;
-  transition: box-shadow .3s;
-}
-
-.c1 {
-  border: 1px solid #CDD1D5;
-  border-radius: 4px;
-}
-
-.c3 {
-  background-color: white;
-}
-
-.c12 + .c12 > tr:first-child > td {
-  border-top: 1px solid #DFE3E8;
-}
-
-.c13 tr:not(:first-child) > td {
-  border-top: 1px solid transparent;
-}
-
-.c13.c13.c13 tr:hover td {
-  background-color: #ebf4fb;
-}
-
-.c4.hidden {
-  visibility: collapse;
-}
-
-.c6 {
-  position: relative;
-  padding: 1.25rem 1rem;
-  text-align: left;
-  background-color: white;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-size: 12px;
-  font-weight: normal;
-  color: #37424D;
-  line-height: 1rem;
-  width: auto;
-}
-
-.c6 > * {
-  vertical-align: middle;
-}
-
-.c9 {
-  position: relative;
-  padding: 1.25rem 1rem;
-  text-align: left;
-  background-color: white;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-size: 12px;
-  font-weight: normal;
-  color: #37424D;
-  line-height: 1rem;
-  width: 100%;
-}
-
-.c9 > * {
-  vertical-align: middle;
-}
-
-.c10 {
-  position: relative;
-  padding: 1.25rem 1rem;
-  text-align: right;
-  background-color: white;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-size: 12px;
-  font-weight: normal;
-  color: #37424D;
-  line-height: 1rem;
-  width: auto;
-}
-
-.c10 > * {
-  vertical-align: middle;
-}
-
-.c7 {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  border-bottom: 1px solid #CDD1D5;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-size: 12px;
-  font-weight: 600;
-  color: #37424D;
-}
-
-.c7 span {
-  white-space: pre-line;
-}
-
-.c7.sortable:hover {
-  cursor: pointer;
-  background-color: #F2F3F5;
-}
-
-.c8 {
-  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: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
-.c8 > * + * {
-  margin-left: 0.25rem;
-}
-
-.c11 {
-  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: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c11 > * + * {
-  margin-left: 0.25rem;
-}
-
-.c2 {
-  width: 100%;
-  border-spacing: 0;
-  table-layout: auto;
-}
-
-.c2 .c12:nth-child(even) td {
-  background-color: #FAFAFB;
-}
-
-.c2 * {
-  box-sizing: border-box;
-}
-
-.c14 .c5 {
-  border-top: 1px solid #CDD1D5;
-  background-color: #FAFAFB;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  line-height: 2rem;
-}
-
-<div>
-  <div
-    class="c0 c1"
-  >
-    <table
-      class="c2"
-    >
-      <thead
-        class="c3"
-      >
-        <tr
-          class="c4"
-        >
-          <th
-            class="c5 c6 c7 sortable"
-            id="data-table-header-name"
-            style="width: auto;"
-          >
-            <div
-              class="c8"
-            >
-              <span>
-                Product
-              </span>
-              <svg
-                color="lightgrey"
-                fill="none"
-                height="1rem"
-                viewBox="0 0 16 16"
-                width="1rem"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M5 10L8 13L11 10H5Z"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                />
-                <path
-                  clip-rule="evenodd"
-                  d="M11 6L8 3L5 6L11 6Z"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </div>
-          </th>
-          <th
-            class="c5 c9 c7"
-            id="data-table-header-sku"
-            style="width: auto;"
-          >
-            <div
-              class="c8"
-            >
-              <span>
-                SKU
-              </span>
-            </div>
-          </th>
-          <th
-            class="c5 c10 c7 sortable"
-            id="data-table-header-quantity"
-            style="width: auto;"
-          >
-            <div
-              class="c11"
-            >
-              <span>
-                Quantity
-              </span>
-              <svg
-                color="lightgrey"
-                fill="none"
-                height="1rem"
-                viewBox="0 0 16 16"
-                width="1rem"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M5 10L8 13L11 10H5Z"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                />
-                <path
-                  clip-rule="evenodd"
-                  d="M11 6L8 3L5 6L11 6Z"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </div>
-          </th>
-        </tr>
-      </thead>
-      <tbody
-        class="c12 c13"
-      >
-        <tr
-          class="c4"
-        >
-          <td
-            class="c5 c6"
-          >
-            T-Shirt
-          </td>
-          <td
-            class="c5 c6"
-          >
-            TS-1
-          </td>
-          <td
-            class="c5 c10"
-          >
-            12
-          </td>
-        </tr>
-      </tbody>
-      <tbody
-        class="c12 c13"
-      >
-        <tr
-          class="c4"
-        >
-          <td
-            class="c5 c6"
-          >
-            Hoodie
-          </td>
-          <td
-            class="c5 c6"
-          >
-            HD-1
-          </td>
-          <td
-            class="c5 c10"
-          >
-            7
-          </td>
-        </tr>
-      </tbody>
-      <tbody
-        class="c12 c13"
-      >
-        <tr
-          class="c4"
-        >
-          <td
-            class="c5 c6"
-          >
-            Jacket
-          </td>
-          <td
-            class="c5 c6"
-          >
-            JT-1
-          </td>
-          <td
-            class="c5 c10"
-          >
-            4
-          </td>
-        </tr>
-      </tbody>
-      <tbody
-        class="c12 c13"
-      >
-        <tr
-          class="c4"
-        >
-          <td
-            class="c5 c6"
-          >
-            Hat
-          </td>
-          <td
-            class="c5 c6"
-          >
-            HT-1
-          </td>
-          <td
-            class="c5 c10"
-          >
-            15
-          </td>
-        </tr>
-      </tbody>
-      <tbody
-        class="c12 c13"
-      >
-        <tr
-          class="c4"
-        >
-          <td
-            class="c5 c6"
-          >
-            Shoes
-          </td>
-          <td
-            class="c5 c6"
-          >
-            SH-1
-          </td>
-          <td
-            class="c5 c10"
-          >
-            8
-          </td>
-        </tr>
-      </tbody>
-      <tfoot
-        class="c14"
-      >
-        <tr
-          class="c4"
-        >
-          <td
-            class="c5 c6"
-          >
-            Total
-          </td>
-          <td
-            class="c5 c6"
-          />
-          <td
-            class="c5 c6"
-          >
-            46
-          </td>
-        </tr>
-      </tfoot>
-    </table>
-  </div>
-</div>
-`;

package/src/components/DataTable/cells/ClickableCell.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { theme } from '../../../theme';
-import { CellButton } from './styled';
-import { Cell, CellProps } from '../styled';
-
-const ClickableButton = styled(CellButton)`
-  color: ${theme.text.link.color};
-  text-decoration: ${theme.text.link.textDecoration};
-`;
-
-export interface ClickableCellProps extends CellProps {
-  onClick: React.MouseEventHandler<HTMLButtonElement>;
-  children: React.ReactNode;
-}
-
-export const ClickableCell = ({ onClick, children, ...otherProps }: ClickableCellProps) => (
-  <Cell {...otherProps}>
-    <ClickableButton onClick={onClick}>{children}</ClickableButton>
-  </Cell>
-);

package/src/components/DataTable/cells/EditableCell.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { CellButton } from './styled';
-import { Cell, CellProps } from '../styled';
-
-const Content = styled.div`
-  text-align: inherit;
-  border-bottom: 1px dotted black;
-`;
-
-export interface EditableCellProps extends CellProps {
-  onClick: React.MouseEventHandler<HTMLButtonElement>;
-  children: React.ReactNode;
-}
-
-export const EditableCell = ({ onClick, children, ...otherProps }: EditableCellProps) => (
-  <Cell {...otherProps}>
-    <CellButton onClick={onClick}>
-      <Content>{children}</Content>
-    </CellButton>
-  </Cell>
-);

package/src/components/DataTable/cells/SkeletonCell.tsx

@@ -1,17 +0,0 @@
-import React, { CSSProperties } from 'react';
-import { Cell, CellProps } from '../styled';
-import { SkeletonContent } from '../SkeletonContent';
-
-export interface SkeletonCellProps extends CellProps {
-  style?: CSSProperties;
-}
-
-export const SkeletonCell = ({ style, ...otherProps }: SkeletonCellProps) => (
-  <Cell {...otherProps}>
-    <SkeletonContent style={style} />
-  </Cell>
-);
-
-SkeletonCell.defaultProps = {
-  style: {},
-};

package/src/components/DataTable/cells/SkeletonHeaderCell.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { SkeletonCellProps } from './SkeletonCell';
-import { HeaderCell } from '../styled';
-import { SkeletonContent } from '../SkeletonContent';
-
-type SkeletonHeaderCellPropTypes = SkeletonCellProps & {
-  width: string | number;
-  isLoading: boolean;
-};
-
-export const SkeletonHeaderCell = ({
-  style,
-  width,
-  isLoading,
-  ...otherProps
-}: SkeletonHeaderCellPropTypes) => (
-  <HeaderCell {...otherProps} style={{ width }}>
-    <SkeletonContent style={style} isLoading={isLoading} />
-  </HeaderCell>
-);

package/src/components/DataTable/cells/styled.ts

@@ -1,25 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-
-import styled from 'styled-components';
-import { theme } from '../../../theme';
-
-export const CellButton = styled.button`
-  appearance: none;
-  border: 0;
-  background-color: transparent;
-  font: inherit;
-
-  display: inline-block;
-  box-sizing: border-box;
-  width: calc(100% + 1.5rem);
-  margin: -0.75rem -0.75rem;
-  padding: 0.75rem 0.75rem;
-  text-align: inherit;
-  line-height: ${theme.sizes.base};
-  border-radius: ${theme.radius.base};
-
-  &:hover {
-    cursor: pointer;
-    background-color: ${theme.colors.secondary.blue.lightest};
-  }
-`;