@mrshmllw/smores-react 3.0.1 → 3.0.2
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.
- package/dist/Button/LegacyButton.d.ts +15 -0
- package/dist/Button/LegacyButton.js +50 -0
- package/dist/Button/LegacyButton.js.map +1 -0
- package/dist/RadioGroup/RadioGroup.d.ts +5 -1
- package/dist/RadioGroup/RadioGroup.js +1 -1
- package/dist/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/RadioGroup/RadioGroup.stories.d.ts +3 -0
- package/dist/RadioGroup/RadioGroup.stories.js +2 -0
- package/dist/RadioGroup/RadioGroup.stories.js.map +1 -1
- package/dist/RadioGroup/RadioItem.d.ts +3 -1
- package/dist/RadioGroup/RadioItem.js +38 -22
- package/dist/RadioGroup/RadioItem.js.map +1 -1
- package/dist/RadioGroup/types.d.ts +1 -0
- package/package.json +2 -2
@@ -0,0 +1,15 @@
|
|
1
|
+
import React, { FC, ReactNode } from 'react';
|
2
|
+
import { Color } from '../theme';
|
3
|
+
type Props = {
|
4
|
+
children: ReactNode;
|
5
|
+
id?: string;
|
6
|
+
className?: string;
|
7
|
+
color?: Color;
|
8
|
+
block?: boolean;
|
9
|
+
inverted?: boolean;
|
10
|
+
disabled?: boolean;
|
11
|
+
outlined?: boolean;
|
12
|
+
handleClick: (e: React.FormEvent<HTMLButtonElement>) => void;
|
13
|
+
};
|
14
|
+
export declare const LegacyButton: FC<Props>;
|
15
|
+
export {};
|
@@ -0,0 +1,50 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import styled, { css } from 'styled-components';
|
3
|
+
import { theme } from '../theme';
|
4
|
+
export const LegacyButton = ({ children, id, className = '', color = 'liquorice', block = false, inverted = false, disabled = false, outlined = false, handleClick, }) => (React.createElement(Container, { id: id, className: className, color: color, block: block, inverted: inverted, disabled: disabled, outlined: outlined, onClick: handleClick }, children));
|
5
|
+
const Container = styled.button(({ block, color, inverted, outlined }) => css `
|
6
|
+
position: relative;
|
7
|
+
display: inline-block;
|
8
|
+
box-sizing: border-box;
|
9
|
+
border: none;
|
10
|
+
border-radius: 8px;
|
11
|
+
font-size: 16px;
|
12
|
+
padding: 18px 16px 14px;
|
13
|
+
outline: none;
|
14
|
+
cursor: pointer;
|
15
|
+
width: ${block ? '100%' : 'auto'};
|
16
|
+
background-color: ${theme.colors[color]};
|
17
|
+
color: ${theme.colors.cream};
|
18
|
+
font-weight: ${theme.font.weight.medium};
|
19
|
+
|
20
|
+
&:hover:not([disabled]) {
|
21
|
+
background-color: ${theme.colors[color]};
|
22
|
+
}
|
23
|
+
&:active:not([disabled]) {
|
24
|
+
background-color: ${theme.colors[color]};
|
25
|
+
}
|
26
|
+
&:disabled {
|
27
|
+
opacity: 0.5;
|
28
|
+
cursor: not-allowed;
|
29
|
+
}
|
30
|
+
|
31
|
+
${(inverted || outlined) &&
|
32
|
+
css `
|
33
|
+
background-color: transparent;
|
34
|
+
border: 1px solid ${outlined ? theme.colors.chia : 'transparent'};
|
35
|
+
color: ${outlined ? theme.colors.liquorice : theme.colors[color]};
|
36
|
+
|
37
|
+
&:hover:not([disabled]) {
|
38
|
+
background-color: ${theme.colors.coconut};
|
39
|
+
}
|
40
|
+
&:active:not([disabled]) {
|
41
|
+
background-color: ${theme.colors.coconut};
|
42
|
+
}
|
43
|
+
`};
|
44
|
+
|
45
|
+
@media (min-width: 768px) {
|
46
|
+
padding: 16px 16px 15px;
|
47
|
+
font-size: 16px;
|
48
|
+
}
|
49
|
+
`);
|
50
|
+
//# sourceMappingURL=LegacyButton.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"LegacyButton.js","sourceRoot":"","sources":["../../src/Button/LegacyButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AA+BvC,MAAM,CAAC,MAAM,YAAY,GAAc,CAAC,EACtC,QAAQ,EACR,EAAE,EACF,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,WAAW,EACnB,KAAK,GAAG,KAAK,EACb,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,WAAW,GACZ,EAAE,EAAE,CAAC,CACJ,oBAAC,SAAS,IACR,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,IAEnB,QAAQ,CACC,CACb,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAC7B,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;;;;;;aAUlC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;wBACZ,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;aAC9B,KAAK,CAAC,MAAM,CAAC,KAAK;mBACZ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;0BAGjB,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;;;0BAGnB,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;;;;;;;MAOvC,CAAC,QAAQ,IAAI,QAAQ,CAAC;IACxB,GAAG,CAAA;;0BAEmB,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa;eACvD,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;;;4BAG1C,KAAK,CAAC,MAAM,CAAC,OAAO;;;4BAGpB,KAAK,CAAC,MAAM,CAAC,OAAO;;KAE3C;;;;;;GAMF,CACF,CAAA"}
|
@@ -1,9 +1,11 @@
|
|
1
1
|
import React, { ReactElement } from 'react';
|
2
2
|
import { CommonFieldProps } from '../fields/commonFieldTypes';
|
3
|
-
import { BaseValueType, DisplayType } from './types';
|
3
|
+
import { BaseValueType, DisplayType, IconPosition } from './types';
|
4
4
|
export type RadioGroupProps<Value extends BaseValueType = BaseValueType> = {
|
5
5
|
options: Array<{
|
6
6
|
visual?: string;
|
7
|
+
icon?: string;
|
8
|
+
iconPosition?: IconPosition;
|
7
9
|
label: string;
|
8
10
|
value: Value;
|
9
11
|
bodyCopy?: string;
|
@@ -19,6 +21,8 @@ export type RadioGroupElement = {
|
|
19
21
|
export declare const RadioGroup: <Value extends BaseValueType = BaseValueType>(p: {
|
20
22
|
options: {
|
21
23
|
visual?: string | undefined;
|
24
|
+
icon?: string | undefined;
|
25
|
+
iconPosition?: IconPosition | undefined;
|
22
26
|
label: string;
|
23
27
|
value: Value;
|
24
28
|
bodyCopy?: string | undefined;
|
@@ -36,7 +36,7 @@ const RadioGroupComponent = (_a, ref) => {
|
|
36
36
|
optionRefs.current[index] = {
|
37
37
|
current: radioOptionRef,
|
38
38
|
};
|
39
|
-
}, key: `${option.value}`, name: name, visual: option.visual, label: option.label, value: option.value, checked: isSelected, onChange: onChange, displayType: displayType, isError: error, fallbackStyle: fallbackStyle, bodyCopy: option.bodyCopy }));
|
39
|
+
}, key: `${option.value}`, name: name, visual: option.visual, icon: option.icon, iconPosition: option.iconPosition, label: option.label, value: option.value, checked: isSelected, onChange: onChange, displayType: displayType, isError: error, fallbackStyle: fallbackStyle, bodyCopy: option.bodyCopy }));
|
40
40
|
}))));
|
41
41
|
};
|
42
42
|
export const RadioGroup = forwardRef(RadioGroupComponent);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAEZ,UAAU,EAGV,mBAAmB,EACnB,MAAM,GACP,MAAM,OAAO,CAAA;AACd,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAE7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;
|
1
|
+
{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAEZ,UAAU,EAGV,mBAAmB,EACnB,MAAM,GACP,MAAM,OAAO,CAAA;AACd,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAE7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAqBtC,MAAM,mBAAmB,GAAG,CAC1B,EASyB,EACzB,GAAoC,EACpC,EAAE;QAXF,EACE,OAAO,EACP,QAAQ,EACR,KAAK,EACL,WAAW,GAAG,QAAQ,EACtB,aAAa,GAAG,KAAK,EACrB,KAAK,GAAG,KAAK,EACb,aAAa,GAAG,KAAK,OAEE,EADpB,UAAU,cARf,0FASC,CADc;IAIf,MAAM,IAAI,GAAG,WAAW,EAAE,CAAA;IAE1B,MAAM,UAAU,GAAG,MAAM,CAAgC,EAAE,CAAC,CAAA;IAC5D,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE;QAC5B,OAAO;YACL,KAAK,EAAE,GAAG,EAAE;;gBACV,MAAM,aAAa,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,CAAA;gBAEvE,MAAM,cAAc,GAAG,aAAa,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAA;gBAC/D,MAAA,UAAU,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA;YACrD,CAAC;SACF,CAAA;IACH,CAAC,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,QAAQ,kBAAC,aAAa,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,IAAM,UAAU;QAClE,oBAAC,aAAa,IAAC,WAAW,EAAE,WAAW,IACpC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YAC7B,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,KAAK,KAAK,CAAA;YAEzC,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,CAAC,cAAc,EAAE,EAAE;oBACtB,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG;wBAC1B,OAAO,EAAE,cAAc;qBACxB,CAAA;gBACH,CAAC,EACD,GAAG,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,EACtB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,CAAC,MAAM,EACrB,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,YAAY,EAAE,MAAM,CAAC,YAAY,EACjC,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,KAAK,EACd,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,MAAM,CAAC,QAAQ,GACzB,CACH,CAAA;QACH,CAAC,CAAC,CACY,CACP,CACZ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC,mBAAmB,CAIhC,CAAA;AAExB,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAsC;;SAE7D,QAAQ;;IAEb,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE;IACpB,IAAI,WAAW,KAAK,iBAAiB,EAAE;QACrC,OAAO;;;OAGN,CAAA;KACF;IAED,OAAO,yBAAyB,CAAA;AAClC,CAAC;CACF,CAAA"}
|
@@ -4,6 +4,8 @@ declare const _default: {
|
|
4
4
|
component: <Value extends import("./types").BaseValueType = import("./types").BaseValueType>(p: {
|
5
5
|
options: {
|
6
6
|
visual?: string | undefined;
|
7
|
+
icon?: string | undefined;
|
8
|
+
iconPosition?: import("./types").IconPosition | undefined;
|
7
9
|
label: string;
|
8
10
|
value: Value;
|
9
11
|
bodyCopy?: string | undefined;
|
@@ -27,3 +29,4 @@ export declare const Horizontal: any;
|
|
27
29
|
export declare const WithBodyCopy: any;
|
28
30
|
export declare const WithError: any;
|
29
31
|
export declare const WithVisual: any;
|
32
|
+
export declare const Withicon: any;
|
@@ -41,4 +41,6 @@ export const WithError = Template.bind({});
|
|
41
41
|
WithError.args = Object.assign(Object.assign({}, defaultArgs), { error: true, errorMsg: 'something', displayType: 'horizontal-card' });
|
42
42
|
export const WithVisual = Template.bind({});
|
43
43
|
WithVisual.args = Object.assign(Object.assign({}, defaultArgs), { options: options.map((option) => (Object.assign(Object.assign({}, option), { visual: visualSvg }))), displayType: 'horizontal-card' });
|
44
|
+
export const Withicon = Template.bind({});
|
45
|
+
Withicon.args = Object.assign(Object.assign({}, defaultArgs), { options: options.map((option) => (Object.assign(Object.assign({}, option), { icon: 'card', iconPosition: 'center' }))), displayType: 'horizontal-card' });
|
44
46
|
//# sourceMappingURL=RadioGroup.stories.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"RadioGroup.stories.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroup.stories.tsx"],"names":[],"mappings":"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"}
|
1
|
+
{"version":3,"file":"RadioGroup.stories.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroup.stories.tsx"],"names":[],"mappings":"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"}
|
@@ -1,8 +1,10 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import { BaseValueType, DisplayType } from './types';
|
2
|
+
import { BaseValueType, DisplayType, IconPosition } from './types';
|
3
3
|
type RadioItemProps = {
|
4
4
|
name: string;
|
5
5
|
visual?: string;
|
6
|
+
icon?: string;
|
7
|
+
iconPosition?: IconPosition;
|
6
8
|
value: BaseValueType;
|
7
9
|
label: string;
|
8
10
|
checked: boolean;
|
@@ -6,11 +6,14 @@ import { RadioElement } from './RadioElement';
|
|
6
6
|
import { Text } from '../Text';
|
7
7
|
import { ITEM_GAP } from './constants';
|
8
8
|
import { Box } from '../Box';
|
9
|
-
|
9
|
+
import { Icon } from '../Icon';
|
10
|
+
export const RadioItem = forwardRef(function RadioItem({ name, visual, icon, iconPosition = 'center', label, value, checked, onChange, displayType, isError, fallbackStyle, bodyCopy, }, ref) {
|
10
11
|
const id = useUniqueId();
|
11
12
|
return (React.createElement(Wrapper, { htmlFor: id, checked: checked, displayType: displayType, "data-testid": value, isError: isError, fallbackStyle: fallbackStyle },
|
12
|
-
visual && (React.createElement(VisualWrapper, null,
|
13
|
+
visual && !icon && (React.createElement(VisualWrapper, null,
|
13
14
|
React.createElement(Visual, { visualUrl: visual }))),
|
15
|
+
!visual && icon && (React.createElement(IconWrapper, { iconPosition: iconPosition },
|
16
|
+
React.createElement(Icon, { render: icon, size: 24 }))),
|
14
17
|
React.createElement(Box, { flex: true, alignItems: "center" },
|
15
18
|
React.createElement(RadioElement, { ref: ref, name: name, id: id, value: value, checked: checked, onChange: onChange, isError: isError, mr: "8px" }),
|
16
19
|
React.createElement(Box, null,
|
@@ -23,6 +26,20 @@ const VisualWrapper = styled.div `
|
|
23
26
|
max-width: 120px;
|
24
27
|
margin: 0 auto 8px;
|
25
28
|
`;
|
29
|
+
const IconWrapper = styled.div `
|
30
|
+
display: flex;
|
31
|
+
padding-bottom: 12px;
|
32
|
+
|
33
|
+
${({ iconPosition }) => iconPosition === 'center' &&
|
34
|
+
css `
|
35
|
+
justify-content: center;
|
36
|
+
`}
|
37
|
+
|
38
|
+
${({ iconPosition }) => iconPosition === 'start' &&
|
39
|
+
css `
|
40
|
+
justify-content: flex-start;
|
41
|
+
`}
|
42
|
+
`;
|
26
43
|
const Visual = styled.div `
|
27
44
|
width: 100%;
|
28
45
|
padding-top: 100%;
|
@@ -37,39 +54,38 @@ const Wrapper = styled.label `
|
|
37
54
|
cursor: pointer;
|
38
55
|
|
39
56
|
${({ displayType, checked, isError, fallbackStyle }) => css `
|
40
|
-
|
41
|
-
displayType === 'vertical-card') &&
|
57
|
+
${(displayType === 'horizontal-card' || displayType === 'vertical-card') &&
|
42
58
|
css `
|
43
|
-
|
44
|
-
|
59
|
+
border-radius: 12px;
|
60
|
+
background-color: ${fallbackStyle
|
45
61
|
? theme.colors.cream
|
46
62
|
: theme.colors.custard};
|
47
|
-
|
48
|
-
|
63
|
+
padding: ${checked ? '10px' : '12px'};
|
64
|
+
border: ${checked &&
|
49
65
|
(isError
|
50
66
|
? `2px solid ${theme.colors.strawberry}`
|
51
67
|
: `2px solid ${theme.colors.liquorice}`)};
|
52
68
|
|
53
|
-
|
54
|
-
|
69
|
+
&:hover {
|
70
|
+
background-color: ${fallbackStyle
|
55
71
|
? theme.colors.coconut
|
56
72
|
: theme.colors.oatmeal};
|
57
|
-
|
58
|
-
|
59
|
-
|
73
|
+
}
|
74
|
+
`}
|
75
|
+
${displayType === 'horizontal-card' &&
|
60
76
|
css `
|
61
|
-
|
62
|
-
|
77
|
+
width: 100%;
|
78
|
+
justify-content: center;
|
63
79
|
|
64
|
-
|
65
|
-
|
66
|
-
|
80
|
+
@media (min-width: 420px) {
|
81
|
+
width: calc(50% - ${ITEM_GAP / 2}px);
|
82
|
+
}
|
67
83
|
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
`}
|
84
|
+
@media (min-width: 768px) {
|
85
|
+
width: 201px;
|
86
|
+
}
|
72
87
|
`}
|
88
|
+
`}
|
73
89
|
`;
|
74
90
|
const RadioText = styled.span `
|
75
91
|
line-height: 16px;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"RadioItem.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;
|
1
|
+
{"version":3,"file":"RadioItem.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioItem.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@mrshmllw/smores-react",
|
3
|
-
"version": "3.0.
|
3
|
+
"version": "3.0.2",
|
4
4
|
"main": "./dist/index.js",
|
5
5
|
"description": "Collection of React components used by Marshmallow Technology",
|
6
6
|
"keywords": [
|
@@ -56,7 +56,7 @@
|
|
56
56
|
"babel-jest": "^29.0.2",
|
57
57
|
"babel-loader": "^9.1.0",
|
58
58
|
"eslint": "^7.9.0",
|
59
|
-
"eslint-config-prettier": "^
|
59
|
+
"eslint-config-prettier": "^9.0.0",
|
60
60
|
"eslint-plugin-jest": "^27.0.1",
|
61
61
|
"eslint-plugin-react": "^7.29.2",
|
62
62
|
"eslint-plugin-react-hooks": "^4.1.2",
|