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
This commit is contained in:
Jérémy M
1
.vscode/settings.json
vendored
1
.vscode/settings.json
vendored
@ -31,7 +31,6 @@
|
||||
"!javascript",
|
||||
"!json",
|
||||
"!typescript",
|
||||
"!typescriptreact",
|
||||
"md",
|
||||
"mdx"
|
||||
],
|
||||
|
||||
@ -52,8 +52,9 @@ module.exports = {
|
||||
"@storybook/addon-essentials",
|
||||
"@storybook/addon-interactions",
|
||||
"@storybook/addon-coverage",
|
||||
"@storybook/addon-styling"
|
||||
|
||||
"@storybook/addon-styling",
|
||||
"@storybook/addon-knobs",
|
||||
"storybook-addon-pseudo-states",
|
||||
],
|
||||
framework: {
|
||||
name: '@storybook/react-webpack5',
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
"apollo-link-rest": "^0.9.0",
|
||||
"cmdk": "^0.2.0",
|
||||
"date-fns": "^2.30.0",
|
||||
"framer-motion": "^10.12.17",
|
||||
"graphql": "^16.6.0",
|
||||
"hex-rgb": "^5.0.0",
|
||||
"js-cookie": "^3.0.5",
|
||||
@ -97,6 +98,7 @@
|
||||
"@storybook/addon-coverage": "^0.0.8",
|
||||
"@storybook/addon-essentials": "^7.0.22",
|
||||
"@storybook/addon-interactions": "^7.0.22",
|
||||
"@storybook/addon-knobs": "^7.0.2",
|
||||
"@storybook/addon-links": "^7.0.22",
|
||||
"@storybook/addon-styling": "^1.3.0",
|
||||
"@storybook/jest": "^0.1.0",
|
||||
@ -141,6 +143,7 @@
|
||||
"prop-types": "^15.8.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"storybook": "^7.0.22",
|
||||
"storybook-addon-pseudo-states": "^2.1.0",
|
||||
"ts-jest": "^29.1.0",
|
||||
"typescript": "^4.9.3",
|
||||
"webpack": "^5.75.0"
|
||||
|
||||
@ -1,10 +1,15 @@
|
||||
import { Navigate, Route, Routes } from 'react-router-dom';
|
||||
import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
|
||||
import { AnimatePresence, LayoutGroup } from 'framer-motion';
|
||||
|
||||
import { useTrackPageView } from '@/analytics/hooks/useTrackPageView';
|
||||
import { RequireAuth } from '@/auth/components/RequireAuth';
|
||||
import { RequireNotAuth } from '@/auth/components/RequireNotAuth';
|
||||
import { AuthModal } from '@/auth/components/ui/Modal';
|
||||
import { useGoToHotkeys } from '@/hotkeys/hooks/useGoToHotkeys';
|
||||
import { AuthLayout } from '@/ui/layout/AuthLayout';
|
||||
import { DefaultLayout } from '@/ui/layout/DefaultLayout';
|
||||
import { CreateProfile } from '~/pages/auth/CreateProfile';
|
||||
import { CreateWorkspace } from '~/pages/auth/CreateWorkspace';
|
||||
import { Index } from '~/pages/auth/Index';
|
||||
import { PasswordLogin } from '~/pages/auth/PasswordLogin';
|
||||
import { Verify } from '~/pages/auth/Verify';
|
||||
@ -13,6 +18,29 @@ import { Opportunities } from '~/pages/opportunities/Opportunities';
|
||||
import { People } from '~/pages/people/People';
|
||||
import { SettingsProfile } from '~/pages/settings/SettingsProfile';
|
||||
|
||||
/**
|
||||
* AuthRoutes is used to allow transitions between auth pages with framer-motion.
|
||||
*/
|
||||
function AuthRoutes() {
|
||||
const location = useLocation();
|
||||
|
||||
return (
|
||||
<LayoutGroup>
|
||||
<AuthModal>
|
||||
<AnimatePresence mode="wait">
|
||||
<Routes location={location} key={location.pathname}>
|
||||
<Route path="" element={<Index />} />
|
||||
<Route path="callback" element={<Verify />} />
|
||||
<Route path="password-login" element={<PasswordLogin />} />
|
||||
<Route path="create/workspace" element={<CreateWorkspace />} />
|
||||
<Route path="create/profile" element={<CreateProfile />} />
|
||||
</Routes>
|
||||
</AnimatePresence>
|
||||
</AuthModal>
|
||||
</LayoutGroup>
|
||||
);
|
||||
}
|
||||
|
||||
export function App() {
|
||||
useGoToHotkeys('p', '/people');
|
||||
useGoToHotkeys('c', '/companies');
|
||||
@ -49,11 +77,9 @@ export function App() {
|
||||
path="auth/*"
|
||||
element={
|
||||
<RequireNotAuth>
|
||||
<Routes>
|
||||
<Route path="" element={<Index />} />
|
||||
<Route path="callback" element={<Verify />} />
|
||||
<Route path="password-login" element={<PasswordLogin />} />
|
||||
</Routes>
|
||||
<AuthLayout>
|
||||
<AuthRoutes />
|
||||
</AuthLayout>
|
||||
</RequireNotAuth>
|
||||
}
|
||||
/>
|
||||
|
||||
@ -1,23 +0,0 @@
|
||||
import { StrictMode } from 'react';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
|
||||
import { ApolloProvider } from './providers/apollo/ApolloProvider';
|
||||
import { AppThemeProvider } from './providers/theme/AppThemeProvider';
|
||||
import { UserProvider } from './providers/user/UserProvider';
|
||||
import { App } from './App';
|
||||
|
||||
export function AppWrapper() {
|
||||
return (
|
||||
<ApolloProvider>
|
||||
<BrowserRouter>
|
||||
<AppThemeProvider>
|
||||
<StrictMode>
|
||||
<UserProvider>
|
||||
<App />
|
||||
</UserProvider>
|
||||
</StrictMode>
|
||||
</AppThemeProvider>
|
||||
</BrowserRouter>
|
||||
</ApolloProvider>
|
||||
);
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Inter';
|
||||
font-family: 'Inter', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
@ -1,12 +1,16 @@
|
||||
import React from 'react';
|
||||
import React, { StrictMode } from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import { RecoilRoot } from 'recoil';
|
||||
|
||||
import { ThemeType } from '@/ui/themes/themes';
|
||||
|
||||
import '@emotion/react';
|
||||
|
||||
import { AppWrapper } from './AppWrapper';
|
||||
import { ApolloProvider } from './providers/apollo/ApolloProvider';
|
||||
import { AppThemeProvider } from './providers/theme/AppThemeProvider';
|
||||
import { UserProvider } from './providers/user/UserProvider';
|
||||
import { App } from './App';
|
||||
|
||||
import './index.css';
|
||||
|
||||
@ -16,7 +20,17 @@ const root = ReactDOM.createRoot(
|
||||
|
||||
root.render(
|
||||
<RecoilRoot>
|
||||
<AppWrapper />
|
||||
<ApolloProvider>
|
||||
<BrowserRouter>
|
||||
<AppThemeProvider>
|
||||
<StrictMode>
|
||||
<UserProvider>
|
||||
<App />
|
||||
</UserProvider>
|
||||
</StrictMode>
|
||||
</AppThemeProvider>
|
||||
</BrowserRouter>
|
||||
</ApolloProvider>
|
||||
</RecoilRoot>,
|
||||
);
|
||||
|
||||
|
||||
@ -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} />;
|
||||
}
|
||||
|
||||
@ -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>;
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
31
front/src/modules/auth/components/ui/Section.tsx
Normal file
31
front/src/modules/auth/components/ui/Section.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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>;
|
||||
}
|
||||
|
||||
@ -10,12 +10,12 @@ export const StyledBoard = styled.div`
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
export interface Column {
|
||||
export type Column = {
|
||||
id: string;
|
||||
title: string;
|
||||
colorCode?: string;
|
||||
itemKeys: string[];
|
||||
}
|
||||
};
|
||||
|
||||
export function getOptimisticlyUpdatedBoard(
|
||||
board: Column[],
|
||||
|
||||
152
front/src/modules/ui/components/buttons/Button.tsx
Normal file
152
front/src/modules/ui/components/buttons/Button.tsx
Normal file
@ -0,0 +1,152 @@
|
||||
import React from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { rgba } from '@/ui/themes/colors';
|
||||
|
||||
type Variant =
|
||||
| 'primary'
|
||||
| 'secondary'
|
||||
| 'tertiary'
|
||||
| 'tertiaryBold'
|
||||
| 'tertiaryLight'
|
||||
| 'danger';
|
||||
|
||||
type Size = 'medium' | 'small';
|
||||
|
||||
type Props = {
|
||||
icon?: React.ReactNode;
|
||||
title: string;
|
||||
fullWidth?: boolean;
|
||||
variant?: Variant;
|
||||
size?: Size;
|
||||
} & React.ComponentProps<'button'>;
|
||||
|
||||
const StyledButton = styled.button<
|
||||
Pick<Props, 'fullWidth' | 'variant' | 'size'>
|
||||
>`
|
||||
align-items: center;
|
||||
background: ${({ theme, variant, disabled }) => {
|
||||
switch (variant) {
|
||||
case 'primary':
|
||||
if (disabled) {
|
||||
return rgba(theme.color.blue, 0.4);
|
||||
} else {
|
||||
return theme.color.blue;
|
||||
}
|
||||
default:
|
||||
return theme.background.primary;
|
||||
}
|
||||
}};
|
||||
border: ${({ theme, variant }) => {
|
||||
switch (variant) {
|
||||
case 'primary':
|
||||
case 'secondary':
|
||||
return `1px solid ${theme.background.transparent.medium}`;
|
||||
case 'tertiary':
|
||||
default:
|
||||
return 'none';
|
||||
}
|
||||
}};
|
||||
border-radius: 4px;
|
||||
box-shadow: ${({ theme, variant }) => {
|
||||
switch (variant) {
|
||||
case 'primary':
|
||||
case 'secondary':
|
||||
return theme.boxShadow.extraLight;
|
||||
default:
|
||||
return 'none';
|
||||
}
|
||||
}};
|
||||
color: ${({ theme, variant, disabled }) => {
|
||||
if (disabled) {
|
||||
if (variant === 'primary') {
|
||||
return theme.color.gray0;
|
||||
} else {
|
||||
return theme.font.color.extraLight;
|
||||
}
|
||||
}
|
||||
|
||||
switch (variant) {
|
||||
case 'primary':
|
||||
return theme.color.gray0;
|
||||
case 'tertiaryLight':
|
||||
return theme.font.color.tertiary;
|
||||
case 'danger':
|
||||
return theme.color.red;
|
||||
default:
|
||||
return theme.font.color.secondary;
|
||||
}
|
||||
}};
|
||||
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-family: ${({ theme }) => theme.font.family};
|
||||
font-weight: ${({ theme, variant }) => {
|
||||
switch (variant) {
|
||||
case 'tertiary':
|
||||
case 'tertiaryLight':
|
||||
return theme.font.weight.regular;
|
||||
default:
|
||||
return theme.font.weight.medium;
|
||||
}
|
||||
}};
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
height: ${({ size }) => (size === 'small' ? '24px' : '32px')};
|
||||
justify-content: flex-start;
|
||||
padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
|
||||
|
||||
transition: background 0.1s ease;
|
||||
|
||||
width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
${({ theme, variant, disabled }) => {
|
||||
if (disabled) {
|
||||
return '';
|
||||
}
|
||||
|
||||
switch (variant) {
|
||||
case 'primary':
|
||||
return `background: linear-gradient(0deg, ${theme.background.transparent.medium} 0%, ${theme.background.transparent.medium} 100%), ${theme.color.blue}`;
|
||||
default:
|
||||
return `background: ${theme.background.tertiary}`;
|
||||
}
|
||||
}};
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
${({ theme, variant }) => {
|
||||
switch (variant) {
|
||||
case 'tertiaryLight':
|
||||
case 'tertiaryBold':
|
||||
case 'tertiary':
|
||||
return `color: ${theme.color.blue};`;
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}};
|
||||
}
|
||||
`;
|
||||
|
||||
export function Button({
|
||||
icon,
|
||||
title,
|
||||
fullWidth = false,
|
||||
variant = 'primary',
|
||||
size = 'medium',
|
||||
...props
|
||||
}: Props) {
|
||||
return (
|
||||
<StyledButton
|
||||
fullWidth={fullWidth}
|
||||
variant={variant}
|
||||
size={size}
|
||||
{...props}
|
||||
>
|
||||
{icon}
|
||||
{title}
|
||||
</StyledButton>
|
||||
);
|
||||
}
|
||||
87
front/src/modules/ui/components/buttons/MainButton.tsx
Normal file
87
front/src/modules/ui/components/buttons/MainButton.tsx
Normal file
@ -0,0 +1,87 @@
|
||||
import React from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
type Variant = 'primary' | 'secondary';
|
||||
|
||||
type Props = {
|
||||
icon?: React.ReactNode;
|
||||
title: string;
|
||||
fullWidth?: boolean;
|
||||
variant?: Variant;
|
||||
} & React.ComponentProps<'button'>;
|
||||
|
||||
const StyledButton = styled.button<Pick<Props, 'fullWidth' | 'variant'>>`
|
||||
align-items: center;
|
||||
background: ${({ theme, variant, disabled }) => {
|
||||
if (disabled) {
|
||||
return theme.background.tertiary;
|
||||
}
|
||||
|
||||
switch (variant) {
|
||||
case 'primary':
|
||||
return `radial-gradient(
|
||||
50% 62.62% at 50% 0%,
|
||||
${theme.font.color.secondary} 0%,
|
||||
${theme.font.color.primary} 100%
|
||||
)`;
|
||||
case 'secondary':
|
||||
return theme.background.primary;
|
||||
default:
|
||||
return theme.background.primary;
|
||||
}
|
||||
}};
|
||||
border: 1px solid ${({ theme }) => theme.border.color.light};
|
||||
border-radius: 8px;
|
||||
box-shadow: ${({ theme }) => theme.boxShadow.light};
|
||||
color: ${({ theme, variant, disabled }) => {
|
||||
if (disabled) {
|
||||
return theme.font.color.extraLight;
|
||||
}
|
||||
|
||||
switch (variant) {
|
||||
case 'primary':
|
||||
return theme.font.color.inverted;
|
||||
case 'secondary':
|
||||
return theme.font.color.primary;
|
||||
default:
|
||||
return theme.font.color.primary;
|
||||
}
|
||||
}};
|
||||
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-family: ${({ theme }) => theme.font.family};
|
||||
font-weight: ${({ theme }) => theme.font.weight.semiBold};
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
justify-content: center;
|
||||
padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
|
||||
width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
|
||||
|
||||
${({ theme, variant }) => {
|
||||
switch (variant) {
|
||||
case 'secondary':
|
||||
return `
|
||||
&:hover {
|
||||
background: ${theme.background.tertiary};
|
||||
}
|
||||
`;
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}};
|
||||
`;
|
||||
|
||||
export function MainButton({
|
||||
icon,
|
||||
title,
|
||||
fullWidth = false,
|
||||
variant = 'primary',
|
||||
...props
|
||||
}: Props) {
|
||||
return (
|
||||
<StyledButton fullWidth={fullWidth} variant={variant} {...props}>
|
||||
{icon}
|
||||
{title}
|
||||
</StyledButton>
|
||||
);
|
||||
}
|
||||
@ -1,42 +0,0 @@
|
||||
import React from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
type OwnProps = {
|
||||
children: React.ReactNode;
|
||||
fullWidth?: boolean;
|
||||
} & React.ButtonHTMLAttributes<HTMLButtonElement>;
|
||||
|
||||
const StyledButton = styled.button<{ fullWidth: boolean }>`
|
||||
align-items: center;
|
||||
background: radial-gradient(
|
||||
50% 62.62% at 50% 0%,
|
||||
${({ theme }) => theme.font.color.secondary} 0%,
|
||||
${({ theme }) => theme.font.color.primary} 100%
|
||||
);
|
||||
border: 1px solid ${({ theme }) => theme.border.color.light};
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 0px 4px ${({ theme }) => theme.background.transparent.medium}
|
||||
0%,
|
||||
0px 2px 4px ${({ theme }) => theme.background.transparent.light} 0%;
|
||||
color: ${({ theme }) => theme.font.color.inverted};
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-weight: ${({ theme }) => theme.font.weight.semiBold};
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
justify-content: center;
|
||||
padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
|
||||
width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
|
||||
`;
|
||||
|
||||
export function PrimaryButton({
|
||||
children,
|
||||
fullWidth,
|
||||
...props
|
||||
}: OwnProps): JSX.Element {
|
||||
return (
|
||||
<StyledButton fullWidth={fullWidth ?? false} {...props}>
|
||||
{children}
|
||||
</StyledButton>
|
||||
);
|
||||
}
|
||||
@ -1,43 +0,0 @@
|
||||
import React from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
type OwnProps = {
|
||||
children: React.ReactNode;
|
||||
fullWidth?: boolean;
|
||||
} & React.ButtonHTMLAttributes<HTMLButtonElement>;
|
||||
|
||||
const StyledButton = styled.button<{ fullWidth: boolean }>`
|
||||
align-items: center;
|
||||
background: ${({ theme }) => theme.background.primary};
|
||||
border: 1px solid ${({ theme }) => theme.border.color.light};
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 0px 4px ${({ theme }) => theme.background.transparent.medium}
|
||||
0%,
|
||||
0px 2px 4px ${({ theme }) => theme.background.transparent.light} 0%;
|
||||
color: ${({ theme }) => theme.font.color.primary};
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-weight: ${({ theme }) => theme.font.weight.semiBold};
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
|
||||
padding: 8px 32px;
|
||||
width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
|
||||
|
||||
&:hover {
|
||||
background: ${({ theme }) => theme.background.tertiary};
|
||||
}
|
||||
`;
|
||||
|
||||
export function SecondaryButton({
|
||||
children,
|
||||
fullWidth,
|
||||
...props
|
||||
}: OwnProps): JSX.Element {
|
||||
return (
|
||||
<StyledButton fullWidth={fullWidth ?? false} {...props}>
|
||||
{children}
|
||||
</StyledButton>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,230 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { boolean, select, text, withKnobs } from '@storybook/addon-knobs';
|
||||
import { expect, jest } from '@storybook/jest';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
|
||||
import { IconSearch } from '@/ui/icons';
|
||||
import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
|
||||
|
||||
import { Button } from '../Button';
|
||||
|
||||
type ButtonProps = React.ComponentProps<typeof Button>;
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
width: 800px;
|
||||
> * + * {
|
||||
margin-top: ${({ theme }) => theme.spacing(4)};
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledTitle = styled.h1`
|
||||
font-size: ${({ theme }) => theme.font.size.lg};
|
||||
font-weight: ${({ theme }) => theme.font.weight.semiBold};
|
||||
margin-bottom: ${({ theme }) => theme.spacing(2)};
|
||||
margin-top: ${({ theme }) => theme.spacing(3)};
|
||||
`;
|
||||
|
||||
const StyledDescription = styled.span`
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
font-size: ${({ theme }) => theme.font.size.xs};
|
||||
font-weight: ${({ theme }) => theme.font.weight.semiBold};
|
||||
margin-bottom: ${({ theme }) => theme.spacing(1)};
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
`;
|
||||
|
||||
const StyledLine = styled.div`
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const StyledButtonContainer = styled.div`
|
||||
border: 1px solid ${({ theme }) => theme.color.gray20};
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: ${({ theme }) => theme.spacing(2)};
|
||||
`;
|
||||
|
||||
const meta: Meta<typeof Button> = {
|
||||
title: 'UI/Buttons/Button',
|
||||
component: Button,
|
||||
decorators: [withKnobs],
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Button>;
|
||||
|
||||
const clickJestFn = jest.fn();
|
||||
|
||||
const variants: ButtonProps['variant'][] = [
|
||||
'primary',
|
||||
'secondary',
|
||||
'tertiary',
|
||||
'tertiaryBold',
|
||||
'tertiaryLight',
|
||||
'danger',
|
||||
];
|
||||
|
||||
const ButtonLine = (props: ButtonProps) => (
|
||||
<>
|
||||
<StyledButtonContainer>
|
||||
<StyledDescription>With icon</StyledDescription>
|
||||
<Button
|
||||
data-testid={`${props.variant}-button-with-icon`}
|
||||
{...props}
|
||||
icon={<IconSearch size={14} />}
|
||||
/>
|
||||
</StyledButtonContainer>
|
||||
<StyledButtonContainer>
|
||||
<StyledDescription>Default</StyledDescription>
|
||||
<Button
|
||||
data-testid={`${props.variant}-button-default`}
|
||||
onClick={clickJestFn}
|
||||
{...props}
|
||||
/>
|
||||
</StyledButtonContainer>
|
||||
<StyledButtonContainer>
|
||||
<StyledDescription>Hover</StyledDescription>
|
||||
<Button
|
||||
id={`${props.variant}-button-hover`}
|
||||
data-testid={`${props.variant}-button-hover`}
|
||||
{...props}
|
||||
/>
|
||||
</StyledButtonContainer>
|
||||
<StyledButtonContainer>
|
||||
<StyledDescription>Pressed</StyledDescription>
|
||||
<Button
|
||||
id={`${props.variant}-button-pressed`}
|
||||
data-testid={`${props.variant}-button-pressed`}
|
||||
{...props}
|
||||
/>
|
||||
</StyledButtonContainer>
|
||||
<StyledButtonContainer>
|
||||
<StyledDescription>Disabled</StyledDescription>
|
||||
<Button
|
||||
data-testid={`${props.variant}-button-disabled`}
|
||||
{...props}
|
||||
disabled
|
||||
/>
|
||||
</StyledButtonContainer>
|
||||
<StyledButtonContainer>
|
||||
<StyledDescription>Focus</StyledDescription>
|
||||
<Button
|
||||
id={`${props.variant}-button-focus`}
|
||||
data-testid={`${props.variant}-button-focus`}
|
||||
{...props}
|
||||
/>
|
||||
</StyledButtonContainer>
|
||||
</>
|
||||
);
|
||||
|
||||
const ButtonContainer = (props: Partial<ButtonProps>) => {
|
||||
const title = text('Text', 'A button title');
|
||||
|
||||
return (
|
||||
<StyledContainer>
|
||||
{variants.map((variant) => (
|
||||
<div key={variant}>
|
||||
<StyledTitle>{variant}</StyledTitle>
|
||||
<StyledLine>
|
||||
<ButtonLine {...props} title={title} variant={variant} />
|
||||
</StyledLine>
|
||||
</div>
|
||||
))}
|
||||
</StyledContainer>
|
||||
);
|
||||
};
|
||||
|
||||
// Medium size
|
||||
export const MediumSize: Story = {
|
||||
render: getRenderWrapperForComponent(<ButtonContainer />),
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
expect(clickJestFn).toHaveBeenCalledTimes(0);
|
||||
|
||||
const button = canvas.getByTestId('primary-button-default');
|
||||
await userEvent.click(button);
|
||||
|
||||
expect(clickJestFn).toHaveBeenCalledTimes(1);
|
||||
},
|
||||
};
|
||||
MediumSize.parameters = {
|
||||
pseudo: {
|
||||
hover: [
|
||||
'#primary-button-hover',
|
||||
'#secondary-button-hover',
|
||||
'#tertiary-button-hover',
|
||||
'#tertiaryBold-button-hover',
|
||||
'#tertiaryLight-button-hover',
|
||||
'#danger-button-hover',
|
||||
],
|
||||
active: [
|
||||
'#primary-button-pressed',
|
||||
'#secondary-button-pressed',
|
||||
'#tertiary-button-pressed',
|
||||
'#tertiaryBold-button-pressed',
|
||||
'#tertiaryLight-button-pressed',
|
||||
'#danger-button-pressed',
|
||||
],
|
||||
focus: [
|
||||
'#primary-button-focus',
|
||||
'#secondary-button-focus',
|
||||
'#tertiary-button-focus',
|
||||
'#tertiaryBold-button-focus',
|
||||
'#tertiaryLight-button-focus',
|
||||
'#danger-button-focus',
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
// Small size
|
||||
export const SmallSize: Story = {
|
||||
render: getRenderWrapperForComponent(<ButtonContainer size="small" />),
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
expect(clickJestFn).toHaveBeenCalledTimes(0);
|
||||
|
||||
const button = canvas.getByTestId('primary-button-default');
|
||||
await userEvent.click(button);
|
||||
|
||||
expect(clickJestFn).toHaveBeenCalledTimes(1);
|
||||
},
|
||||
};
|
||||
SmallSize.parameters = {
|
||||
pseudo: {
|
||||
hover: [
|
||||
'#primary-button-hover',
|
||||
'#secondary-button-hover',
|
||||
'#tertiary-button-hover',
|
||||
'#tertiaryBold-button-hover',
|
||||
'#tertiaryLight-button-hover',
|
||||
'#danger-button-hover',
|
||||
],
|
||||
active: [
|
||||
'#primary-button-pressed',
|
||||
'#secondary-button-pressed',
|
||||
'#tertiary-button-pressed',
|
||||
'#tertiaryBold-button-pressed',
|
||||
'#tertiaryLight-button-pressed',
|
||||
'#danger-button-pressed',
|
||||
],
|
||||
focus: [
|
||||
'#primary-button-focus',
|
||||
'#secondary-button-focus',
|
||||
'#tertiary-button-focus',
|
||||
'#tertiaryBold-button-focus',
|
||||
'#tertiaryLight-button-focus',
|
||||
'#danger-button-focus',
|
||||
],
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,104 @@
|
||||
import { expect, jest } from '@storybook/jest';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
|
||||
import { IconBrandGoogle } from '@/ui/icons';
|
||||
import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
|
||||
|
||||
import { MainButton } from '../MainButton';
|
||||
|
||||
const meta: Meta<typeof MainButton> = {
|
||||
title: 'UI/Buttons/MainButton',
|
||||
component: MainButton,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof MainButton>;
|
||||
|
||||
const clickJestFn = jest.fn();
|
||||
|
||||
export const DefaultPrimary: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<MainButton title="A primary Button" onClick={clickJestFn} />,
|
||||
),
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
expect(clickJestFn).toHaveBeenCalledTimes(0);
|
||||
const button = canvas.getByRole('button');
|
||||
await userEvent.click(button);
|
||||
|
||||
expect(clickJestFn).toHaveBeenCalledTimes(1);
|
||||
},
|
||||
};
|
||||
|
||||
export const WithIconPrimary: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<MainButton
|
||||
icon={<IconBrandGoogle size={16} stroke={4} />}
|
||||
title="A primary Button"
|
||||
/>,
|
||||
),
|
||||
};
|
||||
|
||||
export const WithIconPrimaryDisabled: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<MainButton
|
||||
icon={<IconBrandGoogle size={16} stroke={4} />}
|
||||
title="A primary Button"
|
||||
disabled
|
||||
/>,
|
||||
),
|
||||
};
|
||||
|
||||
export const FullWidthPrimary: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<MainButton title="A primary Button" fullWidth />,
|
||||
),
|
||||
};
|
||||
|
||||
export const DefaultSecondary: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<MainButton
|
||||
title="A secondary Button"
|
||||
onClick={clickJestFn}
|
||||
variant="secondary"
|
||||
/>,
|
||||
),
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
expect(clickJestFn).toHaveBeenCalledTimes(0);
|
||||
const button = canvas.getByRole('button');
|
||||
await userEvent.click(button);
|
||||
|
||||
expect(clickJestFn).toHaveBeenCalledTimes(1);
|
||||
},
|
||||
};
|
||||
|
||||
export const WithIconSecondary: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<MainButton
|
||||
icon={<IconBrandGoogle size={16} stroke={4} />}
|
||||
title="A secondary Button"
|
||||
variant="secondary"
|
||||
/>,
|
||||
),
|
||||
};
|
||||
|
||||
export const WithIconSecondaryDisabled: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<MainButton
|
||||
icon={<IconBrandGoogle size={16} stroke={4} />}
|
||||
title="A secondary Button"
|
||||
variant="secondary"
|
||||
disabled
|
||||
/>,
|
||||
),
|
||||
};
|
||||
|
||||
export const FullWidthSecondary: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<MainButton title="A secondary Button" variant="secondary" fullWidth />,
|
||||
),
|
||||
};
|
||||
@ -1,47 +0,0 @@
|
||||
import { expect, jest } from '@storybook/jest';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
|
||||
import { IconBrandGoogle } from '@/ui/icons';
|
||||
import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
|
||||
|
||||
import { PrimaryButton } from '../PrimaryButton';
|
||||
|
||||
const meta: Meta<typeof PrimaryButton> = {
|
||||
title: 'UI/Buttons/PrimaryButton',
|
||||
component: PrimaryButton,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof PrimaryButton>;
|
||||
|
||||
const clickJestFn = jest.fn();
|
||||
|
||||
export const Default: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<PrimaryButton onClick={clickJestFn}>A Primary Button</PrimaryButton>,
|
||||
),
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
expect(clickJestFn).toHaveBeenCalledTimes(0);
|
||||
const button = canvas.getByRole('button');
|
||||
await userEvent.click(button);
|
||||
|
||||
expect(clickJestFn).toHaveBeenCalledTimes(1);
|
||||
},
|
||||
};
|
||||
|
||||
export const WithIcon: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<PrimaryButton>
|
||||
<IconBrandGoogle size={16} stroke={4} />A Primary Button
|
||||
</PrimaryButton>,
|
||||
),
|
||||
};
|
||||
|
||||
export const FullWidth: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<PrimaryButton fullWidth={true}>A Primary Button</PrimaryButton>,
|
||||
),
|
||||
};
|
||||
@ -1,47 +0,0 @@
|
||||
import { expect, jest } from '@storybook/jest';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
|
||||
import { IconBrandGoogle } from '@/ui/icons';
|
||||
import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
|
||||
|
||||
import { SecondaryButton } from '../SecondaryButton';
|
||||
|
||||
const meta: Meta<typeof SecondaryButton> = {
|
||||
title: 'UI/Buttons/SecondaryButton',
|
||||
component: SecondaryButton,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof SecondaryButton>;
|
||||
|
||||
const clickJestFn = jest.fn();
|
||||
|
||||
export const Default: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<SecondaryButton onClick={clickJestFn}>A Primary Button</SecondaryButton>,
|
||||
),
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
expect(clickJestFn).toHaveBeenCalledTimes(0);
|
||||
const button = canvas.getByRole('button');
|
||||
await userEvent.click(button);
|
||||
|
||||
expect(clickJestFn).toHaveBeenCalledTimes(1);
|
||||
},
|
||||
};
|
||||
|
||||
export const WithIcon: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<SecondaryButton>
|
||||
<IconBrandGoogle size={16} stroke={4} />A Primary Button
|
||||
</SecondaryButton>,
|
||||
),
|
||||
};
|
||||
|
||||
export const FullWidth: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<SecondaryButton fullWidth={true}>A Primary Button</SecondaryButton>,
|
||||
),
|
||||
};
|
||||
@ -49,9 +49,9 @@ export function EditableDate({
|
||||
),
|
||||
);
|
||||
|
||||
interface DatePickerContainerProps {
|
||||
type DatePickerContainerProps = {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
};
|
||||
|
||||
const DatePickerContainer = ({ children }: DatePickerContainerProps) => {
|
||||
return <StyledCalendarContainer>{children}</StyledCalendarContainer>;
|
||||
|
||||
123
front/src/modules/ui/components/inputs/ImageInput.tsx
Normal file
123
front/src/modules/ui/components/inputs/ImageInput.tsx
Normal file
@ -0,0 +1,123 @@
|
||||
import React from 'react';
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { IconFileUpload, IconTrash, IconUpload } from '@/ui/icons';
|
||||
|
||||
import { Button } from '../buttons/Button';
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
`;
|
||||
|
||||
const Picture = styled.button<{ withPicture: boolean }>`
|
||||
align-items: center;
|
||||
background: ${({ theme, disabled }) =>
|
||||
disabled ? theme.background.secondary : theme.background.tertiary};
|
||||
border: none;
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
|
||||
display: flex;
|
||||
height: 66px;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
transition: background 0.1s ease;
|
||||
|
||||
width: 66px;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
${({ theme, withPicture, disabled }) => {
|
||||
if (withPicture || disabled) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return `
|
||||
&:hover {
|
||||
background: ${theme.background.quaternary};
|
||||
}
|
||||
`;
|
||||
}};
|
||||
`;
|
||||
|
||||
const Content = styled.div`
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-left: ${({ theme }) => theme.spacing(4)};
|
||||
`;
|
||||
|
||||
const ButtonContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
> * + * {
|
||||
margin-left: ${({ theme }) => theme.spacing(2)};
|
||||
}
|
||||
`;
|
||||
|
||||
const Text = styled.span`
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
font-size: ${({ theme }) => theme.font.size.xs};
|
||||
`;
|
||||
|
||||
type Props = Omit<React.ComponentProps<'div'>, 'children'> & {
|
||||
picture: string | null | undefined;
|
||||
onUpload?: () => void;
|
||||
onRemove?: () => void;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
export function ImageInput({
|
||||
picture,
|
||||
onUpload,
|
||||
onRemove,
|
||||
disabled = false,
|
||||
...restProps
|
||||
}: Props) {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Container {...restProps}>
|
||||
<Picture withPicture={!!picture} disabled={disabled} onClick={onUpload}>
|
||||
{picture ? (
|
||||
<img
|
||||
src={picture || '/images/default-profile-picture.png'}
|
||||
alt="profile"
|
||||
/>
|
||||
) : (
|
||||
<IconFileUpload size={theme.icon.size.md} />
|
||||
)}
|
||||
</Picture>
|
||||
<Content>
|
||||
<ButtonContainer>
|
||||
<Button
|
||||
icon={<IconUpload size={theme.icon.size.sm} />}
|
||||
onClick={onUpload}
|
||||
variant="secondary"
|
||||
title="Upload"
|
||||
disabled={disabled}
|
||||
fullWidth
|
||||
/>
|
||||
<Button
|
||||
icon={<IconTrash size={theme.icon.size.sm} />}
|
||||
onClick={onRemove}
|
||||
variant="secondary"
|
||||
title="Remove"
|
||||
disabled={!picture || disabled}
|
||||
fullWidth
|
||||
/>
|
||||
</ButtonContainer>
|
||||
<Text>
|
||||
We support your best PNGs, JPEGs and GIFs portraits under 10MB
|
||||
</Text>
|
||||
</Content>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
@ -5,32 +5,48 @@ type OwnProps = Omit<
|
||||
React.InputHTMLAttributes<HTMLInputElement>,
|
||||
'onChange'
|
||||
> & {
|
||||
label?: string;
|
||||
onChange?: (text: string) => void;
|
||||
fullWidth?: boolean;
|
||||
};
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
const StyledLabel = styled.span`
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
font-size: ${({ theme }) => theme.font.size.xs};
|
||||
font-weight: ${({ theme }) => theme.font.weight.semiBold};
|
||||
margin-bottom: ${({ theme }) => theme.spacing(1)};
|
||||
text-transform: uppercase;
|
||||
`;
|
||||
|
||||
const StyledInput = styled.input<{ fullWidth: boolean }>`
|
||||
background-color: ${({ theme }) => theme.background.transparent.lighter};
|
||||
border: 1px solid ${({ theme }) => theme.border.color.light};
|
||||
background-color: ${({ theme }) => theme.background.tertiary};
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) =>
|
||||
theme.spacing(3)};
|
||||
|
||||
color: ${({ theme }) => theme.font.color.primary};
|
||||
font-family: ${({ theme }) => theme.font.family};
|
||||
font-weight: ${({ theme }) => theme.font.weight.regular};
|
||||
|
||||
outline: none;
|
||||
padding: ${({ theme }) => theme.spacing(2)};
|
||||
width: ${({ fullWidth, theme }) =>
|
||||
fullWidth ? `calc(100% - ${theme.spacing(6)})` : 'auto'};
|
||||
fullWidth ? `calc(100% - ${theme.spacing(4)})` : 'auto'};
|
||||
|
||||
&::placeholder,
|
||||
&::-webkit-input-placeholder {
|
||||
color: ${({ theme }) => theme.font.color.light}
|
||||
font-family: ${({ theme }) => theme.font.family};;
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
font-family: ${({ theme }) => theme.font.family};
|
||||
font-weight: ${({ theme }) => theme.font.weight.medium};
|
||||
}
|
||||
margin-bottom: ${({ theme }) => theme.spacing(3)};
|
||||
`;
|
||||
|
||||
export function TextInput({
|
||||
label,
|
||||
value,
|
||||
onChange,
|
||||
fullWidth,
|
||||
@ -39,16 +55,19 @@ export function TextInput({
|
||||
const [internalValue, setInternalValue] = useState(value);
|
||||
|
||||
return (
|
||||
<StyledInput
|
||||
fullWidth={fullWidth ?? false}
|
||||
value={internalValue}
|
||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
||||
setInternalValue(event.target.value);
|
||||
if (onChange) {
|
||||
onChange(event.target.value);
|
||||
}
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
<StyledContainer>
|
||||
{label && <StyledLabel>{label}</StyledLabel>}
|
||||
<StyledInput
|
||||
fullWidth={fullWidth ?? false}
|
||||
value={internalValue}
|
||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
||||
setInternalValue(event.target.value);
|
||||
if (onChange) {
|
||||
onChange(event.target.value);
|
||||
}
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
</StyledContainer>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,25 +1,54 @@
|
||||
import React from 'react';
|
||||
import ReactModal from 'react-modal';
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const ModalDiv = styled(motion.div)`
|
||||
background: ${({ theme }) => theme.background.primary};
|
||||
border-radius: 8px;
|
||||
z-index: 10000; // should be higher than Backdrop's z-index
|
||||
`;
|
||||
|
||||
const BackDrop = styled(motion.div)`
|
||||
align-items: center;
|
||||
background: ${({ theme }) => theme.background.overlay};
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
`;
|
||||
|
||||
type Props = React.PropsWithChildren & {
|
||||
isOpen?: boolean;
|
||||
};
|
||||
|
||||
const modalVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: { opacity: 1 },
|
||||
exit: { opacity: 0 },
|
||||
};
|
||||
|
||||
export function Modal({ isOpen = false, children }: Props) {
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
|
||||
export function Modal({ children }: { children: React.ReactNode }) {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<ReactModal
|
||||
isOpen
|
||||
ariaHideApp={false}
|
||||
style={{
|
||||
overlay: {
|
||||
backgroundColor: theme.background.overlay,
|
||||
zIndex: 2,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
content: { zIndex: 1000, minWidth: 200, inset: 'auto', padding: 0 },
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</ReactModal>
|
||||
<>
|
||||
<BackDrop>
|
||||
<ModalDiv
|
||||
layout
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="exit"
|
||||
variants={modalVariants}
|
||||
>
|
||||
{children}
|
||||
</ModalDiv>
|
||||
</BackDrop>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
29
front/src/modules/ui/components/motion/AnimatedEaseIn.tsx
Normal file
29
front/src/modules/ui/components/motion/AnimatedEaseIn.tsx
Normal file
@ -0,0 +1,29 @@
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
type Props = Omit<
|
||||
React.ComponentProps<typeof motion.div>,
|
||||
'initial' | 'animated' | 'transition'
|
||||
> & {
|
||||
duration?: number;
|
||||
};
|
||||
|
||||
export function AnimatedEaseIn({
|
||||
children,
|
||||
duration = 0.8,
|
||||
...restProps
|
||||
}: Props) {
|
||||
const initial = { opacity: 0 };
|
||||
const animate = { opacity: 1 };
|
||||
const transition = { ease: 'linear', duration };
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={initial}
|
||||
animate={animate}
|
||||
transition={transition}
|
||||
{...restProps}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
70
front/src/modules/ui/components/motion/AnimatedTextWord.tsx
Normal file
70
front/src/modules/ui/components/motion/AnimatedTextWord.tsx
Normal file
@ -0,0 +1,70 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const StyledContainer = styled(motion.div)`
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
const Word = styled(motion.span)`
|
||||
white-space: pre;
|
||||
`;
|
||||
|
||||
type Props = Omit<React.ComponentProps<typeof motion.div>, 'children'> & {
|
||||
text: string;
|
||||
};
|
||||
|
||||
const containerAnimation = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: (i = 1) => ({
|
||||
opacity: 1,
|
||||
transition: { staggerChildren: 0.12, delayChildren: 0.04 * i },
|
||||
}),
|
||||
};
|
||||
|
||||
const childAnimation = {
|
||||
visible: {
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
transition: {
|
||||
type: 'spring',
|
||||
damping: 12,
|
||||
stiffness: 100,
|
||||
},
|
||||
},
|
||||
hidden: {
|
||||
opacity: 0,
|
||||
x: 20,
|
||||
transition: {
|
||||
type: 'spring',
|
||||
damping: 12,
|
||||
stiffness: 100,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export function AnimatedTextWord({ text = '', ...restProps }: Props) {
|
||||
const words = useMemo(() => {
|
||||
const words = text.split(' ');
|
||||
|
||||
return words.map((value, index) =>
|
||||
index === words.length - 1 ? value : value + ' ',
|
||||
);
|
||||
}, [text]);
|
||||
|
||||
return (
|
||||
<StyledContainer
|
||||
variants={containerAnimation}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
{...restProps}
|
||||
>
|
||||
{words.map((word, index) => (
|
||||
<Word variants={childAnimation} key={index}>
|
||||
{word}
|
||||
</Word>
|
||||
))}
|
||||
</StyledContainer>
|
||||
);
|
||||
}
|
||||
@ -28,3 +28,5 @@ export { IconArrowNarrowUp } from '@tabler/icons-react';
|
||||
export { IconArrowRight } from '@tabler/icons-react';
|
||||
export { IconArrowUpRight } from '@tabler/icons-react';
|
||||
export { IconBrandGoogle } from '@tabler/icons-react';
|
||||
export { IconUpload } from '@tabler/icons-react';
|
||||
export { IconFileUpload } from '@tabler/icons-react';
|
||||
|
||||
11
front/src/modules/ui/layout/AuthLayout.tsx
Normal file
11
front/src/modules/ui/layout/AuthLayout.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import { Companies } from '~/pages/companies/Companies';
|
||||
|
||||
export function AuthLayout({ children }: React.PropsWithChildren) {
|
||||
return (
|
||||
<>
|
||||
{/** Mocked data */}
|
||||
<Companies />
|
||||
{children}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -34,11 +34,11 @@ const CollapseButton = styled.button<{ hideOnDesktop: boolean | undefined }>`
|
||||
`}
|
||||
`;
|
||||
|
||||
interface CollapseButtonProps {
|
||||
type CollapseButtonProps = {
|
||||
hideIfOpen?: boolean;
|
||||
hideIfClosed?: boolean;
|
||||
hideOnDesktop?: boolean;
|
||||
}
|
||||
};
|
||||
|
||||
export default function NavCollapseButton({
|
||||
hideIfOpen,
|
||||
|
||||
@ -7,34 +7,32 @@ import { isNavbarOpenedState } from '../states/isNavbarOpenedState';
|
||||
|
||||
const StyledNavbarContainer = styled.div`
|
||||
flex-direction: column;
|
||||
width: ${(props) => (useRecoilValue(isNavbarOpenedState) ? 'auto' : '0')};
|
||||
padding: ${({ theme }) => theme.spacing(2)};
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
padding: ${({ theme }) => theme.spacing(2)};
|
||||
width: ${(props) => (useRecoilValue(isNavbarOpenedState) ? 'auto' : '0')};
|
||||
|
||||
@media (max-width: ${MOBILE_VIEWPORT}px) {
|
||||
width: ${(props) =>
|
||||
useRecoilValue(isNavbarOpenedState)
|
||||
? `calc(100% - ` + props.theme.spacing(4) + `)`
|
||||
: '0'};
|
||||
}
|
||||
`;
|
||||
|
||||
const NavbarContent = styled.div`
|
||||
display: ${() => (useRecoilValue(isNavbarOpenedState) ? 'block' : 'none')};
|
||||
`;
|
||||
|
||||
interface NavbarProps {
|
||||
type NavbarProps = {
|
||||
children: React.ReactNode;
|
||||
layout?: string;
|
||||
}
|
||||
};
|
||||
|
||||
export const NavbarContainer: React.FC<NavbarProps> = ({
|
||||
children,
|
||||
layout,
|
||||
}) => {
|
||||
export function NavbarContainer({ children, layout }: NavbarProps) {
|
||||
return (
|
||||
<StyledNavbarContainer>
|
||||
<NavbarContent>{children}</NavbarContent>
|
||||
</StyledNavbarContainer>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { grayScale, rgba } from './colors';
|
||||
|
||||
export const boxShadowLight = {
|
||||
extraLight: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.04)}`,
|
||||
light: `0px 2px 4px 0px ${rgba(
|
||||
grayScale.gray100,
|
||||
0.04,
|
||||
@ -12,6 +13,7 @@ export const boxShadowLight = {
|
||||
};
|
||||
|
||||
export const boxShadowDark = {
|
||||
extraLight: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.04)}`,
|
||||
light: `0px 2px 4px 0px ${rgba(
|
||||
grayScale.gray100,
|
||||
0.04,
|
||||
|
||||
@ -113,6 +113,7 @@ export const color = {
|
||||
gray30: grayScale.gray20,
|
||||
gray20: grayScale.gray15,
|
||||
gray10: grayScale.gray10,
|
||||
gray0: grayScale.gray0,
|
||||
};
|
||||
|
||||
export function rgba(hex: string, alpha: number) {
|
||||
|
||||
92
front/src/pages/auth/CreateProfile.tsx
Normal file
92
front/src/pages/auth/CreateProfile.tsx
Normal file
@ -0,0 +1,92 @@
|
||||
import { useCallback } from 'react';
|
||||
import { useHotkeys } from 'react-hotkeys-hook';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { Section } from '@/auth/components/ui/Section';
|
||||
import { SubTitle } from '@/auth/components/ui/SubTitle';
|
||||
import { Title } from '@/auth/components/ui/Title';
|
||||
import { MainButton } from '@/ui/components/buttons/MainButton';
|
||||
import { ImageInput } from '@/ui/components/inputs/ImageInput';
|
||||
import { TextInput } from '@/ui/components/inputs/TextInput';
|
||||
|
||||
const StyledContentContainer = styled.div`
|
||||
width: 100%;
|
||||
> * + * {
|
||||
margin-top: ${({ theme }) => theme.spacing(6)};
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledSectionContainer = styled.div`
|
||||
> * + * {
|
||||
margin-top: ${({ theme }) => theme.spacing(4)};
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledButtonContainer = styled.div`
|
||||
width: 200px;
|
||||
`;
|
||||
|
||||
const StyledComboInputContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
> * + * {
|
||||
margin-left: ${({ theme }) => theme.spacing(4)};
|
||||
}
|
||||
`;
|
||||
|
||||
export function CreateProfile() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleCreate = useCallback(async () => {
|
||||
navigate('/');
|
||||
}, [navigate]);
|
||||
|
||||
useHotkeys(
|
||||
'enter',
|
||||
() => {
|
||||
handleCreate();
|
||||
},
|
||||
{
|
||||
enableOnContentEditable: true,
|
||||
enableOnFormTags: true,
|
||||
},
|
||||
[handleCreate],
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Title>Create profile</Title>
|
||||
<SubTitle>How you'll be identify on the app.</SubTitle>
|
||||
<StyledContentContainer>
|
||||
<StyledSectionContainer>
|
||||
<Section title="Picture" />
|
||||
<ImageInput picture={null} disabled />
|
||||
</StyledSectionContainer>
|
||||
<StyledSectionContainer>
|
||||
<Section
|
||||
title="Name"
|
||||
description="Your name as it will be displayed on the app"
|
||||
/>
|
||||
<StyledComboInputContainer>
|
||||
<TextInput
|
||||
label="First Name"
|
||||
value=""
|
||||
placeholder="Tim"
|
||||
fullWidth
|
||||
/>
|
||||
<TextInput
|
||||
label="Last Name"
|
||||
value=""
|
||||
placeholder="Cook"
|
||||
fullWidth
|
||||
/>
|
||||
</StyledComboInputContainer>
|
||||
</StyledSectionContainer>
|
||||
</StyledContentContainer>
|
||||
<StyledButtonContainer>
|
||||
<MainButton title="Continue" onClick={handleCreate} fullWidth />
|
||||
</StyledButtonContainer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
74
front/src/pages/auth/CreateWorkspace.tsx
Normal file
74
front/src/pages/auth/CreateWorkspace.tsx
Normal file
@ -0,0 +1,74 @@
|
||||
import { useCallback } from 'react';
|
||||
import { useHotkeys } from 'react-hotkeys-hook';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { Section } from '@/auth/components/ui/Section';
|
||||
import { SubTitle } from '@/auth/components/ui/SubTitle';
|
||||
import { Title } from '@/auth/components/ui/Title';
|
||||
import { MainButton } from '@/ui/components/buttons/MainButton';
|
||||
import { ImageInput } from '@/ui/components/inputs/ImageInput';
|
||||
import { TextInput } from '@/ui/components/inputs/TextInput';
|
||||
|
||||
const StyledContentContainer = styled.div`
|
||||
width: 100%;
|
||||
> * + * {
|
||||
margin-top: ${({ theme }) => theme.spacing(6)};
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledSectionContainer = styled.div`
|
||||
> * + * {
|
||||
margin-top: ${({ theme }) => theme.spacing(4)};
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledButtonContainer = styled.div`
|
||||
width: 200px;
|
||||
`;
|
||||
|
||||
export function CreateWorkspace() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleCreate = useCallback(async () => {
|
||||
navigate('/auth/create/profile');
|
||||
}, [navigate]);
|
||||
|
||||
useHotkeys(
|
||||
'enter',
|
||||
() => {
|
||||
handleCreate();
|
||||
},
|
||||
{
|
||||
enableOnContentEditable: true,
|
||||
enableOnFormTags: true,
|
||||
},
|
||||
[handleCreate],
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Title>Create your workspace</Title>
|
||||
<SubTitle>
|
||||
A shared environment where you will be able to manage your customer
|
||||
relations with your team.
|
||||
</SubTitle>
|
||||
<StyledContentContainer>
|
||||
<StyledSectionContainer>
|
||||
<Section title="Workspace logo" />
|
||||
<ImageInput picture={null} disabled />
|
||||
</StyledSectionContainer>
|
||||
<StyledSectionContainer>
|
||||
<Section
|
||||
title="Workspace name"
|
||||
description="The name of your organization"
|
||||
/>
|
||||
<TextInput value="" placeholder="Apple" fullWidth />
|
||||
</StyledSectionContainer>
|
||||
</StyledContentContainer>
|
||||
<StyledButtonContainer>
|
||||
<MainButton title="Continue" onClick={handleCreate} fullWidth />
|
||||
</StyledButtonContainer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,28 +1,32 @@
|
||||
import { useCallback, useEffect } from 'react';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { useHotkeys } from 'react-hotkeys-hook';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useRecoilState } from 'recoil';
|
||||
|
||||
import { FooterNote } from '@/auth/components/ui/FooterNote';
|
||||
import { HorizontalSeparator } from '@/auth/components/ui/HorizontalSeparator';
|
||||
import { Logo } from '@/auth/components/ui/Logo';
|
||||
import { Modal } from '@/auth/components/ui/Modal';
|
||||
import { Title } from '@/auth/components/ui/Title';
|
||||
import { authFlowUserEmailState } from '@/auth/states/authFlowUserEmailState';
|
||||
import { isMockModeState } from '@/auth/states/isMockModeState';
|
||||
import { captureHotkeyTypeInFocusState } from '@/hotkeys/states/captureHotkeyTypeInFocusState';
|
||||
import { PrimaryButton } from '@/ui/components/buttons/PrimaryButton';
|
||||
import { SecondaryButton } from '@/ui/components/buttons/SecondaryButton';
|
||||
import { MainButton } from '@/ui/components/buttons/MainButton';
|
||||
import { TextInput } from '@/ui/components/inputs/TextInput';
|
||||
import { AnimatedEaseIn } from '@/ui/components/motion/AnimatedEaseIn';
|
||||
import { IconBrandGoogle } from '@/ui/icons';
|
||||
import { Companies } from '~/pages/companies/Companies';
|
||||
|
||||
const StyledContentContainer = styled.div`
|
||||
padding-bottom: ${({ theme }) => theme.spacing(8)};
|
||||
padding-top: ${({ theme }) => theme.spacing(8)};
|
||||
width: 200px;
|
||||
> * + * {
|
||||
margin-top: ${({ theme }) => theme.spacing(3)};
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledFooterNote = styled(FooterNote)`
|
||||
max-width: 283px;
|
||||
`;
|
||||
|
||||
export function Index() {
|
||||
@ -37,13 +41,20 @@ export function Index() {
|
||||
authFlowUserEmailState,
|
||||
);
|
||||
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
const onGoogleLoginClick = useCallback(() => {
|
||||
window.location.href = process.env.REACT_APP_AUTH_URL + '/google' || '';
|
||||
}, []);
|
||||
|
||||
const onPasswordLoginClick = useCallback(() => {
|
||||
if (!visible) {
|
||||
setVisible(true);
|
||||
return;
|
||||
}
|
||||
|
||||
navigate('/auth/password-login');
|
||||
}, [navigate]);
|
||||
}, [navigate, visible]);
|
||||
|
||||
useHotkeys(
|
||||
'enter',
|
||||
@ -64,31 +75,48 @@ export function Index() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Companies />
|
||||
<Modal>
|
||||
<AnimatedEaseIn>
|
||||
<Logo />
|
||||
<Title>Welcome to Twenty</Title>
|
||||
<StyledContentContainer>
|
||||
<PrimaryButton fullWidth={true} onClick={onGoogleLoginClick}>
|
||||
<IconBrandGoogle size={theme.icon.size.sm} stroke={4} />
|
||||
Continue With Google
|
||||
</PrimaryButton>
|
||||
<HorizontalSeparator />
|
||||
<TextInput
|
||||
value={authFlowUserEmail}
|
||||
placeholder="Email"
|
||||
onChange={(value) => setAuthFlowUserEmail(value)}
|
||||
fullWidth={true}
|
||||
/>
|
||||
<SecondaryButton fullWidth={true} onClick={onPasswordLoginClick}>
|
||||
Continue
|
||||
</SecondaryButton>
|
||||
</StyledContentContainer>
|
||||
<FooterNote>
|
||||
By using Twenty, you agree to the Terms of Service and Data Processing
|
||||
Agreement.
|
||||
</FooterNote>
|
||||
</Modal>
|
||||
</AnimatedEaseIn>
|
||||
<Title animate>Welcome to Twenty</Title>
|
||||
<StyledContentContainer>
|
||||
<MainButton
|
||||
icon={<IconBrandGoogle size={theme.icon.size.sm} stroke={4} />}
|
||||
title="Continue with Google"
|
||||
onClick={onGoogleLoginClick}
|
||||
fullWidth
|
||||
/>
|
||||
{visible && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
transition={{
|
||||
type: 'spring',
|
||||
stiffness: 800,
|
||||
damping: 35,
|
||||
}}
|
||||
>
|
||||
<HorizontalSeparator />
|
||||
<TextInput
|
||||
value={authFlowUserEmail}
|
||||
placeholder="Email"
|
||||
onChange={(value) => setAuthFlowUserEmail(value)}
|
||||
fullWidth={true}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
<MainButton
|
||||
title="Continue with Email"
|
||||
onClick={onPasswordLoginClick}
|
||||
disabled={!authFlowUserEmail}
|
||||
variant="secondary"
|
||||
fullWidth
|
||||
/>
|
||||
</StyledContentContainer>
|
||||
<StyledFooterNote>
|
||||
By using Twenty, you agree to the Terms of Service and Data Processing
|
||||
Agreement.
|
||||
</StyledFooterNote>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,34 +1,45 @@
|
||||
import { useCallback, useState } from 'react';
|
||||
import { useHotkeys } from 'react-hotkeys-hook';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import styled from '@emotion/styled';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useRecoilState } from 'recoil';
|
||||
|
||||
import { InputLabel } from '@/auth/components/ui/InputLabel';
|
||||
import { Logo } from '@/auth/components/ui/Logo';
|
||||
import { Modal } from '@/auth/components/ui/Modal';
|
||||
import { Section } from '@/auth/components/ui/Section';
|
||||
import { SubTitle } from '@/auth/components/ui/SubTitle';
|
||||
import { Title } from '@/auth/components/ui/Title';
|
||||
import { useAuth } from '@/auth/hooks/useAuth';
|
||||
import { authFlowUserEmailState } from '@/auth/states/authFlowUserEmailState';
|
||||
import { isMockModeState } from '@/auth/states/isMockModeState';
|
||||
import { captureHotkeyTypeInFocusState } from '@/hotkeys/states/captureHotkeyTypeInFocusState';
|
||||
import { PrimaryButton } from '@/ui/components/buttons/PrimaryButton';
|
||||
import { MainButton } from '@/ui/components/buttons/MainButton';
|
||||
import { TextInput } from '@/ui/components/inputs/TextInput';
|
||||
import { Companies } from '~/pages/companies/Companies';
|
||||
|
||||
const StyledContentContainer = styled.div`
|
||||
padding-bottom: ${({ theme }) => theme.spacing(4)};
|
||||
padding-top: ${({ theme }) => theme.spacing(6)};
|
||||
width: 320px;
|
||||
width: 100%;
|
||||
> * + * {
|
||||
margin-top: ${({ theme }) => theme.spacing(6)};
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledInputContainer = styled.div`
|
||||
margin-top: ${({ theme }) => theme.spacing(1)};
|
||||
const StyledAnimatedContent = styled(motion.div)`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
> * + * {
|
||||
margin-top: ${({ theme }) => theme.spacing(8)};
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledSectionContainer = styled.div`
|
||||
> * + * {
|
||||
margin-top: ${({ theme }) => theme.spacing(4)};
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledButtonContainer = styled.div`
|
||||
margin-top: ${({ theme }) => theme.spacing(7)};
|
||||
width: 200px;
|
||||
`;
|
||||
|
||||
const StyledErrorContainer = styled.div`
|
||||
@ -36,7 +47,6 @@ const StyledErrorContainer = styled.div`
|
||||
`;
|
||||
|
||||
export function PasswordLogin() {
|
||||
const navigate = useNavigate();
|
||||
const [, setMockMode] = useRecoilState(isMockModeState);
|
||||
const [, setCaptureHotkeyTypeInFocus] = useRecoilState(
|
||||
captureHotkeyTypeInFocusState,
|
||||
@ -58,7 +68,8 @@ export function PasswordLogin() {
|
||||
await login(authFlowUserEmail, internalPassword);
|
||||
setMockMode(false);
|
||||
setCaptureHotkeyTypeInFocus(false);
|
||||
navigate('/');
|
||||
// TODO: Navigate to the workspace selection page when it's ready
|
||||
// navigate('/auth/create/workspace');
|
||||
} catch (err: any) {
|
||||
setFormError(err.message);
|
||||
}
|
||||
@ -66,7 +77,6 @@ export function PasswordLogin() {
|
||||
authFlowUserEmail,
|
||||
internalPassword,
|
||||
login,
|
||||
navigate,
|
||||
setMockMode,
|
||||
setCaptureHotkeyTypeInFocus,
|
||||
]);
|
||||
@ -85,23 +95,22 @@ export function PasswordLogin() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Companies />
|
||||
<Modal>
|
||||
<Logo />
|
||||
<Title>Welcome to Twenty</Title>
|
||||
<SubTitle>Enter your credentials to sign in</SubTitle>
|
||||
<Logo />
|
||||
<Title>Welcome to Twenty</Title>
|
||||
<SubTitle>Enter your credentials to sign in</SubTitle>
|
||||
<StyledAnimatedContent>
|
||||
<StyledContentContainer>
|
||||
<StyledInputContainer>
|
||||
<InputLabel label="Email" />
|
||||
<StyledSectionContainer>
|
||||
<Section title="Email" />
|
||||
<TextInput
|
||||
value={authFlowUserEmail}
|
||||
placeholder="Email"
|
||||
onChange={(value) => setAuthFlowUserEmail(value)}
|
||||
fullWidth
|
||||
/>
|
||||
</StyledInputContainer>
|
||||
<StyledInputContainer>
|
||||
<InputLabel label="Password" />
|
||||
</StyledSectionContainer>
|
||||
<StyledSectionContainer>
|
||||
<Section title="Password" />
|
||||
<TextInput
|
||||
value={internalPassword}
|
||||
placeholder="Password"
|
||||
@ -109,17 +118,18 @@ export function PasswordLogin() {
|
||||
fullWidth
|
||||
type="password"
|
||||
/>
|
||||
<StyledButtonContainer>
|
||||
<PrimaryButton fullWidth onClick={handleLogin}>
|
||||
Continue
|
||||
</PrimaryButton>
|
||||
</StyledButtonContainer>
|
||||
</StyledInputContainer>
|
||||
{formError && (
|
||||
<StyledErrorContainer>{formError}</StyledErrorContainer>
|
||||
)}
|
||||
</StyledSectionContainer>
|
||||
</StyledContentContainer>
|
||||
</Modal>
|
||||
<StyledButtonContainer>
|
||||
<MainButton
|
||||
title="Continue"
|
||||
onClick={handleLogin}
|
||||
disabled={!authFlowUserEmail || !internalPassword}
|
||||
fullWidth
|
||||
/>
|
||||
</StyledButtonContainer>
|
||||
{formError && <StyledErrorContainer>{formError}</StyledErrorContainer>}
|
||||
</StyledAnimatedContent>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -5,9 +5,7 @@ import { useApolloFactory } from '@/apollo/hooks/useApolloFactory';
|
||||
import useApolloMocked from '@/apollo/hooks/useApolloMocked';
|
||||
import { isMockModeState } from '@/auth/states/isMockModeState';
|
||||
|
||||
export const ApolloProvider: React.FC<React.PropsWithChildren> = ({
|
||||
children,
|
||||
}) => {
|
||||
export function ApolloProvider({ children }: React.PropsWithChildren) {
|
||||
const apolloClient = useApolloFactory();
|
||||
const mockedClient = useApolloMocked();
|
||||
|
||||
@ -18,4 +16,4 @@ export const ApolloProvider: React.FC<React.PropsWithChildren> = ({
|
||||
{children}
|
||||
</ApolloProviderBase>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
@ -5,9 +5,7 @@ import { useFetchCurrentUser } from '@/auth/hooks/useFetchCurrentUser';
|
||||
import { currentUserState } from '@/auth/states/currentUserState';
|
||||
import { tokenPairState } from '@/auth/states/tokenPairState';
|
||||
|
||||
export const UserProvider: React.FC<React.PropsWithChildren> = ({
|
||||
children,
|
||||
}) => {
|
||||
export function UserProvider({ children }: React.PropsWithChildren) {
|
||||
const [, setCurrentUser] = useRecoilState(currentUserState);
|
||||
const [tokenPair] = useRecoilState(tokenPairState);
|
||||
const user = useFetchCurrentUser(tokenPair);
|
||||
@ -19,4 +17,4 @@ export const UserProvider: React.FC<React.PropsWithChildren> = ({
|
||||
}, [setCurrentUser, user]);
|
||||
|
||||
return <>{children}</>;
|
||||
};
|
||||
}
|
||||
|
||||
147
front/yarn.lock
147
front/yarn.lock
@ -1405,7 +1405,7 @@
|
||||
resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
|
||||
integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
|
||||
|
||||
"@babel/runtime@^7.0.0", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.19.4", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
|
||||
"@babel/runtime@^7.0.0", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.19.4", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
|
||||
version "7.22.5"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.5.tgz#8564dd588182ce0047d55d7a75e93921107b57ec"
|
||||
integrity sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==
|
||||
@ -1639,7 +1639,7 @@
|
||||
source-map "^0.5.7"
|
||||
stylis "4.2.0"
|
||||
|
||||
"@emotion/cache@^11.11.0":
|
||||
"@emotion/cache@^11.11.0", "@emotion/cache@^11.4.0":
|
||||
version "11.11.0"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.11.0.tgz#809b33ee6b1cb1a625fef7a45bc568ccd9b8f3ff"
|
||||
integrity sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==
|
||||
@ -1655,6 +1655,13 @@
|
||||
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43"
|
||||
integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==
|
||||
|
||||
"@emotion/is-prop-valid@^0.8.2":
|
||||
version "0.8.8"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
|
||||
integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
|
||||
dependencies:
|
||||
"@emotion/memoize" "0.7.4"
|
||||
|
||||
"@emotion/is-prop-valid@^1.2.1":
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
|
||||
@ -1662,12 +1669,17 @@
|
||||
dependencies:
|
||||
"@emotion/memoize" "^0.8.1"
|
||||
|
||||
"@emotion/memoize@0.7.4":
|
||||
version "0.7.4"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
|
||||
integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
|
||||
|
||||
"@emotion/memoize@^0.8.1":
|
||||
version "0.8.1"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
|
||||
integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
|
||||
|
||||
"@emotion/react@^11.10.6":
|
||||
"@emotion/react@^11.10.6", "@emotion/react@^11.8.1":
|
||||
version "11.11.1"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.1.tgz#b2c36afac95b184f73b08da8c214fdf861fa4157"
|
||||
integrity sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==
|
||||
@ -1881,6 +1893,11 @@
|
||||
resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.3.0.tgz#113bc85fa102cf890ae801668f43ee265c547a09"
|
||||
integrity sha512-vX1WVAdPjZg9DkDkC+zEx/tKtnST6/qcNpwcjeBgco3XRNHz5PUA+ivi/yr6G3o0kMR60uKBJcfOdfzOFI7PMQ==
|
||||
|
||||
"@floating-ui/core@^1.3.1":
|
||||
version "1.3.1"
|
||||
resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.3.1.tgz#4d795b649cc3b1cbb760d191c80dcb4353c9a366"
|
||||
integrity sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==
|
||||
|
||||
"@floating-ui/dom@^1.0.0", "@floating-ui/dom@^1.3.0":
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.3.0.tgz#69456f2164fc3d33eb40837686eaf71537235ac9"
|
||||
@ -1888,6 +1905,13 @@
|
||||
dependencies:
|
||||
"@floating-ui/core" "^1.3.0"
|
||||
|
||||
"@floating-ui/dom@^1.0.1":
|
||||
version "1.4.2"
|
||||
resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.4.2.tgz#eb3a37f7506c4f95ef735967dc3496b5012e11cb"
|
||||
integrity sha512-VKmvHVatWnewmGGy+7Mdy4cTJX71Pli6v/Wjb5RQBuq5wjUYx+Ef+kRThi8qggZqDgD8CogCpqhRoVp3+yQk+g==
|
||||
dependencies:
|
||||
"@floating-ui/core" "^1.3.1"
|
||||
|
||||
"@floating-ui/react-dom@^2.0.1":
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.1.tgz#7972a4fc488a8c746cded3cfe603b6057c308a91"
|
||||
@ -3401,6 +3425,23 @@
|
||||
polished "^4.2.2"
|
||||
ts-dedent "^2.2.0"
|
||||
|
||||
"@storybook/addon-knobs@^7.0.2":
|
||||
version "7.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-knobs/-/addon-knobs-7.0.2.tgz#f28fd180d8a283df6eb67f8f2578f1563b7b7615"
|
||||
integrity sha512-PzKuscxcBPhA2jpDxJ/F+BvBRqHJ8qBki1kS1IOjmJbAfE96WFnweXZ73ImyAJnRtmtReCL6p0ZmFkrNDMDpUw==
|
||||
dependencies:
|
||||
copy-to-clipboard "^3.3.3"
|
||||
core-js "^3.29.0"
|
||||
escape-html "^1.0.3"
|
||||
fast-deep-equal "^3.1.3"
|
||||
global "^4.4.0"
|
||||
lodash "^4.17.21"
|
||||
prop-types "^15.8.1"
|
||||
qs "^6.11.1"
|
||||
react-colorful "^5.6.1"
|
||||
react-lifecycles-compat "^3.0.4"
|
||||
react-select "^5.7.0"
|
||||
|
||||
"@storybook/addon-links@^7.0.22":
|
||||
version "7.0.22"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-7.0.22.tgz#21701d592582862588b28ef021b78bd26e3de2b2"
|
||||
@ -5049,6 +5090,13 @@
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react-transition-group@^4.4.0":
|
||||
version "4.4.6"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.6.tgz#18187bcda5281f8e10dfc48f0943e2fdf4f75e2e"
|
||||
integrity sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react@*", "@types/react@>=16", "@types/react@^18.0.25":
|
||||
version "18.2.12"
|
||||
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.12.tgz#95d584338610b78bb9ba0415e3180fb03debdf97"
|
||||
@ -7708,6 +7756,13 @@ cookie@^0.4.2:
|
||||
resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
|
||||
integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
|
||||
|
||||
copy-to-clipboard@^3.3.3:
|
||||
version "3.3.3"
|
||||
resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
|
||||
integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==
|
||||
dependencies:
|
||||
toggle-selection "^1.0.6"
|
||||
|
||||
core-js-compat@^3.25.1, core-js-compat@^3.30.1, core-js-compat@^3.30.2:
|
||||
version "3.31.0"
|
||||
resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.31.0.tgz#4030847c0766cc0e803dcdfb30055d7ef2064bf1"
|
||||
@ -7725,7 +7780,7 @@ core-js@^2.4.0, core-js@^2.5.0:
|
||||
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
|
||||
integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
|
||||
|
||||
core-js@^3.19.2:
|
||||
core-js@^3.19.2, core-js@^3.29.0:
|
||||
version "3.31.0"
|
||||
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.31.0.tgz#4471dd33e366c79d8c0977ed2d940821719db344"
|
||||
integrity sha512-NIp2TQSGfR6ba5aalZD+ZQ1fSxGhDo/s1w0nx3RYzf2pnJxt7YynxFlFScP6eV7+GZsKO95NSjGxyJsU3DZgeQ==
|
||||
@ -8385,6 +8440,14 @@ dom-converter@^0.2.0:
|
||||
dependencies:
|
||||
utila "~0.4"
|
||||
|
||||
dom-helpers@^5.0.1:
|
||||
version "5.2.1"
|
||||
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
|
||||
integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.8.7"
|
||||
csstype "^3.0.2"
|
||||
|
||||
dom-serializer@0:
|
||||
version "0.2.2"
|
||||
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
|
||||
@ -8411,6 +8474,11 @@ dom-serializer@^2.0.0:
|
||||
domhandler "^5.0.2"
|
||||
entities "^4.2.0"
|
||||
|
||||
dom-walk@^0.1.0:
|
||||
version "0.1.2"
|
||||
resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
|
||||
integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
|
||||
|
||||
domelementtype@1, domelementtype@^1.3.1:
|
||||
version "1.3.1"
|
||||
resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
|
||||
@ -8773,7 +8841,7 @@ escalade@^3.1.1:
|
||||
resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
|
||||
integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
|
||||
|
||||
escape-html@~1.0.3:
|
||||
escape-html@^1.0.3, escape-html@~1.0.3:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
|
||||
integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
|
||||
@ -9644,6 +9712,15 @@ fraction.js@^4.2.0:
|
||||
resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
|
||||
integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
|
||||
|
||||
framer-motion@^10.12.17:
|
||||
version "10.12.17"
|
||||
resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.12.17.tgz#0e891aaddbe6049267c413449945af95585cbc87"
|
||||
integrity sha512-IR+aAYntsyu6ofyxqQV4QYotmOqzcuKxhqNpfc3DXJjNWOPpOeSyH0A+In3IEBu49Yx/+PNht+YMeZSdCNaYbw==
|
||||
dependencies:
|
||||
tslib "^2.4.0"
|
||||
optionalDependencies:
|
||||
"@emotion/is-prop-valid" "^0.8.2"
|
||||
|
||||
fresh@0.5.2:
|
||||
version "0.5.2"
|
||||
resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
|
||||
@ -9920,6 +9997,14 @@ global-prefix@^3.0.0:
|
||||
kind-of "^6.0.2"
|
||||
which "^1.3.1"
|
||||
|
||||
global@^4.4.0:
|
||||
version "4.4.0"
|
||||
resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
|
||||
integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
|
||||
dependencies:
|
||||
min-document "^2.19.0"
|
||||
process "^0.11.10"
|
||||
|
||||
globals@^11.1.0:
|
||||
version "11.12.0"
|
||||
resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
|
||||
@ -12555,6 +12640,13 @@ mimic-fn@^2.1.0:
|
||||
resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
|
||||
integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
|
||||
|
||||
min-document@^2.19.0:
|
||||
version "2.19.0"
|
||||
resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
|
||||
integrity sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==
|
||||
dependencies:
|
||||
dom-walk "^0.1.0"
|
||||
|
||||
min-indent@^1.0.0:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
|
||||
@ -14105,7 +14197,7 @@ prompts@^2.0.1, prompts@^2.4.0, prompts@^2.4.1, prompts@^2.4.2:
|
||||
kleur "^3.0.3"
|
||||
sisteransi "^1.0.5"
|
||||
|
||||
prop-types@^15.7.2, prop-types@^15.8.1:
|
||||
prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
|
||||
version "15.8.1"
|
||||
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
|
||||
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
|
||||
@ -14212,7 +14304,7 @@ qs@6.11.0:
|
||||
dependencies:
|
||||
side-channel "^1.0.4"
|
||||
|
||||
qs@^6.10.0, qs@^6.4.0:
|
||||
qs@^6.10.0, qs@^6.11.1, qs@^6.4.0:
|
||||
version "6.11.2"
|
||||
resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.2.tgz#64bea51f12c1f5da1bc01496f48ffcff7c69d7d9"
|
||||
integrity sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==
|
||||
@ -14280,7 +14372,7 @@ react-app-polyfill@^3.0.0:
|
||||
regenerator-runtime "^0.13.9"
|
||||
whatwg-fetch "^3.6.2"
|
||||
|
||||
react-colorful@^5.1.2:
|
||||
react-colorful@^5.1.2, react-colorful@^5.6.1:
|
||||
version "5.6.1"
|
||||
resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
|
||||
integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==
|
||||
@ -14405,7 +14497,7 @@ react-is@^18.0.0:
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
|
||||
integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
|
||||
|
||||
react-lifecycles-compat@^3.0.0:
|
||||
react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
|
||||
version "3.0.4"
|
||||
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
|
||||
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
|
||||
@ -14539,6 +14631,21 @@ react-scripts@5.0.1:
|
||||
optionalDependencies:
|
||||
fsevents "^2.3.2"
|
||||
|
||||
react-select@^5.7.0:
|
||||
version "5.7.3"
|
||||
resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.7.3.tgz#fa0dc9a23cad6ff3871ad3829f6083a4b54961a2"
|
||||
integrity sha512-z8i3NCuFFWL3w27xq92rBkVI2onT0jzIIPe480HlBjXJ3b5o6Q+Clp4ydyeKrj9DZZ3lrjawwLC5NGl0FSvUDg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.12.0"
|
||||
"@emotion/cache" "^11.4.0"
|
||||
"@emotion/react" "^11.8.1"
|
||||
"@floating-ui/dom" "^1.0.1"
|
||||
"@types/react-transition-group" "^4.4.0"
|
||||
memoize-one "^6.0.0"
|
||||
prop-types "^15.6.0"
|
||||
react-transition-group "^4.3.0"
|
||||
use-isomorphic-layout-effect "^1.1.2"
|
||||
|
||||
react-style-singleton@^2.2.1:
|
||||
version "2.2.1"
|
||||
resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
|
||||
@ -14565,6 +14672,16 @@ react-tooltip@^5.13.1:
|
||||
"@floating-ui/dom" "^1.0.0"
|
||||
classnames "^2.3.0"
|
||||
|
||||
react-transition-group@^4.3.0:
|
||||
version "4.4.5"
|
||||
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
|
||||
integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.5.5"
|
||||
dom-helpers "^5.0.1"
|
||||
loose-envify "^1.4.0"
|
||||
prop-types "^15.6.2"
|
||||
|
||||
react@^18.2.0:
|
||||
version "18.2.0"
|
||||
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
|
||||
@ -15632,6 +15749,11 @@ store2@^2.14.2:
|
||||
resolved "https://registry.yarnpkg.com/store2/-/store2-2.14.2.tgz#56138d200f9fe5f582ad63bc2704dbc0e4a45068"
|
||||
integrity sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w==
|
||||
|
||||
storybook-addon-pseudo-states@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/storybook-addon-pseudo-states/-/storybook-addon-pseudo-states-2.1.0.tgz#05faffb7e0d19fc012035ecee2a02d432f312d2d"
|
||||
integrity sha512-AwbCL1OiZ16aIeXSP/IOovkMwXy7NTZqmjkz+UM2guSGjvogHNA95NhuVyWoqieE+QWUpGO48+MrBGMeeJcHOQ==
|
||||
|
||||
storybook@^7.0.22:
|
||||
version "7.0.22"
|
||||
resolved "https://registry.yarnpkg.com/storybook/-/storybook-7.0.22.tgz#84edede1eb22f146488b0b18778538e9aacabb75"
|
||||
@ -16192,6 +16314,11 @@ to-regex-range@^5.0.1:
|
||||
dependencies:
|
||||
is-number "^7.0.0"
|
||||
|
||||
toggle-selection@^1.0.6:
|
||||
version "1.0.6"
|
||||
resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
|
||||
integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
|
||||
|
||||
toidentifier@1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
|
||||
@ -16611,7 +16738,7 @@ use-composed-ref@^1.3.0:
|
||||
resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.3.0.tgz#3d8104db34b7b264030a9d916c5e94fbe280dbda"
|
||||
integrity sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==
|
||||
|
||||
use-isomorphic-layout-effect@^1.1.1:
|
||||
use-isomorphic-layout-effect@^1.1.1, use-isomorphic-layout-effect@^1.1.2:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
|
||||
integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
|
||||
|
||||
6
infra/dev/package-lock.json
generated
6
infra/dev/package-lock.json
generated
@ -1,6 +0,0 @@
|
||||
{
|
||||
"name": "dev",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {}
|
||||
}
|
||||
@ -43,6 +43,7 @@
|
||||
"@nestjs/terminus": "^9.2.2",
|
||||
"@paljs/plugins": "^5.3.3",
|
||||
"@prisma/client": "^4.13.0",
|
||||
"add": "^2.0.6",
|
||||
"apollo-server-express": "^3.12.0",
|
||||
"axios": "^1.4.0",
|
||||
"bcrypt": "^5.1.0",
|
||||
@ -61,7 +62,8 @@
|
||||
"reflect-metadata": "^0.1.13",
|
||||
"rimraf": "^3.0.2",
|
||||
"rxjs": "^7.2.0",
|
||||
"uuid": "^9.0.0"
|
||||
"uuid": "^9.0.0",
|
||||
"yarn": "^1.22.19"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nestjs/cli": "^9.0.0",
|
||||
|
||||
@ -2187,6 +2187,11 @@ acorn@^8.4.1, acorn@^8.7.1, acorn@^8.8.0, acorn@^8.8.2:
|
||||
resolved "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz"
|
||||
integrity sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==
|
||||
|
||||
add@^2.0.6:
|
||||
version "2.0.6"
|
||||
resolved "https://registry.yarnpkg.com/add/-/add-2.0.6.tgz#248f0a9f6e5a528ef2295dbeec30532130ae2235"
|
||||
integrity sha512-j5QzrmsokwWWp6kUcJQySpbG+xfOBqqKnup3OIk1pz+kB/80SLorZ9V8zHFLO92Lcd+hbvq8bT+zOGoPkmBV0Q==
|
||||
|
||||
agent-base@6:
|
||||
version "6.0.2"
|
||||
resolved "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz"
|
||||
@ -6984,6 +6989,11 @@ yargs@^17.3.1:
|
||||
y18n "^5.0.5"
|
||||
yargs-parser "^21.1.1"
|
||||
|
||||
yarn@^1.22.19:
|
||||
version "1.22.19"
|
||||
resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.19.tgz#4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
|
||||
integrity sha512-/0V5q0WbslqnwP91tirOvldvYISzaqhClxzyUKXYxs07yUILIs5jx/k6CFe8bvKSkds5w+eiOqta39Wk3WxdcQ==
|
||||
|
||||
yn@3.1.1:
|
||||
version "3.1.1"
|
||||
resolved "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz"
|
||||
|
||||
Reference in New Issue
Block a user