Implement containers (#20)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jpbarela/arachnae",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "A simple React component library",
   "main": "dist/index.js",
   "files": [

src/Form/index.jsx

@@ -4,11 +4,12 @@ import { useForm } from "react-hook-form";
 import { createUseStyles } from "react-jss";
 import { useButtonStyles } from "../index";
 import type { ButtonStyleProps } from "../index";
-import { Row, useLayoutStyles } from "../Layout";
-import type { LayoutProps } from "../Layout";
+import { Row, useContainerStyles, useLayoutStyles } from "../Layout";
+import type { ContainerProps, LayoutProps } from "../Layout";
 
 type FormProps<T> = {
   children: React.Node,
+  container?: ContainerProps,
   onSubmit: (T) => void,
 };
 
@@ -33,10 +34,6 @@ type SelectInputType = {
   required?: boolean,
 };
 
-type InputLayoutProps = {
-  width: string,
-};
-
 type SubmitProps = {
   name: string,
   disabled?: boolean,
@@ -56,12 +53,22 @@ type FormContextValue = {
 
 const FormContext = React.createContext(({}: FormContextValue));
 
-export function Form<T>({ children, onSubmit }: FormProps<T>): React.Node {
+export function Form<T>({
+  children,
+  container,
+  onSubmit,
+}: FormProps<T>): React.Node {
+  const containerClasses = useContainerStyles(container || {});
   const { errors, handleSubmit, register } = useForm();
 
   return (
     <FormContext.Provider value={{ errors, handleSubmit, register }}>
-      <form onSubmit={handleSubmit(onSubmit)}>{children}</form>
+      <form
+        onSubmit={handleSubmit(onSubmit)}
+        className={containerClasses.container}
+      >
+        {children}
+      </form>
     </FormContext.Provider>
   );
 }
@@ -152,7 +159,7 @@ export function SelectInput({
   required,
   testID,
   width,
-}: SelectInputType & InputLayoutProps): React.Node {
+}: SelectInputType & LayoutProps): React.Node {
   const { register, errors } = React.useContext(FormContext);
   const classes = useInputStyles();
   const layoutClasses = useLayoutStyles({ width });

src/Layout/__snapshots__/index.test.jsx.snap

@@ -3,7 +3,7 @@
 exports[`Row renders 1`] = `
 <div>
   <div
-    class="row-0-2-1 row-d0-0-2-2 layout-0-2-3 layout-d0-0-2-4"
+    class="row-0-2-1 row-d0-0-2-2 container-0-2-3 container-d0-0-2-4"
   >
     I'm a row
   </div>

src/Layout/index.js

@@ -4,6 +4,22 @@ import { createUseStyles } from "react-jss";
 
 type FlexAlignType = "center" | "space-between" | "start";
 
+export type ContainerProps = {
+  backgroundColor?: string,
+  border?: string,
+  borderBottom?: string,
+  borderLeft?: string,
+  borderRight?: string,
+  boderTop?: string,
+  height?: string,
+  padding?: string,
+  paddingBottom?: string,
+  paddingLeft?: string,
+  paddingRight?: string,
+  paddingTop?: string,
+  width?: string,
+};
+
 export type LayoutProps = {
   height?: string,
   width?: string,
@@ -12,26 +28,24 @@ export type LayoutProps = {
 type RowType = {
   justifyContent: FlexAlignType,
   alignItems: FlexAlignType,
-  backgroundColor?: string,
+  container?: ContainerProps,
   children?: React.Node,
   className?: string,
 };
 
 export function Row({
   alignItems,
   justifyContent,
-  backgroundColor,
+  container,
   children,
   className,
-  height,
-  width,
 }: RowType & LayoutProps): React.Node {
-  const classes = useRowStyles({ alignItems, backgroundColor, justifyContent });
-  const layoutClasses = useLayoutStyles({ height, width });
+  const classes = useRowStyles({ alignItems, justifyContent });
+  const containerClasses = useContainerStyles(container || {});
 
   return (
     <div
-      className={[classes.row, layoutClasses.layout, className]
+      className={[classes.row, containerClasses.container, className]
         .join(" ")
         .trim()}
     >
@@ -52,8 +66,6 @@ const useRowStyles = createUseStyles({
     alignItems: ({ alignItems }: { alignItems: FlexAlignType }) => alignItems,
     justifyContent: ({ justifyContent }: { justifyContent: FlexAlignType }) =>
       justifyContent,
-    backgroundColor: ({ backgroundColor }: { backgroundColor: string }) =>
-      backgroundColor,
   },
 });
 
@@ -65,3 +77,25 @@ export const useLayoutStyles: (LayoutProps) => {
     width: ({ width }) => width,
   },
 });
+
+export const useContainerStyles: (
+  container: ContainerProps
+) => {
+  container: string,
+} = createUseStyles({
+  container: {
+    backgroundColor: (container) => container.backgroundColor,
+    border: (container) => container.border,
+    borderBottom: (container) => container.borderBottom,
+    borderLeft: (container) => container.borderLeft,
+    borderRight: (container) => container.borderRight,
+    borderTop: (container) => container.borderTop,
+    height: (container) => container.height,
+    padding: (container) => container.padding,
+    paddingBottom: (container) => container.paddingBottom,
+    paddingLeft: (container) => container.paddingLeft,
+    paddingRight: (container) => container.paddingRight,
+    paddingTop: (container) => container.paddingTop,
+    width: (container) => container.width,
+  },
+});

src/index.js

@@ -9,7 +9,8 @@ export {
   SubmitInput,
   TextInput,
 } from "./Form";
-export { Row } from "./Layout";
+export { Row, useContainerStyles } from "./Layout";
+export type { ContainerProps } from "./Layout";
 export { Page } from "./Page";
 export * as Poylfills from "./Polyfills";
 export {

stories/Layout/Containers.stories.mdx

@@ -0,0 +1,15 @@
+import { Meta, Story } from "@storybook/addon-docs/blocks";
+import { action } from "@storybook/addon-actions";
+import { Row } from "../../src/Layout";
+
+<Meta title="Layout / Containers" />
+
+# Containers
+
+Arachnae provides a common way to define containers or large blocks of screen real estate. Arachnae provides the
+`useContainerStyles` and `ContainerProps` type to control large `<div>`s that represent grouped components.
+
+The following components implement containers:
+
+- Form
+- Row