feat, refactor: resolve all text wrap issue, remove legacy code with css token(Text, Theme)

.eslintrc.cjs

@@ -0,0 +1,132 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const path = require("path");
+
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    "plugin:@typescript-eslint/recommended",
+    "airbnb",
+    "airbnb-typescript",
+    "prettier",
+  ],
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: [".eslintrc.{js,cjs}"],
+      parserOptions: {
+        sourceType: "script",
+      },
+    },
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+    project: ["./packages/*/tsconfig.json", "./tsconfig.json"],
+  },
+  plugins: ["import", "@typescript-eslint", "react"],
+  ignorePatterns: ["node_modules/", "dist/", ".eslintrc.cjs"],
+  rules: {
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        // Since airbnb javascript rules does not allow to import typescript files without extensions, we need to disable it
+        ts: "never",
+        tsx: "never",
+      },
+    ],
+    "import/named": "error",
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        packageDir: [
+          path.join(__dirname, "packages/web"),
+          path.join(__dirname, "packages/api"),
+          path.join(__dirname, "packages/interface"),
+          ".",
+        ],
+      },
+    ],
+    "import/prefer-default-export": "off",
+    "no-param-reassign": [
+      "error",
+      {
+        props: true,
+        // function parameters cannot be reassigned for readability, except for the ones in the array
+        ignorePropertyModificationsFor: ["socket", "state"],
+      },
+    ],
+    "no-restricted-imports": [
+      "error",
+      {
+        patterns: [
+          {
+            group: ["../*"],
+            message:
+              "Usage of relative parent imports is not allowed. Use path alias instead.",
+          },
+        ],
+      },
+    ],
+    "radix": ["error", "as-needed"],
+    "react/function-component-definition": [
+      "error",
+      {
+        namedComponents: "arrow-function",
+        unnamedComponents: "arrow-function",
+      },
+    ],
+    "react/jsx-uses-react": "off",
+    "react/jsx-no-useless-fragment": [
+      "error",
+      {
+        // this allows <>{value}</> syntax, where value is a string or a number
+        allowExpressions: true,
+      },
+    ],
+    "react/jsx-props-no-spreading": "off",
+    "react/no-unknown-property": [
+      "error",
+      {
+        ignore: ["css"],
+      },
+    ],
+    "react/react-in-jsx-scope": "off",
+    "react/require-default-props": [
+      "error",
+      {
+        // default values of the optional props must be provided as function arguments
+        functions: "defaultArguments",
+      },
+    ],
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      {
+        prefer: "type-imports",
+      },
+    ],
+  },
+  settings: {
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"],
+    },
+    "import/resolver": {
+      typescript: {
+        project: ["./tsconfig.json"],
+      },
+    },
+    "react": {
+      version: "18.2.0",
+    },
+  },
+};

packages/web/src/components/atoms/BorderedBox.tsx

@@ -1,6 +1,7 @@
-import styled from "@emotion/styled";
+import type { ColorKeys } from "@biseo/web/styles";
+import { colors } from "@biseo/web/styles";
 import { css } from "@emotion/react";
-import type { Color } from "@biseo/web/theme";
+import styled from "@emotion/styled";
 
 type Size = number | "hug" | "fill";
 const calcSize = (size: Size) => {
@@ -15,7 +16,7 @@ const calcSize = (size: Size) => {
 export const BorderedBox = styled.div<{
   w?: Size;
   h?: Size;
-  bg?: Color;
+  bg?: ColorKeys;
   round?: number;
   roundTop?: number;
   roundBot?: number;
@@ -31,7 +32,7 @@ export const BorderedBox = styled.div<{
   padLeft?: number;
   padRight?: number;
   borderSize?: number;
-  borderColor?: Color;
+  borderColor?: ColorKeys;
   borderStyle?:
     | "solid"
     | "dotted"
@@ -61,15 +62,15 @@ export const BorderedBox = styled.div<{
     padRight = padHorizontal,
     padBottom = padVertical,
     padTop = padVertical,
-    theme,
+
     borderSize = 0,
     borderColor,
     borderStyle,
     position = "static",
   }) => css`
     width: ${calcSize(w)};
     height: ${calcSize(h)};
-    background-color: ${bg ? theme.colors[bg] : "transparent"};
+    background-color: ${bg ? colors[bg] : "transparent"};
     border-radius: ${roundTop}px ${roundTop}px ${roundBot}px ${roundBot}px;
     display: flex;
     flex-direction: ${dir};
@@ -81,7 +82,7 @@ export const BorderedBox = styled.div<{
     padding-left: ${padLeft}px;
     padding-right: ${padRight}px;
     border: ${borderSize}px ${borderStyle};
-    border-color: ${borderColor ? theme.colors[borderColor] : "transparent"};
+    border-color: ${borderColor ? colors[borderColor] : "transparent"};
     position: ${position};
   `,
 );

packages/web/src/components/atoms/Box.tsx

@@ -1,6 +1,6 @@
-import styled from "@emotion/styled";
+import { colors, type ColorKeys } from "@biseo/web/styles";
 import { css } from "@emotion/react";
-import type { Color } from "@biseo/web/theme";
+import styled from "@emotion/styled";
 
 type Size = number | "hug" | "fill";
 const calcSize = (size: Size) => {
@@ -11,11 +11,12 @@ const calcSize = (size: Size) => {
 
 /**
  * @deprecated use `padding`, `round`, and layout tokens instead
+ * w("hug"), h("hug"), bg.transparent, round(0), dir("column"), gap(0), align("start"), justify("start"), pad(0), padHorizontal(0), padVertical(0), padTop(0), padBottom(0), padLeft(0), padRight(0), zIndex(0), position("static"), self("auto"), wrap("nowrap")
  */
 export const Box = styled.div<{
   w?: Size;
   h?: Size;
-  bg?: Color;
+  bg?: ColorKeys;
   round?: number;
   dir?: "row" | "column";
   gap?: number | "auto";
@@ -37,27 +38,26 @@ export const Box = styled.div<{
     w = "hug",
     h = "hug",
     bg,
-    round = 0,
-    dir = "column",
-    gap = 0,
-    align = "start",
-    justify = "start",
-    pad = 0,
+    round = 0, // default
+    dir = "column", // not default
+    gap = 0, // not default
+    align = "start", // not default
+    justify = "start", // not default
+    pad = 0, // pad(0)
     padHorizontal = pad,
     padVertical = pad,
     padLeft = padHorizontal,
     padRight = padHorizontal,
     padBottom = padVertical,
     padTop = padVertical,
-    theme,
-    zIndex = 0,
-    position = "static",
+    zIndex = 0, // zIndex(0)
+    position = "static", // default
     self = "auto",
     wrap = "nowrap",
   }) => css`
     width: ${calcSize(w)};
     height: ${calcSize(h)};
-    background-color: ${bg ? theme.colors[bg] : "transparent"};
+    background-color: ${bg ? colors[bg] : "transparent"};
     border-radius: ${round}px;
     display: flex;
     flex-direction: ${dir};