Migrate Chromatic (#2906)

.storybook/main.js

@@ -0,0 +1,16 @@
+module.exports = {
+  stories: [
+    "../libs/components/src/**/*.stories.mdx",
+    "../libs/components/src/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-a11y",
+    "storybook-addon-designs",
+  ],
+  framework: "@storybook/angular",
+  core: {
+    builder: "webpack5",
+  },
+};

.storybook/preview.js

@@ -0,0 +1,33 @@
+import { setCompodocJson } from "@storybook/addon-docs/angular";
+import { componentWrapperDecorator, addDecorator } from "@storybook/angular";
+
+import docJson from "../documentation.json";
+setCompodocJson(docJson);
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  docs: { inlineStories: true },
+};
+
+// ng-template is used to scope any template reference variables and isolate the previews
+const decorator = componentWrapperDecorator(
+  (story) => `
+<ng-template #lightPreview>
+  <div class="theme_light tw-px-5 tw-py-10 tw-border-2 tw-border-solid tw-border-secondary-300 tw-bg-[#ffffff]">${story}</div>
+</ng-template>
+<ng-template #darkPreview>
+  <div class="theme_dark tw-mt-5 tw-px-5 tw-py-10 tw-bg-[#1f242e]">${story}</div>
+</ng-template>
+
+<ng-container *ngTemplateOutlet="lightPreview"></ng-container>
+<ng-container *ngTemplateOutlet="darkPreview"></ng-container>
+`
+);
+
+addDecorator(decorator);

.storybook/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig",
+  "compilerOptions": {
+    "types": ["node"],
+    "allowSyntheticDefaultImports": true
+  },
+  "exclude": ["../src/test.ts", "../src/**/*.spec.ts", "../projects/**/*.spec.ts"],
+  "include": ["../src/**/*", "../projects/**/*"],
+  "files": ["./typings.d.ts"]
+}

.storybook/typings.d.ts

@@ -0,0 +1,4 @@
+declare module "*.md" {
+  const content: string;
+  export default content;
+}