feat: onboarding ui flow (#464)

* feat: onboarding ui flow

* fix: route naming and auth

* fix: clean unused imports

* fix: remove react.fc

* fix: infra dev remove package.json

* fix: remove usefull memoization

* fix: button stories

* fix: use type instead of interface

* fix: remove debug

front/src/modules/auth/components/ui/FooterNote.tsx

@@ -1,20 +1,16 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
-type OwnProps = {
-  children: React.ReactNode;
-};
+type Props = React.ComponentProps<'div'>;
 
 const StyledContainer = styled.div`
   align-items: center;
   color: ${({ theme }) => theme.font.color.tertiary};
   display: flex;
   font-size: ${({ theme }) => theme.font.size.sm}px;
-  padding-left: ${({ theme }) => theme.spacing(14)};
-  padding-right: ${({ theme }) => theme.spacing(14)};
   text-align: center;
 `;
 
-export function FooterNote({ children }: OwnProps): JSX.Element {
-  return <StyledContainer>{children}</StyledContainer>;
+export function FooterNote(props: Props) {
+  return <StyledContainer {...props} />;
 }

front/src/modules/auth/components/ui/InputLabel.tsx

@@ -1,16 +0,0 @@
-import styled from '@emotion/styled';
-
-type OwnProps = {
-  label: string;
-  subLabel?: string;
-};
-
-const StyledContainer = styled.div`
-  font-weight: ${({ theme }) => theme.font.weight.medium};
-  margin-bottom: ${({ theme }) => theme.spacing(4)};
-  margin-top: ${({ theme }) => theme.spacing(4)};
-`;
-
-export function InputLabel({ label, subLabel }: OwnProps): JSX.Element {
-  return <StyledContainer>{label}</StyledContainer>;
-}

front/src/modules/auth/components/ui/Logo.tsx

@@ -1,18 +1,21 @@
 import styled from '@emotion/styled';
 
+type Props = React.ComponentProps<'div'>;
+
 const StyledLogo = styled.div`
-  height: 40px;
-  width: 40px;
+  height: 48px;
 
   img {
     height: 100%;
     width: 100%;
   }
+
+  width: 48px;
 `;
 
-export function Logo(): JSX.Element {
+export function Logo(props: Props) {
   return (
-    <StyledLogo>
+    <StyledLogo {...props}>
       <img src="/icons/android/android-launchericon-192-192.png" alt="logo" />
     </StyledLogo>
   );

front/src/modules/auth/components/ui/Modal.tsx

@@ -3,23 +3,23 @@ import styled from '@emotion/styled';
 
 import { Modal as UIModal } from '@/ui/components/modal/Modal';
 
-type OwnProps = {
-  children: React.ReactNode;
-};
+type Props = React.ComponentProps<'div'>;
 
 const StyledContainer = styled.div`
   align-items: center;
   display: flex;
   flex-direction: column;
-  padding-bottom: ${({ theme }) => theme.spacing(10)};
-  padding-top: ${({ theme }) => theme.spacing(10)};
-  width: 400px;
+  padding: ${({ theme }) => theme.spacing(10)};
+  width: calc(400px - ${({ theme }) => theme.spacing(10 * 2)});
+  > * + * {
+    margin-top: ${({ theme }) => theme.spacing(8)};
+  }
 `;
 
-export function Modal({ children }: OwnProps): JSX.Element {
+export function AuthModal({ children, ...restProps }: Props) {
   return (
-    <UIModal>
-      <StyledContainer>{children}</StyledContainer>
+    <UIModal isOpen={true}>
+      <StyledContainer {...restProps}>{children}</StyledContainer>
     </UIModal>
   );
 }

front/src/modules/auth/components/ui/Section.tsx

@@ -0,0 +1,31 @@
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  title: string;
+  description?: string;
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledTitle = styled.span`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+`;
+
+const StyledDescription = styled.span`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  margin-top: ${({ theme }) => theme.spacing(1)};
+`;
+
+export function Section({ title, description }: OwnProps): JSX.Element {
+  return (
+    <StyledContainer>
+      <StyledTitle>{title}</StyledTitle>
+      {description && <StyledDescription>{description}</StyledDescription>}
+    </StyledContainer>
+  );
+}

front/src/modules/auth/components/ui/Title.tsx

@@ -1,16 +1,28 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
-type OwnProps = {
-  children: React.ReactNode;
+import { AnimatedTextWord } from '@/ui/components/motion/AnimatedTextWord';
+
+type Props = React.PropsWithChildren & {
+  animate?: boolean;
 };
 
 const StyledTitle = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
   font-size: ${({ theme }) => theme.font.size.xl};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  margin-top: ${({ theme }) => theme.spacing(10)};
 `;
 
-export function Title({ children }: OwnProps): JSX.Element {
+const StyledAnimatedTextWord = styled(AnimatedTextWord)`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-size: ${({ theme }) => theme.font.size.xl};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+`;
+
+export function Title({ children, animate = false }: Props) {
+  if (animate && typeof children === 'string') {
+    return <StyledAnimatedTextWord text={children} />;
+  }
+
   return <StyledTitle>{children}</StyledTitle>;
 }