chore: restructure project into yarn workspaces, remove next

packages/design-system/atoms/hero/Hero.stories.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { Hero as HeroComponent } from './Hero';
+
+export default {
+    title: 'Atoms/Hero',
+    component: HeroComponent,
+    args: {
+        topSpacing: 75,
+        bottomSpacing: 25,
+    },
+};
+
+export const Hero = ({ topSpacing, bottomSpacing }) => {
+    return (
+        <StoryWrapper topSpacing={topSpacing} bottomSpacing={bottomSpacing}>
+            <HeroComponent topSpacing={topSpacing} bottomSpacing={bottomSpacing}>
+                <h1>This is it.</h1>
+            </HeroComponent>
+        </StoryWrapper>
+    );
+};
+
+type WrapperProps = {
+    children: React.ReactNode;
+    topSpacing: number;
+    bottomSpacing: number;
+};
+
+const StoryWrapper = ({ topSpacing, bottomSpacing, ...props }: WrapperProps) => (
+    <div>
+        <div
+            style={{
+                position: 'absolute',
+                top: 0,
+                bottom: 0,
+                left: 0,
+                right: 0,
+                height: '100vh',
+            }}
+        >
+            <div
+                style={{
+                    height: topSpacing,
+                    backgroundColor: 'rgba(255,0,0,0.25)',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    position: 'absolute',
+                    overflow: 'hidden',
+                }}
+            >
+                topSpacing
+            </div>
+            <div
+                style={{
+                    height: bottomSpacing,
+                    backgroundColor: 'rgba(0,0,255,0.25)',
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    position: 'absolute',
+                    overflow: 'hidden',
+                }}
+            >
+                bottomSpacing
+            </div>
+        </div>
+        {props.children}
+    </div>
+);

packages/design-system/atoms/hero/Hero.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+type HeroContainerProps = {
+    topSpacing: number;
+    bottomSpacing: number;
+};
+
+type HeroProps = Partial<HeroContainerProps> & {
+    children: React.ReactNode;
+};
+
+const HeroContainer = styled.div<HeroContainerProps>`
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow-x: hidden;
+    min-height: calc(100vh - ${(props) => props.topSpacing + props.bottomSpacing}px);
+    margin-top: ${(props) => props.topSpacing}px;
+`;
+
+export const Hero = (props: HeroProps) => (
+    <HeroContainer
+        topSpacing={props.topSpacing || 0}
+        bottomSpacing={props.bottomSpacing || 0}
+    >
+        {props.children}
+    </HeroContainer>
+);

packages/design-system/atoms/hero/index.ts

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