chore: Improved components list organization (#4643)

## Description

1. Rename Text category to Typography
2. Move Content Block to typography
3. move Time to a standalone new "Localization" category
4. move Media section next after Typography

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

packages/react-sdk/src/components/component-meta.ts

@@ -20,10 +20,11 @@ export type WsComponentPropsMeta = z.infer<typeof WsComponentPropsMeta>;
 
 export const componentCategories = [
   "general",
-  "text",
-  "data",
+  "typography",
   "media",
+  "data",
   "forms",
+  "localization",
   "radix",
   "xml",
   "hidden",

packages/react-sdk/src/core-components.ts

@@ -150,8 +150,7 @@ const blockTemplatePropsMeta: WsComponentPropsMeta = {
 };
 
 const blockMeta: WsComponentMeta = {
-  category: "data",
-  order: 2,
+  category: "typography",
   type: "container",
   label: "Content Block",
   icon: EditIcon,

packages/sdk-components-react/src/blockquote.ws.ts

@@ -60,7 +60,7 @@ const presetStyle = {
 } satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
-  category: "text",
+  category: "typography",
   type: "container",
   description:
     "Use to style a quote from an external source like an article or book.",

packages/sdk-components-react/src/heading.ws.ts

@@ -22,7 +22,7 @@ const presetStyle = {
 } satisfies PresetStyle<HeadingTags>;
 
 export const meta: WsComponentMeta = {
-  category: "text",
+  category: "typography",
   type: "container",
   description:
     "Use HTML headings to structure and organize content. Use the Tag property in settings to change the heading level (h1-h6).",

packages/sdk-components-react/src/list-item.ws.ts

@@ -14,7 +14,7 @@ const presetStyle = {
 } satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
-  category: "general",
+  category: "typography",
   type: "container",
   constraints: {
     // cannot use parent relation here
@@ -27,7 +27,7 @@ export const meta: WsComponentMeta = {
   icon: ListItemIcon,
   states: defaultStates,
   presetStyle,
-  order: 4,
+  order: 5,
   template: [
     {
       type: "instance",

packages/sdk-components-react/src/list.ws.ts

@@ -43,13 +43,13 @@ const presetStyle = {
 } satisfies PresetStyle<ListTag>;
 
 export const meta: WsComponentMeta = {
-  category: "general",
+  category: "typography",
   type: "container",
   description: "Groups content, like links in a menu or steps in a recipe.",
   icon: ListIcon,
   states: defaultStates,
   presetStyle,
-  order: 3,
+  order: 4,
   template: [
     {
       type: "instance",

packages/sdk-components-react/src/paragraph.ws.ts

@@ -14,7 +14,7 @@ const presetStyle = {
 } satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
-  category: "text",
+  category: "typography",
   type: "container",
   description: "A container for multi-line text.",
   icon: TextAlignLeftIcon,

packages/sdk-components-react/src/text.ws.ts

@@ -20,7 +20,7 @@ const presetStyle = {
 } satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
-  category: "text",
+  category: "typography",
   type: "container",
   description:
     "A generic container for any text content that is not a heading or a link.",

packages/sdk-components-react/src/time.ws.ts

@@ -16,14 +16,13 @@ const presetStyle = {
 } satisfies PresetStyle<"time">;
 
 export const meta: WsComponentMeta = {
-  category: "data",
+  category: "localization",
   type: "container",
   description:
     "Converts machine-readable date and time to a human-readable format.",
   icon: CalendarIcon,
   states: defaultStates,
   presetStyle,
-  order: 5,
 };
 
 export const propsMeta: WsComponentPropsMeta = {