refactor: Continue refactoring after migrating to rsbuild

services/www/.config/storybook/main.ts

@@ -18,10 +18,10 @@ const config: StorybookConfig = {
   rsbuildFinal: (config) => {
     config.resolve ||= {};
     config.resolve.alias = {
-        ...config.resolve.alias,
-        '#': path.resolve(__dirname, '../src'),
-        '@ermnvldmr/stl': path.resolve(__dirname, '../../../packages/stl/src'),
-        '@ermnvldmr/ui': path.resolve(__dirname, '../../../packages/ui/src'),
+      ...config.resolve.alias,
+      '#': path.resolve(__dirname, '../src'),
+      '@ermnvldmr/stl': path.resolve(__dirname, '../../../packages/stl/src'),
+      '@ermnvldmr/ui': path.resolve(__dirname, '../../../packages/ui/src'),
     };
 
     // Add Babel plugin with istanbul for coverage
@@ -47,4 +47,4 @@ const config: StorybookConfig = {
   },
 };
 
-export default config;
+export default config;

services/www/.config/storybook/preview.tsx

@@ -1,5 +1,5 @@
 import type { Preview } from '@storybook/react';
-import '#/global.css';
+import '#/static/global.css';
 
 const preview: Preview = {
   parameters: {

services/www/content/registry.ts

@@ -9,11 +9,23 @@ export interface Article {
   updatedDate?: Date;
   tags?: string[];
   image?: string;
-  Component: React.ComponentType<{ components?: Record<string, React.ComponentType<any>> }>;
+  Component: React.ComponentType<{ components?: Record<string, React.ComponentType<unknown>> }>;
 }
 
-function register(module: any, slug: string): Article {
-  const { frontmatter, default: Component } = module;
+interface MdxModule {
+  frontmatter: {
+    title: string;
+    description?: string;
+    createdDate: string;
+    updatedDate?: string;
+    tags?: string[];
+    image?: string;
+  };
+  default: React.ComponentType<{ components?: Record<string, React.ComponentType<unknown>> }>;
+}
+
+function register(module: unknown, slug: string): Article {
+  const { frontmatter, default: Component } = module as MdxModule;
   return {
     slug,
     title: frontmatter.title,

services/www/rsbuild.config.ts

@@ -1,4 +1,4 @@
-import { defineServiceConfig } from '@ermnvldmr/rsbuild-config';
+import { defineServiceConfig } from '@ermnvldmr/rsbuild-config/dev';
 import { pluginMdx } from '@rsbuild/plugin-mdx';
 import remarkFrontmatter from 'remark-frontmatter';
 import remarkMdxFrontmatter from 'remark-mdx-frontmatter';

services/www/src/app/HomePage.tsx

@@ -1,26 +0,0 @@
-import { Container, Header, Paragraph, Link, VStack } from '@ermnvldmr/ui';
-import React from 'react';
-
-export const HomePage = (): React.JSX.Element => (
-  <Container as="main" className="flex h-full w-full justify-center p-4">
-    <VStack gap={4}>
-      <Header level={2}>Welcome to my page!</Header>
-      <Paragraph>
-        If you see this page, my website is successfuly installed and working.
-        <br />
-        It will be further configured.
-      </Paragraph>
-      <Paragraph>
-        For the source code and support please refer to{' '}
-        <Link href="https://github.com/deytenit/ermnvldmr.com/">ermnvldmr.com monorepo</Link>.
-        <br />
-        Pictures of mine are available at{' '}
-        <Link href="https://ermnvldmr.com/instagram">@deytenit</Link>.
-      </Paragraph>
-      <Paragraph>
-        Check out my <Link href="/articles">thoughts and articles on various matters</Link>.
-      </Paragraph>
-      <Paragraph italic>Thank you for visiting!</Paragraph>
-    </VStack>
-  </Container>
-);

services/www/src/app/articles/2026/ArticlePage.tsx

@@ -1,26 +0,0 @@
-import { MARKDOWN_COMPONENTS } from '@ermnvldmr/ui';
-import React from 'react';
-
-import { articles } from '../../../../content/registry';
-import { ArticleLayout } from '../../../layouts/ArticleLayout/ArticleLayout';
-
-export const ArticlePage = (): React.JSX.Element => {
-  const article = articles['test-article'];
-
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  if (!article) {
-    throw new Error('Article not found');
-  }
-
-  return (
-    <ArticleLayout
-      createdDate={article.createdDate}
-      description={article.description}
-      tags={article.tags}
-      title={article.title}
-      updatedDate={article.updatedDate}
-    >
-      <article.Component components={MARKDOWN_COMPONENTS} />
-    </ArticleLayout>
-  );
-};

services/www/src/app/articles/2026/test-article.tsx

@@ -1,6 +1,9 @@
-import { ArticlePage } from './ArticlePage';
+import { MARKDOWN_COMPONENTS } from '@ermnvldmr/ui';
+import React from 'react';
+
 import { articles } from '../../../../content/registry';
-import { createPage } from '../../../lib/createPage';
+import { ArticleLayout } from '../../../components/layouts/ArticleLayout/ArticleLayout';
+import { createPage } from '../../../lib/core/createPage';
 
 const article = articles['test-article'];
 
@@ -9,7 +12,22 @@ if (!article) {
   throw new Error('Article not found');
 }
 
-createPage(ArticlePage, {
-  title: `${article.title} - Vladimir Eremin`,
-  description: article.description,
-});
+createPage(
+  function TestArticlePage(): React.JSX.Element {
+    return (
+      <ArticleLayout
+        createdDate={article.createdDate}
+        description={article.description}
+        tags={article.tags}
+        title={article.title}
+        updatedDate={article.updatedDate}
+      >
+        <article.Component components={MARKDOWN_COMPONENTS} />
+      </ArticleLayout>
+    );
+  },
+  {
+    title: `${article.title} - Vladimir Eremin`,
+    description: article.description,
+  }
+);

services/www/src/app/articles/ArticlesList.tsx

@@ -1,36 +0,0 @@
-import { Container, Header, Link, Separator, Article } from '@ermnvldmr/ui';
-import React from 'react';
-
-import { sortedArticles } from '../../../content/registry';
-
-export const ArticlesList = (): React.JSX.Element => (
-  <Container as="main" className="mx-auto max-w-5xl px-6 py-20">
-    <Header className="mb-12 text-center" level={1}>
-      Articles
-    </Header>
-    <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
-      {sortedArticles.map((article, index) => (
-        <React.Fragment key={article.slug}>
-          {index > 0 && index % 2 === 0 && (
-            <div className="col-span-1 py-8 md:col-span-2">
-              <Separator className="w-full" type="double" />
-            </div>
-          )}
-          <Link className="group block h-full no-underline!" href={`/articles/${article.slug}`}>
-            <Article
-              additionalText={article.tags?.join(' • ')}
-              headline={article.title}
-              subHeadline={article.createdDate.toLocaleDateString(undefined, {
-                year: 'numeric',
-                month: 'long',
-                day: 'numeric',
-              })}
-            >
-              {article.description}
-            </Article>
-          </Link>
-        </React.Fragment>
-      ))}
-    </div>
-  </Container>
-);

services/www/src/app/articles/index.tsx

@@ -1,8 +1,46 @@
-import { ArticlesList } from './ArticlesList';
-import { createPage } from '../../lib/createPage';
-import { SITE_TITLE } from '../../shared/constants';
+import { Container, Header, Link, Separator, Article } from '@ermnvldmr/ui';
+import React from 'react';
 
-createPage(ArticlesList, {
-  title: `Articles | ${SITE_TITLE}`,
-  description: 'Browse all articles and projects.',
-});
+import { sortedArticles } from '../../../content/registry';
+import { createPage } from '../../lib/core/createPage';
+import { SITE_TITLE } from '../../lib/shared/constants';
+
+createPage(
+  function ArticlesList(): React.JSX.Element {
+    return (
+      <Container as="main" className="mx-auto max-w-5xl px-6 py-20">
+        <Header className="mb-12 text-center" level={1}>
+          Articles
+        </Header>
+        <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
+          {sortedArticles.map((article, index) => (
+            <React.Fragment key={article.slug}>
+              {index > 0 && index % 2 === 0 && (
+                <div className="col-span-1 py-8 md:col-span-2">
+                  <Separator className="w-full" type="double" />
+                </div>
+              )}
+              <Link className="group block h-full no-underline!" href={`/articles/${article.slug}`}>
+                <Article
+                  additionalText={article.tags?.join(' • ')}
+                  headline={article.title}
+                  subHeadline={article.createdDate.toLocaleDateString(undefined, {
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric',
+                  })}
+                >
+                  {article.description}
+                </Article>
+              </Link>
+            </React.Fragment>
+          ))}
+        </div>
+      </Container>
+    );
+  },
+  {
+    title: `Articles | ${SITE_TITLE}`,
+    description: 'Browse all articles and projects.',
+  }
+);

services/www/src/app/index.tsx

@@ -1,5 +1,34 @@
-import { HomePage } from './HomePage';
-import { createPage } from '../lib/createPage';
-import { SITE_DESCRIPTION, SITE_TITLE } from '../shared/constants';
+import { Container, Header, Paragraph, Link, VStack } from '@ermnvldmr/ui';
+import React from 'react';
 
-createPage(HomePage, { title: SITE_TITLE, description: SITE_DESCRIPTION });
+import { createPage } from '../lib/core/createPage';
+import { SITE_DESCRIPTION, SITE_TITLE } from '../lib/shared/constants';
+
+createPage(
+  function HomePage(): React.JSX.Element {
+    return (
+      <Container as="main" className="flex h-full w-full justify-center p-4">
+        <VStack gap={4}>
+          <Header level={2}>Welcome to my page!</Header>
+          <Paragraph>
+            If you see this page, my website is successfuly installed and working.
+            <br />
+            It will be further configured.
+          </Paragraph>
+          <Paragraph>
+            For the source code and support please refer to{' '}
+            <Link href="https://github.com/deytenit/ermnvldmr.com/">ermnvldmr.com monorepo</Link>.
+            <br />
+            Pictures of mine are available at{' '}
+            <Link href="https://ermnvldmr.com/instagram">@deytenit</Link>.
+          </Paragraph>
+          <Paragraph>
+            Check out my <Link href="/articles">thoughts and articles on various matters</Link>.
+          </Paragraph>
+          <Paragraph italic>Thank you for visiting!</Paragraph>
+        </VStack>
+      </Container>
+    );
+  },
+  { title: SITE_TITLE, description: SITE_DESCRIPTION }
+);

services/www/src/global.css

@@ -1,2 +0,0 @@
-@import '../../../packages/ui/src/styles/index.css';
-@source "../../../packages/ui/src";

services/www/src/lib/core/createPage.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import '../global.css'; // Ensure global styles are available
+import '../../static/global.css'; // Ensure global styles are available
 
 /**
  *

services/www/src/lib/shared/constants.ts

@@ -0,0 +1,9 @@
+/**
+ * The main title of the website.
+ */
+export const SITE_TITLE = 'Vladimir Eremin';
+
+/**
+ * The main description of the website.
+ */
+export const SITE_DESCRIPTION = 'Thoughts and creations of mine';

services/www/src/shared/constants.ts

@@ -1,8 +0,0 @@
-export /**
-        *
-        */
-const SITE_TITLE = 'Vladimir Eremin';
-export /**
-        *
-        */
-const SITE_DESCRIPTION = 'Thoughts and creations of mine';

services/www/src/static/global.css

@@ -0,0 +1,2 @@
+@import '../../../../packages/ui/src/static/styles.css';
+@source "../../../../packages/ui/src/components";

services/www/vitest.config.ts

@@ -1,4 +1,4 @@
-import { reactVitestConfig } from '@ermnvldmr/rsbuild-config/vitest';
+import { reactVitestConfig } from '@ermnvldmr/rsbuild-config/dev';
 import { mergeConfig } from 'vitest/config';
 
 export default mergeConfig(reactVitestConfig, {