feat(compoenents): container added

packages/components/avatar/src/avatar.tsx

@@ -33,7 +33,11 @@ export interface AvatarProps extends HTMLNextUIProps<"span"> {
   imgRef?: ReactRef<HTMLImageElement>;
 }
 
-const Avatar = forwardRef<AvatarProps, "span">((props, ref) => {
+type CompundAvatar = {
+  Group: typeof AvatarGroup;
+};
+
+const Avatar = forwardRef<AvatarProps, "span", CompundAvatar>((props, ref) => {
   const {
     as,
     src,
@@ -132,9 +136,7 @@ const Avatar = forwardRef<AvatarProps, "span">((props, ref) => {
   );
 });
 
-type AvatarComponent<P = {}> = React.NamedExoticComponent<P> & {
-  Group: typeof AvatarGroup;
-};
+Avatar.Group = AvatarGroup;
 
 if (__DEV__) {
   Avatar.displayName = "NextUI.Avatar";
@@ -142,8 +144,4 @@ if (__DEV__) {
 
 Avatar.toString = () => ".nextui-avatar";
 
-const AvatarWithGroup = Avatar as AvatarComponent<AvatarProps>;
-
-AvatarWithGroup.Group = AvatarGroup;
-
-export default AvatarWithGroup;
+export default Avatar;

packages/components/container/README.md

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

packages/components/container/__tests__/container.test.tsx

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

packages/components/container/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/container/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@nextui-org/container",
+  "version": "1.0.0-beta.11",
+  "description": "A component for fixing an element'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"
+  }
+}

packages/components/container/src/container.styles.ts

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

packages/components/container/src/container.tsx

@@ -0,0 +1,35 @@
+import {forwardRef} from "@nextui-org/system";
+import {useDOMRef} from "@nextui-org/dom-utils";
+import {__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 {containerCss, css, fluid, responsive, ...otherProps} = useContainer(props);
+
+  const domRef = useDOMRef(ref);
+
+  return (
+    <StyledContainer
+      ref={domRef}
+      css={{
+        ...containerCss,
+        ...css,
+      }}
+      fluid={fluid}
+      responsive={responsive}
+      {...otherProps}
+    />
+  );
+});
+
+if (__DEV__) {
+  Container.displayName = "NextUI.Container";
+}
+
+Container.toString = () => ".nextui-container";
+
+export default Container;

packages/components/container/src/index.ts

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

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

@@ -0,0 +1,137 @@
+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"> {
+  /**
+   * 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;
+  /**
+   * 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;
+}
+
+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>;

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

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

packages/components/container/tsconfig.json

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

packages/components/container/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,
+});

packages/components/spacer/src/spacer.tsx

@@ -1,30 +1,23 @@
-import {HTMLNextUIProps, forwardRef} from "@nextui-org/system";
+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 HTMLNextUIProps<"span", UseSpacerProps> {
-  /**
-   * Whether should have inline space
-   */
-  inline?: boolean;
-}
+export interface SpacerProps extends UseSpacerProps {}
 
 const Spacer = forwardRef<SpacerProps, "span">((props, ref) => {
+  const {spacerCss, inline, css, ...otherProps} = useSpacer(props);
+
   const domRef = useDOMRef(ref);
 
-  const {x, y, inline = false, css, ...otherProps} = props;
-
-  const {getSpacerCss} = useSpacer({x, y});
-
   return (
     <StyledSpacer
       ref={domRef}
       aria-hidden="true"
       css={{
-        ...getSpacerCss(),
+        ...spacerCss,
         ...css,
       }}
       inline={inline}

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

@@ -1,6 +1,8 @@
-import {useCallback} from "react";
+import type {HTMLNextUIProps} from "@nextui-org/system";
 
-export interface UseSpacerProps {
+import {useMemo} from "react";
+
+export interface UseSpacerProps extends HTMLNextUIProps<"span"> {
   /**
    * x-axis spacing
    */
@@ -9,6 +11,10 @@ export interface UseSpacerProps {
    * 	y-axis spacing
    */
   y?: number;
+  /**
+   * Whether should have inline space
+   */
+  inline?: boolean;
 }
 
 const getMargin = (num: number): string => {
@@ -16,9 +22,9 @@ const getMargin = (num: number): string => {
 };
 
 export function useSpacer(props: UseSpacerProps) {
-  const {x, y} = props;
+  const {x, y, inline = false, ...otherProps} = props;
 
-  const getSpacerCss = useCallback(() => {
+  const spacerCss = useMemo(() => {
     let css = {};
 
     if (x) {
@@ -39,7 +45,9 @@ export function useSpacer(props: UseSpacerProps) {
   }, [x, y]);
 
   return {
-    getSpacerCss,
+    spacerCss,
+    inline,
+    ...otherProps,
   };
 }
 

packages/core/system/src/system.ts

@@ -2,7 +2,7 @@
  * Part of this code is taken from @chakra-ui/system
  */
 
-import {forwardRef as baseForwardRef} from "react";
+import {forwardRef as baseForwardRef, NamedExoticComponent, ReactNode} from "react";
 
 import {CSS} from "./stitches.config";
 
@@ -61,7 +61,11 @@ export type HTMLNextUIProps<T extends As, K extends object = {}> = Omit<
 > &
   K;
 
-export function forwardRef<Props extends object, Component extends As>(
+export function forwardRef<
+  Props extends object,
+  Component extends As,
+  CompoundComponents extends object = {},
+>(
   component: React.ForwardRefRenderFunction<
     any,
     RightJoinProps<PropsOf<Component>, Props> & {
@@ -69,5 +73,6 @@ export function forwardRef<Props extends object, Component extends As>(
     }
   >,
 ) {
-  return baseForwardRef(component) as unknown as ComponentWithAs<Component, Props>;
+  return baseForwardRef(component) as unknown as ComponentWithAs<Component, Props> &
+    CompoundComponents;
 }

pnpm-lock.yaml

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