From d87c41bcb93ca86075fdbf266747b4219e114139 Mon Sep 17 00:00:00 2001 From: Dika Mahendra Date: Thu, 15 Feb 2024 15:22:25 +0700 Subject: [PATCH] feat: add spacer component --- packages/components/spacer/CHANGELOG.md | 12 +++ packages/components/spacer/README.md | 24 ++++++ .../spacer/__tests__/spacer.test.tsx | 19 +++++ packages/components/spacer/package.json | 55 +++++++++++++ packages/components/spacer/src/index.ts | 10 +++ packages/components/spacer/src/spacer.tsx | 15 ++++ packages/components/spacer/src/use-spacer.ts | 74 +++++++++++++++++ packages/components/spacer/src/utils.ts | 38 +++++++++ .../spacer/stories/spacer.stories.tsx | 81 +++++++++++++++++++ packages/components/spacer/tsconfig.json | 10 +++ packages/components/spacer/tsup.config.ts | 8 ++ packages/core/system-rsc/CHANGELOG.md | 7 ++ packages/core/system-rsc/package.json | 4 +- packages/core/theme/CHANGELOG.md | 6 ++ packages/core/theme/package.json | 2 +- packages/core/theme/src/components/index.ts | 36 ++++----- pnpm-lock.yaml | 28 +++++++ 17 files changed, 408 insertions(+), 21 deletions(-) create mode 100644 packages/components/spacer/CHANGELOG.md create mode 100644 packages/components/spacer/README.md create mode 100644 packages/components/spacer/__tests__/spacer.test.tsx create mode 100644 packages/components/spacer/package.json create mode 100644 packages/components/spacer/src/index.ts create mode 100644 packages/components/spacer/src/spacer.tsx create mode 100644 packages/components/spacer/src/use-spacer.ts create mode 100644 packages/components/spacer/src/utils.ts create mode 100644 packages/components/spacer/stories/spacer.stories.tsx create mode 100644 packages/components/spacer/tsconfig.json create mode 100644 packages/components/spacer/tsup.config.ts diff --git a/packages/components/spacer/CHANGELOG.md b/packages/components/spacer/CHANGELOG.md new file mode 100644 index 00000000..d41e9f8e --- /dev/null +++ b/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 diff --git a/packages/components/spacer/README.md b/packages/components/spacer/README.md new file mode 100644 index 00000000..70cbaab2 --- /dev/null +++ b/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). diff --git a/packages/components/spacer/__tests__/spacer.test.tsx b/packages/components/spacer/__tests__/spacer.test.tsx new file mode 100644 index 00000000..ad74a890 --- /dev/null +++ b/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(); + + expect(() => wrapper.unmount()).not.toThrow(); + }); + + it("ref should be forwarded", () => { + const ref = React.createRef(); + + render(); + expect(ref.current).not.toBeNull(); + }); +}); diff --git a/packages/components/spacer/package.json b/packages/components/spacer/package.json new file mode 100644 index 00000000..47f61983 --- /dev/null +++ b/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 ", + "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" +} diff --git a/packages/components/spacer/src/index.ts b/packages/components/spacer/src/index.ts new file mode 100644 index 00000000..d3c43529 --- /dev/null +++ b/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}; diff --git a/packages/components/spacer/src/spacer.tsx b/packages/components/spacer/src/spacer.tsx new file mode 100644 index 00000000..0ee55d5b --- /dev/null +++ b/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 ; +}); + +Spacer.displayName = "Banyu.Spacer"; + +export default Spacer; diff --git a/packages/components/spacer/src/use-spacer.ts b/packages/components/spacer/src/use-spacer.ts new file mode 100644 index 00000000..0f2039ef --- /dev/null +++ b/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; + /** + * 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; diff --git a/packages/components/spacer/src/utils.ts b/packages/components/spacer/src/utils.ts new file mode 100644 index 00000000..0e83f1de --- /dev/null +++ b/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; diff --git a/packages/components/spacer/stories/spacer.stories.tsx b/packages/components/spacer/stories/spacer.stories.tsx new file mode 100644 index 00000000..811c3d0c --- /dev/null +++ b/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) => ( +
+ +
+ ), + ], +} as Meta; + +const defaultProps = { + ...spacer.defaultVariants, +}; + +const content = ( +
+); + +const VerticalTemplate = (args: SpacerProps) => ( +
+ {content} + + {content} + + {content} +
+); + +const HorizontalTemplate = (args: SpacerProps) => ( +
+ {content} + + {content} + + {content} +
+); + +export const Vertical = { + render: VerticalTemplate, + + args: { + ...defaultProps, + y: 1, + }, +}; + +export const Horizontal = { + render: HorizontalTemplate, + + args: { + ...defaultProps, + x: 1, + isInline: true, + }, +}; diff --git a/packages/components/spacer/tsconfig.json b/packages/components/spacer/tsconfig.json new file mode 100644 index 00000000..5d012f6e --- /dev/null +++ b/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"] +} diff --git a/packages/components/spacer/tsup.config.ts b/packages/components/spacer/tsup.config.ts new file mode 100644 index 00000000..3e2bcff6 --- /dev/null +++ b/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";'}, +}); diff --git a/packages/core/system-rsc/CHANGELOG.md b/packages/core/system-rsc/CHANGELOG.md index b1ca054f..909e91be 100644 --- a/packages/core/system-rsc/CHANGELOG.md +++ b/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 diff --git a/packages/core/system-rsc/package.json b/packages/core/system-rsc/package.json index 0b330e7e..67714971 100644 --- a/packages/core/system-rsc/package.json +++ b/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": { diff --git a/packages/core/theme/CHANGELOG.md b/packages/core/theme/CHANGELOG.md index aac518e8..9e4f876a 100644 --- a/packages/core/theme/CHANGELOG.md +++ b/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 diff --git a/packages/core/theme/package.json b/packages/core/theme/package.json index 959958b1..82532555 100644 --- a/packages/core/theme/package.json +++ b/packages/core/theme/package.json @@ -1,6 +1,6 @@ { "name": "@jala-banyu/theme", - "version": "1.0.0", + "version": "1.1.0", "description": "Banyu theme", "keywords": [ "theme", diff --git a/packages/core/theme/src/components/index.ts b/packages/core/theme/src/components/index.ts index 7acd4b3c..519bb556 100644 --- a/packages/core/theme/src/components/index.ts +++ b/packages/core/theme/src/components/index.ts @@ -1,37 +1,37 @@ -export * from "./avatar" -export * from "./card" -export * from "./link" -export * from "./user" -export * from "./button" +export * from "./avatar"; +export * from "./card"; +export * from "./link"; +export * from "./user"; +export * from "./button"; // export * from "./drip"; -export * from "./spinner" -export * from "./code" -export * from "./popover" +export * from "./spinner"; +export * from "./code"; +export * from "./popover"; // export * from "./snippet"; // export * from "./chip"; // export * from "./badge"; // export * from "./checkbox"; // export * from "./radio"; // export * from "./pagination"; -export * from "./toggle" +export * from "./toggle"; // export * from "./accordion"; // export * from "./progress"; // export * from "./circular-progress"; -export * from "./input" -export * from "./dropdown" -export * from "./image" +export * from "./input"; +export * from "./dropdown"; +export * from "./image"; // export * from "./modal"; // export * from "./navbar"; // export * from "./table"; -// export * from "./spacer"; -export * from "./divider" -export * from "./kbd" +export * from "./spacer"; +export * from "./divider"; +export * from "./kbd"; // export * from "./tabs"; -export * from "./skeleton" +export * from "./skeleton"; // export * from "./select"; -export * from "./menu" +export * from "./menu"; // export * from "./listbox"; // export * from "./scroll-shadow"; // export * from "./slider"; -export * from "./breadcrumbs" +export * from "./breadcrumbs"; // export * from "./autocomplete"; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4400e267..05f833c8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -973,6 +973,34 @@ importers: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) + packages/components/spacer: + dependencies: + '@jala-banyu/react-utils': + specifier: 'workspace: *' + version: link:../../utilities/react-utils + '@jala-banyu/shared-utils': + specifier: 'workspace: *' + version: link:../../utilities/shared-utils + '@jala-banyu/system-rsc': + specifier: 'workspace: *' + version: link:../../core/system-rsc + devDependencies: + '@jala-banyu/system': + specifier: 'workspace: *' + version: link:../../core/system + '@jala-banyu/theme': + specifier: 'workspace: *' + version: link:../../core/theme + clean-package: + specifier: 2.2.0 + version: 2.2.0 + react: + specifier: ^18.2.0 + version: 18.2.0 + react-dom: + specifier: ^18.2.0 + version: 18.2.0(react@18.2.0) + packages/components/spinner: dependencies: '@banyu/system':