[Feat]: New Layout component

[nmosyan]

Description: The Layout component provides a structural framework for arranging and organizing various UI elements on a page. It is designed to support responsive behavior, alignment, and spacing, enabling the creation of consistent and adaptable page layouts across the application.

Requirements:

1. Component Implementation:

• Implement the Layout component in TypeScript.
• Utilize SCSS with BEM methodology for styling.
• Integrate design tokens from @geneui/tokens for consistent colors, spacing, and responsive breakpoints.
• Support configuration options such as:
• Flexible container options (e.g., full-width, fixed-width).
• Responsive layout adjustments for various screen sizes.
• Gutter and padding control for spacing around layout areas.
• Alignment options for vertical and horizontal alignment.
• Include common layout variations like grids, stack (vertical layout), inline (horizontal layout), and container wrappers.
• Support nesting of Layout components to allow for complex structures.
• Ensure accessibility, including keyboard navigation and ARIA roles where needed.

2. Unit Tests:

• Write unit tests using Jest and React Testing Library.
• Ensure test coverage for all props, including rendering of different layout types, alignment options, and spacing configurations.
• Test for edge cases, such as unsupported alignment options, invalid layout types, and missing required props.

3. Storybook Stories:

• Create a Storybook story for the Layout component.
• Showcase different layout variations (e.g., grid, stack, inline) with configurable alignment and spacing.
• Create controls for the props so users can interact with the Layout component in Storybook.
• Document all props of the public interfaces.

4. Figma Design:

Follow the design outlined in the provided Figma link.

Checklist:

• Component is implemented in TypeScript.
• Styling follows SCSS using BEM methodology.
• Design tokens from @geneui/tokens are used for colors, spacing, and breakpoints.
• Unit tests written and cover different states and edge cases.
• Storybook stories created with examples of all props and layout variations.
• Figma design matches the component implementation.