@veeqo/ui 0.0.1 → 0.0.4

package/src/components/CopyToClipboard/CopyToClipboard.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CopyToClipboard } from '.';
+
+const meta = {
+  title: 'Components/UI/CopyToClipboard',
+  component: CopyToClipboard,
+  tags: ['autodocs'],
+} satisfies Meta<typeof CopyToClipboard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    text: 'Copied text!',
+  },
+};

package/src/components/CopyToClipboard/CopyToClipboard.test.tsx

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

package/src/components/CopyToClipboard/CopyToClipboard.tsx

@@ -0,0 +1,53 @@
+import React, { useCallback } from 'react';
+import { useCopyToClipboard } from 'react-use';
+
+import { Tooltip } from '../Tooltip';
+import { colors } from '../../theme/modules/colors';
+import { SuccessIcon } from '../../tempIcons/SuccessIcon';
+import { sizes } from '../../theme/modules/sizes';
+import { Button } from '../Button';
+import { ClipboardIcon } from '../../tempIcons/ClipboardIcon';
+
+export interface CopyToClipboardProps {
+  className?: string;
+  text: string;
+  onCopy?: () => void;
+}
+
+const iconSizes = { width: sizes.base, height: sizes.base };
+
+/**
+ * A dynamic button to facilitate copying text to a users' keyboard when clicked.
+ */
+export const CopyToClipboard = ({ className, text, onCopy }: CopyToClipboardProps) => {
+  const [copied, setCopied] = React.useState(false);
+  const [, copyToClipboard] = useCopyToClipboard();
+
+  const handleCopy = useCallback(() => {
+    copyToClipboard(text);
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 2500);
+    if (onCopy) onCopy();
+  }, [copyToClipboard, onCopy, text]);
+
+  return (
+    <Tooltip text={copied ? 'Copied!' : 'Copy to clipboard'}>
+      <Button
+        variant="flat"
+        size="sm"
+        className={className}
+        aria-label={`${copied ? 'Copied' : 'Copy'} "${text}" to keyboard`}
+        icon={
+          copied ? (
+            <SuccessIcon color={colors.secondary.green.base} {...iconSizes} />
+          ) : (
+            <ClipboardIcon color={colors.secondary.blue.base} {...iconSizes} />
+          )
+        }
+        onClick={handleCopy}
+      />
+    </Tooltip>
+  );
+};

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

@@ -0,0 +1,129 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CopyToClipboard it renders correctly 1`] = `
+.c0 {
+  display: inline-block;
+}
+
+.c3 {
+  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;
+}
+
+.c3 svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.c1 {
+  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: 2px;
+  height: 32px;
+  padding-left: 8px;
+  padding-right: 8px;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.c1:hover {
+  cursor: pointer;
+}
+
+.c1:disabled {
+  pointer-events: none;
+  cursor: unset !important;
+}
+
+.c1 > span {
+  position: relative;
+  top: -1px;
+}
+
+.c2 {
+  border-color: transparent;
+  box-shadow: none;
+  color: #37424D;
+}
+
+.c2:hover {
+  background-color: rgba(0,0,0,0.1);
+}
+
+.c2:active {
+  background-color: rgba(0,0,0,0.1);
+}
+
+.c2:focus-visible {
+  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
+  outline: 0;
+}
+
+.c2:disabled {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+<div>
+  <div
+    class="c0"
+  >
+    <div
+      class="c0"
+    >
+      <button
+        aria-label="Copy "test-text" to keyboard"
+        class="c1 c2"
+      >
+        <span
+          class="c3"
+        >
+          <svg
+            color="#0079D1"
+            fill="none"
+            height="1rem"
+            viewBox="0 0 24 24"
+            width="1rem"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 3H14.82C14.4 1.84 13.3 1 12 1C10.7 1 9.6 1.84 9.18 3H5C3.9 3 3 3.9 3 5V21C3 22.1 3.9 23 5 23H19C20.1 23 21 22.1 21 21V5C21 3.9 20.1 3 19 3ZM12 3C12.55 3 13 3.45 13 4C13 4.55 12.55 5 12 5C11.45 5 11 4.55 11 4C11 3.45 11.45 3 12 3ZM19 21H5V5H7V8H17V5H19V21Z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;

package/src/components/CopyToClipboard/index.ts

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

package/src/components/DataTable/DataTable.stories.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Text } from '../Text';
+import { DataTable } from '.';
+import { DataTableHeader, DataTableRow } from './utils/types';
+
+const meta = {
+  title: 'Components/Layout/DataTable',
+  component: DataTable,
+} satisfies Meta<typeof DataTable>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const headers: DataTableHeader[] = [
+  {
+    id: 'name',
+    title: 'Product',
+    sortable: true,
+    icon: 'date',
+    tooltip: 'this is tooltip',
+  },
+  {
+    id: 'sku',
+    title: 'SKU',
+    grow: true,
+  },
+  { id: 'quantity', title: 'Quantity', align: 'right', sortable: true },
+];
+const rows: DataTableRow[] = [
+  { id: 1, data: { name: 'T-Shirt', sku: 'TS-1', quantity: 12 } },
+  { id: 2, data: { name: 'Hoodie', sku: 'HD-1', quantity: 7 } },
+  { id: 3, data: { name: 'Jacket', sku: 'JT-1', quantity: 4 } },
+  { id: 4, data: { name: 'Hat', sku: 'HT-1', quantity: 15 } },
+  { id: 5, data: { name: 'Shoes', sku: 'SH-1', quantity: 8 } },
+];
+const renderRow = (row: DataTableRow) => (
+  <>
+    <DataTable.Cell>{row.data.name}</DataTable.Cell>
+    <DataTable.Cell>{row.data.sku}</DataTable.Cell>
+    <DataTable.Cell align="right">{row.data.quantity}</DataTable.Cell>
+  </>
+);
+const renderFooterRow = () => (
+  <>
+    <DataTable.Cell />
+    <DataTable.Cell>
+      <Text variant="bodySmallBold">Total</Text>
+    </DataTable.Cell>
+    <DataTable.Cell align="right">
+      <Text variant="bodySmallBold">46</Text>
+    </DataTable.Cell>
+  </>
+);
+
+export const Default: Story = {
+  args: {
+    headers,
+    rows,
+    renderRow,
+    renderFooterRow,
+    isError: false,
+    isLoading: false,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    headers,
+    rows: [],
+    renderRow,
+    renderFooterRow,
+    isError: false,
+    isLoading: false,
+  },
+};
+
+export const ErrorState: Story = {
+  args: {
+    headers,
+    rows,
+    renderRow,
+    renderFooterRow,
+    isError: true,
+    isLoading: false,
+  },
+};
+
+export const LoadingState: Story = {
+  args: {
+    headers,
+    rows,
+    renderRow,
+    renderFooterRow,
+    isError: false,
+    isLoading: true,
+  },
+};

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

@@ -0,0 +1,104 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { DataTable } from './DataTable';
+import { DataTableHeader, DataTableRow } from './utils/types';
+
+const headers: DataTableHeader[] = [
+  {
+    id: 'name',
+    title: 'Product',
+    sortable: true,
+  },
+  {
+    id: 'sku',
+    title: 'SKU',
+    grow: true,
+  },
+  {
+    id: 'quantity',
+    title: 'Quantity',
+    align: 'right',
+    sortable: true,
+  },
+];
+
+const rows: DataTableRow[] = [
+  {
+    id: 1,
+    data: {
+      name: 'T-Shirt',
+      sku: 'TS-1',
+      quantity: 12,
+    },
+  },
+  {
+    id: 2,
+    data: {
+      name: 'Hoodie',
+      sku: 'HD-1',
+      quantity: 7,
+    },
+  },
+  {
+    id: 3,
+    data: {
+      name: 'Jacket',
+      sku: 'JT-1',
+      quantity: 4,
+    },
+  },
+  {
+    id: 4,
+    data: {
+      name: 'Hat',
+      sku: 'HT-1',
+      quantity: 15,
+    },
+  },
+  {
+    id: 5,
+    data: {
+      name: 'Shoes',
+      sku: 'SH-1',
+      quantity: 8,
+    },
+  },
+];
+
+const renderRow = ({ data }: DataTableRow) => (
+  <>
+    <DataTable.Cell>{data.name}</DataTable.Cell>
+    <DataTable.Cell>{data.sku}</DataTable.Cell>
+    <DataTable.Cell align="right">{data.quantity}</DataTable.Cell>
+  </>
+);
+
+const renderFooterRow = (tableRows: DataTableRow[]) => (
+  <>
+    <DataTable.Cell>Total</DataTable.Cell>
+    <DataTable.Cell />
+    <DataTable.Cell>
+      {tableRows.reduce(
+        (acc: number, item) =>
+          typeof item.data.quantity === 'number' ? acc + item.data.quantity : acc,
+        0,
+      )}
+    </DataTable.Cell>
+  </>
+);
+
+describe('DataTable', () => {
+  test('it renders correctly', () => {
+    const { container } = render(
+      <DataTable
+        headers={headers}
+        rows={rows}
+        renderRow={renderRow}
+        renderFooterRow={renderFooterRow}
+        isError={false}
+        isLoading={false}
+      />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});