refactor(root): no needed components removed since tailwind already included an impl

This commit is contained in:
Junior Garcia 2023-01-10 00:06:30 -03:00
parent fec0753dd7
commit 6639139735
84 changed files with 91 additions and 2234 deletions

View File

@ -45,7 +45,6 @@
"@react-aria/utils": "^3.14.0"
},
"devDependencies": {
"@nextui-org/spacer": "workspace:*",
"@nextui-org/shared-icons": "workspace:*",
"clean-package": "2.1.1",
"react": "^17.0.2"

View File

@ -43,10 +43,6 @@
},
"devDependencies": {
"@nextui-org/avatar": "workspace:*",
"@nextui-org/spacer": "workspace:*",
"@nextui-org/grid": "workspace:*",
"@nextui-org/col": "workspace:*",
"@nextui-org/row": "workspace:*",
"@nextui-org/text": "workspace:*",
"@nextui-org/shared-icons": "workspace:*",
"clean-package": "2.1.1",

View File

@ -48,8 +48,6 @@
"@react-aria/focus": "^3.9.0"
},
"devDependencies": {
"@nextui-org/spacer": "workspace:*",
"@nextui-org/grid": "workspace:*",
"@nextui-org/loading": "workspace:*",
"@nextui-org/shared-icons": "workspace:*",
"@react-types/shared": "^3.15.0",

View File

@ -42,7 +42,6 @@
"@nextui-org/shared-css": "workspace:*",
"@nextui-org/dom-utils": "workspace:*",
"@nextui-org/drip": "workspace:*",
"@nextui-org/divider": "workspace:*",
"@nextui-org/image": "workspace:*",
"@react-aria/focus": "^3.9.0",
"@react-aria/utils": "^3.14.0",
@ -51,9 +50,6 @@
"devDependencies": {
"@react-types/shared": "^3.15.0",
"@nextui-org/text": "workspace:*",
"@nextui-org/grid": "workspace:*",
"@nextui-org/col": "workspace:*",
"@nextui-org/row": "workspace:*",
"@nextui-org/code": "workspace:*",
"@nextui-org/link": "workspace:*",
"clean-package": "2.1.1",

View File

@ -1,6 +1,5 @@
import {forwardRef, HTMLNextUIProps} from "@nextui-org/system";
import {clsx, __DEV__} from "@nextui-org/shared-utils";
import {Divider} from "@nextui-org/divider";
import {Image} from "@nextui-org/image";
import {Drip} from "@nextui-org/drip";
import {useDOMRef} from "@nextui-org/dom-utils";
@ -59,7 +58,6 @@ type CompoundCard = {
Body: typeof CardBody;
Footer: typeof CardFooter;
Image: typeof Image;
Divider: typeof Divider;
};
const Card = forwardRef<CardProps, "div", CompoundCard>((props, ref) => {
@ -104,7 +102,6 @@ Card.Header = CardHeader;
Card.Body = CardBody;
Card.Footer = CardFooter;
Card.Image = Image;
Card.Divider = Divider;
if (__DEV__) {
Card.displayName = "NextUI.Card";

View File

@ -1,24 +0,0 @@
# @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).

View File

@ -1,58 +0,0 @@
import * as React from "react";
import {render} from "@testing-library/react";
import {Col} from "../src";
describe("Col", () => {
it("should render correctly", () => {
const wrapper = render(<Col />);
expect(() => wrapper.unmount()).not.toThrow();
});
it("should work with span and offset", () => {
const wrapper = render(
<div>
<Col span={2}>col</Col>
<Col offset={2} span={2}>
col
</Col>
</div>,
);
expect(() => wrapper.unmount()).not.toThrow();
});
it("should render correctly when nested", () => {
const wrapper = render(
<Col>
<Col>
<Col />
col
</Col>
</Col>,
);
expect(() => wrapper.unmount()).not.toThrow();
});
it("should render different components", () => {
let wrapper = render(<Col as="p" data-testid="p-col-test" />);
let p = wrapper.getByTestId("p-col-test");
expect(p).toBeTruthy();
wrapper = render(<Col as="details" data-testid="details-col-test" />);
let details = wrapper.getByTestId("details-col-test");
expect(details).toBeTruthy();
wrapper = render(<Col as="h1" data-testid="h1-col-test" />);
let h1 = wrapper.getByTestId("h1-col-test");
expect(h1).toBeTruthy();
});
});

View File

@ -1,11 +0,0 @@
{
"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"
}
}
}

View File

@ -1,50 +0,0 @@
{
"name": "@nextui-org/col",
"version": "2.0.0-beta.1",
"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 <jrgarciadev@gmail.com>",
"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"
}
}

View File

@ -1,10 +0,0 @@
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<typeof StyledCol>;

View File

@ -1,38 +0,0 @@
import {HTMLNextUIProps, forwardRef} from "@nextui-org/system";
import {useDOMRef} from "@nextui-org/dom-utils";
import {clsx, __DEV__} from "@nextui-org/shared-utils";
import {StyledCol} from "./col.styles";
export interface ColProps extends HTMLNextUIProps<"div"> {
span?: number;
offset?: number;
}
const Col = forwardRef<ColProps, "div">((props, ref) => {
const {span = 12, offset = 0, css, children, className, ...otherProps} = props;
const domRef = useDOMRef(ref);
return (
<StyledCol
ref={domRef}
className={clsx("nextui-col", className)}
css={{
width: `${(100 / 12) * span}%`,
marginLeft: `${(100 / 12) * offset}%`,
...css,
}}
{...otherProps}
>
{children}
</StyledCol>
);
});
if (__DEV__) {
Col.displayName = "NextUI.Col";
}
Col.toString = () => ".nextui-col";
export default Col;

View File

@ -1,5 +0,0 @@
// export types
export type {ColProps} from "./col";
// export component
export {default as Col} from "./col";

View File

@ -1,9 +0,0 @@
export interface UseColProps {}
export function useCol(props: UseColProps) {
const {} = props;
return {};
}
export type UseColReturn = ReturnType<typeof useCol>;

View File

@ -1,9 +0,0 @@
{
"extends": "../../../tsconfig.json",
"compilerOptions": {
"paths": {
"@stitches/react": ["../../../node_modules/@stitches/react"]
}
},
"include": ["src", "index.ts"]
}

View File

@ -1,13 +0,0 @@
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,
});

View File

@ -1,24 +0,0 @@
# @nextui-org/container
A Quick description of the component
> This is an internal utility, not intended for public usage.
## Installation
```sh
yarn add @nextui-org/container
# or
npm i @nextui-org/container
```
## 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).

View File

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

View File

@ -1,11 +0,0 @@
{
"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"
}
}
}

View File

@ -1,48 +0,0 @@
{
"name": "@nextui-org/container",
"version": "2.0.0-beta.1",
"description": "A component for fixing an element&#x27;s width to the current breakpoint.",
"keywords": [
"container"
],
"author": "Junior Garcia <jrgarciadev@gmail.com>",
"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/container"
},
"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"
}
}

View File

@ -1,33 +0,0 @@
import {styled} from "@nextui-org/system";
export const StyledContainer = styled("div", {
w: "100%",
mr: "auto",
ml: "auto",
variants: {
fluid: {
true: {
maxWidth: "100%",
},
},
responsive: {
true: {
"@xs": {
maxWidth: "$breakpoints$xs",
},
"@sm": {
maxWidth: "$breakpoints$sm",
},
"@md": {
maxWidth: "$breakpoints$md",
},
"@lg": {
maxWidth: "$breakpoints$lg",
},
"@xl": {
maxWidth: "$breakpoints$xl",
},
},
},
},
});

View File

@ -1,39 +0,0 @@
import {forwardRef} from "@nextui-org/system";
import {useDOMRef} from "@nextui-org/dom-utils";
import {clsx, __DEV__} from "@nextui-org/shared-utils";
import {StyledContainer} from "./container.styles";
import {useContainer, UseContainerProps} from "./use-container";
export interface ContainerProps extends UseContainerProps {}
const Container = forwardRef<ContainerProps, "div">((props, ref) => {
const {children, containerCss, css, fluid, responsive, className, ...otherProps} =
useContainer(props);
const domRef = useDOMRef(ref);
return (
<StyledContainer
ref={domRef}
className={clsx("nextui-container", className)}
css={{
...containerCss,
...css,
}}
fluid={fluid}
responsive={responsive}
{...otherProps}
>
{children}
</StyledContainer>
);
});
if (__DEV__) {
Container.displayName = "NextUI.Container";
}
Container.toString = () => ".nextui-container";
export default Container;

View File

@ -1,5 +0,0 @@
// export types
export type {ContainerProps} from "./container";
// export component
export {default as Container} from "./container";

View File

@ -1,137 +0,0 @@
import type {
Wrap,
Display,
Justify,
Direction,
AlignItems,
AlignContent,
} from "@nextui-org/shared-utils";
import type {HTMLNextUIProps} from "@nextui-org/system";
import {useMemo} from "react";
export interface UseContainerProps extends HTMLNextUIProps<"div"> {
/**
* Max width extra small devices (<650px)
* @default "false"
*/
xs?: boolean;
/**
* Max width small devices (>=650px)
* @default "false"
*/
sm?: boolean;
/**
* Max width medium devices (>=960px)
* @default "false"
*/
md?: boolean;
/**
* Max width large devices (>=1280px)
* @default "false"
*/
lg?: boolean;
/**
* Max width extra large devices (>=1400px)
* @default "false"
*/
xl?: boolean;
/**
* Sets the width in 100% at all breakpoints
* @default false
*/
fluid?: boolean;
/**
* Sets a max-width at each responsive breakpoint
* @default true
*/
responsive?: boolean;
/**
* The children's spacing, commonly used for `Col` & `Row` components
* @default 2
*/
gap?: number;
/**
* CSS "flex-wrap" property
* @default "wrap"
*/
wrap?: Wrap;
/**
* CSS "display" property
* @default "block"
*/
display?: Display;
/**
* CSS "justify-content" property
*/
justify?: Justify;
/**
* CSS "flex-direction" property
* @default "row"
*/
direction?: Direction;
/**
* CSS "align-items" property
*/
alignItems?: AlignItems;
/**
* CSS "align-content" property
*/
alignContent?: AlignContent;
}
export function useContainer(props: UseContainerProps) {
const {
xs = false,
sm = false,
md = false,
lg = false,
xl = false,
gap = 2,
responsive = true,
fluid = false,
wrap = "wrap",
display = "block",
direction = "row",
justify,
alignItems,
alignContent,
...otherProps
} = props;
const gapUnit = useMemo(() => {
return `calc(${gap} * $space$sm)`;
}, [gap]);
const getMaxWidth = () => {
if (xs) return "$breakpoints$xs";
if (sm) return "$breakpoints$sm";
if (md) return "$breakpoints$md";
if (lg) return "$breakpoints$lg";
if (xl) return "$breakpoints$xl";
return "";
};
const containerCss = useMemo(() => {
return {
px: gapUnit,
maxWidth: getMaxWidth(),
alignItems,
alignContent,
flexWrap: wrap,
display: display,
justifyContent: justify,
flexDirection: direction,
};
}, [gapUnit, getMaxWidth, alignItems, alignContent, wrap, display, justify, direction]);
return {
containerCss,
responsive,
fluid,
...otherProps,
};
}
export type UseContainerReturn = ReturnType<typeof useContainer>;

View File

@ -1,11 +0,0 @@
import React from "react";
import {Meta} from "@storybook/react";
import {Container} from "../src";
export default {
title: "Layout/Container",
component: Container,
} as Meta;
export const Default = () => <Container />;

View File

@ -1,9 +0,0 @@
{
"extends": "../../../tsconfig.json",
"compilerOptions": {
"paths": {
"@stitches/react": ["../../../node_modules/@stitches/react"]
}
},
"include": ["src", "index.ts"]
}

View File

@ -1,13 +0,0 @@
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,
});

View File

@ -1,24 +0,0 @@
# @nextui-org/divider
A Quick description of the component
> This is an internal utility, not intended for public usage.
## Installation
```sh
yarn add @nextui-org/divider
# or
npm i @nextui-org/divider
```
## 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).

View File

@ -1,36 +0,0 @@
import * as React from "react";
import {render} from "@testing-library/react";
import {getMargin} from "@nextui-org/shared-utils";
import {Divider} from "../src";
describe("Divider", () => {
it("should render correctly", () => {
const wrapper = render(<Divider />);
expect(() => wrapper.unmount()).not.toThrow();
});
it("ref should be forwarded", () => {
const ref = React.createRef<HTMLDivElement>();
render(<Divider ref={ref} />);
expect(ref.current).not.toBeNull();
});
it("should work with x and y", () => {
let x = 2;
let y = 4;
const {container} = render(<Divider x={x} y={4} />);
expect(container.firstChild).toHaveStyle(`margin: ${getMargin(x / 2)} ${getMargin(y / 2)}`);
});
it("should support float x & y", () => {
let x = 2.5;
let y = 4.5;
const {container} = render(<Divider x={x} y={4.5} />);
expect(container.firstChild).toHaveStyle(`margin: ${getMargin(x / 2)} ${getMargin(y / 2)}`);
});
});

View File

@ -1,11 +0,0 @@
{
"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"
}
}
}

View File

@ -1,49 +0,0 @@
{
"name": "@nextui-org/divider",
"version": "2.0.0-beta.1",
"description": "Dividers are used to visually separate content in a list or group.",
"keywords": [
"divider"
],
"author": "Junior Garcia <jrgarciadev@gmail.com>",
"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/divider"
},
"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/text": "workspace:*",
"@nextui-org/system": "workspace:*",
"@nextui-org/shared-utils": "workspace:*",
"@nextui-org/dom-utils": "workspace:*"
},
"devDependencies": {
"clean-package": "2.1.1",
"react": "^17.0.2"
}
}

View File

@ -1,7 +0,0 @@
import {styled} from "@nextui-org/system";
export const StyledDivider = styled("div", {
width: "100%",
maxWidth: "100%",
position: "relative",
});

View File

@ -1,49 +0,0 @@
import {forwardRef} from "@nextui-org/system";
import {useDOMRef} from "@nextui-org/dom-utils";
import {clsx, __DEV__} from "@nextui-org/shared-utils";
import {Text} from "@nextui-org/text";
import {StyledDivider} from "./divider.styles";
import {UseDividerProps, useDivider} from "./use-divider";
export interface DividerProps extends UseDividerProps {}
const Divider = forwardRef<DividerProps, "div">((props, ref) => {
const {css, children, dividerCss, alignCss, textProps, className, ...otherProps} =
useDivider(props);
const domRef = useDOMRef(ref);
const {css: textCss, ...otherTextProps} = textProps;
return (
<StyledDivider
ref={domRef}
className={clsx("nextui-divider", className)}
css={{
...dividerCss,
...css,
}}
role="separator"
{...otherProps}
>
{children && (
<Text
css={{
...alignCss,
...textCss,
}}
{...otherTextProps}
/>
)}
</StyledDivider>
);
});
if (__DEV__) {
Divider.displayName = "NextUI.Divider";
}
Divider.toString = () => ".nextui-divider";
export default Divider;

View File

@ -1,5 +0,0 @@
// export types
export type {DividerProps} from "./divider";
// export component
export {default as Divider} from "./divider";

View File

@ -1,76 +0,0 @@
import {useMemo} from "react";
import {HTMLNextUIProps, CSS} from "@nextui-org/system";
import {TextProps} from "@nextui-org/text";
import {DividerAlign, getMargin} from "@nextui-org/shared-utils";
export interface UseDividerProps extends HTMLNextUIProps<"div"> {
/**
* x-axis spacing
* @default 0
*/
x?: number;
/**
* y-axis spacing
* @default 0
*/
y?: number;
/**
* Divider height in pixels
* @default 1
*/
height?: CSS["height"];
/**
* Divider background color
* @default "border"
*/
color?: CSS["color"];
/**
* Divider text children color
*/
textProps?: TextProps;
/**
* Divider alignment
* @default center
*/
align?: DividerAlign;
}
export function useDivider(props: UseDividerProps) {
const {
x = 0,
y = 0,
align = "center",
height = 1,
color = "$border",
textProps = {},
...otherProps
} = props;
const alignCss = useMemo<CSS | undefined>(() => {
if (!align || align === "center") return {};
if (align === "left" || align === "start") {
return {transform: "translateY(-50%)", left: "7%"};
}
return {
transform: "translateY(-50%)",
left: "auto",
right: "7%",
};
}, [align]);
const dividerCss = useMemo(() => {
const top = y ? getMargin(y / 2) : 0;
const left = x ? getMargin(x / 2) : 0;
return {
backgroundColor: color,
margin: `${top} ${left}`,
height: `calc(${height} * 1px)`,
};
}, [x, y, color]);
return {dividerCss, alignCss, textProps, ...otherProps};
}
export type UseDividerReturn = ReturnType<typeof useDivider>;

View File

@ -1,11 +0,0 @@
import React from "react";
import {Meta} from "@storybook/react";
import {Divider} from "../src";
export default {
title: "Layout/Divider",
component: Divider,
} as Meta;
export const Default = () => <Divider />;

View File

@ -1,9 +0,0 @@
{
"extends": "../../../tsconfig.json",
"compilerOptions": {
"paths": {
"@stitches/react": ["../../../node_modules/@stitches/react"]
}
},
"include": ["src", "index.ts"]
}

View File

@ -1,13 +0,0 @@
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,
});

View File

@ -1,24 +0,0 @@
# @nextui-org/grid
A Quick description of the component
> This is an internal utility, not intended for public usage.
## Installation
```sh
yarn add @nextui-org/grid
# or
npm i @nextui-org/grid
```
## 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).

View File

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

View File

@ -1,11 +0,0 @@
{
"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"
}
}
}

View File

@ -1,48 +0,0 @@
{
"name": "@nextui-org/grid",
"version": "2.0.0-beta.1",
"description": "The layout Grid adapts to screen size and orientation, ensuring consistency across layouts.",
"keywords": [
"grid"
],
"author": "Junior Garcia <jrgarciadev@gmail.com>",
"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/grid"
},
"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"
}
}

View File

@ -1,58 +0,0 @@
import type {Wrap} from "@nextui-org/shared-utils";
import {useMemo} from "react";
import {forwardRef} from "@nextui-org/system";
import {useDOMRef} from "@nextui-org/dom-utils";
import {clsx, __DEV__} from "@nextui-org/shared-utils";
import GridItem, {GridProps} from "./grid";
export interface GridContainerProps extends GridProps {
/**
* The children's spacing, commonly used for `Grid` components
* @default 0
*/
gap?: number;
/**
* CSS "flex-wrap" property
* @default "wrap"
*/
wrap?: Wrap;
}
const GridContainer = forwardRef<GridContainerProps, "div">((props, ref) => {
const {children, css, gap = 0, wrap = "wrap", className, ...otherProps} = props;
const domRef = useDOMRef(ref);
const gapUnit = useMemo(() => {
return `calc(${gap} * $space$3)`;
}, [gap]);
return (
<GridItem
ref={domRef}
className={clsx("nextui-grid-container", className)}
css={{
$$gridGapUnit: gapUnit,
display: "flex",
flexWrap: wrap,
boxSizing: "border-box",
margin: "calc(-1 * $$gridGapUnit)",
width: "calc(100% + $$gridGapUnit * 2)",
...css,
}}
{...otherProps}
>
{children}
</GridItem>
);
});
if (__DEV__) {
GridContainer.displayName = "NextUI.GridContainer";
}
GridContainer.toString = () => ".nextui-grid-container";
export default GridContainer;

View File

@ -1,7 +0,0 @@
import {styled} from "@nextui-org/system";
export const StyledGrid = styled("div", {
margin: 0,
boxSizing: "border-box",
padding: "$$gridGapUnit",
});

View File

@ -1,43 +0,0 @@
import {forwardRef} from "@nextui-org/system";
import {useDOMRef} from "@nextui-org/dom-utils";
import {clsx, __DEV__} from "@nextui-org/shared-utils";
import {StyledGrid} from "./grid.styles";
import GridContainer from "./grid-container";
import {UseGridProps, useGrid} from "./use-grid";
export interface GridProps extends UseGridProps {}
type CompoundGrid = {
Container: typeof GridContainer;
};
const Grid = forwardRef<GridProps, "div", CompoundGrid>((props, ref) => {
const {children, gridCss, css, className, ...otherProps} = useGrid(props);
const domRef = useDOMRef(ref);
return (
<StyledGrid
ref={domRef}
className={clsx("nextui-grid", className)}
css={{
...gridCss,
...css,
}}
{...otherProps}
>
{children}
</StyledGrid>
);
});
Grid.Container = GridContainer;
if (__DEV__) {
Grid.displayName = "NextUI.Grid";
}
Grid.toString = () => ".nextui-grid";
export default Grid;

View File

@ -1,8 +0,0 @@
import Grid from "./grid";
// export types
export type {GridProps} from "./grid";
export type {GridContainerProps} from "./grid-container";
// export component
export {Grid};

View File

@ -1,152 +0,0 @@
import type {HTMLNextUIProps} from "@nextui-org/system";
import {
BreakpointsValue,
Justify,
Direction,
AlignItems,
AlignContent,
clsx,
} from "@nextui-org/shared-utils";
import {useMemo} from "react";
export interface UseGridProps extends HTMLNextUIProps<"div"> {
/**
* Max width extra small devices (<650px)
* @default "false"
*/
xs?: BreakpointsValue;
/**
* Max width small devices (>=650px)
* @default "false"
*/
sm?: BreakpointsValue;
/**
* Max width medium devices (>=960px)
* @default "false"
*/
md?: BreakpointsValue;
/**
* Max width large devices (>=1280px)
* @default "false"
*/
lg?: BreakpointsValue;
/**
* Max width extra large devices (>=1400px)
* @default "false"
*/
xl?: BreakpointsValue;
/**
* CSS "justify-content" property
*/
justify?: Justify;
/**
* CSS "flex-direction" property
*/
direction?: Direction;
/**
* CSS "align-items" property
*/
alignItems?: AlignItems;
/**
* CSS "align-content" property
*/
alignContent?: AlignContent;
}
const getItemLayout = (val?: BreakpointsValue): React.CSSProperties => {
const display = val === 0 ? "none" : "inherit";
if (typeof val === "number") {
const width = (100 / 12) * val;
const ratio = width > 100 ? "100%" : width < 0 ? "0" : `${width}%`;
return {
flexGrow: 0,
display,
maxWidth: ratio,
flexBasis: ratio,
};
}
return {
flexGrow: 1,
display,
maxWidth: "100%",
flexBasis: "0",
};
};
export function useGrid(props: UseGridProps) {
const {
xs = false,
sm = false,
md = false,
lg = false,
xl = false,
alignItems,
alignContent,
justify,
direction,
className,
...otherProps
} = props;
const classes = useMemo(() => {
const breaks: {[key: string]: unknown} = {
xs,
sm,
md,
lg,
xl,
};
const classString = Object.keys(breaks).reduce((pre, name) => {
if (breaks[name] !== undefined && breaks[name] !== false) return `${pre} ${name}`;
return pre;
}, "");
return classString.trim();
}, [xs, sm, md, lg, xl]);
const gridCss = useMemo(() => {
return {
alignItems,
alignContent,
justifyContent: justify,
flexDirection: direction,
"&.xs": {
...getItemLayout(xs),
},
"@xsMax": {
"&.xs": {
...getItemLayout(xs),
},
},
"@sm": {
"&.sm": {
...getItemLayout(sm),
},
},
"@md": {
"&.md": {
...getItemLayout(md),
},
},
"@lg": {
"&.lg": {
...getItemLayout(lg),
},
},
"@xl": {
"&.xl": {
...getItemLayout(xl),
},
},
};
}, [xs, sm, md, lg, xl, justify, direction, alignItems, alignContent, getItemLayout]);
return {gridCss, className: clsx(classes, className), ...otherProps};
}
export type UseGridReturn = ReturnType<typeof useGrid>;

View File

@ -1,11 +0,0 @@
import React from "react";
import {Meta} from "@storybook/react";
import {Grid} from "../src";
export default {
title: "Layout/Grid",
component: Grid,
} as Meta;
export const Default = () => <Grid />;

View File

@ -1,9 +0,0 @@
{
"extends": "../../../tsconfig.json",
"compilerOptions": {
"paths": {
"@stitches/react": ["../../../node_modules/@stitches/react"]
}
},
"include": ["src", "index.ts"]
}

View File

@ -1,13 +0,0 @@
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,
});

View File

@ -45,7 +45,6 @@
"@nextui-org/use-resize": "workspace:*"
},
"devDependencies": {
"@nextui-org/grid": "workspace:*",
"clean-package": "2.1.1",
"react": "^17.0.2"
}

View File

@ -49,8 +49,6 @@
},
"devDependencies": {
"@react-types/link": "^3.3.3",
"@nextui-org/spacer": "workspace:*",
"@nextui-org/grid": "workspace:*",
"@nextui-org/text": "workspace:*",
"clean-package": "2.1.1",
"react": "^17.0.2"

View File

@ -1,12 +1,12 @@
import type {AriaLinkProps} from "@react-types/link";
import type {StyledLinkProps} from "@nextui-org/theme";
import type {LinkVariantProps} from "@nextui-org/theme";
import {useLink as useAriaLink} from "@react-aria/link";
import {HTMLNextUIProps} from "@nextui-org/system";
import {useDOMRef} from "@nextui-org/dom-utils";
import {ReactRef} from "@nextui-org/shared-utils";
export interface Props extends HTMLNextUIProps<"a">, StyledLinkProps {
export interface Props extends HTMLNextUIProps<"a">, LinkVariantProps {
/**
* Ref to the DOM node.
*/

View File

@ -1,5 +1,4 @@
import React from "react";
import {Grid} from "@nextui-org/grid";
import {cva, linkVariants, type VariantProps, ExtendVariantProps} from "@nextui-org/theme";
import {Link, LinkProps} from "../src";
@ -42,78 +41,52 @@ export const CustomVariant = () => {
};
export const Sizes = () => (
<Grid.Container gap={1}>
<Grid xs={12}>
<Link color="primary" href="#" size="xs">
{text}
</Link>
</Grid>
<Grid xs={12}>
<Link color="secondary" href="#" size="sm">
{text}
</Link>
</Grid>
<Grid xs={12}>
<Link color="success" href="#" size="md">
{text}
</Link>
</Grid>
<Grid xs={12}>
<Link color="warning" href="#" size="xl">
{text}
</Link>
</Grid>
<Grid xs={12}>
<Link className="text-2xl" color="error" href="#">
{text}
</Link>
</Grid>
<Grid xs={12}>
<Link className="text-2xl text-pink-500" href="#">
{text}
</Link>
</Grid>
</Grid.Container>
<div className="flex flex-wrap space-y-2">
<Link color="primary" href="#" size="xs">
{text}
</Link>
<Link color="secondary" href="#" size="sm">
{text}
</Link>
<Link color="success" href="#" size="md">
{text}
</Link>
<Link color="warning" href="#" size="xl">
{text}
</Link>
<Link className="text-2xl" color="error" href="#">
{text}
</Link>
<Link className="text-2xl text-pink-500" href="#">
{text}
</Link>
</div>
);
export const Colors = () => (
<Grid.Container gap={1}>
<Grid xs={12}>
<Link color="foreground" href="#">
{text}
</Link>
</Grid>
<Grid xs={12}>
<Link color="primary" href="#">
{text}
</Link>
</Grid>
<Grid xs={12}>
<Link color="secondary" href="#">
{text}
</Link>
</Grid>
<Grid xs={12}>
<Link color="success" href="#">
{text}
</Link>
</Grid>
<Grid xs={12}>
<Link color="warning" href="#">
{text}
</Link>
</Grid>
<Grid xs={12}>
<Link color="error" href="#">
{text}
</Link>
</Grid>
<Grid xs={12}>
<Link className="text-teal-600" href="#">
{text}
</Link>
</Grid>
</Grid.Container>
<div className="flex flex-wrap space-y-2">
<Link color="foreground" href="#">
{text}
</Link>
<Link color="primary" href="#">
{text}
</Link>
<Link color="secondary" href="#">
{text}
</Link>
<Link color="success" href="#">
{text}
</Link>
<Link color="warning" href="#">
{text}
</Link>
<Link color="error" href="#">
{text}
</Link>
<Link className="text-teal-600" href="#">
{text}
</Link>
</div>
);
export const isUnderline = () => (
@ -144,62 +117,42 @@ export const isExternal = () => {
};
return (
<Grid.Container gap={1}>
<Grid xs={12}>
<Link isExternal href="#">
{text}
</Link>
</Grid>
<Grid xs={12}>
<Link isExternal color="secondary" href="#">
{text}
</Link>
</Grid>
<Grid xs={12}>
<Link isExternal color="success" externalIcon={<CustomLink />} href="#">
{text}
</Link>
</Grid>
</Grid.Container>
<div className="flex flex-wrap space-y-2">
<Link isExternal href="#">
{text}
</Link>
<Link isExternal color="secondary" href="#">
{text}
</Link>
<Link isExternal color="success" externalIcon={<CustomLink />} href="#">
{text}
</Link>
</div>
);
};
export const isBlock = () => (
<Grid.Container gap={1}>
<Grid xs={12}>
<Link isBlock color="foreground" href="#">
{text}
</Link>
</Grid>
<Grid xs={12}>
<Link isBlock color="primary" href="#">
{text}
</Link>
</Grid>
<Grid xs={12}>
<Link isBlock color="secondary" href="#">
{text}
</Link>
</Grid>
<Grid xs={12}>
<Link isBlock color="success" href="#">
{text}
</Link>
</Grid>
<Grid xs={12}>
<Link isBlock color="warning" href="#">
{text}
</Link>
</Grid>
<Grid xs={12}>
<Link isBlock color="error" href="#">
{text}
</Link>
</Grid>
<Grid xs={12}>
<Link isBlock className="text-pink-600 hover:after:bg-pink-600/25" href="#">
{text}
</Link>
</Grid>
</Grid.Container>
<div className="flex flex-wrap space-y-2">
<Link isBlock color="foreground" href="#">
{text}
</Link>
<Link isBlock color="primary" href="#">
{text}
</Link>
<Link isBlock color="secondary" href="#">
{text}
</Link>
<Link isBlock color="success" href="#">
{text}
</Link>
<Link isBlock color="warning" href="#">
{text}
</Link>
<Link isBlock color="error" href="#">
{text}
</Link>
<Link isBlock className="text-pink-600 hover:after:bg-pink-600/25" href="#">
{text}
</Link>
</div>
);

View File

@ -42,8 +42,6 @@
"@nextui-org/dom-utils": "workspace:*"
},
"devDependencies": {
"@nextui-org/spacer": "workspace:*",
"@nextui-org/grid": "workspace:*",
"clean-package": "2.1.1",
"react": "^17.0.2"
}

View File

@ -42,7 +42,6 @@
"@nextui-org/shared-css": "workspace:*",
"@nextui-org/dom-utils": "workspace:*",
"@nextui-org/use-pagination": "workspace:*",
"@nextui-org/grid": "workspace:*",
"@react-aria/utils": "^3.14.0"
},
"devDependencies": {

View File

@ -52,7 +52,6 @@
"@react-types/radio": "^3.3.0",
"@react-types/shared": "^3.15.0",
"@nextui-org/button": "workspace:*",
"@nextui-org/spacer": "workspace:*",
"clean-package": "2.1.1",
"react": "^17.0.2"
}

View File

@ -1,24 +0,0 @@
# @nextui-org/row
A Quick description of the component
> This is an internal utility, not intended for public usage.
## Installation
```sh
yarn add @nextui-org/row
# or
npm i @nextui-org/row
```
## 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).

View File

@ -1,103 +0,0 @@
import * as React from "react";
import {render} from "@testing-library/react";
import {Row} from "../src";
describe("Row", () => {
it("should render correctly", () => {
const wrapper = render(<Row />);
expect(() => wrapper.unmount()).not.toThrow();
});
it("ref should be forwarded", () => {
const ref = React.createRef<HTMLDivElement>();
render(<Row ref={ref} />);
expect(ref.current).not.toBeNull();
});
it("should render different components", () => {
let wrapper = render(<Row as="p" data-testid="p-row-test" />);
let p = wrapper.getByTestId("p-row-test");
expect(p).toBeTruthy();
wrapper = render(<Row as="details" data-testid="details-row-test" />);
let details = wrapper.getByTestId("details-row-test");
expect(details).toBeTruthy();
wrapper = render(<Row as="h1" data-testid="h1-row-test" />);
let h1 = wrapper.getByTestId("h1-row-test");
expect(h1).toBeTruthy();
});
it("the children should be aligned correctly", () => {
const wrapper = render(
<div>
<Row justify="flex-end">
<div />
</Row>
<Row justify="center">
<div />
</Row>
<Row justify="space-around">
<div />
</Row>
<Row justify="space-between">
<div />
</Row>
<Row align="flex-start">
<div />
</Row>
<Row align="center">
<div />
</Row>
<Row align="flex-end">
<div />
</Row>
</div>,
);
expect(() => wrapper.unmount()).not.toThrow();
});
it("the children should have the correct spacing", () => {
const wrapper = render(
<div>
<Row gap={1}>
<div />
</Row>
<Row gap={2}>
<div />
</Row>
<Row gap={10}>
<div />
</Row>
</div>,
);
expect(() => wrapper.unmount()).not.toThrow();
});
it("should work with nested", () => {
const wrapper = render(
<Row>
<Row>
<Row>
<div>
<Row>row</Row>
</div>
</Row>
</Row>
</Row>,
);
expect(() => wrapper.unmount()).not.toThrow();
});
});

View File

@ -1,11 +0,0 @@
{
"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"
}
}
}

View File

@ -1,48 +0,0 @@
{
"name": "@nextui-org/row",
"version": "2.0.0-beta.1",
"description": "The row component is part of the NextUI&#x27;s Grid system that uses a series of containers, rows and columns",
"keywords": [
"row"
],
"author": "Junior Garcia <jrgarciadev@gmail.com>",
"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/row"
},
"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"
}
}

View File

@ -1,5 +0,0 @@
// export types
export type {RowProps} from "./row";
// export component
export {default as Row} from "./row";

View File

@ -1,8 +0,0 @@
import {styled} from "@nextui-org/system";
export const StyledRow = styled("div", {
display: "flex",
position: "relative",
boxSizing: "border-box",
width: "100%",
});

View File

@ -1,36 +0,0 @@
import {forwardRef} from "@nextui-org/system";
import {useDOMRef} from "@nextui-org/dom-utils";
import {clsx, __DEV__} from "@nextui-org/shared-utils";
import {useRow, UseRowProps} from "./use-row";
import {StyledRow} from "./row.styles";
export interface RowProps extends UseRowProps {}
const Row = forwardRef<RowProps, "div">((props, ref) => {
const {children, rowCss, css, className, ...otherProps} = useRow(props);
const domRef = useDOMRef(ref);
return (
<StyledRow
ref={domRef}
className={clsx("nextui-row", className)}
css={{
...rowCss,
...css,
}}
{...otherProps}
>
{children}
</StyledRow>
);
});
if (__DEV__) {
Row.displayName = "NextUI.Row";
}
Row.toString = () => ".nextui-row";
export default Row;

View File

@ -1,52 +0,0 @@
import type {Wrap, Justify, AlignItems} from "@nextui-org/shared-utils";
import type {HTMLNextUIProps} from "@nextui-org/system";
import {useMemo} from "react";
export interface UseRowProps extends HTMLNextUIProps<"div"> {
/**
* The children's spacing, commonly used for `Col` component
* @default 0
*/
gap?: number;
/**
* CSS "flex-wrap" property
* @default "nowrap"
*/
wrap?: Wrap;
/**
* CSS "justify-content" property
* @default "flex-start"
*/
justify?: Justify;
/**
* CSS "align-items" property
* @default "flex-start"
*/
align?: AlignItems;
}
export function useRow(props: UseRowProps) {
const {
gap = 0,
wrap = "nowrap",
justify = "flex-start",
align = "flex-start",
...otherProps
} = props;
const rowCss = useMemo(() => {
return {
flexWrap: wrap,
$$rowGap: `calc(${gap} * $space$lg)`,
marginLeft: `calc(${gap} * $space$lg / 2)`,
marginRight: `calc(${gap} * $space$lg / 2)`,
justifyContent: justify,
alignItems: align,
};
}, [wrap, gap, justify, align]);
return {rowCss, ...otherProps};
}
export type UseRowReturn = ReturnType<typeof useRow>;

View File

@ -1,9 +0,0 @@
{
"extends": "../../../tsconfig.json",
"compilerOptions": {
"paths": {
"@stitches/react": ["../../../node_modules/@stitches/react"]
}
},
"include": ["src", "index.ts"]
}

View File

@ -1,13 +0,0 @@
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,
});

View File

@ -1,24 +0,0 @@
# @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).

View File

@ -1,51 +0,0 @@
import * as React from "react";
import {render} from "@testing-library/react";
import {Spacer} from "../src";
describe("Spacer", () => {
test("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();
});
it("should support x and y props", () => {
const wrapper = render(
<div>
<Spacer x={5} />
<Spacer x={15} />
<Spacer y={15} />
<Spacer y={2} />
</div>,
);
expect(() => wrapper.unmount()).not.toThrow();
});
it("should work with float numbers", () => {
const wrapper = render(
<div>
<Spacer x={2.2} />
<Spacer x={1.5} />
<Spacer y={0.1} />
<Spacer y={1.8} />
</div>,
);
expect(() => wrapper.unmount()).not.toThrow();
});
it("should support inline prop", () => {
const wrapper = render(<Spacer inline />);
expect(() => wrapper.unmount()).not.toThrow();
});
});

View File

@ -1,11 +0,0 @@
{
"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"
}
}
}

View File

@ -1,48 +0,0 @@
{
"name": "@nextui-org/spacer",
"version": "2.0.0-beta.1",
"description": "The Spacer component provides a vertically or horizontally empty space",
"keywords": [
"spacer"
],
"author": "Junior Garcia <jrgarciadev@gmail.com>",
"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"
}
}

View File

@ -1,5 +0,0 @@
// export types
export type {SpacerProps} from "./spacer";
// export component
export {default as Spacer} from "./spacer";

View File

@ -1,15 +0,0 @@
import {styled} from "@nextui-org/system";
export const StyledSpacer = styled("span", {
size: "1px",
variants: {
inline: {
true: {
display: "inline-block",
},
false: {
display: "block",
},
},
},
});

View File

@ -1,37 +0,0 @@
import {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 UseSpacerProps {}
const Spacer = forwardRef<SpacerProps, "span">((props, ref) => {
const {children, spacerCss, inline, css, ...otherProps} = useSpacer(props);
const domRef = useDOMRef(ref);
return (
<StyledSpacer
ref={domRef}
aria-hidden="true"
css={{
...spacerCss,
...css,
}}
inline={inline}
{...otherProps}
>
{children}
</StyledSpacer>
);
});
if (__DEV__) {
Spacer.displayName = "NextUI.Spacer";
}
Spacer.toString = () => ".nextui-spacer";
export default Spacer;

View File

@ -1,51 +0,0 @@
import type {HTMLNextUIProps} from "@nextui-org/system";
import {getMargin} from "@nextui-org/shared-utils";
import {useMemo} from "react";
export interface UseSpacerProps extends HTMLNextUIProps<"span"> {
/**
* x-axis spacing
*/
x?: number;
/**
* y-axis spacing
*/
y?: number;
/**
* Whether should have inline space
*/
inline?: boolean;
}
export function useSpacer(props: UseSpacerProps) {
const {x, y, inline = false, ...otherProps} = props;
const spacerCss = useMemo(() => {
let css = {};
if (x) {
css = {
...css,
marginLeft: getMargin(x),
};
}
if (y) {
css = {
...css,
marginTop: getMargin(y),
};
}
return css;
}, [x, y]);
return {
spacerCss,
inline,
...otherProps,
};
}
export type UseSpacerReturn = ReturnType<typeof useSpacer>;

View File

@ -1,64 +0,0 @@
import React from "react";
import {Meta} from "@storybook/react";
import {styled} from "@nextui-org/system";
import {Spacer} from "../src";
export default {
title: "Layout/Spacer",
component: Spacer,
} as Meta;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const Container = ({children, vertical}: any) => (
<div
style={{
display: "flex",
flexDirection: vertical ? "column" : "row",
justifyContent: "space-between",
width: "100%",
maxWidth: "50%",
minWidth: "50%",
}}
>
{children}
</div>
);
const SpacerContainer = styled("div", {
width: "100%",
background: "$primary",
borderRadius: "8px",
});
export const Vertical = () => (
<Container vertical>
<SpacerContainer>
<Spacer y={1} />
</SpacerContainer>
<Spacer y={1} />
<SpacerContainer>
<Spacer y={2} />
</SpacerContainer>
<Spacer y={1} />
<SpacerContainer>
<Spacer y={3} />
</SpacerContainer>
</Container>
);
export const Horizontal = () => (
<Container>
<SpacerContainer css={{minHeight: "100px"}}>
<Spacer x={5} />
</SpacerContainer>
<Spacer x={2} />
<SpacerContainer css={{minHeight: "100px"}}>
<Spacer x={5} />
</SpacerContainer>
<Spacer x={2} />
<SpacerContainer css={{minHeight: "100px"}}>
<Spacer x={5} />
</SpacerContainer>
</Container>
);

View File

@ -1,9 +0,0 @@
{
"extends": "../../../tsconfig.json",
"compilerOptions": {
"paths": {
"@stitches/react": ["../../../node_modules/@stitches/react"]
}
},
"include": ["src", "index.ts"]
}

View File

@ -1,13 +0,0 @@
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,
});

View File

@ -40,25 +40,20 @@
},
"dependencies": {
"@nextui-org/system": "workspace:*",
"@nextui-org/theme": "workspace:*",
"@nextui-org/avatar": "workspace:*",
"@nextui-org/badge": "workspace:*",
"@nextui-org/button": "workspace:*",
"@nextui-org/card": "workspace:*",
"@nextui-org/checkbox": "workspace:*",
"@nextui-org/code": "workspace:*",
"@nextui-org/col": "workspace:*",
"@nextui-org/container": "workspace:*",
"@nextui-org/divider": "workspace:*",
"@nextui-org/drip": "workspace:*",
"@nextui-org/grid": "workspace:*",
"@nextui-org/image": "workspace:*",
"@nextui-org/link": "workspace:*",
"@nextui-org/loading": "workspace:*",
"@nextui-org/pagination": "workspace:*",
"@nextui-org/radio": "workspace:*",
"@nextui-org/row": "workspace:*",
"@nextui-org/snippet": "workspace:*",
"@nextui-org/spacer": "workspace:*",
"@nextui-org/text": "workspace:*",
"@nextui-org/user": "workspace:*"
},

View File

@ -1,11 +1,6 @@
export * from "@nextui-org/system";
export * from "@nextui-org/col";
export * from "@nextui-org/row";
export * from "@nextui-org/container";
export * from "@nextui-org/spacer";
export * from "@nextui-org/avatar";
export * from "@nextui-org/badge";
export * from "@nextui-org/grid";
export * from "@nextui-org/text";
export * from "@nextui-org/link";
export * from "@nextui-org/code";

View File

@ -84,6 +84,11 @@ module.exports = plugin(
DEFAULT: "#11181C",
dark: "#ECEDEE",
},
border: {
light: "#00000026",
DEFAULT: "#00000026",
dark: "#ffffff26",
},
neutral: {
light: "#889096",
DEFAULT: "#889096",

View File

@ -1,29 +0,0 @@
import {cva, type VariantProps} from "../../utils";
const containerBase = ["container"];
const containerVariants = {};
// const containerCompoundVariants = [];
const containerDefaultVariants = {};
const containerStyles = {
variants: containerVariants,
// compoundVariants: containerCompoundVariants,
defaultVariants: containerDefaultVariants,
};
// @ts-ignore
const container = cva(containerBase, containerStyles);
export {
containerBase,
containerVariants,
// containerCompoundVariants,
containerDefaultVariants,
containerStyles,
container,
};
export type StyledContainerProps = VariantProps<typeof container>;

View File

@ -1,2 +1 @@
export * from "./link";
export * from "./container";

View File

@ -95,4 +95,4 @@ const link = cva(linkBase, linkStyles);
export {linkBase, linkVariants, linkCompoundVariants, linkDefaultVariants, linkStyles, link};
export type StyledLinkProps = VariantProps<typeof link>;
export type LinkVariantProps = VariantProps<typeof link>;

144
pnpm-lock.yaml generated
View File

@ -304,7 +304,6 @@ importers:
'@nextui-org/shared-css': workspace:*
'@nextui-org/shared-icons': workspace:*
'@nextui-org/shared-utils': workspace:*
'@nextui-org/spacer': workspace:*
'@nextui-org/system': workspace:*
'@react-aria/focus': ^3.9.0
'@react-aria/utils': ^3.14.0
@ -319,20 +318,15 @@ importers:
'@react-aria/utils': 3.14.0_react@17.0.2
devDependencies:
'@nextui-org/shared-icons': link:../../utilities/shared-icons
'@nextui-org/spacer': link:../spacer
clean-package: 2.1.1
react: 17.0.2
packages/components/badge:
specifiers:
'@nextui-org/avatar': workspace:*
'@nextui-org/col': workspace:*
'@nextui-org/dom-utils': workspace:*
'@nextui-org/grid': workspace:*
'@nextui-org/row': workspace:*
'@nextui-org/shared-icons': workspace:*
'@nextui-org/shared-utils': workspace:*
'@nextui-org/spacer': workspace:*
'@nextui-org/system': workspace:*
'@nextui-org/text': workspace:*
clean-package: 2.1.1
@ -343,11 +337,7 @@ importers:
'@nextui-org/system': link:../../core/system
devDependencies:
'@nextui-org/avatar': link:../avatar
'@nextui-org/col': link:../col
'@nextui-org/grid': link:../grid
'@nextui-org/row': link:../row
'@nextui-org/shared-icons': link:../../utilities/shared-icons
'@nextui-org/spacer': link:../spacer
'@nextui-org/text': link:../text
clean-package: 2.1.1
react: 17.0.2
@ -356,12 +346,10 @@ importers:
specifiers:
'@nextui-org/dom-utils': workspace:*
'@nextui-org/drip': workspace:*
'@nextui-org/grid': workspace:*
'@nextui-org/loading': workspace:*
'@nextui-org/shared-css': workspace:*
'@nextui-org/shared-icons': workspace:*
'@nextui-org/shared-utils': workspace:*
'@nextui-org/spacer': workspace:*
'@nextui-org/system': workspace:*
'@react-aria/button': ^3.6.2
'@react-aria/focus': ^3.9.0
@ -382,10 +370,8 @@ importers:
'@react-aria/interactions': 3.12.0_react@17.0.2
'@react-aria/utils': 3.14.0_react@17.0.2
devDependencies:
'@nextui-org/grid': link:../grid
'@nextui-org/loading': link:../loading
'@nextui-org/shared-icons': link:../../utilities/shared-icons
'@nextui-org/spacer': link:../spacer
'@react-types/button': 3.6.2_react@17.0.2
'@react-types/shared': 3.15.0_react@17.0.2
clean-package: 2.1.1
@ -394,14 +380,10 @@ importers:
packages/components/card:
specifiers:
'@nextui-org/code': workspace:*
'@nextui-org/col': workspace:*
'@nextui-org/divider': workspace:*
'@nextui-org/dom-utils': workspace:*
'@nextui-org/drip': workspace:*
'@nextui-org/grid': workspace:*
'@nextui-org/image': workspace:*
'@nextui-org/link': workspace:*
'@nextui-org/row': workspace:*
'@nextui-org/shared-css': workspace:*
'@nextui-org/shared-utils': workspace:*
'@nextui-org/system': workspace:*
@ -413,7 +395,6 @@ importers:
clean-package: 2.1.1
react: ^17.0.2
dependencies:
'@nextui-org/divider': link:../divider
'@nextui-org/dom-utils': link:../../utilities/dom-utils
'@nextui-org/drip': link:../drip
'@nextui-org/image': link:../image
@ -425,10 +406,7 @@ importers:
'@react-aria/utils': 3.14.0_react@17.0.2
devDependencies:
'@nextui-org/code': link:../code
'@nextui-org/col': link:../col
'@nextui-org/grid': link:../grid
'@nextui-org/link': link:../link
'@nextui-org/row': link:../row
'@nextui-org/text': link:../text
'@react-types/shared': 3.15.0_react@17.0.2
clean-package: 2.1.1
@ -484,20 +462,6 @@ importers:
clean-package: 2.1.1
react: 17.0.2
packages/components/col:
specifiers:
'@nextui-org/dom-utils': workspace:*
'@nextui-org/shared-utils': workspace:*
'@nextui-org/system': workspace:*
clean-package: 2.1.1
react: ^17.0.2
dependencies:
'@nextui-org/dom-utils': link:../../utilities/dom-utils
'@nextui-org/shared-utils': link:../../utilities/shared-utils
'@nextui-org/system': link:../../core/system
clean-package: 2.1.1
react: 17.0.2
packages/components/collapse:
specifiers:
'@nextui-org/aria-utils': workspace:*
@ -531,38 +495,6 @@ importers:
clean-package: 2.1.1
react: 17.0.2
packages/components/container:
specifiers:
'@nextui-org/dom-utils': workspace:*
'@nextui-org/shared-utils': workspace:*
'@nextui-org/system': workspace:*
clean-package: 2.1.1
react: ^17.0.2
dependencies:
'@nextui-org/dom-utils': link:../../utilities/dom-utils
'@nextui-org/shared-utils': link:../../utilities/shared-utils
'@nextui-org/system': link:../../core/system
devDependencies:
clean-package: 2.1.1
react: 17.0.2
packages/components/divider:
specifiers:
'@nextui-org/dom-utils': workspace:*
'@nextui-org/shared-utils': workspace:*
'@nextui-org/system': workspace:*
'@nextui-org/text': workspace:*
clean-package: 2.1.1
react: ^17.0.2
dependencies:
'@nextui-org/dom-utils': link:../../utilities/dom-utils
'@nextui-org/shared-utils': link:../../utilities/shared-utils
'@nextui-org/system': link:../../core/system
'@nextui-org/text': link:../text
devDependencies:
clean-package: 2.1.1
react: 17.0.2
packages/components/drip:
specifiers:
'@nextui-org/dom-utils': workspace:*
@ -578,25 +510,9 @@ importers:
clean-package: 2.1.1
react: 17.0.2
packages/components/grid:
specifiers:
'@nextui-org/dom-utils': workspace:*
'@nextui-org/shared-utils': workspace:*
'@nextui-org/system': workspace:*
clean-package: 2.1.1
react: ^17.0.2
dependencies:
'@nextui-org/dom-utils': link:../../utilities/dom-utils
'@nextui-org/shared-utils': link:../../utilities/shared-utils
'@nextui-org/system': link:../../core/system
devDependencies:
clean-package: 2.1.1
react: 17.0.2
packages/components/image:
specifiers:
'@nextui-org/dom-utils': workspace:*
'@nextui-org/grid': workspace:*
'@nextui-org/shared-utils': workspace:*
'@nextui-org/system': workspace:*
'@nextui-org/use-real-shape': workspace:*
@ -612,17 +528,14 @@ importers:
'@nextui-org/use-ref-state': link:../../hooks/use-ref-state
'@nextui-org/use-resize': link:../../hooks/use-resize
devDependencies:
'@nextui-org/grid': link:../grid
clean-package: 2.1.1
react: 17.0.2
packages/components/link:
specifiers:
'@nextui-org/dom-utils': workspace:*
'@nextui-org/grid': workspace:*
'@nextui-org/shared-css': workspace:*
'@nextui-org/shared-utils': workspace:*
'@nextui-org/spacer': workspace:*
'@nextui-org/system': workspace:*
'@nextui-org/text': workspace:*
'@nextui-org/theme': workspace:*
@ -644,8 +557,6 @@ importers:
'@react-aria/link': 3.3.4_react@17.0.2
'@react-aria/utils': 3.14.0_react@17.0.2
devDependencies:
'@nextui-org/grid': link:../grid
'@nextui-org/spacer': link:../spacer
'@nextui-org/text': link:../text
'@react-types/link': 3.3.4_react@17.0.2
clean-package: 2.1.1
@ -654,9 +565,7 @@ importers:
packages/components/loading:
specifiers:
'@nextui-org/dom-utils': workspace:*
'@nextui-org/grid': workspace:*
'@nextui-org/shared-utils': workspace:*
'@nextui-org/spacer': workspace:*
'@nextui-org/system': workspace:*
clean-package: 2.1.1
react: ^17.0.2
@ -665,15 +574,12 @@ importers:
'@nextui-org/shared-utils': link:../../utilities/shared-utils
'@nextui-org/system': link:../../core/system
devDependencies:
'@nextui-org/grid': link:../grid
'@nextui-org/spacer': link:../spacer
clean-package: 2.1.1
react: 17.0.2
packages/components/pagination:
specifiers:
'@nextui-org/dom-utils': workspace:*
'@nextui-org/grid': workspace:*
'@nextui-org/shared-css': workspace:*
'@nextui-org/shared-utils': workspace:*
'@nextui-org/system': workspace:*
@ -683,7 +589,6 @@ importers:
react: ^17.0.2
dependencies:
'@nextui-org/dom-utils': link:../../utilities/dom-utils
'@nextui-org/grid': link:../grid
'@nextui-org/shared-css': link:../../utilities/shared-css
'@nextui-org/shared-utils': link:../../utilities/shared-utils
'@nextui-org/system': link:../../core/system
@ -699,7 +604,6 @@ importers:
'@nextui-org/dom-utils': workspace:*
'@nextui-org/shared-css': workspace:*
'@nextui-org/shared-utils': workspace:*
'@nextui-org/spacer': workspace:*
'@nextui-org/system': workspace:*
'@react-aria/focus': ^3.9.0
'@react-aria/interactions': ^3.12.0
@ -724,27 +628,11 @@ importers:
'@react-stately/radio': 3.6.0_react@17.0.2
devDependencies:
'@nextui-org/button': link:../button
'@nextui-org/spacer': link:../spacer
'@react-types/radio': 3.3.0_react@17.0.2
'@react-types/shared': 3.15.0_react@17.0.2
clean-package: 2.1.1
react: 17.0.2
packages/components/row:
specifiers:
'@nextui-org/dom-utils': workspace:*
'@nextui-org/shared-utils': workspace:*
'@nextui-org/system': workspace:*
clean-package: 2.1.1
react: ^17.0.2
dependencies:
'@nextui-org/dom-utils': link:../../utilities/dom-utils
'@nextui-org/shared-utils': link:../../utilities/shared-utils
'@nextui-org/system': link:../../core/system
devDependencies:
clean-package: 2.1.1
react: 17.0.2
packages/components/snippet:
specifiers:
'@nextui-org/dom-utils': workspace:*
@ -762,21 +650,6 @@ importers:
clean-package: 2.1.1
react: 17.0.2
packages/components/spacer:
specifiers:
'@nextui-org/dom-utils': workspace:*
'@nextui-org/shared-utils': workspace:*
'@nextui-org/system': workspace:*
clean-package: 2.1.1
react: ^17.0.2
dependencies:
'@nextui-org/dom-utils': link:../../utilities/dom-utils
'@nextui-org/shared-utils': link:../../utilities/shared-utils
'@nextui-org/system': link:../../core/system
devDependencies:
clean-package: 2.1.1
react: 17.0.2
packages/components/storybook:
specifiers:
'@babel/preset-env': ^7.14.5
@ -883,21 +756,16 @@ importers:
'@nextui-org/card': workspace:*
'@nextui-org/checkbox': workspace:*
'@nextui-org/code': workspace:*
'@nextui-org/col': workspace:*
'@nextui-org/container': workspace:*
'@nextui-org/divider': workspace:*
'@nextui-org/drip': workspace:*
'@nextui-org/grid': workspace:*
'@nextui-org/image': workspace:*
'@nextui-org/link': workspace:*
'@nextui-org/loading': workspace:*
'@nextui-org/pagination': workspace:*
'@nextui-org/radio': workspace:*
'@nextui-org/row': workspace:*
'@nextui-org/snippet': workspace:*
'@nextui-org/spacer': workspace:*
'@nextui-org/system': workspace:*
'@nextui-org/text': workspace:*
'@nextui-org/theme': workspace:*
'@nextui-org/user': workspace:*
'@stitches/react': 1.2.8
clean-package: 2.1.1
@ -909,21 +777,16 @@ importers:
'@nextui-org/card': link:../../components/card
'@nextui-org/checkbox': link:../../components/checkbox
'@nextui-org/code': link:../../components/code
'@nextui-org/col': link:../../components/col
'@nextui-org/container': link:../../components/container
'@nextui-org/divider': link:../../components/divider
'@nextui-org/drip': link:../../components/drip
'@nextui-org/grid': link:../../components/grid
'@nextui-org/image': link:../../components/image
'@nextui-org/link': link:../../components/link
'@nextui-org/loading': link:../../components/loading
'@nextui-org/pagination': link:../../components/pagination
'@nextui-org/radio': link:../../components/radio
'@nextui-org/row': link:../../components/row
'@nextui-org/snippet': link:../../components/snippet
'@nextui-org/spacer': link:../../components/spacer
'@nextui-org/system': link:../system
'@nextui-org/text': link:../../components/text
'@nextui-org/theme': link:../theme
'@nextui-org/user': link:../../components/user
devDependencies:
'@stitches/react': 1.2.8_react@17.0.2
@ -12844,6 +12707,7 @@ packages:
hasBin: true
dependencies:
dot-object: 2.1.4
dev: true
/clean-stack/2.2.0:
resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
@ -13078,6 +12942,7 @@ packages:
/commander/4.1.1:
resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
engines: {node: '>= 6'}
dev: true
/commander/5.1.0:
resolution: {integrity: sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==}
@ -13865,6 +13730,7 @@ packages:
dependencies:
commander: 4.1.1
glob: 7.2.3
dev: true
/dot-prop/5.3.0:
resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}