refactor(#225): implemented new size units to the components

app/build/list/page.tsx

@@ -3,6 +3,8 @@ import { Platform, PlatformCode, PlatformQuery } from "@prisma/client";
 import { templates, samples } from "@/platforms";
 import Link from "next/link";
 
+export const dynamic = "force-static";
+
 export default async function QueryList() {
   const platforms = await prisma.platform.findMany({
     include: {

lib/@dsvgui/.storybook/main.ts

@@ -3,7 +3,7 @@
 import webpack from "webpack";
 
 const defaultConfig = {
-  stories: ["../components/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: ["../(components|grid)/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",

lib/@dsvgui/.storybook/preview.ts

@@ -1,4 +1,7 @@
 /** @type { import('@storybook/react').Preview } */
+
+import "react-grid-layout/css/styles.css";
+
 const preview = {
   parameters: {
     actions: { argTypesRegex: "^on[A-Z].*" },

lib/@dsvgui/components/article/index.stories.tsx

@@ -1,25 +1,203 @@
+import React from "react";
+
 import type { Meta, StoryObj } from "@storybook/react";
-import { Article } from "./index";
-import { readImageURL } from "@/lib/@dsvgui/utils";
+import { Article, articleDocumentPreferences, IArticle } from "./index";
+import { readImageURL } from "../../utils";
+import { Grid } from "../../utils/grid";
 
 const meta: Meta<typeof Article> = {
   title: "Article",
   component: Article,
-  render: ({ articles }, { loaded: { thumbnails } }) => {
+  render: ({ articles, document }, { loaded: { thumbnails } }) => {
     articles = articles.map((article, key) => ({
       ...article,
       thumbnail: thumbnails[key],
     }));
 
-    return <Article articles={articles} />;
+    return <Article articles={articles} document={document} />;
   },
 };
 export default meta;
 
-type Story = StoryObj<typeof Article>;
+type Story = StoryObj<IArticle>;
 
 export const Base: Story = {
   args: {
+    document: {
+      w: 5,
+      h: 4,
+      ...articleDocumentPreferences,
+    },
+    articles: [
+      {
+        meta: {
+          title: "Why JS?",
+          description: "I can't imagine a word without Javascript.",
+          author: "sametcodes",
+        },
+        thumbnail: {
+          value:
+            "https://res.cloudinary.com/practicaldev/image/fetch/s--uJ_UDNhq--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h2q16fucjwb4cla0ho05.png",
+          width: 150,
+          height: 150,
+        },
+        publish_date: "20.03.2023",
+        like_count: 3,
+        reading_time_minutes: 4,
+      },
+      {
+        meta: {
+          title: "Why not PHP?",
+          description: "I can't imagine a word with PHP.",
+          author: "eminkokdemir",
+        },
+        thumbnail: {
+          value:
+            "https://res.cloudinary.com/practicaldev/image/fetch/s--r3He9vYK--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fuc2yb3yi1680dgmfj25.png",
+          width: 150,
+          height: 150,
+        },
+        publish_date: "20.03.2023",
+        like_count: 3,
+        reading_time_minutes: 4,
+      },
+      {
+        meta: {
+          title: "Go is the best",
+          description: "What do and what do not do with Go.",
+          author: "ekurt",
+        },
+        thumbnail: {
+          value:
+            "https://res.cloudinary.com/practicaldev/image/fetch/s--Wzj_6u7j--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53d24e36pofszh6shj6t.png",
+          width: 150,
+          height: 150,
+        },
+        publish_date: "20.03.2023",
+        like_count: 3,
+        reading_time_minutes: 4,
+      },
+      {
+        meta: {
+          title: "Launching my TodoList App",
+          description:
+            "You can find the source code on my Github. I will be happy if you contribute to the project.",
+          author: "aydinfz",
+        },
+        thumbnail: {
+          value:
+            "https://res.cloudinary.com/practicaldev/image/fetch/s--_hLjVEgA--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewoetr6z83in1o5iu5uc.png",
+          width: 150,
+          height: 150,
+        },
+        publish_date: "20.03.2023",
+        like_count: 3,
+        reading_time_minutes: 4,
+      },
+    ],
+  },
+  loaders: [
+    async ({ args: { articles } }) => {
+      const thumbnails = await Promise.all(
+        articles.map((article) => readImageURL(article.thumbnail.value))
+      );
+      return { thumbnails };
+    },
+  ],
+};
+
+export const Compact: Story = {
+  args: {
+    document: {
+      w: 3,
+      h: 3,
+      ...articleDocumentPreferences,
+    },
+    articles: [
+      {
+        meta: {
+          title: "Why JS?",
+          description: "I can't imagine a word without Javascript.",
+          author: "sametcodes",
+        },
+        thumbnail: {
+          value:
+            "https://res.cloudinary.com/practicaldev/image/fetch/s--uJ_UDNhq--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h2q16fucjwb4cla0ho05.png",
+          width: 150,
+          height: 150,
+        },
+        publish_date: "20.03.2023",
+        like_count: 3,
+        reading_time_minutes: 4,
+      },
+      {
+        meta: {
+          title: "Why not PHP?",
+          description: "I can't imagine a word with PHP.",
+          author: "eminkokdemir",
+        },
+        thumbnail: {
+          value:
+            "https://res.cloudinary.com/practicaldev/image/fetch/s--r3He9vYK--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fuc2yb3yi1680dgmfj25.png",
+          width: 150,
+          height: 150,
+        },
+        publish_date: "20.03.2023",
+        like_count: 3,
+        reading_time_minutes: 4,
+      },
+      {
+        meta: {
+          title: "Go is the best",
+          description: "What do and what do not do with Go.",
+          author: "ekurt",
+        },
+        thumbnail: {
+          value:
+            "https://res.cloudinary.com/practicaldev/image/fetch/s--Wzj_6u7j--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53d24e36pofszh6shj6t.png",
+          width: 150,
+          height: 150,
+        },
+        publish_date: "20.03.2023",
+        like_count: 3,
+        reading_time_minutes: 4,
+      },
+      {
+        meta: {
+          title: "Launching my TodoList App",
+          description:
+            "You can find the source code on my Github. I will be happy if you contribute to the project.",
+          author: "aydinfz",
+        },
+        thumbnail: {
+          value:
+            "https://res.cloudinary.com/practicaldev/image/fetch/s--_hLjVEgA--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewoetr6z83in1o5iu5uc.png",
+          width: 150,
+          height: 150,
+        },
+        publish_date: "20.03.2023",
+        like_count: 3,
+        reading_time_minutes: 4,
+      },
+    ],
+  },
+  loaders: [
+    async ({ args: { articles } }) => {
+      const thumbnails = await Promise.all(
+        articles.map((article) => readImageURL(article.thumbnail.value))
+      );
+      return { thumbnails };
+    },
+  ],
+};
+
+export const WithoutImage: Story = {
+  args: {
+    document: {
+      w: 4,
+      h: 3,
+      ...articleDocumentPreferences,
+    },
     articles: [
       {
         meta: {
@@ -97,3 +275,7 @@ export const Base: Story = {
     },
   ],
 };
+
+export const WithGrid = () => {
+  return <Grid component={Article} stories={[Base, Compact, WithoutImage]} />;
+};