chore(visualization): replace emotion to tailwindcss (#448)

# Overview

<!--
    A clear and concise description of what this pr is about.
 -->

Remove emotion, jsxcss

## PR Checklist

- [x] I did below actions if need

1. I read the [Contributing
Guide](https://github.com/suspensive/react/blob/main/CONTRIBUTING.md)
2. I added documents and tests.

.eslintrc.js

@@ -0,0 +1,4 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+}

.lintstagedrc

@@ -1,3 +1,3 @@
 {
-  "*.{ts,tsx}": ["prettier --write"]
+  "*.{ts,tsx}": ["prettier --write --ignore-unknown"]
 }

docs/v1/package.json

@@ -33,10 +33,10 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@next/eslint-plugin-next": "14.0.3",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.15",
     "autoprefixer": "^10.4.16",
-    "eslint-config-next": "14.0.3",
     "postcss": "^8.4.32",
     "tailwindcss": "^3.3.5"
   }

docs/v1/prettier.config.mjs

@@ -0,0 +1,8 @@
+import rootConfig from '../../prettier.config.mjs'
+
+/** @type {import("prettier").Config} */
+export default {
+  ...rootConfig,
+  plugins: ['prettier-plugin-tailwindcss'],
+  tailwindConfig: './tailwind.config.js',
+}

docs/v1/src/components/HomePage.tsx

@@ -17,23 +17,23 @@ export const HomePage = ({
 }) => {
   return (
     <div className="pb-20">
-      <div className="flex flex-col justify-center items-center pt-11 gap-8 text-center">
+      <div className="flex flex-col items-center justify-center gap-8 pt-11 text-center">
         <Image src="/img/logo_background_star.png" alt="Suspensive with star" width={400} height={241} />
         <div className="flex flex-col items-center gap-4">
           <div className="relative text-5xl font-bold">
-            <span>{title}</span> <span className="absolute right text-sm">v{version}</span>
+            <span>{title}</span> <span className="right absolute text-sm">v{version}</span>
           </div>
           <p className="text-3xl">{description}</p>
         </div>
         <Link href="/docs/why">
-          <button className="bg-gray-800 text-xl font-bold rounded-xl py-3 px-10">{buttonText}</button>
+          <button className="rounded-xl bg-gray-800 px-10 py-3 text-xl font-bold">{buttonText}</button>
         </Link>
       </div>
 
       <div className="h-14"></div>
-      <div className="flex flex-col md:flex-row justify-between items-start gap-8">
+      <div className="flex flex-col items-start justify-between gap-8 md:flex-row">
         {items.map(({ title, desc }) => (
-          <div className="flex flex-1 flex-col justify-center items-center text-center gap-3" key={title}>
+          <div className="flex flex-1 flex-col items-center justify-center gap-3 text-center" key={title}>
             <div className="text-xl font-bold">{title}</div>
             <p className="text-lg">{desc}</p>
           </div>

docs/v1/tailwind.config.js

@@ -1,10 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}', './theme.config.tsx'],
   theme: {
     extend: {
       backgroundImage: {

docs/v1/theme.config.tsx

@@ -31,9 +31,7 @@ const config: DocsThemeConfig = {
         <Image src="/img/logo_dark.png" width={34} height={34} alt="suspensive logo" />
         <div className="relative">
           <strong>Suspensive</strong>
-          <span className="absolute right" style={{ fontSize: 8 }}>
-            v1
-          </span>
+          <span className="right absolute text-[8px]">v1</span>
         </div>
       </div>
     )

docs/v2/package.json

@@ -33,10 +33,10 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@next/eslint-plugin-next": "14.0.3",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.15",
     "autoprefixer": "^10.4.16",
-    "eslint-config-next": "14.0.3",
     "postcss": "^8.4.32",
     "tailwindcss": "^3.3.5"
   }

docs/v2/prettier.config.mjs

@@ -0,0 +1,8 @@
+import rootConfig from '../../prettier.config.mjs'
+
+/** @type {import("prettier").Config} */
+export default {
+  ...rootConfig,
+  plugins: ['prettier-plugin-tailwindcss'],
+  tailwindConfig: './tailwind.config.js',
+}

docs/v2/src/components/HomePage.tsx

@@ -17,23 +17,23 @@ export const HomePage = ({
 }) => {
   return (
     <div className="pb-20">
-      <div className="flex flex-col justify-center items-center pt-11 gap-8 text-center">
+      <div className="flex flex-col items-center justify-center gap-8 pt-11 text-center">
         <Image src="/img/logo_background_star.png" alt="Suspensive with star" width={400} height={241} />
         <div className="flex flex-col items-center gap-4">
           <div className="relative text-5xl font-bold">
-            <span>{title}</span> <span className="absolute right text-sm">v{version}</span>
+            <span>{title}</span> <span className="right absolute text-sm">v{version}</span>
           </div>
           <p className="text-3xl">{description}</p>
         </div>
         <Link href="/docs/why">
-          <button className="bg-gray-800 text-xl font-bold rounded-xl py-3 px-10">{buttonText}</button>
+          <button className="rounded-xl bg-gray-800 px-10 py-3 text-xl font-bold">{buttonText}</button>
         </Link>
       </div>
 
       <div className="h-14"></div>
-      <div className="flex flex-col md:flex-row justify-between items-start gap-8">
+      <div className="flex flex-col items-start justify-between gap-8 md:flex-row">
         {items.map(({ title, desc }) => (
-          <div className="flex flex-1 flex-col justify-center items-center text-center gap-3" key={title}>
+          <div className="flex flex-1 flex-col items-center justify-center gap-3 text-center" key={title}>
             <div className="text-xl font-bold">{title}</div>
             <p className="text-lg">{desc}</p>
           </div>

docs/v2/tailwind.config.js

@@ -1,10 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}', './theme.config.tsx'],
   theme: {
     extend: {
       backgroundImage: {

docs/v2/theme.config.tsx

@@ -31,9 +31,7 @@ const config: DocsThemeConfig = {
         <Image src="/img/logo_dark.png" width={34} height={34} alt="suspensive logo" />
         <div className="relative">
           <strong>Suspensive</strong>
-          <span className="absolute right" style={{ fontSize: 8 }}>
-            v2
-          </span>
+          <span className="right absolute text-[8px]">v2</span>
         </div>
       </div>
     )

package.json

@@ -39,9 +39,9 @@
     "lint:monorepo": "sherif",
     "lint:pack": "packlint sort -R",
     "lint:pub": "turbo run lint:pub",
-    "postinstall": "husky install",
     "preinstall": "corepack enable",
     "prepack": "turbo run prepack",
+    "prepare": "husky install",
     "test": "turbo run test",
     "test:tsd": "turbo run test:tsd",
     "test:watch": "turbo run test:watch",
@@ -64,26 +64,27 @@
     "@types/node": "^18.18.14",
     "@types/testing-library__jest-dom": "^5.14.9",
     "@vitest/browser": "^1.0.2",
-    "@vitest/coverage-istanbul": "^1.0.0-beta.5",
-    "@vitest/ui": "^1.0.0-beta.5",
+    "@vitest/coverage-istanbul": "^1.0.0-beta.6",
+    "@vitest/ui": "^1.0.0-beta.6",
     "commitizen": "^4.3.0",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.55.0",
     "husky": "^8.0.3",
     "jsdom": "^23.0.1",
     "lint-staged": "^15.1.0",
-    "ms": "3.0.0-canary.1",
+    "ms": "^3.0.0-canary.1",
     "packlint": "^0.2.4",
     "playwright": "^1.40.1",
     "prettier": "^3.1.0",
+    "prettier-plugin-tailwindcss": "^0.5.9",
     "publint": "^0.2.6",
     "rimraf": "^5.0.5",
     "sherif": "^0.6.1",
     "tsup": "^8.0.1",
     "turbo": "latest",
     "typescript": "^5.3.3",
     "vite": "^5.0.6",
-    "vitest": "^1.0.0-beta.5"
+    "vitest": "^1.0.0-beta.6"
   },
   "volta": {
     "node": "18.18.2",