Setup storybook for Mails in Demo-API

Author: jamesricky

demo/api/.babelrc.json

@@ -0,0 +1,3 @@
+{
+    "presets": ["@comet/admin-babel-preset"]
+}

demo/api/.storybook/decorators/IntlProvider.decorator.tsx

@@ -0,0 +1,68 @@
+import { type Decorator } from "@storybook/react-webpack5";
+import { de, enUS } from "date-fns/locale";
+import { IntlProvider } from "react-intl";
+
+enum LocaleOption {
+    German = "de",
+    English = "en",
+}
+
+function isLocaleOption(value: any): value is LocaleOption {
+    return value === "de" || value === "en";
+}
+
+type DateFnsLocale = typeof de;
+const dateFnsLocales: Record<LocaleOption, DateFnsLocale> = {
+    [LocaleOption.German]: de,
+    [LocaleOption.English]: enUS,
+};
+
+// @TODO: use messages from lang-package
+const messages: Record<LocaleOption, Record<string, string>> = {
+    en: {
+        "comet.core.deleteMutation.promptDelete": "Delete data?",
+        "comet.core.deleteMutation.yes": "Yes",
+        "comet.core.deleteMutation.no": "No",
+        "comet.core.dirtyHandler.discardChanges": "Discard unsaved changes?",
+        "comet.core.editDialog.edit": "Edit",
+        "comet.core.editDialog.add": "Add",
+        "comet.core.editDialog.cancel": "Cancel",
+        "comet.core.editDialog.save": "Save",
+        "comet.core.finalForm.abort": "Cancel",
+        "comet.core.finalForm.save": "Save",
+        "comet.core.router.confirmationDialog.confirm": "OK",
+        "comet.core.router.confirmationDialog.abort": "Cancel",
+        "comet.core.stack.stack.back": "Back",
+        "comet.core.table.addButton": "Add",
+        "comet.core.table.excelExportButton": "Export",
+        "comet.core.table.deleteButton": "Delete",
+        "comet.core.table.pagination.pageInfo": "Page {current} of {total}",
+        "comet.core.table.localChangesToolbar.save": "Save",
+        "comet.core.table.localChangesToolbar.unsavedItems":
+            "{count, plural, =0 {no unsaved changes} one {# unsaved change} other {# unsaved changes}}",
+        "comet.core.table.tableFilterFinalForm.resetButton": "Reset Filter",
+        "comet.core.table.tableQuery.error": "Error :( {error}",
+    },
+    de: {
+        "comet.core.table.localChangesToolbar.unsavedItems":
+            "{count, plural, =0 {keine ungespeicherten Änderungen} one {# ungespeicherte Änderung} other {# ungespeicherte Änderungen}}",
+        "comet.core.table.tableQuery.error": "Fehler :( {error}",
+    },
+};
+
+export const IntlDecorator: Decorator = (fn, context) => {
+    const { locale: selectedLocale = LocaleOption.English } = context.globals;
+    const selecteDateFnsLocale = isLocaleOption(selectedLocale) ? dateFnsLocales[selectedLocale] : dateFnsLocales.en;
+
+    return (
+        <IntlProvider
+            locale={selectedLocale}
+            messages={isLocaleOption(selectedLocale) ? messages[selectedLocale] : {}}
+            onError={() => {
+                // disable error logging
+            }}
+        >
+            {fn()}
+        </IntlProvider>
+    );
+};

demo/api/.storybook/main.ts

@@ -0,0 +1,10 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+const config: StorybookConfig = {
+    stories: ["../src/**/*.mdx", "../src/**/__stories__/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    staticDirs: ["./public"],
+
+    addons: ["@storybook/addon-docs", "storybook-addon-tag-badges", "@storybook/addon-webpack5-compiler-babel"],
+    framework: "@storybook/react-webpack5",
+};
+export default config;

demo/api/.storybook/manager-head.html

@@ -0,0 +1,14 @@
+<link rel="shortcut icon" href="/favicon.ico" />
+<script type="text/javascript">
+    document.addEventListener("DOMContentLoaded", function () {
+        var badge = document.createElement("div");
+        badge.style.position = "fixed";
+        badge.style.right = "5px";
+        badge.style.bottom = "5px";
+        badge.style.zIndex = "10";
+        badge.innerHTML =
+            '<a href="https://www.netlify.com"><img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt="Deploys by Netlify" /></a>';
+
+        document.body.appendChild(badge);
+    });
+</script>

demo/api/.storybook/manager.ts

@@ -0,0 +1,7 @@
+import { addons } from "storybook/manager-api";
+
+import theme from "./theme";
+
+addons.setConfig({
+    theme,
+});

demo/api/.storybook/middleware.js

@@ -0,0 +1,12 @@
+export default function middleware(router) {
+    router.use((req, res, next) => {
+        const origin = req.headers.origin;
+
+        if (origin?.startsWith("http://localhost:")) {
+            res.setHeader("Access-Control-Allow-Origin", origin);
+            res.setHeader("Access-Control-Allow-Credentials", "true");
+        }
+
+        next();
+    });
+}

demo/api/.storybook/preview-head.html

@@ -0,0 +1,19 @@
+<title>Comet</title>
+<style>
+    body {
+        font-family: "Lato", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+        font-size: 14px;
+        line-height: 1.4;
+        -webkit-font-smoothing: antialiased;
+    }
+
+    #root pre:not(.prismjs) {
+        background-color: #efefef;
+        font-size: 10px;
+        padding: 15px;
+    }
+
+    #root code {
+        font-size: 10px;
+    }
+</style>

demo/api/.storybook/preview.ts

@@ -0,0 +1,22 @@
+import type { Preview } from "@storybook/react-webpack5";
+
+import { IntlDecorator } from "./decorators/IntlProvider.decorator";
+
+const preview: Preview = {
+    tags: ["autodocs"],
+    decorators: [IntlDecorator],
+
+    parameters: {
+        docs: {
+            codePanel: true,
+        },
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+    },
+};
+
+export default preview;