Merge branch 'main' into staging/4.0

.changeset/huge-mice-build.md

@@ -0,0 +1,4 @@
+---
+"@patternfly/pfe-tools": patch
+---
+**Dev Server**: load lightdom shim files

.changeset/legal-chairs-double.md

@@ -0,0 +1,4 @@
+---
+"@patternfly/pfe-tools": patch
+---
+**Dev Server**: reload on typescript file changes

.changeset/shaky-cats-share.md

@@ -0,0 +1,4 @@
+---
+"@patternfly/create-element": patch
+---
+Element generator now generates demo files with inlined script and styles

elements/package.json

@@ -126,6 +126,7 @@
     "Steven Spriggs <[email protected]",
     "castastrophe (https://github.com/castastrophe)",
     "Wes Ruvalcaba",
+    "Rohit Bharmal (https://github.com/Rohit2601)",
     "Ajinyka Shinde <[email protected]>"
   ],
   "dependencies": {

elements/pf-text-area/docs/pf-text-area.md

@@ -2,7 +2,43 @@
   <pf-text-area></pf-text-area>
 {% endrenderOverview %}
 
-{% band header="Usage" %}{% endband %}
+{% band header="Usage" %}
+ ### Basic
+ {% htmlexample %}
+ <label for="text">Text Area : </label>
+ <pf-text-area id="text"></pf-text-area>
+ {% endhtmlexample %}
+
+ ### With Placeholder 
+  {% htmlexample %}
+  <label for="text">Text Area : </label>
+  <pf-text-area id="text" placeholder="placeholder"></pf-text-area>
+  {% endhtmlexample %}
+
+ ### Required 
+  {% htmlexample %}
+   <label for="text">Text Area : </label>
+   <pf-text-area id="text" placeholder="placeholder" required="true" ></pf-text-area>
+  {% endhtmlexample %}
+
+ ### Disabled state
+  {% htmlexample %}
+  <label for="text">Text Area : </label>
+  <pf-text-area id="text" placeholder="placeholder" disabled="true" ></pf-text-area>
+  {% endhtmlexample %}
+
+  ### Resize Vertical
+  {% htmlexample %}
+  <label for="text">Text Area : </label>
+  <pf-text-area id="text" placeholder="placeholder" resize='vertical'></pf-text-area>
+  {% endhtmlexample %}
+
+  ### Resize Horizontal
+  {% htmlexample %}
+  <label for="text">Text Area : </label>
+  <pf-text-area id="text" placeholder="placeholder" resize='horizontal'></pf-text-area>
+  {% endhtmlexample %}
+{% endband %}
 
 {% renderSlots %}{% endrenderSlots %}
 

elements/pf-text-input/docs/pf-text-input.md

@@ -2,7 +2,13 @@
   <pf-text-input></pf-text-input>
 {% endrenderOverview %}
 
-{% band header="Usage" %}{% endband %}
+{% band header="Usage" %}
+  ### Basic
+  {% htmlexample %}
+  <label for="input-box">Input: </label>
+  <pf-text-input id="input-box" type="text" placeholder="Placeholder"></pf-text-input> 
+  {% endhtmlexample %}
+{% endband %}
 
 {% renderSlots %}{% endrenderSlots %}
 

tools/create-element/generator/element.ts

@@ -29,8 +29,6 @@ const $$ = $({ stderr: 'inherit' });
 enum FileKey {
   component = 'component',
   demo = 'demo',
-  demoCss = 'demoCss',
-  demoScript = 'demoScript',
   docs = 'docs',
   readme = 'readme',
   style = 'style',
@@ -63,8 +61,6 @@ const getFilePathsRelativeToPackageDir =
   memoize((options: GenerateElementOptions): Record<FileKey, string> => ({
     component: `${options.tagName}.ts`,
     demo: `demo/${options.tagName}.html`,
-    demoCss: `demo/demo.css`,
-    demoScript: `demo/${options.tagName}.js`,
     docs: `docs/${options.tagName}.md`,
     readme: 'README.md',
     style: `${options.tagName}.${options.css === 'postcss' ? '.postcss.css' : options.css}`,

tools/create-element/templates/element/demo/element.html

@@ -1,4 +1,12 @@
-<link rel="stylesheet" href="demo.css">
-<script type="module" src="<%= tagName %>.js"></script>
-
 <<%= tagName %>></<%= tagName %>>
+
+<script type="module">
+  import '<%= importSpecifier %>';
+</script>
+
+<style>
+<%= tagName %> {
+  /* insert demo styles */
+}
+</style>
+

tools/pfe-tools/dev-server/config.ts

@@ -1,6 +1,6 @@
 import type { Plugin } from '@web/dev-server-core';
 import type { DevServerConfig } from '@web/dev-server';
-import type { Context, Next } from 'koa';
+import type { Middleware, Context, Next } from 'koa';
 
 import { readdir, stat } from 'node:fs/promises';
 import { fileURLToPath } from 'node:url';
@@ -80,6 +80,18 @@ async function cacheBusterMiddleware(ctx: Context, next: Next) {
   }
 }
 
+function liveReloadTsChangesMiddleware(
+  config: ReturnType<typeof normalizeOptions>,
+): Middleware {
+  return function(ctx, next) {
+    if (!ctx.path.includes('node_modules') && ctx.path.match(new RegExp(`/^${config?.elementsDir}\\/.*.js/`))) {
+      ctx.redirect(ctx.path.replace('.js', '.ts'));
+    } else {
+      return next();
+    }
+  };
+}
+
 /**
  * Creates a default config for PFE's dev server.
  */
@@ -96,6 +108,7 @@ export function pfeDevServerConfig(options?: PfeDevServerConfigOptions): DevServ
     middleware: [
       cors,
       cacheBusterMiddleware,
+      liveReloadTsChangesMiddleware(config),
       ...config?.middleware ?? [],
     ],
 

tools/pfe-tools/dev-server/plugins/pfe-dev-server.ts

@@ -104,11 +104,11 @@ function getRouter(options: PfeDevServerInternalConfig) {
 
   // Redirect `components/jazz-hands/*-lightdom.css` to `elements/pf-jazz-hands/*-lightdom.css`
   // NOTE: don't put subresources in /demo called `*-lightdom.css` , or this will break
-      .get(`/${componentSubpath}/:element/(demo/)?:fileName-lightdom.css`, async (ctx, next) => {
+      .get(`/${componentSubpath}/:element/(demo/)?:fileName.css`, async (ctx, next) => {
         const { element, fileName } = ctx.params;
-        if (!element.startsWith(tagPrefix)) {
+        if (!element.startsWith(tagPrefix) && fileName.includes('lightdom')) {
           const prefixedElement = deslugify(element);
-          ctx.redirect(`/${elementsDir}/${prefixedElement}/${fileName}-lightdom.css`);
+          ctx.redirect(`/${elementsDir}/${prefixedElement}/${fileName}.css`);
         } else {
           return next();
         }