@veeqo/ui 0.0.1 → 0.0.3

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

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

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

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

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

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

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

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

@@ -0,0 +1,3 @@
+export { ClickableCell } from './ClickableCell';
+export { EditableCell } from './EditableCell';
+export { SkeletonCell } from './SkeletonCell';

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

@@ -0,0 +1,25 @@
+/* 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};
+  }
+`;

package/src/components/DataTable/index.ts

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