@mrshmllw/smores-react 15.1.2 → 15.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -18,7 +18,7 @@ export const Accordion = ({ title, children, onToggle, filledBackground, default
|
|
|
18
18
|
onToggle?.(nextOpenState);
|
|
19
19
|
setIsOpen(nextOpenState);
|
|
20
20
|
};
|
|
21
|
-
return (_jsxs(Wrapper, { "$borderTop": borderTop, "$fullBorder": fullBorder, "$filledBackground": filledBackground, "$borderColor": resolvedBorderColor, "$backgroundColor": resolvedBackgroundColour, ...marginProps, children: [_jsxs(TopContainer, { flex: true, alignItems: "center", justifyContent: "space-between", onClick: handleToggle, py: "
|
|
21
|
+
return (_jsxs(Wrapper, { "$borderTop": borderTop, "$fullBorder": fullBorder, "$filledBackground": filledBackground, "$borderColor": resolvedBorderColor, "$backgroundColor": resolvedBackgroundColour, ...marginProps, children: [_jsxs(TopContainer, { flex: true, alignItems: "center", justifyContent: "space-between", onClick: handleToggle, py: "space.200", pr: "space.200", pl: px, children: [_jsxs(TitleContainer, { children: [_jsx(Text, { tag: "h2", typo: "headline-regular", children: title }), subTitle && (_jsx(Text, { tag: "label", typo: "label", mt: "space.050", children: subTitle }))] }), _jsx(CaretIcon, { "$size": 20, "$isOpen": isOpen, "$borderTop": borderTop, children: _jsx(FontAwesomeIcon, { icon: faChevronDown, color: theme.color.illustration.neutral[400] }) })] }), isOpen && (_jsx(Box, { pt: "space.150", pb: "space.200", px: px, children: children }))] }));
|
|
22
22
|
};
|
|
23
23
|
const Wrapper = styled(Box)(({ $borderTop, $fullBorder, $filledBackground, $borderColor, $backgroundColor, }) => css `
|
|
24
24
|
border-bottom: 1px solid ${$borderColor};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/Accordion/Accordion.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC/C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAGzD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAY,mBAAmB,EAAE,MAAM,kCAAkC,CAAA;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,kDAAkD,CAAA;AA4BhF,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,EAC5C,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,aAAa,GAAG,KAAK,EACrB,SAAS,GAAG,KAAK,EACjB,WAAW,GAAG,gCAAgC,EAC9C,eAAe,GAAG,wBAAwB,EAC1C,QAAQ,EACR,UAAU,GAAG,KAAK,EAClB,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA;IACnD,MAAM,EAAE,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAA;IAEpC,MAAM,mBAAmB,GAAG,mBAAmB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAA;IAEnE,MAAM,wBAAwB,GAAG,mBAAmB,CAAC,eAAe,EAAE,KAAK,CAAC,CAAA;IAE5E,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,MAAM,aAAa,GAAG,CAAC,MAAM,CAAA;QAC7B,QAAQ,EAAE,CAAC,aAAa,CAAC,CAAA;QACzB,SAAS,CAAC,aAAa,CAAC,CAAA;IAC1B,CAAC,CAAA;IAED,OAAO,CACL,MAAC,OAAO,kBACM,SAAS,iBACR,UAAU,uBACJ,gBAAgB,kBACrB,mBAAmB,sBACf,wBAAwB,KACtC,WAAW,aAEf,MAAC,YAAY,IACX,IAAI,QACJ,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,eAAe,EAC9B,OAAO,EAAE,YAAY,EACrB,EAAE,EAAC,
|
|
1
|
+
{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, ReactNode, useState } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { MarginProps } from '../utils/space'\nimport { NewColor, resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\nimport { IconContainer } from '../sharedStyles/shared.styles'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faChevronDown } from '@awesome.me/kit-46ca99185c/icons/classic/regular'\n\ntype UsableNewColors = Extract<\n NewColor,\n | 'color.surface.base.000'\n | 'color.surface.base.100'\n | 'color.surface.base.300'\n | 'color.illustration.neutral.300'\n>\n\nexport type AccordionProps = {\n title: string\n subTitle?: string\n filledBackground?: boolean\n borderTop?: boolean\n borderColor?: 'oatmeal' | 'custard' | 'cream' | 'coconut' | UsableNewColors\n fullBorder?: boolean\n backgroundColor?:\n | 'oatmeal'\n | 'custard'\n | 'cream'\n | 'coconut'\n | UsableNewColors\n onToggle?: (isOpen: boolean) => void\n children: ReactNode\n defaultIsOpen?: boolean\n} & MarginProps\n\nexport const Accordion: FC<AccordionProps> = ({\n title,\n children,\n onToggle,\n filledBackground,\n defaultIsOpen = false,\n borderTop = false,\n borderColor = 'color.illustration.neutral.300',\n backgroundColor = 'color.surface.base.300',\n subTitle,\n fullBorder = false,\n ...marginProps\n}) => {\n const theme = useTheme()\n const [isOpen, setIsOpen] = useState(defaultIsOpen)\n const px = fullBorder ? '16px' : '0'\n\n const resolvedBorderColor = resolveToThemeColor(borderColor, theme)\n\n const resolvedBackgroundColour = resolveToThemeColor(backgroundColor, theme)\n\n const handleToggle = () => {\n const nextOpenState = !isOpen\n onToggle?.(nextOpenState)\n setIsOpen(nextOpenState)\n }\n\n return (\n <Wrapper\n $borderTop={borderTop}\n $fullBorder={fullBorder}\n $filledBackground={filledBackground}\n $borderColor={resolvedBorderColor}\n $backgroundColor={resolvedBackgroundColour}\n {...marginProps}\n >\n <TopContainer\n flex\n alignItems=\"center\"\n justifyContent=\"space-between\"\n onClick={handleToggle}\n py=\"space.200\"\n pr=\"space.200\"\n pl={px}\n >\n <TitleContainer>\n <Text tag=\"h2\" typo=\"headline-regular\">\n {title}\n </Text>\n {subTitle && (\n <Text tag=\"label\" typo=\"label\" mt=\"space.050\">\n {subTitle}\n </Text>\n )}\n </TitleContainer>\n\n <CaretIcon $size={20} $isOpen={isOpen} $borderTop={borderTop}>\n <FontAwesomeIcon\n icon={faChevronDown}\n color={theme.color.illustration.neutral[400]}\n />\n </CaretIcon>\n </TopContainer>\n {isOpen && (\n <Box pt=\"space.150\" pb=\"space.200\" px={px}>\n {children}\n </Box>\n )}\n </Wrapper>\n )\n}\n\nconst Wrapper = styled(Box)<\n TransientProps<\n Pick<AccordionProps, 'borderTop' | 'fullBorder' | 'filledBackground'>\n > & { $borderColor: string; $backgroundColor: string }\n>(\n ({\n $borderTop,\n $fullBorder,\n $filledBackground,\n $borderColor,\n $backgroundColor,\n }) => css`\n border-bottom: 1px solid ${$borderColor};\n ${$borderTop && `border-top: 1px solid ${$backgroundColor};`}\n\n ${$fullBorder &&\n css`\n border: 1px solid ${$borderColor};\n border-radius: 16px;\n `}\n\n ${$filledBackground &&\n css`\n background-color: ${$backgroundColor};\n `}\n `,\n)\n\nconst TitleContainer = styled.div`\n display: flex;\n flex-direction: column;\n`\nconst TopContainer = styled(Box)`\n cursor: pointer;\n`\n\nconst CaretIcon = styled(IconContainer)<\n TransientProps<Pick<AccordionProps, 'borderTop'>> & { $isOpen: boolean }\n>(\n ({ $isOpen }) => css`\n transform: ${$isOpen ? 'rotate(180deg)' : 'rotate(0deg)'};\n transition: transform 0.6s ease;\n `,\n)\n"]}
|
package/dist/Alert/Alert.js
CHANGED
|
@@ -41,7 +41,7 @@ export const Alert = ({ type = 'info', title, message, isDismissible = false, ct
|
|
|
41
41
|
const backgroundColor = resolveToThemeColor(typeConfig[type].backgroundColor, theme);
|
|
42
42
|
const accentColor = resolveToThemeColor(typeConfig[type].accentColor, theme);
|
|
43
43
|
const [alertClosed, setAlertClosed] = useState(false);
|
|
44
|
-
return (_jsxs(StyledAlert, { "$backgroundColor": backgroundColor, "$accentColor": accentColor, "$alertClosed": alertClosed, "$maxWidth": maxWidth, ...marginProps, children: [_jsx(IconContainer, { "$size": 16, style: { margin: '2px' }, children: _jsx(FontAwesomeIcon, { icon: typeConfig[type].icon, color: theme.color.icon.base }) }), _jsxs(Box, { flex: true, direction: "row", justifyContent: "space-between", alignItems: "flex-start", width: "100%", gap: "
|
|
44
|
+
return (_jsxs(StyledAlert, { "$backgroundColor": backgroundColor, "$accentColor": accentColor, "$alertClosed": alertClosed, "$maxWidth": maxWidth, ...marginProps, children: [_jsx(IconContainer, { "$size": 16, style: { margin: '2px' }, children: _jsx(FontAwesomeIcon, { icon: typeConfig[type].icon, color: theme.color.icon.base }) }), _jsxs(Box, { flex: true, direction: "row", justifyContent: "space-between", alignItems: "flex-start", width: "100%", gap: "space.100", children: [_jsxs(Box, { maxWidth: "512px", children: [title && (_jsx(Text, { mb: "space.050", typo: "headline-regular", children: title })), typeof message === 'string' ? (_jsx(Text, { typo: "body-small", mb: ctaType && '8px', children: message })) : (message), ctaType === 'button' && typeof ctaAction === 'function' && (_jsx(Button, { smallButton: true, fallbackStyle: true, onClick: () => ctaAction(), children: ctaLabel })), ctaType === 'link' && typeof ctaAction === 'string' && (_jsx(Link, { href: ctaAction, children: ctaLabel }))] }), isDismissible && (_jsx(IconContainer, { as: "button", type: "button", title: "icon-button", "$size": 16, style: { cursor: 'pointer' }, onClick: () => setAlertClosed(true), children: _jsx(FontAwesomeIcon, { icon: faXmark, color: theme.color.icon.base }) }))] })] }));
|
|
45
45
|
};
|
|
46
46
|
const StyledAlert = styled(Box)(({ $backgroundColor, $accentColor, $alertClosed, $maxWidth }) => css `
|
|
47
47
|
display: flex;
|
|
@@ -50,7 +50,7 @@ const StyledAlert = styled(Box)(({ $backgroundColor, $accentColor, $alertClosed,
|
|
|
50
50
|
min-width: min-content;
|
|
51
51
|
padding: 12px 12px 12px 20px;
|
|
52
52
|
align-items: flex-start;
|
|
53
|
-
gap:
|
|
53
|
+
gap: ${({ theme }) => theme.space[100]};
|
|
54
54
|
border-radius: 8px 16px 16px 8px;
|
|
55
55
|
background: ${$backgroundColor};
|
|
56
56
|
position: relative;
|
package/dist/Alert/Alert.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/Alert/Alert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAoB,QAAQ,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAGzD,OAAO,EAAY,mBAAmB,EAAE,MAAM,kCAAkC,CAAA;AAEhF,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EACL,YAAY,EACZ,qBAAqB,EACrB,mBAAmB,EACnB,aAAa,EACb,OAAO,GACR,MAAM,kDAAkD,CAAA;AAGzD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAoC7D,MAAM,UAAU,GAAuC;IACrD,IAAI,EAAE;QACJ,eAAe,EAAE,gCAAgC;QACjD,WAAW,EAAE,gCAAgC;QAC7C,IAAI,EAAE,YAAY;KACnB;IACD,QAAQ,EAAE;QACR,eAAe,EAAE,wBAAwB;QACzC,WAAW,EAAE,wBAAwB;QACrC,IAAI,EAAE,YAAY;KACnB;IACD,MAAM,EAAE;QACN,eAAe,EAAE,2BAA2B;QAC5C,WAAW,EAAE,2BAA2B;QACxC,IAAI,EAAE,qBAAqB;KAC5B;IACD,QAAQ,EAAE;QACR,eAAe,EAAE,6BAA6B;QAC9C,WAAW,EAAE,6BAA6B;QAC1C,IAAI,EAAE,mBAAmB;KAC1B;IACD,QAAQ,EAAE;QACR,eAAe,EAAE,6BAA6B;QAC9C,WAAW,EAAE,6BAA6B;QAC1C,IAAI,EAAE,aAAa;KACpB;CACF,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EACpC,IAAI,GAAG,MAAM,EACb,KAAK,EACL,OAAO,EACP,aAAa,GAAG,KAAK,EACrB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,GAAG,OAAO,EAClB,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,eAAe,GAAG,mBAAmB,CACzC,UAAU,CAAC,IAAI,CAAC,CAAC,eAAe,EAChC,KAAK,CACN,CAAA;IACD,MAAM,WAAW,GAAG,mBAAmB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,KAAK,CAAC,CAAA;IAC5E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAErD,OAAO,CACL,MAAC,WAAW,wBACQ,eAAe,kBACnB,WAAW,kBACX,WAAW,eACd,QAAQ,KACf,WAAW,aAEf,KAAC,aAAa,aAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,YAChD,KAAC,eAAe,IACd,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,EAC3B,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAC5B,GACY,EAChB,MAAC,GAAG,IACF,IAAI,QACJ,SAAS,EAAC,KAAK,EACf,cAAc,EAAC,eAAe,EAC9B,UAAU,EAAC,YAAY,EACvB,KAAK,EAAC,MAAM,EACZ,GAAG,EAAC,
|
|
1
|
+
{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/Alert/Alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, ReactElement, useState } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { MarginProps } from 'utils/space'\nimport { NewColor, resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\n\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { Button } from '../Button'\nimport { Link } from '../Link'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport {\n faCircleInfo,\n faTriangleExclamation,\n faCircleExclamation,\n faCircleCheck,\n faXmark,\n} from '@awesome.me/kit-46ca99185c/icons/classic/regular'\n\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\ntype AlertType = 'info' | 'fallback' | 'notice' | 'negative' | 'positive'\n\ntype CtaProps =\n | {\n ctaType: 'button'\n ctaAction: () => void\n ctaLabel: string\n }\n | {\n ctaType: 'link'\n ctaAction: string\n ctaLabel: string\n }\n | {\n ctaType?: undefined\n ctaAction?: undefined\n ctaLabel?: undefined\n }\n\nexport type AlertProps = {\n type?: AlertType\n title?: string\n message: string | ReactElement<unknown>\n isDismissible?: boolean\n maxWidth?: string\n} & CtaProps &\n MarginProps\n\ntype AlertTypeConfig = {\n backgroundColor: NewColor\n accentColor: NewColor\n icon: IconDefinition\n}\n\nconst typeConfig: Record<AlertType, AlertTypeConfig> = {\n info: {\n backgroundColor: 'color.feedback.informative.100',\n accentColor: 'color.feedback.informative.200',\n icon: faCircleInfo,\n },\n fallback: {\n backgroundColor: 'color.surface.base.100',\n accentColor: 'color.surface.base.400',\n icon: faCircleInfo,\n },\n notice: {\n backgroundColor: 'color.feedback.notice.100',\n accentColor: 'color.feedback.notice.200',\n icon: faTriangleExclamation,\n },\n negative: {\n backgroundColor: 'color.feedback.negative.100',\n accentColor: 'color.feedback.negative.200',\n icon: faCircleExclamation,\n },\n positive: {\n backgroundColor: 'color.feedback.positive.100',\n accentColor: 'color.feedback.positive.200',\n icon: faCircleCheck,\n },\n}\n\nexport const Alert: FC<AlertProps> = ({\n type = 'info',\n title,\n message,\n isDismissible = false,\n ctaType,\n ctaAction,\n ctaLabel,\n maxWidth = '512px',\n ...marginProps\n}) => {\n const theme = useTheme()\n\n const backgroundColor = resolveToThemeColor(\n typeConfig[type].backgroundColor,\n theme,\n )\n const accentColor = resolveToThemeColor(typeConfig[type].accentColor, theme)\n const [alertClosed, setAlertClosed] = useState(false)\n\n return (\n <StyledAlert\n $backgroundColor={backgroundColor}\n $accentColor={accentColor}\n $alertClosed={alertClosed}\n $maxWidth={maxWidth}\n {...marginProps}\n >\n <IconContainer $size={16} style={{ margin: '2px' }}>\n <FontAwesomeIcon\n icon={typeConfig[type].icon}\n color={theme.color.icon.base}\n />\n </IconContainer>\n <Box\n flex\n direction=\"row\"\n justifyContent=\"space-between\"\n alignItems=\"flex-start\"\n width=\"100%\"\n gap=\"space.100\"\n >\n <Box maxWidth=\"512px\">\n {title && (\n <Text mb=\"space.050\" typo=\"headline-regular\">\n {title}\n </Text>\n )}\n {typeof message === 'string' ? (\n <Text typo=\"body-small\" mb={ctaType && '8px'}>\n {message}\n </Text>\n ) : (\n message\n )}\n {ctaType === 'button' && typeof ctaAction === 'function' && (\n <Button smallButton fallbackStyle onClick={() => ctaAction()}>\n {ctaLabel}\n </Button>\n )}\n {ctaType === 'link' && typeof ctaAction === 'string' && (\n <Link href={ctaAction}>{ctaLabel}</Link>\n )}\n </Box>\n {isDismissible && (\n <IconContainer\n as=\"button\"\n type=\"button\"\n title=\"icon-button\"\n $size={16}\n style={{ cursor: 'pointer' }}\n onClick={() => setAlertClosed(true)}\n >\n <FontAwesomeIcon icon={faXmark} color={theme.color.icon.base} />\n </IconContainer>\n )}\n </Box>\n </StyledAlert>\n )\n}\n\ninterface IStyledAlert {\n $backgroundColor: string\n $accentColor: string\n $alertClosed: boolean\n $maxWidth?: string\n}\n\nconst StyledAlert = styled(Box)<IStyledAlert>(\n ({ $backgroundColor, $accentColor, $alertClosed, $maxWidth }) => css`\n display: flex;\n width: 100%;\n max-width: ${$maxWidth};\n min-width: min-content;\n padding: 12px 12px 12px 20px;\n align-items: flex-start;\n gap: ${({ theme }) => theme.space[100]};\n border-radius: 8px 16px 16px 8px;\n background: ${$backgroundColor};\n position: relative;\n display: ${$alertClosed ? 'none' : 'flex'};\n\n &:before {\n width: 8px;\n height: 100%;\n position: absolute;\n background: ${$accentColor};\n content: '';\n top: 0;\n left: 0;\n border-radius: 16px 0 0 16px;\n }\n `,\n)\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mrshmllw/smores-react",
|
|
3
|
-
"version": "15.1.
|
|
3
|
+
"version": "15.1.4",
|
|
4
4
|
"description": "Collection of React components used by Marshmallow Technology",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -63,11 +63,11 @@
|
|
|
63
63
|
"@commitlint/cli": "^20.4.2",
|
|
64
64
|
"@mrshmllw/campfire": "^3.0.2",
|
|
65
65
|
"@snyk/protect": "^1.1302.1",
|
|
66
|
-
"@storybook/addon-a11y": "^10.2.
|
|
66
|
+
"@storybook/addon-a11y": "^10.2.12",
|
|
67
67
|
"@storybook/addon-coverage": "^3.0.0",
|
|
68
|
-
"@storybook/addon-docs": "^10.2.
|
|
69
|
-
"@storybook/addon-links": "^10.2.
|
|
70
|
-
"@storybook/react-vite": "^10.2.
|
|
68
|
+
"@storybook/addon-docs": "^10.2.12",
|
|
69
|
+
"@storybook/addon-links": "^10.2.12",
|
|
70
|
+
"@storybook/react-vite": "^10.2.12",
|
|
71
71
|
"@storybook/test-runner": "^0.24.2",
|
|
72
72
|
"@testing-library/jest-dom": "^6.9.1",
|
|
73
73
|
"@testing-library/react": "^16.3.2",
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
"eslint-plugin-prettier": "^5.5.5",
|
|
84
84
|
"eslint-plugin-react": "^7.37.5",
|
|
85
85
|
"eslint-plugin-react-hooks": "^7.0.1",
|
|
86
|
-
"eslint-plugin-storybook": "^10.2.
|
|
86
|
+
"eslint-plugin-storybook": "^10.2.12",
|
|
87
87
|
"husky": "^9.1.7",
|
|
88
88
|
"jest-styled-components": "^7.2.0",
|
|
89
89
|
"jsdom": "^28.1.0",
|