refactor: use preset components in block library

Author: mu29

packages/react/src/editor/BlockGroup/BlockGroup.module.css

@@ -1,57 +1,24 @@
-.BlockGroup {
-  display: flex;
-  flex-direction: column;
-}
-
-.BlockGroup-Category {
-  margin: 0;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  border-top: 1px solid var(--composify-palette-outline);
-  border-bottom: 1px solid var(--composify-palette-outline);
-  background-color: var(--composify-palette-surface-container);
-  color: var(--composify-palette-on-surface);
-}
-
-.BlockGroup-BlockList {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 0.25rem;
-  padding: 0.5rem;
-}
-
-.BlockGroup-BlockItem {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.375rem;
-  border-radius: 0.25rem;
-  padding: 0.25rem;
+.item {
+  gap: 6px;
+  border-radius: 4px;
+  padding: 4px;
   overflow: hidden;
 }
 
-.BlockGroup-BlockItemPreview {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.preview {
+  overflow: hidden;
   border-radius: 0.25rem;
   border: 1px solid var(--composify-palette-outline);
-  background-color: var(--composify-palette-surface-container-low);
-  overflow: hidden;
-  width: 7.75rem;
-  height: 7.75rem;
+  transition: border 0.15s;
 }
 
-.BlockGroup-BlockItemPreview:hover {
+.preview:hover {
   border: 1px solid var(--composify-palette-primary);
 }
 
-.BlockGroup-BlockName {
+.name {
   align-self: stretch;
-  margin: 0 0.1875rem;
-  font-size: 0.75rem;
-  color: var(--composify-palette-on-surface);
+  margin: 0 3px;
   overflow: hidden;
   text-overflow: ellipsis;
 }

packages/react/src/editor/BlockGroup/BlockGroup.tsx

@@ -1,23 +1,29 @@
 import type { FC, ReactNode } from 'react';
 import toJsxString from 'react-element-to-jsx-string';
+import { Grid, Separator, Text, VStack } from '../../preset';
 import { type Block, type Node, Parser, Renderer } from '../../renderer';
-import { getClassNameFactory } from '../../utils';
+import { createVariants } from '../../utils';
 import { TargetType } from '../Constants';
 import { ContentScaler } from '../ContentScaler';
 import { Draggable } from '../Draggable';
 import styles from './BlockGroup.module.css';
 
-const getClassName = getClassNameFactory('BlockGroup', styles);
+const variants = createVariants(styles);
 
 type Props = {
   category: string;
   blocks: Block[];
 };
 
 export const BlockGroup: FC<Props> = ({ category, blocks }) => (
-  <div className={getClassName()}>
-    <h4 className={getClassName('Category')}>{category}</h4>
-    <div className={getClassName('BlockList')}>
+  <VStack>
+    <VStack padding={{ top: 8, bottom: 8, left: 12, right: 12 }} background="surface-container">
+      <Text size="xs" weight="medium" color="on-surface">
+        {category}
+      </Text>
+    </VStack>
+    <Separator orientation="horizontal" />
+    <Grid columns={2} gap={4} padding={{ top: 8, bottom: 8, left: 8, right: 8 }}>
       {blocks.map((block) => {
         const propertySpecs = block.props ?? {};
 
@@ -51,24 +57,28 @@ export const BlockGroup: FC<Props> = ({ category, blocks }) => (
           .join(' ');
 
         return (
-          <div key={block.name} className={getClassName('BlockItem')}>
-            <Draggable
-              type={TargetType.Library}
-              item={{
-                ...node,
-                props: defaultProps,
-              }}
-            >
-              <div className={getClassName('BlockItemPreview')}>
+          <VStack key={block.name} className={variants('item')}>
+            <Draggable type={TargetType.Library} item={node}>
+              <VStack
+                width={124}
+                height={124}
+                alignHorizontal="center"
+                alignVertical="center"
+                background="surface-container-low"
+                className={variants('preview')}
+              >
                 <ContentScaler width={1024} height={1024}>
                   <Renderer source={`<${block.name} ${jsxProps} />`} />
                 </ContentScaler>
-              </div>
+              </VStack>
             </Draggable>
-            <p className={getClassName('BlockName')}>{block.name}</p>
-          </div>
+            <Text size="xs" color="on-surface" className={variants('name')}>
+              {block.name}
+            </Text>
+          </VStack>
         );
       })}
-    </div>
-  </div>
+    </Grid>
+    <Separator orientation="horizontal" />
+  </VStack>
 );

packages/react/src/editor/BlockLibrary/BlockLibrary.tsx

@@ -1,4 +1,5 @@
 import type { FC } from 'react';
+import { Separator } from '../../preset';
 import { Catalog } from '../../renderer';
 import { BlockGroup } from '../BlockGroup';
 import { ComposifyEditorProvider } from '../ComposifyEditorContext';
@@ -9,6 +10,7 @@ type Props = {
 
 export const BlockLibrary: FC<Props> = ({ query }) => (
   <ComposifyEditorProvider isLibrary={true} isVisualEditor={false}>
+    <Separator orientation="horizontal" />
     {Catalog.getAll(query).map(({ category, blocks }) => (
       <BlockGroup key={category} category={category} blocks={blocks} />
     ))}