Merge pull request #2222 from Akshat55/compo-storybook

docs: Integrate compodoc with storybook

Author: Akshat55

.storybook/main.js

@@ -1,20 +1,23 @@
 module.exports = {
-	"stories": [
+	staticDirs: ["public"],
+	stories: [
 		"../src/**/*.stories.mdx",
 		"../src/**/*.stories.@(js|jsx|ts|tsx)"
 	],
-	"addons": [
+	addons: [
 		"@storybook/addon-links",
 		{
 			name: "@storybook/addon-essentials",
 			options: {
 				backgrounds: false
 			}
-		}
+		},
+		"@storybook/addon-a11y"
 	],
-	"framework": "@storybook/angular",
-	"core": {
-		"builder": "webpack5"
+	framework: "@storybook/angular",
+	core: {
+		builder: "webpack5",
+		disableTelemetry: true,
 	},
 	webpack(config) {
 		config.module.rules.push({

.storybook/manager.js

@@ -8,7 +8,6 @@ addons.setConfig({
 		fontCode:
 			"'IBM Plex Mono', Menlo, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace",
 		brandTitle: `carbon components angular`,
-		brandUrl:
-			'https://github.com/carbon-design-system/carbon/tree/main/packages/react',
+		brandUrl: 'https://github.com/IBM/carbon-components-angular',
 	})
 });

.storybook/preview.js

@@ -2,6 +2,47 @@
 import "!style-loader!css-loader!postcss-loader!sass-loader!./preview.scss";
 import { breakpoints } from '@carbon/layout';
 
+// Add compodoc
+import { setCompodocJson } from "@storybook/addon-docs/angular";
+import {
+	classes,
+	components,
+	directives,
+	interfaces,
+	miscellaneous,
+	pipes
+} from "../dist/docs/documentation.json";
+
+/**
+ * Remove public properties from docs Json for each component.
+ * This is to prevent properties like `onTouched = () => {...}` & `propagateChange = () => {}`
+ * from being rewritten as string by storybook.
+ */
+components = components.map(comp => {
+	return {
+		...comp,
+		// Removes properties
+		propertiesClass: [],
+		outputsClass: comp.outputsClass.map((output) => {
+			return {
+				...output,
+				// Prevents control type appearing as `string`
+				defaultValue: undefined
+			}
+		})
+	}
+});
+
+// Integrate compodoc documentation with storybook
+setCompodocJson({
+	classes,
+	components,
+	directives,
+	interfaces,
+	miscellaneous,
+	pipes
+});
+
 // Set carbon viewports options
 export const parameters = {
 	viewport: {
@@ -42,6 +83,9 @@ export const parameters = {
 				},
 			},
 		},
+	},
+	controls: {
+		expanded: true
 	}
 };
 

angular.json

@@ -49,7 +49,18 @@
 						"styles": [
 							"./.storybook/preview.scss"
 						],
-						"compodoc": false
+						"compodoc": true,
+						"compodocArgs": [
+							"-e",
+							"json",
+							"--disablePrivate",
+							"--disableProtected",
+							"--disableLifeCycleHooks",
+							"--disableInternal",
+							"-d",
+							"dist/docs/"
+						],
+						"configDir": ".storybook"
 					}
 				},
 				"build-storybook": {
@@ -59,7 +70,18 @@
 						"styles": [
 							"./.storybook/preview.scss"
 						],
-						"compodoc": false,
+						"compodoc": true,
+						"compodocArgs": [
+							"-e",
+							"json",
+							"--disablePrivate",
+							"--disableProtected",
+							"--disableLifeCycleHooks",
+							"--disableInternal",
+							"-d",
+							"dist/docs/",
+							"-t"
+						],
 						"configDir": ".storybook",
 						"outputDir": "dist/docs/storybook"
 					}