Add force theme component to easily create page with forced theme

Author: mayank1513

.tkb

@@ -14,7 +14,7 @@
     "J1yONFe2BVs5GbQJj1SXG": {
       "id": "J1yONFe2BVs5GbQJj1SXG",
       "description": "Add ThemeContainer server component",
-      "columnId": "column-todo"
+      "columnId": "column-done"
     },
     "G-1H47JpSI69kav1qZ-kp": {
       "id": "G-1H47JpSI69kav1qZ-kp",
@@ -27,7 +27,6 @@
       "id": "column-todo",
       "title": "To do",
       "tasksIds": [
-        "J1yONFe2BVs5GbQJj1SXG",
         "G-1H47JpSI69kav1qZ-kp"
       ]
     },
@@ -40,6 +39,7 @@
       "id": "column-done",
       "title": "Done",
       "tasksIds": [
+        "J1yONFe2BVs5GbQJj1SXG",
         "p1R-Q4atxMo-29mSa7mb6",
         "-FlzW8htLo-6jz5-ZqjEx"
       ]

lib/nthul/src/server/force-theme/force-theme.test.tsx

@@ -0,0 +1,17 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, test } from "vitest";
+import { ForceTheme } from "./force-theme";
+
+describe("force-theme", () => {
+  afterEach(cleanup);
+
+  test("check specificity class exists", ({ expect }) => {
+    render(<ForceTheme />);
+    expect(screen.getByTestId("force-theme").classList).toContain("nth-scoped");
+  });
+
+  test("force theme", ({ expect }) => {
+    render(<ForceTheme theme="my-theme" />);
+    expect(screen.getByTestId("force-theme").classList).toContain("th-my-theme");
+  });
+});

lib/nthul/src/server/force-theme/force-theme.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import type { HTMLProps } from "react";
+
+interface ForceThemeProps extends HTMLProps<HTMLElement> {
+  /** @defaultValue 'div' */
+  tag?: keyof JSX.IntrinsicElements;
+  children?: React.ReactNode;
+  theme?: string;
+  colorScheme?: "dark" | "light";
+  /** provide styles object if you are using CSS/SCSS modules. */
+  styles?: Record<string, string>;
+}
+
+/**
+ * # ForceTheme
+ *
+ */
+export function ForceTheme({ children, tag, theme, colorScheme, styles, className, ...props }: ForceThemeProps) {
+  let classNames = [theme ? `th-${theme}` : "", colorScheme ?? "", "nth-scoped"];
+  if (styles) classNames = classNames.map(cls => styles[cls] ?? cls);
+  if (className) classNames.push(className);
+  const Tag = tag ?? "div";
+  return (
+    // @ts-expect-error: too complex types for props.
+    <Tag {...props} className={classNames.join(" ")} data-testid="force-theme">
+      {children}
+    </Tag>
+  );
+}

lib/nthul/src/server/force-theme/index.ts

@@ -0,0 +1 @@
+export * from "./force-theme";

lib/nthul/src/server/index.ts

@@ -5,4 +5,5 @@
  * */
 
 // server component exports
+export * from "./force-theme";
 export * from "./server-target";

lib/nthul/src/server/server-target/server-target.test.tsx

@@ -37,11 +37,11 @@ describe("server-target", () => {
       },
     };
     const styles = {
-      [THEME]: `moduled-${THEME}`,
+      [`th-${THEME}`]: `moduled-${THEME}`,
       dark: `moduled-dark`,
       light: `moduled-light`,
     };
     render(<ServerTarget styles={styles} />);
-    expect(screen.getByTestId("server-target").className).toBe(`th-${styles[THEME]} ${styles[COLOR_SCHEME]} `);
+    expect(screen.getByTestId("server-target").className).toBe(`${styles[`th-${THEME}`]} ${styles[COLOR_SCHEME]} `);
   });
 });

lib/nthul/turbo/generators/templates/component.test.hbs

@@ -2,7 +2,7 @@ import { cleanup, render, screen } from "@testing-library/react";
 import { afterEach, describe, test } from "vitest";
 import { {{ pascalCase name }} } from "./{{ kebabCase name }}";
 
-describe.concurrent("{{ kebabCase name }}", () => {
+describe("{{ kebabCase name }}", () => {
 	afterEach(cleanup);
 
 	test("check if h1 heading exists", ({ expect }) => {