From 5c744cf11989e22ca207bea524efc74c9c77eb17 Mon Sep 17 00:00:00 2001 From: Steven Straatemans Date: Tue, 15 Oct 2024 16:31:57 +0200 Subject: [PATCH 01/11] start adding the datatable component --- .changeset/orange-tips-tease.md | 5 + .../components/EventFilter/EventFilter.tsx | 1 - packages/libs/kode-ui/package.json | 1 + .../kode-ui/src/components/Media/index.ts | 13 + packages/libs/kode-ui/src/components/index.ts | 2 + packages/libs/kode-ui/src/index.ts | 2 + .../patterns/DataTable/DataTable.stories.tsx | 64 ++++ .../src/patterns/DataTable/DataTable.tsx | 59 ++++ .../DataTableDesktop/DataTableDesktop.tsx | 63 ++++ .../DataTable/DataTableDesktop/FieldCell.tsx | 72 ++++ .../DataTable/DataTableDesktop/styles.css.ts | 25 ++ .../DataTableMobile/DataTableMobile.tsx | 27 ++ .../DataTable/DataTableMobile/styles.css.ts | 71 ++++ .../DataTable/LoadingSkeleton/LoadingPill.tsx | 22 ++ .../ValueLoader/ValueLoader.tsx | 21 ++ .../DataTable/LoadingSkeleton/style.css.ts | 57 ++++ .../DataTable/LoadingSkeleton/types.ts | 14 + .../PaginationButton/PaginationButton.tsx | 21 ++ .../TablePagination/TablePagination.tsx | 79 +++++ .../DataTable/TablePagination/styles.css.ts | 49 +++ .../src/patterns/DataTable/styles.css.ts | 96 ++++++ .../DataTable/utils/__test__/getItem.test.ts | 30 ++ .../DataTable/utils/formatAccount.tsx | 11 + .../patterns/DataTable/utils/formatAmount.tsx | 11 + .../DataTable/utils/formatDefault.tsx | 11 + .../patterns/DataTable/utils/formatLink.tsx | 45 +++ .../DataTable/utils/formatMultiStepTx.tsx | 14 + .../patterns/DataTable/utils/formatStatus.tsx | 13 + .../src/patterns/DataTable/utils/getItem.ts | 33 ++ packages/libs/kode-ui/vitest.config.ts | 1 + pnpm-lock.yaml | 311 ++++++++++-------- 31 files changed, 1108 insertions(+), 136 deletions(-) create mode 100644 .changeset/orange-tips-tease.md create mode 100644 packages/libs/kode-ui/src/components/Media/index.ts create mode 100644 packages/libs/kode-ui/src/patterns/DataTable/DataTable.stories.tsx create mode 100644 packages/libs/kode-ui/src/patterns/DataTable/DataTable.tsx create mode 100644 packages/libs/kode-ui/src/patterns/DataTable/DataTableDesktop/DataTableDesktop.tsx create mode 100644 packages/libs/kode-ui/src/patterns/DataTable/DataTableDesktop/FieldCell.tsx create mode 100644 packages/libs/kode-ui/src/patterns/DataTable/DataTableDesktop/styles.css.ts create mode 100644 packages/libs/kode-ui/src/patterns/DataTable/DataTableMobile/DataTableMobile.tsx create mode 100644 packages/libs/kode-ui/src/patterns/DataTable/DataTableMobile/styles.css.ts create mode 100644 packages/libs/kode-ui/src/patterns/DataTable/LoadingSkeleton/LoadingPill.tsx create mode 100644 packages/libs/kode-ui/src/patterns/DataTable/LoadingSkeleton/ValueLoader/ValueLoader.tsx create mode 100644 packages/libs/kode-ui/src/patterns/DataTable/LoadingSkeleton/style.css.ts create mode 100644 packages/libs/kode-ui/src/patterns/DataTable/LoadingSkeleton/types.ts create mode 100644 packages/libs/kode-ui/src/patterns/DataTable/TablePagination/PaginationButton/PaginationButton.tsx create mode 100644 packages/libs/kode-ui/src/patterns/DataTable/TablePagination/TablePagination.tsx create mode 100644 packages/libs/kode-ui/src/patterns/DataTable/TablePagination/styles.css.ts create mode 100644 packages/libs/kode-ui/src/patterns/DataTable/styles.css.ts create mode 100644 packages/libs/kode-ui/src/patterns/DataTable/utils/__test__/getItem.test.ts create mode 100644 packages/libs/kode-ui/src/patterns/DataTable/utils/formatAccount.tsx create mode 100644 packages/libs/kode-ui/src/patterns/DataTable/utils/formatAmount.tsx create mode 100644 packages/libs/kode-ui/src/patterns/DataTable/utils/formatDefault.tsx create mode 100644 packages/libs/kode-ui/src/patterns/DataTable/utils/formatLink.tsx create mode 100644 packages/libs/kode-ui/src/patterns/DataTable/utils/formatMultiStepTx.tsx create mode 100644 packages/libs/kode-ui/src/patterns/DataTable/utils/formatStatus.tsx create mode 100644 packages/libs/kode-ui/src/patterns/DataTable/utils/getItem.ts diff --git a/.changeset/orange-tips-tease.md b/.changeset/orange-tips-tease.md new file mode 100644 index 0000000000..df4a9a8f10 --- /dev/null +++ b/.changeset/orange-tips-tease.md @@ -0,0 +1,5 @@ +--- +'@kadena/kode-ui': minor +--- + +add the DataTable Component diff --git a/packages/apps/explorer/src/components/EventFilter/EventFilter.tsx b/packages/apps/explorer/src/components/EventFilter/EventFilter.tsx index 5c348425d1..230db27d95 100644 --- a/packages/apps/explorer/src/components/EventFilter/EventFilter.tsx +++ b/packages/apps/explorer/src/components/EventFilter/EventFilter.tsx @@ -106,7 +106,6 @@ export const EventFilter: FC = ({ onSubmit }) => { return v[1]; }); - console.log({ errors, values }); return ( <> Filters diff --git a/packages/libs/kode-ui/package.json b/packages/libs/kode-ui/package.json index e5e601da9f..2a232d0596 100644 --- a/packages/libs/kode-ui/package.json +++ b/packages/libs/kode-ui/package.json @@ -86,6 +86,7 @@ "verify": "tsc --noEmit" }, "dependencies": { + "@artsy/fresnel": "^7.1.4", "@kadena/kode-icons": "workspace:*", "@react-aria/accordion": "3.0.0-alpha.25", "@react-aria/focus": "^3.16.0", diff --git a/packages/libs/kode-ui/src/components/Media/index.ts b/packages/libs/kode-ui/src/components/Media/index.ts new file mode 100644 index 0000000000..700f78b9e5 --- /dev/null +++ b/packages/libs/kode-ui/src/components/Media/index.ts @@ -0,0 +1,13 @@ +import { createMedia } from '@artsy/fresnel'; + +const AppMedia = createMedia({ + breakpoints: { + none: 0, + xs: 0, + sm: 640, + md: 768, + lg: 1024, + }, +}); + +export const { Media, MediaContextProvider } = AppMedia; diff --git a/packages/libs/kode-ui/src/components/index.ts b/packages/libs/kode-ui/src/components/index.ts index bb686cac7c..8b899d93e3 100644 --- a/packages/libs/kode-ui/src/components/index.ts +++ b/packages/libs/kode-ui/src/components/index.ts @@ -138,3 +138,5 @@ export { IContextMenuItemProps, IContextMenuProps, } from './ContextMenu'; + +export { Media, MediaContextProvider } from './Media'; diff --git a/packages/libs/kode-ui/src/index.ts b/packages/libs/kode-ui/src/index.ts index 23c36883f1..9575480896 100644 --- a/packages/libs/kode-ui/src/index.ts +++ b/packages/libs/kode-ui/src/index.ts @@ -93,6 +93,8 @@ export { KadenaLogo, Link, MaskedValue, + Media, + MediaContextProvider, NavHeader, NavHeaderButton, NavHeaderButtonLink, diff --git a/packages/libs/kode-ui/src/patterns/DataTable/DataTable.stories.tsx b/packages/libs/kode-ui/src/patterns/DataTable/DataTable.stories.tsx new file mode 100644 index 0000000000..3e4ce9bd86 --- /dev/null +++ b/packages/libs/kode-ui/src/patterns/DataTable/DataTable.stories.tsx @@ -0,0 +1,64 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; +import { MediaContextProvider } from './../../components'; +import type { IDataTableProps } from './DataTable'; +import { DataTable } from './DataTable'; + +const meta: Meta = { + title: 'Patterns/DataTable', + parameters: { + status: { type: 'stable' }, + docs: { + description: { + component: + 'The DataTable is a specific way to show table data. On mobile the view switches to a different view, to show the data better', + }, + }, + }, + argTypes: {}, +}; + +export default meta; +type Story = StoryObj; + +export const Primary: Story = { + name: 'DataTable Pattern', + args: {}, + render: ({}) => { + const data = [ + { + node: { + requestKey: 'key1', + parameters: 'param1', + block: { + height: 10, + }, + }, + }, + ]; + return ( + + + + ); + }, +}; diff --git a/packages/libs/kode-ui/src/patterns/DataTable/DataTable.tsx b/packages/libs/kode-ui/src/patterns/DataTable/DataTable.tsx new file mode 100644 index 0000000000..4c19e3d8c7 --- /dev/null +++ b/packages/libs/kode-ui/src/patterns/DataTable/DataTable.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { Media } from './../../components/Media'; +import { DataTableDesktop } from './DataTableDesktop/DataTableDesktop'; +import { DataTableMobile } from './DataTableMobile/DataTableMobile'; +import type { ITableField } from './LoadingSkeleton/types'; +import type { ITablePaginationPageOptions } from './TablePagination/TablePagination'; +import { TablePagination } from './TablePagination/TablePagination'; +import { fullWidthClass } from './styles.css'; + +export interface IDataTableProps { + label?: string; + data: any[]; + fields: ITableField[]; + isLoading?: boolean; + totalCount?: number; + pageSize?: number; + setPage?: (page: ITablePaginationPageOptions) => void; + pageInfo?: { + endCursor?: string | null; + startCursor?: string | null; + hasNextPage?: boolean; + hasPreviousPage?: boolean; + }; +} + +export const DataTable: React.FC = ({ + fields, + data, + label, + isLoading = false, + totalCount, + pageSize, + setPage, + pageInfo, +}) => { + return ( + <> + + + + + + + {!!(setPage && pageInfo && totalCount && pageSize) && ( + + )} + + ); +}; diff --git a/packages/libs/kode-ui/src/patterns/DataTable/DataTableDesktop/DataTableDesktop.tsx b/packages/libs/kode-ui/src/patterns/DataTable/DataTableDesktop/DataTableDesktop.tsx new file mode 100644 index 0000000000..1479838a14 --- /dev/null +++ b/packages/libs/kode-ui/src/patterns/DataTable/DataTableDesktop/DataTableDesktop.tsx @@ -0,0 +1,63 @@ +import type { FC } from 'react'; +import React from 'react'; +import type { IDataTableProps } from '../DataTable'; +import { alignVariants } from '../styles.css'; +import { + Cell, + Column, + Row, + Stack, + Table, + TableBody, + TableHeader, +} from './../../../components'; +import { FieldCell } from './FieldCell'; +import { tableBorderClass, tableClass } from './styles.css'; + +type IProps = Omit< + IDataTableProps, + 'pageInfo' | 'setPage' | 'pageSize' | 'totalCount' +>; + +export const DataTableDesktop: FC = ({ + data, + fields, + label = 'Table', + isLoading = false, +}) => { + return ( + + + + {fields.map((field) => ( + + + {field.label} + + + ))} + + + {data.map((item, idx) => ( + + {fields.map((field) => ( + + + + ))} + + ))} + +
+ + ); +}; diff --git a/packages/libs/kode-ui/src/patterns/DataTable/DataTableDesktop/FieldCell.tsx b/packages/libs/kode-ui/src/patterns/DataTable/DataTableDesktop/FieldCell.tsx new file mode 100644 index 0000000000..d0f8909561 --- /dev/null +++ b/packages/libs/kode-ui/src/patterns/DataTable/DataTableDesktop/FieldCell.tsx @@ -0,0 +1,72 @@ +import classNames from 'classnames'; +import type { FC } from 'react'; +import React from 'react'; +import { ValueLoader } from '../LoadingSkeleton/ValueLoader/ValueLoader'; +import { + alignVariants, + dataFieldClass, + dataFieldMultipleIconsClass, +} from '../styles.css'; +import { FormatDefault } from '../utils/formatDefault'; +import type { IFieldCellProps } from '../utils/getItem'; +import { getItem } from '../utils/getItem'; +import { Text } from './../../../components'; + +export const FieldCell: FC = ({ + field, + item, + isLoading = false, +}) => { + if ( + typeof field.key === 'string' && + (typeof field.render === 'function' || !field.render) + ) { + const Render = field.render ? field.render : FormatDefault(); + + return ( + + + + + + ); + } + + if (typeof field.key === 'object' && typeof field.render === 'object') { + const renderArray = field.render ?? []; + return ( + + {field.key.map((key, idx) => { + const Render = renderArray[idx] ? renderArray[idx] : FormatDefault(); + + return ( + + + + ); + })} + + ); + } + + return null; +}; diff --git a/packages/libs/kode-ui/src/patterns/DataTable/DataTableDesktop/styles.css.ts b/packages/libs/kode-ui/src/patterns/DataTable/DataTableDesktop/styles.css.ts new file mode 100644 index 0000000000..cca87fce91 --- /dev/null +++ b/packages/libs/kode-ui/src/patterns/DataTable/DataTableDesktop/styles.css.ts @@ -0,0 +1,25 @@ +import { globalStyle, style } from '@vanilla-extract/css'; +import { atoms } from './../../../styles'; + +export const tableClass = style({ + width: '100%', +}); + +globalStyle(`${tableClass} td span`, { + display: 'block', + alignItems: 'center', + contain: 'inline-size', + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', +}); + +export const tableBorderClass = style([ + atoms({ + borderRadius: 'lg', + borderColor: 'base.subtle', + borderWidth: 'hairline', + borderStyle: 'solid', + }), + {}, +]); diff --git a/packages/libs/kode-ui/src/patterns/DataTable/DataTableMobile/DataTableMobile.tsx b/packages/libs/kode-ui/src/patterns/DataTable/DataTableMobile/DataTableMobile.tsx new file mode 100644 index 0000000000..6636f75a40 --- /dev/null +++ b/packages/libs/kode-ui/src/patterns/DataTable/DataTableMobile/DataTableMobile.tsx @@ -0,0 +1,27 @@ +import type { FC } from 'react'; +import React from 'react'; +import type { IDataTableProps } from '../DataTable'; +import { FieldCell } from '../DataTableDesktop/FieldCell'; +import { headerClass, rowClass, sectionClass } from './styles.css'; + +type IProps = Omit< + IDataTableProps, + 'pageInfo' | 'setPage' | 'pageSize' | 'totalCount' +>; + +export const DataTableMobile: FC = ({ + data, + fields, + isLoading = false, +}) => { + return data.map((item, idx) => ( +
+ {fields.map((field) => ( +
+ {field.label} + +
+ ))} +
+ )); +}; diff --git a/packages/libs/kode-ui/src/patterns/DataTable/DataTableMobile/styles.css.ts b/packages/libs/kode-ui/src/patterns/DataTable/DataTableMobile/styles.css.ts new file mode 100644 index 0000000000..47337910e5 --- /dev/null +++ b/packages/libs/kode-ui/src/patterns/DataTable/DataTableMobile/styles.css.ts @@ -0,0 +1,71 @@ +import { atoms, style, tokens } from './../../../styles'; + +export const sectionClass = style([ + atoms({ + padding: 'n6', + backgroundColor: 'base.default', + marginBlockEnd: 'md', + }), +]); + +export const headerClass = style([ + atoms({ + color: 'text.base.default', + fontWeight: 'primaryFont.bold', + paddingInlineEnd: 'md', + }), +]); + +export const dataFieldClass = style({ + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + fontWeight: tokens.kda.foundation.typography.weight.primaryFont.medium, + // If we use atoms it will be overridden by the Text component. + color: tokens.kda.foundation.color.text.base.default, +}); + +export const rowClass = style([ + atoms({ display: 'flex' }), + { + alignItems: 'center', + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + contain: 'inline-size', + }, +]); + +export const badgeClass = style({ + backgroundColor: tokens.kda.foundation.color.neutral.n100, + color: tokens.kda.foundation.color.neutral.n0, +}); + +export const dataFieldLinkClass = style({ + display: 'flex', + alignItems: 'center', + gap: tokens.kda.foundation.spacing.sm, + minWidth: 0, +}); + +export const linkClass = style({ + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + textDecoration: 'none', +}); + +export const iconLinkClass = style([ + atoms({ + color: 'text.base.default', + }), +]); + +export const linkIconClass = style([ + atoms({ + fontSize: 'xs', + }), + { + minWidth: 'fit-content', + }, +]); diff --git a/packages/libs/kode-ui/src/patterns/DataTable/LoadingSkeleton/LoadingPill.tsx b/packages/libs/kode-ui/src/patterns/DataTable/LoadingSkeleton/LoadingPill.tsx new file mode 100644 index 0000000000..9f6ad28abd --- /dev/null +++ b/packages/libs/kode-ui/src/patterns/DataTable/LoadingSkeleton/LoadingPill.tsx @@ -0,0 +1,22 @@ +import classNames from 'classnames'; +import type { FC } from 'react'; +import React from 'react'; +import { loadingPillClass, loadingVariants } from './style.css'; +import type { ILoadingVariants } from './types'; + +interface IProps { + className?: string; + variant: ILoadingVariants; +} + +export const LoadingPill: FC = ({ className, variant }) => { + return ( + + ); +}; diff --git a/packages/libs/kode-ui/src/patterns/DataTable/LoadingSkeleton/ValueLoader/ValueLoader.tsx b/packages/libs/kode-ui/src/patterns/DataTable/LoadingSkeleton/ValueLoader/ValueLoader.tsx new file mode 100644 index 0000000000..a05ab2aa71 --- /dev/null +++ b/packages/libs/kode-ui/src/patterns/DataTable/LoadingSkeleton/ValueLoader/ValueLoader.tsx @@ -0,0 +1,21 @@ +import type { FC, PropsWithChildren } from 'react'; +import React from 'react'; +import { LoadingPill } from '../LoadingPill'; +import type { ILoadingVariants } from '../types'; + +interface IProps { + isLoading: boolean; + className?: string; + variant?: ILoadingVariants; +} + +export const ValueLoader: FC> = ({ + isLoading, + children, + className, + variant = 'default', +}) => { + if (isLoading) return ; + + return children; +}; diff --git a/packages/libs/kode-ui/src/patterns/DataTable/LoadingSkeleton/style.css.ts b/packages/libs/kode-ui/src/patterns/DataTable/LoadingSkeleton/style.css.ts new file mode 100644 index 0000000000..6551480895 --- /dev/null +++ b/packages/libs/kode-ui/src/patterns/DataTable/LoadingSkeleton/style.css.ts @@ -0,0 +1,57 @@ +import { keyframes } from '@vanilla-extract/css'; +import { atoms, recipe, style, tokens } from './../../../styles'; + +const shimmer = keyframes({ + '100%': { transform: 'translateX(100%)' }, +}); + +export const loadingPillClass = style([ + atoms({ + position: 'relative', + display: 'flex', + }), + { + backgroundColor: tokens.kda.foundation.color.background.input['@hover'], + + minHeight: '20px', + height: '65%', + overflow: 'hidden', + selectors: { + '&::after': { + overflow: 'hidden', + content: '', + position: 'absolute', + inset: 0, + transform: 'translateX(-100%)', + animation: `${shimmer} 5s infinite`, + backgroundImage: `linear-gradient(90deg, rgba(0,0,0,0) 0%, ${tokens.kda.foundation.color.background.base['@focus']} 35%, rgba(0,0,0,0) 59%)`, + }, + }, + }, +]); + +export const loadingVariants = recipe({ + variants: { + variant: { + default: [ + atoms({ + borderRadius: 'md', + }), + { + width: '100%', + maxWidth: '70%', + minWidth: '50px', + }, + ], + icon: [ + atoms({ + borderRadius: 'round', + }), + { + width: '30%', + aspectRatio: '1/1', + }, + ], + }, + }, +}); diff --git a/packages/libs/kode-ui/src/patterns/DataTable/LoadingSkeleton/types.ts b/packages/libs/kode-ui/src/patterns/DataTable/LoadingSkeleton/types.ts new file mode 100644 index 0000000000..ecd20e0fe8 --- /dev/null +++ b/packages/libs/kode-ui/src/patterns/DataTable/LoadingSkeleton/types.ts @@ -0,0 +1,14 @@ +import type { FC } from 'react'; + +export type ILoadingVariants = 'default' | 'icon'; + +export interface ITableField { + width: any; + variant?: 'body' | 'code'; + align?: 'start' | 'end' | 'center'; + label: string; + key: string | string[]; + render?: FC<{ value: string }> | FC<{ value: string }>[]; + isLoading?: boolean; + loaderVariant?: ILoadingVariants; +} diff --git a/packages/libs/kode-ui/src/patterns/DataTable/TablePagination/PaginationButton/PaginationButton.tsx b/packages/libs/kode-ui/src/patterns/DataTable/TablePagination/PaginationButton/PaginationButton.tsx new file mode 100644 index 0000000000..6a3bc35a95 --- /dev/null +++ b/packages/libs/kode-ui/src/patterns/DataTable/TablePagination/PaginationButton/PaginationButton.tsx @@ -0,0 +1,21 @@ +import classNames from 'classnames'; +import type { FC, PropsWithChildren } from 'react'; +import React from 'react'; +import { buttonClass, disabledClass } from '../styles.css'; + +export const PaginationButton: FC< + PropsWithChildren<{ + onClick: () => void; + isDisabled: boolean; + }> +> = ({ children, onClick, isDisabled }) => { + return ( + + ); +}; diff --git a/packages/libs/kode-ui/src/patterns/DataTable/TablePagination/TablePagination.tsx b/packages/libs/kode-ui/src/patterns/DataTable/TablePagination/TablePagination.tsx new file mode 100644 index 0000000000..ae3ab3e153 --- /dev/null +++ b/packages/libs/kode-ui/src/patterns/DataTable/TablePagination/TablePagination.tsx @@ -0,0 +1,79 @@ +import { + MonoKeyboardArrowLeft, + MonoKeyboardArrowRight, +} from '@kadena/kode-icons/system'; +import type { FC } from 'react'; +import React from 'react'; +import { Stack } from './../../../components'; +import { PaginationButton } from './PaginationButton/PaginationButton'; +import { paginationClass } from './styles.css'; + +export interface ITablePaginationPageOptions { + after?: string | null; + before?: string | null; + first?: number | null; + last?: number | null; +} +interface IProps { + totalCount: number; + pageSize: number; + setPage: (page: ITablePaginationPageOptions) => void; + pageInfo: { + endCursor?: string | null; + startCursor?: string | null; + hasNextPage?: boolean; + hasPreviousPage?: boolean; + }; +} + +export const TablePagination: FC = ({ + pageSize, + totalCount, + setPage, + pageInfo, +}) => { + const handlePageSelect = (direction: string) => () => { + if (direction === 'next') { + setPage({ after: pageInfo.endCursor, first: pageSize }); + } + if (direction === 'previous') { + setPage({ before: pageInfo.startCursor, last: pageSize }); + } + if (direction === 'first') { + setPage({ first: pageSize }); + } + if (direction === 'last') { + setPage({ last: totalCount % pageSize }); + } + }; + + return ( + + + First + + + + + + + + + + Last + + + ); +}; diff --git a/packages/libs/kode-ui/src/patterns/DataTable/TablePagination/styles.css.ts b/packages/libs/kode-ui/src/patterns/DataTable/TablePagination/styles.css.ts new file mode 100644 index 0000000000..4f446f3094 --- /dev/null +++ b/packages/libs/kode-ui/src/patterns/DataTable/TablePagination/styles.css.ts @@ -0,0 +1,49 @@ +import { atoms, style, token } from './../../../styles'; + +export const buttonClass = style([ + atoms({ + color: 'text.base.default', + borderRadius: 'xs', + borderColor: 'base.default', + borderWidth: 'hairline', + borderStyle: 'solid', + backgroundColor: 'transparent', + paddingInline: 'sm', + paddingBlock: 'sm', + cursor: 'pointer', + }), + { + minWidth: '40px', + selectors: { + '&:hover': { + backgroundColor: token('color.background.base.@active'), + borderColor: token('color.border.base.@active'), + color: token('color.text.base.@active'), + }, + }, + }, +]); + +export const paginationClass = style([ + atoms({ + paddingInline: 'md', + }), +]); + +export const disabledClass = style([ + atoms({ + cursor: 'not-allowed', + }), + { + backgroundColor: token('color.background.base.@disabled'), + borderColor: token('color.border.base.@disabled'), + color: token('color.text.base.@disabled'), + selectors: { + '&:hover': { + backgroundColor: token('color.background.base.@disabled'), + borderColor: token('color.border.base.@disabled'), + color: token('color.text.base.@disabled'), + }, + }, + }, +]); diff --git a/packages/libs/kode-ui/src/patterns/DataTable/styles.css.ts b/packages/libs/kode-ui/src/patterns/DataTable/styles.css.ts new file mode 100644 index 0000000000..6b15b49c9a --- /dev/null +++ b/packages/libs/kode-ui/src/patterns/DataTable/styles.css.ts @@ -0,0 +1,96 @@ +import { atoms, recipe, tokens } from '@kadena/kode-ui/styles'; +import { style } from '@vanilla-extract/css'; + +export const sectionClass = style([ + atoms({ + padding: 'n6', + backgroundColor: 'base.default', + marginBlockEnd: 'md', + display: 'grid', + }), + { + justifyContent: 'start', + gridTemplateColumns: `auto repeat(3, minmax(${tokens.kda.foundation.size.n32}, 1fr))`, + gap: `${tokens.kda.foundation.spacing.sm} ${tokens.kda.foundation.spacing.xl}`, + }, +]); + +export const headerClass = style([ + atoms({ + fontWeight: 'primaryFont.bold', + }), +]); + +export const badgeClass = style({ + backgroundColor: tokens.kda.foundation.color.neutral.n100, + color: tokens.kda.foundation.color.neutral.n0, +}); + +export const dataFieldLinkClass = style({ + display: 'flex', + alignItems: 'center', + gap: tokens.kda.foundation.spacing.sm, + minWidth: 0, +}); + +export const linkClass = style({ + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + textDecoration: 'none', +}); + +export const linkWrapperClass = style({ + width: `calc(100% - 15px)`, +}); +export const iconLinkClass = style([ + atoms({ + color: 'text.base.default', + }), +]); + +export const linkIconClass = style([ + atoms({ + fontSize: 'xs', + }), + { + minWidth: 'fit-content', + }, +]); + +export const dataFieldClass = style({ + display: 'flex!important', + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + + fontWeight: tokens.kda.foundation.typography.weight.primaryFont.medium, + // If we use atoms it will be overridden by the Text component. + color: tokens.kda.foundation.color.text.base.default, +}); + +export const dataFieldMultipleIconsClass = style([ + atoms({ + gap: 'xs', + }), +]); + +export const alignVariants = recipe({ + variants: { + align: { + start: style({ + justifyContent: 'flex-start', + }), + end: style({ + justifyContent: 'flex-end', + }), + center: style({ + justifyContent: 'center', + }), + }, + }, +}); + +export const fullWidthClass = style({ + width: '100%', +}); diff --git a/packages/libs/kode-ui/src/patterns/DataTable/utils/__test__/getItem.test.ts b/packages/libs/kode-ui/src/patterns/DataTable/utils/__test__/getItem.test.ts new file mode 100644 index 0000000000..756c173f25 --- /dev/null +++ b/packages/libs/kode-ui/src/patterns/DataTable/utils/__test__/getItem.test.ts @@ -0,0 +1,30 @@ +import { describe, expect, it } from 'vitest'; +import { getItem } from '../getItem'; + +describe('getItem', () => { + const item = { + name: 'He-man', + props: { + pet: 'Cringer', + hasThePower: true, + }, + }; + it('should return the correct value if the key is found', () => { + const result = getItem(item, 'props.pet'); + expect(result).toEqual('Cringer'); + + const result2 = getItem(item, 'props'); + expect(result2).toEqual({ + pet: 'Cringer', + hasThePower: true, + }); + }); + it('should return undefined when item is not found', () => { + const result = getItem(item, 'props.skeletor'); + expect(result).toEqual(undefined); + }); + it('should return undefined when there is no item', () => { + const result = getItem(undefined, 'props.skeletor'); + expect(result).toEqual(undefined); + }); +}); diff --git a/packages/libs/kode-ui/src/patterns/DataTable/utils/formatAccount.tsx b/packages/libs/kode-ui/src/patterns/DataTable/utils/formatAccount.tsx new file mode 100644 index 0000000000..0f7aabfdb4 --- /dev/null +++ b/packages/libs/kode-ui/src/patterns/DataTable/utils/formatAccount.tsx @@ -0,0 +1,11 @@ +import type { FC } from 'react'; +import { maskValue } from './../../../components'; + +interface IProps { + value: string; +} + +export const FormatAccount: () => FC = + () => + ({ value }) => + value && maskValue(value); diff --git a/packages/libs/kode-ui/src/patterns/DataTable/utils/formatAmount.tsx b/packages/libs/kode-ui/src/patterns/DataTable/utils/formatAmount.tsx new file mode 100644 index 0000000000..377ae6fd4c --- /dev/null +++ b/packages/libs/kode-ui/src/patterns/DataTable/utils/formatAmount.tsx @@ -0,0 +1,11 @@ +import type { FC } from 'react'; +import React from 'react'; + +interface IProps { + value: string; +} + +export const FormatAmount = (): FC => { + const Component: FC = ({ value }) => <>{value} KDA; + return Component; +}; diff --git a/packages/libs/kode-ui/src/patterns/DataTable/utils/formatDefault.tsx b/packages/libs/kode-ui/src/patterns/DataTable/utils/formatDefault.tsx new file mode 100644 index 0000000000..da6566ea22 --- /dev/null +++ b/packages/libs/kode-ui/src/patterns/DataTable/utils/formatDefault.tsx @@ -0,0 +1,11 @@ +import type { FC } from 'react'; +import React from 'react'; + +interface IProps { + value: string; +} + +export const FormatDefault = (): FC => { + const Component: FC = ({ value }) => <>{value}; + return Component; +}; diff --git a/packages/libs/kode-ui/src/patterns/DataTable/utils/formatLink.tsx b/packages/libs/kode-ui/src/patterns/DataTable/utils/formatLink.tsx new file mode 100644 index 0000000000..8f898b846f --- /dev/null +++ b/packages/libs/kode-ui/src/patterns/DataTable/utils/formatLink.tsx @@ -0,0 +1,45 @@ +// import { Link } from '@/components/Routing/Link'; +// import { MonoArrowOutward } from '@kadena/kode-icons'; +import { Stack, Text } from '@kadena/kode-ui'; +import type { FC } from 'react'; +import React from 'react'; +import { + dataFieldClass, + // linkClass, + // linkIconClass, + linkWrapperClass, +} from '../styles.css'; + +interface IProps { + value: string; +} + +interface IOptions { + appendUrl: string; +} + +export const FormatLink = ({ appendUrl }: IOptions): FC => { + const Component: FC = ({ value }) => ( + + {/* + + {value} + + + + + */} + + ); + + return Component; +}; + +export const FormatJsonParse = (): FC => { + const Component: FC = ({ value }) => ( + + {!!value && value?.length > 0 ? JSON.parse(value) : value} + + ); + return Component; +}; diff --git a/packages/libs/kode-ui/src/patterns/DataTable/utils/formatMultiStepTx.tsx b/packages/libs/kode-ui/src/patterns/DataTable/utils/formatMultiStepTx.tsx new file mode 100644 index 0000000000..f378a77337 --- /dev/null +++ b/packages/libs/kode-ui/src/patterns/DataTable/utils/formatMultiStepTx.tsx @@ -0,0 +1,14 @@ +import { MonoAirlineStops } from '@kadena/kode-icons/system'; +import type { FC } from 'react'; +import React from 'react'; + +interface IProps { + value: string; +} + +export const formatMultiStepTx = (): FC => { + const Component: FC = ({ value }) => { + return value ? : undefined; + }; + return Component; +}; diff --git a/packages/libs/kode-ui/src/patterns/DataTable/utils/formatStatus.tsx b/packages/libs/kode-ui/src/patterns/DataTable/utils/formatStatus.tsx new file mode 100644 index 0000000000..f6be7399a8 --- /dev/null +++ b/packages/libs/kode-ui/src/patterns/DataTable/utils/formatStatus.tsx @@ -0,0 +1,13 @@ +import { MonoCheck, MonoClear } from '@kadena/kode-icons/system'; +import type { FC } from 'react'; +import React from 'react'; + +interface IProps { + value: string; +} + +export const FormatStatus = (): FC => { + const Component: FC = ({ value }) => + value ? : ; + return Component; +}; diff --git a/packages/libs/kode-ui/src/patterns/DataTable/utils/getItem.ts b/packages/libs/kode-ui/src/patterns/DataTable/utils/getItem.ts new file mode 100644 index 0000000000..57b400be76 --- /dev/null +++ b/packages/libs/kode-ui/src/patterns/DataTable/utils/getItem.ts @@ -0,0 +1,33 @@ +import type { ITableField } from '../LoadingSkeleton/types'; + +export interface IFieldCellProps { + field: ITableField; + item: any; + isLoading?: boolean; +} + +/** + * returns the value of a prop in the given item + * the key is a dot seperated string. like result.goodResult + * it will try to find the + * item { + * result: { + * goodResult: any + * } + * } + * @param item ITableField + * @param key + * @returns + */ +export const getItem = (item: IFieldCellProps['item'], key: string) => { + const keyArr = key.split('.'); + const value = keyArr.reduce((acc, val) => { + if (!acc) return; + const newItem = acc[val]; + if (newItem === undefined || newItem === null) return; + + return newItem; + }, item); + + return value; +}; diff --git a/packages/libs/kode-ui/vitest.config.ts b/packages/libs/kode-ui/vitest.config.ts index 164aa8f04b..243b6654c4 100644 --- a/packages/libs/kode-ui/vitest.config.ts +++ b/packages/libs/kode-ui/vitest.config.ts @@ -7,6 +7,7 @@ const localConfig = defineConfig({ test: { setupFiles: ['vitest.setup.ts'], environment: 'happy-dom', + globals: true, coverage: { provider: 'v8', include: ['**/src/**.{test,spec}.{ts,tsx}'], diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 22920f72c0..d0fcb7ff24 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -327,7 +327,7 @@ importers: version: 14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) next-themes: specifier: ^0.2.1 - version: 0.2.1(next@14.2.2(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 0.2.1(next@14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: specifier: ^18.2.0 version: 18.3.1 @@ -481,7 +481,7 @@ importers: version: 1.0.1 next-router-mock: specifier: ^0.9.10 - version: 0.9.13(next@14.2.2(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + version: 0.9.13(next@14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) octokit: specifier: ^3.2.1 version: 3.2.1 @@ -650,7 +650,7 @@ importers: version: 8.2.2 next-router-mock: specifier: ^0.9.10 - version: 0.9.13(next@14.2.2(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + version: 0.9.13(next@14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) prettier: specifier: ~3.2.5 version: 3.2.5 @@ -895,7 +895,7 @@ importers: version: 1.14.2 '@vanilla-extract/next-plugin': specifier: 2.4.0 - version: 2.4.0(@types/node@20.14.9)(next@14.2.2(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(webpack@5.88.2) + version: 2.4.0(@types/node@20.14.9)(next@14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(webpack@5.88.2) concurrently: specifier: ^8.2.2 version: 8.2.2 @@ -943,7 +943,7 @@ importers: version: 14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) next-themes: specifier: ^0.2.1 - version: 0.2.1(next@14.2.2(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 0.2.1(next@14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: specifier: ^18.2.0 version: 18.3.1 @@ -998,7 +998,7 @@ importers: version: 1.14.2 '@vanilla-extract/next-plugin': specifier: 2.4.0 - version: 2.4.0(@types/node@20.14.9)(lightningcss@1.25.1)(next@14.2.2(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.31.1)(webpack@5.88.2(@swc/core@1.6.7(@swc/helpers@0.5.11))) + version: 2.4.0(@types/node@20.14.9)(lightningcss@1.25.1)(next@14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.31.1)(webpack@5.88.2(@swc/core@1.6.7(@swc/helpers@0.5.11))) '@vanilla-extract/vite-plugin': specifier: 4.0.7 version: 4.0.7(@types/node@20.14.9)(lightningcss@1.25.1)(terser@5.31.1)(vite@5.3.3(@types/node@20.14.9)(lightningcss@1.25.1)(terser@5.31.1)) @@ -1019,7 +1019,7 @@ importers: version: 12.10.3 next-router-mock: specifier: ^0.9.10 - version: 0.9.13(next@14.2.2(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + version: 0.9.13(next@14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) node-cron: specifier: ^3.0.3 version: 3.0.3 @@ -1103,7 +1103,7 @@ importers: version: 14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) next-themes: specifier: ^0.2.1 - version: 0.2.1(next@14.2.2(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 0.2.1(next@14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: specifier: ^18.2.0 version: 18.3.1 @@ -1173,7 +1173,7 @@ importers: version: 9.0.8 '@vanilla-extract/next-plugin': specifier: 2.4.0 - version: 2.4.0(@types/node@20.14.9)(lightningcss@1.25.1)(next@14.2.2(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.31.1)(webpack@5.88.2(@swc/core@1.6.7(@swc/helpers@0.5.11))) + version: 2.4.0(@types/node@20.14.9)(lightningcss@1.25.1)(next@14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.31.1)(webpack@5.88.2(@swc/core@1.6.7(@swc/helpers@0.5.11))) '@vanilla-extract/vite-plugin': specifier: 4.0.7 version: 4.0.7(@types/node@20.14.9)(lightningcss@1.25.1)(terser@5.31.1)(vite@5.3.3(@types/node@20.14.9)(lightningcss@1.25.1)(terser@5.31.1)) @@ -1215,7 +1215,7 @@ importers: version: 2.7.6(webpack@5.88.2(@swc/core@1.6.7(@swc/helpers@0.5.11))) next-router-mock: specifier: ^0.9.10 - version: 0.9.13(next@14.2.2(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + version: 0.9.13(next@14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) prettier: specifier: ~3.2.5 version: 3.2.5 @@ -1318,10 +1318,10 @@ importers: version: 14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) next-themes: specifier: ^0.2.1 - version: 0.2.1(next@14.2.2(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 0.2.1(next@14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) next-translate: specifier: ~2.0.6 - version: 2.0.6(next@14.2.2(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + version: 2.0.6(next@14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) react: specifier: ^18.2.0 version: 18.3.1 @@ -1397,7 +1397,7 @@ importers: version: 18.3.0 '@vanilla-extract/next-plugin': specifier: 2.1.2 - version: 2.1.2(@types/node@20.14.9)(lightningcss@1.25.1)(next@14.2.2(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.31.1)(webpack@5.88.2) + version: 2.1.2(@types/node@20.14.9)(lightningcss@1.25.1)(next@14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.31.1)(webpack@5.88.2) '@vanilla-extract/vite-plugin': specifier: 4.0.7 version: 4.0.7(@types/node@20.14.9)(lightningcss@1.25.1)(terser@5.31.1)(vite@5.3.3(@types/node@20.14.9)(lightningcss@1.25.1)(terser@5.31.1)) @@ -1412,7 +1412,7 @@ importers: version: 2.8.6 '@webpro/next-translate-plugin': specifier: ^2.6.3 - version: 2.6.3(next-translate@2.0.6(next@14.2.2(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)) + version: 2.6.3(next-translate@2.0.6(next@14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)) debug: specifier: 4.3.4 version: 4.3.4(supports-color@5.5.0) @@ -1430,7 +1430,7 @@ importers: version: 12.10.3 next-router-mock: specifier: ^0.9.10 - version: 0.9.13(next@14.2.2(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + version: 0.9.13(next@14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) prettier: specifier: ~3.2.5 version: 3.2.5 @@ -2358,6 +2358,9 @@ importers: packages/libs/kode-ui: dependencies: + '@artsy/fresnel': + specifier: ^7.1.4 + version: 7.1.4(react@18.3.1) '@kadena/kode-icons': specifier: workspace:* version: link:../kode-icons @@ -2553,10 +2556,10 @@ importers: version: 8.57.0 eslint-import-resolver-typescript: specifier: 3.5.5 - version: 3.5.5(eslint-plugin-import@2.27.5)(eslint@8.57.0) + version: 3.5.5(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.27.5)(eslint@8.57.0) eslint-plugin-import: specifier: ~2.27.5 - version: 2.27.5(eslint-import-resolver-typescript@3.5.5)(eslint@8.57.0) + version: 2.27.5(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.5.5)(eslint@8.57.0) eslint-plugin-storybook: specifier: ^0.8.0 version: 0.8.0(eslint@8.57.0)(typescript@5.4.5) @@ -12917,11 +12920,13 @@ packages: eslint@7.32.0: resolution: {integrity: sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==} engines: {node: ^10.12.0 || >=12.0.0} + deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options. hasBin: true eslint@8.57.0: resolution: {integrity: sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options. hasBin: true espree@6.2.1: @@ -25355,16 +25360,17 @@ snapshots: '@opentelemetry/api': 1.9.0 '@opentelemetry/core': 1.25.1(@opentelemetry/api@1.9.0) - '@parcel/bundler-default@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/bundler-default@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: '@parcel/diagnostic': 2.12.0 '@parcel/graph': 3.2.0 - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/rust': 2.12.0 '@parcel/utils': 2.12.0 nullthrows: 1.1.1 transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' '@parcel/cache@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: @@ -25380,46 +25386,47 @@ snapshots: dependencies: chalk: 4.1.2 - '@parcel/compressor-raw@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/compressor-raw@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' '@parcel/config-default@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)(cssnano@7.0.3(postcss@8.4.39))(postcss@8.4.39)(relateurl@0.2.7)(terser@5.31.1)(typescript@5.4.5)': dependencies: - '@parcel/bundler-default': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) - '@parcel/compressor-raw': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/bundler-default': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) + '@parcel/compressor-raw': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/core': 2.12.0(@swc/helpers@0.5.11) - '@parcel/namer-default': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) - '@parcel/optimizer-css': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) - '@parcel/optimizer-htmlnano': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(cssnano@7.0.3(postcss@8.4.39))(postcss@8.4.39)(relateurl@0.2.7)(terser@5.31.1)(typescript@5.4.5) - '@parcel/optimizer-image': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) - '@parcel/optimizer-svgo': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/namer-default': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) + '@parcel/optimizer-css': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) + '@parcel/optimizer-htmlnano': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)(cssnano@7.0.3(postcss@8.4.39))(postcss@8.4.39)(relateurl@0.2.7)(terser@5.31.1)(typescript@5.4.5) + '@parcel/optimizer-image': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) + '@parcel/optimizer-svgo': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/optimizer-swc': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) - '@parcel/packager-css': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) - '@parcel/packager-html': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) - '@parcel/packager-js': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) - '@parcel/packager-raw': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) - '@parcel/packager-svg': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) - '@parcel/packager-wasm': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) - '@parcel/reporter-dev-server': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) - '@parcel/resolver-default': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) - '@parcel/runtime-browser-hmr': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) - '@parcel/runtime-js': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) - '@parcel/runtime-react-refresh': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) - '@parcel/runtime-service-worker': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) - '@parcel/transformer-babel': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) - '@parcel/transformer-css': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) - '@parcel/transformer-html': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) - '@parcel/transformer-image': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/packager-css': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) + '@parcel/packager-html': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) + '@parcel/packager-js': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) + '@parcel/packager-raw': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) + '@parcel/packager-svg': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) + '@parcel/packager-wasm': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) + '@parcel/reporter-dev-server': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) + '@parcel/resolver-default': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) + '@parcel/runtime-browser-hmr': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) + '@parcel/runtime-js': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) + '@parcel/runtime-react-refresh': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) + '@parcel/runtime-service-worker': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) + '@parcel/transformer-babel': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) + '@parcel/transformer-css': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) + '@parcel/transformer-html': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) + '@parcel/transformer-image': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/transformer-js': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) - '@parcel/transformer-json': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) - '@parcel/transformer-postcss': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) - '@parcel/transformer-posthtml': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) - '@parcel/transformer-raw': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) - '@parcel/transformer-react-refresh-wrap': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) - '@parcel/transformer-svg': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/transformer-json': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) + '@parcel/transformer-postcss': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) + '@parcel/transformer-posthtml': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) + '@parcel/transformer-raw': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) + '@parcel/transformer-react-refresh-wrap': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) + '@parcel/transformer-svg': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) transitivePeerDependencies: - '@swc/helpers' - cssnano @@ -25441,13 +25448,13 @@ snapshots: '@parcel/graph': 3.2.0 '@parcel/logger': 2.12.0 '@parcel/package-manager': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/profiler': 2.12.0 '@parcel/rust': 2.12.0 '@parcel/source-map': 2.1.1 '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/utils': 2.12.0 - '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) abortcontroller-polyfill: 1.7.5 base-x: 3.0.10 browserslist: 4.23.1 @@ -25475,7 +25482,7 @@ snapshots: '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/utils': 2.12.0 '@parcel/watcher': 2.4.1 - '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) transitivePeerDependencies: - '@swc/helpers' @@ -25492,13 +25499,14 @@ snapshots: dependencies: chalk: 4.1.2 - '@parcel/namer-default@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/namer-default@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: '@parcel/diagnostic': 2.12.0 - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) nullthrows: 1.1.1 transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' '@parcel/node-resolver-core@3.3.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': dependencies: @@ -25512,10 +25520,10 @@ snapshots: transitivePeerDependencies: - '@parcel/core' - '@parcel/optimizer-css@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/optimizer-css@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: '@parcel/diagnostic': 2.12.0 - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/source-map': 2.1.1 '@parcel/utils': 2.12.0 browserslist: 4.23.1 @@ -25523,16 +25531,18 @@ snapshots: nullthrows: 1.1.1 transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' - '@parcel/optimizer-htmlnano@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(cssnano@7.0.3(postcss@8.4.39))(postcss@8.4.39)(relateurl@0.2.7)(terser@5.31.1)(typescript@5.4.5)': + '@parcel/optimizer-htmlnano@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)(cssnano@7.0.3(postcss@8.4.39))(postcss@8.4.39)(relateurl@0.2.7)(terser@5.31.1)(typescript@5.4.5)': dependencies: - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) htmlnano: 2.1.1(cssnano@7.0.3(postcss@8.4.39))(postcss@8.4.39)(relateurl@0.2.7)(svgo@2.8.0)(terser@5.31.1)(typescript@5.4.5) nullthrows: 1.1.1 posthtml: 0.16.6 svgo: 2.8.0 transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' - cssnano - postcss - purgecss @@ -25542,28 +25552,31 @@ snapshots: - typescript - uncss - '@parcel/optimizer-image@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/optimizer-image@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: '@parcel/core': 2.12.0(@swc/helpers@0.5.11) '@parcel/diagnostic': 2.12.0 - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/rust': 2.12.0 '@parcel/utils': 2.12.0 - '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) + transitivePeerDependencies: + - '@swc/helpers' - '@parcel/optimizer-svgo@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/optimizer-svgo@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: '@parcel/diagnostic': 2.12.0 - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/utils': 2.12.0 svgo: 2.8.0 transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' '@parcel/optimizer-swc@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: '@parcel/diagnostic': 2.12.0 - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/source-map': 2.1.1 '@parcel/utils': 2.12.0 '@swc/core': 1.3.107(@swc/helpers@0.5.11) @@ -25581,37 +25594,39 @@ snapshots: '@parcel/node-resolver-core': 3.3.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/utils': 2.12.0 - '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@swc/core': 1.3.107(@swc/helpers@0.5.11) semver: 7.6.3 transitivePeerDependencies: - '@swc/helpers' - '@parcel/packager-css@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/packager-css@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: '@parcel/diagnostic': 2.12.0 - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/source-map': 2.1.1 '@parcel/utils': 2.12.0 lightningcss: 1.25.1 nullthrows: 1.1.1 transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' - '@parcel/packager-html@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/packager-html@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/utils': 2.12.0 nullthrows: 1.1.1 posthtml: 0.16.6 transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' - '@parcel/packager-js@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/packager-js@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: '@parcel/diagnostic': 2.12.0 - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/rust': 2.12.0 '@parcel/source-map': 2.1.1 '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) @@ -25620,33 +25635,38 @@ snapshots: nullthrows: 1.1.1 transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' - '@parcel/packager-raw@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/packager-raw@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' - '@parcel/packager-svg@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/packager-svg@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/utils': 2.12.0 posthtml: 0.16.6 transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' - '@parcel/packager-wasm@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/packager-wasm@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' - '@parcel/plugin@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/plugin@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' '@parcel/profiler@2.12.0': dependencies: @@ -25654,71 +25674,79 @@ snapshots: '@parcel/events': 2.12.0 chrome-trace-event: 1.0.4 - '@parcel/reporter-cli@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/reporter-cli@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/utils': 2.12.0 chalk: 4.1.2 term-size: 2.2.1 transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' - '@parcel/reporter-dev-server@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/reporter-dev-server@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/utils': 2.12.0 transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' - '@parcel/reporter-tracer@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/reporter-tracer@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/utils': 2.12.0 chrome-trace-event: 1.0.4 nullthrows: 1.1.1 transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' - '@parcel/resolver-default@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/resolver-default@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: '@parcel/node-resolver-core': 3.3.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' - '@parcel/runtime-browser-hmr@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/runtime-browser-hmr@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/utils': 2.12.0 transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' - '@parcel/runtime-js@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/runtime-js@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: '@parcel/diagnostic': 2.12.0 - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/utils': 2.12.0 nullthrows: 1.1.1 transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' - '@parcel/runtime-react-refresh@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/runtime-react-refresh@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/utils': 2.12.0 react-error-overlay: 6.0.9 react-refresh: 0.9.0 transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' - '@parcel/runtime-service-worker@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/runtime-service-worker@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/utils': 2.12.0 nullthrows: 1.1.1 transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' '@parcel/rust@2.12.0': {} @@ -25726,10 +25754,10 @@ snapshots: dependencies: detect-libc: 1.0.3 - '@parcel/transformer-babel@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/transformer-babel@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: '@parcel/diagnostic': 2.12.0 - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/source-map': 2.1.1 '@parcel/utils': 2.12.0 browserslist: 4.23.1 @@ -25738,11 +25766,12 @@ snapshots: semver: 7.6.3 transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' - '@parcel/transformer-css@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/transformer-css@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: '@parcel/diagnostic': 2.12.0 - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/source-map': 2.1.1 '@parcel/utils': 2.12.0 browserslist: 4.23.1 @@ -25750,11 +25779,12 @@ snapshots: nullthrows: 1.1.1 transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' - '@parcel/transformer-html@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/transformer-html@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: '@parcel/diagnostic': 2.12.0 - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/rust': 2.12.0 nullthrows: 1.1.1 posthtml: 0.16.6 @@ -25764,41 +25794,45 @@ snapshots: srcset: 4.0.0 transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' - '@parcel/transformer-image@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/transformer-image@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: '@parcel/core': 2.12.0(@swc/helpers@0.5.11) - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/utils': 2.12.0 - '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) nullthrows: 1.1.1 + transitivePeerDependencies: + - '@swc/helpers' '@parcel/transformer-js@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': dependencies: '@parcel/core': 2.12.0(@swc/helpers@0.5.11) '@parcel/diagnostic': 2.12.0 - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/rust': 2.12.0 '@parcel/source-map': 2.1.1 '@parcel/utils': 2.12.0 - '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@swc/helpers': 0.5.11 browserslist: 4.23.1 nullthrows: 1.1.1 regenerator-runtime: 0.13.11 semver: 7.6.3 - '@parcel/transformer-json@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/transformer-json@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) json5: 2.2.3 transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' - '@parcel/transformer-postcss@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/transformer-postcss@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: '@parcel/diagnostic': 2.12.0 - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/rust': 2.12.0 '@parcel/utils': 2.12.0 clone: 2.1.2 @@ -25807,10 +25841,11 @@ snapshots: semver: 7.6.3 transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' - '@parcel/transformer-posthtml@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/transformer-posthtml@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/utils': 2.12.0 nullthrows: 1.1.1 posthtml: 0.16.6 @@ -25819,25 +25854,28 @@ snapshots: semver: 7.6.3 transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' - '@parcel/transformer-raw@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/transformer-raw@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' - '@parcel/transformer-react-refresh-wrap@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/transformer-react-refresh-wrap@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/utils': 2.12.0 react-refresh: 0.9.0 transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' - '@parcel/transformer-svg@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/transformer-svg@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: '@parcel/diagnostic': 2.12.0 - '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/rust': 2.12.0 nullthrows: 1.1.1 posthtml: 0.16.6 @@ -25846,6 +25884,7 @@ snapshots: semver: 7.6.3 transitivePeerDependencies: - '@parcel/core' + - '@swc/helpers' '@parcel/types@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: @@ -25854,7 +25893,7 @@ snapshots: '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/package-manager': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/source-map': 2.1.1 - '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) utility-types: 3.11.0 transitivePeerDependencies: - '@parcel/core' @@ -25932,7 +25971,7 @@ snapshots: '@parcel/watcher-win32-ia32': 2.4.1 '@parcel/watcher-win32-x64': 2.4.1 - '@parcel/workers@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))': + '@parcel/workers@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)': dependencies: '@parcel/core': 2.12.0(@swc/helpers@0.5.11) '@parcel/diagnostic': 2.12.0 @@ -25941,6 +25980,8 @@ snapshots: '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/utils': 2.12.0 nullthrows: 1.1.1 + transitivePeerDependencies: + - '@swc/helpers' '@peculiar/asn1-schema@2.3.8': dependencies: @@ -31022,7 +31063,7 @@ snapshots: - supports-color - terser - '@vanilla-extract/next-plugin@2.1.2(@types/node@20.14.9)(lightningcss@1.25.1)(next@14.2.2(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.31.1)(webpack@5.88.2)': + '@vanilla-extract/next-plugin@2.1.2(@types/node@20.14.9)(lightningcss@1.25.1)(next@14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.31.1)(webpack@5.88.2)': dependencies: '@vanilla-extract/webpack-plugin': 2.3.7(@types/node@20.14.9)(lightningcss@1.25.1)(terser@5.31.1)(webpack@5.88.2) browserslist: 4.23.3 @@ -31055,9 +31096,9 @@ snapshots: - terser - webpack - '@vanilla-extract/next-plugin@2.4.0(@types/node@20.14.9)(lightningcss@1.25.1)(next@14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.31.1)(webpack@5.88.2)': + '@vanilla-extract/next-plugin@2.4.0(@types/node@20.14.9)(lightningcss@1.25.1)(next@14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.31.1)(webpack@5.88.2(@swc/core@1.6.7(@swc/helpers@0.5.11)))': dependencies: - '@vanilla-extract/webpack-plugin': 2.3.7(@types/node@20.14.9)(lightningcss@1.25.1)(terser@5.31.1)(webpack@5.88.2) + '@vanilla-extract/webpack-plugin': 2.3.7(@types/node@20.14.9)(lightningcss@1.25.1)(terser@5.31.1)(webpack@5.88.2(@swc/core@1.6.7(@swc/helpers@0.5.11))) next: 14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) transitivePeerDependencies: - '@types/node' @@ -31071,9 +31112,9 @@ snapshots: - terser - webpack - '@vanilla-extract/next-plugin@2.4.0(@types/node@20.14.9)(lightningcss@1.25.1)(next@14.2.2(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.31.1)(webpack@5.88.2(@swc/core@1.6.7(@swc/helpers@0.5.11)))': + '@vanilla-extract/next-plugin@2.4.0(@types/node@20.14.9)(lightningcss@1.25.1)(next@14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.31.1)(webpack@5.88.2)': dependencies: - '@vanilla-extract/webpack-plugin': 2.3.7(@types/node@20.14.9)(lightningcss@1.25.1)(terser@5.31.1)(webpack@5.88.2(@swc/core@1.6.7(@swc/helpers@0.5.11))) + '@vanilla-extract/webpack-plugin': 2.3.7(@types/node@20.14.9)(lightningcss@1.25.1)(terser@5.31.1)(webpack@5.88.2) next: 14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) transitivePeerDependencies: - '@types/node' @@ -31087,7 +31128,7 @@ snapshots: - terser - webpack - '@vanilla-extract/next-plugin@2.4.0(@types/node@20.14.9)(next@14.2.2(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(webpack@5.88.2)': + '@vanilla-extract/next-plugin@2.4.0(@types/node@20.14.9)(next@14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(webpack@5.88.2)': dependencies: '@vanilla-extract/webpack-plugin': 2.3.7(@types/node@20.14.9)(webpack@5.88.2) next: 14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -31320,7 +31361,7 @@ snapshots: pathe: 1.1.2 picocolors: 1.1.0 sirv: 2.0.4 - vitest: 1.6.0(@types/node@20.16.5)(@vitest/ui@1.6.0)(happy-dom@12.10.3)(jsdom@22.1.0(canvas@2.11.2(encoding@0.1.13)))(lightningcss@1.25.1)(terser@5.31.1) + vitest: 1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)(happy-dom@12.10.3)(jsdom@22.1.0(canvas@2.11.2(encoding@0.1.13)))(lightningcss@1.25.1)(terser@5.31.1) '@vitest/utils@1.3.1': dependencies: @@ -31742,9 +31783,9 @@ snapshots: '@webassemblyjs/ast': 1.12.1 '@xtuc/long': 4.2.2 - '@webpro/next-translate-plugin@2.6.3(next-translate@2.0.6(next@14.2.2(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1))': + '@webpro/next-translate-plugin@2.6.3(next-translate@2.0.6(next@14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1))': dependencies: - next-translate: 2.0.6(next@14.2.2(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + next-translate: 2.0.6(next@14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) typescript: 4.5.2 '@whatwg-node/events@0.0.3': {} @@ -39467,18 +39508,18 @@ snapshots: dependencies: js-yaml-loader: 1.2.2 - next-router-mock@0.9.13(next@14.2.2(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1): + next-router-mock@0.9.13(next@14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1): dependencies: next: 14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 - next-themes@0.2.1(next@14.2.2(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + next-themes@0.2.1(next@14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: next: 14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - next-translate@2.0.6(next@14.2.2(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1): + next-translate@2.0.6(next@14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1): dependencies: next: 14.2.2(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 @@ -40030,9 +40071,9 @@ snapshots: '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/logger': 2.12.0 '@parcel/package-manager': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) - '@parcel/reporter-cli': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) - '@parcel/reporter-dev-server': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) - '@parcel/reporter-tracer': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11)) + '@parcel/reporter-cli': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) + '@parcel/reporter-dev-server': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) + '@parcel/reporter-tracer': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11) '@parcel/utils': 2.12.0 chalk: 4.1.2 commander: 7.2.0 From db4b22db4f21605e6637bb89a4b56b631eb01020 Mon Sep 17 00:00:00 2001 From: Steven Straatemans Date: Tue, 15 Oct 2024 17:36:40 +0200 Subject: [PATCH 02/11] add to story --- .../patterns/DataTable/DataTable.stories.tsx | 33 +++++++++++++++++-- 1 file changed, 30 insertions(+), 3 deletions(-) diff --git a/packages/libs/kode-ui/src/patterns/DataTable/DataTable.stories.tsx b/packages/libs/kode-ui/src/patterns/DataTable/DataTable.stories.tsx index 3e4ce9bd86..67a7937917 100644 --- a/packages/libs/kode-ui/src/patterns/DataTable/DataTable.stories.tsx +++ b/packages/libs/kode-ui/src/patterns/DataTable/DataTable.stories.tsx @@ -1,11 +1,13 @@ import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; +import { onLayer2 } from '../../storyDecorators'; import { MediaContextProvider } from './../../components'; import type { IDataTableProps } from './DataTable'; import { DataTable } from './DataTable'; const meta: Meta = { title: 'Patterns/DataTable', + decorators: [onLayer2], parameters: { status: { type: 'stable' }, docs: { @@ -15,7 +17,11 @@ const meta: Meta = { }, }, }, - argTypes: {}, + argTypes: { + isLoading: { + type: 'boolean', + }, + }, }; export default meta; @@ -23,8 +29,10 @@ type Story = StoryObj; export const Primary: Story = { name: 'DataTable Pattern', - args: {}, - render: ({}) => { + args: { + isLoading: false, + }, + render: ({ isLoading }) => { const data = [ { node: { @@ -35,10 +43,29 @@ export const Primary: Story = { }, }, }, + { + node: { + requestKey: 'key2', + parameters: 'param2', + block: { + height: 11, + }, + }, + }, + { + node: { + requestKey: 'key3', + parameters: 'param3', + block: { + height: 12, + }, + }, + }, ]; return ( Date: Wed, 16 Oct 2024 08:04:07 +0200 Subject: [PATCH 03/11] rename the table component back to compactTable --- packages/apps/dev-wallet/src/App/app.tsx | 2 +- .../pages/account/Components/ActivityTable.tsx | 4 ++-- .../AccountTransactionsTable.tsx | 4 ++-- .../AccountTransfersTable.tsx | 4 ++-- .../BlockTransactions/BlockTransactions.tsx | 4 ++-- .../[networkSlug]/account/[accountName].tsx | 4 ++-- .../pages/[networkSlug]/event/[eventname].tsx | 4 ++-- .../src/pages/[networkSlug]/height/[height].tsx | 4 ++-- packages/apps/explorer/src/pages/_app.tsx | 7 +++++-- .../CompactTable.stories.tsx} | 16 ++++++++-------- .../CompactTable.tsx} | 12 ++++++------ .../CompactTableDesktop/CompactTableDesktop.tsx} | 8 ++++---- .../CompactTableDesktop}/styles.css.ts | 0 .../CompactTableMobile/CompactTableMobile.tsx} | 8 ++++---- .../CompactTableMobile}/styles.css.ts | 0 .../FieldCell.tsx | 12 ++++++------ .../LoadingSkeleton/LoadingPill.tsx | 0 .../LoadingSkeleton/ValueLoader/ValueLoader.tsx | 0 .../LoadingSkeleton/style.css.ts | 0 .../LoadingSkeleton/types.ts | 0 .../PaginationButton/PaginationButton.tsx | 0 .../TablePagination/TablePagination.tsx | 0 .../TablePagination/styles.css.ts | 0 .../{DataTable => CompactTable}/styles.css.ts | 3 +-- .../utils/__test__/getItem.test.ts | 0 .../utils/formatAccount.tsx | 0 .../utils/formatAmount.tsx | 0 .../utils/formatDefault.tsx | 0 .../utils/formatLink.tsx | 0 .../utils/formatMultiStepTx.tsx | 0 .../utils/formatStatus.tsx | 0 .../{DataTable => CompactTable}/utils/getItem.ts | 0 packages/libs/kode-ui/src/patterns/index.ts | 2 ++ 33 files changed, 51 insertions(+), 47 deletions(-) rename packages/libs/kode-ui/src/patterns/{DataTable/DataTable.stories.tsx => CompactTable/CompactTable.stories.tsx} (79%) rename packages/libs/kode-ui/src/patterns/{DataTable/DataTable.tsx => CompactTable/CompactTable.tsx} (77%) rename packages/libs/kode-ui/src/patterns/{DataTable/DataTableDesktop/DataTableDesktop.tsx => CompactTable/CompactTableDesktop/CompactTableDesktop.tsx} (88%) rename packages/libs/kode-ui/src/patterns/{DataTable/DataTableDesktop => CompactTable/CompactTableDesktop}/styles.css.ts (100%) rename packages/libs/kode-ui/src/patterns/{DataTable/DataTableMobile/DataTableMobile.tsx => CompactTable/CompactTableMobile/CompactTableMobile.tsx} (77%) rename packages/libs/kode-ui/src/patterns/{DataTable/DataTableMobile => CompactTable/CompactTableMobile}/styles.css.ts (100%) rename packages/libs/kode-ui/src/patterns/{DataTable/DataTableDesktop => CompactTable}/FieldCell.tsx (84%) rename packages/libs/kode-ui/src/patterns/{DataTable => CompactTable}/LoadingSkeleton/LoadingPill.tsx (100%) rename packages/libs/kode-ui/src/patterns/{DataTable => CompactTable}/LoadingSkeleton/ValueLoader/ValueLoader.tsx (100%) rename packages/libs/kode-ui/src/patterns/{DataTable => CompactTable}/LoadingSkeleton/style.css.ts (100%) rename packages/libs/kode-ui/src/patterns/{DataTable => CompactTable}/LoadingSkeleton/types.ts (100%) rename packages/libs/kode-ui/src/patterns/{DataTable => CompactTable}/TablePagination/PaginationButton/PaginationButton.tsx (100%) rename packages/libs/kode-ui/src/patterns/{DataTable => CompactTable}/TablePagination/TablePagination.tsx (100%) rename packages/libs/kode-ui/src/patterns/{DataTable => CompactTable}/TablePagination/styles.css.ts (100%) rename packages/libs/kode-ui/src/patterns/{DataTable => CompactTable}/styles.css.ts (94%) rename packages/libs/kode-ui/src/patterns/{DataTable => CompactTable}/utils/__test__/getItem.test.ts (100%) rename packages/libs/kode-ui/src/patterns/{DataTable => CompactTable}/utils/formatAccount.tsx (100%) rename packages/libs/kode-ui/src/patterns/{DataTable => CompactTable}/utils/formatAmount.tsx (100%) rename packages/libs/kode-ui/src/patterns/{DataTable => CompactTable}/utils/formatDefault.tsx (100%) rename packages/libs/kode-ui/src/patterns/{DataTable => CompactTable}/utils/formatLink.tsx (100%) rename packages/libs/kode-ui/src/patterns/{DataTable => CompactTable}/utils/formatMultiStepTx.tsx (100%) rename packages/libs/kode-ui/src/patterns/{DataTable => CompactTable}/utils/formatStatus.tsx (100%) rename packages/libs/kode-ui/src/patterns/{DataTable => CompactTable}/utils/getItem.ts (100%) diff --git a/packages/apps/dev-wallet/src/App/app.tsx b/packages/apps/dev-wallet/src/App/app.tsx index 8912d2c458..6a648c236b 100644 --- a/packages/apps/dev-wallet/src/App/app.tsx +++ b/packages/apps/dev-wallet/src/App/app.tsx @@ -1,7 +1,7 @@ -import { MediaContextProvider } from '@/Components/Media/media'; import { DatabaseProvider } from '@/modules/db/db.provider'; import { LayoutProvider } from '@/modules/layout/layout.provider.tsx'; import { WalletProvider } from '@/modules/wallet/wallet.provider'; +import { MediaContextProvider } from '@kadena/kode-ui'; import { useEffect } from 'react'; import { PromptProvider } from '../Components/PromptProvider/Prompt'; import { BetaHeader } from './BetaHeader'; diff --git a/packages/apps/dev-wallet/src/pages/account/Components/ActivityTable.tsx b/packages/apps/dev-wallet/src/pages/account/Components/ActivityTable.tsx index 2ac0fd5962..66f5991238 100644 --- a/packages/apps/dev-wallet/src/pages/account/Components/ActivityTable.tsx +++ b/packages/apps/dev-wallet/src/pages/account/Components/ActivityTable.tsx @@ -1,8 +1,8 @@ import { noStyleLinkClass } from '@/Components/Accounts/style.css'; -import { CompactTable } from '@/Components/CompactTable/CompactTable'; import { usePagination } from '@/Components/CompactTable/usePagination'; import { IActivity } from '@/modules/activity/activity.repository'; import { MonoOpenInNew } from '@kadena/kode-icons/system'; +import { DataTable } from '@kadena/kode-ui/patterns'; import { useMemo } from 'react'; import { Link } from 'react-router-dom'; @@ -36,7 +36,7 @@ export function ActivityTable({ activities }: { activities: IActivity[] }) { [activities], ); return ( - = ({ ); return ( - = ({ ); return ( - = ({ hash }) => { } return ( - { } key="Keys" > - { @@ -32,7 +32,7 @@ const Height: React.FC = () => { {chainData.data.edges.length === 0 ? ( ) : ( - { - = { - title: 'Patterns/DataTable', +const meta: Meta = { + title: 'Patterns/CompactTable', decorators: [onLayer2], parameters: { status: { type: 'stable' }, docs: { description: { component: - 'The DataTable is a specific way to show table data. On mobile the view switches to a different view, to show the data better', + 'The CompactTable is a specific way to show table data. On mobile the view switches to a different view, to show the data better', }, }, }, @@ -25,10 +25,10 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Primary: Story = { - name: 'DataTable Pattern', + name: 'CompactTable Pattern', args: { isLoading: false, }, @@ -64,7 +64,7 @@ export const Primary: Story = { ]; return ( - = ({ +export const CompactTable: React.FC = ({ fields, data, label, @@ -36,10 +36,10 @@ export const DataTable: React.FC = ({ return ( <> - + - ; -export const DataTableDesktop: FC = ({ +export const CompactTableDesktop: FC = ({ data, fields, label = 'Table', diff --git a/packages/libs/kode-ui/src/patterns/DataTable/DataTableDesktop/styles.css.ts b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableDesktop/styles.css.ts similarity index 100% rename from packages/libs/kode-ui/src/patterns/DataTable/DataTableDesktop/styles.css.ts rename to packages/libs/kode-ui/src/patterns/CompactTable/CompactTableDesktop/styles.css.ts diff --git a/packages/libs/kode-ui/src/patterns/DataTable/DataTableMobile/DataTableMobile.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableMobile/CompactTableMobile.tsx similarity index 77% rename from packages/libs/kode-ui/src/patterns/DataTable/DataTableMobile/DataTableMobile.tsx rename to packages/libs/kode-ui/src/patterns/CompactTable/CompactTableMobile/CompactTableMobile.tsx index 6636f75a40..682ad4bc4c 100644 --- a/packages/libs/kode-ui/src/patterns/DataTable/DataTableMobile/DataTableMobile.tsx +++ b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableMobile/CompactTableMobile.tsx @@ -1,15 +1,15 @@ import type { FC } from 'react'; import React from 'react'; -import type { IDataTableProps } from '../DataTable'; -import { FieldCell } from '../DataTableDesktop/FieldCell'; +import type { ICompactTableProps } from '../CompactTable'; +import { FieldCell } from '../FieldCell'; import { headerClass, rowClass, sectionClass } from './styles.css'; type IProps = Omit< - IDataTableProps, + ICompactTableProps, 'pageInfo' | 'setPage' | 'pageSize' | 'totalCount' >; -export const DataTableMobile: FC = ({ +export const CompactTableMobile: FC = ({ data, fields, isLoading = false, diff --git a/packages/libs/kode-ui/src/patterns/DataTable/DataTableMobile/styles.css.ts b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableMobile/styles.css.ts similarity index 100% rename from packages/libs/kode-ui/src/patterns/DataTable/DataTableMobile/styles.css.ts rename to packages/libs/kode-ui/src/patterns/CompactTable/CompactTableMobile/styles.css.ts diff --git a/packages/libs/kode-ui/src/patterns/DataTable/DataTableDesktop/FieldCell.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/FieldCell.tsx similarity index 84% rename from packages/libs/kode-ui/src/patterns/DataTable/DataTableDesktop/FieldCell.tsx rename to packages/libs/kode-ui/src/patterns/CompactTable/FieldCell.tsx index d0f8909561..d65b53626c 100644 --- a/packages/libs/kode-ui/src/patterns/DataTable/DataTableDesktop/FieldCell.tsx +++ b/packages/libs/kode-ui/src/patterns/CompactTable/FieldCell.tsx @@ -1,16 +1,16 @@ import classNames from 'classnames'; import type { FC } from 'react'; import React from 'react'; -import { ValueLoader } from '../LoadingSkeleton/ValueLoader/ValueLoader'; +import { Text } from './../../components'; +import { ValueLoader } from './LoadingSkeleton/ValueLoader/ValueLoader'; import { alignVariants, dataFieldClass, dataFieldMultipleIconsClass, -} from '../styles.css'; -import { FormatDefault } from '../utils/formatDefault'; -import type { IFieldCellProps } from '../utils/getItem'; -import { getItem } from '../utils/getItem'; -import { Text } from './../../../components'; +} from './styles.css'; +import { FormatDefault } from './utils/formatDefault'; +import type { IFieldCellProps } from './utils/getItem'; +import { getItem } from './utils/getItem'; export const FieldCell: FC = ({ field, diff --git a/packages/libs/kode-ui/src/patterns/DataTable/LoadingSkeleton/LoadingPill.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/LoadingSkeleton/LoadingPill.tsx similarity index 100% rename from packages/libs/kode-ui/src/patterns/DataTable/LoadingSkeleton/LoadingPill.tsx rename to packages/libs/kode-ui/src/patterns/CompactTable/LoadingSkeleton/LoadingPill.tsx diff --git a/packages/libs/kode-ui/src/patterns/DataTable/LoadingSkeleton/ValueLoader/ValueLoader.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/LoadingSkeleton/ValueLoader/ValueLoader.tsx similarity index 100% rename from packages/libs/kode-ui/src/patterns/DataTable/LoadingSkeleton/ValueLoader/ValueLoader.tsx rename to packages/libs/kode-ui/src/patterns/CompactTable/LoadingSkeleton/ValueLoader/ValueLoader.tsx diff --git a/packages/libs/kode-ui/src/patterns/DataTable/LoadingSkeleton/style.css.ts b/packages/libs/kode-ui/src/patterns/CompactTable/LoadingSkeleton/style.css.ts similarity index 100% rename from packages/libs/kode-ui/src/patterns/DataTable/LoadingSkeleton/style.css.ts rename to packages/libs/kode-ui/src/patterns/CompactTable/LoadingSkeleton/style.css.ts diff --git a/packages/libs/kode-ui/src/patterns/DataTable/LoadingSkeleton/types.ts b/packages/libs/kode-ui/src/patterns/CompactTable/LoadingSkeleton/types.ts similarity index 100% rename from packages/libs/kode-ui/src/patterns/DataTable/LoadingSkeleton/types.ts rename to packages/libs/kode-ui/src/patterns/CompactTable/LoadingSkeleton/types.ts diff --git a/packages/libs/kode-ui/src/patterns/DataTable/TablePagination/PaginationButton/PaginationButton.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TablePagination/PaginationButton/PaginationButton.tsx similarity index 100% rename from packages/libs/kode-ui/src/patterns/DataTable/TablePagination/PaginationButton/PaginationButton.tsx rename to packages/libs/kode-ui/src/patterns/CompactTable/TablePagination/PaginationButton/PaginationButton.tsx diff --git a/packages/libs/kode-ui/src/patterns/DataTable/TablePagination/TablePagination.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TablePagination/TablePagination.tsx similarity index 100% rename from packages/libs/kode-ui/src/patterns/DataTable/TablePagination/TablePagination.tsx rename to packages/libs/kode-ui/src/patterns/CompactTable/TablePagination/TablePagination.tsx diff --git a/packages/libs/kode-ui/src/patterns/DataTable/TablePagination/styles.css.ts b/packages/libs/kode-ui/src/patterns/CompactTable/TablePagination/styles.css.ts similarity index 100% rename from packages/libs/kode-ui/src/patterns/DataTable/TablePagination/styles.css.ts rename to packages/libs/kode-ui/src/patterns/CompactTable/TablePagination/styles.css.ts diff --git a/packages/libs/kode-ui/src/patterns/DataTable/styles.css.ts b/packages/libs/kode-ui/src/patterns/CompactTable/styles.css.ts similarity index 94% rename from packages/libs/kode-ui/src/patterns/DataTable/styles.css.ts rename to packages/libs/kode-ui/src/patterns/CompactTable/styles.css.ts index 6b15b49c9a..9e1775f476 100644 --- a/packages/libs/kode-ui/src/patterns/DataTable/styles.css.ts +++ b/packages/libs/kode-ui/src/patterns/CompactTable/styles.css.ts @@ -1,5 +1,4 @@ -import { atoms, recipe, tokens } from '@kadena/kode-ui/styles'; -import { style } from '@vanilla-extract/css'; +import { atoms, recipe, style, tokens } from './../../styles'; export const sectionClass = style([ atoms({ diff --git a/packages/libs/kode-ui/src/patterns/DataTable/utils/__test__/getItem.test.ts b/packages/libs/kode-ui/src/patterns/CompactTable/utils/__test__/getItem.test.ts similarity index 100% rename from packages/libs/kode-ui/src/patterns/DataTable/utils/__test__/getItem.test.ts rename to packages/libs/kode-ui/src/patterns/CompactTable/utils/__test__/getItem.test.ts diff --git a/packages/libs/kode-ui/src/patterns/DataTable/utils/formatAccount.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/utils/formatAccount.tsx similarity index 100% rename from packages/libs/kode-ui/src/patterns/DataTable/utils/formatAccount.tsx rename to packages/libs/kode-ui/src/patterns/CompactTable/utils/formatAccount.tsx diff --git a/packages/libs/kode-ui/src/patterns/DataTable/utils/formatAmount.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/utils/formatAmount.tsx similarity index 100% rename from packages/libs/kode-ui/src/patterns/DataTable/utils/formatAmount.tsx rename to packages/libs/kode-ui/src/patterns/CompactTable/utils/formatAmount.tsx diff --git a/packages/libs/kode-ui/src/patterns/DataTable/utils/formatDefault.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/utils/formatDefault.tsx similarity index 100% rename from packages/libs/kode-ui/src/patterns/DataTable/utils/formatDefault.tsx rename to packages/libs/kode-ui/src/patterns/CompactTable/utils/formatDefault.tsx diff --git a/packages/libs/kode-ui/src/patterns/DataTable/utils/formatLink.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/utils/formatLink.tsx similarity index 100% rename from packages/libs/kode-ui/src/patterns/DataTable/utils/formatLink.tsx rename to packages/libs/kode-ui/src/patterns/CompactTable/utils/formatLink.tsx diff --git a/packages/libs/kode-ui/src/patterns/DataTable/utils/formatMultiStepTx.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/utils/formatMultiStepTx.tsx similarity index 100% rename from packages/libs/kode-ui/src/patterns/DataTable/utils/formatMultiStepTx.tsx rename to packages/libs/kode-ui/src/patterns/CompactTable/utils/formatMultiStepTx.tsx diff --git a/packages/libs/kode-ui/src/patterns/DataTable/utils/formatStatus.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/utils/formatStatus.tsx similarity index 100% rename from packages/libs/kode-ui/src/patterns/DataTable/utils/formatStatus.tsx rename to packages/libs/kode-ui/src/patterns/CompactTable/utils/formatStatus.tsx diff --git a/packages/libs/kode-ui/src/patterns/DataTable/utils/getItem.ts b/packages/libs/kode-ui/src/patterns/CompactTable/utils/getItem.ts similarity index 100% rename from packages/libs/kode-ui/src/patterns/DataTable/utils/getItem.ts rename to packages/libs/kode-ui/src/patterns/CompactTable/utils/getItem.ts diff --git a/packages/libs/kode-ui/src/patterns/index.ts b/packages/libs/kode-ui/src/patterns/index.ts index 97c75ee7b0..16ece2d547 100644 --- a/packages/libs/kode-ui/src/patterns/index.ts +++ b/packages/libs/kode-ui/src/patterns/index.ts @@ -5,3 +5,5 @@ export { type ICardContentBlockProps, type ICardFooterGroupProps, } from './Card'; + +export { CompactTable, ICompactTableProps } from './CompactTable/CompactTable'; From 9b30cc19cfc109fbcc9c43ef99adbad4930e8d4c Mon Sep 17 00:00:00 2001 From: Steven Straatemans Date: Wed, 16 Oct 2024 09:52:03 +0200 Subject: [PATCH 04/11] remove compact table from devwallet --- .../Components/CompactTable/CompactTable.tsx | 73 -------------- .../CompactTableDesktop.tsx | 57 ----------- .../CompactTableDesktop/FieldCell.tsx | 51 ---------- .../CompactTableDesktop/styles.css.ts | 25 ----- .../CompactTableMobile/CompactTableMobile.tsx | 26 ----- .../CompactTableMobile/styles.css.ts | 72 -------------- .../PaginationButton/PaginationButton.tsx | 20 ---- .../TablePagination/TablePagination.tsx | 78 --------------- .../TablePagination/styles.css.ts | 50 ---------- .../src/Components/CompactTable/styles.css.ts | 96 ------------------- .../CompactTable/utils/formatAccount.tsx | 11 --- .../CompactTable/utils/formatAmount.tsx | 10 -- .../CompactTable/utils/formatDefault.tsx | 10 -- .../CompactTable/utils/formatMultiStepTx.tsx | 13 --- .../CompactTable/utils/formatStatus.tsx | 12 --- .../Components/CompactTable/utils/getItem.ts | 33 ------- .../account/Components/ActivityTable.tsx | 5 +- .../CompactTable/CompactTable.stories.tsx | 69 ++++++++++++- .../CompactTableMobile/CompactTableMobile.tsx | 2 +- .../src/patterns/CompactTable/FieldCell.tsx | 10 +- .../FormatAccount.tsx} | 2 +- .../FormatAmount.tsx} | 2 +- .../FormatDefault.tsx} | 2 +- .../CompactTable/formatters/FormatLink.tsx} | 26 ++--- .../FormatMultiStepTx.tsx} | 4 +- .../FormatStatus.tsx} | 2 +- .../CompactTable/formatters/index.tsx | 15 +++ .../src/patterns/CompactTable/styles.css.ts | 7 ++ .../patterns}/CompactTable/usePagination.tsx | 2 +- .../CompactTable/utils/formatLink.tsx | 45 --------- .../patterns/CompactTable/utils/getItem.ts | 1 + packages/libs/kode-ui/src/patterns/index.ts | 9 +- 32 files changed, 131 insertions(+), 709 deletions(-) delete mode 100644 packages/apps/dev-wallet/src/Components/CompactTable/CompactTable.tsx delete mode 100644 packages/apps/dev-wallet/src/Components/CompactTable/CompactTableDesktop/CompactTableDesktop.tsx delete mode 100644 packages/apps/dev-wallet/src/Components/CompactTable/CompactTableDesktop/FieldCell.tsx delete mode 100644 packages/apps/dev-wallet/src/Components/CompactTable/CompactTableDesktop/styles.css.ts delete mode 100644 packages/apps/dev-wallet/src/Components/CompactTable/CompactTableMobile/CompactTableMobile.tsx delete mode 100644 packages/apps/dev-wallet/src/Components/CompactTable/CompactTableMobile/styles.css.ts delete mode 100644 packages/apps/dev-wallet/src/Components/CompactTable/TablePagination/PaginationButton/PaginationButton.tsx delete mode 100644 packages/apps/dev-wallet/src/Components/CompactTable/TablePagination/TablePagination.tsx delete mode 100644 packages/apps/dev-wallet/src/Components/CompactTable/TablePagination/styles.css.ts delete mode 100644 packages/apps/dev-wallet/src/Components/CompactTable/styles.css.ts delete mode 100644 packages/apps/dev-wallet/src/Components/CompactTable/utils/formatAccount.tsx delete mode 100644 packages/apps/dev-wallet/src/Components/CompactTable/utils/formatAmount.tsx delete mode 100644 packages/apps/dev-wallet/src/Components/CompactTable/utils/formatDefault.tsx delete mode 100644 packages/apps/dev-wallet/src/Components/CompactTable/utils/formatMultiStepTx.tsx delete mode 100644 packages/apps/dev-wallet/src/Components/CompactTable/utils/formatStatus.tsx delete mode 100644 packages/apps/dev-wallet/src/Components/CompactTable/utils/getItem.ts rename packages/libs/kode-ui/src/patterns/CompactTable/{utils/formatAccount.tsx => formatters/FormatAccount.tsx} (88%) rename packages/libs/kode-ui/src/patterns/CompactTable/{utils/formatAmount.tsx => formatters/FormatAmount.tsx} (89%) rename packages/libs/kode-ui/src/patterns/CompactTable/{utils/formatDefault.tsx => formatters/FormatDefault.tsx} (89%) rename packages/{apps/dev-wallet/src/Components/CompactTable/utils/formatLink.tsx => libs/kode-ui/src/patterns/CompactTable/formatters/FormatLink.tsx} (56%) rename packages/libs/kode-ui/src/patterns/CompactTable/{utils/formatMultiStepTx.tsx => formatters/FormatMultiStepTx.tsx} (78%) rename packages/libs/kode-ui/src/patterns/CompactTable/{utils/formatStatus.tsx => formatters/FormatStatus.tsx} (92%) create mode 100644 packages/libs/kode-ui/src/patterns/CompactTable/formatters/index.tsx rename packages/{apps/dev-wallet/src/Components => libs/kode-ui/src/patterns}/CompactTable/usePagination.tsx (92%) delete mode 100644 packages/libs/kode-ui/src/patterns/CompactTable/utils/formatLink.tsx diff --git a/packages/apps/dev-wallet/src/Components/CompactTable/CompactTable.tsx b/packages/apps/dev-wallet/src/Components/CompactTable/CompactTable.tsx deleted file mode 100644 index c37a7dc9bc..0000000000 --- a/packages/apps/dev-wallet/src/Components/CompactTable/CompactTable.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import React from 'react'; -import { Media } from '../Media/media'; -import { CompactTableDesktop } from './CompactTableDesktop/CompactTableDesktop'; -import { CompactTableMobile } from './CompactTableMobile/CompactTableMobile'; -import type { ITablePaginationPageOptions } from './TablePagination/TablePagination'; -import { TablePagination } from './TablePagination/TablePagination'; - -import type { FC } from 'react'; -import { fullWidthClass } from './styles.css'; - -export type ILoadingVariants = 'default' | 'icon'; - -export interface ITableField { - width: any; - variant?: 'body' | 'code'; - align?: 'start' | 'end' | 'center'; - label: string; - key: string | string[]; - render?: FC<{ value: string }> | FC<{ value: string }>[]; - isLoading?: boolean; - loaderVariant?: ILoadingVariants; -} - -export interface ICompactTableProps { - label?: string; - data: any[]; - fields: ITableField[]; - isLoading?: boolean; - totalCount?: number; - pageSize?: number; - setPage?: (page: ITablePaginationPageOptions) => void; - pageInfo?: { - endCursor?: string | null; - startCursor?: string | null; - hasNextPage?: boolean; - hasPreviousPage?: boolean; - }; -} - -export const CompactTable: React.FC = ({ - fields, - data, - label, - isLoading = false, - totalCount, - pageSize, - setPage, - pageInfo, -}) => { - return ( - <> - - - - - - - {!!(setPage && pageInfo && totalCount && pageSize) && ( - - )} - - ); -}; diff --git a/packages/apps/dev-wallet/src/Components/CompactTable/CompactTableDesktop/CompactTableDesktop.tsx b/packages/apps/dev-wallet/src/Components/CompactTable/CompactTableDesktop/CompactTableDesktop.tsx deleted file mode 100644 index e364c378bc..0000000000 --- a/packages/apps/dev-wallet/src/Components/CompactTable/CompactTableDesktop/CompactTableDesktop.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { - Cell, - Column, - Row, - Stack, - Table, - TableBody, - TableHeader, -} from '@kadena/kode-ui'; -import type { FC } from 'react'; -import type { ICompactTableProps } from '../CompactTable'; - -import { FieldCell } from './FieldCell'; -import { tableBorderClass, tableClass } from './styles.css'; - -type IProps = Omit< - ICompactTableProps, - 'pageInfo' | 'setPage' | 'pageSize' | 'totalCount' ->; - -export const CompactTableDesktop: FC = ({ - data, - fields, - label = 'Table', - isLoading = false, -}) => { - return ( - - - - {fields.map((field) => ( - - {field.label} - - ))} - - - {data.map((item, idx) => ( - - {fields.map((field) => ( - - - - ))} - - ))} - -
- - ); -}; diff --git a/packages/apps/dev-wallet/src/Components/CompactTable/CompactTableDesktop/FieldCell.tsx b/packages/apps/dev-wallet/src/Components/CompactTable/CompactTableDesktop/FieldCell.tsx deleted file mode 100644 index 6f8a8bddc1..0000000000 --- a/packages/apps/dev-wallet/src/Components/CompactTable/CompactTableDesktop/FieldCell.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { Text } from '@kadena/kode-ui'; -import classNames from 'classnames'; -import type { FC } from 'react'; -import { dataFieldClass, dataFieldMultipleIconsClass } from '../styles.css'; -import { FormatDefault } from '../utils/formatDefault'; -import { getItem, IFieldCellProps } from '../utils/getItem'; - -export const FieldCell: FC = ({ field, item }) => { - if ( - typeof field.key === 'string' && - (typeof field.render === 'function' || !field.render) - ) { - const Render = field.render ? field.render : FormatDefault(); - - return ( - - - - ); - } - - if (typeof field.key === 'object' && typeof field.render === 'object') { - const renderArray = field.render ?? []; - return ( - - {field.key.map((key, idx) => { - const Render = renderArray[idx] ? renderArray[idx] : FormatDefault(); - - return ; - })} - - ); - } - - return null; -}; diff --git a/packages/apps/dev-wallet/src/Components/CompactTable/CompactTableDesktop/styles.css.ts b/packages/apps/dev-wallet/src/Components/CompactTable/CompactTableDesktop/styles.css.ts deleted file mode 100644 index 8dd288f233..0000000000 --- a/packages/apps/dev-wallet/src/Components/CompactTable/CompactTableDesktop/styles.css.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { atoms } from '@kadena/kode-ui/styles'; -import { globalStyle, style } from '@vanilla-extract/css'; - -export const tableClass = style({ - width: '100%', -}); - -globalStyle(`${tableClass} td span`, { - display: 'block', - alignItems: 'center', - contain: 'inline-size', - overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', -}); - -export const tableBorderClass = style([ - atoms({ - borderRadius: 'lg', - borderColor: 'base.subtle', - borderWidth: 'hairline', - borderStyle: 'solid', - }), - {}, -]); diff --git a/packages/apps/dev-wallet/src/Components/CompactTable/CompactTableMobile/CompactTableMobile.tsx b/packages/apps/dev-wallet/src/Components/CompactTable/CompactTableMobile/CompactTableMobile.tsx deleted file mode 100644 index cf0c83bc53..0000000000 --- a/packages/apps/dev-wallet/src/Components/CompactTable/CompactTableMobile/CompactTableMobile.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import type { FC } from 'react'; -import type { ICompactTableProps } from '../CompactTable'; -import { FieldCell } from '../CompactTableDesktop/FieldCell'; -import { headerClass, rowClass, sectionClass } from './styles.css'; - -type IProps = Omit< - ICompactTableProps, - 'pageInfo' | 'setPage' | 'pageSize' | 'totalCount' ->; - -export const CompactTableMobile: FC = ({ - data, - fields, - isLoading = false, -}) => { - return data.map((item, idx) => ( -
- {fields.map((field) => ( -
- {field.label} - -
- ))} -
- )); -}; diff --git a/packages/apps/dev-wallet/src/Components/CompactTable/CompactTableMobile/styles.css.ts b/packages/apps/dev-wallet/src/Components/CompactTable/CompactTableMobile/styles.css.ts deleted file mode 100644 index e2c018e91f..0000000000 --- a/packages/apps/dev-wallet/src/Components/CompactTable/CompactTableMobile/styles.css.ts +++ /dev/null @@ -1,72 +0,0 @@ -import { atoms, tokens } from '@kadena/kode-ui/styles'; -import { style } from '@vanilla-extract/css'; - -export const sectionClass = style([ - atoms({ - padding: 'n6', - backgroundColor: 'base.default', - marginBlockEnd: 'md', - }), -]); - -export const headerClass = style([ - atoms({ - color: 'text.base.default', - fontWeight: 'primaryFont.bold', - paddingInlineEnd: 'md', - }), -]); - -export const dataFieldClass = style({ - overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - fontWeight: tokens.kda.foundation.typography.weight.primaryFont.medium, - // If we use atoms it will be overridden by the Text component. - color: tokens.kda.foundation.color.text.base.default, -}); - -export const rowClass = style([ - atoms({ display: 'flex' }), - { - alignItems: 'center', - overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - contain: 'inline-size', - }, -]); - -export const badgeClass = style({ - backgroundColor: tokens.kda.foundation.color.neutral.n100, - color: tokens.kda.foundation.color.neutral.n0, -}); - -export const dataFieldLinkClass = style({ - display: 'flex', - alignItems: 'center', - gap: tokens.kda.foundation.spacing.sm, - minWidth: 0, -}); - -export const linkClass = style({ - overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - textDecoration: 'none', -}); - -export const iconLinkClass = style([ - atoms({ - color: 'text.base.default', - }), -]); - -export const linkIconClass = style([ - atoms({ - fontSize: 'xs', - }), - { - minWidth: 'fit-content', - }, -]); diff --git a/packages/apps/dev-wallet/src/Components/CompactTable/TablePagination/PaginationButton/PaginationButton.tsx b/packages/apps/dev-wallet/src/Components/CompactTable/TablePagination/PaginationButton/PaginationButton.tsx deleted file mode 100644 index 7379a58932..0000000000 --- a/packages/apps/dev-wallet/src/Components/CompactTable/TablePagination/PaginationButton/PaginationButton.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import classNames from 'classnames'; -import type { FC, PropsWithChildren } from 'react'; -import { buttonClass, disabledClass } from '../styles.css'; - -export const PaginationButton: FC< - PropsWithChildren<{ - onClick: () => void; - isDisabled: boolean; - }> -> = ({ children, onClick, isDisabled }) => { - return ( - - ); -}; diff --git a/packages/apps/dev-wallet/src/Components/CompactTable/TablePagination/TablePagination.tsx b/packages/apps/dev-wallet/src/Components/CompactTable/TablePagination/TablePagination.tsx deleted file mode 100644 index 5acf78e9ce..0000000000 --- a/packages/apps/dev-wallet/src/Components/CompactTable/TablePagination/TablePagination.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { - MonoKeyboardArrowLeft, - MonoKeyboardArrowRight, -} from '@kadena/kode-icons/system'; -import { Stack } from '@kadena/kode-ui'; -import type { FC } from 'react'; -import { PaginationButton } from './PaginationButton/PaginationButton'; -import { paginationClass } from './styles.css'; - -export interface ITablePaginationPageOptions { - after?: string | null; - before?: string | null; - first?: number | null; - last?: number | null; -} -interface IProps { - totalCount: number; - pageSize: number; - setPage: (page: ITablePaginationPageOptions) => void; - pageInfo: { - endCursor?: string | null; - startCursor?: string | null; - hasNextPage?: boolean; - hasPreviousPage?: boolean; - }; -} - -export const TablePagination: FC = ({ - pageSize, - totalCount, - setPage, - pageInfo, -}) => { - const handlePageSelect = (direction: string) => () => { - if (direction === 'next') { - setPage({ after: pageInfo.endCursor, first: pageSize }); - } - if (direction === 'previous') { - setPage({ before: pageInfo.startCursor, last: pageSize }); - } - if (direction === 'first') { - setPage({ first: pageSize }); - } - if (direction === 'last') { - setPage({ last: totalCount % pageSize }); - } - }; - - return ( - - - First - - - - - - - - - - Last - - - ); -}; diff --git a/packages/apps/dev-wallet/src/Components/CompactTable/TablePagination/styles.css.ts b/packages/apps/dev-wallet/src/Components/CompactTable/TablePagination/styles.css.ts deleted file mode 100644 index 1309d631ca..0000000000 --- a/packages/apps/dev-wallet/src/Components/CompactTable/TablePagination/styles.css.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { atoms, token } from '@kadena/kode-ui/styles'; -import { style } from '@vanilla-extract/css'; - -export const buttonClass = style([ - atoms({ - color: 'text.base.default', - borderRadius: 'xs', - borderColor: 'base.default', - borderWidth: 'hairline', - borderStyle: 'solid', - backgroundColor: 'transparent', - paddingInline: 'sm', - paddingBlock: 'sm', - cursor: 'pointer', - }), - { - minWidth: '40px', - selectors: { - '&:hover': { - backgroundColor: token('color.background.base.@active'), - borderColor: token('color.border.base.@active'), - color: token('color.text.base.@active'), - }, - }, - }, -]); - -export const paginationClass = style([ - atoms({ - paddingInline: 'md', - }), -]); - -export const disabledClass = style([ - atoms({ - cursor: 'not-allowed', - }), - { - backgroundColor: token('color.background.base.@disabled'), - borderColor: token('color.border.base.@disabled'), - color: token('color.text.base.@disabled'), - selectors: { - '&:hover': { - backgroundColor: token('color.background.base.@disabled'), - borderColor: token('color.border.base.@disabled'), - color: token('color.text.base.@disabled'), - }, - }, - }, -]); diff --git a/packages/apps/dev-wallet/src/Components/CompactTable/styles.css.ts b/packages/apps/dev-wallet/src/Components/CompactTable/styles.css.ts deleted file mode 100644 index 2ed5d0a687..0000000000 --- a/packages/apps/dev-wallet/src/Components/CompactTable/styles.css.ts +++ /dev/null @@ -1,96 +0,0 @@ -import { atoms, tokens } from '@kadena/kode-ui/styles'; -import { style } from '@vanilla-extract/css'; - -export const sectionClass = style([ - atoms({ - padding: 'n6', - backgroundColor: 'base.default', - marginBlockEnd: 'md', - display: 'grid', - }), - { - justifyContent: 'start', - gridTemplateColumns: `auto repeat(3, minmax(${tokens.kda.foundation.size.n32}, 1fr))`, - gap: `${tokens.kda.foundation.spacing.sm} ${tokens.kda.foundation.spacing.xl}`, - }, -]); - -export const headerClass = style([ - atoms({ - fontWeight: 'primaryFont.bold', - }), -]); - -export const badgeClass = style({ - backgroundColor: tokens.kda.foundation.color.neutral.n100, - color: tokens.kda.foundation.color.neutral.n0, -}); - -export const dataFieldLinkClass = style({ - display: 'flex', - alignItems: 'center', - gap: tokens.kda.foundation.spacing.sm, - minWidth: 0, -}); - -export const linkClass = style({ - overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - textDecoration: 'none', -}); - -export const linkWrapperClass = style({ - width: `calc(100% - 15px)`, -}); -export const iconLinkClass = style([ - atoms({ - color: 'text.base.default', - }), -]); - -export const linkIconClass = style([ - atoms({ - fontSize: 'xs', - }), - { - minWidth: 'fit-content', - }, -]); - -export const dataFieldClass = style({ - display: 'flex!important', - overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - - fontWeight: tokens.kda.foundation.typography.weight.primaryFont.medium, - // If we use atoms it will be overridden by the Text component. - color: tokens.kda.foundation.color.text.base.default, -}); - -export const dataFieldMultipleIconsClass = style([ - atoms({ - gap: 'xs', - }), -]); - -// export const alignVariants = recipe({ -// variants: { -// align: { -// start: style({ -// justifyContent: 'flex-start', -// }), -// end: style({ -// justifyContent: 'flex-end', -// }), -// center: style({ -// justifyContent: 'center', -// }), -// }, -// }, -// }); - -export const fullWidthClass = style({ - width: '100%', -}); diff --git a/packages/apps/dev-wallet/src/Components/CompactTable/utils/formatAccount.tsx b/packages/apps/dev-wallet/src/Components/CompactTable/utils/formatAccount.tsx deleted file mode 100644 index 3cf08c9538..0000000000 --- a/packages/apps/dev-wallet/src/Components/CompactTable/utils/formatAccount.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { maskValue } from '@kadena/kode-ui'; -import type { FC } from 'react'; - -interface IProps { - value: string; -} - -export const FormatAccount: () => FC = - () => - ({ value }) => - value && maskValue(value); diff --git a/packages/apps/dev-wallet/src/Components/CompactTable/utils/formatAmount.tsx b/packages/apps/dev-wallet/src/Components/CompactTable/utils/formatAmount.tsx deleted file mode 100644 index b46879ee3e..0000000000 --- a/packages/apps/dev-wallet/src/Components/CompactTable/utils/formatAmount.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import type { FC } from 'react'; - -interface IProps { - value: string; -} - -export const FormatAmount = (): FC => { - const Component: FC = ({ value }) => <>{value} KDA; - return Component; -}; diff --git a/packages/apps/dev-wallet/src/Components/CompactTable/utils/formatDefault.tsx b/packages/apps/dev-wallet/src/Components/CompactTable/utils/formatDefault.tsx deleted file mode 100644 index cec767421c..0000000000 --- a/packages/apps/dev-wallet/src/Components/CompactTable/utils/formatDefault.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import type { FC } from 'react'; - -interface IProps { - value: string; -} - -export const FormatDefault = (): FC => { - const Component: FC = ({ value }) => <>{value}; - return Component; -}; diff --git a/packages/apps/dev-wallet/src/Components/CompactTable/utils/formatMultiStepTx.tsx b/packages/apps/dev-wallet/src/Components/CompactTable/utils/formatMultiStepTx.tsx deleted file mode 100644 index e59228a426..0000000000 --- a/packages/apps/dev-wallet/src/Components/CompactTable/utils/formatMultiStepTx.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { MonoAirlineStops } from '@kadena/kode-icons/system'; -import type { FC } from 'react'; - -interface IProps { - value: string; -} - -export const formatMultiStepTx = (): FC => { - const Component: FC = ({ value }) => { - return value ? : undefined; - }; - return Component; -}; diff --git a/packages/apps/dev-wallet/src/Components/CompactTable/utils/formatStatus.tsx b/packages/apps/dev-wallet/src/Components/CompactTable/utils/formatStatus.tsx deleted file mode 100644 index 94d57ff770..0000000000 --- a/packages/apps/dev-wallet/src/Components/CompactTable/utils/formatStatus.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { MonoCheck, MonoClear } from '@kadena/kode-icons/system'; -import type { FC } from 'react'; - -interface IProps { - value: string; -} - -export const FormatStatus = (): FC => { - const Component: FC = ({ value }) => - value ? : ; - return Component; -}; diff --git a/packages/apps/dev-wallet/src/Components/CompactTable/utils/getItem.ts b/packages/apps/dev-wallet/src/Components/CompactTable/utils/getItem.ts deleted file mode 100644 index 3dfb542977..0000000000 --- a/packages/apps/dev-wallet/src/Components/CompactTable/utils/getItem.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { ITableField } from '../CompactTable'; - -export interface IFieldCellProps { - field: ITableField; - item: any; - isLoading?: boolean; -} - -/** - * returns the value of a prop in the given item - * the key is a dot seperated string. like result.goodResult - * it will try to find the - * item { - * result: { - * goodResult: any - * } - * } - * @param item ITableField - * @param key - * @returns - */ -export const getItem = (item: IFieldCellProps['item'], key: string) => { - const keyArr = key.split('.'); - const value = keyArr.reduce((acc, val) => { - if (!acc) return; - const newItem = acc[val]; - if (newItem === undefined || newItem === null) return; - - return newItem; - }, item); - - return value; -}; diff --git a/packages/apps/dev-wallet/src/pages/account/Components/ActivityTable.tsx b/packages/apps/dev-wallet/src/pages/account/Components/ActivityTable.tsx index 66f5991238..c965d79329 100644 --- a/packages/apps/dev-wallet/src/pages/account/Components/ActivityTable.tsx +++ b/packages/apps/dev-wallet/src/pages/account/Components/ActivityTable.tsx @@ -1,8 +1,7 @@ import { noStyleLinkClass } from '@/Components/Accounts/style.css'; -import { usePagination } from '@/Components/CompactTable/usePagination'; import { IActivity } from '@/modules/activity/activity.repository'; import { MonoOpenInNew } from '@kadena/kode-icons/system'; -import { DataTable } from '@kadena/kode-ui/patterns'; +import { CompactTable, usePagination } from '@kadena/kode-ui/patterns'; import { useMemo } from 'react'; import { Link } from 'react-router-dom'; @@ -36,7 +35,7 @@ export function ActivityTable({ activities }: { activities: IActivity[] }) { [activities], ); return ( - = { title: 'Patterns/CompactTable', @@ -89,3 +90,69 @@ export const Primary: Story = { ); }, }; + +export const FormatLink: Story = { + name: 'FormatLink', + args: { + isLoading: false, + }, + render: ({ isLoading }) => { + const data = [ + { + node: { + requestKey: 'he-man', + parameters: 'param1', + block: { + height: 10, + }, + }, + }, + { + node: { + requestKey: 'masters of the universe', + parameters: 'param2', + block: { + height: 11, + }, + }, + }, + { + node: { + requestKey: 'skeletor', + parameters: 'param3', + block: { + height: 12, + }, + }, + }, + ]; + return ( + + + + ); + }, +}; diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableMobile/CompactTableMobile.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableMobile/CompactTableMobile.tsx index 682ad4bc4c..816275edc6 100644 --- a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableMobile/CompactTableMobile.tsx +++ b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableMobile/CompactTableMobile.tsx @@ -19,7 +19,7 @@ export const CompactTableMobile: FC = ({ {fields.map((field) => (
{field.label} - +
))} diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/FieldCell.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/FieldCell.tsx index d65b53626c..bac87ed274 100644 --- a/packages/libs/kode-ui/src/patterns/CompactTable/FieldCell.tsx +++ b/packages/libs/kode-ui/src/patterns/CompactTable/FieldCell.tsx @@ -2,13 +2,14 @@ import classNames from 'classnames'; import type { FC } from 'react'; import React from 'react'; import { Text } from './../../components'; +import { FormatDefault } from './Formatters/FormatDefault'; import { ValueLoader } from './LoadingSkeleton/ValueLoader/ValueLoader'; import { alignVariants, dataFieldClass, dataFieldMultipleIconsClass, + mobileFieldClass, } from './styles.css'; -import { FormatDefault } from './utils/formatDefault'; import type { IFieldCellProps } from './utils/getItem'; import { getItem } from './utils/getItem'; @@ -16,6 +17,7 @@ export const FieldCell: FC = ({ field, item, isLoading = false, + isMobile = false, }) => { if ( typeof field.key === 'string' && @@ -30,6 +32,9 @@ export const FieldCell: FC = ({ className={classNames( dataFieldClass, alignVariants({ align: field.align ?? 'start' }), + { + [mobileFieldClass]: isMobile, + }, )} > @@ -49,6 +54,9 @@ export const FieldCell: FC = ({ dataFieldClass, dataFieldMultipleIconsClass, alignVariants({ align: field.align ?? 'start' }), + { + [mobileFieldClass]: isMobile, + }, )} > {field.key.map((key, idx) => { diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/utils/formatAccount.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatAccount.tsx similarity index 88% rename from packages/libs/kode-ui/src/patterns/CompactTable/utils/formatAccount.tsx rename to packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatAccount.tsx index 0f7aabfdb4..37ae9eddf8 100644 --- a/packages/libs/kode-ui/src/patterns/CompactTable/utils/formatAccount.tsx +++ b/packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatAccount.tsx @@ -1,7 +1,7 @@ import type { FC } from 'react'; import { maskValue } from './../../../components'; -interface IProps { +export interface IProps { value: string; } diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/utils/formatAmount.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatAmount.tsx similarity index 89% rename from packages/libs/kode-ui/src/patterns/CompactTable/utils/formatAmount.tsx rename to packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatAmount.tsx index 377ae6fd4c..fe734e86ec 100644 --- a/packages/libs/kode-ui/src/patterns/CompactTable/utils/formatAmount.tsx +++ b/packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatAmount.tsx @@ -1,7 +1,7 @@ import type { FC } from 'react'; import React from 'react'; -interface IProps { +export interface IProps { value: string; } diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/utils/formatDefault.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatDefault.tsx similarity index 89% rename from packages/libs/kode-ui/src/patterns/CompactTable/utils/formatDefault.tsx rename to packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatDefault.tsx index da6566ea22..b6eebebd42 100644 --- a/packages/libs/kode-ui/src/patterns/CompactTable/utils/formatDefault.tsx +++ b/packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatDefault.tsx @@ -1,7 +1,7 @@ import type { FC } from 'react'; import React from 'react'; -interface IProps { +export interface IProps { value: string; } diff --git a/packages/apps/dev-wallet/src/Components/CompactTable/utils/formatLink.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatLink.tsx similarity index 56% rename from packages/apps/dev-wallet/src/Components/CompactTable/utils/formatLink.tsx rename to packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatLink.tsx index 0becbf093b..343b3c4cfa 100644 --- a/packages/apps/dev-wallet/src/Components/CompactTable/utils/formatLink.tsx +++ b/packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatLink.tsx @@ -1,34 +1,34 @@ -import { MonoArrowOutward } from '@kadena/kode-icons'; -import { Stack, Text } from '@kadena/kode-ui'; +import { MonoArrowOutward } from '@kadena/kode-icons/system'; import type { FC } from 'react'; -import { Link } from 'react-router-dom'; +import React from 'react'; import { dataFieldClass, linkClass, linkIconClass, linkWrapperClass, } from '../styles.css'; +import { Stack, Text } from './../../../components'; -interface IProps { +export interface IProps { value: string; } -interface IOptions { - appendUrl: string; +export interface IOptions { + url: string; + Wrapper?: React.ReactElement; } -export const FormatLink = ({ appendUrl }: IOptions): FC => { +export const FormatLink = ({ url }: IOptions): FC => { const Component: FC = ({ value }) => ( - - + + {value} - - + - - + + ); return Component; diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/utils/formatMultiStepTx.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatMultiStepTx.tsx similarity index 78% rename from packages/libs/kode-ui/src/patterns/CompactTable/utils/formatMultiStepTx.tsx rename to packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatMultiStepTx.tsx index f378a77337..ded12b7dfb 100644 --- a/packages/libs/kode-ui/src/patterns/CompactTable/utils/formatMultiStepTx.tsx +++ b/packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatMultiStepTx.tsx @@ -2,11 +2,11 @@ import { MonoAirlineStops } from '@kadena/kode-icons/system'; import type { FC } from 'react'; import React from 'react'; -interface IProps { +export interface IProps { value: string; } -export const formatMultiStepTx = (): FC => { +export const FormatMultiStepTx = (): FC => { const Component: FC = ({ value }) => { return value ? : undefined; }; diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/utils/formatStatus.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatStatus.tsx similarity index 92% rename from packages/libs/kode-ui/src/patterns/CompactTable/utils/formatStatus.tsx rename to packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatStatus.tsx index f6be7399a8..9c63ad5959 100644 --- a/packages/libs/kode-ui/src/patterns/CompactTable/utils/formatStatus.tsx +++ b/packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatStatus.tsx @@ -2,7 +2,7 @@ import { MonoCheck, MonoClear } from '@kadena/kode-icons/system'; import type { FC } from 'react'; import React from 'react'; -interface IProps { +export interface IProps { value: string; } diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/formatters/index.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/formatters/index.tsx new file mode 100644 index 0000000000..8081c80651 --- /dev/null +++ b/packages/libs/kode-ui/src/patterns/CompactTable/formatters/index.tsx @@ -0,0 +1,15 @@ +import { FormatAccount } from './FormatAccount'; +import { FormatAmount } from './FormatAmount'; +import { FormatDefault } from './FormatDefault'; +import { FormatLink } from './FormatLink'; +import { FormatMultiStepTx } from './FormatMultiStepTx'; +import { FormatStatus } from './FormatStatus'; + +export const CompactTableFormatters = { + FormatAccount, + FormatAmount, + FormatDefault, + FormatLink, + FormatMultiStepTx, + FormatStatus, +} as const; diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/styles.css.ts b/packages/libs/kode-ui/src/patterns/CompactTable/styles.css.ts index 9e1775f476..e988d74d3e 100644 --- a/packages/libs/kode-ui/src/patterns/CompactTable/styles.css.ts +++ b/packages/libs/kode-ui/src/patterns/CompactTable/styles.css.ts @@ -33,6 +33,7 @@ export const dataFieldLinkClass = style({ }); export const linkClass = style({ + width: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', @@ -93,3 +94,9 @@ export const alignVariants = recipe({ export const fullWidthClass = style({ width: '100%', }); + +export const mobileFieldClass = style([ + { + minWidth: '-webkit-fill-available', + }, +]); diff --git a/packages/apps/dev-wallet/src/Components/CompactTable/usePagination.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/usePagination.tsx similarity index 92% rename from packages/apps/dev-wallet/src/Components/CompactTable/usePagination.tsx rename to packages/libs/kode-ui/src/patterns/CompactTable/usePagination.tsx index 7c27eb366b..6620df0e98 100644 --- a/packages/apps/dev-wallet/src/Components/CompactTable/usePagination.tsx +++ b/packages/libs/kode-ui/src/patterns/CompactTable/usePagination.tsx @@ -1,5 +1,5 @@ +import type { ITablePaginationPageOptions } from '@/components/CompactTable/TablePagination/TablePagination'; import { useEffect, useState } from 'react'; -import { ITablePaginationPageOptions } from './TablePagination/TablePagination'; const PAGESIZE = 20; diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/utils/formatLink.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/utils/formatLink.tsx deleted file mode 100644 index 8f898b846f..0000000000 --- a/packages/libs/kode-ui/src/patterns/CompactTable/utils/formatLink.tsx +++ /dev/null @@ -1,45 +0,0 @@ -// import { Link } from '@/components/Routing/Link'; -// import { MonoArrowOutward } from '@kadena/kode-icons'; -import { Stack, Text } from '@kadena/kode-ui'; -import type { FC } from 'react'; -import React from 'react'; -import { - dataFieldClass, - // linkClass, - // linkIconClass, - linkWrapperClass, -} from '../styles.css'; - -interface IProps { - value: string; -} - -interface IOptions { - appendUrl: string; -} - -export const FormatLink = ({ appendUrl }: IOptions): FC => { - const Component: FC = ({ value }) => ( - - {/* - - {value} - - - - - */} - - ); - - return Component; -}; - -export const FormatJsonParse = (): FC => { - const Component: FC = ({ value }) => ( - - {!!value && value?.length > 0 ? JSON.parse(value) : value} - - ); - return Component; -}; diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/utils/getItem.ts b/packages/libs/kode-ui/src/patterns/CompactTable/utils/getItem.ts index 57b400be76..7316b67219 100644 --- a/packages/libs/kode-ui/src/patterns/CompactTable/utils/getItem.ts +++ b/packages/libs/kode-ui/src/patterns/CompactTable/utils/getItem.ts @@ -4,6 +4,7 @@ export interface IFieldCellProps { field: ITableField; item: any; isLoading?: boolean; + isMobile?: boolean; } /** diff --git a/packages/libs/kode-ui/src/patterns/index.ts b/packages/libs/kode-ui/src/patterns/index.ts index 16ece2d547..e82070e6f0 100644 --- a/packages/libs/kode-ui/src/patterns/index.ts +++ b/packages/libs/kode-ui/src/patterns/index.ts @@ -6,4 +6,11 @@ export { type ICardFooterGroupProps, } from './Card'; -export { CompactTable, ICompactTableProps } from './CompactTable/CompactTable'; +export { + CompactTable, + type ICompactTableProps, +} from './CompactTable/CompactTable'; + +export { usePagination } from './CompactTable/usePagination'; + +export { CompactTableFormatters } from './CompactTable/Formatters'; From 58457c22f53b1ee555abc71171c81d4c2153f874 Mon Sep 17 00:00:00 2001 From: Steven Straatemans Date: Wed, 16 Oct 2024 10:08:57 +0200 Subject: [PATCH 05/11] use the correct Media tag from kode-ui --- packages/apps/dev-wallet/package.json | 3 +- .../dev-wallet/src/Components/Media/media.ts | 13 - packages/apps/explorer/package.json | 1 - .../components/AccountAside/AccountAside.tsx | 3 +- .../AccountTransactionsTable.tsx | 12 +- .../AccountTransfersTable.tsx | 4 +- .../BlockTable/BlockHeader/BlockHeader.tsx | 3 +- .../BlockTransactions/BlockTransactions.tsx | 16 +- .../components/CompactTable/CompactTable.tsx | 2 +- .../explorer/src/components/Footer/Footer.tsx | 3 +- .../explorer/src/components/Layout/Layout.tsx | 3 +- .../components/Layout/__test__/media.test.ts | 8 - .../explorer/src/components/Layout/media.ts | 13 - .../explorer/src/components/Navbar/Navbar.tsx | 3 +- .../SelectNetwork/SelectNetwork.tsx | 2 +- .../StatisticsStack/StatisticsStack.tsx | 3 +- .../[networkSlug]/account/[accountName].tsx | 4 +- .../pages/[networkSlug]/event/[eventname].tsx | 4 +- .../pages/[networkSlug]/height/[height].tsx | 4 +- .../src/pages/[networkSlug]/index.tsx | 3 +- pnpm-lock.yaml | 302 ++++++++---------- 21 files changed, 165 insertions(+), 244 deletions(-) delete mode 100644 packages/apps/dev-wallet/src/Components/Media/media.ts delete mode 100644 packages/apps/explorer/src/components/Layout/__test__/media.test.ts delete mode 100644 packages/apps/explorer/src/components/Layout/media.ts diff --git a/packages/apps/dev-wallet/package.json b/packages/apps/dev-wallet/package.json index 4145872872..4a4c3e1510 100644 --- a/packages/apps/dev-wallet/package.json +++ b/packages/apps/dev-wallet/package.json @@ -17,7 +17,6 @@ "verify": "tsc --noEmit" }, "dependencies": { - "@artsy/fresnel": "^7.1.4", "@hookform/resolvers": "^3.2.0", "@kadena/chainweb-node-client": "workspace:*", "@kadena/client": "workspace:*", @@ -74,4 +73,4 @@ "vite-tsconfig-paths": "^4.2.1", "vitest": "^1.6.0" } -} \ No newline at end of file +} diff --git a/packages/apps/dev-wallet/src/Components/Media/media.ts b/packages/apps/dev-wallet/src/Components/Media/media.ts deleted file mode 100644 index 700f78b9e5..0000000000 --- a/packages/apps/dev-wallet/src/Components/Media/media.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { createMedia } from '@artsy/fresnel'; - -const AppMedia = createMedia({ - breakpoints: { - none: 0, - xs: 0, - sm: 640, - md: 768, - lg: 1024, - }, -}); - -export const { Media, MediaContextProvider } = AppMedia; diff --git a/packages/apps/explorer/package.json b/packages/apps/explorer/package.json index 6d2dbae7f9..c35191b3f0 100644 --- a/packages/apps/explorer/package.json +++ b/packages/apps/explorer/package.json @@ -27,7 +27,6 @@ }, "dependencies": { "@apollo/client": "~3.9.11", - "@artsy/fresnel": "^7.1.4", "@google-analytics/data": "~3.2.2", "@graphql-yoga/apollo-link": "~3.3.0", "@kadena/graph": "workspace:*", diff --git a/packages/apps/explorer/src/components/AccountAside/AccountAside.tsx b/packages/apps/explorer/src/components/AccountAside/AccountAside.tsx index 07946ebefd..a5c4ef89e8 100644 --- a/packages/apps/explorer/src/components/AccountAside/AccountAside.tsx +++ b/packages/apps/explorer/src/components/AccountAside/AccountAside.tsx @@ -1,12 +1,11 @@ import type { AccountQuery } from '@/__generated__/sdk'; import { useRouter } from '@/hooks/router'; -import { Stack } from '@kadena/kode-ui'; +import { Media, Stack } from '@kadena/kode-ui'; import type { FC, PropsWithChildren } from 'react'; import React, { useEffect, useState } from 'react'; import { QRCode } from 'react-qrcode-logo'; import { LayoutAsideContentBlock } from '../Layout/components/LayoutAsideContentBlock'; import { smallCardClass } from '../Layout/components/styles.css'; -import { Media } from '../Layout/media'; interface IProps extends PropsWithChildren { account: AccountQuery['fungibleAccount']; diff --git a/packages/apps/explorer/src/components/AccountTransactionsTable/AccountTransactionsTable.tsx b/packages/apps/explorer/src/components/AccountTransactionsTable/AccountTransactionsTable.tsx index d4fdbb9f0b..16f416372b 100644 --- a/packages/apps/explorer/src/components/AccountTransactionsTable/AccountTransactionsTable.tsx +++ b/packages/apps/explorer/src/components/AccountTransactionsTable/AccountTransactionsTable.tsx @@ -4,14 +4,16 @@ import type { } from '@/__generated__/sdk'; import { useAccountTransactionsQuery } from '@/__generated__/sdk'; import { useQueryContext } from '@/context/queryContext'; -import { usePagination } from '@/hooks/usePagination'; import { graphqlIdFor } from '@/utils/graphqlIdFor'; import { Heading, Stack } from '@kadena/kode-ui'; -import { DataTable } from '@kadena/kode-ui/patterns'; +import { + CompactTable, + CompactTableFormatters, + usePagination, +} from '@kadena/kode-ui/patterns'; import type { FC } from 'react'; import React, { useEffect, useState } from 'react'; import { FormatJsonParse, FormatLink } from '../CompactTable/utils/formatLink'; -import { FormatStatus } from '../CompactTable/utils/formatStatus'; import { useToast } from '../Toast/ToastContext/ToastContext'; import { accountTransactions } from './AccountTransactions.graph'; import { loadingData } from './loadingDataAccountTransactionsquery'; @@ -74,7 +76,7 @@ export const AccountTransactionsTable: FC<{ accountName: string }> = ({ ); return ( - = ({ key: 'result.goodResult', variant: 'code', width: '10%', - render: FormatStatus(), + render: CompactTableFormatters.FormatStatus(), }, { label: 'Sender', diff --git a/packages/apps/explorer/src/components/AccountTransfersTable/AccountTransfersTable.tsx b/packages/apps/explorer/src/components/AccountTransfersTable/AccountTransfersTable.tsx index 304f40f43c..96d122eb34 100644 --- a/packages/apps/explorer/src/components/AccountTransfersTable/AccountTransfersTable.tsx +++ b/packages/apps/explorer/src/components/AccountTransfersTable/AccountTransfersTable.tsx @@ -4,7 +4,7 @@ import { useQueryContext } from '@/context/queryContext'; import { usePagination } from '@/hooks/usePagination'; import { graphqlIdFor } from '@/utils/graphqlIdFor'; import { Heading, Stack } from '@kadena/kode-ui'; -import { DataTable } from '@kadena/kode-ui/patterns'; +import { CompactTable } from '@kadena/kode-ui/patterns'; import type { FC } from 'react'; import React, { useEffect, useState } from 'react'; import { FormatAmount } from '../CompactTable/utils/formatAmount'; @@ -70,7 +70,7 @@ export const AccountTransfersTable: FC<{ accountName: string }> = ({ ); return ( - = ({ hash }) => { } return ( - = ({ hash }) => { key: ['result.goodResult', 'result.continuation'], variant: 'code', width: '10%', - render: [FormatStatus(), formatMultiStepTx()], + render: [ + CompactTableFormatters.FormatStatus(), + CompactTableFormatters.FormatMultiStepTx(), + ], loaderVariant: 'icon', }, { diff --git a/packages/apps/explorer/src/components/CompactTable/CompactTable.tsx b/packages/apps/explorer/src/components/CompactTable/CompactTable.tsx index a1f3553f5b..72d2e1d406 100644 --- a/packages/apps/explorer/src/components/CompactTable/CompactTable.tsx +++ b/packages/apps/explorer/src/components/CompactTable/CompactTable.tsx @@ -1,4 +1,4 @@ -import { Media } from '@/components/Layout/media'; +import { Media } from '@kadena/kode-ui'; import React from 'react'; import type { ITableField } from '../LoadingSkeleton/types'; import { fullWidthClass } from '../globalstyles.css'; diff --git a/packages/apps/explorer/src/components/Footer/Footer.tsx b/packages/apps/explorer/src/components/Footer/Footer.tsx index b732f98b91..6086e761b7 100644 --- a/packages/apps/explorer/src/components/Footer/Footer.tsx +++ b/packages/apps/explorer/src/components/Footer/Footer.tsx @@ -7,10 +7,9 @@ import { MonoLogoX, MonoMoreVert, } from '@kadena/kode-icons/system'; -import { Button, Heading, Stack, Text } from '@kadena/kode-ui'; +import { Button, Heading, Media, Stack, Text } from '@kadena/kode-ui'; import type { FC } from 'react'; import React, { useState } from 'react'; -import { Media } from '../Layout/media'; import { Logo } from '../Logo/Logo'; import { FooterColumn } from './FooterColumn'; import { diff --git a/packages/apps/explorer/src/components/Layout/Layout.tsx b/packages/apps/explorer/src/components/Layout/Layout.tsx index 78655a3e02..659b769443 100644 --- a/packages/apps/explorer/src/components/Layout/Layout.tsx +++ b/packages/apps/explorer/src/components/Layout/Layout.tsx @@ -1,6 +1,6 @@ import { Footer } from '@/components/Footer/Footer'; import { Header } from '@/components/Header/Header'; -import { Stack } from '@kadena/kode-ui'; +import { Media, Stack } from '@kadena/kode-ui'; import classNames from 'classnames'; import type { FC, ReactNode } from 'react'; import React from 'react'; @@ -16,7 +16,6 @@ import { searchWrapperClass, searchWrapperVariants, } from './components/styles.css'; -import { Media } from './media'; interface IProps { children?: ReactNode; diff --git a/packages/apps/explorer/src/components/Layout/__test__/media.test.ts b/packages/apps/explorer/src/components/Layout/__test__/media.test.ts deleted file mode 100644 index 8687ff4ed1..0000000000 --- a/packages/apps/explorer/src/components/Layout/__test__/media.test.ts +++ /dev/null @@ -1,8 +0,0 @@ -import type { ComponentType } from 'react'; -import { Media } from '../media'; - -describe('layout media', () => { - it('should return the correct breakpoints', () => { - assertType>(Media); - }); -}); diff --git a/packages/apps/explorer/src/components/Layout/media.ts b/packages/apps/explorer/src/components/Layout/media.ts deleted file mode 100644 index 700f78b9e5..0000000000 --- a/packages/apps/explorer/src/components/Layout/media.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { createMedia } from '@artsy/fresnel'; - -const AppMedia = createMedia({ - breakpoints: { - none: 0, - xs: 0, - sm: 640, - md: 768, - lg: 1024, - }, -}); - -export const { Media, MediaContextProvider } = AppMedia; diff --git a/packages/apps/explorer/src/components/Navbar/Navbar.tsx b/packages/apps/explorer/src/components/Navbar/Navbar.tsx index 72bdf66409..d113afef7a 100644 --- a/packages/apps/explorer/src/components/Navbar/Navbar.tsx +++ b/packages/apps/explorer/src/components/Navbar/Navbar.tsx @@ -1,9 +1,8 @@ import { Link } from '@/components/Routing/Link'; -import { Stack } from '@kadena/kode-ui'; +import { Media, Stack } from '@kadena/kode-ui'; import type { FC, PropsWithChildren } from 'react'; import React from 'react'; import { GraphQLQueryDialog } from '../GraphqlQueryDialog/GraphqlQueryDialog'; -import { Media } from '../Layout/media'; import { Logo } from '../Logo/Logo'; import { MobileLogo } from '../Logo/MobileLogo'; import { SelectNetwork } from '../SelectNetwork/SelectNetwork'; diff --git a/packages/apps/explorer/src/components/SelectNetwork/SelectNetwork.tsx b/packages/apps/explorer/src/components/SelectNetwork/SelectNetwork.tsx index 040be453c5..5eb2264a1b 100644 --- a/packages/apps/explorer/src/components/SelectNetwork/SelectNetwork.tsx +++ b/packages/apps/explorer/src/components/SelectNetwork/SelectNetwork.tsx @@ -11,12 +11,12 @@ import { ContextMenu, ContextMenuDivider, ContextMenuItem, + Media, Stack, Text, } from '@kadena/kode-ui'; import type { FC } from 'react'; import React, { useState } from 'react'; -import { Media } from '../Layout/media'; import { ConfigNetwork } from './ConfigNetwork'; import { selectorButtonClass, diff --git a/packages/apps/explorer/src/components/StatisticsComponent/StatisticsStack/StatisticsStack.tsx b/packages/apps/explorer/src/components/StatisticsComponent/StatisticsStack/StatisticsStack.tsx index 2ed01c96e0..3bef8aeaf2 100644 --- a/packages/apps/explorer/src/components/StatisticsComponent/StatisticsStack/StatisticsStack.tsx +++ b/packages/apps/explorer/src/components/StatisticsComponent/StatisticsStack/StatisticsStack.tsx @@ -1,11 +1,10 @@ import { useNetworkInfoQuery } from '@/__generated__/sdk'; -import { Media } from '@/components/Layout/media'; import { useToast } from '@/components/Toast/ToastContext/ToastContext'; import { CONSTANTS } from '@/constants/constants'; import { useQueryContext } from '@/context/queryContext'; import { networkInfo } from '@/graphql/queries/network-info.graph'; import { formatStatisticsData } from '@/services/format'; -import { Stack, Text } from '@kadena/kode-ui'; +import { Media, Stack, Text } from '@kadena/kode-ui'; import type { FC } from 'react'; import React, { useEffect } from 'react'; import { boxClass, overFlowClass } from './statisticsStack.css'; diff --git a/packages/apps/explorer/src/pages/[networkSlug]/account/[accountName].tsx b/packages/apps/explorer/src/pages/[networkSlug]/account/[accountName].tsx index 4ac46ba4dd..799a34d92c 100644 --- a/packages/apps/explorer/src/pages/[networkSlug]/account/[accountName].tsx +++ b/packages/apps/explorer/src/pages/[networkSlug]/account/[accountName].tsx @@ -20,7 +20,7 @@ import { useSearch } from '@/context/searchContext'; import { account } from '@/graphql/queries/account.graph'; import { useRouter } from '@/hooks/router'; import { Badge, TabItem, Tabs } from '@kadena/kode-ui'; -import { DataTable } from '@kadena/kode-ui/patterns'; +import { CompactTable } from '@kadena/kode-ui/patterns'; import type { FC, Key } from 'react'; import React, { useEffect, useMemo, useState } from 'react'; @@ -153,7 +153,7 @@ const Account: FC = () => { } key="Keys" > - { @@ -32,7 +32,7 @@ const Height: React.FC = () => { {chainData.data.edges.length === 0 ? ( ) : ( - { - Date: Wed, 16 Oct 2024 10:20:11 +0200 Subject: [PATCH 06/11] use the correct formatters --- .../AccountTransactionsTable.tsx | 4 +- .../AccountTransfersTable.tsx | 5 +- .../components/CompactTable/CompactTable.tsx | 59 -------------- .../CompactTableDesktop.tsx | 64 --------------- .../CompactTableDesktop/FieldCell.tsx | 72 ----------------- .../CompactTableDesktop/styles.css.ts | 25 ------ .../CompactTableMobile/CompactTableMobile.tsx | 27 ------- .../CompactTableMobile/styles.css.ts | 72 ----------------- .../PaginationButton/PaginationButton.tsx | 21 ----- .../TablePagination/TablePagination.tsx | 79 ------------------- .../TablePagination/styles.css.ts | 50 ------------ .../CompactTable/utils/formatAccount.tsx | 11 --- .../CompactTable/utils/formatAmount.tsx | 11 --- .../CompactTable/utils/formatDefault.tsx | 11 --- .../CompactTable/utils/formatLink.tsx | 9 --- .../CompactTable/utils/formatMultiStepTx.tsx | 14 ---- .../CompactTable/utils/formatStatus.tsx | 13 --- .../[networkSlug]/account/[accountName].tsx | 5 +- .../src/patterns/CompactTable/FieldCell.tsx | 2 +- .../FormatAccount.tsx | 0 .../FormatAmount.tsx | 0 .../FormatDefault.tsx | 0 .../TableFormatters/FormatJsonParse.tsx | 17 ++++ .../FormatLink.tsx | 0 .../FormatMultiStepTx.tsx | 0 .../FormatStatus.tsx | 0 .../{formatters => TableFormatters}/index.tsx | 2 + packages/libs/kode-ui/src/patterns/index.ts | 2 +- 28 files changed, 27 insertions(+), 548 deletions(-) delete mode 100644 packages/apps/explorer/src/components/CompactTable/CompactTable.tsx delete mode 100644 packages/apps/explorer/src/components/CompactTable/CompactTableDesktop/CompactTableDesktop.tsx delete mode 100644 packages/apps/explorer/src/components/CompactTable/CompactTableDesktop/FieldCell.tsx delete mode 100644 packages/apps/explorer/src/components/CompactTable/CompactTableDesktop/styles.css.ts delete mode 100644 packages/apps/explorer/src/components/CompactTable/CompactTableMobile/CompactTableMobile.tsx delete mode 100644 packages/apps/explorer/src/components/CompactTable/CompactTableMobile/styles.css.ts delete mode 100644 packages/apps/explorer/src/components/CompactTable/TablePagination/PaginationButton/PaginationButton.tsx delete mode 100644 packages/apps/explorer/src/components/CompactTable/TablePagination/TablePagination.tsx delete mode 100644 packages/apps/explorer/src/components/CompactTable/TablePagination/styles.css.ts delete mode 100644 packages/apps/explorer/src/components/CompactTable/utils/formatAccount.tsx delete mode 100644 packages/apps/explorer/src/components/CompactTable/utils/formatAmount.tsx delete mode 100644 packages/apps/explorer/src/components/CompactTable/utils/formatDefault.tsx delete mode 100644 packages/apps/explorer/src/components/CompactTable/utils/formatMultiStepTx.tsx delete mode 100644 packages/apps/explorer/src/components/CompactTable/utils/formatStatus.tsx rename packages/libs/kode-ui/src/patterns/CompactTable/{formatters => TableFormatters}/FormatAccount.tsx (100%) rename packages/libs/kode-ui/src/patterns/CompactTable/{formatters => TableFormatters}/FormatAmount.tsx (100%) rename packages/libs/kode-ui/src/patterns/CompactTable/{formatters => TableFormatters}/FormatDefault.tsx (100%) create mode 100644 packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatJsonParse.tsx rename packages/libs/kode-ui/src/patterns/CompactTable/{formatters => TableFormatters}/FormatLink.tsx (100%) rename packages/libs/kode-ui/src/patterns/CompactTable/{formatters => TableFormatters}/FormatMultiStepTx.tsx (100%) rename packages/libs/kode-ui/src/patterns/CompactTable/{formatters => TableFormatters}/FormatStatus.tsx (100%) rename packages/libs/kode-ui/src/patterns/CompactTable/{formatters => TableFormatters}/index.tsx (86%) diff --git a/packages/apps/explorer/src/components/AccountTransactionsTable/AccountTransactionsTable.tsx b/packages/apps/explorer/src/components/AccountTransactionsTable/AccountTransactionsTable.tsx index 16f416372b..68b537226e 100644 --- a/packages/apps/explorer/src/components/AccountTransactionsTable/AccountTransactionsTable.tsx +++ b/packages/apps/explorer/src/components/AccountTransactionsTable/AccountTransactionsTable.tsx @@ -13,7 +13,7 @@ import { } from '@kadena/kode-ui/patterns'; import type { FC } from 'react'; import React, { useEffect, useState } from 'react'; -import { FormatJsonParse, FormatLink } from '../CompactTable/utils/formatLink'; +import { FormatLink } from '../CompactTable/utils/formatLink'; import { useToast } from '../Toast/ToastContext/ToastContext'; import { accountTransactions } from './AccountTransactions.graph'; import { loadingData } from './loadingDataAccountTransactionsquery'; @@ -110,7 +110,7 @@ export const AccountTransactionsTable: FC<{ accountName: string }> = ({ key: 'cmd.payload.code', variant: 'code', width: '40%', - render: FormatJsonParse(), + render: CompactTableFormatters.FormatJsonParse(), }, ]} data={innerData.node!.transactions.edges.map( diff --git a/packages/apps/explorer/src/components/AccountTransfersTable/AccountTransfersTable.tsx b/packages/apps/explorer/src/components/AccountTransfersTable/AccountTransfersTable.tsx index 96d122eb34..5775092774 100644 --- a/packages/apps/explorer/src/components/AccountTransfersTable/AccountTransfersTable.tsx +++ b/packages/apps/explorer/src/components/AccountTransfersTable/AccountTransfersTable.tsx @@ -4,10 +4,9 @@ import { useQueryContext } from '@/context/queryContext'; import { usePagination } from '@/hooks/usePagination'; import { graphqlIdFor } from '@/utils/graphqlIdFor'; import { Heading, Stack } from '@kadena/kode-ui'; -import { CompactTable } from '@kadena/kode-ui/patterns'; +import { CompactTable, CompactTableFormatters } from '@kadena/kode-ui/patterns'; import type { FC } from 'react'; import React, { useEffect, useState } from 'react'; -import { FormatAmount } from '../CompactTable/utils/formatAmount'; import { FormatLink } from '../CompactTable/utils/formatLink'; import { useToast } from '../Toast/ToastContext/ToastContext'; import { accountTransfers } from './AccountTransfers.graph'; @@ -113,7 +112,7 @@ export const AccountTransfersTable: FC<{ accountName: string }> = ({ variant: 'code', align: 'end', width: '20%', - render: FormatAmount(), + render: CompactTableFormatters.FormatAmount(), }, ]} data={innerData.node?.transfers.edges.map( diff --git a/packages/apps/explorer/src/components/CompactTable/CompactTable.tsx b/packages/apps/explorer/src/components/CompactTable/CompactTable.tsx deleted file mode 100644 index 72d2e1d406..0000000000 --- a/packages/apps/explorer/src/components/CompactTable/CompactTable.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { Media } from '@kadena/kode-ui'; -import React from 'react'; -import type { ITableField } from '../LoadingSkeleton/types'; -import { fullWidthClass } from '../globalstyles.css'; -import { CompactTableDesktop } from './CompactTableDesktop/CompactTableDesktop'; -import { CompactTableMobile } from './CompactTableMobile/CompactTableMobile'; -import type { ITablePaginationPageOptions } from './TablePagination/TablePagination'; -import { TablePagination } from './TablePagination/TablePagination'; - -export interface ICompactTableProps { - label?: string; - data: any[]; - fields: ITableField[]; - isLoading?: boolean; - totalCount?: number; - pageSize?: number; - setPage?: (page: ITablePaginationPageOptions) => void; - pageInfo?: { - endCursor?: string | null; - startCursor?: string | null; - hasNextPage?: boolean; - hasPreviousPage?: boolean; - }; -} - -export const CompactTable: React.FC = ({ - fields, - data, - label, - isLoading = false, - totalCount, - pageSize, - setPage, - pageInfo, -}) => { - return ( - <> - - - - - - - {!!(setPage && pageInfo && totalCount && pageSize) && ( - - )} - - ); -}; diff --git a/packages/apps/explorer/src/components/CompactTable/CompactTableDesktop/CompactTableDesktop.tsx b/packages/apps/explorer/src/components/CompactTable/CompactTableDesktop/CompactTableDesktop.tsx deleted file mode 100644 index 8271bfb8a2..0000000000 --- a/packages/apps/explorer/src/components/CompactTable/CompactTableDesktop/CompactTableDesktop.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { - Cell, - Column, - Row, - Stack, - Table, - TableBody, - TableHeader, -} from '@kadena/kode-ui'; -import type { FC } from 'react'; -import React from 'react'; -import type { ICompactTableProps } from '../CompactTable'; - -import { alignVariants } from '../styles.css'; -import { FieldCell } from './FieldCell'; -import { tableBorderClass, tableClass } from './styles.css'; - -type IProps = Omit< - ICompactTableProps, - 'pageInfo' | 'setPage' | 'pageSize' | 'totalCount' ->; - -export const CompactTableDesktop: FC = ({ - data, - fields, - label = 'Table', - isLoading = false, -}) => { - return ( - - - - {fields.map((field) => ( - - - {field.label} - - - ))} - - - {data.map((item, idx) => ( - - {fields.map((field) => ( - - - - ))} - - ))} - -
- - ); -}; diff --git a/packages/apps/explorer/src/components/CompactTable/CompactTableDesktop/FieldCell.tsx b/packages/apps/explorer/src/components/CompactTable/CompactTableDesktop/FieldCell.tsx deleted file mode 100644 index 6b423c7377..0000000000 --- a/packages/apps/explorer/src/components/CompactTable/CompactTableDesktop/FieldCell.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { ValueLoader } from '@/components/LoadingSkeleton/ValueLoader/ValueLoader'; -import type { IFieldCellProps } from '@/utils/getItem'; -import { getItem } from '@/utils/getItem'; -import { Text } from '@kadena/kode-ui'; -import classNames from 'classnames'; -import type { FC } from 'react'; -import React from 'react'; -import { - alignVariants, - dataFieldClass, - dataFieldMultipleIconsClass, -} from '../styles.css'; -import { FormatDefault } from '../utils/formatDefault'; - -export const FieldCell: FC = ({ - field, - item, - isLoading = false, -}) => { - if ( - typeof field.key === 'string' && - (typeof field.render === 'function' || !field.render) - ) { - const Render = field.render ? field.render : FormatDefault(); - - return ( - - - - - - ); - } - - if (typeof field.key === 'object' && typeof field.render === 'object') { - const renderArray = field.render ?? []; - return ( - - {field.key.map((key, idx) => { - const Render = renderArray[idx] ? renderArray[idx] : FormatDefault(); - - return ( - - - - ); - })} - - ); - } - - return null; -}; diff --git a/packages/apps/explorer/src/components/CompactTable/CompactTableDesktop/styles.css.ts b/packages/apps/explorer/src/components/CompactTable/CompactTableDesktop/styles.css.ts deleted file mode 100644 index 8dd288f233..0000000000 --- a/packages/apps/explorer/src/components/CompactTable/CompactTableDesktop/styles.css.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { atoms } from '@kadena/kode-ui/styles'; -import { globalStyle, style } from '@vanilla-extract/css'; - -export const tableClass = style({ - width: '100%', -}); - -globalStyle(`${tableClass} td span`, { - display: 'block', - alignItems: 'center', - contain: 'inline-size', - overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', -}); - -export const tableBorderClass = style([ - atoms({ - borderRadius: 'lg', - borderColor: 'base.subtle', - borderWidth: 'hairline', - borderStyle: 'solid', - }), - {}, -]); diff --git a/packages/apps/explorer/src/components/CompactTable/CompactTableMobile/CompactTableMobile.tsx b/packages/apps/explorer/src/components/CompactTable/CompactTableMobile/CompactTableMobile.tsx deleted file mode 100644 index 00ff8c9f67..0000000000 --- a/packages/apps/explorer/src/components/CompactTable/CompactTableMobile/CompactTableMobile.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import type { FC } from 'react'; -import React from 'react'; -import type { ICompactTableProps } from '../CompactTable'; -import { FieldCell } from '../CompactTableDesktop/FieldCell'; -import { headerClass, rowClass, sectionClass } from './styles.css'; - -type IProps = Omit< - ICompactTableProps, - 'pageInfo' | 'setPage' | 'pageSize' | 'totalCount' ->; - -export const CompactTableMobile: FC = ({ - data, - fields, - isLoading = false, -}) => { - return data.map((item, idx) => ( -
- {fields.map((field) => ( -
- {field.label} - -
- ))} -
- )); -}; diff --git a/packages/apps/explorer/src/components/CompactTable/CompactTableMobile/styles.css.ts b/packages/apps/explorer/src/components/CompactTable/CompactTableMobile/styles.css.ts deleted file mode 100644 index e2c018e91f..0000000000 --- a/packages/apps/explorer/src/components/CompactTable/CompactTableMobile/styles.css.ts +++ /dev/null @@ -1,72 +0,0 @@ -import { atoms, tokens } from '@kadena/kode-ui/styles'; -import { style } from '@vanilla-extract/css'; - -export const sectionClass = style([ - atoms({ - padding: 'n6', - backgroundColor: 'base.default', - marginBlockEnd: 'md', - }), -]); - -export const headerClass = style([ - atoms({ - color: 'text.base.default', - fontWeight: 'primaryFont.bold', - paddingInlineEnd: 'md', - }), -]); - -export const dataFieldClass = style({ - overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - fontWeight: tokens.kda.foundation.typography.weight.primaryFont.medium, - // If we use atoms it will be overridden by the Text component. - color: tokens.kda.foundation.color.text.base.default, -}); - -export const rowClass = style([ - atoms({ display: 'flex' }), - { - alignItems: 'center', - overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - contain: 'inline-size', - }, -]); - -export const badgeClass = style({ - backgroundColor: tokens.kda.foundation.color.neutral.n100, - color: tokens.kda.foundation.color.neutral.n0, -}); - -export const dataFieldLinkClass = style({ - display: 'flex', - alignItems: 'center', - gap: tokens.kda.foundation.spacing.sm, - minWidth: 0, -}); - -export const linkClass = style({ - overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - textDecoration: 'none', -}); - -export const iconLinkClass = style([ - atoms({ - color: 'text.base.default', - }), -]); - -export const linkIconClass = style([ - atoms({ - fontSize: 'xs', - }), - { - minWidth: 'fit-content', - }, -]); diff --git a/packages/apps/explorer/src/components/CompactTable/TablePagination/PaginationButton/PaginationButton.tsx b/packages/apps/explorer/src/components/CompactTable/TablePagination/PaginationButton/PaginationButton.tsx deleted file mode 100644 index 6a3bc35a95..0000000000 --- a/packages/apps/explorer/src/components/CompactTable/TablePagination/PaginationButton/PaginationButton.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import classNames from 'classnames'; -import type { FC, PropsWithChildren } from 'react'; -import React from 'react'; -import { buttonClass, disabledClass } from '../styles.css'; - -export const PaginationButton: FC< - PropsWithChildren<{ - onClick: () => void; - isDisabled: boolean; - }> -> = ({ children, onClick, isDisabled }) => { - return ( - - ); -}; diff --git a/packages/apps/explorer/src/components/CompactTable/TablePagination/TablePagination.tsx b/packages/apps/explorer/src/components/CompactTable/TablePagination/TablePagination.tsx deleted file mode 100644 index 53d145c850..0000000000 --- a/packages/apps/explorer/src/components/CompactTable/TablePagination/TablePagination.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import { - MonoKeyboardArrowLeft, - MonoKeyboardArrowRight, -} from '@kadena/kode-icons/system'; -import { Stack } from '@kadena/kode-ui'; -import type { FC } from 'react'; -import React from 'react'; -import { PaginationButton } from './PaginationButton/PaginationButton'; -import { paginationClass } from './styles.css'; - -export interface ITablePaginationPageOptions { - after?: string | null; - before?: string | null; - first?: number | null; - last?: number | null; -} -interface IProps { - totalCount: number; - pageSize: number; - setPage: (page: ITablePaginationPageOptions) => void; - pageInfo: { - endCursor?: string | null; - startCursor?: string | null; - hasNextPage?: boolean; - hasPreviousPage?: boolean; - }; -} - -export const TablePagination: FC = ({ - pageSize, - totalCount, - setPage, - pageInfo, -}) => { - const handlePageSelect = (direction: string) => () => { - if (direction === 'next') { - setPage({ after: pageInfo.endCursor, first: pageSize }); - } - if (direction === 'previous') { - setPage({ before: pageInfo.startCursor, last: pageSize }); - } - if (direction === 'first') { - setPage({ first: pageSize }); - } - if (direction === 'last') { - setPage({ last: totalCount % pageSize }); - } - }; - - return ( - - - First - - - - - - - - - - Last - - - ); -}; diff --git a/packages/apps/explorer/src/components/CompactTable/TablePagination/styles.css.ts b/packages/apps/explorer/src/components/CompactTable/TablePagination/styles.css.ts deleted file mode 100644 index 1309d631ca..0000000000 --- a/packages/apps/explorer/src/components/CompactTable/TablePagination/styles.css.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { atoms, token } from '@kadena/kode-ui/styles'; -import { style } from '@vanilla-extract/css'; - -export const buttonClass = style([ - atoms({ - color: 'text.base.default', - borderRadius: 'xs', - borderColor: 'base.default', - borderWidth: 'hairline', - borderStyle: 'solid', - backgroundColor: 'transparent', - paddingInline: 'sm', - paddingBlock: 'sm', - cursor: 'pointer', - }), - { - minWidth: '40px', - selectors: { - '&:hover': { - backgroundColor: token('color.background.base.@active'), - borderColor: token('color.border.base.@active'), - color: token('color.text.base.@active'), - }, - }, - }, -]); - -export const paginationClass = style([ - atoms({ - paddingInline: 'md', - }), -]); - -export const disabledClass = style([ - atoms({ - cursor: 'not-allowed', - }), - { - backgroundColor: token('color.background.base.@disabled'), - borderColor: token('color.border.base.@disabled'), - color: token('color.text.base.@disabled'), - selectors: { - '&:hover': { - backgroundColor: token('color.background.base.@disabled'), - borderColor: token('color.border.base.@disabled'), - color: token('color.text.base.@disabled'), - }, - }, - }, -]); diff --git a/packages/apps/explorer/src/components/CompactTable/utils/formatAccount.tsx b/packages/apps/explorer/src/components/CompactTable/utils/formatAccount.tsx deleted file mode 100644 index 3cf08c9538..0000000000 --- a/packages/apps/explorer/src/components/CompactTable/utils/formatAccount.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { maskValue } from '@kadena/kode-ui'; -import type { FC } from 'react'; - -interface IProps { - value: string; -} - -export const FormatAccount: () => FC = - () => - ({ value }) => - value && maskValue(value); diff --git a/packages/apps/explorer/src/components/CompactTable/utils/formatAmount.tsx b/packages/apps/explorer/src/components/CompactTable/utils/formatAmount.tsx deleted file mode 100644 index 377ae6fd4c..0000000000 --- a/packages/apps/explorer/src/components/CompactTable/utils/formatAmount.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import type { FC } from 'react'; -import React from 'react'; - -interface IProps { - value: string; -} - -export const FormatAmount = (): FC => { - const Component: FC = ({ value }) => <>{value} KDA; - return Component; -}; diff --git a/packages/apps/explorer/src/components/CompactTable/utils/formatDefault.tsx b/packages/apps/explorer/src/components/CompactTable/utils/formatDefault.tsx deleted file mode 100644 index da6566ea22..0000000000 --- a/packages/apps/explorer/src/components/CompactTable/utils/formatDefault.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import type { FC } from 'react'; -import React from 'react'; - -interface IProps { - value: string; -} - -export const FormatDefault = (): FC => { - const Component: FC = ({ value }) => <>{value}; - return Component; -}; diff --git a/packages/apps/explorer/src/components/CompactTable/utils/formatLink.tsx b/packages/apps/explorer/src/components/CompactTable/utils/formatLink.tsx index d78309ade4..cc2757c74b 100644 --- a/packages/apps/explorer/src/components/CompactTable/utils/formatLink.tsx +++ b/packages/apps/explorer/src/components/CompactTable/utils/formatLink.tsx @@ -34,12 +34,3 @@ export const FormatLink = ({ appendUrl }: IOptions): FC => { return Component; }; - -export const FormatJsonParse = (): FC => { - const Component: FC = ({ value }) => ( - - {!!value && value?.length > 0 ? JSON.parse(value) : value} - - ); - return Component; -}; diff --git a/packages/apps/explorer/src/components/CompactTable/utils/formatMultiStepTx.tsx b/packages/apps/explorer/src/components/CompactTable/utils/formatMultiStepTx.tsx deleted file mode 100644 index f378a77337..0000000000 --- a/packages/apps/explorer/src/components/CompactTable/utils/formatMultiStepTx.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { MonoAirlineStops } from '@kadena/kode-icons/system'; -import type { FC } from 'react'; -import React from 'react'; - -interface IProps { - value: string; -} - -export const formatMultiStepTx = (): FC => { - const Component: FC = ({ value }) => { - return value ? : undefined; - }; - return Component; -}; diff --git a/packages/apps/explorer/src/components/CompactTable/utils/formatStatus.tsx b/packages/apps/explorer/src/components/CompactTable/utils/formatStatus.tsx deleted file mode 100644 index f6be7399a8..0000000000 --- a/packages/apps/explorer/src/components/CompactTable/utils/formatStatus.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { MonoCheck, MonoClear } from '@kadena/kode-icons/system'; -import type { FC } from 'react'; -import React from 'react'; - -interface IProps { - value: string; -} - -export const FormatStatus = (): FC => { - const Component: FC = ({ value }) => - value ? : ; - return Component; -}; diff --git a/packages/apps/explorer/src/pages/[networkSlug]/account/[accountName].tsx b/packages/apps/explorer/src/pages/[networkSlug]/account/[accountName].tsx index 799a34d92c..85a65480c1 100644 --- a/packages/apps/explorer/src/pages/[networkSlug]/account/[accountName].tsx +++ b/packages/apps/explorer/src/pages/[networkSlug]/account/[accountName].tsx @@ -4,7 +4,6 @@ import { AccountAside } from '@/components/AccountAside/AccountAside'; import { AccountBalanceDistribution } from '@/components/AccountBalanceDistribution/AccountBalanceDistribution'; import { AccountTransactionsTable } from '@/components/AccountTransactionsTable/AccountTransactionsTable'; import { AccountTransfersTable } from '@/components/AccountTransfersTable/AccountTransfersTable'; -import { FormatAmount } from '@/components/CompactTable/utils/formatAmount'; import { tabsWidthClass } from '@/components/globalstyles.css'; import { LayoutAside } from '@/components/Layout/components/LayoutAside'; import { LayoutBody } from '@/components/Layout/components/LayoutBody'; @@ -20,7 +19,7 @@ import { useSearch } from '@/context/searchContext'; import { account } from '@/graphql/queries/account.graph'; import { useRouter } from '@/hooks/router'; import { Badge, TabItem, Tabs } from '@kadena/kode-ui'; -import { CompactTable } from '@kadena/kode-ui/patterns'; +import { CompactTable, CompactTableFormatters } from '@kadena/kode-ui/patterns'; import type { FC, Key } from 'react'; import React, { useEffect, useMemo, useState } from 'react'; @@ -178,7 +177,7 @@ const Account: FC = () => { key: 'balance', width: '30%', align: 'end', - render: FormatAmount(), + render: CompactTableFormatters.FormatAmount(), }, ]} data={keys} diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/FieldCell.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/FieldCell.tsx index bac87ed274..7806c0d8f7 100644 --- a/packages/libs/kode-ui/src/patterns/CompactTable/FieldCell.tsx +++ b/packages/libs/kode-ui/src/patterns/CompactTable/FieldCell.tsx @@ -2,7 +2,6 @@ import classNames from 'classnames'; import type { FC } from 'react'; import React from 'react'; import { Text } from './../../components'; -import { FormatDefault } from './Formatters/FormatDefault'; import { ValueLoader } from './LoadingSkeleton/ValueLoader/ValueLoader'; import { alignVariants, @@ -10,6 +9,7 @@ import { dataFieldMultipleIconsClass, mobileFieldClass, } from './styles.css'; +import { FormatDefault } from './TableFormatters/FormatDefault'; import type { IFieldCellProps } from './utils/getItem'; import { getItem } from './utils/getItem'; diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatAccount.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatAccount.tsx similarity index 100% rename from packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatAccount.tsx rename to packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatAccount.tsx diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatAmount.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatAmount.tsx similarity index 100% rename from packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatAmount.tsx rename to packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatAmount.tsx diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatDefault.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatDefault.tsx similarity index 100% rename from packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatDefault.tsx rename to packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatDefault.tsx diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatJsonParse.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatJsonParse.tsx new file mode 100644 index 0000000000..bdfbfde011 --- /dev/null +++ b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatJsonParse.tsx @@ -0,0 +1,17 @@ +import type { FC } from 'react'; +import React from 'react'; +import { dataFieldClass } from '../styles.css'; +import { Text } from './../../../components'; + +export interface IProps { + value: string; +} + +export const FormatJsonParse = (): FC => { + const Component: FC = ({ value }) => ( + + {!!value && value?.length > 0 ? JSON.parse(value) : value} + + ); + return Component; +}; diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatLink.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatLink.tsx similarity index 100% rename from packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatLink.tsx rename to packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatLink.tsx diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatMultiStepTx.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatMultiStepTx.tsx similarity index 100% rename from packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatMultiStepTx.tsx rename to packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatMultiStepTx.tsx diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatStatus.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatStatus.tsx similarity index 100% rename from packages/libs/kode-ui/src/patterns/CompactTable/formatters/FormatStatus.tsx rename to packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatStatus.tsx diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/formatters/index.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/index.tsx similarity index 86% rename from packages/libs/kode-ui/src/patterns/CompactTable/formatters/index.tsx rename to packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/index.tsx index 8081c80651..ef1304483c 100644 --- a/packages/libs/kode-ui/src/patterns/CompactTable/formatters/index.tsx +++ b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/index.tsx @@ -1,6 +1,7 @@ import { FormatAccount } from './FormatAccount'; import { FormatAmount } from './FormatAmount'; import { FormatDefault } from './FormatDefault'; +import { FormatJsonParse } from './FormatJsonParse'; import { FormatLink } from './FormatLink'; import { FormatMultiStepTx } from './FormatMultiStepTx'; import { FormatStatus } from './FormatStatus'; @@ -11,5 +12,6 @@ export const CompactTableFormatters = { FormatDefault, FormatLink, FormatMultiStepTx, + FormatJsonParse, FormatStatus, } as const; diff --git a/packages/libs/kode-ui/src/patterns/index.ts b/packages/libs/kode-ui/src/patterns/index.ts index e82070e6f0..f1c1d5631f 100644 --- a/packages/libs/kode-ui/src/patterns/index.ts +++ b/packages/libs/kode-ui/src/patterns/index.ts @@ -13,4 +13,4 @@ export { export { usePagination } from './CompactTable/usePagination'; -export { CompactTableFormatters } from './CompactTable/Formatters'; +export { CompactTableFormatters } from './CompactTable/TableFormatters'; From 67169fa8559eb3363d91ffa0e91e9efb32201fe1 Mon Sep 17 00:00:00 2001 From: Steven Straatemans Date: Wed, 16 Oct 2024 10:29:54 +0200 Subject: [PATCH 07/11] fix build --- .../AccountTransactionsTable.tsx | 4 +- .../AccountTransfersTable.tsx | 13 +++-- .../BlockTransactions/BlockTransactions.tsx | 8 +-- .../CompactTable/utils/formatLink.tsx | 15 ++++-- .../apps/explorer/src/hooks/usePagination.tsx | 52 ------------------- .../pages/[networkSlug]/event/[eventname].tsx | 2 +- .../pages/[networkSlug]/height/[height].tsx | 2 +- 7 files changed, 27 insertions(+), 69 deletions(-) delete mode 100644 packages/apps/explorer/src/hooks/usePagination.tsx diff --git a/packages/apps/explorer/src/components/AccountTransactionsTable/AccountTransactionsTable.tsx b/packages/apps/explorer/src/components/AccountTransactionsTable/AccountTransactionsTable.tsx index 68b537226e..66ea6c8b6f 100644 --- a/packages/apps/explorer/src/components/AccountTransactionsTable/AccountTransactionsTable.tsx +++ b/packages/apps/explorer/src/components/AccountTransactionsTable/AccountTransactionsTable.tsx @@ -96,14 +96,14 @@ export const AccountTransactionsTable: FC<{ accountName: string }> = ({ key: 'cmd.meta.sender', variant: 'code', width: '25%', - render: FormatLink({ appendUrl: '/account' }), + render: FormatLink({ url: '/account/:value' }), }, { label: 'RequestKey', key: 'hash', variant: 'code', width: '25%', - render: FormatLink({ appendUrl: '/transaction' }), + render: FormatLink({ url: '/transaction/:value' }), }, { label: 'Code Preview', diff --git a/packages/apps/explorer/src/components/AccountTransfersTable/AccountTransfersTable.tsx b/packages/apps/explorer/src/components/AccountTransfersTable/AccountTransfersTable.tsx index 5775092774..7ce900d02b 100644 --- a/packages/apps/explorer/src/components/AccountTransfersTable/AccountTransfersTable.tsx +++ b/packages/apps/explorer/src/components/AccountTransfersTable/AccountTransfersTable.tsx @@ -1,10 +1,13 @@ import type { AccountTransfersQuery, Transfer } from '@/__generated__/sdk'; import { useAccountTransfersQuery } from '@/__generated__/sdk'; import { useQueryContext } from '@/context/queryContext'; -import { usePagination } from '@/hooks/usePagination'; import { graphqlIdFor } from '@/utils/graphqlIdFor'; import { Heading, Stack } from '@kadena/kode-ui'; -import { CompactTable, CompactTableFormatters } from '@kadena/kode-ui/patterns'; +import { + CompactTable, + CompactTableFormatters, + usePagination, +} from '@kadena/kode-ui/patterns'; import type { FC } from 'react'; import React, { useEffect, useState } from 'react'; import { FormatLink } from '../CompactTable/utils/formatLink'; @@ -92,19 +95,19 @@ export const AccountTransfersTable: FC<{ accountName: string }> = ({ label: 'RequestKey', key: 'requestKey', width: '20%', - render: FormatLink({ appendUrl: '/transaction' }), + render: FormatLink({ url: '/transaction/:value' }), }, { label: 'Sender', key: 'senderAccount', width: '20%', - render: FormatLink({ appendUrl: '/account' }), + render: FormatLink({ url: '/account/:value' }), }, { label: 'Receiver', key: 'receiverAccount', width: '20%', - render: FormatLink({ appendUrl: '/account' }), + render: FormatLink({ url: '/account/:value' }), }, { label: 'Amount', diff --git a/packages/apps/explorer/src/components/BlockTransactions/BlockTransactions.tsx b/packages/apps/explorer/src/components/BlockTransactions/BlockTransactions.tsx index 06bb7b18dc..a68c26a463 100644 --- a/packages/apps/explorer/src/components/BlockTransactions/BlockTransactions.tsx +++ b/packages/apps/explorer/src/components/BlockTransactions/BlockTransactions.tsx @@ -9,7 +9,7 @@ import { } from '@kadena/kode-ui/patterns'; import type { FC } from 'react'; import React, { useEffect, useState } from 'react'; -import { FormatJsonParse, FormatLink } from '../CompactTable/utils/formatLink'; +import { FormatLink } from '../CompactTable/utils/formatLink'; import { useToast } from '../Toast/ToastContext/ToastContext'; import { loadingData } from './loadingDataBlocktransactionsquery'; import { noTransactionsTitleClass } from './styles.css'; @@ -98,21 +98,21 @@ export const BlockTransactions: FC = ({ hash }) => { key: 'cmd.meta.sender', variant: 'code', width: '25%', - render: FormatLink({ appendUrl: '/account' }), + render: FormatLink({ url: '/account/:value' }), }, { label: 'RequestKey', key: 'hash', variant: 'code', width: '25%', - render: FormatLink({ appendUrl: '/transaction' }), + render: FormatLink({ url: '/transaction/:value' }), }, { label: 'Code Preview', key: 'cmd.payload.code', variant: 'code', width: '40%', - render: FormatJsonParse(), + render: CompactTableFormatters.FormatJsonParse(), }, ]} data={innerData.node.transactions.edges.map( diff --git a/packages/apps/explorer/src/components/CompactTable/utils/formatLink.tsx b/packages/apps/explorer/src/components/CompactTable/utils/formatLink.tsx index cc2757c74b..989a8808ce 100644 --- a/packages/apps/explorer/src/components/CompactTable/utils/formatLink.tsx +++ b/packages/apps/explorer/src/components/CompactTable/utils/formatLink.tsx @@ -15,18 +15,25 @@ interface IProps { } interface IOptions { - appendUrl: string; + url: string; } -export const FormatLink = ({ appendUrl }: IOptions): FC => { +const formatURL = (url: string, value: string): string => { + if (url.includes(':value')) { + return url.replace(/:value/g, value); + } + return url; +}; + +export const FormatLink = ({ url }: IOptions): FC => { const Component: FC = ({ value }) => ( - + {value} - + diff --git a/packages/apps/explorer/src/hooks/usePagination.tsx b/packages/apps/explorer/src/hooks/usePagination.tsx deleted file mode 100644 index 6620df0e98..0000000000 --- a/packages/apps/explorer/src/hooks/usePagination.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import type { ITablePaginationPageOptions } from '@/components/CompactTable/TablePagination/TablePagination'; -import { useEffect, useState } from 'react'; - -const PAGESIZE = 20; - -interface IProps { - id: string; - pageSize?: number; -} - -export const usePagination = ({ id, pageSize = PAGESIZE }: IProps) => { - const [paginationLastRecord, setPaginationLastRecord] = useState< - number | undefined | null - >(undefined); - const [paginationBeforeRecord, setPaginationBeforeRecord] = useState< - string | undefined | null - >(undefined); - const [paginationAfterRecord, setPaginationAfterRecord] = useState< - string | undefined | null - >(undefined); - const [paginationFirstRecord, setPaginationFirstRecord] = useState< - number | undefined | null - >(pageSize); - - const variables = { - id, - first: paginationFirstRecord, - last: paginationLastRecord, - before: paginationBeforeRecord, - after: paginationAfterRecord, - }; - - const handlePageChange = (page: ITablePaginationPageOptions) => { - setPaginationLastRecord(page.last); - setPaginationFirstRecord(page.first); - setPaginationBeforeRecord(page.before); - setPaginationAfterRecord(page.after); - }; - - useEffect(() => { - setPaginationLastRecord(undefined); - setPaginationFirstRecord(pageSize); - setPaginationBeforeRecord(undefined); - setPaginationAfterRecord(undefined); - }, [id]); - - return { - variables, - handlePageChange, - pageSize, - }; -}; diff --git a/packages/apps/explorer/src/pages/[networkSlug]/event/[eventname].tsx b/packages/apps/explorer/src/pages/[networkSlug]/event/[eventname].tsx index 42fcfe5c48..de363fd019 100644 --- a/packages/apps/explorer/src/pages/[networkSlug]/event/[eventname].tsx +++ b/packages/apps/explorer/src/pages/[networkSlug]/event/[eventname].tsx @@ -44,7 +44,7 @@ const Height: React.FC = () => { label: 'RequestKey', key: 'node.requestKey', width: '40%', - render: FormatLink({ appendUrl: '/transaction' }), + render: FormatLink({ url: '/transaction/:value' }), }, { label: 'Parameters', diff --git a/packages/apps/explorer/src/pages/[networkSlug]/height/[height].tsx b/packages/apps/explorer/src/pages/[networkSlug]/height/[height].tsx index b6e5c025d1..89eb277ef5 100644 --- a/packages/apps/explorer/src/pages/[networkSlug]/height/[height].tsx +++ b/packages/apps/explorer/src/pages/[networkSlug]/height/[height].tsx @@ -103,7 +103,7 @@ const Height: React.FC = () => { label: 'Hash', key: 'node.hash', width: '60%', - render: FormatLink({ appendUrl: '/block' }), + render: FormatLink({ url: '/block/:value' }), }, ]} data={innerData?.blocksFromHeight.edges ?? []} From fe3c3d147204ae3604d33446175610fbc20886ca Mon Sep 17 00:00:00 2001 From: Steven Straatemans Date: Wed, 16 Oct 2024 10:52:57 +0200 Subject: [PATCH 08/11] fix the formatlink for nextjs --- .../AccountTransactionsTable.tsx | 6 +-- .../AccountTransfersTable.tsx | 8 ++-- .../BlockTransactions/BlockTransactions.tsx | 6 +-- .../formatLink.tsx => FormatLinkWrapper.tsx} | 17 +++------ .../pages/[networkSlug]/event/[eventname].tsx | 4 +- .../pages/[networkSlug]/height/[height].tsx | 4 +- .../CompactTableDesktop.tsx | 2 +- .../TableFormatters/FormatLink.tsx | 37 +++++++++---------- 8 files changed, 39 insertions(+), 45 deletions(-) rename packages/apps/explorer/src/components/CompactTable/{utils/formatLink.tsx => FormatLinkWrapper.tsx} (59%) diff --git a/packages/apps/explorer/src/components/AccountTransactionsTable/AccountTransactionsTable.tsx b/packages/apps/explorer/src/components/AccountTransactionsTable/AccountTransactionsTable.tsx index 66ea6c8b6f..01c9d45127 100644 --- a/packages/apps/explorer/src/components/AccountTransactionsTable/AccountTransactionsTable.tsx +++ b/packages/apps/explorer/src/components/AccountTransactionsTable/AccountTransactionsTable.tsx @@ -13,7 +13,7 @@ import { } from '@kadena/kode-ui/patterns'; import type { FC } from 'react'; import React, { useEffect, useState } from 'react'; -import { FormatLink } from '../CompactTable/utils/formatLink'; +import { FormatLinkWrapper } from '../CompactTable/FormatLinkWrapper'; import { useToast } from '../Toast/ToastContext/ToastContext'; import { accountTransactions } from './AccountTransactions.graph'; import { loadingData } from './loadingDataAccountTransactionsquery'; @@ -96,14 +96,14 @@ export const AccountTransactionsTable: FC<{ accountName: string }> = ({ key: 'cmd.meta.sender', variant: 'code', width: '25%', - render: FormatLink({ url: '/account/:value' }), + render: FormatLinkWrapper({ url: '/account/:value' }), }, { label: 'RequestKey', key: 'hash', variant: 'code', width: '25%', - render: FormatLink({ url: '/transaction/:value' }), + render: FormatLinkWrapper({ url: '/transaction/:value' }), }, { label: 'Code Preview', diff --git a/packages/apps/explorer/src/components/AccountTransfersTable/AccountTransfersTable.tsx b/packages/apps/explorer/src/components/AccountTransfersTable/AccountTransfersTable.tsx index 7ce900d02b..dc35ffae45 100644 --- a/packages/apps/explorer/src/components/AccountTransfersTable/AccountTransfersTable.tsx +++ b/packages/apps/explorer/src/components/AccountTransfersTable/AccountTransfersTable.tsx @@ -10,7 +10,7 @@ import { } from '@kadena/kode-ui/patterns'; import type { FC } from 'react'; import React, { useEffect, useState } from 'react'; -import { FormatLink } from '../CompactTable/utils/formatLink'; +import { FormatLinkWrapper } from '../CompactTable/FormatLinkWrapper'; import { useToast } from '../Toast/ToastContext/ToastContext'; import { accountTransfers } from './AccountTransfers.graph'; import { loadingData } from './loadingDataAccountTransfersquery'; @@ -95,19 +95,19 @@ export const AccountTransfersTable: FC<{ accountName: string }> = ({ label: 'RequestKey', key: 'requestKey', width: '20%', - render: FormatLink({ url: '/transaction/:value' }), + render: FormatLinkWrapper({ url: '/transaction/:value' }), }, { label: 'Sender', key: 'senderAccount', width: '20%', - render: FormatLink({ url: '/account/:value' }), + render: FormatLinkWrapper({ url: '/account/:value' }), }, { label: 'Receiver', key: 'receiverAccount', width: '20%', - render: FormatLink({ url: '/account/:value' }), + render: FormatLinkWrapper({ url: '/account/:value' }), }, { label: 'Amount', diff --git a/packages/apps/explorer/src/components/BlockTransactions/BlockTransactions.tsx b/packages/apps/explorer/src/components/BlockTransactions/BlockTransactions.tsx index a68c26a463..92544864ea 100644 --- a/packages/apps/explorer/src/components/BlockTransactions/BlockTransactions.tsx +++ b/packages/apps/explorer/src/components/BlockTransactions/BlockTransactions.tsx @@ -9,7 +9,7 @@ import { } from '@kadena/kode-ui/patterns'; import type { FC } from 'react'; import React, { useEffect, useState } from 'react'; -import { FormatLink } from '../CompactTable/utils/formatLink'; +import { FormatLinkWrapper } from '../CompactTable/FormatLinkWrapper'; import { useToast } from '../Toast/ToastContext/ToastContext'; import { loadingData } from './loadingDataBlocktransactionsquery'; import { noTransactionsTitleClass } from './styles.css'; @@ -98,14 +98,14 @@ export const BlockTransactions: FC = ({ hash }) => { key: 'cmd.meta.sender', variant: 'code', width: '25%', - render: FormatLink({ url: '/account/:value' }), + render: FormatLinkWrapper({ url: '/account/:value' }), }, { label: 'RequestKey', key: 'hash', variant: 'code', width: '25%', - render: FormatLink({ url: '/transaction/:value' }), + render: FormatLinkWrapper({ url: '/transaction/:value' }), }, { label: 'Code Preview', diff --git a/packages/apps/explorer/src/components/CompactTable/utils/formatLink.tsx b/packages/apps/explorer/src/components/CompactTable/FormatLinkWrapper.tsx similarity index 59% rename from packages/apps/explorer/src/components/CompactTable/utils/formatLink.tsx rename to packages/apps/explorer/src/components/CompactTable/FormatLinkWrapper.tsx index 989a8808ce..9540f16f1a 100644 --- a/packages/apps/explorer/src/components/CompactTable/utils/formatLink.tsx +++ b/packages/apps/explorer/src/components/CompactTable/FormatLinkWrapper.tsx @@ -10,6 +10,8 @@ import { linkWrapperClass, } from '../styles.css'; +import { CompactTableFormatters } from '@kadena/kode-ui/patterns'; + interface IProps { value: string; } @@ -25,18 +27,11 @@ const formatURL = (url: string, value: string): string => { return url; }; -export const FormatLink = ({ url }: IOptions): FC => { +export const FormatLinkWrapper = ({ url }: IOptions): FC => { const Component: FC = ({ value }) => ( - - - - {value} - - - - - - + + {CompactTableFormatters.FormatLink({ url })({ value })} + ); return Component; diff --git a/packages/apps/explorer/src/pages/[networkSlug]/event/[eventname].tsx b/packages/apps/explorer/src/pages/[networkSlug]/event/[eventname].tsx index de363fd019..2c9f0f68e5 100644 --- a/packages/apps/explorer/src/pages/[networkSlug]/event/[eventname].tsx +++ b/packages/apps/explorer/src/pages/[networkSlug]/event/[eventname].tsx @@ -1,4 +1,4 @@ -import { FormatLink } from '@/components/CompactTable/utils/formatLink'; +import { FormatLinkWrapper } from '@/components/CompactTable/FormatLinkWrapper'; import { EventFilter } from '@/components/EventFilter/EventFilter'; import { LayoutAside } from '@/components/Layout/components/LayoutAside'; import { LayoutBody } from '@/components/Layout/components/LayoutBody'; @@ -44,7 +44,7 @@ const Height: React.FC = () => { label: 'RequestKey', key: 'node.requestKey', width: '40%', - render: FormatLink({ url: '/transaction/:value' }), + render: FormatLinkWrapper({ url: '/transaction/:value' }), }, { label: 'Parameters', diff --git a/packages/apps/explorer/src/pages/[networkSlug]/height/[height].tsx b/packages/apps/explorer/src/pages/[networkSlug]/height/[height].tsx index 89eb277ef5..4cbb9212ef 100644 --- a/packages/apps/explorer/src/pages/[networkSlug]/height/[height].tsx +++ b/packages/apps/explorer/src/pages/[networkSlug]/height/[height].tsx @@ -1,7 +1,7 @@ import type { BlocksFromHeightQuery } from '@/__generated__/sdk'; import { useBlocksFromHeightQuery } from '@/__generated__/sdk'; import { blockHeightLoading } from '@/components/BlockTable/loadingBlockHeightData'; -import { FormatLink } from '@/components/CompactTable/utils/formatLink'; +import { FormatLinkWrapper } from '@/components/CompactTable/FormatLinkWrapper'; import { LayoutBody } from '@/components/Layout/components/LayoutBody'; import { LayoutHeader } from '@/components/Layout/components/LayoutHeader'; import { Layout } from '@/components/Layout/Layout'; @@ -103,7 +103,7 @@ const Height: React.FC = () => { label: 'Hash', key: 'node.hash', width: '60%', - render: FormatLink({ url: '/block/:value' }), + render: FormatLinkWrapper({ url: '/block/:value' }), }, ]} data={innerData?.blocksFromHeight.edges ?? []} diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableDesktop/CompactTableDesktop.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableDesktop/CompactTableDesktop.tsx index 456b50f58b..91da507123 100644 --- a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableDesktop/CompactTableDesktop.tsx +++ b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableDesktop/CompactTableDesktop.tsx @@ -48,7 +48,7 @@ export const CompactTableDesktop: FC = ({ {data.map((item, idx) => ( - + {fields.map((field) => ( diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatLink.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatLink.tsx index 343b3c4cfa..989a8808ce 100644 --- a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatLink.tsx +++ b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatLink.tsx @@ -1,4 +1,6 @@ -import { MonoArrowOutward } from '@kadena/kode-icons/system'; +import { Link } from '@/components/Routing/Link'; +import { MonoArrowOutward } from '@kadena/kode-icons'; +import { Stack, Text } from '@kadena/kode-ui'; import type { FC } from 'react'; import React from 'react'; import { @@ -7,38 +9,35 @@ import { linkIconClass, linkWrapperClass, } from '../styles.css'; -import { Stack, Text } from './../../../components'; -export interface IProps { +interface IProps { value: string; } -export interface IOptions { +interface IOptions { url: string; - Wrapper?: React.ReactElement; } +const formatURL = (url: string, value: string): string => { + if (url.includes(':value')) { + return url.replace(/:value/g, value); + } + return url; +}; + export const FormatLink = ({ url }: IOptions): FC => { const Component: FC = ({ value }) => ( - - + + {value} - + + - - + + ); return Component; }; - -export const FormatJsonParse = (): FC => { - const Component: FC = ({ value }) => ( - - {!!value && value?.length > 0 ? JSON.parse(value) : value} - - ); - return Component; -}; From 3b6503cf0244508fc5112445f0417c3f7a057500 Mon Sep 17 00:00:00 2001 From: Steven Straatemans Date: Wed, 16 Oct 2024 11:04:09 +0200 Subject: [PATCH 09/11] fix types --- .../CompactTable/FormatLinkWrapper.tsx | 27 +++++------------ .../TableFormatters/FormatAccount.tsx | 7 ++--- .../TableFormatters/FormatAmount.tsx | 11 ++++--- .../TableFormatters/FormatDefault.tsx | 11 ++++--- .../TableFormatters/FormatJsonParse.tsx | 9 ++---- .../TableFormatters/FormatLink.tsx | 29 +++++++++---------- .../TableFormatters/FormatMultiStepTx.tsx | 9 ++---- .../TableFormatters/FormatStatus.tsx | 9 ++---- .../CompactTable/TableFormatters/index.tsx | 6 ++++ .../CompactTable/TableFormatters/types.ts | 7 +++++ packages/libs/kode-ui/src/patterns/index.ts | 8 +++-- 11 files changed, 59 insertions(+), 74 deletions(-) create mode 100644 packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/types.ts diff --git a/packages/apps/explorer/src/components/CompactTable/FormatLinkWrapper.tsx b/packages/apps/explorer/src/components/CompactTable/FormatLinkWrapper.tsx index 9540f16f1a..3eba80cdef 100644 --- a/packages/apps/explorer/src/components/CompactTable/FormatLinkWrapper.tsx +++ b/packages/apps/explorer/src/components/CompactTable/FormatLinkWrapper.tsx @@ -1,24 +1,9 @@ import { Link } from '@/components/Routing/Link'; -import { MonoArrowOutward } from '@kadena/kode-icons'; -import { Stack, Text } from '@kadena/kode-ui'; +import type { ICompactTableFormatterProps } from '@kadena/kode-ui/patterns'; +import { CompactTableFormatters } from '@kadena/kode-ui/patterns'; +import type { ICompactTableFormatterLinkProps } from '@kadena/kode-ui/src/patterns'; import type { FC } from 'react'; import React from 'react'; -import { - dataFieldClass, - linkClass, - linkIconClass, - linkWrapperClass, -} from '../styles.css'; - -import { CompactTableFormatters } from '@kadena/kode-ui/patterns'; - -interface IProps { - value: string; -} - -interface IOptions { - url: string; -} const formatURL = (url: string, value: string): string => { if (url.includes(':value')) { @@ -27,8 +12,10 @@ const formatURL = (url: string, value: string): string => { return url; }; -export const FormatLinkWrapper = ({ url }: IOptions): FC => { - const Component: FC = ({ value }) => ( +export const FormatLinkWrapper = ({ + url, +}: ICompactTableFormatterLinkProps): FC => { + const Component: FC = ({ value }) => ( {CompactTableFormatters.FormatLink({ url })({ value })} diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatAccount.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatAccount.tsx index 37ae9eddf8..3826c55085 100644 --- a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatAccount.tsx +++ b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatAccount.tsx @@ -1,11 +1,8 @@ import type { FC } from 'react'; import { maskValue } from './../../../components'; +import type { ICompactTableFormatterProps } from './types'; -export interface IProps { - value: string; -} - -export const FormatAccount: () => FC = +export const FormatAccount: () => FC = () => ({ value }) => value && maskValue(value); diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatAmount.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatAmount.tsx index fe734e86ec..e3f45de18f 100644 --- a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatAmount.tsx +++ b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatAmount.tsx @@ -1,11 +1,10 @@ import type { FC } from 'react'; import React from 'react'; +import type { ICompactTableFormatterProps } from './types'; -export interface IProps { - value: string; -} - -export const FormatAmount = (): FC => { - const Component: FC = ({ value }) => <>{value} KDA; +export const FormatAmount = (): FC => { + const Component: FC = ({ value }) => ( + <>{value} KDA + ); return Component; }; diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatDefault.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatDefault.tsx index b6eebebd42..fa30548389 100644 --- a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatDefault.tsx +++ b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatDefault.tsx @@ -1,11 +1,10 @@ import type { FC } from 'react'; import React from 'react'; +import type { ICompactTableFormatterProps } from './types'; -export interface IProps { - value: string; -} - -export const FormatDefault = (): FC => { - const Component: FC = ({ value }) => <>{value}; +export const FormatDefault = (): FC => { + const Component: FC = ({ value }) => ( + <>{value} + ); return Component; }; diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatJsonParse.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatJsonParse.tsx index bdfbfde011..6fa6dca60a 100644 --- a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatJsonParse.tsx +++ b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatJsonParse.tsx @@ -2,13 +2,10 @@ import type { FC } from 'react'; import React from 'react'; import { dataFieldClass } from '../styles.css'; import { Text } from './../../../components'; +import type { ICompactTableFormatterProps } from './types'; -export interface IProps { - value: string; -} - -export const FormatJsonParse = (): FC => { - const Component: FC = ({ value }) => ( +export const FormatJsonParse = (): FC => { + const Component: FC = ({ value }) => ( {!!value && value?.length > 0 ? JSON.parse(value) : value} diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatLink.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatLink.tsx index 989a8808ce..afb96cb23a 100644 --- a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatLink.tsx +++ b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatLink.tsx @@ -1,6 +1,4 @@ -import { Link } from '@/components/Routing/Link'; import { MonoArrowOutward } from '@kadena/kode-icons'; -import { Stack, Text } from '@kadena/kode-ui'; import type { FC } from 'react'; import React from 'react'; import { @@ -9,14 +7,11 @@ import { linkIconClass, linkWrapperClass, } from '../styles.css'; - -interface IProps { - value: string; -} - -interface IOptions { - url: string; -} +import { Stack, Text } from './../../../components'; +import type { + ICompactTableFormatterLinkProps, + ICompactTableFormatterProps, +} from './types'; const formatURL = (url: string, value: string): string => { if (url.includes(':value')) { @@ -25,17 +20,19 @@ const formatURL = (url: string, value: string): string => { return url; }; -export const FormatLink = ({ url }: IOptions): FC => { - const Component: FC = ({ value }) => ( +export const FormatLink = ({ + url, +}: ICompactTableFormatterLinkProps): FC => { + const Component: FC = ({ value }) => ( - + {value} - - + + - + ); diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatMultiStepTx.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatMultiStepTx.tsx index ded12b7dfb..0c3bdfee48 100644 --- a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatMultiStepTx.tsx +++ b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatMultiStepTx.tsx @@ -1,13 +1,10 @@ import { MonoAirlineStops } from '@kadena/kode-icons/system'; import type { FC } from 'react'; import React from 'react'; +import type { ICompactTableFormatterProps } from './types'; -export interface IProps { - value: string; -} - -export const FormatMultiStepTx = (): FC => { - const Component: FC = ({ value }) => { +export const FormatMultiStepTx = (): FC => { + const Component: FC = ({ value }) => { return value ? : undefined; }; return Component; diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatStatus.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatStatus.tsx index 9c63ad5959..9323640102 100644 --- a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatStatus.tsx +++ b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatStatus.tsx @@ -1,13 +1,10 @@ import { MonoCheck, MonoClear } from '@kadena/kode-icons/system'; import type { FC } from 'react'; import React from 'react'; +import type { ICompactTableFormatterProps } from './types'; -export interface IProps { - value: string; -} - -export const FormatStatus = (): FC => { - const Component: FC = ({ value }) => +export const FormatStatus = (): FC => { + const Component: FC = ({ value }) => value ? : ; return Component; }; diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/index.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/index.tsx index ef1304483c..cc04957507 100644 --- a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/index.tsx +++ b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/index.tsx @@ -5,6 +5,10 @@ import { FormatJsonParse } from './FormatJsonParse'; import { FormatLink } from './FormatLink'; import { FormatMultiStepTx } from './FormatMultiStepTx'; import { FormatStatus } from './FormatStatus'; +import type { + ICompactTableFormatterLinkProps, + ICompactTableFormatterProps, +} from './types'; export const CompactTableFormatters = { FormatAccount, @@ -15,3 +19,5 @@ export const CompactTableFormatters = { FormatJsonParse, FormatStatus, } as const; + +export { ICompactTableFormatterLinkProps, ICompactTableFormatterProps }; diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/types.ts b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/types.ts new file mode 100644 index 0000000000..695021af8c --- /dev/null +++ b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/types.ts @@ -0,0 +1,7 @@ +export interface ICompactTableFormatterProps { + value: string; +} + +export interface ICompactTableFormatterLinkProps { + url: string; +} diff --git a/packages/libs/kode-ui/src/patterns/index.ts b/packages/libs/kode-ui/src/patterns/index.ts index f1c1d5631f..598c88fc6f 100644 --- a/packages/libs/kode-ui/src/patterns/index.ts +++ b/packages/libs/kode-ui/src/patterns/index.ts @@ -10,7 +10,9 @@ export { CompactTable, type ICompactTableProps, } from './CompactTable/CompactTable'; - +export { + CompactTableFormatters, + type ICompactTableFormatterLinkProps, + type ICompactTableFormatterProps, +} from './CompactTable/TableFormatters'; export { usePagination } from './CompactTable/usePagination'; - -export { CompactTableFormatters } from './CompactTable/TableFormatters'; From c1d7bc1001ce9fc343e4ed9707226e47ad4cf4c9 Mon Sep 17 00:00:00 2001 From: Steven Straatemans Date: Wed, 16 Oct 2024 11:09:52 +0200 Subject: [PATCH 10/11] fix build --- .../src/components/CompactTable/FormatLinkWrapper.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/apps/explorer/src/components/CompactTable/FormatLinkWrapper.tsx b/packages/apps/explorer/src/components/CompactTable/FormatLinkWrapper.tsx index 3eba80cdef..b5def91160 100644 --- a/packages/apps/explorer/src/components/CompactTable/FormatLinkWrapper.tsx +++ b/packages/apps/explorer/src/components/CompactTable/FormatLinkWrapper.tsx @@ -1,7 +1,9 @@ import { Link } from '@/components/Routing/Link'; -import type { ICompactTableFormatterProps } from '@kadena/kode-ui/patterns'; +import type { + ICompactTableFormatterLinkProps, + ICompactTableFormatterProps, +} from '@kadena/kode-ui/patterns'; import { CompactTableFormatters } from '@kadena/kode-ui/patterns'; -import type { ICompactTableFormatterLinkProps } from '@kadena/kode-ui/src/patterns'; import type { FC } from 'react'; import React from 'react'; From f4832a8173d1f91b4d04d0a81d85ee65f763eecc Mon Sep 17 00:00:00 2001 From: Steven Straatemans Date: Wed, 16 Oct 2024 12:09:56 +0200 Subject: [PATCH 11/11] stories for all formatters --- .../CompactTable/CompactTable.stories.tsx | 230 +++++++++++++----- .../TableFormatters/FormatAmount.tsx | 7 +- 2 files changed, 174 insertions(+), 63 deletions(-) diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTable.stories.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTable.stories.tsx index 7253f9ccf7..7927202559 100644 --- a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTable.stories.tsx +++ b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTable.stories.tsx @@ -1,10 +1,10 @@ import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; import { onLayer2 } from '../../storyDecorators'; -import { Link, MediaContextProvider } from './../../components'; +import { MediaContextProvider } from './../../components'; import type { ICompactTableProps } from './CompactTable'; import { CompactTable } from './CompactTable'; -import { CompactTableFormatters } from './Formatters'; +import { CompactTableFormatters } from './TableFormatters'; const meta: Meta = { title: 'Patterns/CompactTable', @@ -25,6 +25,44 @@ const meta: Meta = { }, }; +const data = [ + { + node: { + status: 'success', + requestKey: 'he-man', + parameters: 'param1', + block: { + height: 10, + }, + balance: { + balance: '1093.33', + }, + }, + }, + { + node: { + status: 'success', + requestKey: 'masters of the universe', + parameters: 'param2', + block: { + height: 11, + }, + }, + }, + { + node: { + requestKey: 'skeletor', + parameters: 'param3', + block: { + height: 12, + }, + balance: { + balance: '45.2222', + }, + }, + }, +]; + export default meta; type Story = StoryObj; @@ -34,35 +72,6 @@ export const Primary: Story = { isLoading: false, }, render: ({ isLoading }) => { - const data = [ - { - node: { - requestKey: 'key1', - parameters: 'param1', - block: { - height: 10, - }, - }, - }, - { - node: { - requestKey: 'key2', - parameters: 'param2', - block: { - height: 11, - }, - }, - }, - { - node: { - requestKey: 'key3', - parameters: 'param3', - block: { - height: 12, - }, - }, - }, - ]; return ( { - const data = [ - { - node: { - requestKey: 'he-man', - parameters: 'param1', - block: { - height: 10, - }, - }, - }, - { - node: { - requestKey: 'masters of the universe', - parameters: 'param2', - block: { - height: 11, - }, - }, - }, - { - node: { - requestKey: 'skeletor', - parameters: 'param3', - block: { - height: 12, - }, - }, - }, - ]; return ( { + return ( + + + + ); + }, +}; + +export const FormatMultiStepTx: Story = { + name: 'FormatMultiStepTx', + args: { + isLoading: false, + }, + render: ({ isLoading }) => { + return ( + + + + ); + }, +}; + +export const FormatAmount: Story = { + name: 'FormatAmount', + args: { + isLoading: false, + }, + render: ({ isLoading }) => { + return ( + + + + ); + }, +}; diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatAmount.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatAmount.tsx index e3f45de18f..4255049ac5 100644 --- a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatAmount.tsx +++ b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatAmount.tsx @@ -3,8 +3,9 @@ import React from 'react'; import type { ICompactTableFormatterProps } from './types'; export const FormatAmount = (): FC => { - const Component: FC = ({ value }) => ( - <>{value} KDA - ); + const Component: FC = ({ value }) => { + if (!value) return null; + return <>{parseFloat(value).toLocaleString()} KDA; + }; return Component; };