From aa852b52e09481cceb1cb1c391bfc4e9cf511568 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Fri, 6 Sep 2024 11:03:54 +0200 Subject: [PATCH 01/13] wip: create Grid/Column components --- packages/ui/src/Grid/Grid.tsx | 42 +++++++++++++++++++++++++++-------- 1 file changed, 33 insertions(+), 9 deletions(-) diff --git a/packages/ui/src/Grid/Grid.tsx b/packages/ui/src/Grid/Grid.tsx index bf130d81d87..a61e960e1ff 100644 --- a/packages/ui/src/Grid/Grid.tsx +++ b/packages/ui/src/Grid/Grid.tsx @@ -1,13 +1,17 @@ import React from "react"; import { - Grid as RmwcGrid, - GridCell as RmwcGridCell, GridRow as RmwcGridInner, GridCellProps as RmwcGridCellProps, GridProps as RmwcGridProps } from "@rmwc/grid"; import { CSSProperties } from "react"; +import { + Grid as AdminUiGrid, + Column as AdminUiColumn, + ColumnProps as AdminUiColumnProps +} from "@webiny/admin-ui"; + export type CellProps = RmwcGridCellProps & { // One or more Cell components. children?: React.ReactNode; @@ -18,16 +22,19 @@ export type CellProps = RmwcGridCellProps & { style?: { [key: string]: any }; }; -export type GridProps = RmwcGridProps & { - className?: string; - style?: CSSProperties; -}; - /** * Cell must be direct children of Grid component. */ export const Cell = (props: CellProps) => { - return {props.children}; + const { children, style, className } = props; + return ( + + ); }; export type GridInnerProps = { @@ -46,9 +53,26 @@ export const GridInner = (props: GridInnerProps) => { GridInner.displayName = "GridInner"; +export type GridProps = RmwcGridProps & { + className?: string; + style?: CSSProperties; +}; + /** * Use Grid component to display a list of choices, once the handler is triggered. */ export const Grid = (props: GridProps) => { - return {props.children}; + const { children, style, className } = props; + + return ( + } + className={className} + style={style} + /> + ); + // return {props.children}; }; + +// TODO: responsive +// TODO: grid inner From 1c7bfa51de0bfb62c32a8688f359353afad0a72b Mon Sep 17 00:00:00 2001 From: adrians5j Date: Fri, 6 Sep 2024 11:05:04 +0200 Subject: [PATCH 02/13] fix: pass other props --- packages/ui/src/Elevation/Elevation.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/Elevation/Elevation.tsx b/packages/ui/src/Elevation/Elevation.tsx index 077e7a170e9..51f3bfda692 100644 --- a/packages/ui/src/Elevation/Elevation.tsx +++ b/packages/ui/src/Elevation/Elevation.tsx @@ -1,4 +1,5 @@ import React from "react"; +import cn from "classnames"; export type ElevationProps = { // Any element that needs to be highlighted. @@ -21,8 +22,12 @@ export type ElevationProps = { * @deprecated This component is deprecated and will be removed in future releases. * Please use the `Card` component from the `@webiny/admin-ui` package instead. */ -const Elevation = (props: ElevationProps) => { - return
{props.children}
; +const Elevation = ({ className, ...props }: ElevationProps) => { + return ( +
+ {props.children} +
+ ); }; Elevation.displayName = "Elevation"; From 9f0bb5529bde94cd444b2fe85e4bf4ec0af5fa96 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Fri, 6 Sep 2024 11:06:02 +0200 Subject: [PATCH 03/13] chore: remove redundant comments --- packages/admin-ui/src/Button/Button.stories.tsx | 5 ----- packages/admin-ui/src/Card/Card.stories.tsx | 3 --- packages/admin-ui/src/Icon/Icon.stories.tsx | 2 -- 3 files changed, 10 deletions(-) diff --git a/packages/admin-ui/src/Button/Button.stories.tsx b/packages/admin-ui/src/Button/Button.stories.tsx index ade1ace5fe6..bd889baf497 100644 --- a/packages/admin-ui/src/Button/Button.stories.tsx +++ b/packages/admin-ui/src/Button/Button.stories.tsx @@ -4,26 +4,21 @@ import { fn } from "@storybook/test"; import { ReactComponent as PencilIcon } from "@material-design-icons/svg/filled/edit.svg"; import { Button } from "./Button"; -// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta: Meta = { title: "Components/Button", component: Button, - // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs tags: ["autodocs"], - // More on argTypes: https://storybook.js.org/docs/api/argtypes argTypes: { variant: { control: "select", options: ["primary", "secondary", "outline", "ghost"] }, size: { control: "select", options: ["sm", "md", "lg", "xl"] }, text: { control: "text" } }, - // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args args: { onClick: fn() } }; export default meta; type Story = StoryObj; -// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args export const Primary: Story = { args: { variant: "primary", diff --git a/packages/admin-ui/src/Card/Card.stories.tsx b/packages/admin-ui/src/Card/Card.stories.tsx index 6fe48c8112b..160d1039bee 100644 --- a/packages/admin-ui/src/Card/Card.stories.tsx +++ b/packages/admin-ui/src/Card/Card.stories.tsx @@ -3,11 +3,9 @@ import type { Meta, StoryObj } from "@storybook/react"; import { Card, CardContent, CardFooter, CardHeader } from "./Card"; -// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta: Meta = { title: "Components/Card", component: Card, - // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs tags: ["autodocs"] }; @@ -21,7 +19,6 @@ const defaultContentProps = { footer: }; -// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args export const Default: Story = { args: { ...defaultContentProps, diff --git a/packages/admin-ui/src/Icon/Icon.stories.tsx b/packages/admin-ui/src/Icon/Icon.stories.tsx index d438f68b5d3..b69ebe07221 100644 --- a/packages/admin-ui/src/Icon/Icon.stories.tsx +++ b/packages/admin-ui/src/Icon/Icon.stories.tsx @@ -4,11 +4,9 @@ import { ReactComponent as XIcon } from "@material-design-icons/svg/filled/close import { fn } from "@storybook/test"; import { Icon } from "./Icon"; -// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta: Meta = { title: "Components/Icon", component: Icon, - // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs tags: ["autodocs"] }; From 6422e81187d096098221897831801cb09a8ffa8a Mon Sep 17 00:00:00 2001 From: adrians5j Date: Fri, 6 Sep 2024 11:06:17 +0200 Subject: [PATCH 04/13] wip: create Grid/Column components --- packages/admin-ui/src/Grid/Grid.stories.tsx | 34 ++++++ packages/admin-ui/src/Grid/Grid.tsx | 108 ++++++++++++++++++++ packages/admin-ui/src/Grid/index.ts | 1 + packages/admin-ui/src/index.ts | 1 + 4 files changed, 144 insertions(+) create mode 100644 packages/admin-ui/src/Grid/Grid.stories.tsx create mode 100644 packages/admin-ui/src/Grid/Grid.tsx create mode 100644 packages/admin-ui/src/Grid/index.ts diff --git a/packages/admin-ui/src/Grid/Grid.stories.tsx b/packages/admin-ui/src/Grid/Grid.stories.tsx new file mode 100644 index 00000000000..0d604b9f662 --- /dev/null +++ b/packages/admin-ui/src/Grid/Grid.stories.tsx @@ -0,0 +1,34 @@ +import React from "react"; +import type { Meta, StoryObj } from "@storybook/react"; + +import { Grid, Column } from "./Grid"; + +const meta: Meta = { + title: "Components/Grid", + component: Grid, + tags: ["autodocs"] +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + gap: 4, + content: [ + Column 1} />, + Column 2} />, + Column 3} />, + Column 4} />, + Column 5} />, + Column 6} />, + Column 7} />, + Column 8} />, + Column 9} />, + Column 10} />, + Column 11} />, + Column 12} /> + ] + } +}; diff --git a/packages/admin-ui/src/Grid/Grid.tsx b/packages/admin-ui/src/Grid/Grid.tsx new file mode 100644 index 00000000000..fdb58518386 --- /dev/null +++ b/packages/admin-ui/src/Grid/Grid.tsx @@ -0,0 +1,108 @@ +import React from "react"; +import { makeDecoratable } from "@webiny/react-composition"; +import { cva, type VariantProps } from "class-variance-authority"; +import { cn } from "~/utils"; + +const columnVariants = cva("", { + variants: { + span: { + auto: "col-auto", + 1: "col-span-1", + 2: "col-span-2", + 3: "col-span-3", + 4: "col-span-4", + 5: "col-span-5", + 6: "col-span-6", + 7: "col-span-7", + 8: "col-span-8", + 9: "col-span-9", + 10: "col-span-10", + 11: "col-span-11", + 12: "col-span-12" + } + }, + defaultVariants: { + span: "auto" + } +}); + +interface ColumnProps + extends Omit, "content">, + VariantProps { + content: React.ReactNode; +} + +const ColumnBase = React.forwardRef( + ({ span, content, className, ...props }, ref) => { + return ( +
+ {content} +
+ ); + } +); + +ColumnBase.displayName = "Column"; + +const Column = makeDecoratable("Column", ColumnBase); + +const gridVariants = cva("grid", { + variants: { + columns: { + 1: "grid-cols-1", + 2: "grid-cols-2", + 3: "grid-cols-3", + 4: "grid-cols-4", + 5: "grid-cols-5", + 6: "grid-cols-6", + 7: "grid-cols-7", + 8: "grid-cols-8", + 9: "grid-cols-9", + 10: "grid-cols-10", + 11: "grid-cols-11", + 12: "grid-cols-12" + }, + gap: { + 1: "gap-1", + 2: "gap-2", + 3: "gap-3", + 4: "gap-4", + 5: "gap-5", + 6: "gap-6", + 7: "gap-7", + 8: "gap-8", + 9: "gap-9", + 10: "gap-10", + 11: "gap-11", + 12: "gap-12" + } + }, + defaultVariants: { + columns: 12, + gap: 4 + } +}); + +interface GridProps + extends Omit, "content">, + VariantProps { + content: + | React.ReactElement + | Array>; +} + +const GridBase = React.forwardRef( + ({ columns, gap, content, className, ...props }, ref) => { + return ( +
+ {content} +
+ ); + } +); + +GridBase.displayName = "Grid"; + +const Grid = makeDecoratable("Grid", GridBase); + +export { Grid, Column, type GridProps, type ColumnProps }; diff --git a/packages/admin-ui/src/Grid/index.ts b/packages/admin-ui/src/Grid/index.ts new file mode 100644 index 00000000000..f2b81475d2c --- /dev/null +++ b/packages/admin-ui/src/Grid/index.ts @@ -0,0 +1 @@ +export * from "./Grid"; diff --git a/packages/admin-ui/src/index.ts b/packages/admin-ui/src/index.ts index 6d49a83aba6..a6dc7597c69 100644 --- a/packages/admin-ui/src/index.ts +++ b/packages/admin-ui/src/index.ts @@ -1,5 +1,6 @@ export * from "./Button"; export * from "./Card"; +export * from "./Grid"; export * from "./Heading"; export * from "./Label"; export * from "./Progress"; From 1153b6e9156c410d267ab09242316a70144e3c2a Mon Sep 17 00:00:00 2001 From: adrians5j Date: Fri, 6 Sep 2024 11:07:27 +0200 Subject: [PATCH 05/13] wip: remove `value` definition --- packages/ui/src/Switch/Switch.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/ui/src/Switch/Switch.tsx b/packages/ui/src/Switch/Switch.tsx index 6794683c35a..730750732de 100644 --- a/packages/ui/src/Switch/Switch.tsx +++ b/packages/ui/src/Switch/Switch.tsx @@ -13,9 +13,6 @@ type Props = { /** Sets the control to checked (on) or unchecked (off). */ checked?: boolean; - /** The value of the control. Can be a string, number, or an array of strings. */ - value?: string | number | string[]; - /** A label displayed alongside the control. Can be any React node. */ label?: React.ReactNode; From a89c274ff65cee2af4f888129f82f117a3a886eb Mon Sep 17 00:00:00 2001 From: adrians5j Date: Fri, 6 Sep 2024 15:18:31 +0200 Subject: [PATCH 06/13] wip: create Grid/Column components --- packages/admin-ui/src/Grid/Grid.tsx | 9 +++++++-- packages/ui/src/Grid/Grid.tsx | 25 +++++++++++++------------ 2 files changed, 20 insertions(+), 14 deletions(-) diff --git a/packages/admin-ui/src/Grid/Grid.tsx b/packages/admin-ui/src/Grid/Grid.tsx index fdb58518386..98e3eb35203 100644 --- a/packages/admin-ui/src/Grid/Grid.tsx +++ b/packages/admin-ui/src/Grid/Grid.tsx @@ -19,6 +19,11 @@ const columnVariants = cva("", { 10: "col-span-10", 11: "col-span-11", 12: "col-span-12" + }, + align: { + top: "self-start", + middle: "self-center", + bottom: "self-end" } }, defaultVariants: { @@ -33,9 +38,9 @@ interface ColumnProps } const ColumnBase = React.forwardRef( - ({ span, content, className, ...props }, ref) => { + ({ span, align, content, className, ...props }, ref) => { return ( -
+
{content}
); diff --git a/packages/ui/src/Grid/Grid.tsx b/packages/ui/src/Grid/Grid.tsx index a61e960e1ff..337cf4f8489 100644 --- a/packages/ui/src/Grid/Grid.tsx +++ b/packages/ui/src/Grid/Grid.tsx @@ -1,9 +1,6 @@ import React from "react"; -import { - GridRow as RmwcGridInner, - GridCellProps as RmwcGridCellProps, - GridProps as RmwcGridProps -} from "@rmwc/grid"; +import cn from "classnames"; +import { GridCellProps as RmwcGridCellProps, GridProps as RmwcGridProps } from "@rmwc/grid"; import { CSSProperties } from "react"; import { @@ -26,13 +23,14 @@ export type CellProps = RmwcGridCellProps & { * Cell must be direct children of Grid component. */ export const Cell = (props: CellProps) => { - const { children, style, className } = props; + const { children, style, className, align } = props; return ( ); }; @@ -47,8 +45,15 @@ export type GridInnerProps = { className?: string; }; -export const GridInner = (props: GridInnerProps) => { - return {props.children}; +export const GridInner = ({ className, ...props }: GridInnerProps) => { + return ( +
+ {props.children} +
+ ); }; GridInner.displayName = "GridInner"; @@ -71,8 +76,4 @@ export const Grid = (props: GridProps) => { style={style} /> ); - // return {props.children}; }; - -// TODO: responsive -// TODO: grid inner From 89a585c5ac9bc6f65cc358f948b9daa8c5fd1cf7 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Fri, 6 Sep 2024 18:05:13 +0200 Subject: [PATCH 07/13] wip: create Grid/Column components --- packages/admin-ui/src/Grid/Grid.stories.tsx | 50 ++++++++++++++------- packages/admin-ui/src/Grid/Grid.tsx | 24 +++++----- packages/ui/src/Grid/Grid.tsx | 21 ++++----- 3 files changed, 56 insertions(+), 39 deletions(-) diff --git a/packages/admin-ui/src/Grid/Grid.stories.tsx b/packages/admin-ui/src/Grid/Grid.stories.tsx index 0d604b9f662..f0ba6e622f6 100644 --- a/packages/admin-ui/src/Grid/Grid.stories.tsx +++ b/packages/admin-ui/src/Grid/Grid.stories.tsx @@ -1,7 +1,7 @@ import React from "react"; import type { Meta, StoryObj } from "@storybook/react"; -import { Grid, Column } from "./Grid"; +import { Grid } from "./Grid"; const meta: Meta = { title: "Components/Grid", @@ -15,20 +15,38 @@ type Story = StoryObj; export const Default: Story = { args: { - gap: 4, - content: [ - Column 1} />, - Column 2} />, - Column 3} />, - Column 4} />, - Column 5} />, - Column 6} />, - Column 7} />, - Column 8} />, - Column 9} />, - Column 10} />, - Column 11} />, - Column 12} /> - ] + gap: 2, + children: ( + <> + Column 1 + + Column 2 with span set to 3 + + Column 3 + Column 4 + Column 5 + Column 6 + + Column 7 with span set to 2 + + Column 8 + Column 9 + + ) + } +}; + +export const DifferentNumberOfColumns: Story = { + args: { + columns: 4, + gap: 2, + children: ( + <> + Column 1 + Column 2 + Column 3 + Column 4 + + ) } }; diff --git a/packages/admin-ui/src/Grid/Grid.tsx b/packages/admin-ui/src/Grid/Grid.tsx index 98e3eb35203..28705eb1bd3 100644 --- a/packages/admin-ui/src/Grid/Grid.tsx +++ b/packages/admin-ui/src/Grid/Grid.tsx @@ -32,16 +32,16 @@ const columnVariants = cva("", { }); interface ColumnProps - extends Omit, "content">, + extends React.HTMLAttributes, VariantProps { - content: React.ReactNode; + children: React.ReactNode; } const ColumnBase = React.forwardRef( - ({ span, align, content, className, ...props }, ref) => { + ({ span, align, children, className, ...props }, ref) => { return (
- {content} + {children}
); } @@ -89,18 +89,18 @@ const gridVariants = cva("grid", { }); interface GridProps - extends Omit, "content">, + extends React.HTMLAttributes, VariantProps { - content: + children: | React.ReactElement | Array>; } const GridBase = React.forwardRef( - ({ columns, gap, content, className, ...props }, ref) => { + ({ columns, gap, children, className, ...props }, ref) => { return (
- {content} + {children}
); } @@ -108,6 +108,10 @@ const GridBase = React.forwardRef( GridBase.displayName = "Grid"; -const Grid = makeDecoratable("Grid", GridBase); +const DecoratableGrid = makeDecoratable("Grid", GridBase); -export { Grid, Column, type GridProps, type ColumnProps }; +const Grid: typeof DecoratableGrid & { Column: typeof Column } = Object.assign(DecoratableGrid, { + Column +}); + +export { Grid, type GridProps, type ColumnProps }; diff --git a/packages/ui/src/Grid/Grid.tsx b/packages/ui/src/Grid/Grid.tsx index 337cf4f8489..c2bb18da4f9 100644 --- a/packages/ui/src/Grid/Grid.tsx +++ b/packages/ui/src/Grid/Grid.tsx @@ -3,11 +3,7 @@ import cn from "classnames"; import { GridCellProps as RmwcGridCellProps, GridProps as RmwcGridProps } from "@rmwc/grid"; import { CSSProperties } from "react"; -import { - Grid as AdminUiGrid, - Column as AdminUiColumn, - ColumnProps as AdminUiColumnProps -} from "@webiny/admin-ui"; +import { Grid as AdminUiGrid, ColumnProps as AdminUiColumnProps } from "@webiny/admin-ui"; export type CellProps = RmwcGridCellProps & { // One or more Cell components. @@ -25,13 +21,14 @@ export type CellProps = RmwcGridCellProps & { export const Cell = (props: CellProps) => { const { children, style, className, align } = props; return ( - + > + {children} + ); }; @@ -70,10 +67,8 @@ export const Grid = (props: GridProps) => { const { children, style, className } = props; return ( - } - className={className} - style={style} - /> + + {children as React.ReactElement} + ); }; From 6f0b1957af5362e4c7ceddef329cdbd3316e4275 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Mon, 9 Sep 2024 16:14:43 +0200 Subject: [PATCH 08/13] wip: use `withStaticProps` --- packages/admin-ui/src/Grid/Grid.tsx | 6 ++---- packages/admin-ui/src/utils.ts | 8 ++++++++ 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/admin-ui/src/Grid/Grid.tsx b/packages/admin-ui/src/Grid/Grid.tsx index 28705eb1bd3..0e349af1a90 100644 --- a/packages/admin-ui/src/Grid/Grid.tsx +++ b/packages/admin-ui/src/Grid/Grid.tsx @@ -1,7 +1,7 @@ import React from "react"; import { makeDecoratable } from "@webiny/react-composition"; import { cva, type VariantProps } from "class-variance-authority"; -import { cn } from "~/utils"; +import { cn, withStaticProps } from "~/utils"; const columnVariants = cva("", { variants: { @@ -110,8 +110,6 @@ GridBase.displayName = "Grid"; const DecoratableGrid = makeDecoratable("Grid", GridBase); -const Grid: typeof DecoratableGrid & { Column: typeof Column } = Object.assign(DecoratableGrid, { - Column -}); +const Grid = withStaticProps(DecoratableGrid, { Column }); export { Grid, type GridProps, type ColumnProps }; diff --git a/packages/admin-ui/src/utils.ts b/packages/admin-ui/src/utils.ts index 35edc5647fc..2676e7f092d 100644 --- a/packages/admin-ui/src/utils.ts +++ b/packages/admin-ui/src/utils.ts @@ -1,3 +1,4 @@ +import React from "react"; import { clsx, type ClassValue } from "clsx"; import { generateId as baseGenerateId } from "@webiny/utils/generateId"; import { twMerge } from "tailwind-merge"; @@ -12,3 +13,10 @@ export const generateId = (initialId?: string) => { } return "wby-" + baseGenerateId(4); }; + +export const withStaticProps = , TProps>( + component: TComponent, + props: TProps +) => { + return Object.assign(component, props) as TComponent & TProps; +}; From 22de27c9eb4eed4a29b3e1fd7589516564f3957b Mon Sep 17 00:00:00 2001 From: adrians5j Date: Wed, 13 Nov 2024 09:08:27 +0100 Subject: [PATCH 09/13] wip --- packages/admin-ui/src/Grid/Grid.stories.tsx | 79 +++++++++++++++------ packages/admin-ui/src/Grid/Grid.tsx | 74 +++++++++---------- packages/admin-ui/src/Heading/Heading.tsx | 2 +- packages/admin-ui/src/Text/Text.tsx | 2 +- packages/ui/src/Grid/Grid.tsx | 6 +- 5 files changed, 98 insertions(+), 65 deletions(-) diff --git a/packages/admin-ui/src/Grid/Grid.stories.tsx b/packages/admin-ui/src/Grid/Grid.stories.tsx index f0ba6e622f6..6f9466a68b0 100644 --- a/packages/admin-ui/src/Grid/Grid.stories.tsx +++ b/packages/admin-ui/src/Grid/Grid.stories.tsx @@ -13,39 +13,76 @@ export default meta; type Story = StoryObj; +const StyledCol = ({ ...props }) => ( + +); + export const Default: Story = { args: { - gap: 2, + className: "bg-neutral-light p-4", children: ( <> - Column 1 - - Column 2 with span set to 3 - - Column 3 - Column 4 - Column 5 - Column 6 - - Column 7 with span set to 2 - - Column 8 - Column 9 + Col 1 + + Col 2 (span: 3) + + Col 3 + Col 4 + Col 5 + Col 6 + + Col 7 (span: 2) + + Col 8 + Col 9 ) } }; -export const DifferentNumberOfColumns: Story = { +export const SpaciousGap: Story = { args: { - columns: 4, - gap: 2, + ...Default.args, + gap: "spacious" + } +}; + +export const WithOffset: Story = { + parameters: { + layout: "padded" + }, + decorators: [ + Story => ( +
+ +
+ ) + ], + args: { + ...Default.args, children: ( <> - Column 1 - Column 2 - Column 3 - Column 4 + {/* Row 1 */} + + Col (span: 8, offset: 2) + + + + {/* Row 2 */} + + Col (span: 8, offset: 4) + + + {/* Row 3 */} + + Col (span: 10, offset: 1) + + + + {/* Row 4 */} + + Col (span: 12) + ) } diff --git a/packages/admin-ui/src/Grid/Grid.tsx b/packages/admin-ui/src/Grid/Grid.tsx index 0e349af1a90..10dc14cd919 100644 --- a/packages/admin-ui/src/Grid/Grid.tsx +++ b/packages/admin-ui/src/Grid/Grid.tsx @@ -20,6 +20,19 @@ const columnVariants = cva("", { 11: "col-span-11", 12: "col-span-12" }, + offset: { + 1: "col-start-2", + 2: "col-start-3", + 3: "col-start-4", + 4: "col-start-5", + 5: "col-start-6", + 6: "col-start-7", + 7: "col-start-8", + 8: "col-start-9", + 9: "col-start-10", + 10: "col-start-11", + 11: "col-start-12" + }, align: { top: "self-start", middle: "self-center", @@ -34,57 +47,36 @@ const columnVariants = cva("", { interface ColumnProps extends React.HTMLAttributes, VariantProps { - children: React.ReactNode; + children?: React.ReactNode; } -const ColumnBase = React.forwardRef( - ({ span, align, children, className, ...props }, ref) => { +const ColBase = React.forwardRef( + ({ span, align, children, className, offset, ...props }, ref) => { return ( -
+
{children}
); } ); -ColumnBase.displayName = "Column"; +ColBase.displayName = "Col"; -const Column = makeDecoratable("Column", ColumnBase); +const Col = makeDecoratable("Col", ColBase); const gridVariants = cva("grid", { variants: { - columns: { - 1: "grid-cols-1", - 2: "grid-cols-2", - 3: "grid-cols-3", - 4: "grid-cols-4", - 5: "grid-cols-5", - 6: "grid-cols-6", - 7: "grid-cols-7", - 8: "grid-cols-8", - 9: "grid-cols-9", - 10: "grid-cols-10", - 11: "grid-cols-11", - 12: "grid-cols-12" - }, gap: { - 1: "gap-1", - 2: "gap-2", - 3: "gap-3", - 4: "gap-4", - 5: "gap-5", - 6: "gap-6", - 7: "gap-7", - 8: "gap-8", - 9: "gap-9", - 10: "gap-10", - 11: "gap-11", - 12: "gap-12" + comfortable: "px-xl gap-lg", + spacious: "px-xxl gap-xl" } }, defaultVariants: { - columns: 12, - gap: 4 + gap: "comfortable" } }); @@ -92,14 +84,18 @@ interface GridProps extends React.HTMLAttributes, VariantProps { children: - | React.ReactElement - | Array>; + | React.ReactElement + | Array>; } const GridBase = React.forwardRef( - ({ columns, gap, children, className, ...props }, ref) => { + ({ gap, children, className, ...props }, ref) => { return ( -
+
{children}
); @@ -110,6 +106,6 @@ GridBase.displayName = "Grid"; const DecoratableGrid = makeDecoratable("Grid", GridBase); -const Grid = withStaticProps(DecoratableGrid, { Column }); +const Grid = withStaticProps(DecoratableGrid, { Col }); export { Grid, type GridProps, type ColumnProps }; diff --git a/packages/admin-ui/src/Heading/Heading.tsx b/packages/admin-ui/src/Heading/Heading.tsx index 2dae7b34e68..44196de36f8 100644 --- a/packages/admin-ui/src/Heading/Heading.tsx +++ b/packages/admin-ui/src/Heading/Heading.tsx @@ -16,7 +16,7 @@ const TAG_MAP: Record = { 6: "h6" }; -const headingVariants = cva("font-sans font-semibold", { +const headingVariants = cva("font-sans", { variants: { level: { 1: "text-h1", diff --git a/packages/admin-ui/src/Text/Text.tsx b/packages/admin-ui/src/Text/Text.tsx index cb59ddf49db..76fb0c7d4b3 100644 --- a/packages/admin-ui/src/Text/Text.tsx +++ b/packages/admin-ui/src/Text/Text.tsx @@ -5,7 +5,7 @@ import { cn } from "~/utils"; type TextTags = "span" | "div"; -const textVariants = cva("font-sans font-normal", { +const textVariants = cva("font-sans", { variants: { size: { xl: "text-xl", diff --git a/packages/ui/src/Grid/Grid.tsx b/packages/ui/src/Grid/Grid.tsx index c2bb18da4f9..ee8240c0663 100644 --- a/packages/ui/src/Grid/Grid.tsx +++ b/packages/ui/src/Grid/Grid.tsx @@ -21,14 +21,14 @@ export type CellProps = RmwcGridCellProps & { export const Cell = (props: CellProps) => { const { children, style, className, align } = props; return ( - {children} - + ); }; @@ -68,7 +68,7 @@ export const Grid = (props: GridProps) => { return ( - {children as React.ReactElement} + {children as React.ReactElement} ); }; From e97acfd94022b9fd33903b4332c91ef61131bf08 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Tue, 19 Nov 2024 06:27:40 +0100 Subject: [PATCH 10/13] wip --- packages/admin-ui/src/Grid/Grid.stories.tsx | 46 ++++++++++----------- packages/admin-ui/src/Grid/Grid.tsx | 12 +++--- 2 files changed, 29 insertions(+), 29 deletions(-) diff --git a/packages/admin-ui/src/Grid/Grid.stories.tsx b/packages/admin-ui/src/Grid/Grid.stories.tsx index 6f9466a68b0..706fc779c39 100644 --- a/packages/admin-ui/src/Grid/Grid.stories.tsx +++ b/packages/admin-ui/src/Grid/Grid.stories.tsx @@ -13,8 +13,8 @@ export default meta; type Story = StoryObj; -const StyledCol = ({ ...props }) => ( - +const StyledColumn = ({ ...props }) => ( + ); export const Default: Story = { @@ -22,19 +22,19 @@ export const Default: Story = { className: "bg-neutral-light p-4", children: ( <> - Col 1 - + Col 1 + Col 2 (span: 3) - - Col 3 - Col 4 - Col 5 - Col 6 - + + Col 3 + Col 4 + Col 5 + Col 6 + Col 7 (span: 2) - - Col 8 - Col 9 + + Col 8 + Col 9 ) } @@ -63,26 +63,26 @@ export const WithOffset: Story = { children: ( <> {/* Row 1 */} - + Col (span: 8, offset: 2) - - + + {/* Row 2 */} - + Col (span: 8, offset: 4) - + {/* Row 3 */} - + Col (span: 10, offset: 1) - - + + {/* Row 4 */} - + Col (span: 12) - + ) } diff --git a/packages/admin-ui/src/Grid/Grid.tsx b/packages/admin-ui/src/Grid/Grid.tsx index 10dc14cd919..78a3ee02b25 100644 --- a/packages/admin-ui/src/Grid/Grid.tsx +++ b/packages/admin-ui/src/Grid/Grid.tsx @@ -50,7 +50,7 @@ interface ColumnProps children?: React.ReactNode; } -const ColBase = React.forwardRef( +const ColumnBase = React.forwardRef( ({ span, align, children, className, offset, ...props }, ref) => { return (
( } ); -ColBase.displayName = "Col"; +ColumnBase.displayName = "Col"; -const Col = makeDecoratable("Col", ColBase); +const Column = makeDecoratable("Col", ColumnBase); const gridVariants = cva("grid", { variants: { @@ -84,8 +84,8 @@ interface GridProps extends React.HTMLAttributes, VariantProps { children: - | React.ReactElement - | Array>; + | React.ReactElement + | Array>; } const GridBase = React.forwardRef( @@ -106,6 +106,6 @@ GridBase.displayName = "Grid"; const DecoratableGrid = makeDecoratable("Grid", GridBase); -const Grid = withStaticProps(DecoratableGrid, { Col }); +const Grid = withStaticProps(DecoratableGrid, { Column }); export { Grid, type GridProps, type ColumnProps }; From 7dc72a58431ab610ffa9ea66bcfbbd5cf72fbb03 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Tue, 19 Nov 2024 06:50:06 +0100 Subject: [PATCH 11/13] wip --- packages/admin-ui/src/Grid/Grid.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/admin-ui/src/Grid/Grid.tsx b/packages/admin-ui/src/Grid/Grid.tsx index 78a3ee02b25..c06af6be9b9 100644 --- a/packages/admin-ui/src/Grid/Grid.tsx +++ b/packages/admin-ui/src/Grid/Grid.tsx @@ -71,8 +71,8 @@ const Column = makeDecoratable("Col", ColumnBase); const gridVariants = cva("grid", { variants: { gap: { - comfortable: "px-xl gap-lg", - spacious: "px-xxl gap-xl" + comfortable: "gap-lg", + spacious: "gap-xl" } }, defaultVariants: { From e47a28444f7c504cab1bdc20916bdf62e0e52d83 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Tue, 19 Nov 2024 09:00:34 +0100 Subject: [PATCH 12/13] wip --- packages/admin-ui/src/Grid/Grid.tsx | 4 ++-- packages/ui/src/Grid/Grid.tsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/admin-ui/src/Grid/Grid.tsx b/packages/admin-ui/src/Grid/Grid.tsx index c06af6be9b9..9a48a519771 100644 --- a/packages/admin-ui/src/Grid/Grid.tsx +++ b/packages/admin-ui/src/Grid/Grid.tsx @@ -64,9 +64,9 @@ const ColumnBase = React.forwardRef( } ); -ColumnBase.displayName = "Col"; +ColumnBase.displayName = "Column"; -const Column = makeDecoratable("Col", ColumnBase); +const Column = makeDecoratable("Column", ColumnBase); const gridVariants = cva("grid", { variants: { diff --git a/packages/ui/src/Grid/Grid.tsx b/packages/ui/src/Grid/Grid.tsx index ee8240c0663..c2bb18da4f9 100644 --- a/packages/ui/src/Grid/Grid.tsx +++ b/packages/ui/src/Grid/Grid.tsx @@ -21,14 +21,14 @@ export type CellProps = RmwcGridCellProps & { export const Cell = (props: CellProps) => { const { children, style, className, align } = props; return ( - {children} - + ); }; @@ -68,7 +68,7 @@ export const Grid = (props: GridProps) => { return ( - {children as React.ReactElement} + {children as React.ReactElement} ); }; From cc947514d427c0848bff13f3ca4321590ed96fdc Mon Sep 17 00:00:00 2001 From: adrians5j Date: Tue, 19 Nov 2024 12:19:06 +0100 Subject: [PATCH 13/13] wip --- yarn.lock | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/yarn.lock b/yarn.lock index 95cf46c1abc..68c4cb20fe0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2414,20 +2414,7 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:^7.23.0": - version: 7.26.2 - resolution: "@babel/generator@npm:7.26.2" - dependencies: - "@babel/parser": ^7.26.2 - "@babel/types": ^7.26.0 - "@jridgewell/gen-mapping": ^0.3.5 - "@jridgewell/trace-mapping": ^0.3.25 - jsesc: ^3.0.2 - checksum: 6ff850b7d6082619f8c2f518d993cf7254cfbaa20b026282cbef5c9b2197686d076a432b18e36c4d1a42721c016df4f77a8f62c67600775d9683621d534b91b4 - languageName: node - linkType: hard - -"@babel/generator@npm:^7.25.9, @babel/generator@npm:^7.26.0": +"@babel/generator@npm:^7.23.0, @babel/generator@npm:^7.25.9, @babel/generator@npm:^7.26.0": version: 7.26.2 resolution: "@babel/generator@npm:7.26.2" dependencies: