diff --git a/package.json b/package.json index 9c54606..187fc73 100644 --- a/package.json +++ b/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": [ diff --git a/src/Form/index.jsx b/src/Form/index.jsx index 99e10b0..40b3295 100644 --- a/src/Form/index.jsx +++ b/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 = { 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({ children, onSubmit }: FormProps): React.Node { +export function Form({ + children, + container, + onSubmit, +}: FormProps): React.Node { + const containerClasses = useContainerStyles(container || {}); const { errors, handleSubmit, register } = useForm(); return ( -
{children}
+
+ {children} +
); } @@ -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 }); diff --git a/src/Layout/__snapshots__/index.test.jsx.snap b/src/Layout/__snapshots__/index.test.jsx.snap index f071ba4..9e8f627 100644 --- a/src/Layout/__snapshots__/index.test.jsx.snap +++ b/src/Layout/__snapshots__/index.test.jsx.snap @@ -3,7 +3,7 @@ exports[`Row renders 1`] = `
I'm a row
diff --git a/src/Layout/index.js b/src/Layout/index.js index 1262d26..ddd65ae 100644 --- a/src/Layout/index.js +++ b/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,7 +28,7 @@ export type LayoutProps = { type RowType = { justifyContent: FlexAlignType, alignItems: FlexAlignType, - backgroundColor?: string, + container?: ContainerProps, children?: React.Node, className?: string, }; @@ -20,18 +36,16 @@ type RowType = { 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 (
@@ -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, + }, +}); diff --git a/src/index.js b/src/index.js index fe825c2..c481668 100644 --- a/src/index.js +++ b/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 { diff --git a/stories/Layout/Containers.stories.mdx b/stories/Layout/Containers.stories.mdx new file mode 100644 index 0000000..6f3f510 --- /dev/null +++ b/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"; + + + +# 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 `
`s that represent grouped components. + +The following components implement containers: + +- Form +- Row