Merge pull request #14 from klmhyeonwoo/feature/Spacing

feat: Add spacing hook lib

Author: klmhyeonwoo

build.mjs

@@ -38,7 +38,7 @@ async function build(path) {
     dts: { only: true },
     outDir: dist,
     silent: true,
-    external: [/@layer-lib\/.+/, /@layer-ui\/.+/, /@layer-core\/.+/],
+    external: [/@layer-lib\/.+/, /@layer-ui\/.+/, /@layer-core\/.+/, /@layer-utils\/.+/],
   });
 
   console.log(`Built ${path}/dist with Vite`);

demo/src/App.tsx

@@ -1,12 +1,20 @@
 import { Button } from "@layer-ui/button";
+import { getSpacingStyle } from "@layer-utils/getSpacingStyle";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@layer-ui/tabs";
 import { tabsListStyle, tabsTriggerStyle } from "./styles/tabs.css";
 import "./styles/app.css";
 
 function App() {
+  const spacingStyle = getSpacingStyle({ size: 50, direction: "vertical" });
+
   return (
     <div>
       <Button>Click me</Button>
+      <div>
+        <h1>Title Above</h1>
+        <div style={spacingStyle}> This is 10px Spacing </div>
+        <p>This content is vertically spaced.</p>
+      </div>
       <Tabs defaultValue={"foo"} onValueChange={(va) => console.log(va)}>
         <TabsList className={tabsListStyle}>
           <TabsTrigger className={tabsTriggerStyle} value={"foo"}>

demo/vite.config.ts

@@ -10,6 +10,7 @@ export default defineConfig({
     alias: {
       "@layer-ui": path.resolve(__dirname, "../packages/ui"),
       "@layer-lib": path.resolve(__dirname, "../packages/lib"),
+      "@layer-utils": path.resolve(__dirname, "../packages/utils"),
       "@layer-ui/button": path.resolve(__dirname, "../packages/ui/button/src"),
       "@layer-ui/tabs": path.resolve(__dirname, "../packages/ui/tabs/src"),
       "@layer-lib/react-context": path.resolve(__dirname, "../packages/lib/react-context/src"),

layer-ui-0.0.1.tgz

@@ -11,7 +11,6 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@layer/lib": "file:layer-lib-0.0.1.tgz",
     "@vanilla-extract/css": "^1.16.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@layer-utils/getSpacingStyle",
+  "version": "0.0.1",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
+  "source": "./src/index.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rm -rf dist",
+    "version": "yarn version"
+  },
+  "peerDependencies": {
+    "@types/react": "*",
+    "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/klmhyeonwoo/layer-design-system.git"
+  },
+  "bugs": {
+    "url": "https://github.com/klmhyeonwoo/layer-design-system/issues"
+  }
+}

packages/utils/getSpacingStyle/package.json

@@ -0,0 +1,45 @@
+type Direction = "all" | "horizontal" | "vertical" | "top" | "bottom" | "left" | "right";
+
+type Unit = "px" | "rem" | "em" | "%";
+
+type SpacingOptions = {
+  size: number | "small" | "medium" | "large";
+  direction: Direction;
+  unit?: Unit;
+};
+
+const sizeMap = {
+  small: 4,
+  medium: 8,
+  large: 16,
+} as const;
+
+const directionStyles = {
+  all: ["margin"],
+  horizontal: ["marginLeft", "marginRight"],
+  vertical: ["marginTop", "marginBottom"],
+  top: ["marginTop"],
+  bottom: ["marginBottom"],
+  left: ["marginLeft"],
+  right: ["marginRight"],
+} as const;
+
+/**
+ * @description getSpacingStyle is a library that makes the user's spacing style more efficient.
+ * @param { Object } options
+ * @param { number | "small" | "medium" | "large" } options.size
+ * @param { "all" | "horizontal" | "vertical" | "top" | "bottom" | "left" | "right" } options.direction
+ * @param { "px" | "rem" | "em" | "%" } [options.unit="px"]
+ * @returns { Record<string, string | number> }
+ */
+export const getSpacingStyle = ({ size, direction, unit = "px" }: SpacingOptions): Record<string, string | number> => {
+  const spacingValue = typeof size === "number" ? size : sizeMap[size];
+  const valueWithUnit = `${spacingValue}${unit}`;
+  const styles: Record<string, string | number> = {};
+
+  directionStyles[direction].forEach((cur) => {
+    styles[cur] = valueWithUnit;
+  });
+
+  return styles;
+};

packages/utils/getSpacingStyle/src/getSpacingStyle.ts

@@ -0,0 +1 @@
+export { getSpacingStyle } from "./getSpacingStyle";

packages/utils/getSpacingStyle/src/index.ts

@@ -2,7 +2,6 @@
   "compilerOptions": {
     "baseUrl": ".",
     "allowJs": false,
-
     "incremental": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "ES2022",
@@ -41,6 +40,9 @@
       "@layer-ui/typography": ["./packages/ui/typography/src"],
       "@layer-ui/tabs": ["./packages/ui/tabs/src"],
 
+      // utils
+      "@layer-utils/getSpacingStyle": ["./packages/utils/getSpacingStyle/src"],
+        
       // core
       "@layer-core/primitive": ["./packages/core/primitive/src"]
     }

tsconfig.json

@@ -7,7 +7,7 @@ export default defineConfig({
     target: "es2022",
     minify: "terser",
     rollupOptions: {
-      external: [/@layer-lib\/.+/, /@layer-ui\/.+/, /@layer-core\/.+/],
+      external: [/@layer-lib\/.+/, /@layer-ui\/.+/, /@layer-core\/.+/, /@layer-utils\/.+/],
       treeshake: true,
     },
   },