chore: restructure project into yarn workspaces, remove next

packages/design-system/atoms/fader/Fader.stories.tsx

@@ -0,0 +1,28 @@
+import { Button } from '@roleypoly/design-system/atoms/button';
+import { action } from '@storybook/addon-actions';
+import * as React from 'react';
+import { FaderOpacity, FaderSlide } from './Fader';
+
+export default {
+    title: 'Atoms/Fader',
+    component: FaderSlide,
+    args: {
+        isVisible: true,
+    },
+};
+
+export const Opacity = (args) => {
+    return (
+        <FaderOpacity {...args}>
+            <Button onClick={action('onClick')}>Click me!</Button>
+        </FaderOpacity>
+    );
+};
+
+export const Slide = (args) => {
+    return (
+        <FaderSlide {...args}>
+            <Button onClick={action('onClick')}>Click me!</Button>
+        </FaderSlide>
+    );
+};

packages/design-system/atoms/fader/Fader.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+export type FaderProps = {
+    isVisible: boolean;
+    children: React.ReactNode;
+};
+
+const FaderOpacityStyled = styled.div<Pick<FaderProps, 'isVisible'>>`
+    opacity: ${(props) => (props.isVisible ? 1 : 0)};
+    pointer-events: ${(props) => (props.isVisible ? 'unset' : 'none')};
+    transition: opacity 0.35s ease-in-out;
+`;
+
+export const FaderOpacity = (props: FaderProps) => {
+    return (
+        <FaderOpacityStyled isVisible={props.isVisible}>
+            {props.children}
+        </FaderOpacityStyled>
+    );
+};
+
+const FaderSlideStyled = styled.div<Pick<FaderProps, 'isVisible'>>`
+    max-height: ${(props) => (props.isVisible ? '4em' : '0')};
+    pointer-events: ${(props) => (props.isVisible ? 'unset' : 'none')};
+    transition: max-height 0.35s ease-in-out;
+    overflow: hidden;
+    transform: translateZ(0);
+`;
+
+export const FaderSlide = (props: FaderProps) => {
+    return (
+        <FaderSlideStyled isVisible={props.isVisible}>{props.children}</FaderSlideStyled>
+    );
+};

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

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