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
@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user