build: expand templating to support #1822 by default

adobe · May 23, 2024 · a2f82a7 · a2f82a7
1 parent 5d189c2
commit a2f82a7
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 8 deletions.
diff --git a/projects/templates/plop-templates/args.ts.hbs b/projects/templates/plop-templates/args.ts.hbs
@@ -0,0 +1,3 @@
+export const argTypes = {
+
+}
diff --git a/projects/templates/plop-templates/stories.ts.hbs b/projects/templates/plop-templates/stories.ts.hbs
@@ -1,12 +1,12 @@
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { TemplateResult } from '@spectrum-web-components/base';
 
-import '../{{> tagnamePartial }}.js';
+import { Template } from './template.js';
+import { argTypes } from './args.js';
 
 export default {
     title: '{{displayName name}}',
     component: '{{> tagnamePartial}}',
+    argTypes,
 };
 
-export const Default = (): TemplateResult => {
-    return html`<{{> tagnamePartial}}></{{> tagnamePartial}}>`;
-};
+export const Default = (): TemplateResult => Template({});
diff --git a/projects/templates/plop-templates/template.ts.hbs b/projects/templates/plop-templates/template.ts.hbs
@@ -0,0 +1,13 @@
+import { html, TemplateResult } from '@spectrum-web-components/base';
+
+import '@spectrum-web-components/{{ name }}/{{> tagnamePartial }}.js';
+
+export interface Properties {
+}
+
+export const Template = (props: Properties): TemplateResult => {
+    // Remove the console.log() when you're ready to consume `props` in the element below.
+    // eslint-disable-next-line no-console
+    console.log('template properties', props);
+    return html`<{{> tagnamePartial}}></{{> tagnamePartial}}>`;
+};
diff --git a/projects/templates/plop-templates/test.ts.hbs b/projects/templates/plop-templates/test.ts.hbs
@@ -1,7 +1,7 @@
 import { fixture, elementUpdated, expect, html } from '@open-wc/testing';
 
-import '../{{> tagnamePartial }}.js';
-import { {{className name}} } from '..';
+import '@spectrum-web-components/{{name}}/{{> tagnamePartial }}.js';
+import { {{className name}} } from '@spectrum-web-components/{{name}}';
 import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
 
 describe('{{className name}}', () => {

diff --git a/projects/templates/plopfile.js b/projects/templates/plopfile.js
@@ -54,7 +54,7 @@ module.exports = function (plop) {
 
     plop.setActionType('format files', function (answers) {
         execSync(
-            `cd ../../ && yarn prettier --write packages/${answers.name} && eslint --fix -f pretty packages/${answers.name} && stylelint --fix packages/${answers.name}`
+            `cd ../../ && yarn prettier --write packages/${answers.name} && yarn eslint --fix -f pretty packages/${answers.name} && yarn stylelint --fix packages/${answers.name}`
         );
     });
 
@@ -126,6 +126,16 @@ module.exports = function (plop) {
                 path: '../../packages/{{name}}/stories/{{name}}.stories.ts',
                 templateFile: 'plop-templates/stories.ts.hbs',
             },
+            {
+                type: 'add',
+                path: '../../packages/{{name}}/stories/args.ts',
+                templateFile: 'plop-templates/args.ts.hbs',
+            },
+            {
+                type: 'add',
+                path: '../../packages/{{name}}/stories/template.ts',
+                templateFile: 'plop-templates/template.ts.hbs',
+            },
             {
                 type: 'add',
                 path: '../../packages/{{name}}/README.md',