@veeqo/ui 0.0.4 → 0.0.6

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

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

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

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

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

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

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

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

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

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

@@ -1,86 +0,0 @@
-// 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/DetailPage/DetailPage.stories.tsx

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

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

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

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

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

@@ -1,33 +0,0 @@
-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',
-};