Use css modules

Author: alexbaumgertner

.storybook/main.ts

@@ -12,6 +12,38 @@ const config: StorybookConfig = {
     name: "@storybook/nextjs",
     options: {},
   },
+  webpackFinal: (config: any = { module: { rules: [] } }) => {
+    if (!config.module?.rules) {
+      config.module = { rules: [] };
+    }
+
+    const cssRule = config.module.rules.find((rule: any) =>
+      rule?.test?.toString().includes("css")
+    );
+
+    if (cssRule) {
+      cssRule.test = /\.css$/;
+      cssRule.exclude = /\.module\.css$/;
+    }
+
+    // Add specific rule for CSS Modules
+    config.module.rules.push({
+      test: /\.module\.css$/,
+      use: [
+        "style-loader",
+        {
+          loader: "css-loader",
+          options: {
+            modules: {
+              localIdentName: "[name]__[local]___[hash:base64:5]",
+            },
+          },
+        },
+      ],
+    });
+
+    return config;
+  },
 };
 
 export default config;

components/TimeSpanBar/TimeSpanBar.css

@@ -0,0 +1,57 @@
+.component {
+  border: 1px solid #fae6c6;
+  padding: 12px 16px;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.header {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.content {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+}
+
+.start {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.end {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.image {
+  width: 64px;
+  height: 64px;
+}
+
+.label {
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.date {
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.events {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.event {
+  font-size: 14px;
+  font-weight: 400;
+}

components/TimeSpanBar/TimeSpanBar.module.css

@@ -1,6 +1,6 @@
 import React from "react";
 
-import "./TimeSpanBar.css";
+import classes from "./TimeSpanBar.module.css";
 
 type TimeSpanBarProps = {
   startDate: Date;
@@ -21,32 +21,23 @@ const TimeSpanBar = ({
   image,
 }: TimeSpanBarProps) => {
   return (
-    <div className="time-span-bar">
-      <div className="time-span-bar__header">{header}</div>
-      <div className="time-span-bar__content">
-        <div className="time-span-bar__start-date">
-          <div className="time-span-bar__label">Дата рождения</div>
-          <div className="time-span-bar__date">
-            {startDate.toLocaleDateString()}
-          </div>
+    <div className={classes.component}>
+      <div className={classes.header}>{header}</div>
+      <div className={classes.content}>
+        <div className={classes.start}>
+          <div className={classes.label}>Дата рождения</div>
+          <div className={classes.date}>{startDate.toLocaleDateString()}</div>
         </div>
-        <img
-          width={64}
-          src={image}
-          alt={header}
-          className="time-span-bar__image"
-        />
-        <div className="time-span-bar__events">
+        <img width={64} src={image} alt={header} className={classes.image} />
+        <div className={classes.events}>
           {events.map((event) => (
-            <div className="time-span-bar__event">{event.name}</div>
+            <div className={classes.event}>{event.name}</div>
           ))}
         </div>
         {endDate && (
-          <div className="time-span-bar__end-date">
-            <div className="time-span-bar__label">Дата смерти</div>
-            <div className="time-span-bar__date">
-              {endDate.toLocaleDateString()}
-            </div>
+          <div className={classes.end}>
+            <div className={classes.label}>Дата смерти</div>
+            <div className={classes.date}>{endDate.toLocaleDateString()}</div>
           </div>
         )}
       </div>

components/TimeSpanBar/TimeSpanBar.tsx

@@ -15,6 +15,6 @@
     "jsx": "preserve",
     "incremental": true
   },
-  "include": ["**/*.ts", "**/*.tsx"],
+  "include": ["**/*.ts", "**/*.tsx", "types/**/*.d.ts"],
   "exclude": ["node_modules"]
 }

tsconfig.json

@@ -0,0 +1,4 @@
+declare module "*.module.css" {
+  const classes: { [key: string]: string };
+  export default classes;
+}