@veeqo/ui 0.0.1 → 0.0.4

package/src/components/DataTableExp/utils/alignmentToFlex.ts

@@ -0,0 +1,14 @@
+import { ColumnAlignment } from '../types';
+
+export function alignmentToFlex(align: ColumnAlignment) {
+  switch (align) {
+    case 'left':
+      return 'flex-start';
+    case 'center':
+      return 'center';
+    case 'right':
+      return 'flex-end';
+    default:
+      return 'flex-start';
+  }
+}

package/src/components/DataTableExp/utils/generateTableCss.ts

@@ -0,0 +1,114 @@
+import { theme } from '../../../theme';
+import { parseWidth } from './parseWidth';
+import { sumAllAfterIndex, sumAllBeforeIndex } from './sumAll';
+
+import { ColumnConfigs, ScrollPosition, StripingMode } from '../types';
+
+export type GenerateTableCssArgs = {
+  pinnedLeft: ColumnConfigs;
+  pinnedRight: ColumnConfigs;
+  cellWidths: Array<number>;
+  scrollPosition: ScrollPosition;
+  visible: ColumnConfigs;
+  stripingMode?: StripingMode;
+};
+
+export function generateTableCss({
+  pinnedLeft,
+  pinnedRight,
+  cellWidths,
+  scrollPosition,
+  visible,
+  stripingMode,
+}: GenerateTableCssArgs) {
+  const pinnedLeftStyles = pinnedLeft.map(
+    (_: any, index: number) => `
+    th:nth-child(${index + 1}),
+    td:nth-child(${index + 1}) {
+      position: sticky;
+      left: ${cellWidths ? sumAllBeforeIndex(cellWidths, index + 1) : 0}px;
+      z-index: 2;
+    }
+  `,
+  );
+
+  const pinnedRightStyles = pinnedRight.map(
+    (_: any, index: number) => `
+    th:nth-last-child(${index + 1}),
+    td:nth-last-child(${index + 1}) {
+      position: sticky;
+      right: ${cellWidths ? sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px;
+    }
+  `,
+  );
+
+  const isLeftShadowVisible = scrollPosition !== 'start' && scrollPosition !== 'none';
+  const leftShadow = `
+    th:nth-child(${pinnedLeft.length})::after,
+    td:nth-child(${pinnedLeft.length})::after {
+      position: absolute;
+      transform: translate(100%);
+      top: 0;
+      right: 0;
+      bottom: -1px;
+      width: 30px;
+      content: "";
+      pointer-events: none;
+      box-sizing: border-box;
+      box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};
+    }
+  `;
+
+  const isRightShadowVisible = scrollPosition !== 'end' && scrollPosition !== 'none';
+  const rightShadow = `
+    th:nth-last-child(${pinnedRight.length})::after,
+    td:nth-last-child(${pinnedRight.length})::after {
+      position: absolute;
+      transform: translate(-100%);
+      top: 0;
+      left: 0;
+      bottom: -1px;
+      width: 30px;
+      content: "";
+      pointer-events: none;
+      box-sizing: border-box;
+      box-shadow: ${isRightShadowVisible ? 'inset -10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};
+    }
+  `;
+
+  const stripingRow = `
+    tr:nth-child(odd) > td {
+      background-color: ${theme.colors.neutral.grey.lightest};
+    }
+
+    tr + tr > td {
+      border-top: 1px solid ${theme.colors.neutral.grey.base};
+    }
+  `;
+
+  const stripingNested = `
+    tbody:nth-of-type(odd) > tr > td {
+      background-color: ${theme.colors.neutral.grey.lightest};
+    }
+
+    tbody + tbody > tr:first-child > td {
+      border-top: 1px solid ${theme.colors.neutral.grey.base};
+    }
+  `;
+
+  return `
+    grid-template-columns: ${visible.map((col) => parseWidth(col.width)).join(' ')};
+
+    th::after, td::after {
+      transition: box-shadow .3s;
+    }
+
+    ${pinnedLeft.length > 0 ? pinnedLeftStyles : ''}
+    ${pinnedRight.length > 0 ? pinnedRightStyles : ''}
+
+    ${leftShadow}
+    ${rightShadow}
+
+    ${stripingMode === 'nested' ? stripingNested : stripingRow}
+  `;
+}

package/src/components/DataTableExp/utils/getNextSortState.ts

@@ -0,0 +1,18 @@
+import { ColumnId, SortDirection, SortState } from '../types';
+
+type GetNewSortValuesParameters = {
+  sortState: SortState;
+  columnId: ColumnId;
+};
+
+export function getNextSortState({ sortState, columnId }: GetNewSortValuesParameters): SortState {
+  const isColumnSame = sortState.columnId === columnId;
+  const isDefaultDirection = sortState.direction === SortDirection.ascending;
+
+  let newSortDirection = SortDirection.ascending;
+  if (isColumnSame && isDefaultDirection) {
+    newSortDirection = SortDirection.descending;
+  }
+
+  return { columnId, direction: newSortDirection };
+}

package/src/components/DataTableExp/utils/getRowState.test.ts

@@ -0,0 +1,33 @@
+import type { RowId } from '../types';
+
+export const getRowState = (
+  rowId: RowId,
+  {
+    selectedRowIds,
+    expandedRowIds,
+    disabledRowIds,
+  }: Partial<{ selectedRowIds: RowId[]; expandedRowIds: RowId[]; disabledRowIds: RowId[] }>,
+) => {
+  const rowState = {
+    selected: selectedRowIds?.includes(rowId) || false,
+    expanded: expandedRowIds?.includes(rowId) || false,
+    disabled: disabledRowIds?.includes(rowId) || false,
+  };
+  return rowState;
+};
+
+describe('getRowState', () => {
+  test('returns row state given a row id', () => {
+    const rowIds = {
+      selectedRowIds: ['1', '2'],
+      expandedRowIds: ['1', '3'],
+      disabledRowIds: ['2', '3', '4'],
+    };
+
+    expect(getRowState('1', rowIds)).toEqual({ selected: true, expanded: true, disabled: false });
+    expect(getRowState('2', rowIds)).toEqual({ selected: true, expanded: false, disabled: true });
+    expect(getRowState('3', rowIds)).toEqual({ selected: false, expanded: true, disabled: true });
+    expect(getRowState('4', rowIds)).toEqual({ selected: false, expanded: false, disabled: true });
+    expect(getRowState('5', rowIds)).toEqual({ selected: false, expanded: false, disabled: false });
+  });
+});

package/src/components/DataTableExp/utils/getRowState.ts

@@ -0,0 +1,17 @@
+import type { RowId } from '../types';
+
+export const getRowState = (
+  rowId: RowId,
+  {
+    selectedRowIds,
+    expandedRowIds,
+    disabledRowIds,
+  }: Partial<{ selectedRowIds: RowId[]; expandedRowIds: RowId[]; disabledRowIds: RowId[] }>,
+) => {
+  const rowState = {
+    selected: selectedRowIds?.includes(rowId) || false,
+    expanded: expandedRowIds?.includes(rowId) || false,
+    disabled: disabledRowIds?.includes(rowId) || false,
+  };
+  return rowState;
+};

package/src/components/DataTableExp/utils/index.ts

@@ -0,0 +1,6 @@
+export * from './alignmentToFlex';
+export * from './generateTableCss';
+export * from './getNextSortState';
+export * from './GetSortIcon';
+export * from './parseWidth';
+export * from './sumAll';

package/src/components/DataTableExp/utils/parseWidth.ts

@@ -0,0 +1,12 @@
+export function parseWidth(width: any, fallback?: string): string {
+  switch (typeof width) {
+    case 'string':
+      return width;
+    case 'number':
+      return `${width}px`;
+    case 'object':
+      return `minmax(${parseWidth(width.min, 'max-content')}, ${parseWidth(width.max)})`;
+    default:
+      return fallback || '1fr';
+  }
+}

package/src/components/DataTableExp/utils/sumAll.ts

@@ -0,0 +1,7 @@
+export function sumAllBeforeIndex(array: Array<any>, index: number) {
+  return array.slice(0, index - 1).reduce((acc, val) => acc + val, 0);
+}
+
+export function sumAllAfterIndex(array: Array<any>, index: number) {
+  return array.slice(index).reduce((acc, val) => acc + val, 0);
+}

package/src/components/DescriptionList/DescriptionList.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { DescriptionList } from './index';
+
+const meta = {
+  title: 'Components/Common/DescriptionList',
+  component: DescriptionList,
+  tags: ['autodocs'],
+} satisfies Meta<typeof DescriptionList>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    items: [
+      { term: 'Dimensions', description: '25 x 5 x 10 inches' },
+      { term: 'Weight', description: '3 lbs' },
+      { term: 'Country of origin', description: 'Vietnam' },
+      { term: 'HS code', description: '0019299381123' },
+    ],
+  },
+};

package/src/components/DescriptionList/DescriptionList.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { DescriptionList } from '.';
+
+const items = [
+  { term: 'Term 1', description: 'Description 1' },
+  { term: 'Term 2', description: 'Description 2' },
+  { term: 'Term 3', description: ['Description 3', 'Description 4'] },
+];
+
+describe('DescriptionList', () => {
+  it('renders correctly', () => {
+    const { container } = render(<DescriptionList items={items} />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/DescriptionList/DescriptionList.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import styled from 'styled-components';
+import { theme } from '../../theme';
+
+const List = styled.dl`
+  margin: unset;
+
+  & > * + * {
+    margin-top: ${theme.sizes.base};
+  }
+`;
+
+const Item = styled.div`
+  & > * + * {
+    margin-top: ${theme.sizes.xs};
+  }
+`;
+
+const ItemRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+
+  & > * + * {
+    margin-left: ${theme.sizes.base};
+  }
+`;
+
+const DescriptionContainer = styled.div`
+  text-align: right;
+
+  & > * + * {
+    margin-top: ${theme.sizes.xs};
+  }
+`;
+
+const Term = styled.dt`
+  font-family: ${theme.text.bodyBold.fontFamily};
+  font-size: ${theme.text.bodyBold.fontSize};
+  font-weight: ${theme.text.bodyBold.fontWeight};
+  line-height: ${theme.text.bodyBold.lineHeight};
+  color: ${theme.text.bodyBold.color};
+`;
+
+const Description = styled.dd`
+  margin-left: unset;
+
+  font-family: ${theme.text.body.fontFamily};
+  font-size: ${theme.text.body.fontSize};
+  font-weight: ${theme.text.body.fontWeight};
+  line-height: ${theme.text.body.lineHeight};
+  color: ${theme.text.body.color};
+`;
+
+type DescriptionListItem = {
+  term: string;
+  description: string | string[];
+};
+
+export interface DescriptionListProps {
+  items: DescriptionListItem[];
+  horizontal?: boolean;
+}
+
+export const DescriptionList = ({ items, horizontal }: DescriptionListProps) => {
+  const renderDescription = (description: string | string[]) => {
+    if (Array.isArray(description)) {
+      return description.map((d) => <Description key={d}>{d}</Description>);
+    }
+    return <Description>{description}</Description>;
+  };
+
+  const renderItem = (item: DescriptionListItem) => {
+    if (horizontal) {
+      return (
+        <ItemRow key={item.term}>
+          <Term>{item.term}</Term>
+          <DescriptionContainer>{renderDescription(item.description)}</DescriptionContainer>
+        </ItemRow>
+      );
+    }
+    return (
+      <Item key={item.term}>
+        <Term>{item.term}</Term>
+        {renderDescription(item.description)}
+      </Item>
+    );
+  };
+
+  return <List>{items.map(renderItem)}</List>;
+};

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

@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DescriptionList renders correctly 1`] = `
+.c0 {
+  margin: unset;
+}
+
+.c0 > * + * {
+  margin-top: 1rem;
+}
+
+.c1 > * + * {
+  margin-top: 0.25rem;
+}
+
+.c2 {
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  color: #37424D;
+}
+
+.c3 {
+  margin-left: unset;
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 20px;
+  color: #37424D;
+}
+
+<div>
+  <dl
+    class="c0"
+  >
+    <div
+      class="c1"
+    >
+      <dt
+        class="c2"
+      >
+        Term 1
+      </dt>
+      <dd
+        class="c3"
+      >
+        Description 1
+      </dd>
+    </div>
+    <div
+      class="c1"
+    >
+      <dt
+        class="c2"
+      >
+        Term 2
+      </dt>
+      <dd
+        class="c3"
+      >
+        Description 2
+      </dd>
+    </div>
+    <div
+      class="c1"
+    >
+      <dt
+        class="c2"
+      >
+        Term 3
+      </dt>
+      <dd
+        class="c3"
+      >
+        Description 3
+      </dd>
+      <dd
+        class="c3"
+      >
+        Description 4
+      </dd>
+    </div>
+  </dl>
+</div>
+`;

package/src/components/DescriptionList/index.ts

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

package/src/components/DetailPage/DetailPage.stories.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Card } from '../Card';
+import { DetailPage } from '.';
+import { PageHeader } from '../PageHeader';
+import { CrossIcon } from '../../tempIcons/CrossIcon';
+
+const meta = {
+  title: 'Components/Layout/DetailPage',
+  component: DetailPage,
+  tags: ['autodocs'],
+} satisfies Meta<typeof DetailPage>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    renderHeader: (toggleSidebar) => (
+      <PageHeader
+        title="Page title"
+        imageSrc="https://source.unsplash.com/random"
+        quickActions={[
+          {
+            title: 'Primary action',
+            variant: 'primary',
+            icon: <CrossIcon />,
+            onClick: () => {},
+          },
+        ]}
+        backAction={{ title: 'Go back', onClick: () => {} }}
+        onClickPrevious={() => {}}
+        onClickNext={() => {}}
+        onClickToggleSidebar={toggleSidebar}
+      />
+    ),
+    children: (
+      <>
+        <Card>Body content goes here</Card>
+        <Card>Sidebar content goes here</Card>
+      </>
+    ),
+  },
+};

package/src/components/DetailPage/DetailPage.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { DetailPage } from '.';
+
+describe('DetailPage', () => {
+  test('it renders correctly', () => {
+    const { container } = render(
+      <DetailPage renderHeader={() => <p>Header goes here</p>}>
+        <p>Body content goes here</p>
+        <p>Sidebar content goes here</p>
+      </DetailPage>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/DetailPage/DetailPage.tsx

@@ -0,0 +1,23 @@
+import React, { ReactNode, useState } from 'react';
+
+import { ColumnGrid, ContentContainer } from './styled';
+
+export interface PageHeaderProps {
+  renderHeader: (toggleSidebar: () => void, shouldShowSidebar?: boolean) => ReactNode;
+  children: ReactNode;
+}
+
+export const DetailPage = ({ renderHeader, children }: PageHeaderProps) => {
+  const [shouldShowSidebar, setShouldShowSidebar] = useState(true);
+
+  const toggleSidebar = () => setShouldShowSidebar(!shouldShowSidebar);
+
+  return (
+    <main>
+      {renderHeader(toggleSidebar, shouldShowSidebar)}
+      <ContentContainer>
+        <ColumnGrid showSidebar={shouldShowSidebar}>{children}</ColumnGrid>
+      </ContentContainer>
+    </main>
+  );
+};

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

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DetailPage it renders correctly 1`] = `
+.c1 {
+  width: 100%;
+  display: grid;
+  grid-template-columns: calc(100% - 312px - 1.5rem) 312px;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  grid-gap: 1.5rem;
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+
+.c1 > *:nth-child(2) {
+  opacity: 1.0;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+
+.c0 {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 1.5rem;
+  overflow-x: hidden;
+  background-color: #FAFAFB;
+}
+
+<div>
+  <main>
+    <p>
+      Header goes here
+    </p>
+    <div
+      class="c0"
+    >
+      <div
+        class="c1"
+      >
+        <p>
+          Body content goes here
+        </p>
+        <p>
+          Sidebar content goes here
+        </p>
+      </div>
+    </div>
+  </main>
+</div>
+`;

package/src/components/DetailPage/index.ts

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

package/src/components/DetailPage/styled.ts

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import { theme } from '../../theme';
+
+const { sizes, colors } = theme;
+
+export const ColumnGrid = styled.div<any>`
+  width: 100%;
+  display: grid;
+  grid-template-columns: ${({ showSidebar = true }) =>
+    showSidebar ? `calc(100% - 312px - ${sizes.md}) 312px` : '100% 312px'};
+  align-items: flex-start;
+  grid-gap: ${sizes.md};
+  transition: all 0.2s ease-in-out;
+
+  & > *:nth-child(2) {
+    opacity: ${({ showSidebar = true }) => (showSidebar ? '1.0' : '0')};
+    transition: opacity 0.2s;
+  }
+`;
+
+export const ContentContainer = styled.div`
+  width: 100%;
+  box-sizing: border-box;
+  padding: ${sizes.md};
+  overflow-x: hidden;
+  background-color: ${colors.neutral.grey.lightest};
+`;

package/src/components/DimensionsInput/DimensionsInput.stories.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { DimensionsInput } from '.';
+
+export default {
+  title: 'Components/Forms/DimensionsInput',
+  component: DimensionsInput,
+  tags: ['autodocs'],
+};
+
+const baseArgs = {
+  unit: 'cm',
+  width: '',
+  height: '',
+  length: '',
+  label: '',
+  hint: '',
+  error: '',
+  tooltip: '',
+};
+
+export const InputsOnly = (args: any) => <DimensionsInput {...args} />;
+
+InputsOnly.args = baseArgs;
+
+export const WithLabels = (args: any) => <DimensionsInput {...args} />;
+
+WithLabels.args = {
+  ...baseArgs,
+  label: 'Dimensions',
+  hint: 'Length x Width x Height',
+  error: 'The dimensions entered are bigger than the package',
+  tooltip: 'This is an example tooltip',
+};