@ethlete/components 1.0.0-next.46 → 1.0.0-next.47

package/generators/component/component-names.js

@@ -1,10 +1,32 @@
 import { names } from '@nx/devkit';
 const KEBAB = /^[a-z][a-z0-9]*(-[a-z0-9]+)*$/;
-export function componentNames(name) {
+/** Every category under `Components/` in Storybook. A new domain has to join one of them. */
+export const COMPONENT_CATEGORIES = [
+    'Actions',
+    'Data display',
+    'Date & time',
+    'Dev tools',
+    'Feedback',
+    'Forms',
+    'Layout',
+    'Media',
+    'Navigation',
+    'Overlays',
+    'Sports',
+];
+/** Mirrors Storybook's own title-to-id slugify, so `storyIdPrefix` matches the id it will really get. */
+const slugify = (value) => value
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+export function componentNames(name, category = 'Layout') {
     const { fileName, className, constantName } = names(name.trim());
     if (!KEBAB.test(fileName)) {
         throw new Error(`"${name}" is not a usable domain name. Use kebab-case, e.g. "stat-tile".`);
     }
+    if (!COMPONENT_CATEGORIES.includes(category)) {
+        throw new Error(`"${category}" is not a Storybook category. Use one of: ${COMPONENT_CATEGORIES.join(', ')}.`);
+    }
     const words = fileName.replace(/-/g, ' ');
     return {
         fileName,
@@ -13,7 +35,8 @@ export function componentNames(name) {
         elementSelector: `et-${fileName}`,
         attributeSelector: `et${className}`,
         title: words.charAt(0).toUpperCase() + words.slice(1),
-        storyIdPrefix: `components-${fileName}`,
+        category,
+        storyIdPrefix: `components-${slugify(category)}-${fileName}`,
     };
 }
 //# sourceMappingURL=component-names.js.map

package/generators/component/component-templates.js

@@ -162,7 +162,7 @@ export function storiesFile(n) {
 import { ${n.className}StorybookComponent } from './${n.fileName}-storybook.component';
 
 export default {
-  title: 'Components/${n.title}',
+  title: 'Components/${n.category}/${n.title}',
   component: ${n.className}StorybookComponent,
   decorators: [moduleMetadata({ imports: [${n.className}StorybookComponent] })],
 } as Meta<${n.className}StorybookComponent>;

package/generators/component/generator.js

@@ -17,7 +17,7 @@ export default async function generate(tree, schema) {
     }
     let names;
     try {
-        names = componentNames(schema.name);
+        names = componentNames(schema.name, schema.category);
     }
     catch (error) {
         logger.error(`❌ ${error instanceof Error ? error.message : String(error)}`);

package/generators/component/schema.json

@@ -29,6 +29,41 @@
         ]
       }
     },
+    "category": {
+      "type": "string",
+      "description": "Storybook category the story sits under, below 'Components'. Also decides the story id prefix used by the docs page's <StoryEmbed>.",
+      "enum": [
+        "Actions",
+        "Data display",
+        "Date & time",
+        "Dev tools",
+        "Feedback",
+        "Forms",
+        "Layout",
+        "Media",
+        "Navigation",
+        "Overlays",
+        "Sports"
+      ],
+      "default": "Layout",
+      "x-prompt": {
+        "message": "Which Storybook category does the domain belong to?",
+        "type": "list",
+        "items": [
+          { "value": "Actions", "label": "Actions - buttons and the things you press" },
+          { "value": "Data display", "label": "Data display - showing values and records" },
+          { "value": "Date & time", "label": "Date & time - calendars, schedulers, pickers" },
+          { "value": "Dev tools", "label": "Dev tools - developer-facing panels" },
+          { "value": "Feedback", "label": "Feedback - status, loading, errors, tips" },
+          { "value": "Forms", "label": "Forms - controls that carry a value" },
+          { "value": "Layout", "label": "Layout - containers and arrangement" },
+          { "value": "Media", "label": "Media - images, video, carousels" },
+          { "value": "Navigation", "label": "Navigation - moving between places" },
+          { "value": "Overlays", "label": "Overlays - things that float above the page" },
+          { "value": "Sports", "label": "Sports - brackets, standings, matches" }
+        ]
+      }
+    },
     "project": {
       "type": "string",
       "description": "Nx project to scaffold into. The domain lands in its '<sourceRoot>/lib/<name>'.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethlete/components",
-  "version": "1.0.0-next.46",
+  "version": "1.0.0-next.47",
   "license": "MIT",
   "sideEffects": false,
   "peerDependencies": {