From 2feeb6a503acf51e6fbc80768c8b70358167a279 Mon Sep 17 00:00:00 2001 From: Rommel Rico Date: Wed, 26 Aug 2020 07:27:53 -0700 Subject: [PATCH 1/8] Initial index.d.ts for galio-framework --- src/index.d.ts | 326 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 326 insertions(+) create mode 100644 src/index.d.ts diff --git a/src/index.d.ts b/src/index.d.ts new file mode 100644 index 0000000..72f5f1c --- /dev/null +++ b/src/index.d.ts @@ -0,0 +1,326 @@ +import React, { ReactNode, ComponentType } from 'react'; +import { + TouchableOpacityProps, + ImageStyle, + ViewStyle, + TextStyle, + SwitchProps as RNSwitchProps, + TextInputProps, +} from 'react-native'; + +declare module 'galio-framework' { + type IconFamilyType = + | 'Galio' + | 'AntDesign' + | 'Entypo' + | 'EvilIcons' + | 'Feather' + | 'FontAwesome' + | 'FontAwesome5' + | 'Fontisto' + | 'Foundation' + | 'Ionicons' + | 'MaterialIcons' + | 'MaterialCommunityIcons' + | 'Octicons' + | 'Zocial' + | 'SimpleLineIcons'; + + type BaseColorType = string; + + type ButtonColorType = string; + + interface BaseProps { + [key: string]: any; + } + + export interface BlockProps extends BaseProps { + bottom?: boolean; + card?: boolean; + center?: boolean; + flex?: boolean | number; + fluid?: boolean; + height?: number; + left?: boolean; + middle?: boolean; + right?: boolean; + row?: boolean; + safe?: boolean; + shadow?: boolean; + shadowColor?: boolean; + space?: string; + top?: boolean; + width?: number; + } + export class Block extends React.Component {} + + export interface ButtonProps extends TouchableOpacityProps, BaseProps { + capitalize?: boolean; + color?: ButtonColorType; + disabled?: boolean; + icon?: string; + iconColor?: boolean | string; + iconFamily?: boolean | string; + iconSize?: number; + loading?: boolean; + loadingSize?: 'small' | 'large'; + lowercase?: boolean; + onlyIcon?: boolean; + opacity?: number; + radius?: number; + shadowColor?: boolean | string; + shadowless?: boolean; + size?: 'small' | 'large' | number; + uppercase?: boolean; + } + export class Button extends React.Component {} + + export interface CardProps extends BaseProps { + card?: boolean; + shadow?: boolean; + borderless?: boolean; + image?: string; + imageBlockStyle?: strubg; + imageStyle?: ImageStyle; + avatar?: string; + location?: string; + locationColor?: boolean | string; + title?: string; + titleColor?: string; + caption?: string; + captionColor?: string; + footerStyle?: ViewStyle; + } + export class Card extends React.Component {} + + export interface CheckBoxProps extends BaseProps { + checkboxStyle?: ViewStyle; + disabled?: boolean; + flexDirection?: ViewStyle['flexDirection']; + iconName?: string; + iconSize?: number; + iconFamily?: IconFamilyType; + image?: string; + imageStyle?: ImageStyle; + initialValue?: boolean; + label?: string; + labelStyle?: TextStyle; + onChange?: () => void; + } + export class CheckBox extends React.Component {} + + export interface DeckSwiperProps extends BaseProps { + style?: ViewStyle; + components?: ReactNode[]; + onSwipeRight?: () => void; + onSwipeLeft?: () => void; + focusedElementStyle?: ViewStyle; + nextElementStyle?: ViewStyle; + } + export class DeckSwiper extends React.Component {} + + export interface IconProps extends BaseProps { + name?: string; + family?: IconFamilyType; + size?: number; + color?: string; + } + export class Icon extends React.Component {} + + export interface InputProps + extends Omit< + TextInputProps, + | 'style' + | 'keyboardType' + | 'secureTextEntry' + | 'placeholderTextColor' + | 'underlineColorAndroid' + >, + BaseProps { + type?: TextInputProps['keyboardType']; + password?: boolean; + label?: string; + bgColor?: string; + rounded?: boolean; + borderless?: boolean; + viewPass?: boolean; + icon?: string; + iconColor?: string; + family?: IconFamilyType; + color?: string; + help?: string; + left?: boolean; + right?: boolean; + topHelp?: boolean; + bottomHelp?: boolean; + iconSize?: number; + } + export class Input extends React.Component {} + + export interface NavBarProps extends BaseProps { + back?: boolean; + transparent?: boolean; + title?: ReactNode; + titleStyle?: ViewStyle; + left?: ReactNode; + leftStyle?: ViewStyle; + leftIconColor?: string; + right?: ReactNode; + rightStyle?: ViewStyle; + onLeftPress?: () => void; + } + export class NavBar extends React.Component {} + + export interface RadioProps extends BaseProps { + color?: string; + containerStyle?: ViewStyle; + radioOuterStyle?: ViewStyle; + radioInnerStyle?: ViewStyle; + flexDirection?: ViewStyle['flexDirection']; + initialValue?: boolean; + label?: string; + labelStyle?: TextStyle; + onChange?: () => void; + } + export class Radio extends React.Component {} + + export interface TextProps extends BaseProps { + h1?: boolean; + h2?: boolean; + h3?: boolean; + h4?: boolean; + h5?: boolean; + p?: boolean; + size?: number; + color?: string; + muted?: boolean; + bold?: boolean; + italic?: boolean; + } + export class Text extends React.Component {} + + export interface ToastProps extends BaseProps { + style?: ViewStyle; + children?: ReactNode; + isShow?: boolean; + positionIndicator?: 'top' | 'center' | 'bottom'; + positionOffset?: number; + fadeInDuration?: number; + fadeOutDuration?: number; + color?: BaseColorType; + round?: boolean; + textStyle?: TextStyle; + } + export class Toast extends React.Component {} + + export interface SliderProps extends BaseProps { + activeColor?: string; + value?: number; + disabled?: boolean; + minimumValue?: number; + maximumValue?: number; + trackStyle?: ViewStyle; + thumbStyle?: ViewStyle; + step?: number; + onSlidingComplete?: () => void; + onSlidingStart?: () => void; + onValueChange?: () => void; + } + export class Slider extends React.Component {} + + export interface SwitchProps extends RNSwitchProps, BaseProps { + color?: BaseColorType; + disabled?: boolean; + initialValue?: boolean; + trackColor?: { + false: string; + true: string; + }; + ios_backgroundColor?: string; + onChange?: () => void; + } + export class Switch extends React.Component {} + + interface ThemeType { + SIZES?: { + BASE?: number; + FONT?: number; + ICON?: number; + OPACITY?: number; + BORDER_RADIUS?: number; + BORDER_WIDTH?: number; + BUTTON_WIDTH?: number; + BUTTON_HEIGHT?: number; + BUTTON_SHADOW_RADIUS?: number; + BLOCK_SHADOW_OPACITY?: number; + BLOCK_SHADOW_RADIUS?: number; + ANDROID_ELEVATION?: number; + CARD_BORDER_RADIUS?: number; + CARD_BORDER_WIDTH?: number; + CARD_WIDTH?: number; + CARD_MARGIN_VERTICAL?: number; + CARD_FOOTER_HORIZONTAL?: number; + CARD_FOOTER_VERTICAL?: number; + CARD_AVATAR_WIDTH?: number; + CARD_AVATAR_HEIGHT?: number; + CARD_AVATAR_RADIUS?: number; + CARD_IMAGE_HEIGHT?: number; + CARD_ROUND?: number; + CARD_ROUNDED?: number; + INPUT_BORDER_RADIUS?: number; + INPUT_BORDER_WIDTH?: number; + INPUT_HEIGHT?: number; + INPUT_HORIZONTAL?: number; + INPUT_TEXT?: number; + INPUT_LABEL_TEXT?: number; + INPUT_LABEL_BOTTOM?: number; + INPUT_HELP_TEXT?: number; + INPUT_ROUNDED?: number; + NAVBAR_HEIGHT?: number; + NAVBAR_VERTICAL?: number; + NAVBAR_TITLE_FLEX?: number; + NAVBAR_TITLE_HEIGHT?: number; + NAVBAR_TITLE_TEXT?: number; + NAVBAR_LEFT_FLEX?: number; + NAVBAR_LEFT_HEIGHT?: number; + NAVBAR_LEFT_MARGIN?: number; + NAVBAR_RIGHT_FLEX?: number; + NAVBAR_RIGHT_HEIGHT?: number; + NAVBAR_RIGHT_MARGIN?: number; + [key: string]: number; + }; + COLORS?: { + FACEBOOK?: string; + TWITTER?: string; + DRIBBBLE?: string; + THEME?: string; + PRIMARY?: string; + INFO?: string; + ERROR?: string; + WARNING?: string; + INPUT?: string; + PLACEHOLDER?: string; + NAVBAR?: string; + BLOCK?: string; + ICON?: string; + WHITE?: string; + BLACK?: string; + GREY?: string; + MUTED?: string; + TRANSPARENT?: string; + NEUTRAL?: string; + [key: string]: string; + }; + } + export const theme: ThemeType = {}; + export interface GalioProviderProps extends BaseProps { + theme: ThemeType; + } + export class GalioProvider extends React.Component {} + + type NamedStyles = ViewStyle | TextStyle | ImageStyle; + export function withGalio>( + Component: T, + styles: NamedStyles + ): ComponentType; +} From 10342b2d0740b79d74bb89963a86152a8085ced7 Mon Sep 17 00:00:00 2001 From: Rommel Rico Date: Wed, 26 Aug 2020 07:35:24 -0700 Subject: [PATCH 2/8] Adding fixes from code review https://github.com/galio-org/galio/pull/151 --- src/index.d.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/index.d.ts b/src/index.d.ts index 72f5f1c..b81a9bd 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -80,7 +80,7 @@ declare module 'galio-framework' { shadow?: boolean; borderless?: boolean; image?: string; - imageBlockStyle?: strubg; + imageBlockStyle?: ViewStyle; imageStyle?: ImageStyle; avatar?: string; location?: string; @@ -146,6 +146,7 @@ declare module 'galio-framework' { viewPass?: boolean; icon?: string; iconColor?: string; + iconContent?: any; family?: IconFamilyType; color?: string; help?: string; From b813cac80b74eb7563af7b6dd4e0b60b919ed3f3 Mon Sep 17 00:00:00 2001 From: Rommel Rico Date: Wed, 26 Aug 2020 21:20:33 -0700 Subject: [PATCH 3/8] Checking the component props --- src/index.d.ts | 475 ++++++++++++++++++++++++------------------------- 1 file changed, 231 insertions(+), 244 deletions(-) diff --git a/src/index.d.ts b/src/index.d.ts index b81a9bd..d4fa721 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -1,327 +1,314 @@ -import React, { ReactNode, ComponentType } from 'react'; +import React, { ReactNode } from 'react'; import { TouchableOpacityProps, - ImageStyle, ViewStyle, - TextStyle, - SwitchProps as RNSwitchProps, - TextInputProps, + SwitchProps as RNSwitchProps } from 'react-native'; declare module 'galio-framework' { - type IconFamilyType = - | 'Galio' - | 'AntDesign' - | 'Entypo' - | 'EvilIcons' - | 'Feather' - | 'FontAwesome' - | 'FontAwesome5' - | 'Fontisto' - | 'Foundation' - | 'Ionicons' - | 'MaterialIcons' - | 'MaterialCommunityIcons' - | 'Octicons' - | 'Zocial' - | 'SimpleLineIcons'; - - type BaseColorType = string; - - type ButtonColorType = string; interface BaseProps { [key: string]: any; } + // Button + export interface ButtonProps extends TouchableOpacityProps, BaseProps { + color?: + | ['theme', 'primary', 'info', 'danger', 'warning', 'success', 'black', 'grey', 'secondary', 'transparent', 'white'] + | string; + size?: + | ['large' | 'default' | 'small'] + | number; + iconColor?: string; + disabled?: boolean; + uppercase?: boolean; + lowercase?: boolean; + capitalize?: boolean; + loading?: boolean; + loadingSize?: 'small' | 'default' | 'large'; + opacity?: number; + shadowless?: boolean; + shadowColor?: boolean | string; + onlyIcon?: boolean; + icon?: boolean | string; + iconRight?: string | boolean; + iconFamily?: boolean | string; + iconSize?: number; + styles?: any; + theme?: any; + } + export class Button extends React.Component {} + + // Input + export interface InputProps extends BaseProps { + style?: any; + textInputStyle?: any; + type?: string; + password?: boolean; + placeholderTextColor?: string; + label?: string; + bgColor?: string; + rounded?: boolean; + borderless?: boolean; + viewPass?: boolean; + iconColor?: string; + icon?: string; + family?: string; + color?: string; + help?: string; + left?: boolean; + right?: boolean; + topHelp?: boolean; + bottomHelp?: boolean; + styles?: any; + iconSize?: number; + iconContent?: any; + theme?: any; + onRef?: () => void; + } + export class Input extends React.Component {} + + // Link + export interface LinkProps extends BaseProps { + children?: any; + theme?: any; + onPress: () => void; + } + export class Link extends React.Component {} + + // Icon + export interface IconProps extends BaseProps { + name: string; + family: string; + size?: number; + color?: string; + styles?: any; + theme?: any; + } + export class Icon extends React.Component {} + + // Text + export interface TextProps extends BaseProps { + children?: any; + style?: any; + h1?: boolean; + h2?: boolean; + h3?: boolean; + h4?: boolean; + h5?: boolean; + h6?: boolean; + p?: boolean; + body?: boolean; + small?: boolean; + size?: number; + color?: string; + muted?: boolean; + bold?: boolean; + italic?: boolean; + styles?: any; + theme?: any; + } + export class Text extends React.Component {} + + // GalioProvider + export interface GalioProviderProps extends BaseProps { + children?: any; + theme?: any; + } + export class GalioProvider extends React.Component {} + + // Accordion + export interface AccordionProps extends BaseProps { + theme?: any; + dataArray?: []; + opened?: number; + listStyle?: any; + style?: any; + icon?: any; + expandedIcon?: any; + headerStyle?: any; + contentStyle?: any; + onAccordionClose?: () => void; + onAccordionOpen?: () => void; + } + export class Accordion extends React.Component {} + + // Avatar + export interface AvatarProps extends BaseProps { + label?: string; + labelColor?: string; + size?: number; + source?: object | number; + backgroundColor?: string; + imageProps?: object; + imageStyle?: object | [] | number; + containerStyle?: ViewStyle; + styles?: any; + theme?: any; + } + export class Avatar extends React.Component {} + + // Block export interface BlockProps extends BaseProps { - bottom?: boolean; - card?: boolean; - center?: boolean; + row?: boolean; flex?: boolean | number; - fluid?: boolean; - height?: number; - left?: boolean; + center?: boolean; middle?: boolean; + top?: boolean; + bottom?: boolean; right?: boolean; - row?: boolean; - safe?: boolean; + card?: boolean; + left?: boolean; shadow?: boolean; - shadowColor?: boolean; space?: string; - top?: boolean; + fluid?: boolean; + height?: number; width?: number; + shadowColor?: string; + safe?: boolean; + styles?: any; + theme?: any; } export class Block extends React.Component {} - export interface ButtonProps extends TouchableOpacityProps, BaseProps { - capitalize?: boolean; - color?: ButtonColorType; - disabled?: boolean; - icon?: string; - iconColor?: boolean | string; - iconFamily?: boolean | string; - iconSize?: number; - loading?: boolean; - loadingSize?: 'small' | 'large'; - lowercase?: boolean; - onlyIcon?: boolean; - opacity?: number; - radius?: number; - shadowColor?: boolean | string; - shadowless?: boolean; - size?: 'small' | 'large' | number; - uppercase?: boolean; - } - export class Button extends React.Component {} - + // Card export interface CardProps extends BaseProps { card?: boolean; shadow?: boolean; borderless?: boolean; - image?: string; - imageBlockStyle?: ViewStyle; - imageStyle?: ImageStyle; - avatar?: string; - location?: string; - locationColor?: boolean | string; + styles?: any; + theme?: any; title?: string; titleColor?: string; caption?: string; captionColor?: string; - footerStyle?: ViewStyle; + avatar?: string; + footerStyle?: object; } export class Card extends React.Component {} - export interface CheckBoxProps extends BaseProps { - checkboxStyle?: ViewStyle; + // Checkbox + export interface CheckboxProps extends BaseProps { + checkboxStyle?: any; + color?: + | ['primary' | 'theme' | 'error' | 'warning' | 'success' | 'transparent' | 'info'] + | string; disabled?: boolean; - flexDirection?: ViewStyle['flexDirection']; + flexDirection?: + | ['row' | 'row-reverse' | 'column' | 'column-reverse'] + | string; + iconColor?: string; iconName?: string; iconSize?: number; - iconFamily?: IconFamilyType; + iconFamily?: string; image?: string; - imageStyle?: ImageStyle; + imageStyle?: any; initialValue?: boolean; - label?: string; - labelStyle?: TextStyle; + label: string; + labelStyle?: any; onChange?: () => void; + styles?: any; + theme?: any; } - export class CheckBox extends React.Component {} + export class Checkbox extends React.Component {} + // DeckSwiper export interface DeckSwiperProps extends BaseProps { - style?: ViewStyle; - components?: ReactNode[]; + components: []; onSwipeRight?: () => void; onSwipeLeft?: () => void; - focusedElementStyle?: ViewStyle; - nextElementStyle?: ViewStyle; + focusedElementStyle?: any; + nextElementStyle?: any; + style?: any; } export class DeckSwiper extends React.Component {} - export interface IconProps extends BaseProps { - name?: string; - family?: IconFamilyType; - size?: number; - color?: string; - } - export class Icon extends React.Component {} - - export interface InputProps - extends Omit< - TextInputProps, - | 'style' - | 'keyboardType' - | 'secureTextEntry' - | 'placeholderTextColor' - | 'underlineColorAndroid' - >, - BaseProps { - type?: TextInputProps['keyboardType']; - password?: boolean; - label?: string; - bgColor?: string; - rounded?: boolean; - borderless?: boolean; - viewPass?: boolean; - icon?: string; - iconColor?: string; - iconContent?: any; - family?: IconFamilyType; - color?: string; - help?: string; - left?: boolean; - right?: boolean; - topHelp?: boolean; - bottomHelp?: boolean; - iconSize?: number; - } - export class Input extends React.Component {} - + // NavBar export interface NavBarProps extends BaseProps { back?: boolean; transparent?: boolean; - title?: ReactNode; - titleStyle?: ViewStyle; + title?: ReactNode | string; + titleStyle?: any; left?: ReactNode; - leftStyle?: ViewStyle; + leftStyle?: any; leftIconColor?: string; - right?: ReactNode; - rightStyle?: ViewStyle; onLeftPress?: () => void; + leftHitSlop?: any; + right?: ReactNode; + rightStyle?: any; + style?: any; + styles?: any; + theme?: any; + leftIconName?: string; + leftIconFamily?: string; + hideLeft?: boolean; + hideRight?: boolean; } export class NavBar extends React.Component {} + // Radio export interface RadioProps extends BaseProps { color?: string; - containerStyle?: ViewStyle; - radioOuterStyle?: ViewStyle; - radioInnerStyle?: ViewStyle; - flexDirection?: ViewStyle['flexDirection']; + containerStyle?: any; + radioOuterStyle?: any; + radioInnerStyle?: any; + disabled?: boolean; + flexDirection?: + | ['row' | 'row-reverse' | 'column' | 'column-reverse'] + | string; initialValue?: boolean; - label?: string; - labelStyle?: TextStyle; + label: string; + labelStyle?: any; onChange?: () => void; + styles?: any; + theme?: any; } export class Radio extends React.Component {} - export interface TextProps extends BaseProps { - h1?: boolean; - h2?: boolean; - h3?: boolean; - h4?: boolean; - h5?: boolean; - p?: boolean; - size?: number; - color?: string; - muted?: boolean; - bold?: boolean; - italic?: boolean; - } - export class Text extends React.Component {} - - export interface ToastProps extends BaseProps { - style?: ViewStyle; - children?: ReactNode; - isShow?: boolean; - positionIndicator?: 'top' | 'center' | 'bottom'; - positionOffset?: number; - fadeInDuration?: number; - fadeOutDuration?: number; - color?: BaseColorType; - round?: boolean; - textStyle?: TextStyle; - } - export class Toast extends React.Component {} - + // Slider export interface SliderProps extends BaseProps { - activeColor?: string; value?: number; disabled?: boolean; minimumValue?: number; maximumValue?: number; - trackStyle?: ViewStyle; - thumbStyle?: ViewStyle; + trackStyle?: any; + thumbStyle?: any; step?: number; + styles?: any; onSlidingComplete?: () => void; onSlidingStart?: () => void; onValueChange?: () => void; } export class Slider extends React.Component {} + // Switch export interface SwitchProps extends RNSwitchProps, BaseProps { - color?: BaseColorType; + color?: + | ['primary' | 'theme' | 'error' | 'warning' | 'success' | 'info'] + | string; disabled?: boolean; initialValue?: boolean; - trackColor?: { - false: string; - true: string; - }; - ios_backgroundColor?: string; - onChange?: () => void; + onChange: () => void; } export class Switch extends React.Component {} - interface ThemeType { - SIZES?: { - BASE?: number; - FONT?: number; - ICON?: number; - OPACITY?: number; - BORDER_RADIUS?: number; - BORDER_WIDTH?: number; - BUTTON_WIDTH?: number; - BUTTON_HEIGHT?: number; - BUTTON_SHADOW_RADIUS?: number; - BLOCK_SHADOW_OPACITY?: number; - BLOCK_SHADOW_RADIUS?: number; - ANDROID_ELEVATION?: number; - CARD_BORDER_RADIUS?: number; - CARD_BORDER_WIDTH?: number; - CARD_WIDTH?: number; - CARD_MARGIN_VERTICAL?: number; - CARD_FOOTER_HORIZONTAL?: number; - CARD_FOOTER_VERTICAL?: number; - CARD_AVATAR_WIDTH?: number; - CARD_AVATAR_HEIGHT?: number; - CARD_AVATAR_RADIUS?: number; - CARD_IMAGE_HEIGHT?: number; - CARD_ROUND?: number; - CARD_ROUNDED?: number; - INPUT_BORDER_RADIUS?: number; - INPUT_BORDER_WIDTH?: number; - INPUT_HEIGHT?: number; - INPUT_HORIZONTAL?: number; - INPUT_TEXT?: number; - INPUT_LABEL_TEXT?: number; - INPUT_LABEL_BOTTOM?: number; - INPUT_HELP_TEXT?: number; - INPUT_ROUNDED?: number; - NAVBAR_HEIGHT?: number; - NAVBAR_VERTICAL?: number; - NAVBAR_TITLE_FLEX?: number; - NAVBAR_TITLE_HEIGHT?: number; - NAVBAR_TITLE_TEXT?: number; - NAVBAR_LEFT_FLEX?: number; - NAVBAR_LEFT_HEIGHT?: number; - NAVBAR_LEFT_MARGIN?: number; - NAVBAR_RIGHT_FLEX?: number; - NAVBAR_RIGHT_HEIGHT?: number; - NAVBAR_RIGHT_MARGIN?: number; - [key: string]: number; - }; - COLORS?: { - FACEBOOK?: string; - TWITTER?: string; - DRIBBBLE?: string; - THEME?: string; - PRIMARY?: string; - INFO?: string; - ERROR?: string; - WARNING?: string; - INPUT?: string; - PLACEHOLDER?: string; - NAVBAR?: string; - BLOCK?: string; - ICON?: string; - WHITE?: string; - BLACK?: string; - GREY?: string; - MUTED?: string; - TRANSPARENT?: string; - NEUTRAL?: string; - [key: string]: string; - }; - } - export const theme: ThemeType = {}; - export interface GalioProviderProps extends BaseProps { - theme: ThemeType; + // Toast + export interface ToastProps extends BaseProps { + children: ReactNode; + isShow: boolean; + positionIndicator: 'top' | 'center' | 'bottom'; + positionOffset?: number; + fadeInDuration?: number; + fadeOutDuration?: number; + color?: + | ['primary', 'theme', 'info', 'error', 'warning', 'success'] + | string; + round?: boolean; + style?: ViewStyle; + textStyle?: ViewStyle; + styles?: any; + theme?: any; } - export class GalioProvider extends React.Component {} + export class Toast extends React.Component {} - type NamedStyles = ViewStyle | TextStyle | ImageStyle; - export function withGalio>( - Component: T, - styles: NamedStyles - ): ComponentType; } From da32ef608b48dd35dec6f706af8c29e9c11e4b79 Mon Sep 17 00:00:00 2001 From: Rommel Rico Date: Wed, 26 Aug 2020 21:33:02 -0700 Subject: [PATCH 4/8] Correcting some props --- src/index.d.ts | 28 +++++++--------------------- 1 file changed, 7 insertions(+), 21 deletions(-) diff --git a/src/index.d.ts b/src/index.d.ts index d4fa721..dd879e9 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -13,12 +13,8 @@ declare module 'galio-framework' { // Button export interface ButtonProps extends TouchableOpacityProps, BaseProps { - color?: - | ['theme', 'primary', 'info', 'danger', 'warning', 'success', 'black', 'grey', 'secondary', 'transparent', 'white'] - | string; - size?: - | ['large' | 'default' | 'small'] - | number; + color?: 'theme' | 'primary' | 'info' | 'danger' | 'warning' | 'success' | 'black' | 'grey' | 'secondary' | 'transparent' | 'white' | string; + size?: 'large' | 'default' | 'small' | number; iconColor?: string; disabled?: boolean; uppercase?: boolean; @@ -190,13 +186,9 @@ declare module 'galio-framework' { // Checkbox export interface CheckboxProps extends BaseProps { checkboxStyle?: any; - color?: - | ['primary' | 'theme' | 'error' | 'warning' | 'success' | 'transparent' | 'info'] - | string; + color?: 'primary' | 'theme' | 'error' | 'warning' | 'success' | 'transparent' | 'info' | string; disabled?: boolean; - flexDirection?: - | ['row' | 'row-reverse' | 'column' | 'column-reverse'] - | string; + flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse' | string; iconColor?: string; iconName?: string; iconSize?: number; @@ -253,9 +245,7 @@ declare module 'galio-framework' { radioOuterStyle?: any; radioInnerStyle?: any; disabled?: boolean; - flexDirection?: - | ['row' | 'row-reverse' | 'column' | 'column-reverse'] - | string; + flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse' | string; initialValue?: boolean; label: string; labelStyle?: any; @@ -283,9 +273,7 @@ declare module 'galio-framework' { // Switch export interface SwitchProps extends RNSwitchProps, BaseProps { - color?: - | ['primary' | 'theme' | 'error' | 'warning' | 'success' | 'info'] - | string; + color?: 'primary' | 'theme' | 'error' | 'warning' | 'success' | 'info' | string; disabled?: boolean; initialValue?: boolean; onChange: () => void; @@ -300,9 +288,7 @@ declare module 'galio-framework' { positionOffset?: number; fadeInDuration?: number; fadeOutDuration?: number; - color?: - | ['primary', 'theme', 'info', 'error', 'warning', 'success'] - | string; + color?: 'primary' | 'theme' | 'info' | 'error' | 'warning' | 'success' | string; round?: boolean; style?: ViewStyle; textStyle?: ViewStyle; From 91516e8a98d25677baf988714704502b7678b76e Mon Sep 17 00:00:00 2001 From: Rommel Rico Date: Wed, 26 Aug 2020 21:55:35 -0700 Subject: [PATCH 5/8] Adding the Galio theme type --- src/index.d.ts | 151 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 151 insertions(+) diff --git a/src/index.d.ts b/src/index.d.ts index dd879e9..5dae9f9 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -297,4 +297,155 @@ declare module 'galio-framework' { } export class Toast extends React.Component {} + // Social colors + export interface SocialProps extends BaseProps { + FACEBOOK?: string; + TWITTER?: string; + DRIBBBLE?: string; + } + + // Theme colors + export interface ThemeProps extends BaseProps { + THEME?: string; + PRIMARY?: string; + DARK_PRIMARY?: string; + LIGHT_PRIMARY?: string; + BRIGHT_PRIMARY?: string; + INFO?: string; + DARK_INFO?: string; + LIGHT_INFO?: string; + BRIGHT_INFO?: string; + DANGER?: string; + DARK_DANGER?: string; + LIGHT_DANGER?: string; + BRIGHT_DANGER?: string; + WARNING?: string; + DARK_WARNING?: string; + LIGHT_WARNING?: string; + BRIGHT_WARNING?: string; + SUCCESS?: string; + DARK_SUCCESS?: string; + LIGHT_SUCCESS?: string; + BRIGHT_SUCCESS?: string; + WHITE?: string; + DARK_BLACK?: string; + BLACK?: string; + BRIGHT_BLACK?: string; + LIGHT_BLACK?: string; + DARK_SECONDARY?: string; + SECONDARY?: string; + BRIGHT_SECONDARY?: string; + LIGHT_SECONDARY?: string; + DARK_GREY?: string; + GREY?: string; + BRIGHT_GREY?: string; + LIGHT_GREY?: string; + NEUTRAL?: string; + } + + // Components colors + export interface ComponentsProps extends BaseProps { + INPUT?: string; + PLACEHOLDER?: string; + NAVBAR?: string; + BLOCK?: string; + ICON?: string; + } + + export type BASE = number; + + export interface GalioThemeProps extends BaseProps { + COLORS: { + WHITE?: string; + BLACK?: string; + GREY?: string; + MUTED?: string; + TRANSPARENT?: string; + NEUTRAL?: string; + } & ComponentsProps & ThemeProps & SocialProps; + SIZES: { + BASE?: BASE; + FONT?: BASE, + OPACITY?: number; + BORDER_RADIUS?: number; + BORDER_WIDTH?: number; + + // Typography + H1?: number; + H2?: number; + H3?: number; + H4?: number; + H5?: number; + H6?: number; + BODY?: number; + SMALL?: number; + + // Icons + ICON?: BASE, + ICON_MEDIUM?: number; + ICON_LARGE?: number; + + // Button styles + BUTTON_WIDTH?: number; + BUTTON_HEIGHT?: number; + BUTTON_SHADOW_RADIUS?: number; + + // Block styles + BLOCK_SHADOW_OPACITY?: number; + BLOCK_SHADOW_RADIUS?: number; + ANDROID_ELEVATION?: number; + + // Card styles + CARD_BORDER_RADIUS?: number; + CARD_BORDER_WIDTH?: number; + CARD_WIDTH?: number; + CARD_MARGIN_VERTICAL?: number; + CARD_FOOTER_HORIZONTAL?: number; + CARD_FOOTER_VERTICAL?: number; + CARD_AVATAR_WIDTH?: number; + CARD_AVATAR_HEIGHT?: number; + CARD_AVATAR_RADIUS?: number; + CARD_IMAGE_HEIGHT?: number; + CARD_ROUND?: number; + CARD_ROUNDED?: number; + + // Input styles + INPUT_BORDER_RADIUS?: number; + INPUT_BORDER_WIDTH?: number; + INPUT_HEIGHT?: number; + INPUT_HORIZONTAL?: number; + INPUT_VERTICAL_TEXT?: number; + INPUT_VERTICAL_LABEL?: number; + INPUT_TEXT?: number; + INPUT_ROUNDED?: number; + + // NavBar styles + NAVBAR_HEIGHT?: number; + NAVBAR_VERTICAL?: number; + NAVBAR_TITLE_FLEX?: number; + NAVBAR_TITLE_HEIGHT?: number; + NAVBAR_TITLE_TEXT?: number; + NAVBAR_LEFT_FLEX?: number; + NAVBAR_LEFT_HEIGHT?: number; + NAVBAR_LEFT_MARGIN?: number; + NAVBAR_RIGHT_FLEX?: number; + NAVBAR_RIGHT_HEIGHT?: number; + NAVBAR_RIGHT_MARGIN?: number; + + // Checkbox + CHECKBOX_WIDTH?: number; + CHECKBOX_HEIGHT?: number; + + // Slider + TRACK_SIZE?: number; + THUMB_SIZE?: number; + + // Radio Button + RADIO_WIDTH?: number; + RADIO_HEIGHT?: number; + RADIO_THICKNESS?: number; + } + } + export type theme = GalioThemeProps; + } From 709d4e8e6e76db37fc838d5a57432a83f84317fe Mon Sep 17 00:00:00 2001 From: Rommel Rico Date: Wed, 26 Aug 2020 22:04:13 -0700 Subject: [PATCH 6/8] More exports --- src/index.d.ts | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/index.d.ts b/src/index.d.ts index 5dae9f9..9b201c2 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -1,4 +1,4 @@ -import React, { ReactNode } from 'react'; +import React, { ReactNode, ComponentType } from 'react'; import { TouchableOpacityProps, ViewStyle, @@ -446,6 +446,17 @@ declare module 'galio-framework' { RADIO_THICKNESS?: number; } } - export type theme = GalioThemeProps; + + // Default Theme + export const theme: GalioThemeProps; + + // useGalioTheme + export function useGalioTheme(): GalioThemeProps; + + // withGalio + export function withGalio>( + Component: T, + styles: any + ): ComponentType; } From 125286d49c47a3f41cad48f25d7aa6c6bf2c93d0 Mon Sep 17 00:00:00 2001 From: Rommel Rico Date: Wed, 26 Aug 2020 22:20:14 -0700 Subject: [PATCH 7/8] Default Theme --- src/index.d.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/index.d.ts b/src/index.d.ts index 9b201c2..b91fae6 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -447,9 +447,6 @@ declare module 'galio-framework' { } } - // Default Theme - export const theme: GalioThemeProps; - // useGalioTheme export function useGalioTheme(): GalioThemeProps; @@ -459,4 +456,8 @@ declare module 'galio-framework' { styles: any ): ComponentType; + // Default Theme + const GalioTheme: GalioThemeProps; + export default GalioTheme; + } From b3a9f8a8dad8ff3d67df6d57d927150ed5b610e4 Mon Sep 17 00:00:00 2001 From: Rommel Rico Date: Wed, 26 Aug 2020 22:40:31 -0700 Subject: [PATCH 8/8] Theme... again --- src/index.d.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/index.d.ts b/src/index.d.ts index b91fae6..b31cc56 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -457,7 +457,6 @@ declare module 'galio-framework' { ): ComponentType; // Default Theme - const GalioTheme: GalioThemeProps; - export default GalioTheme; + export const theme = GalioThemeProps; }