Merge pull request #46 from goat-community/feature/scenario

feat: add scenario

.eslintrc.js

@@ -1 +1 @@
-module.exports = require("./packages/eslint-config-p4b");
+module.exports = require("./packages/eslint-config-p4b");

.prettierrc.js

@@ -0,0 +1,5 @@
+const baseConfig = require("./packages/prettier-config/prettier-preset");
+
+module.exports = {
+  ...baseConfig,
+};

.vscode/settings.json

@@ -17,5 +17,7 @@
   "i18n-ally.sortKeys": true,
   "i18n-ally.keepFulfilled": true,
   "i18n-ally.namespace": true,
-  "i18n-ally.keystyle": "nested"
+  "i18n-ally.keystyle": "nested",
+  "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
+  "editor.formatOnSave": true
 }

apps/storybook/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18-alpine AS installer
+FROM node:20-alpine AS installer
 RUN corepack enable && corepack prepare pnpm@8.6.0 --activate
 
 WORKDIR /app

apps/storybook/package.json

@@ -9,15 +9,15 @@
     "build": "storybook build"
   },
   "dependencies": {
-    "@p4b/keycloak-theme": "*",
-    "@p4b/ui": "*",
-    "@p4b/types": "*",
+    "@p4b/keycloak-theme": "workspace:*",
+    "@p4b/ui": "workspace:*",
+    "@p4b/types": "workspace:*",
     "next": "v13.4.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@p4b/tsconfig": "*",
+    "@p4b/tsconfig": "workspace:*",
     "eslint-config-p4b": "workspace:*",
     "eslint-plugin-storybook": "^0.6.12",
     "@storybook/addon-a11y": "^7.4.0",
@@ -41,4 +41,4 @@
     "storybook-dark-mode": "^3.0.0",
     "file-system-cache": "2.0.0"
   }
-}
+}

apps/storybook/pages/_app.tsx

@@ -1,6 +1,7 @@
-import "@/styles/globals.css";
 import type { AppProps } from "next/app";
 
+import "@/styles/globals.css";
+
 export default function App({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />;
 }

apps/storybook/pages/index.tsx

@@ -1,8 +1,9 @@
-import styles from "@/styles/Home.module.css";
 import { Inter } from "next/font/google";
 import Head from "next/head";
 import Image from "next/image";
 
+import styles from "@/styles/Home.module.css";
+
 const inter = Inter({ subsets: ["latin"] });
 
 export default function Home() {

apps/web/.size-limit.cjs

@@ -3,20 +3,16 @@
 
 let manifest;
 try {
-  manifest = require('./.next/build-manifest.json');
+  manifest = require("./.next/build-manifest.json");
 } catch (e) {
-  throw new Error(
-    'Cannot find a NextJs build folder, did you forget to build ?'
-  );
+  throw new Error("Cannot find a NextJs build folder, did you forget to build ?");
 }
 const pages = manifest.pages;
 
 const limitCfg = {
-  defaultSize: '150kb',
+  defaultSize: "150kb",
 };
 
-
-
 const getPageLimits = () => {
   let pageLimits = [];
   for (const [uri, paths] of Object.entries(pages)) {
@@ -32,8 +28,8 @@ const getPageLimits = () => {
 module.exports = [
   ...getPageLimits(),
   {
-    name: 'CSS',
-    path: ['.next/static/css/**/*.css'],
-    limit: '15 kB',
+    name: "CSS",
+    path: [".next/static/css/**/*.css"],
+    limit: "15 kB",
   },
-];
+];

apps/web/.vscode/settings.json

@@ -1,4 +1,4 @@
 {
   "typescript.tsdk": "../../node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true
-}
+}

apps/web/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18-alpine AS base
+FROM node:20-alpine AS base
 
 FROM base AS builder
 RUN apk add --no-cache libc6-compat

apps/web/app/[lng]/(dashboard)/catalog/page.tsx

@@ -1,7 +1,5 @@
 "use client";
 
-import ContentSearchBar from "@/components/dashboard/common/ContentSearchbar";
-import { useTranslation } from "@/i18n/client";
 import {
   Box,
   Button,
@@ -15,37 +13,33 @@ import {
   Typography,
   debounce,
 } from "@mui/material";
+import { useRouter } from "next/navigation";
+import { parseAsArrayOf, parseAsInteger, parseAsString, useQueryState } from "nuqs";
 import { useCallback, useMemo, useState } from "react";
+
+import { ICON_NAME } from "@p4b/ui/components/Icon";
+
+import { useTranslation } from "@/i18n/client";
+
 import { useCatalogLayers, useMetadataAggregated } from "@/lib/api/layers";
+import type { PaginatedQueryParams } from "@/lib/validations/common";
 import type { GetDatasetSchema } from "@/lib/validations/layer";
 import { datasetMetadataAggregated } from "@/lib/validations/layer";
-import { ICON_NAME } from "@p4b/ui/components/Icon";
-import {
-  parseAsString,
-  parseAsArrayOf,
-  useQueryState,
-  parseAsInteger,
-} from "nuqs";
-import type { PaginatedQueryParams } from "@/lib/validations/common";
-import FilterPanel from "@/components/dashboard/catalog/FilterPanel";
+
 import EmptySection from "@/components/common/EmptySection";
-import { useRouter } from "next/navigation";
 import CatalogDatasetCard, { METADATA_HEADER_ICONS } from "@/components/dashboard/catalog/CatalogDatasetCard";
+import FilterPanel from "@/components/dashboard/catalog/FilterPanel";
+import ContentSearchBar from "@/components/dashboard/common/ContentSearchbar";
 
 const Catalog = () => {
   const { t } = useTranslation("common");
   const router = useRouter();
-  const useQueryStateArray = (key: string) =>
-    useQueryState(key, parseAsArrayOf(parseAsString));
+  const useQueryStateArray = (key: string) => useQueryState(key, parseAsArrayOf(parseAsString));
   const [typeValue, setTypeValue] = useQueryStateArray("type");
-  const [dataCategoryValue, setDataCategoryValue] =
-    useQueryStateArray("data_category");
-  const [distributorNameValue, setDistributorNameValue] =
-    useQueryStateArray("distributor_name");
-  const [geographicalCodeValue, setGeographicalCodeValue] =
-    useQueryStateArray("geographical_code");
-  const [languageCodeValue, setLanguageCodeValue] =
-    useQueryStateArray("language_code");
+  const [dataCategoryValue, setDataCategoryValue] = useQueryStateArray("data_category");
+  const [distributorNameValue, setDistributorNameValue] = useQueryStateArray("distributor_name");
+  const [geographicalCodeValue, setGeographicalCodeValue] = useQueryStateArray("geographical_code");
+  const [languageCodeValue, setLanguageCodeValue] = useQueryStateArray("language_code");
   const [licenseValue, setLicenseValue] = useQueryStateArray("license");
   const [searchText, setSearchText] = useQueryState("search", parseAsString);
 
@@ -89,7 +83,7 @@ const Catalog = () => {
       setLanguageCodeValue,
       licenseValue,
       setLicenseValue,
-    ],
+    ]
   );
   const datasetSchemaValues = useMemo(() => {
     const keys = Object.keys(filterOptions);
@@ -102,29 +96,21 @@ const Catalog = () => {
       },
       {
         in_catalog: true,
-      },
+      }
     );
   }, [filterOptions]);
 
-  const [queryParamPage, setQueryParamPage] = useQueryState(
-    "page",
-    parseAsInteger.withDefault(1),
-  );
+  const [queryParamPage, setQueryParamPage] = useQueryState("page", parseAsInteger.withDefault(1));
 
-  const [datasetSchema, setDatasetSchema] =
-    useState<GetDatasetSchema>(datasetSchemaValues);
+  const [datasetSchema, setDatasetSchema] = useState<GetDatasetSchema>(datasetSchemaValues);
   const [queryParams, setQueryParams] = useState<PaginatedQueryParams>({
     order: "descendent",
     order_by: "updated_at",
     size: 10,
     page: queryParamPage || 1,
   });
-  const { metadata, isLoading: filtersLoading } =
-    useMetadataAggregated(datasetSchema);
-  const { layers: datasets, isLoading: datasetsLoading } = useCatalogLayers(
-    queryParams,
-    datasetSchema,
-  );
+  const { metadata, isLoading: filtersLoading } = useMetadataAggregated(datasetSchema);
+  const { layers: datasets, isLoading: datasetsLoading } = useCatalogLayers(queryParams, datasetSchema);
 
   const handleToggle = useCallback(
     (filterType: string, value: string) => {
@@ -146,7 +132,7 @@ const Catalog = () => {
       }
       setDatasetSchema(newDatasetSchema);
     },
-    [datasetSchema, filterOptions],
+    [datasetSchema, filterOptions]
   );
 
   const debouncedSetSearchText = debounce((value) => {
@@ -168,31 +154,28 @@ const Catalog = () => {
           justifyContent: "space-between",
           alignItems: "center",
           mb: 8,
-        }}
-      >
+        }}>
         <Typography variant="h6">{t("catalog")}</Typography>
       </Box>
       <Grid container justifyContent="space-between" spacing={4}>
         <Grid item xs={3}>
           <Paper elevation={3}>
             <Stack sx={{ mt: 0 }}>
-              {Object.keys(datasetMetadataAggregated.shape).map(
-                (key, index) => {
-                  return (
-                    <Stack key={key}>
-                      {index !== 0 && <Divider sx={{ py: 0, my: 0 }} />}
-                      <FilterPanel
-                        filterValues={filterOptions[key].value}
-                        onToggle={(value) => handleToggle(key, value)}
-                        filterType={key}
-                        values={metadata ? metadata[key] : []}
-                        isLoading={filtersLoading}
-                        icon={METADATA_HEADER_ICONS[key]}
-                      />
-                    </Stack>
-                  );
-                },
-              )}
+              {Object.keys(datasetMetadataAggregated.shape).map((key, index) => {
+                return (
+                  <Stack key={key}>
+                    {index !== 0 && <Divider sx={{ py: 0, my: 0 }} />}
+                    <FilterPanel
+                      filterValues={filterOptions[key].value}
+                      onToggle={(value) => handleToggle(key, value)}
+                      filterType={key}
+                      values={metadata ? metadata[key] : []}
+                      isLoading={filtersLoading}
+                      icon={METADATA_HEADER_ICONS[key]}
+                    />
+                  </Stack>
+                );
+              })}
             </Stack>
           </Paper>
         </Grid>
@@ -219,27 +202,19 @@ const Catalog = () => {
 
             {datasets && datasets?.total === 0 && (
               <Stack sx={{ mt: 10 }} alignItems="center" spacing={4}>
-                <EmptySection
-                  label={t("no_catalog_dataset_found")}
-                  icon={ICON_NAME.DATABASE}
-                />
-                <Typography variant="body1">
-                  {t("try_different_filters")}
-                </Typography>
+                <EmptySection label={t("no_catalog_dataset_found")} icon={ICON_NAME.DATABASE} />
+                <Typography variant="body1">{t("try_different_filters")}</Typography>
                 <Stack spacing={2} direction="column">
                   <Divider />
-                  <Typography variant="body1">
-                    {t("common:no_catalog_dataset_found_description")}
-                  </Typography>
+                  <Typography variant="body1">{t("common:no_catalog_dataset_found_description")}</Typography>
                 </Stack>
                 <Button
                   variant="outlined"
                   color="primary"
                   sx={{ mt: 2 }}
                   onClick={() => {
                     window.open("https://plan4better.de/en/contact/", "_blank");
-                  }}
-                >
+                  }}>
                   <Typography variant="body1" fontWeight="bold" color="inherit">
                     {t("contact_us")}
                   </Typography>
@@ -271,12 +246,7 @@ const Catalog = () => {
                 ))}
 
               {!datasetsLoading && datasets && datasets?.items.length > 0 && (
-                <Stack
-                  direction="row"
-                  justifyContent="center"
-                  alignItems="center"
-                  sx={{ p: 4 }}
-                >
+                <Stack direction="row" justifyContent="center" alignItems="center" sx={{ p: 4 }}>
                   <Pagination
                     count={datasets.pages || 1}
                     size="large"