Build update + unit test fix

.npmrc

@@ -1 +1,2 @@
-registry=https://registry.npmjs.org/
+registry=https://registry.npmjs.org/
+legacy-peer-deps=true

.storybook/main.js

@@ -1,18 +1,23 @@
 const path = require("path");
 
 module.exports = {
-	stories: ["../src/**/*.stories.@(mdx|tsx)"],
+	stories: ["../src/**/*.@(mdx|stories.@(tsx))"],
+
 	addons: [
 		"@storybook/addon-actions",
 		"@storybook/addon-links",
 		{
 			name: "@storybook/addon-docs",
 			options: {
 				configureJSX: true,
-				inlineStories: false,
+				inlineStories: true,
 			},
 		},
+		"@storybook/addon-mdx-gfm",
+		"@storybook/addon-webpack5-compiler-babel",
+		"@chromatic-com/storybook",
 	],
+
 	webpackFinal: async (config, { configType }) => {
 		if (process.env.NODE === "production") {
 			config.output.publicPath = "/react-spaces/docs";
@@ -26,7 +31,20 @@ module.exports = {
 
 		return config;
 	},
-	reactOptions: {
-		strictMode: true,
+
+	framework: {
+		name: "@storybook/react-webpack5",
+
+		options: {
+			strictMode: true,
+		},
+	},
+
+	docs: {
+		autodocs: true,
+		story: {
+			inline: true,
+			height: "500px",
+		},
 	},
 };

.storybook/preview.js

@@ -1,7 +1,10 @@
-import { addParameters } from "@storybook/react";
-
-addParameters({
-	docs: {
-		inlineStories: false,
+module.exports = {
+	parameters: {
+		actions: { argTypesRegex: "^on.*" },
+		docs: {
+			story: {
+				inline: true, // Render stories in an iframe
+			},
+		},
 	},
-});
+};

azure-pipelines.yml

@@ -4,64 +4,94 @@
 # https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
 
 pool:
-  vmImage: "ubuntu-latest"
+    vmImage: "ubuntu-latest"
 
 steps:
-- task: gitversion/setup@0
-  inputs:
-    versionSpec: '5.x'
-
-- task: gitversion/execute@0 
-
-- script: echo "##vso[build.updatebuildnumber]$(GitVersion.MajorMinorPatch)"
-
-- task: Bash@3
-  displayName: Update version number in react-spaces package.json
-  inputs:
-    targetType: 'inline'
-    script:  sed -i "s/0.2.2/$GITVERSIONNUMBER/g" package.json
-  env:
-    GITVERSIONNUMBER: $(GitVersion.MajorMinorPatch)
-
-- task: Bash@3
-  displayName: Update version number in react-spaces-storybook package.json
-  inputs:
-    targetType: 'inline'
-    script:  sed -i "s/0.2.2/$GITVERSIONNUMBER/g" .storybook/package.json
-  env:
-    GITVERSIONNUMBER: $(GitVersion.MajorMinorPatch)
-
-- task: NodeTool@0
-  inputs:
-    versionSpec: '12.x'
-    checkLatest: true
-  displayName: 'Install Node.js'
-
-- script: |
-    npm install
-    npm run build
-    npm run build-storybook
-  displayName: 'NPM install and build'
-
-- task: CopyFiles@2
-  displayName: Move storybook package json
-  inputs:
-    SourceFolder: '.storybook'
-    Contents: 'package.json'
-    TargetFolder: './storybook-static'
-    OverWrite: true
-
-- task: Npm@1
-  enabled: true
-  displayName: Publish react-spaces-storybook
-  inputs:
-    command: 'publish'
-    workingDir: 'storybook-static'
-    publishEndpoint: 'NPM'
-
-- task: Npm@1
-  enabled: true
-  displayName: Publish react-spaces
-  inputs:
-    command: 'publish'
-    publishEndpoint: 'NPM'
+    - task: gitversion/setup@0
+      inputs:
+          versionSpec: "5.x"
+
+    - task: gitversion/execute@0
+
+    - script: echo "##vso[build.updatebuildnumber]$(GitVersion.SemVer)"
+
+    - task: Bash@3
+      displayName: Update version number in react-spaces package.json
+      inputs:
+          targetType: "inline"
+          script: sed -i "s/0.2.2/$GITVERSIONNUMBER/g" package.json
+      env:
+          GITVERSIONNUMBER: $(GitVersion.SemVer)
+
+    - task: Bash@3
+      displayName: Update version number in react-spaces-storybook package.json
+      inputs:
+          targetType: "inline"
+          script: sed -i "s/0.2.2/$GITVERSIONNUMBER/g" .storybook/package.json
+      env:
+          GITVERSIONNUMBER: $(GitVersion.SemVer)
+
+    - task: NodeTool@0
+      inputs:
+          versionSpec: "20.x"
+          checkLatest: true
+      displayName: "Install Node.js"
+
+    - task: Cache@2
+      displayName: Cache node_modules
+      inputs:
+          key: 'npm | "$(Agent.OS)" | $(Build.SourcesDirectory)/package-lock.json'
+          path: $(Build.SourcesDirectory)/node_modules
+          cacheHitVar: CACHE_RESTORED
+
+    - task: Npm@1
+      displayName: "Install the dependencies"
+      inputs:
+          command: custom
+          verbose: false
+          customCommand: "ci"
+      condition: ne(variables.CACHE_RESTORED, 'true')
+
+    - script: |
+          npm test
+      displayName: "Run tests"
+
+    - script: |
+          npm run build
+      displayName: "Build package"
+
+    - script: |
+          npm run build-storybook
+      displayName: "Build storybook"
+
+    - task: CopyFiles@2
+      condition: eq(variables['Build.SourceBranch'], 'refs/heads/master')
+      displayName: Move storybook package json
+      inputs:
+          SourceFolder: ".storybook"
+          Contents: "package.json"
+          TargetFolder: "./storybook-static"
+          OverWrite: true
+
+    - task: Npm@1
+      condition: eq(variables['Build.SourceBranch'], 'refs/heads/master')
+      displayName: Publish react-spaces-storybook
+      inputs:
+          command: "publish"
+          workingDir: "storybook-static"
+          publishEndpoint: "NPM"
+
+    - task: Npm@1
+      condition: eq(variables['Build.SourceBranch'], 'refs/heads/master')
+      displayName: Publish react-spaces
+      inputs:
+          command: "publish"
+          publishEndpoint: "NPM"
+
+    - task: Npm@1
+      condition: ne(variables['Build.SourceBranch'], 'refs/heads/master')
+      displayName: Publish react-spaces (BETA)
+      inputs:
+          command: "custom"
+          customCommand: "run publish:beta"
+          customEndpoint: "NPM"