From 9ac4dc37103210b7a89358a830e92d1459445cef Mon Sep 17 00:00:00 2001 From: Junior Garcia Date: Fri, 30 Sep 2022 19:25:59 -0300 Subject: [PATCH] feat(root): plop templates improved, column & spacer components added --- CONTRIBUTING.MD | 2 +- packages/components/avatar/package.json | 2 + .../avatar/src/avatar-group.styles.ts | 6 +- .../components/avatar/src/avatar-group.tsx | 11 +- .../components/avatar/src/avatar.styles.ts | 7 - packages/components/avatar/src/avatar.tsx | 90 +- packages/components/avatar/src/index.ts | 6 - .../avatar/stories/avatar.stories.tsx | 257 +++--- packages/components/avatar/tsup.config.ts | 4 +- packages/components/col/README.md | 24 + .../components/col/__tests__/col.test.tsx | 58 ++ .../components/col/clean-package.config.json | 3 + packages/components/col/package.json | 50 + packages/components/col/src/col.styles.ts | 10 + packages/components/col/src/col.tsx | 37 + packages/components/col/src/index.ts | 5 + packages/components/col/src/use-col.ts | 10 + packages/components/col/tsconfig.json | 9 + packages/components/col/tsup.config.ts | 13 + packages/components/spacer/README.md | 24 + .../spacer/__tests__/spacer.test.tsx | 44 + .../spacer/clean-package.config.json | 3 + packages/components/spacer/package.json | 48 + packages/components/spacer/src/index.ts | 7 + .../components/spacer/src/spacer.styles.ts | 15 + packages/components/spacer/src/spacer.tsx | 42 + packages/components/spacer/src/use-spacer.ts | 46 + .../spacer/stories/spacer.stories.tsx | 64 ++ packages/components/spacer/tsconfig.json | 9 + packages/components/spacer/tsup.config.ts | 13 + packages/core/react/package.json | 3 +- packages/core/react/src/index.ts | 1 + packages/utilities/icons-utils/README.md | 24 + .../icons-utils/clean-package.config.json | 3 + packages/utilities/icons-utils/package.json | 43 + packages/utilities/icons-utils/src/icons.tsx | 852 ++++++++++++++++++ packages/utilities/icons-utils/src/index.ts | 1 + packages/utilities/icons-utils/tsconfig.json | 4 + packages/utilities/icons-utils/tsup.config.ts | 13 + .../__tests__/{{componentName}}.test.tsx.hbs | 2 +- plop/component/package.json.hbs | 6 +- plop/component/src/index.ts.hbs | 3 - .../src/{{componentName}}.styles.ts.hbs | 6 +- plop/component/src/{{componentName}}.tsx.hbs | 1 - .../stories/{{componentName}}.stories.tsx.hbs | 2 +- pnpm-lock.yaml | 285 +++--- 46 files changed, 1868 insertions(+), 300 deletions(-) create mode 100644 packages/components/col/README.md create mode 100644 packages/components/col/__tests__/col.test.tsx create mode 100644 packages/components/col/clean-package.config.json create mode 100644 packages/components/col/package.json create mode 100644 packages/components/col/src/col.styles.ts create mode 100644 packages/components/col/src/col.tsx create mode 100644 packages/components/col/src/index.ts create mode 100644 packages/components/col/src/use-col.ts create mode 100644 packages/components/col/tsconfig.json create mode 100644 packages/components/col/tsup.config.ts create mode 100644 packages/components/spacer/README.md create mode 100644 packages/components/spacer/__tests__/spacer.test.tsx create mode 100644 packages/components/spacer/clean-package.config.json 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.styles.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/stories/spacer.stories.tsx create mode 100644 packages/components/spacer/tsconfig.json create mode 100644 packages/components/spacer/tsup.config.ts create mode 100644 packages/utilities/icons-utils/README.md create mode 100644 packages/utilities/icons-utils/clean-package.config.json create mode 100644 packages/utilities/icons-utils/package.json create mode 100644 packages/utilities/icons-utils/src/icons.tsx create mode 100644 packages/utilities/icons-utils/src/index.ts create mode 100644 packages/utilities/icons-utils/tsconfig.json create mode 100644 packages/utilities/icons-utils/tsup.config.ts diff --git a/CONTRIBUTING.MD b/CONTRIBUTING.MD index 5153c9466..93b1b73ed 100644 --- a/CONTRIBUTING.MD +++ b/CONTRIBUTING.MD @@ -79,7 +79,7 @@ https://www.conventionalcommits.org/ or check out the 3. Make and commit your changes following the [commit convention](https://github.com/nextui-org/nextui/blob/main/CONTRIBUTING.md#commit-convention). As you develop, you can run `pnpm build --filter=` and - `pnpm test --filter=` e.g. `pnpm build --filter=avatar` to make sure everything works as expected. + `pnpm test packages//` e.g. `pnpm build --filter=avatar & pnpm test packages/components/avatar` to make sure everything works as expected. > To know more about the `--filter` option, please check the turborepo [docs](https://turborepo.org/docs/core-concepts/filtering). diff --git a/packages/components/avatar/package.json b/packages/components/avatar/package.json index 6513bdc66..1ad73fd24 100644 --- a/packages/components/avatar/package.json +++ b/packages/components/avatar/package.json @@ -44,6 +44,8 @@ "@nextui-org/dom-utils": "workspace:*" }, "devDependencies": { + "@nextui-org/spacer": "workspace:*", + "@nextui-org/icons-utils": "workspace:*", "react-aria": "3.18.0", "clean-package": "2.1.1", "react": "^17.0.2" diff --git a/packages/components/avatar/src/avatar-group.styles.ts b/packages/components/avatar/src/avatar-group.styles.ts index e46bceec7..656a53dff 100644 --- a/packages/components/avatar/src/avatar-group.styles.ts +++ b/packages/components/avatar/src/avatar-group.styles.ts @@ -1,4 +1,4 @@ -import {styled, VariantProps} from "@nextui-org/system"; +import {styled} from "@nextui-org/system"; import {StyledAvatar} from "./avatar.styles"; @@ -40,7 +40,3 @@ export const StyledAvatarGroup = styled("div", { animated: true, }, }); - -export type AvatarGroupVariants = VariantProps; - -export default StyledAvatarGroup; diff --git a/packages/components/avatar/src/avatar-group.tsx b/packages/components/avatar/src/avatar-group.tsx index 0a6a21d32..6744c03f7 100644 --- a/packages/components/avatar/src/avatar-group.tsx +++ b/packages/components/avatar/src/avatar-group.tsx @@ -3,24 +3,23 @@ import {HTMLNextUIProps, forwardRef} from "@nextui-org/system"; import {useDOMRef} from "@nextui-org/dom-utils"; import {clsx, __DEV__} from "@nextui-org/shared-utils"; -import StyledAvatarGroup, { - StyledAvatarGroupCount, - AvatarGroupVariants, -} from "./avatar-group.styles"; +import {StyledAvatarGroup, StyledAvatarGroupCount} from "./avatar-group.styles"; -export interface AvatarGroupProps extends HTMLNextUIProps<"div", AvatarGroupVariants> { +export interface AvatarGroupProps extends HTMLNextUIProps<"div"> { count?: number; + animated?: boolean; children?: ReactNode; } const AvatarGroup = forwardRef((props, ref) => { - const {count, children, className, ...otherProps} = props; + const {count, animated, children, className, ...otherProps} = props; const domRef = useDOMRef(ref); return ( diff --git a/packages/components/avatar/src/avatar.styles.ts b/packages/components/avatar/src/avatar.styles.ts index dc155cd7b..cd1b2a094 100644 --- a/packages/components/avatar/src/avatar.styles.ts +++ b/packages/components/avatar/src/avatar.styles.ts @@ -306,13 +306,6 @@ export const StyledAvatar = styled( }, }, ], - defaultVariants: { - size: "md", - rounded: true, - color: "default", - textColor: "default", - borderWeight: "normal", - }, }, cssFocusVisible, ); diff --git a/packages/components/avatar/src/avatar.tsx b/packages/components/avatar/src/avatar.tsx index 20e89108c..f68cbf154 100644 --- a/packages/components/avatar/src/avatar.tsx +++ b/packages/components/avatar/src/avatar.tsx @@ -1,22 +1,60 @@ +import type { + ReactRef, + NormalColors, + SimpleColors, + NormalSizes, + NormalWeights, +} from "@nextui-org/shared-utils"; + import {useState, useEffect, useMemo} from "react"; import {useFocusRing, mergeProps} from "react-aria"; import {HTMLNextUIProps, forwardRef} from "@nextui-org/system"; import {useDOMRef, IFocusRingAria} from "@nextui-org/dom-utils"; -import {clsx, ReactRef, safeText, __DEV__} from "@nextui-org/shared-utils"; +import {clsx, safeText, __DEV__} from "@nextui-org/shared-utils"; -import {StyledAvatar, AvatarVariantsProps} from "./avatar.styles"; +import {StyledAvatar} from "./avatar.styles"; import AvatarGroup from "./avatar-group"; -export interface AvatarProps extends HTMLNextUIProps<"span", AvatarVariantsProps> { +export interface AvatarProps extends HTMLNextUIProps<"span"> { + bordered?: boolean; + rounded?: boolean; + stacked?: boolean; + pointer?: boolean; + squared?: boolean; + zoomed?: boolean; text?: string; src?: string; alt?: string; + color?: NormalColors; + textColor?: SimpleColors; + size?: NormalSizes; + borderWeight?: NormalWeights; icon?: React.ReactNode; imgRef?: ReactRef; } const Avatar = forwardRef((props, ref) => { - const {as, src, css, text, icon, alt, className, imgRef: imgRefProp, ...otherProps} = props; + const { + as, + src, + css, + text, + icon, + alt, + bordered, + stacked, + pointer, + squared, + zoomed, + color = "default", + textColor = "default", + size = "md", + borderWeight = "normal", + rounded = true, + className, + imgRef: imgRefProp, + ...otherProps + } = props; const domRef = useDOMRef(ref); const imgRef = useDOMRef(imgRefProp); @@ -34,10 +72,35 @@ const Avatar = forwardRef((props, ref) => { return !ready && src ? "loading" : "ready"; }, [src, ready]); + const getCss = useMemo(() => { + if (as === "button") { + return { + // reset button styles + appearance: "none", + outline: "none", + border: "none", + cursor: "pointer", + ...css, + }; + } + + return css; + }, [as, css]); + return ( ((props, ref) => { }, className, )} - css={ - as === "button" - ? { - // reset button styles - appearance: "none", - outline: "none", - border: "none", - cursor: "pointer", - ...css, - } - : css - } + css={getCss} data-state={getState} isFocusVisible={isFocusVisible} > @@ -90,4 +142,8 @@ if (__DEV__) { Avatar.toString = () => ".nextui-avatar"; -export default Avatar as AvatarComponent; +const AvatarWithGroup = Avatar as AvatarComponent; + +AvatarWithGroup.Group = AvatarGroup; + +export default AvatarWithGroup; diff --git a/packages/components/avatar/src/index.ts b/packages/components/avatar/src/index.ts index 1354b5732..5c23b8255 100644 --- a/packages/components/avatar/src/index.ts +++ b/packages/components/avatar/src/index.ts @@ -1,15 +1,9 @@ import Avatar from "./avatar"; import AvatarGroup from "./avatar-group"; -// export styled components -export * from "./avatar.styles"; -export * from "./avatar-group.styles"; - // export types export type {AvatarProps} from "./avatar"; export type {AvatarGroupProps} from "./avatar-group"; -Avatar.Group = AvatarGroup; - // export component export {Avatar, AvatarGroup}; diff --git a/packages/components/avatar/stories/avatar.stories.tsx b/packages/components/avatar/stories/avatar.stories.tsx index 637b06a26..718fee463 100644 --- a/packages/components/avatar/stories/avatar.stories.tsx +++ b/packages/components/avatar/stories/avatar.stories.tsx @@ -1,8 +1,8 @@ import React from "react"; import {Meta} from "@storybook/react"; +import {Spacer} from "@nextui-org/spacer"; +import {Lock, User, VolumeUp, Camera, Activity} from "@nextui-org/icons-utils"; -// import Spacer from "../spacer"; -// import {Lock, User, VolumeUp, Camera, Activity} from "../utils/icons"; import {Avatar} from "../src"; export default { @@ -19,6 +19,21 @@ const pictureUsers = [ "https://i.pravatar.cc/300?u=a042581f4f29026709d", ]; +// eslint-disable-next-line @typescript-eslint/no-explicit-any +const Container = ({children}: any) => ( +
+ {children} +
+); + export const Simple = () => ; export const Default = () => { @@ -34,128 +49,128 @@ export const Default = () => { ); }; -// export const Colors = () => { -// return ( -// <> -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// ); -// }; +export const Colors = () => { + return ( + <> + + + + + + + + + + + + + + + + + + + + ); +}; -// export const Bordered = () => { -// return ( -// -// {pictureUsers.map((url, index) => ( -// 0} src={url} /> -// ))} -// -// ); -// }; +export const Bordered = () => { + return ( + + {pictureUsers.map((url, index) => ( + 0} src={url} /> + ))} + + ); +}; -// export const BorderWeights = () => { -// return ( -// -// -// -// -// -// -// -// -// ); -// }; +export const BorderWeights = () => { + return ( + + + + + + + + + ); +}; -// export const Sizes = () => { -// return ( -//
-// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -//
-// ); -// }; +export const Sizes = () => { + return ( +
+ + + + + + + + + + + + + + + +
+ ); +}; -// export const Zoomed = () => { -// return ( -// -// {pictureUsers.map((url, index) => ( -// -// ))} -// -// ); -// }; +export const Zoomed = () => { + return ( + + {pictureUsers.map((url, index) => ( + + ))} + + ); +}; -// export const Icons = () => { -// return ( -// -// } /> -// } /> -// } /> -// } /> -// } /> -// -// ); -// }; +export const Icons = () => { + return ( + + } /> + } /> + } /> + } /> + } /> + + ); +}; -// export const Group = () => { -// return ( -// -// -// {pictureUsers.map((url, index) => ( -// -// ))} -// -// -// -// {nameUsers.map((name, index) => ( -// -// ))} -// -// -// -// -// -// -// -// ); -// }; +export const Group = () => { + return ( + + + {pictureUsers.map((url, index) => ( + + ))} + + + + {nameUsers.map((name, index) => ( + + ))} + + + + + + + + ); +}; diff --git a/packages/components/avatar/tsup.config.ts b/packages/components/avatar/tsup.config.ts index aa313afa2..8bcd44aa9 100644 --- a/packages/components/avatar/tsup.config.ts +++ b/packages/components/avatar/tsup.config.ts @@ -3,8 +3,8 @@ import {findUpSync} from "find-up"; export default defineConfig({ clean: true, - minify: true, - treeshake: false, + minify: false, + treeshake: true, format: ["cjs", "esm"], outExtension(ctx) { return {js: `.${ctx.format}.js`}; diff --git a/packages/components/col/README.md b/packages/components/col/README.md new file mode 100644 index 000000000..28a6506eb --- /dev/null +++ b/packages/components/col/README.md @@ -0,0 +1,24 @@ +# @nextui-org/col + +A Quick description of the component + +> This is an internal utility, not intended for public usage. + +## Installation + +```sh +yarn add @nextui-org/col +# or +npm i @nextui-org/col +``` + +## Contribution + +Yes please! See the +[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md) +for details. + +## Licence + +This project is licensed under the terms of the +[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE). \ No newline at end of file diff --git a/packages/components/col/__tests__/col.test.tsx b/packages/components/col/__tests__/col.test.tsx new file mode 100644 index 000000000..5c10b0694 --- /dev/null +++ b/packages/components/col/__tests__/col.test.tsx @@ -0,0 +1,58 @@ +import * as React from "react"; +import {render} from "@testing-library/react"; + +import {Col} from "../src"; + +describe("Col", () => { + test("should render correctly", () => { + const wrapper = render(); + + expect(() => wrapper.unmount()).not.toThrow(); + }); + + it("should work with span and offset", () => { + const wrapper = render( +
+ col + + col + +
, + ); + + expect(() => wrapper.unmount()).not.toThrow(); + }); + + it("should render correctly when nested", () => { + const wrapper = render( + + + + col + + , + ); + + expect(() => wrapper.unmount()).not.toThrow(); + }); + + it("should render different components", () => { + let wrapper = render(); + + let p = wrapper.getByTestId("p-col-test"); + + expect(p).toBeTruthy(); + + wrapper = render(); + + let details = wrapper.getByTestId("details-col-test"); + + expect(details).toBeTruthy(); + + wrapper = render(); + + let h1 = wrapper.getByTestId("h1-col-test"); + + expect(h1).toBeTruthy(); + }); +}); diff --git a/packages/components/col/clean-package.config.json b/packages/components/col/clean-package.config.json new file mode 100644 index 000000000..ea9967219 --- /dev/null +++ b/packages/components/col/clean-package.config.json @@ -0,0 +1,3 @@ +{ "replace": { "main": "dist/index.cjs.js", "module": "dist/index.esm.js", +"types": "dist/index.d.ts", "exports": { ".": { "import": "./dist/index.esm.js", +"require": "./dist/index.cjs.js" }, "./package.json": "./package.json" } } } \ No newline at end of file diff --git a/packages/components/col/package.json b/packages/components/col/package.json new file mode 100644 index 000000000..ed2fab4f2 --- /dev/null +++ b/packages/components/col/package.json @@ -0,0 +1,50 @@ +{ + "name": "@nextui-org/col", + "version": "1.0.0-beta.11", + "description": "The column component is part of the NextUI's Grid system that uses a series of containers, rows and columns ", + "keywords": [ + "col" + ], + "author": "Junior Garcia ", + "homepage": "https://nextui.org", + "license": "MIT", + "main": "src/index.ts", + "sideEffects": false, + "files": [ + "dist" + ], + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/nextui-org/nextui.git", + "directory": "packages/components/col" + }, + "bugs": { + "url": "https://github.com/nextui-org/nextui/issues" + }, + "scripts": { + "build": "tsup src/index.ts --format=esm,cjs --dts", + "dev": "yarn build:fast -- --watch", + "clean": "rimraf dist .turbo", + "typecheck": "tsc --noEmit", + "build:fast": "tsup src/index.ts --format=esm,cjs", + "prepack": "clean-package", + "postpack": "clean-package restore" + }, + "peerDependencies": { + "react": ">=16.8.0" + }, + "dependencies": { + "@nextui-org/system": "workspace:*", + "@nextui-org/shared-utils": "workspace:*", + "@nextui-org/dom-utils": "workspace:*", + "clean-package": "2.1.1", + "react": "^17.0.2" + }, + "devDependencies": { + "clean-package": "2.1.1", + "react": "^17.0.2" + } +} diff --git a/packages/components/col/src/col.styles.ts b/packages/components/col/src/col.styles.ts new file mode 100644 index 000000000..0deb1253f --- /dev/null +++ b/packages/components/col/src/col.styles.ts @@ -0,0 +1,10 @@ +import {styled, VariantProps} from "@nextui-org/system"; + +export const StyledCol = styled("div", { + float: "left", + boxSizing: "border-box", + pl: "calc($$rowGap / 2)", + pr: "calc($$rowGap / 2)", +}); + +export type ColVariantsProps = VariantProps; diff --git a/packages/components/col/src/col.tsx b/packages/components/col/src/col.tsx new file mode 100644 index 000000000..21f30dad1 --- /dev/null +++ b/packages/components/col/src/col.tsx @@ -0,0 +1,37 @@ +import {HTMLNextUIProps, forwardRef} from "@nextui-org/system"; +import {useDOMRef} from "@nextui-org/dom-utils"; +import {__DEV__} from "@nextui-org/shared-utils"; + +import {StyledCol} from "./col.styles"; + +export interface ColProps extends HTMLNextUIProps<"div"> { + span?: number; + offset?: number; +} + +const Col = forwardRef((props, ref) => { + const {span = 12, offset = 0, css, children} = props; + const domRef = useDOMRef(ref); + + return ( + + {children} + + ); +}); + +if (__DEV__) { + Col.displayName = "NextUI.Col"; +} + +Col.toString = () => ".nextui-col"; + +export default Col; diff --git a/packages/components/col/src/index.ts b/packages/components/col/src/index.ts new file mode 100644 index 000000000..eae481f57 --- /dev/null +++ b/packages/components/col/src/index.ts @@ -0,0 +1,5 @@ +// export types +export type {ColProps} from "./col"; + +// export component +export {default as Col} from "./col"; diff --git a/packages/components/col/src/use-col.ts b/packages/components/col/src/use-col.ts new file mode 100644 index 000000000..f90ee8467 --- /dev/null +++ b/packages/components/col/src/use-col.ts @@ -0,0 +1,10 @@ +import * as React from "react"; + +export interface UseColProps {} + +export function useCol(props: UseColProps) { + return {}; +} + +export type UseColReturn = ReturnType; + \ No newline at end of file diff --git a/packages/components/col/tsconfig.json b/packages/components/col/tsconfig.json new file mode 100644 index 000000000..80a8d5de0 --- /dev/null +++ b/packages/components/col/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../../tsconfig.json", + "compilerOptions": { + "paths": { + "@stitches/react": ["../../../node_modules/@stitches/react"] + } + }, + "include": ["src", "index.ts"] +} diff --git a/packages/components/col/tsup.config.ts b/packages/components/col/tsup.config.ts new file mode 100644 index 000000000..8bcd44aa9 --- /dev/null +++ b/packages/components/col/tsup.config.ts @@ -0,0 +1,13 @@ +import {defineConfig} from "tsup"; +import {findUpSync} from "find-up"; + +export default defineConfig({ + clean: true, + minify: false, + treeshake: true, + format: ["cjs", "esm"], + outExtension(ctx) { + return {js: `.${ctx.format}.js`}; + }, + inject: process.env.JSX ? [findUpSync("react-shim.js")!] : undefined, +}); diff --git a/packages/components/spacer/README.md b/packages/components/spacer/README.md new file mode 100644 index 000000000..3a4865663 --- /dev/null +++ b/packages/components/spacer/README.md @@ -0,0 +1,24 @@ +# @nextui-org/spacer + +A Quick description of the component + +> This is an internal utility, not intended for public usage. + +## Installation + +```sh +yarn add @nextui-org/spacer +# or +npm i @nextui-org/spacer +``` + +## Contribution + +Yes please! See the +[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md) +for details. + +## Licence + +This project is licensed under the terms of the +[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE). \ No newline at end of file diff --git a/packages/components/spacer/__tests__/spacer.test.tsx b/packages/components/spacer/__tests__/spacer.test.tsx new file mode 100644 index 000000000..3e9c96ef4 --- /dev/null +++ b/packages/components/spacer/__tests__/spacer.test.tsx @@ -0,0 +1,44 @@ +import * as React from "react"; +import {render} from "@testing-library/react"; + +import {Spacer} from "../src"; + +describe("Spacer", () => { + test("should render correctly", () => { + const wrapper = render(); + + expect(() => wrapper.unmount()).not.toThrow(); + }); + + it("should support x and y props", () => { + const wrapper = render( +
+ + + + +
, + ); + + expect(() => wrapper.unmount()).not.toThrow(); + }); + + it("should work with float numbers", () => { + const wrapper = render( +
+ + + + +
, + ); + + expect(() => wrapper.unmount()).not.toThrow(); + }); + + it("should support inline prop", () => { + const wrapper = render(); + + expect(() => wrapper.unmount()).not.toThrow(); + }); +}); diff --git a/packages/components/spacer/clean-package.config.json b/packages/components/spacer/clean-package.config.json new file mode 100644 index 000000000..ea9967219 --- /dev/null +++ b/packages/components/spacer/clean-package.config.json @@ -0,0 +1,3 @@ +{ "replace": { "main": "dist/index.cjs.js", "module": "dist/index.esm.js", +"types": "dist/index.d.ts", "exports": { ".": { "import": "./dist/index.esm.js", +"require": "./dist/index.cjs.js" }, "./package.json": "./package.json" } } } \ No newline at end of file diff --git a/packages/components/spacer/package.json b/packages/components/spacer/package.json new file mode 100644 index 000000000..8625cad08 --- /dev/null +++ b/packages/components/spacer/package.json @@ -0,0 +1,48 @@ +{ + "name": "@nextui-org/spacer", + "version": "1.0.0-beta.11", + "description": "The Spacer component provides a vertically or horizontally empty space", + "keywords": [ + "spacer" + ], + "author": "Junior Garcia ", + "homepage": "https://nextui.org", + "license": "MIT", + "main": "src/index.ts", + "sideEffects": false, + "files": [ + "dist" + ], + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/nextui-org/nextui.git", + "directory": "packages/components/spacer" + }, + "bugs": { + "url": "https://github.com/nextui-org/nextui/issues" + }, + "scripts": { + "build": "tsup src/index.ts --format=esm,cjs --dts", + "dev": "yarn build:fast -- --watch", + "clean": "rimraf dist .turbo", + "typecheck": "tsc --noEmit", + "build:fast": "tsup src/index.ts --format=esm,cjs", + "prepack": "clean-package", + "postpack": "clean-package restore" + }, + "peerDependencies": { + "react": ">=16.8.0" + }, + "dependencies": { + "@nextui-org/system": "workspace:*", + "@nextui-org/shared-utils": "workspace:*", + "@nextui-org/dom-utils": "workspace:*" + }, + "devDependencies": { + "clean-package": "2.1.1", + "react": "^17.0.2" + } +} diff --git a/packages/components/spacer/src/index.ts b/packages/components/spacer/src/index.ts new file mode 100644 index 000000000..fce781dd1 --- /dev/null +++ b/packages/components/spacer/src/index.ts @@ -0,0 +1,7 @@ +export * from "./use-spacer"; + +// export types +export type {SpacerProps} from "./spacer"; + +// export component +export {default as Spacer} from "./spacer"; diff --git a/packages/components/spacer/src/spacer.styles.ts b/packages/components/spacer/src/spacer.styles.ts new file mode 100644 index 000000000..3ab160fd7 --- /dev/null +++ b/packages/components/spacer/src/spacer.styles.ts @@ -0,0 +1,15 @@ +import {styled} from "@nextui-org/system"; + +export const StyledSpacer = styled("span", { + size: "1px", + variants: { + inline: { + true: { + display: "inline-block", + }, + false: { + display: "block", + }, + }, + }, +}); diff --git a/packages/components/spacer/src/spacer.tsx b/packages/components/spacer/src/spacer.tsx new file mode 100644 index 000000000..a52f642e5 --- /dev/null +++ b/packages/components/spacer/src/spacer.tsx @@ -0,0 +1,42 @@ +import {HTMLNextUIProps, forwardRef} from "@nextui-org/system"; +import {useDOMRef} from "@nextui-org/dom-utils"; +import {__DEV__} from "@nextui-org/shared-utils"; + +import {StyledSpacer} from "./spacer.styles"; +import {useSpacer, UseSpacerProps} from "./use-spacer"; + +export interface SpacerProps extends HTMLNextUIProps<"span", UseSpacerProps> { + /** + * Whether should have inline space + */ + inline?: boolean; +} + +const Spacer = forwardRef((props, ref) => { + const domRef = useDOMRef(ref); + + const {x, y, inline = false, css, ...otherProps} = props; + + const {getSpacerCss} = useSpacer({x, y}); + + return ( +