Améliore la gestion des icons et léger refacto du composant Message

pull/2431/head
Johan Girod 2022-12-13 15:33:22 +01:00
parent fd3c857bb2
commit 12d158fa4e
17 changed files with 412 additions and 104 deletions

View File

@ -10,7 +10,11 @@ module.exports = {
'../source/**/*.stories.mdx',
'../source/**/*.stories.@(js|jsx|ts|tsx)',
],
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-a11y',
],
framework: '@storybook/react',
core: {
builder: '@storybook/builder-vite',

View File

@ -1,13 +1,16 @@
import React from 'react'
import { DarkModeProvider } from '@/contexts/DarkModeContext'
import { GlobalStyle } from '@/design-system/index'
import DesignSystemThemeProvider from '@/design-system/root'
export const decorators = [
(Story) => (
<DesignSystemThemeProvider>
<DarkModeProvider value={false}>
<GlobalStyle />
<Story />
</DarkModeProvider>
</DesignSystemThemeProvider>
),
]

View File

@ -113,6 +113,7 @@
"@rollup/plugin-replace": "^4.0.0",
"@rollup/plugin-yaml": "^3.1.0",
"@rushstack/package-deps-hash": "^3.2.64",
"@storybook/addon-a11y": "^6.5.14",
"@storybook/addon-actions": "^6.5.13",
"@storybook/addon-essentials": "^6.5.13",
"@storybook/addon-interactions": "^6.5.13",

View File

@ -3,7 +3,7 @@ import React, { useRef } from 'react'
import { Link } from 'react-router-dom'
import styled from 'styled-components'
import { Chevron } from '@/design-system/icons'
import { ChevronIcon } from '@/design-system/icons'
import { H4 } from '@/design-system/typography/heading'
import {
NewWindowLinkIcon,
@ -86,7 +86,7 @@ const StyledHeader = styled(H4)`
background-color: inherit;
`
const StyledChevron = styled(Chevron)`
const StyledChevron = styled(ChevronIcon)`
margin-left: ${({ theme }) => theme.spacings.xxs};
`

View File

@ -8,8 +8,8 @@ import { AriaSearchFieldProps } from '@react-types/searchfield'
import { useRef } from 'react'
import styled, { css } from 'styled-components'
import { SearchIcon } from '@/design-system/icons'
import { Loader } from '@/design-system/icons/Loader'
import { SearchIcon } from '@/design-system/icons/SearchIcon'
import {
StyledContainer,

View File

@ -8,7 +8,7 @@ import { useEffect, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import styled, { css } from 'styled-components'
import { CarretDown } from '@/design-system/icons/carret-down'
import { CarretDownIcon } from '@/design-system/icons'
import { omit } from '@/utils'
import { ListBox } from './ListBox'
@ -79,7 +79,7 @@ const Value = styled.span`
margin-top: 1rem;
`
const StyledIcon = styled(CarretDown)`
const StyledIcon = styled(CarretDownIcon)`
margin: 0 4px;
`

View File

@ -1,24 +0,0 @@
export function SearchIcon({ ...props }) {
return (
<svg
width={24}
height={24}
fill="white"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-hidden
{...props}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10.25 6a4.25 4.25 0 100 8.5 4.25 4.25 0 000-8.5zM4 10.25a6.25 6.25 0 1112.5 0 6.25 6.25 0 01-12.5 0z"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M18.293 19.707l-5.056-5.056 1.414-1.414 5.056 5.056a1 1 0 01-1.414 1.414z"
/>
</svg>
)
}

View File

@ -1,16 +0,0 @@
import { HTMLAttributes } from 'react'
export const CarretDown = (props: HTMLAttributes<SVGElement>) => (
<svg
{...props}
width="14"
height="8"
viewBox="0 0 14 8"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-hidden
>
<path d="M7.70701 7.29289L13.2928 1.70711C13.9228 1.07714 13.4766 0 12.5857 0H1.41412C0.523211 0 0.0770421 1.07714 0.707007 1.70711L6.2928 7.29289C6.68332 7.68342 7.31648 7.68342 7.70701 7.29289Z" />
</svg>
)

View File

@ -0,0 +1,18 @@
import { ComponentMeta } from '@storybook/react'
import { SvgIcon } from '.'
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
component: SvgIcon,
} as ComponentMeta<typeof SvgIcon>
export {
CarretDownIcon,
ChevronIcon,
ErrorIcon,
InfoIcon,
ReturnIcon,
SearchIcon,
SuccessIcon,
} from '@/design-system/icons'

View File

@ -1,18 +1,153 @@
import { HTMLAttributes } from 'react'
import styled from 'styled-components'
import { StyledSVG } from './shared'
export const SvgIcon = styled.svg`
/* width: ${({ theme }) => theme.spacings.lg};
height: ${({ theme }) => theme.spacings.lg}; */
fill: ${({ theme }) =>
theme.darkMode
? theme.colors.extended.grey[100]
: theme.colors.bases.primary[800]};
`
export const Chevron = (props: HTMLAttributes<SVGElement>) => (
<StyledSVG
export const ChevronIcon = (props: HTMLAttributes<SVGElement>) => (
<SvgIcon
{...props}
viewBox="0 0 24 24"
fill="none"
width={24}
height={24}
xmlns="http://www.w3.org/2000/svg"
aria-hidden
role="img"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7.24744 4.34151C7.61112 3.92587 8.24288 3.88375 8.65852 4.24744L16.6585 11.2474C16.8755 11.4373 17 11.7116 17 12C17 12.2884 16.8755 12.5627 16.6585 12.7526L8.65852 19.7526C8.24288 20.1163 7.61112 20.0742 7.24744 19.6585C6.88375 19.2429 6.92587 18.6111 7.34151 18.2474L14.4814 12L7.34151 5.75259C6.92587 5.38891 6.88375 4.75715 7.24744 4.34151Z"
/>
</StyledSVG>
</SvgIcon>
)
export const InfoIcon = (props: HTMLAttributes<SVGElement>) => (
<SvgIcon
{...props}
viewBox="0 0 20 20"
width={20}
height={20}
xmlns="http://www.w3.org/2000/svg"
aria-hidden
role="img"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM20 10C20 15.5229 15.5228 20 10 20C4.47715 20 -4.82823e-07 15.5228 0 10C4.82823e-07 4.47715 4.47715 -4.82823e-07 10 0C15.5229 4.82823e-07 20 4.47715 20 10Z"
/>
<path d="M9 6.00003C9 5.44774 9.44772 5.00003 10 5.00003C10.5523 5.00003 11 5.44774 11 6.00003C11 6.55231 10.5523 7.00003 10 7.00003C9.44772 7.00003 9 6.55231 9 6.00003Z" />
<path d="M11 14.6C11 15.1523 10.5523 15.6 10 15.6C9.44772 15.6 9 15.1523 9 14.6L9 9.4C9 8.84772 9.44772 8.4 10 8.4C10.5523 8.4 11 8.84772 11 9.4L11 14.6Z" />
</SvgIcon>
)
export const SuccessIcon = (props: HTMLAttributes<SVGElement>) => (
<SvgIcon
{...props}
viewBox="0 0 20 20"
width={20}
height={20}
xmlns="http://www.w3.org/2000/svg"
aria-hidden
role="img"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20Z"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M15.261 6.14683C15.6494 6.53952 15.6459 7.17268 15.2532 7.56103L9.13554 13.611C8.74443 13.9978 8.11438 13.9961 7.72538 13.6072L4.643 10.5258C4.25242 10.1354 4.25232 9.50219 4.64278 9.11161C5.03324 8.72102 5.66641 8.72092 6.05699 9.11138L8.43618 11.4898L13.8468 6.13897C14.2395 5.75063 14.8727 5.75415 15.261 6.14683Z"
/>
</SvgIcon>
)
export const CarretDownIcon = (props: HTMLAttributes<SVGElement>) => (
<SvgIcon
{...props}
width="14"
height="8"
viewBox="0 0 14 8"
xmlns="http://www.w3.org/2000/svg"
aria-hidden
role="img"
>
<path d="M7.70701 7.29289L13.2928 1.70711C13.9228 1.07714 13.4766 0 12.5857 0H1.41412C0.523211 0 0.0770421 1.07714 0.707007 1.70711L6.2928 7.29289C6.68332 7.68342 7.31648 7.68342 7.70701 7.29289Z" />
</SvgIcon>
)
export function SearchIcon({ ...props }) {
return (
<SvgIcon
{...props}
width={24}
height={24}
xmlns="http://www.w3.org/2000/svg"
aria-hidden
role="img"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10.25 6a4.25 4.25 0 100 8.5 4.25 4.25 0 000-8.5zM4 10.25a6.25 6.25 0 1112.5 0 6.25 6.25 0 01-12.5 0z"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M18.293 19.707l-5.056-5.056 1.414-1.414 5.056 5.056a1 1 0 01-1.414 1.414z"
/>
</SvgIcon>
)
}
export const ErrorIcon = (props: HTMLAttributes<SVGElement>) => (
<SvgIcon
{...props}
width="20"
height="19"
viewBox="0 0 20 19"
xmlns="http://www.w3.org/2000/svg"
aria-hidden
role="img"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10 0C10.3704 0 10.7105 0.204749 10.8838 0.532112L19.8838 17.5321C20.0479 17.8421 20.0376 18.2153 19.8567 18.5158C19.6758 18.8163 19.3507 19 19 19H1C0.649283 19 0.324198 18.8163 0.143295 18.5158C-0.0376073 18.2153 -0.0478841 17.8421 0.116212 17.5321L9.11621 0.532112C9.28952 0.204749 9.62959 0 10 0ZM2.66091 17H17.3391L10 3.13727L2.66091 17Z"
/>
<path d="M11 14.5C11 15.0579 10.5579 15.5 10 15.5C9.44214 15.5 9 15.0579 9 14.5C9 13.9421 9.44214 13.5 10 13.5C10.5579 13.5 11 13.9421 11 14.5Z" />
<path d="M8.99999 7.5C8.99999 6.94214 9.44212 6.5 9.99998 6.5C10.5578 6.5 11 6.94214 11 7.5V11C11 11.5579 10.5576 12 9.99969 12C9.44183 12 8.99999 11.5579 8.99999 11V7.5Z" />
</SvgIcon>
)
export const ReturnIcon = (props: HTMLAttributes<SVGElement>) => (
<SvgIcon
{...props}
width="16"
height="13"
viewBox="0 0 16 13"
xmlns="http://www.w3.org/2000/svg"
aria-hidden
role="img"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M1 0C1.55228 0 2 0.447715 2 1V6.65C2 7.20228 2.44772 7.65 3 7.65H15C15.5523 7.65 16 8.09771 16 8.65C16 9.20228 15.5523 9.65 15 9.65H3C1.34314 9.65 0 8.30685 0 6.65V1C0 0.447715 0.447715 0 1 0Z"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M11.5407 4.69739C11.9564 4.33371 12.5881 4.37582 12.9518 4.79146L15.7518 7.99146C16.0817 8.36849 16.0817 8.93144 15.7518 9.30847L12.9518 12.5085C12.5881 12.9241 11.9564 12.9662 11.5407 12.6025C11.1251 12.2389 11.083 11.6071 11.4467 11.1915L13.6705 8.64997L11.4467 6.10847C11.083 5.69283 11.1251 5.06107 11.5407 4.69739Z"
/>
</SvgIcon>
)

View File

@ -1,7 +0,0 @@
import styled from 'styled-components'
export const StyledSVG = styled.svg`
width: ${({ theme }) => theme.spacings.lg};
height: ${({ theme }) => theme.spacings.lg};
fill: ${({ theme }) => theme.colors.bases.primary[800]};
`

View File

@ -1,4 +0,0 @@
<svg role="img" width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C1.55228 0 2 0.447715 2 1V6.65C2 7.20228 2.44772 7.65 3 7.65H15C15.5523 7.65 16 8.09771 16 8.65C16 9.20228 15.5523 9.65 15 9.65H3C1.34314 9.65 0 8.30685 0 6.65V1C0 0.447715 0.447715 0 1 0Z" fill="#2E5FB6"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5407 4.69739C11.9564 4.33371 12.5881 4.37582 12.9518 4.79146L15.7518 7.99146C16.0817 8.36849 16.0817 8.93144 15.7518 9.30847L12.9518 12.5085C12.5881 12.9241 11.9564 12.9662 11.5407 12.6025C11.1251 12.2389 11.083 11.6071 11.4467 11.1915L13.6705 8.64997L11.4467 6.10847C11.083 5.69283 11.1251 5.06107 11.5407 4.69739Z" fill="#2E5FB6"/>
</svg>

Before

Width:  |  Height:  |  Size: 761 B

View File

@ -1,5 +0,0 @@
<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0C10.3704 0 10.7105 0.204749 10.8838 0.532112L19.8838 17.5321C20.0479 17.8421 20.0376 18.2153 19.8567 18.5158C19.6758 18.8163 19.3507 19 19 19H1C0.649283 19 0.324198 18.8163 0.143295 18.5158C-0.0376073 18.2153 -0.0478841 17.8421 0.116212 17.5321L9.11621 0.532112C9.28952 0.204749 9.62959 0 10 0ZM2.66091 17H17.3391L10 3.13727L2.66091 17Z" fill="#96050F"/>
<path d="M11 14.5C11 15.0579 10.5579 15.5 10 15.5C9.44214 15.5 9 15.0579 9 14.5C9 13.9421 9.44214 13.5 10 13.5C10.5579 13.5 11 13.9421 11 14.5Z" fill="#96050F"/>
<path d="M8.99999 7.5C8.99999 6.94214 9.44212 6.5 9.99998 6.5C10.5578 6.5 11 6.94214 11 7.5V11C11 11.5579 10.5576 12 9.99969 12C9.44183 12 8.99999 11.5579 8.99999 11V7.5Z" fill="#96050F"/>
</svg>

Before

Width:  |  Height:  |  Size: 863 B

View File

@ -3,11 +3,8 @@ import styled, { ThemeProvider, css } from 'styled-components'
import { Palette, SmallPalette } from '@/types/styled'
import { ErrorIcon, InfoIcon, ReturnIcon, SuccessIcon } from '../icons'
import { Body } from '../typography/paragraphs'
import baseIcon from './baseIcon.svg'
import errorIcon from './errorIcon.svg'
import infoIcon from './infoIcon.svg'
import successIcon from './successIcon.svg'
export type MessageType = 'primary' | 'secondary' | 'info' | 'error' | 'success'
type MessageProps = {
@ -42,21 +39,44 @@ export function Message({
light={light}
aria-atomic
>
{icon &&
(type === 'success' ? (
<StyledIcon src={successIcon} alt="" />
) : type === 'error' ? (
<StyledIcon src={errorIcon} alt="" />
) : type === 'info' ? (
<StyledIcon src={infoIcon} alt="" />
) : (
<StyledIcon src={baseIcon} alt="" />
))}
{icon && (
<StyledIconWrapper type={type}>
{type === 'success' ? (
<SuccessIcon />
) : type === 'error' ? (
<ErrorIcon />
) : type === 'info' ? (
<InfoIcon />
) : (
<ReturnIcon />
)}
</StyledIconWrapper>
)}
<Wrapper role={role}>{children}</Wrapper>
</StyledMessage>
</ThemeProvider>
)
}
const StyledIconWrapper = styled.div<{
type: MessageProps['type']
}>`
display: flex;
position: relative;
top: ${({ theme }) => theme.spacings.xxs};
width: ${({ theme }) => theme.spacings.xl};
svg {
fill: ${({ theme, type }) =>
type === 'success'
? theme.colors.extended.success[600]
: type === 'error'
? theme.colors.extended.error[600]
: type === 'info'
? theme.colors.extended.info[600]
: type === 'secondary'
? theme.colors.bases.secondary[700]
: theme.colors.bases.primary[700]};
}
`
type StyledMessageProps = Pick<MessageProps, 'border' | 'light'> & {
messageType: NonNullable<MessageProps['type']>
@ -73,7 +93,7 @@ const StyledMessage = styled.div<StyledMessageProps>`
: theme.colors.extended[messageType]
return css`
padding: ${theme.spacings.xs} ${theme.spacings.lg};
padding: 0px ${theme.spacings.lg};
background-color: ${light ? 'rgba(255,255,255,0.75)' : colorSpace[100]};
border: 2px solid ${colorSpace[border ? 500 : 100]};
border-radius: ${theme.box.borderRadius};
@ -90,19 +110,6 @@ const StyledMessage = styled.div<StyledMessageProps>`
}}
`
const StyledIcon = styled.img`
padding-right: ${({ theme }) => theme.spacings.md};
${({ theme, title }) =>
title !== 'paragraph'
? css`
margin-top: calc(${theme.spacings.md} + ${theme.spacings.xxs} / 2);
height: calc(${theme.spacings.md} + ${theme.spacings.xxs});
`
: css`
margin-top: calc(${theme.spacings.lg});
`}
`
const Wrapper = styled.div`
flex: 1;
`

View File

@ -1,5 +0,0 @@
<svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM20 10C20 15.5229 15.5228 20 10 20C4.47715 20 -4.82823e-07 15.5228 0 10C4.82823e-07 4.47715 4.47715 -4.82823e-07 10 0C15.5229 4.82823e-07 20 4.47715 20 10Z" fill="#D3AA00"/>
<path d="M9 6.00003C9 5.44774 9.44772 5.00003 10 5.00003C10.5523 5.00003 11 5.44774 11 6.00003C11 6.55231 10.5523 7.00003 10 7.00003C9.44772 7.00003 9 6.55231 9 6.00003Z" fill="#D3AA00"/>
<path d="M11 14.6C11 15.1523 10.5523 15.6 10 15.6C9.44772 15.6 9 15.1523 9 14.6L9 9.4C9 8.84772 9.44772 8.4 10 8.4C10.5523 8.4 11 8.84772 11 9.4L11 14.6Z" fill="#D3AA00"/>
</svg>

Before

Width:  |  Height:  |  Size: 810 B

View File

@ -1,4 +0,0 @@
<svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20Z" fill="#3CB053"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.261 6.14683C15.6494 6.53952 15.6459 7.17268 15.2532 7.56103L9.13554 13.611C8.74443 13.9978 8.11438 13.9961 7.72538 13.6072L4.643 10.5258C4.25242 10.1354 4.25232 9.50219 4.64278 9.11161C5.03324 8.72102 5.66641 8.72092 6.05699 9.11138L8.43618 11.4898L13.8468 6.13897C14.2395 5.75063 14.8727 5.75415 15.261 6.14683Z" fill="#3CB053"/>
</svg>

Before

Width:  |  Height:  |  Size: 792 B

205
yarn.lock
View File

@ -6374,6 +6374,38 @@ __metadata:
languageName: node
linkType: hard
"@storybook/addon-a11y@npm:^6.5.14":
version: 6.5.14
resolution: "@storybook/addon-a11y@npm:6.5.14"
dependencies:
"@storybook/addons": 6.5.14
"@storybook/api": 6.5.14
"@storybook/channels": 6.5.14
"@storybook/client-logger": 6.5.14
"@storybook/components": 6.5.14
"@storybook/core-events": 6.5.14
"@storybook/csf": 0.0.2--canary.4566f4d.1
"@storybook/theming": 6.5.14
axe-core: ^4.2.0
core-js: ^3.8.2
global: ^4.4.0
lodash: ^4.17.21
react-sizeme: ^3.0.1
regenerator-runtime: ^0.13.7
ts-dedent: ^2.0.0
util-deprecate: ^1.0.2
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
peerDependenciesMeta:
react:
optional: true
react-dom:
optional: true
checksum: 2c35e693641b38e90989a656b8766cd2a86482e24164e62afd2cd1899d454b1a0c0b8f23df328c5350884d22615e9779dd617c71c642f4eada1df6345feba8e3
languageName: node
linkType: hard
"@storybook/addon-actions@npm:6.5.13, @storybook/addon-actions@npm:^6.5.13":
version: 6.5.13
resolution: "@storybook/addon-actions@npm:6.5.13"
@ -6754,6 +6786,28 @@ __metadata:
languageName: node
linkType: hard
"@storybook/addons@npm:6.5.14":
version: 6.5.14
resolution: "@storybook/addons@npm:6.5.14"
dependencies:
"@storybook/api": 6.5.14
"@storybook/channels": 6.5.14
"@storybook/client-logger": 6.5.14
"@storybook/core-events": 6.5.14
"@storybook/csf": 0.0.2--canary.4566f4d.1
"@storybook/router": 6.5.14
"@storybook/theming": 6.5.14
"@types/webpack-env": ^1.16.0
core-js: ^3.8.2
global: ^4.4.0
regenerator-runtime: ^0.13.7
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
checksum: 99d06641bab06a3cc2821f309589d062c0efd8707b451ae24017449034da408bfddce3beda1ccdedadf59669d7d13348bee127f6fd4fc057200c84ff43288312
languageName: node
linkType: hard
"@storybook/api@npm:6.5.13":
version: 6.5.13
resolution: "@storybook/api@npm:6.5.13"
@ -6782,6 +6836,34 @@ __metadata:
languageName: node
linkType: hard
"@storybook/api@npm:6.5.14":
version: 6.5.14
resolution: "@storybook/api@npm:6.5.14"
dependencies:
"@storybook/channels": 6.5.14
"@storybook/client-logger": 6.5.14
"@storybook/core-events": 6.5.14
"@storybook/csf": 0.0.2--canary.4566f4d.1
"@storybook/router": 6.5.14
"@storybook/semver": ^7.3.2
"@storybook/theming": 6.5.14
core-js: ^3.8.2
fast-deep-equal: ^3.1.3
global: ^4.4.0
lodash: ^4.17.21
memoizerific: ^1.11.3
regenerator-runtime: ^0.13.7
store2: ^2.12.0
telejson: ^6.0.8
ts-dedent: ^2.0.0
util-deprecate: ^1.0.2
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
checksum: 0d421c3211a49cb8910dea647b898edd60af79755108ed321626a8fc134713dd1b018c830f15c2fc6c863f0528b571c2e2b34bb79df3c2f43497f5ab36fa9bbf
languageName: node
linkType: hard
"@storybook/builder-vite@npm:^0.2.5":
version: 0.2.5
resolution: "@storybook/builder-vite@npm:0.2.5"
@ -6920,6 +7002,17 @@ __metadata:
languageName: node
linkType: hard
"@storybook/channels@npm:6.5.14":
version: 6.5.14
resolution: "@storybook/channels@npm:6.5.14"
dependencies:
core-js: ^3.8.2
ts-dedent: ^2.0.0
util-deprecate: ^1.0.2
checksum: ff1ee3fea3c7b8591280ba7eabe13c999fc3e12a483ff2c0467cc9cca027662cbbc4676438da567865919157521df8a9a50bd20b35daed6896f39a3a7251a1e5
languageName: node
linkType: hard
"@storybook/client-api@npm:6.5.13":
version: 6.5.13
resolution: "@storybook/client-api@npm:6.5.13"
@ -6961,6 +7054,16 @@ __metadata:
languageName: node
linkType: hard
"@storybook/client-logger@npm:6.5.14":
version: 6.5.14
resolution: "@storybook/client-logger@npm:6.5.14"
dependencies:
core-js: ^3.8.2
global: ^4.4.0
checksum: 29cc0b58db7a8dc90484320c86b386975580c0e534791b29f6a8c00ce5b156f2bff9513994202f9f9ef99787e8d793988048ae88d2780ba151c6782f3bbf97ff
languageName: node
linkType: hard
"@storybook/components@npm:6.5.13":
version: 6.5.13
resolution: "@storybook/components@npm:6.5.13"
@ -6980,6 +7083,25 @@ __metadata:
languageName: node
linkType: hard
"@storybook/components@npm:6.5.14":
version: 6.5.14
resolution: "@storybook/components@npm:6.5.14"
dependencies:
"@storybook/client-logger": 6.5.14
"@storybook/csf": 0.0.2--canary.4566f4d.1
"@storybook/theming": 6.5.14
core-js: ^3.8.2
memoizerific: ^1.11.3
qs: ^6.10.0
regenerator-runtime: ^0.13.7
util-deprecate: ^1.0.2
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
checksum: 73d0ff418f2c5b1fc9f421f089ebee2342ef0684905e4959397a8bc6f67f32ff97f4ec3587847980cb7e4fc8e40278d8ecea11a8d267fea8d94ad3d8265a0c21
languageName: node
linkType: hard
"@storybook/core-client@npm:6.5.13":
version: 6.5.13
resolution: "@storybook/core-client@npm:6.5.13"
@ -7088,6 +7210,15 @@ __metadata:
languageName: node
linkType: hard
"@storybook/core-events@npm:6.5.14":
version: 6.5.14
resolution: "@storybook/core-events@npm:6.5.14"
dependencies:
core-js: ^3.8.2
checksum: 6787925c520a6ee5aee748d4b7e2ec599c5ee16a87dbb62a94eeec88003ef42683d8e7ac8b98b49ea2a33205e0648805410c4759d16a997ba2f4215f6c8784ce
languageName: node
linkType: hard
"@storybook/core-server@npm:6.5.13":
version: 6.5.13
resolution: "@storybook/core-server@npm:6.5.13"
@ -7472,6 +7603,22 @@ __metadata:
languageName: node
linkType: hard
"@storybook/router@npm:6.5.14":
version: 6.5.14
resolution: "@storybook/router@npm:6.5.14"
dependencies:
"@storybook/client-logger": 6.5.14
core-js: ^3.8.2
memoizerific: ^1.11.3
qs: ^6.10.0
regenerator-runtime: ^0.13.7
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
checksum: ec2550568c02f45de5307e77928eaeb39413049944e994adbc397d9c7e083ac7e110886e40517ddae40e3879c172f458167682f1d73d0bb150bc93ab9dd61514
languageName: node
linkType: hard
"@storybook/semver@npm:^7.3.2":
version: 7.3.2
resolution: "@storybook/semver@npm:7.3.2"
@ -7579,6 +7726,21 @@ __metadata:
languageName: node
linkType: hard
"@storybook/theming@npm:6.5.14":
version: 6.5.14
resolution: "@storybook/theming@npm:6.5.14"
dependencies:
"@storybook/client-logger": 6.5.14
core-js: ^3.8.2
memoizerific: ^1.11.3
regenerator-runtime: ^0.13.7
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
checksum: d139325dd51e8dfa58458a5c033104123b019fc02ddc899898e02de2b5d1358fd318b5def7ef82e6138420f9198e90d50b0fdfbea926987ac6852fc3a2e77c6d
languageName: node
linkType: hard
"@storybook/ui@npm:6.5.13":
version: 6.5.13
resolution: "@storybook/ui@npm:6.5.13"
@ -10296,6 +10458,13 @@ __metadata:
languageName: node
linkType: hard
"axe-core@npm:^4.2.0":
version: 4.6.0
resolution: "axe-core@npm:4.6.0"
checksum: ed112f76bbb2e2ab52dda623fc4baf882b2d00045a55b2cc15358e891f7f164d674be1a2fbcfd49e11d064b146c387c5c9c3c29d7d59c9de6c22c65b86eb68ac
languageName: node
linkType: hard
"axe-core@npm:^4.4.3, axe-core@npm:^4.5.2":
version: 4.5.2
resolution: "axe-core@npm:4.5.2"
@ -10519,6 +10688,13 @@ __metadata:
languageName: node
linkType: hard
"batch-processor@npm:1.0.0":
version: 1.0.0
resolution: "batch-processor@npm:1.0.0"
checksum: 5519b024f6cd0e95a543bb3edf0ae19e5badae0c32b30b41839b4469bbb1f91e14fc04bff3759cd9c2621aa9e16def48c938783e9027e7ec977fba62d537a468
languageName: node
linkType: hard
"bcrypt-pbkdf@npm:^1.0.0":
version: 1.0.2
resolution: "bcrypt-pbkdf@npm:1.0.2"
@ -13975,6 +14151,15 @@ __metadata:
languageName: node
linkType: hard
"element-resize-detector@npm:^1.2.2":
version: 1.2.4
resolution: "element-resize-detector@npm:1.2.4"
dependencies:
batch-processor: 1.0.0
checksum: 81c47b7e229c303889d3a9d78ec3f3232e88a6682f1e2424fb0632d9b4f503b2ca011e6954321060604da07749a5a972b6a175fdf6c6806093a3b80a304cde7b
languageName: node
linkType: hard
"elliptic@npm:^6.5.3":
version: 6.5.4
resolution: "elliptic@npm:6.5.4"
@ -24413,6 +24598,18 @@ __metadata:
languageName: node
linkType: hard
"react-sizeme@npm:^3.0.1":
version: 3.0.2
resolution: "react-sizeme@npm:3.0.2"
dependencies:
element-resize-detector: ^1.2.2
invariant: ^2.2.4
shallowequal: ^1.1.0
throttle-debounce: ^3.0.1
checksum: 97cb852c24bbd50acb310da89df564e0d069415f6635676dae3d3bdc583ece88090c0f2ee88a6b0dc36d2793af4a11e83bf6bbb41b86225dd0cf338e8f7e8552
languageName: node
linkType: hard
"react-smooth@npm:^2.0.1":
version: 2.0.1
resolution: "react-smooth@npm:2.0.1"
@ -25956,6 +26153,7 @@ __metadata:
"@sentry/integrations": ^7.22.0
"@sentry/react": ^7.22.0
"@sentry/tracing": ^7.22.0
"@storybook/addon-a11y": ^6.5.14
"@storybook/addon-actions": ^6.5.13
"@storybook/addon-essentials": ^6.5.13
"@storybook/addon-interactions": ^6.5.13
@ -27375,6 +27573,13 @@ __metadata:
languageName: node
linkType: hard
"throttle-debounce@npm:^3.0.1":
version: 3.0.1
resolution: "throttle-debounce@npm:3.0.1"
checksum: e34ef638e8df3a9154249101b68afcbf2652a139c803415ef8a2f6a8bc577bcd4d79e4bb914ad3cd206523ac78b9fb7e80885bfa049f64fbb1927f99d98b5736
languageName: node
linkType: hard
"throttleit@npm:^1.0.0":
version: 1.0.0
resolution: "throttleit@npm:1.0.0"