Publish 1.0.0-rc.1

.github/workflows/azure-static-web-apps-delightful-beach-055ecb503.yml

@@ -3,7 +3,7 @@ name: Azure Static Web Apps CI/CD
 on:
   push:
     branches:
-      - main
+      - storybook
   # This is how azure builds staging environments
   pull_request:
     types: [opened, synchronize, reopened, closed]

.storybook/preview.js

@@ -20,7 +20,7 @@ export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
-      color: /(background|color)$/i,
+      color: /(background|color)/i,
       date: /Date$/,
     },
   },
@@ -31,19 +31,6 @@ export const parameters = {
     method: 'alphabetical',
     storySort: sort,
   },
-  // Hides the CSS: [] property on the docs page.
-  argTypes: {
-    styles: {
-      table: {
-        disable: true,
-      },
-    },
-    formAssociated: {
-      table: {
-        disable: true,
-      },
-    },
-  },
 };
 
 WebComponentFormatter(customElements);
@@ -52,16 +39,39 @@ setCustomElements(customElements);
 
 function WebComponentFormatter(customElements) {
   for (let tag of customElements.tags || []) {
+    // Hide all attributes, since we only use props for storybook
+    tag.attributes = [];
+
+    // Hide all 'styles' and 'formAssociated' entries for properties
+    for (let prop in tag.properties || []) {
+      if (
+        tag.properties[prop].name === 'styles' ||
+        tag.properties[prop].name === 'formAssociated'
+      ) {
+        delete tag.properties[prop];
+      }
+    }
+
+    // Run through all CSS Custom Properties and clean them a bit
+    for (let cssProp of tag.cssProperties || []) {
+      // If the property does not have a type, set it to string
+      if (!cssProp.type) {
+        cssProp.type = 'string';
+      }
+    }
+
     // Find all names of properties
     const propertyNames = (tag.properties || []).map(p => p.name);
 
+    // Run through all slots to clean them up a bit
     for (let slot of tag.slots || []) {
       // Replace the name of the default slot so Storybook will show it
       if (typeof slot.name === 'string' && slot.name.length === 0) {
         slot.name = 'slot';
       }
 
       // If the slot has the same name as a property, then add the word 'slot' to the name
+      // Bug reported to Storybook here: https://github.com/storybookjs/storybook/issues/17733
       if (propertyNames.includes(slot.name)) {
         slot.name = `${slot.name} slot`;
       }

lerna.json

@@ -3,7 +3,6 @@
   "version": "independent",
   "npmClient": "npm",
   "useWorkspaces": true,
-  "granularPathspec": false,
   "command": {
     "publish": {
       "verifyAccess": false