feat(compoenents): row added

CONTRIBUTING.MD

@@ -48,6 +48,8 @@ the following categories:
 - `chore`: all changes to the repository that do not fit into any of the above
   categories
 
+  e.g. `feat(components): add new prop to the avatar component`
+
 
 If you are interested in the detailed specification you can visit
 https://www.conventionalcommits.org/ or check out the

packages/components/col/package.json

@@ -1,7 +1,7 @@
 {
   "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 ",
+  "description": "The column component is part of the NextUI's Grid system that uses a series of containers, rows and columns",
   "keywords": [
     "col"
   ],

packages/components/container/src/index.ts

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

packages/components/container/stories/container.stories.tsx

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

packages/components/row/README.md

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

packages/components/row/__tests__/row.test.tsx

@@ -0,0 +1,96 @@
+import * as React from "react";
+import {render} from "@testing-library/react";
+
+import {Row} from "../src";
+
+describe("Row", () => {
+  test("should render correctly", () => {
+    const wrapper = render(<Row />);
+
+    expect(() => wrapper.unmount()).not.toThrow();
+  });
+
+  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();
+  });
+});

packages/components/row/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" } } }

packages/components/row/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@nextui-org/row",
+  "version": "1.0.0-beta.11",
+  "description": "The row component is part of the NextUI'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"
+  }
+}

packages/components/row/src/index.ts

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

packages/components/row/src/row.styles.ts

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

packages/components/row/src/row.tsx

@@ -0,0 +1,33 @@
+import {forwardRef} from "@nextui-org/system";
+import {useDOMRef} from "@nextui-org/dom-utils";
+import {__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 {rowCss, css, ...otherProps} = useRow(props);
+
+  const domRef = useDOMRef(ref);
+
+  return (
+    <StyledRow
+      ref={domRef}
+      css={{
+        ...rowCss,
+        ...css,
+      }}
+      {...otherProps}
+    />
+  );
+});
+
+if (__DEV__) {
+  Row.displayName = "NextUI.Row";
+}
+
+Row.toString = () => ".nextui-row";
+
+export default Row;

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

@@ -0,0 +1,52 @@
+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>;

packages/components/row/tsconfig.json

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

packages/components/row/tsup.config.ts

@@ -0,0 +1,13 @@
+import {defineConfig} from "tsup";
+import {findUpSync} from "find-up";
+
+export default defineConfig({
+  clean: true,
+  minify: false,
+  treeshake: false,
+  format: ["cjs", "esm"],
+  outExtension(ctx) {
+    return {js: `.${ctx.format}.js`};
+  },
+  inject: process.env.JSX ? [findUpSync("react-shim.js")!] : undefined,
+});

pnpm-lock.yaml

@@ -350,6 +350,21 @@ importers:
       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/spacer:
     specifiers:
       '@nextui-org/dom-utils': workspace:*