Merge pull request #6 from allaboutapps/dev

gottfired · web-flow · commit b25fe75b2c4e · 2024-08-13T15:17:09.000+02:00
Dev
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -14,6 +14,9 @@ const preview: Preview = {
                 date: /Date$/i,
             },
         },
+        nextjs: {
+            appDirectory: true,
+        },
     },
     decorators: [
         (Story) => (
diff --git a/README.md b/README.md
@@ -22,6 +22,12 @@ For headless CraftCMS projects there is a separate branch. Use `npm_config_yes=t
 - Sample Login-Page in the frontend code.
 - Docker setup
 
+## Storybook
+For developing, previewing and testing UI components we **highly recommend** using [storybook](https://storybook.js.org/). Support
+for storybook is built in. For examples how to write simple stories see `*.stories.tsx` files (e.g. `src/components/ui/Buttons.stories.tsx`).
+
+To start the storybook use `yarn storybook`.
+
 ## Builds
 - Builds are configured as `standalone` in next.config.mjs. SPA style builds (aka `output: "export"`) are not practical,
 since dynamic routes without `generateStaticParams()` are not supported (see https://nextjs.org/docs/app/building-your-application/deploying/static-exports#unsupported-features). This limitation would not allow any detail sites like `product/[productId]` because those cannot be generated statically.
@@ -116,8 +122,3 @@ For social media link images you can use this: https://nextjs.org/docs/app/api-r
 E.g. robots.txt, sitemap, manifest:
 See https://nextjs.org/docs/app/api-reference/file-conventions/metadata 
 
-## Storybook
-For developing and testing UI components we recommend using [storybook](https://storybook.js.org/). Support
-for storybook is built in. For examples how to write simple stories see `*.stories.tsx` files (e.g. `src/components/Buttons.stories.tsx`).
-
-To start the storybook use `yarn storybook`.
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "ts": "tsc --noEmit --incremental --preserveWatchOutput --pretty",
     "ts:watch": "npm run ts -- --watch --project tsconfig.watch.json",
     "prepare": "husky install",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006 --ci",
     "build-storybook": "storybook build"
   },
   "dependencies": {
@@ -52,13 +52,13 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",
-    "@storybook/addon-essentials": "^8.2.8",
-    "@storybook/addon-interactions": "^8.2.8",
-    "@storybook/addon-links": "^8.2.8",
-    "@storybook/blocks": "^8.2.8",
-    "@storybook/nextjs": "^8.2.8",
-    "@storybook/react": "^8.2.8",
-    "@storybook/test": "^8.2.8",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/nextjs": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/test": "^8.2.9",
     "@testing-library/react": "^16.0.0",
     "@types/negotiator": "^0.6.3",
     "@types/node": "^20",
@@ -76,7 +76,7 @@
     "husky": "^8.0.3",
     "license-checker": "^25.0.1",
     "postcss": "^8",
-    "storybook": "^8.2.8",
+    "storybook": "^8.2.9",
     "tailwindcss": "^3.4.1",
     "typescript": "^5",
     "vitest": "^2.0.5"
diff --git a/src/app/[lang]/(pages)/dashboard/ClientComponent.tsx b/src/app/[lang]/(pages)/dashboard/ClientComponent.tsx
@@ -1,48 +1,20 @@
 "use client";
 
-import NextLink from "next/link";
+import { useLocale } from "@/hooks/useLocale";
 import { t, tHtml } from "@/i18n/clientUtil";
-import { Button, Link } from "@mui/material";
-import { sleep } from "@/util/helpers";
-import { useGeneralStore } from "@/stores/generalStore";
 import { IntlLink } from "@/routing/IntlLink";
-import { useLocale } from "@/hooks/useLocale";
 import { Routes } from "@/routing/Routes";
 import { useIntlRouter } from "@/routing/useIntlRouter";
 import { useDebugStore } from "@/stores/debugStore";
+import { Button, Link } from "@mui/material";
+import NextLink from "next/link";
 
 // Stuff that has to be in a client component (uses t, tHtml)
 export const ClientComponent = () => {
-    const [setIsLoading, setError] = useGeneralStore((state) => [state.setIsLoading, state.setError]);
     const locale = useLocale();
     const router = useIntlRouter();
     const debugEnabled = useDebugStore((state) => state.enabled);
 
-    const loading = (
-        <>
-            <Button
-                variant="outlined"
-                onClick={async () => {
-                    setIsLoading(true);
-                    await sleep(100);
-                    setIsLoading(false);
-                }}
-            >
-                {t("button.loadingShort")}
-            </Button>
-            <Button
-                variant="outlined"
-                onClick={async () => {
-                    setIsLoading(true);
-                    await sleep(1000);
-                    setIsLoading(false);
-                }}
-            >
-                {t("button.loadingLong")}
-            </Button>
-        </>
-    );
-
     return (
         <>
             <IntlLink href={Routes.ROOT}>
@@ -61,15 +33,6 @@ export const ClientComponent = () => {
                 {t(locale === "de" ? "language.english" : "language.german")}
             </Button>
             <div>Debug: {debugEnabled ? "enabled" : "disabled"}</div>
-            {loading}
-            <Button
-                variant="outlined"
-                onClick={async () => {
-                    setError(t("error.general"));
-                }}
-            >
-                {t("button.showError")}
-            </Button>
             <Link href="/assets/third-party-licenses.txt" component={NextLink}>
                 {t("common.licenses")}
             </Link>
diff --git a/src/app/[lang]/(pages)/dashboard/ServerComponent.tsx b/src/app/[lang]/(pages)/dashboard/ServerComponent.tsx
@@ -1,4 +1,3 @@
-import { Icon } from "@/components/Icon";
 import { tServer } from "@/i18n/util";
 import { PageProps } from "@/types/PageProps";
 import { debug } from "@/util/debug";
@@ -16,16 +15,5 @@ export const ServerComponent = async ({ pageProps }: { pageProps: PageProps }) =
     await sleep(100);
     debug.log("loading ServerComponent done");
 
-    return (
-        <>
-            {tServer(pageProps.params.lang, "serverComponent.text")}
-            <h1 className="text-primary">H1 headline</h1>
-            <h2>H2 headline</h2>
-            <h3>H3 headline</h3>
-            <h4>H4 headline</h4>
-            <p>Paragraph body1</p>
-            <p className="body2">Paragraph body2</p>
-            <Icon name="close" />
-        </>
-    );
+    return <>{tServer(pageProps.params.lang, "serverComponent.text")}</>;
 };
diff --git a/src/components/ui/Buttons.stories.tsx b/src/components/ui/Buttons.stories.tsx
@@ -1,13 +1,13 @@
+import { Icon } from "@/components/Icon";
+import { SiteContainer } from "@/components/ui/SiteContainer";
 import { Button, IconButton } from "@mui/material";
 import { Meta, StoryObj } from "@storybook/react";
-import { SiteContainer } from "./SiteContainer";
-import { Icon } from "../Icon";
 
 export default {
     title: "Buttons",
 } satisfies Meta;
 
-export const Buttons: StoryObj = {
+export const Contained: StoryObj = {
     render: () => {
         return (
             <SiteContainer>
@@ -17,12 +17,30 @@ export const Buttons: StoryObj = {
                 <Button variant="contained" color="secondary">
                     Secondary
                 </Button>
+            </SiteContainer>
+        );
+    },
+};
+
+export const Outlined: StoryObj = {
+    render: () => {
+        return (
+            <SiteContainer>
                 <Button variant="outlined" color="primary">
                     Outlined Primary
                 </Button>
                 <Button variant="outlined" color="primary">
                     Outlined Secondary
                 </Button>
+            </SiteContainer>
+        );
+    },
+};
+
+export const Icons: StoryObj = {
+    render: () => {
+        return (
+            <SiteContainer>
                 <div className="flex gap-2 items-center">
                     Icon button:
                     <IconButton>
@@ -32,9 +50,4 @@ export const Buttons: StoryObj = {
             </SiteContainer>
         );
     },
-    parameters: {
-        nextjs: {
-            appDirectory: true,
-        },
-    },
 };
diff --git a/src/components/ui/ErrorToast.stories.tsx b/src/components/ui/ErrorToast.stories.tsx
@@ -1,14 +1,14 @@
+import { ErrorToast } from "@/components/ui/ErrorToast";
+import { SiteContainer } from "@/components/ui/SiteContainer";
 import { useGeneralStore } from "@/stores/generalStore";
 import { Button } from "@mui/material";
 import { Meta, StoryObj } from "@storybook/react";
-import { ErrorToast } from "./ErrorToast";
-import { SiteContainer } from "./SiteContainer";
 
 export default {
     title: "Error Toast",
 } satisfies Meta;
 
-export const TriggerError: StoryObj = {
+export const TriggerSingleError: StoryObj = {
     render: () => {
         const [setError] = useGeneralStore((state) => [state.setError]);
 
@@ -21,9 +21,4 @@ export const TriggerError: StoryObj = {
             </SiteContainer>
         );
     },
-    parameters: {
-        nextjs: {
-            appDirectory: true,
-        },
-    },
 };
diff --git a/src/components/ui/Inputs.stories.tsx b/src/components/ui/Inputs.stories.tsx
@@ -1,16 +1,16 @@
+import { CustomInputField } from "@/components/ui/CustomInputField";
+import { SiteContainer } from "@/components/ui/SiteContainer";
 import { tServer } from "@/i18n/util";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Meta, StoryObj } from "@storybook/react";
 import { useForm } from "react-hook-form";
 import * as Yup from "yup";
-import { CustomInputField } from "./CustomInputField";
-import { SiteContainer } from "./SiteContainer";
 
 export default {
     title: "Inputs",
 } satisfies Meta;
 
-export const Inputs: StoryObj = {
+export const EmailInput: StoryObj = {
     render: () => {
         const { control } = useForm<{ email: string }>({
             defaultValues: {
@@ -36,13 +36,9 @@ export const Inputs: StoryObj = {
                     type="email"
                     autoComplete="username"
                     required
+                    style={{ width: 300 }}
                 />
             </SiteContainer>
         );
     },
-    parameters: {
-        nextjs: {
-            appDirectory: true,
-        },
-    },
 };
diff --git a/src/components/ui/LoadingOverlay.stories.tsx b/src/components/ui/LoadingOverlay.stories.tsx
@@ -0,0 +1,43 @@
+import { SiteContainer } from "@/components/ui/SiteContainer";
+import { tServer } from "@/i18n/util";
+import { useGeneralStore } from "@/stores/generalStore";
+import { sleep } from "@/util/helpers";
+import { Button } from "@mui/material";
+import { Meta, StoryObj } from "@storybook/react";
+import { LoadingOverlay } from "./LoadingOverlay";
+
+export default {
+    title: "Loading Overlay",
+} satisfies Meta;
+
+export const TriggerOverlay: StoryObj = {
+    render: () => {
+        const [setIsLoading] = useGeneralStore((state) => [state.setIsLoading]);
+
+        return (
+            <SiteContainer>
+                <Button
+                    variant="outlined"
+                    onClick={async () => {
+                        setIsLoading(true);
+                        await sleep(100);
+                        setIsLoading(false);
+                    }}
+                >
+                    {tServer("de", "button.loadingShort")}
+                </Button>
+                <Button
+                    variant="outlined"
+                    onClick={async () => {
+                        setIsLoading(true);
+                        await sleep(2000);
+                        setIsLoading(false);
+                    }}
+                >
+                    {tServer("de", "button.loadingLong")}
+                </Button>
+                <LoadingOverlay />
+            </SiteContainer>
+        );
+    },
+};
diff --git a/src/styles/TextStyles.stories.tsx b/src/styles/TextStyles.stories.tsx
@@ -0,0 +1,30 @@
+import { SiteContainer } from "@/components/ui/SiteContainer";
+import { Meta, StoryObj } from "@storybook/react";
+
+export default {
+    title: "Text Styles",
+} satisfies Meta;
+
+export const Headlines: StoryObj = {
+    render: () => {
+        return (
+            <SiteContainer>
+                <h1 className="text-primary">H1 headline</h1>
+                <h2>H2 headline</h2>
+                <h3>H3 headline</h3>
+                <h4>H4 headline</h4>
+            </SiteContainer>
+        );
+    },
+};
+
+export const Paragraphs: StoryObj = {
+    render: () => {
+        return (
+            <SiteContainer>
+                <p>Paragraph body1</p>
+                <p className="body2">Paragraph body2</p>
+            </SiteContainer>
+        );
+    },
+};
diff --git a/src/styles/colors.stories.tsx b/src/styles/colors.stories.tsx
@@ -0,0 +1,24 @@
+import { SiteContainer } from "@/components/ui/SiteContainer";
+import { Meta, StoryObj } from "@storybook/react";
+import { Colors as C } from "./colors";
+
+export default {
+    title: "Colors",
+} satisfies Meta;
+
+export const ColorPalette: StoryObj = {
+    render: () => {
+        return (
+            <SiteContainer>
+                <div className="flex flex-col gap-4">
+                    {Object.entries(C).map((entry) => (
+                        <div key={entry[0]} className="flex justify-between">
+                            {`${entry[0]}: `}
+                            <div style={{ marginLeft: 16, width: 100, height: 32, backgroundColor: entry[1] }} />
+                        </div>
+                    ))}
+                </div>
+            </SiteContainer>
+        );
+    },
+};
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -2,11 +2,7 @@ import type { Config } from "tailwindcss";
 import plugin from "tailwindcss/plugin";
 
 const config: Config = {
-    content: [
-        "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-        "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-        "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-    ],
+    content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
     theme: {
         extend: {
             colors: {
diff --git a/yarn.lock b/yarn.lock
