@itcase/ui-react-native 1.10.91 → 1.10.94
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/.storybook-react-native/preview.tsx +68 -32
- package/.storybook-react-native-web/main.ts +9 -2
- package/.storybook-react-native-web/preview.tsx +63 -55
- package/package.json +16 -16
- package/src/components/Avatar/Avatar.interface.ts +5 -5
- package/src/components/Avatar/index.ts +4 -4
- package/src/components/Avatar/stories/AvatarStories.config.ts +1 -4
- package/src/components/Avatar/styles/avatarShape.ts +2 -2
- package/src/components/Avatar/styles/avatarSize.ts +2 -2
- package/src/components/AvatarStack/AvatarStack.interface.ts +4 -4
- package/src/components/AvatarStack/index.ts +2 -2
- package/src/components/AvatarStack/stories/AvatarStackDemo.stories.tsx +2 -3
- package/src/components/AvatarStack/stories/AvatarStackStories.config.ts +20 -7
- package/src/components/AvatarStack/styles/avatarStackDirection.ts +2 -2
- package/src/components/Badge/Badge.interface.ts +6 -6
- package/src/components/Badge/index.ts +6 -6
- package/src/components/Badge/stories/BadgeStories.config.ts +1 -1
- package/src/components/Badge/styles/badgeShape.ts +2 -2
- package/src/components/Badge/styles/badgeSize.ts +2 -2
- package/src/components/Badge/styles/badgeType.ts +2 -2
- package/src/components/Breadcrumbs/Breadcrumbs.interface.ts +2 -2
- package/src/components/Breadcrumbs/index.ts +2 -2
- package/src/components/Breadcrumbs/styles/breadcrumbsSize.ts +2 -2
- package/src/components/Button/Button.interface.ts +5 -5
- package/src/components/Button/index.ts +4 -4
- package/src/components/Button/stories/ButtonStories.config.ts +4 -4
- package/src/components/Button/styles/buttonShape.ts +2 -2
- package/src/components/Button/styles/buttonSize.ts +2 -2
- package/src/components/Button/styles/buttonText.ts +2 -2
- package/src/components/Cell/Cell.interface.ts +6 -6
- package/src/components/Cell/index.ts +6 -6
- package/src/components/Cell/styles/cellDirection.ts +2 -2
- package/src/components/Cell/styles/cellShape.ts +2 -2
- package/src/components/Cell/styles/cellSize.ts +2 -2
- package/src/components/Checkbox/Checkbox.interface.ts +8 -8
- package/src/components/Checkbox/index.ts +4 -4
- package/src/components/Checkbox/styles/checkboxAlign.ts +2 -2
- package/src/components/Checkbox/styles/checkboxShape.ts +2 -2
- package/src/components/Checkbox/styles/checkboxSize.ts +2 -2
- package/src/components/Checkmark/Checkmark.interface.ts +4 -4
- package/src/components/Checkmark/index.ts +2 -2
- package/src/components/Checkmark/stories/CheckmarkStories.config.ts +3 -4
- package/src/components/Checkmark/styles/checkmarkSize.ts +2 -2
- package/src/components/Chips/Chips.interface.ts +4 -4
- package/src/components/Chips/index.ts +4 -4
- package/src/components/Chips/stories/ChipsStories.config.ts +1 -1
- package/src/components/Chips/styles/chipsShape.ts +2 -2
- package/src/components/Chips/styles/chipsSize.ts +2 -2
- package/src/components/Choice/Choice.interface.ts +6 -6
- package/src/components/Choice/index.ts +2 -2
- package/src/components/Choice/stories/ChoiceStories.config.tsx +3 -4
- package/src/components/Choice/styles/choiceSize.ts +2 -2
- package/src/components/Code/index.ts +4 -4
- package/src/components/Code/stories/CodeStories.config.ts +3 -4
- package/src/components/Code/styles/codeSize.ts +2 -2
- package/src/components/Code/styles/codeVariant.ts +2 -2
- package/src/components/ColorInput/ColorInput.interface.ts +2 -2
- package/src/components/ColorInput/index.ts +2 -2
- package/src/components/ColorInput/stories/ColorInputStories.config.tsx +3 -4
- package/src/components/ColorInput/styles/colorInputSize.ts +2 -2
- package/src/components/Divider/Divider.interface.ts +4 -4
- package/src/components/Divider/index.ts +4 -4
- package/src/components/Divider/styles/dividerDirection.ts +2 -2
- package/src/components/Divider/styles/dividerSize.ts +2 -2
- package/src/components/Dot/Dot.interface.ts +4 -4
- package/src/components/Dot/index.ts +3 -3
- package/src/components/Dot/styles/dotShape.ts +2 -2
- package/src/components/Dot/styles/dotSize.ts +2 -2
- package/src/components/Drawer/Drawer.interface.ts +2 -2
- package/src/components/Dropdown/Dropdown.interface.ts +6 -6
- package/src/components/Dropdown/index.ts +3 -3
- package/src/components/Dropdown/styles/dropdownItemSize.ts +2 -2
- package/src/components/Group/Group.interface.ts +8 -8
- package/src/components/Group/index.ts +8 -8
- package/src/components/Group/styles/groupAlign.ts +2 -2
- package/src/components/Group/styles/groupDirection.ts +2 -2
- package/src/components/Group/styles/groupJustify.ts +2 -2
- package/src/components/Group/styles/groupWrap.ts +2 -2
- package/src/components/Icon/Icon.interface.ts +10 -10
- package/src/components/Icon/index.ts +4 -4
- package/src/components/Icon/stories/IconStories.config.ts +1 -1
- package/src/components/Icon/styles/iconShape.ts +2 -2
- package/src/components/Icon/styles/iconSize.ts +5 -5
- package/src/components/Input/Input.interface.ts +4 -4
- package/src/components/Input/index.ts +4 -4
- package/src/components/Input/stories/InputStories.config.tsx +3 -4
- package/src/components/Input/styles/inputShape.ts +2 -2
- package/src/components/Input/styles/inputSize.ts +2 -2
- package/src/components/InputNumber/InputNumber.interface.ts +8 -8
- package/src/components/InputNumber/index.ts +4 -4
- package/src/components/InputNumber/styles/inputNumberShape.ts +2 -2
- package/src/components/InputNumber/styles/inputNumberSize.ts +2 -2
- package/src/components/InputPassword/InputPassword.interface.ts +6 -6
- package/src/components/InputPassword/index.ts +4 -4
- package/src/components/InputPassword/styles/inputPasswordShape.ts +2 -2
- package/src/components/InputPassword/styles/inputPasswordSize.ts +2 -2
- package/src/components/Label/Label.interface.ts +2 -2
- package/src/components/Label/index.ts +2 -2
- package/src/components/Label/stories/LabelStories.config.ts +1 -1
- package/src/components/Label/styles/labelShape.ts +2 -2
- package/src/components/List/List.interface.ts +2 -2
- package/src/components/List/index.ts +4 -4
- package/src/components/List/styles/listDirection.ts +2 -2
- package/src/components/List/styles/listSize.ts +2 -2
- package/src/components/Loader/Loader.interface.ts +4 -4
- package/src/components/Loader/index.ts +4 -4
- package/src/components/Loader/stories/LoaderStories.config.ts +3 -4
- package/src/components/Loader/styles/loaderShape.ts +2 -2
- package/src/components/Loader/styles/loaderSize.ts +2 -2
- package/src/components/Logo/Logo.interface.ts +4 -4
- package/src/components/Logo/index.ts +3 -3
- package/src/components/Logo/styles/logoAlign.ts +2 -2
- package/src/components/Logo/styles/logoSize.ts +2 -2
- package/src/components/MenuItem/MenuItem.interface.ts +4 -4
- package/src/components/MenuItem/index.ts +4 -4
- package/src/components/MenuItem/styles/menuItemShape.ts +2 -2
- package/src/components/MenuItem/styles/menuItemSize.ts +2 -2
- package/src/components/Modal/Modal.interface.ts +2 -2
- package/src/components/Pagination/Pagination.interface.ts +3 -3
- package/src/components/Pagination/index.ts +2 -2
- package/src/components/Pagination/styles/paginationSize.ts +2 -2
- package/src/components/Radio/Radio.interface.ts +2 -2
- package/src/components/Radio/index.ts +2 -2
- package/src/components/Radio/styles/radioSize.ts +2 -2
- package/src/components/Search/stories/SearchStories.config.ts +3 -4
- package/src/components/Search/styles/searchShape.ts +2 -2
- package/src/components/Search/styles/searchSize.ts +2 -2
- package/src/components/Segmented/Segmented.interface.ts +6 -6
- package/src/components/Segmented/index.ts +4 -4
- package/src/components/Segmented/styles/segmentedShape.ts +2 -2
- package/src/components/Segmented/styles/segmentedSize.ts +2 -2
- package/src/components/Select/Select.interface.ts +2 -2
- package/src/components/Select/index.ts +2 -2
- package/src/components/Select/stories/SelectStories.config.ts +1 -4
- package/src/components/Select/styles/selectSize.ts +2 -2
- package/src/components/Switch/Switch.interface.ts +4 -4
- package/src/components/Switch/index.ts +4 -4
- package/src/components/Switch/stories/SwitchStories.config.tsx +3 -4
- package/src/components/Switch/styles/switchAlign.ts +2 -2
- package/src/components/Switch/styles/switchSize.ts +2 -2
- package/src/components/Tab/Tab.interface.ts +2 -2
- package/src/components/Tab/index.ts +2 -2
- package/src/components/Tab/styles/tabSize.ts +2 -2
- package/src/components/Textarea/Textarea.interface.ts +4 -4
- package/src/components/Textarea/index.ts +4 -4
- package/src/components/Textarea/styles/textareaShape.ts +2 -2
- package/src/components/Textarea/styles/textareaSize.ts +2 -2
- package/src/components/Tile/Tile.interface.ts +4 -4
- package/src/components/Tile/index.ts +4 -4
- package/src/components/Tile/styles/tileShape.ts +2 -2
- package/src/components/Tile/styles/tileSize.ts +2 -2
- package/src/components/Warning/Warning.interface.ts +4 -4
- package/src/components/Warning/index.ts +4 -4
- package/src/components/Warning/styles/warningShape.ts +2 -2
- package/src/components/Warning/styles/warningSize.ts +2 -2
- package/src/index.tsx +118 -118
|
@@ -92,7 +92,7 @@ const badgeSizeStyles = StyleSheet.create({
|
|
|
92
92
|
|
|
93
93
|
const badgeSizeList = getVariantsPropsList(badgeSizeStyles, 'badge_size_')
|
|
94
94
|
|
|
95
|
-
type
|
|
95
|
+
type BadgeSizePropsType = (typeof badgeSizeList)[number]
|
|
96
96
|
|
|
97
97
|
export { badgeSizeList, badgeSizeStyles }
|
|
98
|
-
export type {
|
|
98
|
+
export type { BadgeSizePropsType }
|
|
@@ -24,7 +24,7 @@ const badgeTypeList = [
|
|
|
24
24
|
|
|
25
25
|
const badgeTypeStyleList = getVariantsPropsList(badgeTypeStyles, 'badge_type_')
|
|
26
26
|
|
|
27
|
-
type
|
|
27
|
+
type BadgeTypePropsType = (typeof badgeTypeList)[number]
|
|
28
28
|
|
|
29
29
|
export { badgeTypeList, badgeTypeStyleList, badgeTypeStyles }
|
|
30
|
-
export type {
|
|
30
|
+
export type { BadgeTypePropsType }
|
|
@@ -9,7 +9,7 @@ import type {
|
|
|
9
9
|
TextSizeProps,
|
|
10
10
|
} from '@itcase/types-ui'
|
|
11
11
|
|
|
12
|
-
import type {
|
|
12
|
+
import type { BreadcrumbsSizePropsType } from './styles/breadcrumbsSize'
|
|
13
13
|
|
|
14
14
|
interface BreadcrumbsItem {
|
|
15
15
|
onPress?: () => void
|
|
@@ -20,7 +20,7 @@ interface BreadcrumbsAppearanceProps {
|
|
|
20
20
|
fill?: FillProps
|
|
21
21
|
labelTextColor?: TextColorProps
|
|
22
22
|
labelTextSize?: TextSizeProps
|
|
23
|
-
size?:
|
|
23
|
+
size?: BreadcrumbsSizePropsType
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
type BreadcrumbsAppearanceKey = CompositeAppearanceKeys
|
|
@@ -8,7 +8,7 @@ import type {
|
|
|
8
8
|
BreadcrumbsProps,
|
|
9
9
|
} from './Breadcrumbs.interface'
|
|
10
10
|
import { breadcrumbsSizeList } from './styles/breadcrumbsSize'
|
|
11
|
-
import type {
|
|
11
|
+
import type { BreadcrumbsSizePropsType } from './styles/breadcrumbsSize'
|
|
12
12
|
|
|
13
13
|
export {
|
|
14
14
|
Breadcrumbs,
|
|
@@ -22,5 +22,5 @@ export type {
|
|
|
22
22
|
BreadcrumbsConfig,
|
|
23
23
|
BreadcrumbsItem,
|
|
24
24
|
BreadcrumbsProps,
|
|
25
|
-
|
|
25
|
+
BreadcrumbsSizePropsType,
|
|
26
26
|
}
|
|
@@ -22,7 +22,7 @@ const breadcrumbsSizeList = getVariantsPropsList(
|
|
|
22
22
|
'breadcrumbs_size_',
|
|
23
23
|
)
|
|
24
24
|
|
|
25
|
-
type
|
|
25
|
+
type BreadcrumbsSizePropsType = (typeof breadcrumbsSizeList)[number]
|
|
26
26
|
|
|
27
27
|
export { breadcrumbsSizeList, breadcrumbsSizeStyles }
|
|
28
|
-
export type {
|
|
28
|
+
export type { BreadcrumbsSizePropsType }
|
|
@@ -26,8 +26,8 @@ import type {
|
|
|
26
26
|
} from '@itcase/types-ui'
|
|
27
27
|
|
|
28
28
|
import type { ComponentGalleryArgs } from '../../storybook'
|
|
29
|
-
import type {
|
|
30
|
-
import type {
|
|
29
|
+
import type { ButtonShapePropsType } from './styles/buttonShape'
|
|
30
|
+
import type { ButtonSizePropsType } from './styles/buttonSize'
|
|
31
31
|
|
|
32
32
|
type ButtonFillDisabledProps =
|
|
33
33
|
| 'accentDisabled'
|
|
@@ -47,7 +47,7 @@ interface ButtonAppearanceProps {
|
|
|
47
47
|
fillDisabled?: ButtonFillDisabledProps
|
|
48
48
|
loaderColor?: ColorValue
|
|
49
49
|
shape?: ShapeProps
|
|
50
|
-
size?:
|
|
50
|
+
size?: ButtonSizePropsType
|
|
51
51
|
textColor?: TextColorProps
|
|
52
52
|
textColorDisabled?: TextColorProps
|
|
53
53
|
textSize?: TextSizeProps
|
|
@@ -85,8 +85,8 @@ interface ButtonProps extends ButtonAppearanceProps {
|
|
|
85
85
|
label?: string
|
|
86
86
|
loader?: ReactNode
|
|
87
87
|
loaderColor?: ColorValue
|
|
88
|
-
shape?:
|
|
89
|
-
size?:
|
|
88
|
+
shape?: ButtonShapePropsType
|
|
89
|
+
size?: ButtonSizePropsType
|
|
90
90
|
style?: StyleProp<TextStyle>
|
|
91
91
|
width?: WidthProps
|
|
92
92
|
}
|
|
@@ -8,9 +8,9 @@ import type {
|
|
|
8
8
|
ButtonProps,
|
|
9
9
|
} from './Button.interface'
|
|
10
10
|
import { buttonSizeList } from './styles/buttonSize'
|
|
11
|
-
import type {
|
|
11
|
+
import type { ButtonSizePropsType } from './styles/buttonSize'
|
|
12
12
|
import { buttonTextSizeList } from './styles/buttonText'
|
|
13
|
-
import type {
|
|
13
|
+
import type { ButtonTextSizePropsType } from './styles/buttonText'
|
|
14
14
|
|
|
15
15
|
export {
|
|
16
16
|
Button,
|
|
@@ -25,6 +25,6 @@ export type {
|
|
|
25
25
|
ButtonAppearanceStyle,
|
|
26
26
|
ButtonConfig,
|
|
27
27
|
ButtonProps,
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
ButtonSizePropsType,
|
|
29
|
+
ButtonTextSizePropsType,
|
|
30
30
|
}
|
|
@@ -15,7 +15,7 @@ import { buttonAppearanceSuccess } from '../appearance/buttonSuccess'
|
|
|
15
15
|
import { buttonAppearanceSurface } from '../appearance/buttonSurface'
|
|
16
16
|
import { buttonAppearanceWarning } from '../appearance/buttonWarning'
|
|
17
17
|
import type { ButtonAppearanceKey } from '../Button.interface'
|
|
18
|
-
import type {
|
|
18
|
+
import type { ButtonSizePropsType } from '../styles/buttonSize'
|
|
19
19
|
|
|
20
20
|
const BUTTON_FIGMA_URL =
|
|
21
21
|
'https://www.figma.com/design/HmHn0BShJPXHU8SmuIP71M/ITCase---Atoms?node-id=18-16754'
|
|
@@ -61,7 +61,7 @@ const getButtonTypeIcon = (appearanceSize: string = 'sizeM') =>
|
|
|
61
61
|
? buttonIconsBySizeKey[appearanceSize]
|
|
62
62
|
: icons16.Placeholder.Default
|
|
63
63
|
|
|
64
|
-
const buttonSizeKeys = Object.keys(buttonIconsBySizeKey)
|
|
64
|
+
const buttonSizeKeys = Object.keys(buttonIconsBySizeKey) as ButtonSizeKey[]
|
|
65
65
|
|
|
66
66
|
const buttonSizeByAppearanceSize = {
|
|
67
67
|
sizeXXL: 'xxl',
|
|
@@ -71,11 +71,11 @@ const buttonSizeByAppearanceSize = {
|
|
|
71
71
|
sizeS: 's',
|
|
72
72
|
sizeXS: 'xs',
|
|
73
73
|
sizeXXS: 'xxs',
|
|
74
|
-
} as const satisfies Record<ButtonSizeKey,
|
|
74
|
+
} as const satisfies Record<ButtonSizeKey, ButtonSizePropsType>
|
|
75
75
|
|
|
76
76
|
const getButtonSize = (
|
|
77
77
|
appearanceSize: string = 'sizeM',
|
|
78
|
-
):
|
|
78
|
+
): ButtonSizePropsType =>
|
|
79
79
|
isButtonSizeKey(appearanceSize)
|
|
80
80
|
? buttonSizeByAppearanceSize[appearanceSize]
|
|
81
81
|
: 'm'
|
|
@@ -29,7 +29,7 @@ const buttonShapeStyles = StyleSheet.create({
|
|
|
29
29
|
|
|
30
30
|
const buttonShapeList = getVariantsPropsList(buttonShapeStyles, 'button_shape_')
|
|
31
31
|
|
|
32
|
-
type
|
|
32
|
+
type ButtonShapePropsType = (typeof buttonShapeList)[number]
|
|
33
33
|
|
|
34
34
|
export { buttonShapeList, buttonShapeStyles }
|
|
35
|
-
export type {
|
|
35
|
+
export type { ButtonShapePropsType }
|
|
@@ -36,7 +36,7 @@ const buttonSizeStyles = StyleSheet.create({
|
|
|
36
36
|
|
|
37
37
|
const buttonSizeList = getVariantsPropsList(buttonSizeStyles, 'button_size_')
|
|
38
38
|
|
|
39
|
-
type
|
|
39
|
+
type ButtonSizePropsType = (typeof buttonSizeList)[number]
|
|
40
40
|
|
|
41
41
|
export { buttonSizeList, buttonSizeStyles }
|
|
42
|
-
export type {
|
|
42
|
+
export type { ButtonSizePropsType }
|
|
@@ -22,7 +22,7 @@ const buttonTextSizeList = getVariantsPropsList(
|
|
|
22
22
|
buttonTextStyles,
|
|
23
23
|
'button__text_size_',
|
|
24
24
|
)
|
|
25
|
-
type
|
|
25
|
+
type ButtonTextSizePropsType = (typeof buttonTextSizeList)[number]
|
|
26
26
|
|
|
27
27
|
export { buttonTextSizeList, buttonTextStyles }
|
|
28
|
-
export type {
|
|
28
|
+
export type { ButtonTextSizePropsType }
|
|
@@ -9,16 +9,16 @@ import type {
|
|
|
9
9
|
} from '@itcase/types-ui'
|
|
10
10
|
|
|
11
11
|
import type { GapProps } from '../../styles/gap'
|
|
12
|
-
import type {
|
|
13
|
-
import type {
|
|
14
|
-
import type {
|
|
12
|
+
import type { CellDirectionPropsType } from './styles/cellDirection'
|
|
13
|
+
import type { CellShapePropsType } from './styles/cellShape'
|
|
14
|
+
import type { CellSizePropsType } from './styles/cellSize'
|
|
15
15
|
|
|
16
16
|
interface CellProps {
|
|
17
|
-
direction:
|
|
17
|
+
direction: CellDirectionPropsType
|
|
18
18
|
fill?: FillProps
|
|
19
19
|
gap?: GapProps
|
|
20
|
-
shape?:
|
|
21
|
-
size?:
|
|
20
|
+
shape?: CellShapePropsType
|
|
21
|
+
size?: CellSizePropsType
|
|
22
22
|
style?: StyleProp<TextStyle>
|
|
23
23
|
text?: string
|
|
24
24
|
textColor?: TextColorProps
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { Cell, URLText } from './Cell'
|
|
2
2
|
import type { CellProps, URLTextProps } from './Cell.interface'
|
|
3
3
|
import { cellDirectionList } from './styles/cellDirection'
|
|
4
|
-
import type {
|
|
4
|
+
import type { CellDirectionPropsType } from './styles/cellDirection'
|
|
5
5
|
import { cellShapeList } from './styles/cellShape'
|
|
6
|
-
import type {
|
|
6
|
+
import type { CellShapePropsType } from './styles/cellShape'
|
|
7
7
|
import { cellSizeList } from './styles/cellSize'
|
|
8
|
-
import type {
|
|
8
|
+
import type { CellSizePropsType } from './styles/cellSize'
|
|
9
9
|
|
|
10
10
|
export { Cell, cellDirectionList, cellShapeList, cellSizeList, URLText }
|
|
11
11
|
export type {
|
|
12
|
-
|
|
12
|
+
CellDirectionPropsType,
|
|
13
13
|
CellProps,
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
CellShapePropsType,
|
|
15
|
+
CellSizePropsType,
|
|
16
16
|
URLTextProps,
|
|
17
17
|
}
|
|
@@ -18,7 +18,7 @@ const cellDirectionList = getVariantsPropsList(
|
|
|
18
18
|
'cell_direction_',
|
|
19
19
|
)
|
|
20
20
|
|
|
21
|
-
type
|
|
21
|
+
type CellDirectionPropsType = (typeof cellDirectionList)[number]
|
|
22
22
|
|
|
23
23
|
export { cellDirectionList, cellDirectionStyles }
|
|
24
|
-
export type {
|
|
24
|
+
export type { CellDirectionPropsType }
|
|
@@ -10,7 +10,7 @@ const cellShapeStyles = StyleSheet.create({
|
|
|
10
10
|
|
|
11
11
|
const cellShapeList = getVariantsPropsList(cellShapeStyles, 'cell_shape_')
|
|
12
12
|
|
|
13
|
-
type
|
|
13
|
+
type CellShapePropsType = (typeof cellShapeList)[number]
|
|
14
14
|
|
|
15
15
|
export { cellShapeList, cellShapeStyles }
|
|
16
|
-
export type {
|
|
16
|
+
export type { CellShapePropsType }
|
|
@@ -15,7 +15,7 @@ const cellSizeStyles = StyleSheet.create({
|
|
|
15
15
|
|
|
16
16
|
const cellSizeList = getVariantsPropsList(cellSizeStyles, 'cell_size_')
|
|
17
17
|
|
|
18
|
-
type
|
|
18
|
+
type CellSizePropsType = (typeof cellSizeList)[number]
|
|
19
19
|
|
|
20
20
|
export { cellSizeList, cellSizeStyles }
|
|
21
|
-
export type {
|
|
21
|
+
export type { CellSizePropsType }
|
|
@@ -23,17 +23,17 @@ import type {
|
|
|
23
23
|
|
|
24
24
|
import type { ComponentGalleryArgs } from '../../storybook'
|
|
25
25
|
import type { SvgIconComponent } from '../Icon/Icon.interface'
|
|
26
|
-
import type {
|
|
27
|
-
import type {
|
|
28
|
-
import type {
|
|
29
|
-
import type {
|
|
26
|
+
import type { IconGlyphSizePropsType } from '../Icon/styles/iconSize'
|
|
27
|
+
import type { CheckboxAlignPropsType } from './styles/checkboxAlign'
|
|
28
|
+
import type { CheckboxShapePropsType } from './styles/checkboxShape'
|
|
29
|
+
import type { CheckboxSizePropsType } from './styles/checkboxSize'
|
|
30
30
|
|
|
31
31
|
interface CheckboxAppearanceProps {
|
|
32
32
|
borderColor?: BorderColorProps
|
|
33
33
|
borderColorCheckbox?: BorderColorProps
|
|
34
34
|
borderColorCheckboxActive?: BorderColorActiveProps
|
|
35
35
|
checkboxCheckedIcon?: SvgIconComponent
|
|
36
|
-
checkboxIconSize?:
|
|
36
|
+
checkboxIconSize?: IconGlyphSizePropsType
|
|
37
37
|
descTextColor?: TextColorProps
|
|
38
38
|
descTextSize?: TextSizeProps
|
|
39
39
|
descTextWeight?: TextWeightProps
|
|
@@ -45,8 +45,8 @@ interface CheckboxAppearanceProps {
|
|
|
45
45
|
labelTextColor?: TextColorProps
|
|
46
46
|
labelTextSize?: TextSizeProps
|
|
47
47
|
labelTextWeight?: TextWeightProps
|
|
48
|
-
shape?:
|
|
49
|
-
size?:
|
|
48
|
+
shape?: CheckboxShapePropsType
|
|
49
|
+
size?: CheckboxSizePropsType
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
type CheckboxAppearanceSize = AppearancePartialRecord<
|
|
@@ -65,7 +65,7 @@ interface CheckboxProps extends CheckboxAppearanceProps {
|
|
|
65
65
|
isDisabled?: boolean
|
|
66
66
|
onPress?: (event: GestureResponderEvent) => void
|
|
67
67
|
after?: ReactNode
|
|
68
|
-
align?:
|
|
68
|
+
align?: CheckboxAlignPropsType
|
|
69
69
|
appearance?: CompositeAppearanceStateDefault
|
|
70
70
|
before?: ReactNode
|
|
71
71
|
checked?: boolean
|
|
@@ -11,9 +11,9 @@ import type {
|
|
|
11
11
|
CheckboxProps,
|
|
12
12
|
} from './Checkbox.interface'
|
|
13
13
|
import { checkboxAlignList } from './styles/checkboxAlign'
|
|
14
|
-
import type {
|
|
14
|
+
import type { CheckboxAlignPropsType } from './styles/checkboxAlign'
|
|
15
15
|
import { checkboxSizeList } from './styles/checkboxSize'
|
|
16
|
-
import type {
|
|
16
|
+
import type { CheckboxSizePropsType } from './styles/checkboxSize'
|
|
17
17
|
|
|
18
18
|
export {
|
|
19
19
|
Checkbox,
|
|
@@ -23,7 +23,7 @@ export {
|
|
|
23
23
|
checkboxSizeList,
|
|
24
24
|
}
|
|
25
25
|
export type {
|
|
26
|
-
|
|
26
|
+
CheckboxAlignPropsType,
|
|
27
27
|
CheckboxAppearance,
|
|
28
28
|
CheckboxAppearanceKey,
|
|
29
29
|
CheckboxAppearanceProps,
|
|
@@ -32,5 +32,5 @@ export type {
|
|
|
32
32
|
CheckboxAppearanceStyle,
|
|
33
33
|
CheckboxConfig,
|
|
34
34
|
CheckboxProps,
|
|
35
|
-
|
|
35
|
+
CheckboxSizePropsType,
|
|
36
36
|
}
|
|
@@ -17,7 +17,7 @@ const checkboxAlignList = getVariantsPropsList(
|
|
|
17
17
|
'checkbox_align_',
|
|
18
18
|
)
|
|
19
19
|
|
|
20
|
-
type
|
|
20
|
+
type CheckboxAlignPropsType = (typeof checkboxAlignList)[number]
|
|
21
21
|
|
|
22
22
|
export { checkboxAlignList, checkboxAlignStyles }
|
|
23
|
-
export type {
|
|
23
|
+
export type { CheckboxAlignPropsType }
|
|
@@ -31,7 +31,7 @@ const checkboxShapeList = getVariantsPropsList(
|
|
|
31
31
|
'checkbox_shape_',
|
|
32
32
|
)
|
|
33
33
|
|
|
34
|
-
type
|
|
34
|
+
type CheckboxShapePropsType = (typeof checkboxShapeList)[number]
|
|
35
35
|
|
|
36
36
|
export { checkboxShapeList, checkboxShapeStyles }
|
|
37
|
-
export type {
|
|
37
|
+
export type { CheckboxShapePropsType }
|
|
@@ -70,7 +70,7 @@ const checkboxSizeList = getVariantsPropsList(
|
|
|
70
70
|
'checkbox_size_',
|
|
71
71
|
)
|
|
72
72
|
|
|
73
|
-
type
|
|
73
|
+
type CheckboxSizePropsType = (typeof checkboxSizeList)[number]
|
|
74
74
|
|
|
75
75
|
export { checkboxSizeList, checkboxSizeStyles }
|
|
76
|
-
export type {
|
|
76
|
+
export type { CheckboxSizePropsType }
|
|
@@ -21,8 +21,8 @@ import type {
|
|
|
21
21
|
|
|
22
22
|
import type { ComponentGalleryArgs } from '../../storybook'
|
|
23
23
|
import type { IconProps, SvgIconComponent } from '../Icon/Icon.interface'
|
|
24
|
-
import type {
|
|
25
|
-
import type {
|
|
24
|
+
import type { IconGlyphSizePropsType } from '../Icon/styles/iconSize'
|
|
25
|
+
import type { CheckmarkSizePropsType } from './styles/checkmarkSize'
|
|
26
26
|
|
|
27
27
|
interface CheckmarkAppearanceProps {
|
|
28
28
|
borderColor?: BorderColorProps
|
|
@@ -34,14 +34,14 @@ interface CheckmarkAppearanceProps {
|
|
|
34
34
|
checkmarkFill?: IconProps['fill']
|
|
35
35
|
checkmarkIconFill?: IconProps['iconFill']
|
|
36
36
|
checkmarkIconShape?: IconProps['shape']
|
|
37
|
-
checkmarkIconSize?:
|
|
37
|
+
checkmarkIconSize?: IconGlyphSizePropsType
|
|
38
38
|
checkmarkIconSrc?: IconProps['imageSrc']
|
|
39
39
|
checkmarkNegativeIcon?: SvgIconComponent
|
|
40
40
|
fill?: FillProps
|
|
41
41
|
fillActive?: FillActiveProps
|
|
42
42
|
fillActiveHover?: FillActiveHoverProps
|
|
43
43
|
fillHover?: FillHoverProps
|
|
44
|
-
size?:
|
|
44
|
+
size?: CheckmarkSizePropsType
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
type CheckmarkConfig = AppearanceConfig<
|
|
@@ -11,7 +11,7 @@ import type {
|
|
|
11
11
|
CheckmarkProps,
|
|
12
12
|
} from './Checkmark.interface'
|
|
13
13
|
import { checkmarkSizeList } from './styles/checkmarkSize'
|
|
14
|
-
import type {
|
|
14
|
+
import type { CheckmarkSizePropsType } from './styles/checkmarkSize'
|
|
15
15
|
|
|
16
16
|
export { Checkmark, checkmarkAppearance, checkmarkConfig, checkmarkSizeList }
|
|
17
17
|
export type {
|
|
@@ -23,5 +23,5 @@ export type {
|
|
|
23
23
|
CheckmarkAppearanceStyle,
|
|
24
24
|
CheckmarkConfig,
|
|
25
25
|
CheckmarkProps,
|
|
26
|
-
|
|
26
|
+
CheckmarkSizePropsType,
|
|
27
27
|
}
|
|
@@ -26,10 +26,9 @@ const checkmarkStoryParameters = {
|
|
|
26
26
|
},
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
const checkmarkSizeKeys = Object.keys(checkmarkAppearanceSize)
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
)
|
|
29
|
+
const checkmarkSizeKeys = Object.keys(checkmarkAppearanceSize) as Array<
|
|
30
|
+
keyof typeof checkmarkAppearanceSize
|
|
31
|
+
>
|
|
33
32
|
|
|
34
33
|
const checkmarkTypeOptions = ['default', 'checked', 'negative'] as const
|
|
35
34
|
|
|
@@ -52,7 +52,7 @@ const checkmarkSizeList = getVariantsPropsList(
|
|
|
52
52
|
'checkmark_size_',
|
|
53
53
|
)
|
|
54
54
|
|
|
55
|
-
type
|
|
55
|
+
type CheckmarkSizePropsType = (typeof checkmarkSizeList)[number]
|
|
56
56
|
|
|
57
57
|
export { checkmarkSizeList, checkmarkSizeStyles }
|
|
58
|
-
export type {
|
|
58
|
+
export type { CheckmarkSizePropsType }
|
|
@@ -22,8 +22,8 @@ import type {
|
|
|
22
22
|
|
|
23
23
|
import type { BadgeProps } from '../Badge/Badge.interface'
|
|
24
24
|
import type { IconProps, SvgIconComponent } from '../Icon/Icon.interface'
|
|
25
|
-
import type {
|
|
26
|
-
import type {
|
|
25
|
+
import type { ChipsShapePropsType } from './styles/chipsShape'
|
|
26
|
+
import type { ChipsSizePropsType } from './styles/chipsSize'
|
|
27
27
|
|
|
28
28
|
interface ChipsAppearanceProps {
|
|
29
29
|
badgeAppearance?: BadgeProps['appearance']
|
|
@@ -89,8 +89,8 @@ interface ChipsProps extends ChipsAppearanceProps {
|
|
|
89
89
|
appearance?: CompositeAppearanceKeys
|
|
90
90
|
children?: ReactNode
|
|
91
91
|
label?: string
|
|
92
|
-
shape?:
|
|
93
|
-
size?:
|
|
92
|
+
shape?: ChipsShapePropsType
|
|
93
|
+
size?: ChipsSizePropsType
|
|
94
94
|
style?: StyleProp<ViewStyle>
|
|
95
95
|
}
|
|
96
96
|
|
|
@@ -11,9 +11,9 @@ import type {
|
|
|
11
11
|
ChipsProps,
|
|
12
12
|
} from './Chips.interface'
|
|
13
13
|
import { chipsShapeList } from './styles/chipsShape'
|
|
14
|
-
import type {
|
|
14
|
+
import type { ChipsShapePropsType } from './styles/chipsShape'
|
|
15
15
|
import { chipsSizeList } from './styles/chipsSize'
|
|
16
|
-
import type {
|
|
16
|
+
import type { ChipsSizePropsType } from './styles/chipsSize'
|
|
17
17
|
|
|
18
18
|
export { Chips, chipsAppearance, chipsConfig, chipsShapeList, chipsSizeList }
|
|
19
19
|
export type {
|
|
@@ -25,6 +25,6 @@ export type {
|
|
|
25
25
|
ChipsAppearanceStyle,
|
|
26
26
|
ChipsConfig,
|
|
27
27
|
ChipsProps,
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
ChipsShapePropsType,
|
|
29
|
+
ChipsSizePropsType,
|
|
30
30
|
}
|
|
@@ -56,7 +56,7 @@ type ChipsSizeKey = keyof typeof galleryIconsBySizeKey
|
|
|
56
56
|
const isChipsSizeKey = (value: string): value is ChipsSizeKey =>
|
|
57
57
|
value in galleryIconsBySizeKey
|
|
58
58
|
|
|
59
|
-
const chipsSizeKeys = Object.keys(galleryIconsBySizeKey)
|
|
59
|
+
const chipsSizeKeys = Object.keys(galleryIconsBySizeKey) as ChipsSizeKey[]
|
|
60
60
|
|
|
61
61
|
const chipsTypeOptions = [
|
|
62
62
|
'label',
|
|
@@ -28,7 +28,7 @@ const chipsShapeStyles = StyleSheet.create({
|
|
|
28
28
|
|
|
29
29
|
const chipsShapeList = getVariantsPropsList(chipsShapeStyles, 'chips_shape_')
|
|
30
30
|
|
|
31
|
-
type
|
|
31
|
+
type ChipsShapePropsType = (typeof chipsShapeList)[number]
|
|
32
32
|
|
|
33
33
|
export { chipsShapeList, chipsShapeStyles }
|
|
34
|
-
export type {
|
|
34
|
+
export type { ChipsShapePropsType }
|
|
@@ -59,7 +59,7 @@ const chipsSizeList = getVariantsPropsList(
|
|
|
59
59
|
'chips__inner_size_',
|
|
60
60
|
)
|
|
61
61
|
|
|
62
|
-
type
|
|
62
|
+
type ChipsSizePropsType = (typeof chipsSizeList)[number]
|
|
63
63
|
|
|
64
64
|
export { chipsSizeList, chipsSizeStyles }
|
|
65
|
-
export type {
|
|
65
|
+
export type { ChipsSizePropsType }
|
|
@@ -24,8 +24,8 @@ import type {
|
|
|
24
24
|
|
|
25
25
|
import type { ComponentGalleryArgs } from '../../storybook'
|
|
26
26
|
import type { IconProps, SvgIconComponent } from '../Icon/Icon.interface'
|
|
27
|
-
import type {
|
|
28
|
-
import type {
|
|
27
|
+
import type { IconSizePropsType } from '../Icon/styles/iconSize'
|
|
28
|
+
import type { ChoiceSizePropsType } from './styles/choiceSize'
|
|
29
29
|
|
|
30
30
|
interface ChoiceAppearanceProps {
|
|
31
31
|
borderColor?: BorderColorProps
|
|
@@ -39,7 +39,7 @@ interface ChoiceAppearanceProps {
|
|
|
39
39
|
iconAfterFill?: ItemFillActiveProps
|
|
40
40
|
iconAfterFillActive?: ItemFillActiveProps
|
|
41
41
|
iconAfterFillDisabled?: ItemFillActiveProps
|
|
42
|
-
iconAfterSize?:
|
|
42
|
+
iconAfterSize?: IconSizePropsType
|
|
43
43
|
iconAppearance?: IconProps['appearance']
|
|
44
44
|
iconAppearanceActive?: IconProps['appearance']
|
|
45
45
|
iconBeforeAppearance?: IconProps['appearance']
|
|
@@ -47,18 +47,18 @@ interface ChoiceAppearanceProps {
|
|
|
47
47
|
iconBeforeFill?: ItemFillActiveProps
|
|
48
48
|
iconBeforeFillActive?: ItemFillActiveProps
|
|
49
49
|
iconBeforeFillDisabled?: ItemFillActiveProps
|
|
50
|
-
iconBeforeSize?:
|
|
50
|
+
iconBeforeSize?: IconSizePropsType
|
|
51
51
|
iconFill?: ItemFillActiveProps
|
|
52
52
|
iconFillActive?: ItemFillActiveProps
|
|
53
53
|
iconFillDisabled?: ItemFillActiveProps
|
|
54
|
-
iconSize?:
|
|
54
|
+
iconSize?: IconSizePropsType
|
|
55
55
|
labelTextColor?: TextColorProps
|
|
56
56
|
labelTextColorActive?: TextColorProps
|
|
57
57
|
labelTextColorDisabled?: TextColorProps
|
|
58
58
|
labelTextSize?: TextSizeProps
|
|
59
59
|
labelTextWeight?: TextWeightProps
|
|
60
60
|
shape?: ShapeProps
|
|
61
|
-
size?:
|
|
61
|
+
size?: ChoiceSizePropsType
|
|
62
62
|
wrap?: WrapProps
|
|
63
63
|
}
|
|
64
64
|
|
|
@@ -13,7 +13,7 @@ import type {
|
|
|
13
13
|
ChoiceProps,
|
|
14
14
|
} from './Choice.interface'
|
|
15
15
|
import { choiceSizeList } from './styles/choiceSize'
|
|
16
|
-
import type {
|
|
16
|
+
import type { ChoiceSizePropsType } from './styles/choiceSize'
|
|
17
17
|
|
|
18
18
|
export { Choice, choiceAppearance, choiceConfig, choiceSizeList }
|
|
19
19
|
export type {
|
|
@@ -27,5 +27,5 @@ export type {
|
|
|
27
27
|
ChoiceConfig,
|
|
28
28
|
ChoiceOptionsItem,
|
|
29
29
|
ChoiceProps,
|
|
30
|
-
|
|
30
|
+
ChoiceSizePropsType,
|
|
31
31
|
}
|
|
@@ -58,10 +58,9 @@ const galleryLabelOptions = choiceListMock.choices.map(({ label, value }) => ({
|
|
|
58
58
|
const galleryIconOptions = choiceListIconMock.choices
|
|
59
59
|
const galleryLabelIconOptions = choiceListMock.choices
|
|
60
60
|
|
|
61
|
-
const choiceSizeKeys = Object.keys(choiceAppearanceSize)
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
)
|
|
61
|
+
const choiceSizeKeys = Object.keys(choiceAppearanceSize) as Array<
|
|
62
|
+
keyof typeof choiceAppearanceSize
|
|
63
|
+
>
|
|
65
64
|
|
|
66
65
|
const choiceTypeOptions = ['label', 'icon', 'label-icon'] as const
|
|
67
66
|
|
|
@@ -52,7 +52,7 @@ const choiceSizeStyles = StyleSheet.create({
|
|
|
52
52
|
|
|
53
53
|
const choiceSizeList = getVariantsPropsList(choiceSizeStyles, 'choice_size_')
|
|
54
54
|
|
|
55
|
-
type
|
|
55
|
+
type ChoiceSizePropsType = (typeof choiceSizeList)[number]
|
|
56
56
|
|
|
57
57
|
export { choiceSizeList, choiceSizeStyles }
|
|
58
|
-
export type {
|
|
58
|
+
export type { ChoiceSizePropsType }
|
|
@@ -7,9 +7,9 @@ import type {
|
|
|
7
7
|
CodeProps,
|
|
8
8
|
} from './Code.interface'
|
|
9
9
|
import { codeSizeList } from './styles/codeSize'
|
|
10
|
-
import type {
|
|
10
|
+
import type { CodeSizePropsType } from './styles/codeSize'
|
|
11
11
|
import { codeVariantList } from './styles/codeVariant'
|
|
12
|
-
import type {
|
|
12
|
+
import type { CodeVariantPropsType } from './styles/codeVariant'
|
|
13
13
|
|
|
14
14
|
export { Code, codeAppearance, codeConfig, codeSizeList, codeVariantList }
|
|
15
15
|
export type {
|
|
@@ -17,6 +17,6 @@ export type {
|
|
|
17
17
|
CodeAppearanceKey,
|
|
18
18
|
CodeConfig,
|
|
19
19
|
CodeProps,
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
CodeSizePropsType,
|
|
21
|
+
CodeVariantPropsType,
|
|
22
22
|
}
|
|
@@ -10,10 +10,9 @@ import { codeAppearanceStyle } from '../appearance/codeStyle'
|
|
|
10
10
|
import { codeAppearanceSuccess } from '../appearance/codeSuccess'
|
|
11
11
|
import type { CodeAppearanceKey } from '../Code.interface'
|
|
12
12
|
|
|
13
|
-
const codeSizeKeys = Object.keys(codeAppearanceSize)
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
)
|
|
13
|
+
const codeSizeKeys = Object.keys(codeAppearanceSize) as Array<
|
|
14
|
+
keyof typeof codeAppearanceSize
|
|
15
|
+
>
|
|
17
16
|
|
|
18
17
|
const codeGallery = createComponentGallery<CodeAppearanceKey>({
|
|
19
18
|
size: codeAppearanceSize,
|