re-structure to monorepo.

packages/webapp/src/components/Layout/Box/Box.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export interface BoxProps {
+  className?: string;
+}
+
+export function Box({ className, ...rest }: BoxProps) {
+  const Element = 'div';
+
+  return <Element className={className} {...rest} />;
+}

packages/webapp/src/components/Layout/Box/index.ts

@@ -0,0 +1 @@
+export * from './Box';

packages/webapp/src/components/Layout/Group/Group.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box } from '../Box';
+import { filterFalsyChildren } from './_utils';
+
+export type GroupPosition = 'right' | 'center' | 'left' | 'apart';
+
+export const GROUP_POSITIONS = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end',
+  apart: 'space-between',
+};
+
+export interface GroupProps extends React.ComponentPropsWithoutRef<'div'> {
+  /** Defines justify-content property */
+  position?: GroupPosition;
+
+  /** Defined flex-wrap property */
+  noWrap?: boolean;
+
+  /** Defines flex-grow property for each element, true -> 1, false -> 0 */
+  grow?: boolean;
+
+  /** Space between elements */
+  spacing?: number;
+
+  /** Defines align-items css property */
+  align?: React.CSSProperties['alignItems'];
+}
+
+const defaultProps: Partial<GroupProps> = {
+  position: 'left',
+  spacing: 20,
+};
+
+export function Group({ children, ...props }: GroupProps) {
+  const groupProps = {
+    ...defaultProps,
+    ...props,
+  };
+  const filteredChildren = filterFalsyChildren(children);
+
+  return <GroupStyled {...groupProps}>{filteredChildren}</GroupStyled>;
+}
+
+const GroupStyled = styled(Box)`
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: ${(props: GroupProps) => (props.noWrap ? 'nowrap' : 'wrap')};
+  justify-content: ${(props: GroupProps) =>
+    GROUP_POSITIONS[props.position || 'left']};
+  gap: ${(props: GroupProps) => props.spacing}px;
+`;

packages/webapp/src/components/Layout/Group/_utils.ts

@@ -0,0 +1,5 @@
+import { Children, ReactElement, ReactNode } from 'react';
+
+export function filterFalsyChildren(children: ReactNode) {
+  return (Children.toArray(children) as ReactElement[]).filter(Boolean);
+}

packages/webapp/src/components/Layout/Group/index.ts

@@ -0,0 +1 @@
+export * from './Group';

packages/webapp/src/components/Layout/Stack/Stack.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box } from '../Box';
+
+export interface StackProps extends React.ComponentPropsWithoutRef<'div'> {
+  /** Key of theme.spacing or number to set gap in px */
+  spacing?: number;
+
+  /** align-items CSS property */
+  align?: React.CSSProperties['alignItems'];
+
+  /** justify-content CSS property */
+  justify?: React.CSSProperties['justifyContent'];
+}
+
+const defaultProps: Partial<StackProps> = {
+  spacing: 20,
+  align: 'stretch',
+  justify: 'top',
+};
+
+export function Stack(props: StackProps) {
+  const stackProps = {
+    ...defaultProps,
+    ...props,
+  };
+  return <StackStyled {...stackProps} />;
+}
+
+const StackStyled = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  align-items: align;
+  justify-content: justify;
+  gap: ${(props: StackProps) => props.spacing}px;
+`;

packages/webapp/src/components/Layout/Stack/index.ts

@@ -0,0 +1 @@
+export * from './Stack';

packages/webapp/src/components/Layout/index.ts

@@ -0,0 +1,3 @@
+export * from './Box';
+export * from './Group';
+export * from './Stack';