From 23fa9df90345c6724aa6f9302a58518bf30eedd8 Mon Sep 17 00:00:00 2001 From: Baptiste Morelle Date: Wed, 18 Oct 2023 10:12:38 +0200 Subject: [PATCH] feat(slice-machine-ui): update List component --- .../CustomTypeBuilder/SliceZone/index.tsx | 120 +++++++++--------- .../CustomTypeBuilder/TabZone/index.tsx | 31 +++-- .../lib/builders/CustomTypeBuilder/index.tsx | 6 +- .../lib/builders/common/Zone/index.jsx | 30 +++-- .../src/components/List/List.css.ts | 65 ++++++++-- .../src/components/List/List.stories.tsx | 43 +++++-- .../src/components/List/List.tsx | 28 ++-- .../src/components/List/index.ts | 2 +- .../src/components/Window/Window.css.ts | 15 ++- .../CustomTypesBuilderPage.tsx | 2 +- .../SliceZoneBlankSlate.tsx | 2 +- 11 files changed, 212 insertions(+), 132 deletions(-) diff --git a/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/index.tsx b/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/index.tsx index a98200827a..18acd20b8e 100644 --- a/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/index.tsx +++ b/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/index.tsx @@ -1,6 +1,5 @@ import { Button, - Box, Switch, DropdownMenu, DropdownMenuTrigger, @@ -22,7 +21,7 @@ import type { SliceZoneSlice } from "@lib/models/common/CustomType/sliceZone"; import type { ComponentUI } from "@lib/models/common/ComponentUI"; import type { LibraryUI } from "@lib/models/common/LibraryUI"; import type { SlicesSM } from "@lib/models/common/Slices"; -import { List, ListHeader } from "@src/components/List"; +import { ListHeader } from "@src/components/List"; import { SliceZoneBlankSlate } from "@src/features/customTypes/customTypesBuilder/SliceZoneBlankSlate"; import { telemetry } from "@src/apiClient"; import { @@ -210,70 +209,69 @@ const SliceZone: React.FC = ({ }; return ( - + <> {query.newPageType === undefined ? ( - - - - - + + + + - + + } + onSelect={openCreateSliceModal} + description="Start from scratch." + > + Create new + + + {availableSlicesTemplates.length > 0 ? ( } - onSelect={openCreateSliceModal} - description="Start from scratch." + onSelect={openSlicesTemplatesModal} + startIcon={} + description="Select from premade examples." + shortcut={} > - Create new + Use template + ) : undefined} - {availableSlicesTemplates.length > 0 ? ( - } - description="Select from premade examples." - shortcut={} - > - Use template - - ) : undefined} - - {availableSlicesToAdd.length > 0 ? ( - } - description="Select from your own slices." - > - Select existing - - ) : undefined} - - - ) : undefined - } - toggle={ - customType.format !== "page" || tabId !== "Main" ? ( - { - if (checked) { - onCreateSliceZone(); - } else { - setIsDeleteSliceZoneModalOpen(true); - } - }} - /> - ) : undefined - } - > - Slice Zone - - + {availableSlicesToAdd.length > 0 ? ( + } + description="Select from your own slices." + > + Select existing + + ) : undefined} + + + ) : undefined + } + toggle={ + customType.format !== "page" || tabId !== "Main" ? ( + { + if (checked) { + onCreateSliceZone(); + } else { + setIsDeleteSliceZoneModalOpen(true); + } + }} + size="small" + /> + ) : undefined + } + > + Slice Zone + ) : undefined} {sliceZone ? ( slicesInSliceZone.length > 0 ? ( @@ -369,7 +367,7 @@ const SliceZone: React.FC = ({ onClose={closeCreateSliceModal} /> )} - + ); }; diff --git a/packages/slice-machine/lib/builders/CustomTypeBuilder/TabZone/index.tsx b/packages/slice-machine/lib/builders/CustomTypeBuilder/TabZone/index.tsx index eb170cd937..4de6060721 100644 --- a/packages/slice-machine/lib/builders/CustomTypeBuilder/TabZone/index.tsx +++ b/packages/slice-machine/lib/builders/CustomTypeBuilder/TabZone/index.tsx @@ -13,6 +13,7 @@ import type { } from "@lib/models/common/CustomType"; import type { SlicesSM } from "@lib/models/common/Slices"; import { ensureDnDDestination, ensureWidgetTypeExistence } from "@lib/utils"; +import { List } from "@src/components/List"; import useSliceMachineActions from "@src/modules/useSliceMachineActions"; import type { SliceMachineStoreType } from "@src/redux/type"; import { telemetry } from "@src/apiClient"; @@ -132,15 +133,15 @@ const TabZone: FC = ({ }; return ( - - - - - - } - > + + + + + } + > + {query.newPageType === undefined ? ( = ({ // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access `data${transformKeyAccessor(item.key)}` } - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-argument - renderFieldAccessor={(key) => `data${transformKeyAccessor(key)}`} + renderFieldAccessor={(key) => + // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-argument + `data${transformKeyAccessor(key)}` + } dataCy="ct-static-zone" isRepeatableCustomType={customType.repeatable} /> @@ -181,9 +184,9 @@ const TabZone: FC = ({ onCreateSliceZone={onCreateSliceZone} onDeleteSliceZone={onDeleteSliceZone} /> - - - + + + ); }; diff --git a/packages/slice-machine/lib/builders/CustomTypeBuilder/index.tsx b/packages/slice-machine/lib/builders/CustomTypeBuilder/index.tsx index 344ca12bc0..41e67c1630 100644 --- a/packages/slice-machine/lib/builders/CustomTypeBuilder/index.tsx +++ b/packages/slice-machine/lib/builders/CustomTypeBuilder/index.tsx @@ -42,11 +42,7 @@ export const CustomTypeBuilder: FC = (props) => { return ( <> - + {customType.format === "page" ? : undefined} {query.newPageType === "true" ? ( setNewFieldData(null); return ( - + <> {isCustomType ? ( 0 ? ( - + <> + + Show code snippets? + + - - + ) : undefined } > @@ -211,7 +213,7 @@ const Zone = ({ // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment widgetsArray={widgetsArrayWithCondUid} /> - + ); }; diff --git a/packages/slice-machine/src/components/List/List.css.ts b/packages/slice-machine/src/components/List/List.css.ts index 02f85e8a13..26f31ca4d2 100644 --- a/packages/slice-machine/src/components/List/List.css.ts +++ b/packages/slice-machine/src/components/List/List.css.ts @@ -1,28 +1,77 @@ import { colors, sprinkles, vars } from "@prismicio/editor-ui"; import { style } from "@vanilla-extract/css"; +import * as windowStyles from "../Window/Window.css"; + const flex = sprinkles({ all: "unset", display: "flex" }); -export const root = style([flex, sprinkles({ flexDirection: "column" })]); +const row = style([flex, sprinkles({ flexDirection: "row" })]); -export const header = style([ +export const root = style([ flex, + sprinkles({ + borderColor: colors.grey6, + borderRadius: 6, + borderStyle: "solid", + borderWidth: 1, + flexDirection: "column", + overflowX: "hidden", + }), + { + selectors: { + [`:is(${windowStyles.root}, ${windowStyles.tabsContent}) > &`]: { + borderRadius: vars.borderRadius[0], + borderStyle: vars.borderStyle.none, + }, + }, + }, +]); + +const child = style([ + row, sprinkles({ alignItems: "center", - backgroundColor: colors.grey2, borderBottomColor: colors.grey6, - borderBottomStyle: "solid", borderBottomWidth: 1, boxSizing: "border-box", - flexDirection: "row", - gap: 8, height: 48, - paddingLeft: 16, paddingRight: 8, }), + { ":last-child": { borderBottomColor: vars.color.transparent } }, +]); + +export const header = style([ + child, + sprinkles({ + backgroundColor: colors.grey2, + borderBottomStyle: "solid", + gap: 8, + paddingLeft: 16, + }), { selectors: { - [`${root}:last-child > &`]: { borderBottomColor: vars.color.transparent }, + [`${windowStyles.tabsContent} > ${root} > &:not(:first-child)`]: { + marginTop: vars.space[16], + }, }, }, ]); + +export const headerActions = style([ + row, + sprinkles({ + alignItems: "center", + flexGrow: 1, + gap: 8, + justifyContent: "end", + }), +]); + +export const item = style([ + child, + sprinkles({ + backgroundColor: colors.grey1, + borderBottomStyle: "dashed", + paddingLeft: 12, + }), +]); diff --git a/packages/slice-machine/src/components/List/List.stories.tsx b/packages/slice-machine/src/components/List/List.stories.tsx index 014d5b99e2..79cc81e196 100644 --- a/packages/slice-machine/src/components/List/List.stories.tsx +++ b/packages/slice-machine/src/components/List/List.stories.tsx @@ -1,7 +1,7 @@ -import { Button, Switch } from "@prismicio/editor-ui"; +import { Button, Switch, Text } from "@prismicio/editor-ui"; import type { Meta, StoryObj } from "@storybook/react"; -import { List, ListHeader } from "./List"; +import { List, ListHeader, ListItem } from "./List"; type Story = StoryObj; @@ -15,16 +15,35 @@ export default meta; export const Default = { args: { children: ( - - Add - - } - toggle={} - > - Zone - + <> + + + Show code snippets? + + + + + } + > + Fields + + + + + Add + + } + toggle={} + > + Zone + + ), }, } satisfies Story; diff --git a/packages/slice-machine/src/components/List/List.tsx b/packages/slice-machine/src/components/List/List.tsx index c6076424b9..10ff5a16bd 100644 --- a/packages/slice-machine/src/components/List/List.tsx +++ b/packages/slice-machine/src/components/List/List.tsx @@ -1,10 +1,14 @@ -import { Box, Text } from "@prismicio/editor-ui"; -import type { FC, PropsWithChildren, ReactNode } from "react"; +import { Text } from "@prismicio/editor-ui"; +import type { CSSProperties, FC, PropsWithChildren, ReactNode } from "react"; import * as styles from "./List.css"; -export const List: FC = (props) => ( -
+type ListProps = PropsWithChildren<{ + style?: CSSProperties; +}>; + +export const List: FC = (props) => ( +
); type ListHeaderProps = PropsWithChildren<{ @@ -18,13 +22,17 @@ export const ListHeader: FC = ({ toggle, ...otherProps }) => ( -
- +
+ {children} {toggle} - - {actions} - -
+ {Boolean(actions) ? ( +
{actions}
+ ) : null} +
+); + +export const ListItem: FC = (props) => ( +
); diff --git a/packages/slice-machine/src/components/List/index.ts b/packages/slice-machine/src/components/List/index.ts index 525c17d65b..04e6cad75a 100644 --- a/packages/slice-machine/src/components/List/index.ts +++ b/packages/slice-machine/src/components/List/index.ts @@ -1 +1 @@ -export { List, ListHeader } from "./List"; +export { List, ListHeader, ListItem } from "./List"; diff --git a/packages/slice-machine/src/components/Window/Window.css.ts b/packages/slice-machine/src/components/Window/Window.css.ts index bbef0d53ec..476b832647 100644 --- a/packages/slice-machine/src/components/Window/Window.css.ts +++ b/packages/slice-machine/src/components/Window/Window.css.ts @@ -18,6 +18,7 @@ export const root = style([ borderWidth: 1, overflowX: "hidden", }), + {}, ]); export const frame = style([ @@ -151,8 +152,12 @@ export const newTabButton = style([ }, ]); -export const tabsContent = sprinkles({ - backgroundColor: colors.grey2, - flexGrow: 1, - outline: "none", -}); +export const tabsContent = style([ + sprinkles({ + all: "unset", + backgroundColor: colors.grey2, + display: "grid", + flexGrow: 1, + }), + { selectors: { '&[data-state="inactive"]': { display: "none" } } }, +]); diff --git a/packages/slice-machine/src/features/customTypes/customTypesBuilder/CustomTypesBuilderPage.tsx b/packages/slice-machine/src/features/customTypes/customTypesBuilder/CustomTypesBuilderPage.tsx index 715dd76b81..527927127d 100644 --- a/packages/slice-machine/src/features/customTypes/customTypesBuilder/CustomTypesBuilderPage.tsx +++ b/packages/slice-machine/src/features/customTypes/customTypesBuilder/CustomTypesBuilderPage.tsx @@ -139,7 +139,7 @@ const CustomTypesBuilderPageWithProvider: React.FC< - + diff --git a/packages/slice-machine/src/features/customTypes/customTypesBuilder/SliceZoneBlankSlate.tsx b/packages/slice-machine/src/features/customTypes/customTypesBuilder/SliceZoneBlankSlate.tsx index 02f55911d8..28f7ef62b6 100644 --- a/packages/slice-machine/src/features/customTypes/customTypesBuilder/SliceZoneBlankSlate.tsx +++ b/packages/slice-machine/src/features/customTypes/customTypesBuilder/SliceZoneBlankSlate.tsx @@ -26,7 +26,7 @@ export const SliceZoneBlankSlate: FC = ({ isSlicesTemplatesSupported, }) => { return ( - +