playroom: Rename snippets group from Blocks to Sections

.changeset/eight-rivers-fix.md

@@ -0,0 +1,5 @@
+---
+'braid-design-system': patch
+---
+
+playroom: Rename snippets group from `Blocks` to `Sections`

packages/braid-design-system/scripts/generateSnippets.cts

@@ -11,7 +11,7 @@ import { debugLog, relativeTo } from './utils';
 
 const baseDir = path.join(__dirname, '..');
 const componentsDir = path.join(baseDir, 'src/lib/components');
-const recipesDir = path.join(baseDir, 'src/lib/playroom/recipes');
+const templatesDir = path.join(baseDir, 'src/lib/playroom/templates');
 const snippetsDir = path.join(baseDir, 'src/lib/playroom/snippets');
 const snippetsIndexFile = path.join(baseDir, 'src/lib/playroom/snippets.ts');
 
@@ -89,27 +89,27 @@ const generateSnippetsForPaths = async (snippetPaths: string[]) => {
     absolute: true,
     onlyFiles: true,
   });
-  const recipeSnippetPaths = await glob('**/*.snippets.tsx', {
-    cwd: recipesDir,
+  const templatesSnippetPaths = await glob('**/*.snippets.tsx', {
+    cwd: templatesDir,
     absolute: true,
     onlyFiles: true,
   });
 
   await fs.emptyDir(snippetsDir);
 
-  const { importStatements: recipeImportStatements, exportEntries: recipeExportEntries } =
-    await generateSnippetsForPaths(recipeSnippetPaths);
+  const { importStatements: templatesImportStatements, exportEntries: templatesExportEntries } =
+    await generateSnippetsForPaths(templatesSnippetPaths);
   const { importStatements: componentImportStatements, exportEntries: componentExportEntries } =
     await generateSnippetsForPaths(componentSnippetPaths);
 
   const prettierOptions = (await prettier.resolveConfig(snippetsIndexFile)) ?? {};
   const snippetsIndexCode = await prettier.format(
-    ` ${[...recipeImportStatements, ...componentImportStatements].sort().join('\n')}
+    ` ${[...templatesImportStatements, ...componentImportStatements].sort().join('\n')}
 
-      const groupOrder = ['Layouts', 'Blocks', 'Components'];
+      const groupOrder = ['Layouts', 'Sections', 'Components'];
       const allSnippets = [];
       const snippetsMap = {
-        ${[...recipeExportEntries, ...componentExportEntries].join(',\n')}
+        ${[...templatesExportEntries, ...componentExportEntries].join(',\n')}
       };
 
       for (const [name, snippets] of Object.entries(snippetsMap)) {

packages/braid-design-system/src/lib/playroom/snippets.ts

@@ -47,14 +47,14 @@ import { snippets as Textarea } from './snippets/Textarea';
 import { snippets as Tiles } from './snippets/Tiles';
 import { snippets as Toggle } from './snippets/Toggle';
 import { snippets as TooltipRenderer } from './snippets/TooltipRenderer';
-import { snippets as blocks } from './snippets/blocks';
 import { snippets as layouts } from './snippets/layouts';
+import { snippets as sections } from './snippets/sections';
 
-const groupOrder = ['Layouts', 'Blocks', 'Components'];
+const groupOrder = ['Layouts', 'Sections', 'Components'];
 const allSnippets = [];
 const snippetsMap = {
-  blocks,
   layouts,
+  sections,
   Accordion,
   Actions,
   Alert,

packages/braid-design-system/src/lib/playroom/recipes/blocks.snippets.tsx → packages/braid-design-system/src/lib/playroom/templates/sections.snippets.tsx

@@ -45,8 +45,8 @@ import { getState, setDefaultState, setState, toggleState } from './stateStubs';
 
 export const snippets: Snippets = [
   {
-    group: 'Blocks',
-    name: 'Standard',
+    group: 'Sections',
+    name: 'Standard Section',
     code: source(
       <PageBlock width="medium">
         <Stack space="medium">
@@ -80,7 +80,7 @@ export const snippets: Snippets = [
     ),
   },
   {
-    group: 'Blocks',
+    group: 'Sections',
     name: 'Card list',
     code: source(
       <PageBlock width="medium">
@@ -131,7 +131,7 @@ export const snippets: Snippets = [
     ),
   },
   {
-    group: 'Blocks',
+    group: 'Sections',
     name: 'Divided list',
     code: source(
       <PageBlock width="medium">
@@ -182,7 +182,7 @@ export const snippets: Snippets = [
     ),
   },
   {
-    group: 'Blocks',
+    group: 'Sections',
     name: 'Branded container',
     description: 'Full bleed',
     code: source(
@@ -212,7 +212,7 @@ export const snippets: Snippets = [
     ),
   },
   {
-    group: 'Blocks',
+    group: 'Sections',
     name: 'Branded container',
     description: 'Rounded from desktop (full bleed below)',
     code: source(
@@ -251,7 +251,7 @@ export const snippets: Snippets = [
     ),
   },
   {
-    group: 'Blocks',
+    group: 'Sections',
     name: 'Form (basic)',
     code: source(
       <PageBlock width="medium">
@@ -300,7 +300,7 @@ export const snippets: Snippets = [
     ),
   },
   {
-    group: 'Blocks',
+    group: 'Sections',
     name: 'Form (validation)',
     code: source(
       <PageBlock width="medium">
@@ -366,7 +366,7 @@ export const snippets: Snippets = [
     ),
   },
   {
-    group: 'Blocks',
+    group: 'Sections',
     name: 'Table',
     code: source(
       <PageBlock width="medium">
@@ -442,7 +442,7 @@ export const snippets: Snippets = [
     ),
   },
   {
-    group: 'Blocks',
+    group: 'Sections',
     name: 'Stepper',
     code: source(
       <PageBlock width="medium">
@@ -521,7 +521,7 @@ export const snippets: Snippets = [
     ),
   },
   {
-    group: 'Blocks',
+    group: 'Sections',
     name: 'Tabs',
     code: source(
       <PageBlock width="medium">