;
-const StoryContainer: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-
+const StoryContainer = ({ children }: { children: React.ReactNode }) => (
+
{children}
-
+
);
-const StoryCaption: React.FC<{ children: React.ReactNode; align?: TextProps['textAlign'] }> = ({
+const StoryCaption = ({
children,
align
+}: {
+ children: React.ReactNode;
+ align?: TextProps['textAlign'];
}) => (
{children}
@@ -82,10 +87,10 @@ export const Semantic: Story = {
return (
{tags.map((item) => (
-
+
{item.description}
{shortText}
-
+
))}
);
@@ -106,10 +111,10 @@ export const Colors: Story = {
return (
{colors.map((color) => (
-
+
{color}
{shortText}
-
+
))}
);
@@ -122,10 +127,10 @@ export const Sizes: Story = {
return (
{sizes.map((size) => (
-
+
{size}
{shortText}
-
+
))}
);
@@ -144,10 +149,10 @@ export const Weight: Story = {
return (
{weights.map((weight) => (
-
+
{weight}
{shortText}
-
+
))}
);
@@ -166,10 +171,10 @@ export const LetterSpacing: Story = {
return (
{letterSpacings.map((spacing) => (
-
+
{spacing}
{shortText}
-
+
))}
);
@@ -187,10 +192,10 @@ export const TextTransform: Story = {
return (
{textTransform.map((transform) => (
-
+
{transform}
{shortText}
-
+
))}
);
@@ -203,10 +208,10 @@ export const TextAlign: Story = {
return (
{textAlign.map((align) => (
-
+
{align}
{shortText}
-
+
))}
);
diff --git a/src/components/atoms/Text/Text.types.ts b/src/components/atoms/Text/Text.types.ts
index a4ff4a2..3e3a3cc 100644
--- a/src/components/atoms/Text/Text.types.ts
+++ b/src/components/atoms/Text/Text.types.ts
@@ -23,6 +23,8 @@ export type TextProps = {
textAlign?: React.CSSProperties['textAlign'];
/** Defines the text content. */
children?: React.ReactNode;
+ /** Inline style for the text. */
+ style?: React.CSSProperties;
};
export type TextStyledProps = {
diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts
index 4d6de97..66945a9 100644
--- a/src/components/atoms/index.ts
+++ b/src/components/atoms/index.ts
@@ -1,2 +1,14 @@
export * from './Button/Button';
+export * from './Button/Button.types';
+
+export * from './Column/Column';
+export * from './Column/Column.types';
+
+export * from './Display/Display';
+export * from './Display/Display.types';
+
+export * from './Heading/Heading';
+export * from './Heading/Heading.types';
+
export * from './Text/Text';
+export * from './Text/Text.types';
diff --git a/src/components/molecules/Grid/Grid.mdx b/src/components/molecules/Grid/Grid.mdx
new file mode 100644
index 0000000..8e6534f
--- /dev/null
+++ b/src/components/molecules/Grid/Grid.mdx
@@ -0,0 +1,56 @@
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
+import * as GridStories from './Grid.stories.tsx';
+
+
+
+# Grid
+
+The **Grid** component provides a powerful layout system using CSS Grid. It should be used when you want to arrange information differently at each breakpoint or create complex two-dimensional layouts.
+
+
+
+
+
+## Template Columns
+
+Use the **templateColumns** property to define the number and size of grid columns. It supports responsive values through breakpoint objects.
+
+
+
+## Template Rows
+
+Use the **templateRows** property to define the number and size of grid rows.
+
+
+
+## Gap
+
+Control spacing between grid items using **gap**, **rowGap**, and **columnGap** properties.
+
+
+
+## Align Items
+
+The **alignItems** property aligns grid items along the block (vertical) axis.
+
+
+
+## Justify Items
+
+The **justifyItems** property aligns grid items along the inline (horizontal) axis.
+
+
+
+## Align Content
+
+The **alignContent** property aligns the entire grid along the block (vertical) axis when there's extra space.
+
+
+
+## Justify Content
+
+The **justifyContent** property aligns the entire grid along the inline (horizontal) axis when there's extra space.
+
+
diff --git a/src/components/molecules/Grid/Grid.stories.tsx b/src/components/molecules/Grid/Grid.stories.tsx
new file mode 100644
index 0000000..bfe5b31
--- /dev/null
+++ b/src/components/molecules/Grid/Grid.stories.tsx
@@ -0,0 +1,257 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { theme } from '../../../themes';
+import { Column, Text, TextProps } from '../../atoms';
+
+import { Grid } from './Grid';
+import { GridProps } from './Grid.types';
+
+const meta: Meta = {
+ title: 'Components/Molecules/Grid',
+ component: Grid,
+ decorators: [(Story) => ],
+ parameters: {
+ layout: 'centered'
+ },
+ argTypes: {
+ gap: {
+ control: 'select',
+ options: Array.from({ length: 24 }, (_, i) => i)
+ },
+ rowGap: {
+ control: 'select',
+ options: Array.from({ length: 24 }, (_, i) => i)
+ },
+ columnGap: {
+ control: 'select',
+ options: Array.from({ length: 24 }, (_, i) => i)
+ },
+ alignItems: {
+ control: 'select',
+ options: ['start', 'end', 'center', 'stretch']
+ },
+ justifyItems: {
+ control: 'select',
+ options: ['start', 'end', 'center', 'stretch']
+ },
+ alignContent: {
+ control: 'select',
+ options: [
+ 'start',
+ 'end',
+ 'center',
+ 'stretch',
+ 'space-between',
+ 'space-around',
+ 'space-evenly'
+ ]
+ },
+ justifyContent: {
+ control: 'select',
+ options: [
+ 'start',
+ 'end',
+ 'center',
+ 'stretch',
+ 'space-between',
+ 'space-around',
+ 'space-evenly'
+ ]
+ }
+ }
+};
+
+export default meta;
+type Story = StoryObj;
+
+const GridItem = ({ children, height }: { children: React.ReactNode; height?: string }) => (
+
+
+ {children}
+
+
+);
+
+const GridItems = ({ count }: { count: number }) => {
+ return Array.from({ length: count }, (_, index) => (
+ Item {index + 1}
+ ));
+};
+
+const StoryContainer = ({ gap = 4, ...props }: GridProps) => (
+
+ {props.children}
+
+);
+
+const StoryCaption = ({
+ children,
+ align
+}: {
+ children: React.ReactNode;
+ align?: TextProps['textAlign'];
+}) => (
+
+ {children}
+
+);
+
+export const Playground: Story = {
+ args: {
+ as: 'div',
+ gap: 4,
+ templateColumns: 'repeat(6, 1fr)',
+ children:
+ }
+};
+
+export const TemplateColumns: Story = {
+ render: () => (
+
+
+
+ )
+};
+
+export const TemplateRows: Story = {
+ render: () => (
+
+
+
+ )
+};
+
+export const Gap: Story = {
+ render: () => (
+
+
+ Gap (Rows = Columns)
+
+
+
+
+
+ Custom Gap (Rows ≠ Columns)
+
+
+
+
+
+ )
+};
+
+export const AlignItems: Story = {
+ render: () => (
+
+ {(['start', 'end', 'center', 'stretch'] as const).map((align) => (
+
+ {align}
+
+ A
+ B
+
+
+ ))}
+
+ )
+};
+
+export const JustifyItems: Story = {
+ render: () => (
+
+ {(['start', 'end', 'center', 'stretch'] as const).map((justify) => (
+
+ {justify}
+
+ A
+ B
+
+
+ ))}
+
+ )
+};
+
+export const AlignContent: Story = {
+ render: () => (
+
+ {(['start', 'end', 'center', 'space-between'] as const).map((align) => (
+
+ {align}
+
+ A
+ B
+ C
+ D
+
+
+ ))}
+
+ )
+};
+
+export const JustifyContent: Story = {
+ render: () => (
+
+ {(['start', 'end', 'center', 'space-between'] as const).map((justify) => (
+
+ {justify}
+
+ A
+ B
+
+
+ ))}
+
+ )
+};
diff --git a/src/components/molecules/Grid/Grid.styles.ts b/src/components/molecules/Grid/Grid.styles.ts
new file mode 100644
index 0000000..2ad0260
--- /dev/null
+++ b/src/components/molecules/Grid/Grid.styles.ts
@@ -0,0 +1,32 @@
+export type BreakpointMap = { [size in BreakpointSizes]?: T };
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { BreakpointSizes } from 'src/themes/types';
+import { GridStyledProps } from './Grid.types';
+
+export const GridStyled = styled.div`
+ display: grid;
+
+ ${({
+ theme,
+ gap,
+ rowGap,
+ columnGap,
+ templateColumns,
+ templateRows,
+ alignItems,
+ justifyItems,
+ alignContent,
+ justifyContent
+ }) => css`
+ ${gap && `gap: ${theme.spacing[gap]};`}
+ ${rowGap && `row-gap: ${theme.spacing[rowGap]};`}
+ ${columnGap && `column-gap: ${theme.spacing[columnGap]};`}
+ ${templateRows && `grid-template-rows: ${templateRows};`}
+ ${templateColumns && `grid-template-columns: ${templateColumns};`}
+ ${alignItems && `align-items: ${alignItems};`}
+ ${justifyItems && `justify-items: ${justifyItems};`}
+ ${alignContent && `align-content: ${alignContent};`}
+ ${justifyContent && `justify-content: ${justifyContent};`}
+ `}
+`;
diff --git a/src/components/molecules/Grid/Grid.tsx b/src/components/molecules/Grid/Grid.tsx
new file mode 100644
index 0000000..31c63c2
--- /dev/null
+++ b/src/components/molecules/Grid/Grid.tsx
@@ -0,0 +1,10 @@
+import { GridStyled } from './Grid.styles';
+import { GridProps } from './Grid.types';
+
+export const Grid: React.FC = ({ children, as = 'div', ...props }) => {
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/components/molecules/Grid/Grid.types.ts b/src/components/molecules/Grid/Grid.types.ts
new file mode 100644
index 0000000..b1ee6c5
--- /dev/null
+++ b/src/components/molecules/Grid/Grid.types.ts
@@ -0,0 +1,40 @@
+import { SpacingSizes } from 'src/themes/types';
+
+export type GridProps = {
+ /** HTML element or React component used as the main tag for the grid. */
+ as?: React.ElementType;
+ /** Spacing between rows and columns. */
+ gap?: SpacingSizes;
+ /** Spacing between rows. */
+ rowGap?: SpacingSizes;
+ /** Spacing between columns. */
+ columnGap?: SpacingSizes;
+ /** Controls the number and size of grid columns. */
+ templateColumns?: string;
+ /** Controls the number and size of grid rows. */
+ templateRows?: string;
+ /** Alignment of items along the row axis. */
+ alignItems?: React.CSSProperties['alignItems'];
+ /** Alignment of items along the column axis. */
+ justifyItems?: React.CSSProperties['justifyItems'];
+ /** Alignment of the grid content along the row axis. */
+ alignContent?: React.CSSProperties['alignContent'];
+ /** Alignment of the grid content along the column axis. */
+ justifyContent?: React.CSSProperties['justifyContent'];
+ /** Defines the Grid content. */
+ children?: React.ReactNode;
+ /** Inline style for the grid. */
+ style?: React.CSSProperties;
+};
+
+export type GridStyledProps = {
+ gap?: GridProps['gap'];
+ rowGap?: GridProps['rowGap'];
+ columnGap?: GridProps['columnGap'];
+ templateRows?: GridProps['templateRows'];
+ templateColumns?: GridProps['templateColumns'];
+ alignItems?: GridProps['alignItems'];
+ justifyItems?: GridProps['justifyItems'];
+ alignContent?: GridProps['alignContent'];
+ justifyContent?: GridProps['justifyContent'];
+};
diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts
new file mode 100644
index 0000000..058828e
--- /dev/null
+++ b/src/components/molecules/index.ts
@@ -0,0 +1,2 @@
+export * from './Grid/Grid';
+export * from './Grid/Grid.types';
diff --git a/tsconfig.json b/tsconfig.json
index 58f3aea..e44d896 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -33,5 +33,5 @@
"baseUrl": "."
},
"include": ["src/**/*"],
- "exclude": ["**/*.stories.*", "**/*.test.*"]
+ "exclude": ["**/*.stories.*", "**/*.mdx", "**/*.test.*"]
}