Add "Area" component

[kettanaito]

What:

I suggest to introduce an Area component to Atomic Layout.

Why:

Area component would act similarly to Box, but is designed to be used as a direct child of the templateless Composition. Area would accommodate the CSS Grid-related props (column, rowEnd, etc.).

I find this useful for scenarios when I need to align direct Composition children (i.e. specify a child's grid-column) without having to convert the Composition to use template/areas.

Usage example:

import { Composition, Area } from 'atomic-layout'

const Example = () => {
  return (
    <Composition templateCols="1fr 250px">
      <Area columnStart={2}>Content</Area>
    </Composition>
  )
}

Together with the polymorphic as prop the Area component may be used as an augment component that provides grid-related styles to any direct children.

[kettanaito]

The Composition component assigns the area prop directly to the Box:

atomic-layout/packages/atomic-layout/src/components/Composition.tsx

Lines 23 to 27 in ba295c7

	const createAreaComponent = (areaName: string): AreaComponent => (
	props: BoxProps,
	) => {
	return <Box area={areaName} {...props} />
	}

However, that area prop is not listed as the one Box can accept in the GenericProps interface:

atomic-layout/packages/atomic-layout-core/src/const/props.ts

Line 50 in ba295c7

export interface GenericProps {

The props signature of the Box component can accept the area prop just fine due to the key signature on the `BoxProps:

atomic-layout/packages/atomic-layout-core/src/const/props.ts

Lines 349 to 353 in ba295c7

	export interface BoxProps extends GenericProps {
	[propName: string]: any
	flex?: boolean
	inline?: boolean
	}

Also, one thing to keep in mind: Areas rendered this way will not support conditional rendering based on their presence in the areas/template props. At least, with the current setup.