@aic-kits/react 0.0.21 → 0.1.0
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/components/Art/BrandArt.d.ts +3 -0
- package/dist/components/Art/EmojiArt.d.ts +3 -0
- package/dist/components/Art/IconArt.d.ts +3 -0
- package/dist/components/Art/ImageArt.d.ts +3 -0
- package/dist/components/Art/SvgArt.d.ts +3 -0
- package/dist/components/Art/index.d.ts +11 -0
- package/dist/components/Art/types.d.ts +75 -0
- package/dist/components/Art/utils.d.ts +16 -0
- package/dist/components/Base/BaseFooter.d.ts +8 -0
- package/dist/components/Base/index.d.ts +4 -0
- package/dist/components/Base/types.d.ts +44 -0
- package/dist/components/Button/StyledButton.d.ts +25 -0
- package/dist/components/Button/index.d.ts +54 -0
- package/dist/components/Button/utils.d.ts +3 -0
- package/dist/components/Loading/StyledLoading.d.ts +10 -0
- package/dist/components/Loading/index.d.ts +4 -0
- package/dist/components/Loading/types.d.ts +28 -0
- package/dist/components/Touchable/index.d.ts +4 -0
- package/dist/components/Touchable/types.d.ts +21 -0
- package/dist/components/index.d.ts +5 -0
- package/dist/index.cjs +96 -25
- package/dist/index.js +3551 -3032
- package/dist/theme/components/art.d.ts +5 -0
- package/dist/theme/components/base.d.ts +8 -0
- package/dist/theme/components/button.d.ts +12 -0
- package/dist/theme/components/index.d.ts +19 -0
- package/dist/theme/components/loading.d.ts +16 -0
- package/dist/theme/components/touchable.d.ts +14 -0
- package/dist/theme/getTheme.d.ts +10 -21
- package/dist/theme/index.d.ts +2 -0
- package/package.json +2 -2
- package/dist/components/Example.d.ts +0 -0
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { BrandArt as Brand } from './BrandArt';
|
|
3
|
+
import { EmojiArt as Emoji } from './EmojiArt';
|
|
4
|
+
import { IconArt as Icon } from './IconArt';
|
|
5
|
+
import { ImageArt as Image } from './ImageArt';
|
|
6
|
+
import { SvgArt as Svg } from './SvgArt';
|
|
7
|
+
import { ArtProps } from './types';
|
|
8
|
+
export declare const Art: (props: ArtProps) => React.ReactElement;
|
|
9
|
+
export * from './types';
|
|
10
|
+
export * from './utils';
|
|
11
|
+
export { Image, Svg, Emoji, Icon, Brand };
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { BoxProps } from '../Box';
|
|
3
|
+
export interface BaseArtProps extends BoxProps {
|
|
4
|
+
/**
|
|
5
|
+
* Width of the art
|
|
6
|
+
*/
|
|
7
|
+
width?: string | number;
|
|
8
|
+
/**
|
|
9
|
+
* Height of the art
|
|
10
|
+
*/
|
|
11
|
+
height?: string | number;
|
|
12
|
+
/**
|
|
13
|
+
* Testing id of the component
|
|
14
|
+
*/
|
|
15
|
+
'data-testid'?: string;
|
|
16
|
+
/**
|
|
17
|
+
* Additional styles
|
|
18
|
+
*/
|
|
19
|
+
style?: React.CSSProperties;
|
|
20
|
+
}
|
|
21
|
+
export interface IconArtProps extends BaseArtProps {
|
|
22
|
+
/**
|
|
23
|
+
* Type of the art
|
|
24
|
+
*/
|
|
25
|
+
type?: 'icon';
|
|
26
|
+
/**
|
|
27
|
+
* Icon name
|
|
28
|
+
*/
|
|
29
|
+
art: string;
|
|
30
|
+
/**
|
|
31
|
+
* Color of the icon
|
|
32
|
+
*/
|
|
33
|
+
color?: string;
|
|
34
|
+
}
|
|
35
|
+
export interface EmojiArtProps extends BaseArtProps {
|
|
36
|
+
/**
|
|
37
|
+
* Type of the art
|
|
38
|
+
*/
|
|
39
|
+
type?: 'emoji';
|
|
40
|
+
/**
|
|
41
|
+
* Emoji character
|
|
42
|
+
*/
|
|
43
|
+
art: string;
|
|
44
|
+
}
|
|
45
|
+
export interface SvgArtProps extends BaseArtProps {
|
|
46
|
+
/**
|
|
47
|
+
* Type of the art
|
|
48
|
+
*/
|
|
49
|
+
type?: 'svg';
|
|
50
|
+
/**
|
|
51
|
+
* SVG content
|
|
52
|
+
*/
|
|
53
|
+
art: string;
|
|
54
|
+
}
|
|
55
|
+
export interface ImageArtProps extends BaseArtProps {
|
|
56
|
+
/**
|
|
57
|
+
* Type of the art
|
|
58
|
+
*/
|
|
59
|
+
type?: 'image';
|
|
60
|
+
/**
|
|
61
|
+
* Image URL
|
|
62
|
+
*/
|
|
63
|
+
art: string;
|
|
64
|
+
}
|
|
65
|
+
export interface BrandArtProps extends BaseArtProps {
|
|
66
|
+
/**
|
|
67
|
+
* Type of the art
|
|
68
|
+
*/
|
|
69
|
+
type: 'brand';
|
|
70
|
+
/**
|
|
71
|
+
* Brand name
|
|
72
|
+
*/
|
|
73
|
+
art: string;
|
|
74
|
+
}
|
|
75
|
+
export type ArtProps = IconArtProps | EmojiArtProps | SvgArtProps | ImageArtProps | BrandArtProps;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Check if an art is an emoji
|
|
3
|
+
*/
|
|
4
|
+
export declare const isEmoji: (art: string) => boolean;
|
|
5
|
+
/**
|
|
6
|
+
* Check if an art is an icon
|
|
7
|
+
*/
|
|
8
|
+
export declare const isIcon: (art: string) => boolean;
|
|
9
|
+
/**
|
|
10
|
+
* Check if an art is an image
|
|
11
|
+
*/
|
|
12
|
+
export declare const isImage: (art: string) => boolean;
|
|
13
|
+
/**
|
|
14
|
+
* Check if an art is an SVG
|
|
15
|
+
*/
|
|
16
|
+
export declare const isSvg: (art: string) => boolean;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { Color } from '../../theme';
|
|
3
|
+
import { BaseFooterProps } from './types';
|
|
4
|
+
interface FooterProps extends BaseFooterProps {
|
|
5
|
+
backgroundColor?: Color;
|
|
6
|
+
}
|
|
7
|
+
export declare const BaseFooter: React.FC<FooterProps>;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { Color } from '../../theme';
|
|
3
|
+
import { BoxProps } from '../Box';
|
|
4
|
+
export type BaseButtonParams = {
|
|
5
|
+
/**
|
|
6
|
+
* The title of the button
|
|
7
|
+
*/
|
|
8
|
+
title: string;
|
|
9
|
+
/**
|
|
10
|
+
* The onPress event handler
|
|
11
|
+
*/
|
|
12
|
+
onClick?: React.MouseEventHandler<HTMLButtonElement>;
|
|
13
|
+
/**
|
|
14
|
+
* The loading state of the button
|
|
15
|
+
*
|
|
16
|
+
* @default false
|
|
17
|
+
*/
|
|
18
|
+
loading?: boolean;
|
|
19
|
+
};
|
|
20
|
+
export interface BaseFooterProps {
|
|
21
|
+
/**
|
|
22
|
+
* The params for the primary button
|
|
23
|
+
*/
|
|
24
|
+
primaryButton?: BaseButtonParams;
|
|
25
|
+
/**
|
|
26
|
+
* The params for the secondary button
|
|
27
|
+
*/
|
|
28
|
+
secondaryButton?: BaseButtonParams;
|
|
29
|
+
}
|
|
30
|
+
export interface BaseProps extends BoxProps, BaseFooterProps {
|
|
31
|
+
/**
|
|
32
|
+
* The background color of the Base component
|
|
33
|
+
*/
|
|
34
|
+
backgroundColor?: Color;
|
|
35
|
+
/**
|
|
36
|
+
* The params for the header
|
|
37
|
+
*/
|
|
38
|
+
header?: {
|
|
39
|
+
title?: string;
|
|
40
|
+
showBackButton?: boolean;
|
|
41
|
+
onBackButtonClick?: React.MouseEventHandler<HTMLButtonElement>;
|
|
42
|
+
backgroundColor?: Color;
|
|
43
|
+
} | false;
|
|
44
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { Color } from '../../theme/common';
|
|
2
|
+
type ButtonContainerProps = {
|
|
3
|
+
backgroundColor: Color | 'disabled';
|
|
4
|
+
borderRadius: string;
|
|
5
|
+
};
|
|
6
|
+
declare const StyledButtonContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ButtonContainerProps>> & string;
|
|
7
|
+
type ButtonTextProps = {
|
|
8
|
+
themeColor: Color | 'disabled';
|
|
9
|
+
themeTextColor?: Color;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
};
|
|
12
|
+
declare const StyledButtonText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').TextProps & {
|
|
13
|
+
useRichText?: boolean;
|
|
14
|
+
}, ButtonTextProps>> & string & Omit<(props: import('..').TextProps & {
|
|
15
|
+
useRichText?: boolean;
|
|
16
|
+
}) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
|
|
17
|
+
type ButtonIconWrapperProps = {
|
|
18
|
+
themePosition: 'left' | 'right';
|
|
19
|
+
};
|
|
20
|
+
declare const StyledButtonIconWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').BoxProps & {
|
|
21
|
+
ref?: import('react').ForwardedRef<HTMLDivElement>;
|
|
22
|
+
}, ButtonIconWrapperProps>> & string & Omit<(props: import('..').BoxProps & {
|
|
23
|
+
ref?: import('react').ForwardedRef<HTMLDivElement>;
|
|
24
|
+
}) => ReturnType<({ children, style, "data-testid": testId, ...otherProps }: import('..').BoxProps, ref: import('react').ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element>, keyof import('react').Component<any, {}, any>>;
|
|
25
|
+
export { StyledButtonContainer, StyledButtonText, StyledButtonIconWrapper, };
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { Color } from '../../theme/common';
|
|
3
|
+
export interface ButtonProps {
|
|
4
|
+
/**
|
|
5
|
+
* Disable state of button.
|
|
6
|
+
*/
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* Places an icon within the button, before the button's text
|
|
10
|
+
*/
|
|
11
|
+
icon?: React.ReactNode;
|
|
12
|
+
/**
|
|
13
|
+
* Visual color to apply to button.
|
|
14
|
+
*/
|
|
15
|
+
color?: Color;
|
|
16
|
+
/**
|
|
17
|
+
* Visual color to apply to button's text.
|
|
18
|
+
*/
|
|
19
|
+
textColor?: Color;
|
|
20
|
+
/**
|
|
21
|
+
* Loading state of button.
|
|
22
|
+
*/
|
|
23
|
+
loading?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Set the handler to handle click event.
|
|
26
|
+
*/
|
|
27
|
+
onClick?: React.MouseEventHandler<HTMLButtonElement>;
|
|
28
|
+
/**
|
|
29
|
+
* Places an icon within the button, after the button's text
|
|
30
|
+
*/
|
|
31
|
+
rightIcon?: React.ReactNode;
|
|
32
|
+
/**
|
|
33
|
+
* Corner style of button.
|
|
34
|
+
*/
|
|
35
|
+
corner?: 'circle' | 'rounded' | 'square';
|
|
36
|
+
/**
|
|
37
|
+
* Additional style.
|
|
38
|
+
*/
|
|
39
|
+
style?: React.CSSProperties;
|
|
40
|
+
/**
|
|
41
|
+
* Testing id of the component.
|
|
42
|
+
*/
|
|
43
|
+
'data-testid'?: string;
|
|
44
|
+
/**
|
|
45
|
+
* Button text.
|
|
46
|
+
*/
|
|
47
|
+
text: React.ReactNode;
|
|
48
|
+
/**
|
|
49
|
+
* For flex layout
|
|
50
|
+
*/
|
|
51
|
+
flex?: number | string;
|
|
52
|
+
}
|
|
53
|
+
export declare const Button: ({ disabled, icon, color, textColor, loading, onClick, rightIcon, corner, style, "data-testid": testId, text, ...rest }: ButtonProps) => React.ReactElement;
|
|
54
|
+
export * from './utils';
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export declare const StyledLoadingContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('..').BoxProps & {
|
|
2
|
+
ref?: import('react').ForwardedRef<HTMLDivElement>;
|
|
3
|
+
}, never>> & string & Omit<(props: import('..').BoxProps & {
|
|
4
|
+
ref?: import('react').ForwardedRef<HTMLDivElement>;
|
|
5
|
+
}) => ReturnType<({ children, style, "data-testid": testId, ...otherProps }: import('..').BoxProps, ref: import('react').ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element>, keyof import('react').Component<any, {}, any>>;
|
|
6
|
+
export declare const StyledSpinner: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
7
|
+
size: string;
|
|
8
|
+
color: string;
|
|
9
|
+
strokeWidth: string;
|
|
10
|
+
}>> & string;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { Color } from '../../theme';
|
|
3
|
+
import { LoadingSize } from '../../theme/components/loading';
|
|
4
|
+
import { BoxProps } from '../Box';
|
|
5
|
+
export interface LoadingProps extends BoxProps {
|
|
6
|
+
/**
|
|
7
|
+
* Size of the loading indicator
|
|
8
|
+
*/
|
|
9
|
+
size: LoadingSize | string;
|
|
10
|
+
/**
|
|
11
|
+
* Loading state of the loading indicator
|
|
12
|
+
* @default true
|
|
13
|
+
*/
|
|
14
|
+
loading?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Color of the loading indicator
|
|
17
|
+
* @default 'primary'
|
|
18
|
+
*/
|
|
19
|
+
color?: Color;
|
|
20
|
+
/**
|
|
21
|
+
* Children of the loading indicator (will be shown when loading is false)
|
|
22
|
+
*/
|
|
23
|
+
children?: React.ReactNode;
|
|
24
|
+
/**
|
|
25
|
+
* Test ID for testing
|
|
26
|
+
*/
|
|
27
|
+
'data-testid'?: string;
|
|
28
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { TouchableHapticFeedbackType } from '../../theme';
|
|
3
|
+
import { BoxProps } from '../Box';
|
|
4
|
+
export interface TouchableProps extends React.HTMLAttributes<HTMLDivElement>, BoxProps {
|
|
5
|
+
/**
|
|
6
|
+
* Haptic feedback type (not used in web, but kept for API compatibility)
|
|
7
|
+
*/
|
|
8
|
+
hapticFeedback?: TouchableHapticFeedbackType;
|
|
9
|
+
/**
|
|
10
|
+
* Touchable's content.
|
|
11
|
+
*/
|
|
12
|
+
children?: React.ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* Additional styles.
|
|
15
|
+
*/
|
|
16
|
+
style?: React.CSSProperties;
|
|
17
|
+
/**
|
|
18
|
+
* Testing id of the component.
|
|
19
|
+
*/
|
|
20
|
+
'data-testid'?: string;
|
|
21
|
+
}
|