feat: add spacer component

packages/components/spacer/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @jala-banyu/spacer
+
+## 1.0.0
+
+### Major Changes
+
+- Initial version
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @jala-banyu/system-rsc@2.0.0

packages/components/spacer/README.md

@@ -0,0 +1,24 @@
+# @jala-banyu/spacer
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @jala-banyu/spacer
+# or
+npm i @jala-banyu/spacer
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
+for details.
+
+## Licence
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).

packages/components/spacer/__tests__/spacer.test.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import {render} from "@testing-library/react";
+
+import {Spacer} from "../src";
+
+describe("Spacer", () => {
+  it("should render correctly", () => {
+    const wrapper = render(<Spacer />);
+
+    expect(() => wrapper.unmount()).not.toThrow();
+  });
+
+  it("ref should be forwarded", () => {
+    const ref = React.createRef<HTMLDivElement>();
+
+    render(<Spacer ref={ref} />);
+    expect(ref.current).not.toBeNull();
+  });
+});

packages/components/spacer/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@jala-banyu/spacer",
+  "version": "1.0.0",
+  "description": "Spacer is a component used to add space between components.",
+  "keywords": [
+    "spacer"
+  ],
+  "author": "Dika Mahendra <[email protected]>",
+  "homepage": "#",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Atnic/banyu.git",
+    "directory": "packages/components/spacer"
+  },
+  "bugs": {
+    "url": "https://github.com/Atnic/banyu/issues"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "yarn build:fast -- --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "@jala-banyu/theme": ">=1.0.0",
+    "@jala-banyu/system": ">=1.0.0"
+  },
+  "dependencies": {
+    "@jala-banyu/system-rsc": "workspace: *",
+    "@jala-banyu/shared-utils": "workspace: *",
+    "@jala-banyu/react-utils": "workspace: *"
+  },
+  "devDependencies": {
+    "@jala-banyu/theme": "workspace: *",
+    "@jala-banyu/system": "workspace: *",
+    "clean-package": "2.2.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "clean-package": "../../../clean-package.config.json"
+}

packages/components/spacer/src/index.ts

@@ -0,0 +1,10 @@
+import Spacer from "./spacer";
+
+// export types
+export type {SpacerProps} from "./spacer";
+
+// export hooks
+export {useSpacer} from "./use-spacer";
+
+// export component
+export {Spacer};

packages/components/spacer/src/spacer.tsx

@@ -0,0 +1,15 @@
+import {forwardRef} from "@jala-banyu/system-rsc";
+
+import {UseSpacerProps, useSpacer} from "./use-spacer";
+
+export interface SpacerProps extends UseSpacerProps {}
+
+const Spacer = forwardRef<"span", SpacerProps>((props, ref) => {
+  const {Component, getSpacerProps} = useSpacer({...props});
+
+  return <Component ref={ref} {...getSpacerProps()} />;
+});
+
+Spacer.displayName = "Banyu.Spacer";
+
+export default Spacer;

packages/components/spacer/src/use-spacer.ts

@@ -0,0 +1,74 @@
+import type {SpacerVariantProps} from "@jala-banyu/theme";
+import type {HTMLBanyuProps, PropGetter} from "@jala-banyu/system-rsc";
+
+import {mapPropsVariants} from "@jala-banyu/system-rsc";
+import {spacer} from "@jala-banyu/theme";
+import {clsx, dataAttr} from "@jala-banyu/shared-utils";
+import {ReactRef} from "@jala-banyu/react-utils";
+import {useMemo} from "react";
+
+import {spacing, Space} from "./utils";
+
+interface Props extends HTMLBanyuProps<"span"> {
+  /**
+   * Ref to the DOM node.
+   */
+  ref?: ReactRef<HTMLElement | null>;
+  /**
+   * The x-axis margin.
+   * @default 1
+   *
+   * @see https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale
+   */
+  x?: Space;
+  /**
+   * The y-axis margin.
+   * @default 1
+   *
+   * @see https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale
+   */
+  y?: Space;
+}
+
+export type UseSpacerProps = Props & SpacerVariantProps;
+
+export const getMargin = (value: Space) => {
+  return spacing[value] ?? value;
+};
+
+export function useSpacer(originalProps: UseSpacerProps) {
+  const [props, variantProps] = mapPropsVariants(originalProps, spacer.variantKeys);
+
+  const {as, className, x = 1, y = 1, ...otherProps} = props;
+
+  const Component = as || "span";
+
+  const styles = useMemo(
+    () =>
+      spacer({
+        ...variantProps,
+        className,
+      }),
+    [...Object.values(variantProps), className],
+  );
+
+  const marginLeft = getMargin(x);
+  const marginTop = getMargin(y);
+
+  const getSpacerProps: PropGetter = (props = {}) => ({
+    ...props,
+    ...otherProps,
+    "aria-hidden": dataAttr(true),
+    className: clsx(styles, props.className),
+    style: {
+      ...props.style,
+      ...otherProps.style,
+      marginLeft,
+      marginTop,
+    },
+  });
+
+  return {Component, getSpacerProps};
+}
+
+export type UseSpacerReturn = ReturnType<typeof useSpacer>;

packages/components/spacer/src/utils.ts

@@ -0,0 +1,38 @@
+export const spacing = {
+  px: "1px",
+  0: "0px",
+  0.5: "0.125rem",
+  1: "0.25rem",
+  1.5: "0.375rem",
+  2: "0.5rem",
+  2.5: "0.625rem",
+  3: "0.75rem",
+  3.5: "0.875rem",
+  4: "1rem",
+  5: "1.25rem",
+  6: "1.5rem",
+  7: "1.75rem",
+  8: "2rem",
+  9: "2.25rem",
+  10: "2.5rem",
+  11: "2.75rem",
+  12: "3rem",
+  14: "3.5rem",
+  16: "4rem",
+  20: "5rem",
+  24: "6rem",
+  28: "7rem",
+  32: "8rem",
+  36: "9rem",
+  40: "10rem",
+  44: "11rem",
+  48: "12rem",
+  52: "13rem",
+  56: "14rem",
+  60: "15rem",
+  64: "16rem",
+  72: "18rem",
+  80: "20rem",
+  96: "24rem",
+};
+export type Space = keyof typeof spacing;

packages/components/spacer/stories/spacer.stories.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import {Meta} from "@storybook/react";
+import {spacer} from "@jala-banyu/theme";
+
+import {Spacer, SpacerProps} from "../src";
+
+export default {
+  title: "Components/Spacer",
+  component: Spacer,
+  argTypes: {
+    x: {
+      control: {
+        type: "number",
+      },
+    },
+    y: {
+      control: {
+        type: "number",
+      },
+    },
+    isInline: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex items-center justify-center w-screen h-screen">
+        <Story />
+      </div>
+    ),
+  ],
+} as Meta<typeof Spacer>;
+
+const defaultProps = {
+  ...spacer.defaultVariants,
+};
+
+const content = (
+  <div className="flex flex-col w-[300px] h-[100px] bg-primary rounded-xl shadow-lg" />
+);
+
+const VerticalTemplate = (args: SpacerProps) => (
+  <div className="flex flex-col">
+    {content}
+    <Spacer {...args} />
+    {content}
+    <Spacer {...args} />
+    {content}
+  </div>
+);
+
+const HorizontalTemplate = (args: SpacerProps) => (
+  <div className="flex flex-row">
+    {content}
+    <Spacer {...args} />
+    {content}
+    <Spacer {...args} />
+    {content}
+  </div>
+);
+
+export const Vertical = {
+  render: VerticalTemplate,
+
+  args: {
+    ...defaultProps,
+    y: 1,
+  },
+};
+
+export const Horizontal = {
+  render: HorizontalTemplate,
+
+  args: {
+    ...defaultProps,
+    x: 1,
+    isInline: true,
+  },
+};

packages/components/spacer/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "tailwind-variants": ["../../../node_modules/tailwind-variants"]
+    },
+  },
+  "include": ["src", "index.ts"]
+}

packages/components/spacer/tsup.config.ts

@@ -0,0 +1,8 @@
+import {defineConfig} from "tsup";
+
+export default defineConfig({
+  clean: true,
+  target: "es2019",
+  format: ["cjs", "esm"],
+  banner: {js: '"use client";'},
+});

packages/core/system-rsc/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @jala-banyu/system-rsc
 
+## 2.0.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @jala-banyu/theme@1.1.0
+
 ## 1.0.0
 
 ### Major Changes

packages/core/system-rsc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jala-banyu/system-rsc",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Banyu system primitives compatibles with RSC imports",
   "keywords": [
     "system-rsc"
@@ -35,7 +35,7 @@
   },
   "peerDependencies": {
     "react": ">=18",
-    "@jala-banyu/theme": "1.0.0",
+    "@jala-banyu/theme": "1.1.0",
     "tailwind-variants": ">=0.1.13"
   },
   "devDependencies": {

packages/core/theme/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @jala-banyu/theme
 
+## 1.1.0
+
+### Minor Changes
+
+- Uncomment Spacer Component
+
 ## 1.0.0
 
 ### Major Changes