feat: added box component (#19)

trinhthinh388 · web-flow · commit 773391b37fc2 · 2025-01-12T21:08:02.000+07:00
diff --git a/.changeset/two-bats-warn.md b/.changeset/two-bats-warn.md
@@ -0,0 +1,5 @@
+---
+"@brifui/box": patch
+---
+
+first release
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -17,4 +17,7 @@ jobs:
         uses: ./.github/common-actions/install
 
       - name: Build packages
-        run: yarn build
+        run: yarn build
+      
+      - name: Test
+        run: yarn test
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,4 +1,13 @@
 {
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+  "eslint.workingDirectories": [
+    {
+      "pattern": "packages/*"
+    }
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.format.enable": false,
+  "editor.semanticHighlighting.enabled": false,
+  "typescript.tsserver.enableTracing": true
 }
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -2,6 +2,12 @@ nodeLinker: node-modules
 
 afterInstall: yarn after:install
 
+enableTransparentWorkspaces: false
+
+logFilters:
+  - code: YN002
+    level: discard
+
 plugins:
   - checksum: 0a2a35fbed2f33f0df1ceb1db51bf72554201f994eaecb86cbc62a295c3d05f7cc44fa8be8e64fc5e1c0bee4f529a17a0cc429ea9e3486ad467443291d5a8e3b
     path: .yarn/plugins/@yarnpkg/plugin-after-install.cjs
diff --git a/docs/app/page.tsx b/docs/app/page.tsx
@@ -1,7 +1,9 @@
+import { Box } from "@brifui/components";
+
 export default function Home() {
   return (
-    <div className="flex items-center justify-center min-h-screen">
-      <h1>Hello world!</h1>
-    </div>
+    <Box className="flex items-center justify-center min-h-screen">
+      <Box as="h1">Hello world!</Box>
+    </Box>
   );
 }
diff --git a/docs/package.json b/docs/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@brifui/components": "workspace:*",
     "next": "15.1.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
diff --git a/mocks/setup.ts b/mocks/setup.ts
@@ -0,0 +1,6 @@
+import "@testing-library/jest-dom/vitest";
+import { configure } from "@testing-library/react";
+
+configure({
+  reactStrictMode: true
+});
diff --git a/package.json b/package.json
@@ -12,9 +12,10 @@
   },
   "scripts": {
     "build": "turbo build",
-    "test": "turbo run test",
     "dev": "turbo dev",
     "lint": "turbo lint",
+    "test": "turbo run test",
+    "test:watch": "turbo run test:watch",
     "codegen": "turbo run codegen --concurrency 1 --ui stream",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "prepare": "husky",
@@ -30,22 +31,27 @@
     "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
     "@commitlint/cz-commitlint": "^19.6.1",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
     "clean-package": "^2.2.0",
     "commitizen": "^4.3.1",
     "husky": "^9.1.7",
     "inquirer": "9",
     "prettier": "^3.2.5",
     "tsup": "^8.3.5",
     "turbo": "^2.3.3",
-    "typescript": "5.5.4"
+    "typescript": "5.5.4",
+    "vitest": "^2.1.8"
   },
   "engines": {
     "node": ">=20.x"
   },
   "packageManager": "yarn@4.6.0",
   "workspaces": [
     "docs/",
-    "packages/*"
+    "packages/*",
+    "packages/components/*"
   ],
   "config": {
     "commitizen": {
diff --git a/packages/components/box/.npmignore b/packages/components/box/.npmignore
@@ -0,0 +1 @@
+*.backup
diff --git a/packages/components/box/README.md b/packages/components/box/README.md
@@ -0,0 +1 @@
+# @brifui/box
diff --git a/packages/components/box/clean-package.config.json b/packages/components/box/clean-package.config.json
@@ -0,0 +1,8 @@
+{
+  "indent": 2,
+  "replace": {
+    "main": "dist/index.cjs",
+    "module": "dist/index.js",
+    "types": "dist/index.d.ts"
+  }
+}
diff --git a/packages/components/box/eslint.config.mjs b/packages/components/box/eslint.config.mjs
@@ -0,0 +1,4 @@
+import { config } from "@brifui/eslint-config/react";
+
+/** @type {import("eslint").Linter.Config} */
+export default config;
diff --git a/packages/components/box/package.json b/packages/components/box/package.json
@@ -0,0 +1,53 @@
+{
+  "name": "@brifui/box",
+  "version": "0.0.0",
+  "description": "Box component - Brif UI",
+  "type": "module",
+  "sideEffects": false,
+  "keywords": [
+    "box",
+    "component",
+    "ui"
+  ],
+  "files": [
+    "dist",
+    "src"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "dev": "tsup src --watch",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore",
+    "test": "vitest run",
+    "test:watch": "vitest watch"
+  },
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "dependencies": {
+    "@brifui/core": "workspace:*"
+  },
+  "devDependencies": {
+    "@brifui/eslint-config": "workspace:*",
+    "@brifui/typescript-config": "workspace:*",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^19.0.5",
+    "@types/react-dom": "^19.0.3",
+    "global-jsdom": "^26.0.0",
+    "jsdom": "^26.0.0",
+    "typescript": "5.5.4"
+  },
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  }
+}
diff --git a/packages/components/box/src/box.spec.tsx b/packages/components/box/src/box.spec.tsx
@@ -0,0 +1,38 @@
+import { Box } from "./box";
+import { screen, render } from "@testing-library/react";
+
+describe("Box", () => {
+  it("should render as `div` by default", async () => {
+    render(<Box>Hello world</Box>);
+
+    const element = await screen.findByText("Hello world");
+
+    expect(element).toBeVisible();
+    expect(element.tagName.toLowerCase()).toBe("div");
+  });
+
+  describe("when change `as` to span", () => {
+    it("should render as `span`", async () => {
+      render(<Box as="span">Hello world</Box>);
+
+      const element = await screen.findByText("Hello world");
+      expect(element).toBeVisible();
+      expect(element.tagName.toLowerCase()).toBe("span");
+    });
+  });
+
+  describe("when set className", () => {
+    it("should render element with corresponding className", async () => {
+      render(
+        <Box as="span" className="text-red">
+          Hello world
+        </Box>
+      );
+
+      const element = await screen.findByText("Hello world");
+      expect(element).toBeVisible();
+      expect(element.tagName.toLowerCase()).toBe("span");
+      expect(element.classList).toContain("text-red");
+    });
+  });
+});
diff --git a/packages/components/box/src/box.tsx b/packages/components/box/src/box.tsx
@@ -0,0 +1,9 @@
+import { HTMLTag, PolymophicComponentProps } from "@brifui/core";
+import { createDynamicComponent } from "@brifui/core/utils";
+
+export type BoxProps<T extends HTMLTag> = PolymophicComponentProps<T>;
+
+export const Box = createDynamicComponent({
+  defaultTag: "div",
+  displayName: "Box"
+});
diff --git a/packages/components/box/src/index.ts b/packages/components/box/src/index.ts
@@ -0,0 +1 @@
+export * from "./box";
diff --git a/packages/components/box/tsconfig.json b/packages/components/box/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@brifui/typescript-config/react.json",
+  "compilerOptions": {
+    "types": ["vitest/globals", "@testing-library/jest-dom"]
+  },
+  "include": ["src", "scripts"],
+  "exclude": ["dist", "build", "node_modules"]
+}
diff --git a/packages/components/box/vitest.config.ts b/packages/components/box/vitest.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  plugins: [],
+  test: {
+    globals: true,
+    environment: "jsdom",
+    include: ["./src/**/*.spec.{ts,tsx}"],
+    setupFiles: ["../../../mocks/setup.ts"]
+  }
+});
diff --git a/packages/components/entry/.npmignore b/packages/components/entry/.npmignore
@@ -0,0 +1 @@
+*.backup
diff --git a/packages/components/entry/README.md b/packages/components/entry/README.md
@@ -0,0 +1 @@
+# @brifui/box
diff --git a/packages/components/entry/clean-package.config.json b/packages/components/entry/clean-package.config.json
@@ -0,0 +1,8 @@
+{
+  "indent": 2,
+  "replace": {
+    "main": "dist/index.cjs",
+    "module": "dist/index.js",
+    "types": "dist/index.d.ts"
+  }
+}
diff --git a/packages/components/entry/eslint.config.mjs b/packages/components/entry/eslint.config.mjs
@@ -0,0 +1,4 @@
+import { config } from "@brifui/eslint-config/react";
+
+/** @type {import("eslint").Linter.Config} */
+export default config;
diff --git a/packages/components/entry/package.json b/packages/components/entry/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "@brifui/components",
+  "version": "0.0.0",
+  "description": "Brif UI components",
+  "type": "module",
+  "sideEffects": false,
+  "keywords": [
+    "box",
+    "component",
+    "ui"
+  ],
+  "files": [
+    "dist",
+    "src"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "dev": "tsup src --watch",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "dependencies": {
+    "@brifui/box": "workspace:*",
+    "@brifui/core": "workspace:*"
+  },
+  "devDependencies": {
+    "@brifui/eslint-config": "workspace:*",
+    "@brifui/typescript-config": "workspace:*",
+    "@types/react": "^19.0.5",
+    "@types/react-dom": "^19.0.3",
+    "typescript": "5.5.4"
+  },
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  }
+}
diff --git a/packages/components/entry/src/index.ts b/packages/components/entry/src/index.ts
@@ -0,0 +1 @@
+export * from "@brifui/box";
diff --git a/packages/components/entry/tsconfig.json b/packages/components/entry/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@brifui/typescript-config/react.json",
+  "include": ["src", "scripts"],
+  "exclude": ["dist", "build", "node_modules"]
+}
diff --git a/packages/core/README.md b/packages/core/README.md
@@ -0,0 +1 @@
+# @brifui/core
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,12 +1,47 @@
 {
   "name": "@brifui/core",
   "version": "0.0.0",
-  "description": "Core library for Brif UI.",
+  "description": "Core library of Brif UI",
   "type": "module",
   "sideEffects": false,
+  "keywords": [
+    "brif",
+    "component",
+    "ui"
+  ],
+  "files": [
+    "dist",
+    "src"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "dev": "tsup src --watch",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./utils": "./src/utils/index.ts"
+  },
   "devDependencies": {
     "@brifui/eslint-config": "workspace:*",
     "@brifui/typescript-config": "workspace:*",
+    "@types/react": "^19.0.5",
+    "@types/react-dom": "^19.0.3",
     "typescript": "5.5.4"
+  },
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
   }
 }
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -0,0 +1 @@
+export * from "./types";
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -0,0 +1,7 @@
+import { JSX, ComponentPropsWithRef } from "react";
+
+export type HTMLTag = keyof JSX.IntrinsicElements;
+
+export type PolymophicComponentProps<T extends HTMLTag> = {
+  as?: T;
+} & ComponentPropsWithRef<T>;
diff --git a/packages/core/src/utils/create-dynamic-component.ts b/packages/core/src/utils/create-dynamic-component.ts
diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts
diff --git a/packages/typescript-config/react.json b/packages/typescript-config/react.json
diff --git a/turbo.json b/turbo.json
diff --git a/yarn.lock b/yarn.lock

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@brifui/box": patch
 +---
++
 +first release
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,13 @@`
`1`	`1`	`{`
`2`	`2`	`"editor.formatOnSave": true,`
`3`	`3`	`"editor.defaultFormatter": "dbaeumer.vscode-eslint",`
	`4`	`+ "eslint.workingDirectories": [`
	`5`	`+ {`
	`6`	`+ "pattern": "packages/*"`
	`7`	`+ }`
	`8`	`+ ],`
	`9`	`+ "typescript.tsdk": "node_modules/typescript/lib",`
	`10`	`+ "typescript.format.enable": false,`
	`11`	`+ "editor.semanticHighlighting.enabled": false,`
	`12`	`+ "typescript.tsserver.enableTracing": true`
`4`	`13`	`}`