RUN-2525: Update storybook and style components to match continuum

rundeckapp/grails-spa/packages/ui-trellis/.gitignore

@@ -62,3 +62,5 @@ tsconfig.tsbuildinfo
 .env
 
 scratch.js
+
+*storybook.log

rundeckapp/grails-spa/packages/ui-trellis/.storybook/main.ts

@@ -0,0 +1,75 @@
+import type { StorybookConfig } from "@storybook/vue3-webpack5";
+import remarkGfm from "remark-gfm";
+
+const config: StorybookConfig = {
+  stories: [
+    "../src/library/components/primeVue/**/*.mdx",
+    "../src/library/components/primeVue/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-webpack5-compiler-swc",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "storybook-dark-mode",
+    {
+      name: "@storybook/addon-styling-webpack",
+      options: {
+        rules: [
+          {
+            test: /\.css$/,
+            sideEffects: true,
+            use: [
+              require.resolve("style-loader"),
+              {
+                loader: require.resolve("css-loader"),
+                options: {},
+              },
+            ],
+          },
+          {
+            test: /\.s[ac]ss$/,
+            sideEffects: true,
+            use: [
+              require.resolve("style-loader"),
+              {
+                loader: require.resolve("css-loader"),
+                options: {
+                  importLoaders: 2,
+                },
+              },
+              require.resolve("resolve-url-loader"),
+              {
+                loader: require.resolve("sass-loader"),
+                options: {
+                  // Want to add more Sass options? Read more here: https://webpack.js.org/loaders/sass-loader/#options
+                  implementation: require("sass"),
+                  sourceMap: true,
+                  sassOptions: {},
+                },
+              },
+            ],
+          },
+        ],
+      },
+    },
+    "@storybook/addon-a11y",
+    {
+      name: "@storybook/addon-docs",
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
+  ],
+  framework: {
+    name: "@storybook/vue3-webpack5",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

rundeckapp/grails-spa/packages/ui-trellis/.storybook/preview.ts

@@ -0,0 +1,38 @@
+import type { Preview } from "@storybook/vue3";
+import { setup } from "@storybook/vue3";
+import PrimeVue from "primevue/config";
+
+import "primevue/resources/themes/lara-light-amber/theme.css";
+import "../src/library/theme/tokens.css";
+import "./storybook.css";
+
+import Tooltip from "primevue/tooltip";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    docs: {
+      toc: {
+        headingSelector: "h2, h3",
+        ignoreSelector: "h2.sbdocs-subtitle",
+        title: "Jump to Section",
+        disable: false,
+      },
+      source: {
+        type: "auto",
+      },
+    },
+  },
+};
+
+setup((app) => {
+  app.directive("tooltip", Tooltip);
+  app.use(PrimeVue);
+});
+
+export default preview;

rundeckapp/grails-spa/packages/ui-trellis/.storybook/storybook.css

@@ -0,0 +1,8 @@
+html {
+    font-size: 14px !important;
+    font-family: var(--font-family) !important;
+}
+
+.sbdocs-preview .docs-story {
+    background: #fff !important;
+}

rundeckapp/grails-spa/packages/ui-trellis/_templates/primevue-generator/css/COMPONENT_NAME.mdx.ejs.t

@@ -0,0 +1,41 @@
+---
+to: <%= h.path.join(`src/library/components/primeVue/${componentName}`, `Docs.mdx`) %>
+unless_exists: true
+---
+
+import { Meta, Subtitle, Title, Canvas, Controls, Description, Stories } from "@storybook/blocks";
+import * as <%=componentName %>Stories from './<%=componentName %>.stories'
+
+<Meta of={<%=componentName%>Stories} />
+
+<Title />
+
+<Subtitle />
+[Component reference on primevue](https://primevue.org/<%= h.changeCase.lower(componentName) %>/)
+
+## Import
+
+```ts
+import <%= h.changeCase.pascal(componentName) %> from "primevue/<%= h.changeCase.lower(componentName) %>";
+```
+
+## Playground
+
+{/* Make sure your stories file has an export for playground, otherwise storybook will break */}
+
+<Canvas of={<%=componentName%>Stories.Playground} sourceState="shown" />
+<Controls of={<%=componentName%>Stories.Playground} />
+
+## How to use
+
+{/* Add a note here about the relevant props to change appearance of component */}
+
+
+<Description of={<%=componentName%>Stories} />
+
+<Stories title='' includePrimary={false} />
+
+
+## Accessibility
+
+{/* Bring in accessibility notes from primeVue here and\/or add aspects important for accessibility */}

rundeckapp/grails-spa/packages/ui-trellis/_templates/primevue-generator/css/COMPONENT_NAME.scss.ejs.t

@@ -0,0 +1,15 @@
+---
+to: <%= h.path.join(`src/library/components/primeVue/${componentName}`, `${h.changeCase.lower(componentName)}.scss`) %>
+unless_exists: true
+---
+
+.p-<%= h.changeCase.lower(componentName) %> {
+    background: var(--colors-);
+<% if(locals.variants) { %>
+    <% variants.split(',').forEach(variant => { %>
+    &--<%= variant %> {
+        background: var(--colors-);
+    }
+    <% }) %>
+<% } -%>
+}

rundeckapp/grails-spa/packages/ui-trellis/_templates/primevue-generator/css/COMPONENT_NAME.stories.ts.ejs.t

@@ -0,0 +1,68 @@
+---
+to: <%= h.path.join(`src/library/components/primeVue/${componentName}`, `${componentName}.stories.ts`) %>
+unless_exists: true
+---
+import type { Meta, StoryObj } from "@storybook/vue3";
+import "./<%= h.changeCase.lower(componentName) %>.scss";
+import <%= h.changeCase.pascal(componentName) %> from "primevue/<%= h.changeCase.lower(componentName) %>";
+
+
+const meta: Meta<typeof <%=componentName%>> = {
+  title: "<%=componentName%>",
+  component: <%=componentName%>,
+  parameters: {
+    docs: {
+        componentSubtitle: "A brief description of the <%=componentName%> component",
+    },
+    actions: {
+      disable: true,
+    },
+    controls: {
+      disable: true,
+    },
+  },
+  argTypes: {
+    // TODO: ArgTypes are responsible for the prop table in the Storybook
+    severity: {
+      options: [undefined, "success", "warning", "danger", "secondary"],
+      control: {
+        type: "select",
+      },
+      type: "string",
+      description:
+        "Severity type of the <%=componentName%>.",
+    },
+  },
+  // TODO: Replace these args with ones appropriate for the component you are building.
+  args: {
+    content: "Hello world!",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof <%=componentName%>>;
+
+// TODO: manually wire the props to the component name, so that the source will update correctly in the story
+export const Playground: Story = {
+  name: "Playground",
+  render: (args) => ({
+      components: { <%=componentName%> },
+      setup: () => ({ args }),
+      template: <<%=componentName%>  />,
+    }),
+};
+
+const generateTemplate = (args: Record<string, any>) => {
+  return `<div>
+    <<%=componentName%> v-bind="args" />
+  </div>`;
+};
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { <%=componentName%> },
+    setup: () => ({ args }),
+    template: generateTemplate(args),
+  }),
+};