From cba5ea9f2a50973edb7962587fdd23eacbb2f4a3 Mon Sep 17 00:00:00 2001 From: Cyrus Passi Date: Wed, 30 Jun 2021 17:53:35 +0530 Subject: [PATCH 01/57] Fix: Add color prop typescript definition in Select (#3779) * fix: added color type for Select * chore: changed description for color type --- src/components/primitives/Select/types.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/primitives/Select/types.ts b/src/components/primitives/Select/types.ts index 2fc566cfd..94cd83bff 100644 --- a/src/components/primitives/Select/types.ts +++ b/src/components/primitives/Select/types.ts @@ -7,6 +7,10 @@ export interface ISelectProps extends IBoxProps { * The placeholder that describes the Select. */ placeholder?: string; + /** + * The Selected Item text color. + */ + color?: string; /** * The placeholder text color */ From 3115e98b666cc07201846f11b7b55850e2920556 Mon Sep 17 00:00:00 2001 From: Cyrus Passi Date: Wed, 30 Jun 2021 19:08:14 +0530 Subject: [PATCH 02/57] Fix: Box With Linear gradient example produces warning. (#3777) * fix: remove bg from safeAreaProps from linear gradient * chore: removed import backgroundColor * chore: used backgroundColorProps instead of backgroundItems --- src/components/primitives/Box/index.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/components/primitives/Box/index.tsx b/src/components/primitives/Box/index.tsx index aa84b9da6..73966b565 100644 --- a/src/components/primitives/Box/index.tsx +++ b/src/components/primitives/Box/index.tsx @@ -52,6 +52,16 @@ const Box = ({ children, ...props }: IBoxProps, ref: any) => { y: lgrad.end[1], }; } + const backgroundColorProps = [ + 'bg', + 'bgColor', + 'background', + 'backgroundColor', + ]; + backgroundColorProps.forEach((backgroundColorProp) => { + if (backgroundColorProp in safeAreaProps) + delete safeAreaProps[backgroundColorProp]; + }); return ( Date: Thu, 1 Jul 2021 17:42:26 +0530 Subject: [PATCH 03/57] fix: ssr not working --- src/core/NativeBaseProvider.tsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/core/NativeBaseProvider.tsx b/src/core/NativeBaseProvider.tsx index 72a59fedc..9637457d0 100644 --- a/src/core/NativeBaseProvider.tsx +++ b/src/core/NativeBaseProvider.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { ThemeProvider } from 'styled-components/native'; import { SafeAreaProvider, + Metrics, initialWindowMetrics as defaultInitialWindowMetrics, } from 'react-native-safe-area-context'; import { SSRProvider } from '@react-native-aria/utils'; @@ -14,6 +15,20 @@ import { INativebaseConfig, NativeBaseConfigProvider, } from './NativeBaseContext'; +import { Platform } from 'react-native'; + +// For SSR to work, we need to pass initial insets as 0 values on web. + +// https://github.com/th3rdwave/react-native-safe-area-context/issues/132 +const defaultInitialWindowMetricsBasedOnPlatform: Metrics | null = Platform.select( + { + web: { + frame: { x: 0, y: 0, width: 0, height: 0 }, + insets: { top: 0, left: 0, right: 0, bottom: 0 }, + }, + default: defaultInitialWindowMetrics, + } +); export interface NativeBaseProviderProps { theme?: ITheme; @@ -38,7 +53,9 @@ const NativeBaseProvider = (props: NativeBaseProviderProps) => { Date: Fri, 2 Jul 2021 19:14:25 +0530 Subject: [PATCH 04/57] fix: 3781 add font family 'heading' in heading theme (#3788) --- src/theme/components/heading.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/theme/components/heading.ts b/src/theme/components/heading.ts index ca9d771c6..8d9189352 100644 --- a/src/theme/components/heading.ts +++ b/src/theme/components/heading.ts @@ -4,6 +4,7 @@ const baseStyle = (props: Record) => { return { color: mode('muted.700', 'white')(props), fontWeight: 'bold', + fontFamily: 'heading', }; }; From c1fdad85d57e20f5acf22abbdd7912170de0be25 Mon Sep 17 00:00:00 2001 From: Nishan Bende Date: Mon, 5 Jul 2021 12:57:49 +0530 Subject: [PATCH 05/57] fix: 3784 export toast props definition --- src/components/composites/Toast/index.ts | 1 + src/components/composites/index.ts | 2 +- src/index.tsx | 2 ++ 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/composites/Toast/index.ts b/src/components/composites/Toast/index.ts index 1b794ee78..fc1a00daf 100644 --- a/src/components/composites/Toast/index.ts +++ b/src/components/composites/Toast/index.ts @@ -1 +1,2 @@ export * from './Toast'; +export * from './types'; diff --git a/src/components/composites/index.ts b/src/components/composites/index.ts index 61875a8a6..6bbb22e33 100644 --- a/src/components/composites/index.ts +++ b/src/components/composites/index.ts @@ -23,7 +23,7 @@ export type { IContainerProps } from './Container'; export { Modal } from './Modal'; export { default as Drawer } from './Drawer'; -export { useToast } from './Toast'; +export { useToast, IToastProps } from './Toast'; export { default as Divider } from './Divider'; export type { IDividerProps } from './Divider/types'; diff --git a/src/index.tsx b/src/index.tsx index 05f1afa99..24eacb01f 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -106,6 +106,7 @@ import { useTypeahead, Modal, useToast, + IToastProps, Backdrop, Drawer, Tooltip, @@ -251,6 +252,7 @@ export { Select, Modal, useToast, + IToastProps, Backdrop, Drawer, Tooltip, From 029e7757b700811533e67346f29809aeab5fa52f Mon Sep 17 00:00:00 2001 From: Nishan Bende Date: Mon, 5 Jul 2021 14:47:13 +0530 Subject: [PATCH 06/57] fix: add tokenised font family support in input component --- src/components/primitives/Input/InputBase.tsx | 13 +++++++ src/components/primitives/Text/index.tsx | 36 ++----------------- src/hooks/useResolvedFontFamily.ts | 34 ++++++++++++++++++ src/theme/base/typography.ts | 6 ++-- src/theme/components/input.ts | 1 + 5 files changed, 53 insertions(+), 37 deletions(-) create mode 100644 src/hooks/useResolvedFontFamily.ts diff --git a/src/components/primitives/Input/InputBase.tsx b/src/components/primitives/Input/InputBase.tsx index e9c4b6432..0ac2ec1b2 100644 --- a/src/components/primitives/Input/InputBase.tsx +++ b/src/components/primitives/Input/InputBase.tsx @@ -24,6 +24,7 @@ import { useToken } from '../../../hooks'; import { usePropsResolution } from '../../../hooks/useThemeProps'; import { useHover } from '@react-native-aria/interactions'; import { mergeRefs } from '../../../utils'; +import { useResolvedFontFamily } from '../../../hooks/useResolvedFontFamily'; const StyledInput = styled(TextInput)( flex, @@ -85,6 +86,9 @@ const InputBase = ( _focus, _disabled, _invalid, + fontFamily, + fontWeight, + fontStyle, ...themedProps } = usePropsResolution('Input', { ...inputThemeProps, @@ -94,9 +98,18 @@ const InputBase = ( const _ref = React.useRef(null); const { isHovered } = useHover({}, _ref); + const resolvedFontFamily = useResolvedFontFamily({ + fontFamily, + fontWeight, + fontStyle, + }); + return ( ( color, @@ -105,10 +77,6 @@ const Text = ({ children, ...props }: ITextProps, ref: any) => { fontStyle, }); - if (resolvedFontFamily) { - fontFamily = resolvedFontFamily; - } - return ( { } fontSize={sub ? 10 : fontSize} ref={mergeRefs([ref, _ref])} - fontFamily={fontFamily} + fontFamily={resolvedFontFamily} {...(isHovered && _hover)} > {children} diff --git a/src/hooks/useResolvedFontFamily.ts b/src/hooks/useResolvedFontFamily.ts new file mode 100644 index 000000000..c3444f213 --- /dev/null +++ b/src/hooks/useResolvedFontFamily.ts @@ -0,0 +1,34 @@ +import { useTheme } from './useTheme'; + +type IUseResolvedFontFamily = { + fontFamily: string; + fontStyle: string; + fontWeight: string | number; +}; + +// Android doesn't support fontWeight or fontStyle properties. So, we pass fontFamily instead. +export function useResolvedFontFamily(props: IUseResolvedFontFamily) { + const { fontFamily, fontStyle = 'normal', fontWeight = 400 } = props; + + const { fontConfig, fontWeights, fonts } = useTheme(); + if (fontFamily in fonts) { + const fontToken = fonts[fontFamily]; + if (fontConfig && fontConfig[fontToken]) { + // fontWeights are also specified using "400" + const parsedFontWeight = parseInt(fontWeight as any); + let fontWeightNumber = Number.isNaN(parsedFontWeight) + ? fontWeights[fontWeight] + : fontWeight; + let fontVariant = fontConfig[fontToken][fontWeightNumber]; + + if (typeof fontVariant === 'object') { + if (fontVariant[fontStyle]) return fontVariant[fontStyle]; + } else { + return fontVariant; + } + } + return fonts[fontFamily]; + } + + return fontFamily; +} diff --git a/src/theme/base/typography.ts b/src/theme/base/typography.ts index 09aec9151..c4a0e01e5 100644 --- a/src/theme/base/typography.ts +++ b/src/theme/base/typography.ts @@ -79,9 +79,9 @@ const typography = { black: 900, }, fonts: { - heading: '', - body: '', - mono: '', + heading: undefined, + body: undefined, + mono: undefined, }, fontSizes: { 'xxs': 10, diff --git a/src/theme/components/input.ts b/src/theme/components/input.ts index 8fbcbefa6..9ac799fa0 100644 --- a/src/theme/components/input.ts +++ b/src/theme/components/input.ts @@ -19,6 +19,7 @@ const baseStyle = (props: Record) => { }; return { + fontFamily: 'body', px: 4, py: 2, borderRadius: 'lg', From 0efc7a9b0fd08cadbd2c844b890c9ebb07e21f84 Mon Sep 17 00:00:00 2001 From: Nishan Bende Date: Mon, 5 Jul 2021 18:04:54 +0530 Subject: [PATCH 07/57] fix: 3376 drag indicator hide and styling props --- .../Actionsheet/ActionSheetContext.ts | 5 +++ .../composites/Actionsheet/Actionsheet.tsx | 10 ++++- .../Actionsheet/ActionsheetContent.tsx | 42 ++++++++++++------- .../composites/Actionsheet/types.tsx | 6 +++ src/theme/components/actionsheet.ts | 6 +++ 5 files changed, 53 insertions(+), 16 deletions(-) create mode 100644 src/components/composites/Actionsheet/ActionSheetContext.ts diff --git a/src/components/composites/Actionsheet/ActionSheetContext.ts b/src/components/composites/Actionsheet/ActionSheetContext.ts new file mode 100644 index 000000000..0dd63e042 --- /dev/null +++ b/src/components/composites/Actionsheet/ActionSheetContext.ts @@ -0,0 +1,5 @@ +import React from 'react'; + +export const ActionSheetContext = React.createContext({ + hideDragIndicator: false, +}); diff --git a/src/components/composites/Actionsheet/Actionsheet.tsx b/src/components/composites/Actionsheet/Actionsheet.tsx index 68a1fd931..c29b1e3b5 100644 --- a/src/components/composites/Actionsheet/Actionsheet.tsx +++ b/src/components/composites/Actionsheet/Actionsheet.tsx @@ -2,8 +2,12 @@ import React, { memo, forwardRef } from 'react'; import { Modal } from '../../composites/Modal'; import type { IActionsheetProps } from './types'; import { usePropsResolution } from '../../../hooks'; +import { ActionSheetContext } from './ActionSheetContext'; -const Actionsheet = ({ children, ...props }: IActionsheetProps, ref: any) => { +const Actionsheet = ( + { children, hideDragIndicator = false, ...props }: IActionsheetProps, + ref: any +) => { const { isOpen, disableOverlay, onClose, ...newProps } = usePropsResolution( 'Actionsheet', props @@ -21,7 +25,9 @@ const Actionsheet = ({ children, ...props }: IActionsheetProps, ref: any) => { closeOnOverlayClick={disableOverlay ? false : true} ref={ref} > - {children} + + {children} + ); }; diff --git a/src/components/composites/Actionsheet/ActionsheetContent.tsx b/src/components/composites/Actionsheet/ActionsheetContent.tsx index 25588cfa3..c76e35710 100644 --- a/src/components/composites/Actionsheet/ActionsheetContent.tsx +++ b/src/components/composites/Actionsheet/ActionsheetContent.tsx @@ -5,13 +5,18 @@ import { usePropsResolution } from '../../../hooks'; import { Animated, PanResponder } from 'react-native'; import { ModalContext } from '../Modal/Context'; import Box from '../../primitives/Box'; +import { ActionSheetContext } from './ActionSheetContext'; const ActionsheetContent = ( { children, ...props }: IActionsheetContentProps, ref?: any ) => { - const newProps = usePropsResolution('ActionsheetContent', props); + const { _dragIndicator, ...newProps } = usePropsResolution( + 'ActionsheetContent', + props + ); const { handleClose } = React.useContext(ModalContext); + const { hideDragIndicator } = React.useContext(ActionSheetContext); let pan = React.useRef(new Animated.ValueXY()).current; let sheetHeight = React.useRef(0); @@ -59,21 +64,30 @@ const ActionsheetContent = ( }} pointerEvents="box-none" > - {/* To increase the draggable area */} - + {!hideDragIndicator ? ( + <> + {/* To increase the draggable area */} + + + ) : null} - {/* Hack. Fix later. Add -2 negative margin to remove the padding added by ActionSheetContent */} - - - + {!hideDragIndicator ? ( + <> + {/* Hack. Fix later. Add -2 negative margin to remove the padding added by ActionSheetContent */} + + + + + ) : null} + {children} diff --git a/src/components/composites/Actionsheet/types.tsx b/src/components/composites/Actionsheet/types.tsx index 84169e56b..81063cd7e 100644 --- a/src/components/composites/Actionsheet/types.tsx +++ b/src/components/composites/Actionsheet/types.tsx @@ -15,6 +15,12 @@ export interface IActionsheetProps extends IBoxProps { * @default false */ disableOverlay?: boolean; + + /** + * If true, hides the drag indicator. + * @default false + */ + hideDragIndicator?: boolean; } export interface IActionsheetContentProps extends IBoxProps {} diff --git a/src/theme/components/actionsheet.ts b/src/theme/components/actionsheet.ts index 2979a2890..c25d998bf 100644 --- a/src/theme/components/actionsheet.ts +++ b/src/theme/components/actionsheet.ts @@ -13,6 +13,12 @@ export const ActionsheetContent = { p: 2, borderRadius: 'none', roundedTop: 10, + _dragIndicator: { + bg: 'coolGray.400', + height: 1, + width: 9, + borderRadius: 2, + }, }, }; From 83d31529df67897c4bf3d22980257341d13e006c Mon Sep 17 00:00:00 2001 From: Nishan Bende Date: Mon, 5 Jul 2021 18:24:22 +0530 Subject: [PATCH 08/57] fix: remove checkbox group wrapper --- .../primitives/Checkbox/CheckboxGroup.tsx | 26 +++++++++---------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/src/components/primitives/Checkbox/CheckboxGroup.tsx b/src/components/primitives/Checkbox/CheckboxGroup.tsx index f143e2ac7..c5a8aa180 100644 --- a/src/components/primitives/Checkbox/CheckboxGroup.tsx +++ b/src/components/primitives/Checkbox/CheckboxGroup.tsx @@ -16,20 +16,18 @@ function CheckboxGroup( let { groupProps } = useCheckboxGroup(props, state); const formControlContext = useFormControlContext(); return ( - - - - {children} - - - + + + {children} + + ); } From b5007a109f5fa1b6efc566c38b0be960b153d3bb Mon Sep 17 00:00:00 2001 From: meenu Date: Mon, 5 Jul 2021 19:44:00 +0530 Subject: [PATCH 09/57] fix: fixed default design for isAttached prop in buttongroup --- .../primitives/Button/ButtonGroup.tsx | 6 +- .../primitives/Button/ButtonGroup.tsx | 69 ++++++++++++++----- src/components/primitives/Button/types.ts | 16 +---- 3 files changed, 58 insertions(+), 33 deletions(-) diff --git a/example/storybook/stories/components/primitives/Button/ButtonGroup.tsx b/example/storybook/stories/components/primitives/Button/ButtonGroup.tsx index 50406eb09..3b3e87c69 100644 --- a/example/storybook/stories/components/primitives/Button/ButtonGroup.tsx +++ b/example/storybook/stories/components/primitives/Button/ButtonGroup.tsx @@ -4,14 +4,12 @@ import { Button } from 'native-base'; export const Example = () => { return ( - + diff --git a/src/components/primitives/Button/ButtonGroup.tsx b/src/components/primitives/Button/ButtonGroup.tsx index 9de7bb173..87586db18 100644 --- a/src/components/primitives/Button/ButtonGroup.tsx +++ b/src/components/primitives/Button/ButtonGroup.tsx @@ -9,33 +9,70 @@ export default memo( { children, divider, - variant, - size, - colorScheme, + _child, isDisabled, isAttached, ...props }: IButtonGroupProps, ref?: any ) => { - const { space, ...newProps } = usePropsResolution('ButtonGroup', props); - const computedChildren = React.Children.map( - children, - (child: JSX.Element, index: number) => { - return React.cloneElement(child, { - key: `button-group-child-${index}`, - variant, - size, - colorScheme, - isDisabled, - ...child.props, - }); - } + const { space, direction, ...newProps } = usePropsResolution( + 'ButtonGroup', + props ); + let computedChildren: JSX.Element | JSX.Element[]; + + if (Array.isArray(children)) { + computedChildren = React.Children.map( + children, + (child: JSX.Element, index: number) => { + return React.cloneElement(child, { + key: `button-group-child-${index}`, + ..._child, + isDisabled, + + // when buttons are attached, remove rounded corners of all buttons except extreme buttons + ...(isAttached ? { borderRadius: 0 } : {}), + ...(isAttached && index === 0 + ? direction === 'column' + ? { borderTopRadius: 'lg' } + : { borderLeftRadius: 'lg' } + : {}), + ...(isAttached && index === children?.length - 1 + ? direction === 'column' + ? { borderBottomRadius: 'lg' } + : { borderRightRadius: 'lg' } + : {}), + + //when buttons are attached, remove double border from them, just keep borderRight in case for direction row and borderBottom in case of direction column for every component + ...(isAttached && index !== 0 + ? direction === 'column' + ? { borderTopWidth: 0 } + : { borderLeftWidth: 0 } + : {}), + ...child.props, + }); + } + ); + } else { + computedChildren = React.Children.map( + children, + (child: JSX.Element, index: number) => { + return React.cloneElement(child, { + key: `button-group-child-${index}`, + ..._child, + isDisabled, + ...child.props, + }); + } + ); + } + return ( diff --git a/src/components/primitives/Button/types.ts b/src/components/primitives/Button/types.ts index 5a84929d8..082b4732b 100644 --- a/src/components/primitives/Button/types.ts +++ b/src/components/primitives/Button/types.ts @@ -69,19 +69,9 @@ export interface IButtonGroupProps extends IStackProps { */ children: JSX.Element | Array; /** - * The variant of the button style to use. - * @default 'solid' - */ - variant?: 'ghost' | 'outline' | 'solid' | 'link' | 'unstyled'; - /** - * The start icon element to use in the button. - */ - size?: 'xs' | 'sm' | 'md' | 'lg'; - /** - * The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red"). - * @default 'primary' - */ - colorScheme?: string; + * + */ + _child: IButtonProps; /** * If true, the button will be disabled. */ From f0a67d047ded7a72d998842bfe02c07ccb2c639b Mon Sep 17 00:00:00 2001 From: meenu Date: Tue, 6 Jul 2021 12:04:55 +0530 Subject: [PATCH 10/57] fix: took borderRadius value from button theme --- .../primitives/Button/ButtonGroup.tsx | 2 +- .../primitives/Button/ButtonGroup.tsx | 21 ++++++++++++------- src/components/primitives/Button/types.ts | 16 +++++++++++--- 3 files changed, 28 insertions(+), 11 deletions(-) diff --git a/example/storybook/stories/components/primitives/Button/ButtonGroup.tsx b/example/storybook/stories/components/primitives/Button/ButtonGroup.tsx index 3b3e87c69..bfcca12e0 100644 --- a/example/storybook/stories/components/primitives/Button/ButtonGroup.tsx +++ b/example/storybook/stories/components/primitives/Button/ButtonGroup.tsx @@ -4,7 +4,7 @@ import { Button } from 'native-base'; export const Example = () => { return ( { return React.cloneElement(child, { key: `button-group-child-${index}`, - ..._child, + variant, + size, + colorScheme, isDisabled, // when buttons are attached, remove rounded corners of all buttons except extreme buttons ...(isAttached ? { borderRadius: 0 } : {}), ...(isAttached && index === 0 ? direction === 'column' - ? { borderTopRadius: 'lg' } - : { borderLeftRadius: 'lg' } + ? { borderTopRadius: borderRadius } + : { borderLeftRadius: borderRadius } : {}), ...(isAttached && index === children?.length - 1 ? direction === 'column' - ? { borderBottomRadius: 'lg' } - : { borderRightRadius: 'lg' } + ? { borderBottomRadius: borderRadius } + : { borderRightRadius: borderRadius } : {}), //when buttons are attached, remove double border from them, just keep borderRight in case for direction row and borderBottom in case of direction column for every component @@ -60,7 +65,9 @@ export default memo( (child: JSX.Element, index: number) => { return React.cloneElement(child, { key: `button-group-child-${index}`, - ..._child, + variant, + size, + colorScheme, isDisabled, ...child.props, }); diff --git a/src/components/primitives/Button/types.ts b/src/components/primitives/Button/types.ts index 082b4732b..5a84929d8 100644 --- a/src/components/primitives/Button/types.ts +++ b/src/components/primitives/Button/types.ts @@ -69,9 +69,19 @@ export interface IButtonGroupProps extends IStackProps { */ children: JSX.Element | Array; /** - * - */ - _child: IButtonProps; + * The variant of the button style to use. + * @default 'solid' + */ + variant?: 'ghost' | 'outline' | 'solid' | 'link' | 'unstyled'; + /** + * The start icon element to use in the button. + */ + size?: 'xs' | 'sm' | 'md' | 'lg'; + /** + * The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red"). + * @default 'primary' + */ + colorScheme?: string; /** * If true, the button will be disabled. */ From 619eb823b2285adb05b15d2828f99f6f0ff448a3 Mon Sep 17 00:00:00 2001 From: Vidhi Kataria Date: Tue, 6 Jul 2021 12:32:02 +0530 Subject: [PATCH 11/57] feat: api and example added --- .../components/composites/Card/Basic.tsx | 40 +++++++++++++++++++ .../components/composites/Card/index.tsx | 10 +++++ example/storybook/stories/index.ts | 2 + src/components/composites/Card/Card.tsx | 14 +++++++ src/components/composites/Card/index.tsx | 5 +++ src/components/composites/Card/types.ts | 3 ++ src/components/composites/index.ts | 3 +- src/index.tsx | 2 + src/theme/components/card.ts | 12 ++++++ src/theme/components/index.ts | 2 + 10 files changed, 92 insertions(+), 1 deletion(-) create mode 100644 example/storybook/stories/components/composites/Card/Basic.tsx create mode 100644 example/storybook/stories/components/composites/Card/index.tsx create mode 100644 src/components/composites/Card/Card.tsx create mode 100644 src/components/composites/Card/index.tsx create mode 100644 src/components/composites/Card/types.ts create mode 100644 src/theme/components/card.ts diff --git a/example/storybook/stories/components/composites/Card/Basic.tsx b/example/storybook/stories/components/composites/Card/Basic.tsx new file mode 100644 index 000000000..8a0cdd991 --- /dev/null +++ b/example/storybook/stories/components/composites/Card/Basic.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { Card, Avatar, VStack, Heading, Text } from 'native-base'; + +export function Example() { + return ( + + + + SS + + + About Me + + + Far far away, behind the word mountains, far from the countries + Vokalia and Consonantia, there live the blind texts. Separated they + live in Bookmarksgrove right at the coast of the Semantics, a large + language ocean. + + + + ); +} diff --git a/example/storybook/stories/components/composites/Card/index.tsx b/example/storybook/stories/components/composites/Card/index.tsx new file mode 100644 index 000000000..589bff695 --- /dev/null +++ b/example/storybook/stories/components/composites/Card/index.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react-native'; +import { withKnobs } from '@storybook/addon-knobs'; +import Wrapper from './../../Wrapper'; +import { Example as Basic } from './Basic'; + +storiesOf('Card', module) + .addDecorator(withKnobs) + .addDecorator((getStory: any) => {getStory()}) + .add('Basic', () => ); diff --git a/example/storybook/stories/index.ts b/example/storybook/stories/index.ts index cb6702e18..9ea373405 100644 --- a/example/storybook/stories/index.ts +++ b/example/storybook/stories/index.ts @@ -71,6 +71,8 @@ export * from './components/primitives/Pressable'; export * from './components/primitives/VStack'; // export * from './components/composites/Wrap'; export * from './components/primitives/ZStack'; +// export * from './components/composites/Card'; +export * from './components/composites/Card'; // Hooks export * from './hooks/useBreakpointValue'; diff --git a/src/components/composites/Card/Card.tsx b/src/components/composites/Card/Card.tsx new file mode 100644 index 000000000..36cfde86f --- /dev/null +++ b/src/components/composites/Card/Card.tsx @@ -0,0 +1,14 @@ +import React, { memo, forwardRef } from 'react'; +import Box from '../../primitives/Box'; +import { usePropsResolution } from '../../../hooks/useThemeProps/usePropsResolution'; +import type { ICardProps } from './types'; + +const Card = ({ children, ...props }: ICardProps, ref: any) => { + let newProps = usePropsResolution('Card', props); + return ( + + {children} + + ); +}; +export default memo(forwardRef(Card)); diff --git a/src/components/composites/Card/index.tsx b/src/components/composites/Card/index.tsx new file mode 100644 index 000000000..580448f79 --- /dev/null +++ b/src/components/composites/Card/index.tsx @@ -0,0 +1,5 @@ +import { default as Card } from './Card'; +import type { ICardProps } from './types'; + +export default Card; +export type { ICardProps }; diff --git a/src/components/composites/Card/types.ts b/src/components/composites/Card/types.ts new file mode 100644 index 000000000..3d077a587 --- /dev/null +++ b/src/components/composites/Card/types.ts @@ -0,0 +1,3 @@ +import type { IBoxProps } from '../../primitives'; + +export interface ICardProps extends IBoxProps {} diff --git a/src/components/composites/index.ts b/src/components/composites/index.ts index 61875a8a6..5d461f49f 100644 --- a/src/components/composites/index.ts +++ b/src/components/composites/index.ts @@ -4,6 +4,8 @@ export type { IAspectRatioProps } from './AspectRatio'; export { default as Badge } from './Badge'; export type { IBadgeProps } from './Badge'; +export { default as Card } from "./Card"; + export { default as IconButton } from './IconButton'; export type { IIconButtonProps } from './IconButton'; @@ -140,7 +142,6 @@ export type { } from './Actionsheet'; // export { AppBar } from './AppBar'; - export { Fab } from './Fab'; export type { IFabProps } from './Fab'; export { Typeahead, useTypeahead } from './Typeahead'; diff --git a/src/index.tsx b/src/index.tsx index 05f1afa99..ec87a7992 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -17,6 +17,7 @@ import { Avatar, Breadcrumb, IBreadcrumbProps, + Card, Container, IContainerProps, Divider, @@ -179,6 +180,7 @@ export { Avatar, Badge, Button, + Card, IconButton, Heading, // View, diff --git a/src/theme/components/card.ts b/src/theme/components/card.ts new file mode 100644 index 000000000..1fd659fa4 --- /dev/null +++ b/src/theme/components/card.ts @@ -0,0 +1,12 @@ +const baseStyle = { + shadow: 4, + borderRadius: 'md', + padding: 4, + overflow: 'hidden', + _dark: { bg: 'gray.700' }, +}; +const defaultProps = {}; +export default { + baseStyle, + defaultProps, +}; diff --git a/src/theme/components/index.ts b/src/theme/components/index.ts index 2c3d39e83..458c5f4fa 100644 --- a/src/theme/components/index.ts +++ b/src/theme/components/index.ts @@ -20,6 +20,7 @@ import AvatarGroup from './avatar-group'; import Badge from './badge'; import Breadcrumb from './breadcrumb'; import Button, { ButtonGroup } from './button'; +import Card from './card'; import Center from './center'; import Checkbox from './checkbox'; import Box from './box'; @@ -114,6 +115,7 @@ export default { Breadcrumb, Button, ButtonGroup, + Card, Center, Checkbox, CircularProgress, From e9403b5b0c1eac6dfd42ed4240c53d0f81b3ce30 Mon Sep 17 00:00:00 2001 From: Vidhi Kataria Date: Tue, 6 Jul 2021 12:33:32 +0530 Subject: [PATCH 12/57] feat: api and example added --- src/components/composites/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/composites/index.ts b/src/components/composites/index.ts index 5d461f49f..0a2e964a0 100644 --- a/src/components/composites/index.ts +++ b/src/components/composites/index.ts @@ -4,7 +4,7 @@ export type { IAspectRatioProps } from './AspectRatio'; export { default as Badge } from './Badge'; export type { IBadgeProps } from './Badge'; -export { default as Card } from "./Card"; +export { default as Card } from './Card'; export { default as IconButton } from './IconButton'; export type { IIconButtonProps } from './IconButton'; From 02cff339d49d09ee82f1866ef969238638f24ada Mon Sep 17 00:00:00 2001 From: Vidhi Kataria Date: Tue, 6 Jul 2021 18:18:10 +0530 Subject: [PATCH 13/57] fix: design fixes --- example/storybook/stories/components/composites/Card/Basic.tsx | 2 +- src/theme/components/card.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/example/storybook/stories/components/composites/Card/Basic.tsx b/example/storybook/stories/components/composites/Card/Basic.tsx index 8a0cdd991..1ebdcbc82 100644 --- a/example/storybook/stories/components/composites/Card/Basic.tsx +++ b/example/storybook/stories/components/composites/Card/Basic.tsx @@ -27,7 +27,7 @@ export function Example() { textAlign="center" fontSize={12} _light={{ color: 'blueGray.500' }} - _dark={{ color: 'blueGray.200' }} + _dark={{ color: 'gray.50' }} > Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they diff --git a/src/theme/components/card.ts b/src/theme/components/card.ts index 1fd659fa4..612d690e1 100644 --- a/src/theme/components/card.ts +++ b/src/theme/components/card.ts @@ -4,6 +4,7 @@ const baseStyle = { padding: 4, overflow: 'hidden', _dark: { bg: 'gray.700' }, + _light: { bg: 'gray.100' }, }; const defaultProps = {}; export default { From be4bc6c1c93efd2f7a525e82c7807662e2ea49ce Mon Sep 17 00:00:00 2001 From: Nishan Date: Wed, 7 Jul 2021 09:23:17 +0530 Subject: [PATCH 14/57] Add nativebase, expo and yarn version in bug report template --- .github/ISSUE_TEMPLATE/bug_report.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index ac2525253..51b0f7d19 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -35,10 +35,15 @@ It would be easier for us to debug if you can reproduce the error in a codesandb If applicable, add screenshots to help explain your problem. **Platform** + - NativeBase version [e.g. 3.0.1] - Device: [e.g. iPhone6] - OS: [e.g. iOS8.1] - Browser [e.g. stock browser, safari] - - Version [e.g. 22] + - Browser version [e.g. 22] + - React Native version [e.g. 0.64] + - Expo sdk version [e.g. 41] + - node [e.g. 14.16.1] + - yarn or npm [e.g. 6.1] **Additional information** 1. Add any other context about the problem here. From 20240a784509372d7052f2c6195c09e7aa241514 Mon Sep 17 00:00:00 2001 From: Nishan Date: Wed, 7 Jul 2021 09:29:04 +0530 Subject: [PATCH 15/57] Add feature request template --- .github/ISSUE_TEMPLATE/feature_request.md | 25 +++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 .github/ISSUE_TEMPLATE/feature_request.md diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md new file mode 100644 index 000000000..900e2c220 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -0,0 +1,25 @@ +--- +name: Feature request +about: Create a feature request +title: '' +labels: v3 +assignees: '' + +--- + +Thanks for filing an issue 😄! + +Please search open/closed issues before submitting. Someone +might have asked the same thing before 😉! + +**Is your feature request related to a problem? Please describe.** +A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] + +**Describe the solution you'd like** +A clear and concise description of what you want to happen. + +**Describe alternatives you've considered** +A clear and concise description of any alternative solutions or features you've considered. + +**Additional context** +Add any other context or screenshots about the feature request here. From 549b1c40c22f00ffa771675acd600d6436c6d2a3 Mon Sep 17 00:00:00 2001 From: Nishan Bende Date: Wed, 7 Jul 2021 09:46:59 +0530 Subject: [PATCH 16/57] fix: add comments in font family resolver --- src/hooks/useResolvedFontFamily.ts | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/hooks/useResolvedFontFamily.ts b/src/hooks/useResolvedFontFamily.ts index c3444f213..39b4a44a5 100644 --- a/src/hooks/useResolvedFontFamily.ts +++ b/src/hooks/useResolvedFontFamily.ts @@ -1,20 +1,25 @@ import { useTheme } from './useTheme'; -type IUseResolvedFontFamily = { +/** + * + * @param props + * @returns resolved fontFamily + * @description Combination of fontWeight, fontStyle and font family is fully supported on web but on Android we need to pass the exact font family. + * for e.g. If we load Roboto-Light-Italic.ttf using css, we can use fontFamily: Roboto, fontWeight: 300, fontStyle: italic on web, but same may not work on all the platforms. Other platform needs to set fontFamily: Roboto-Light-Italic in order to work. + * So this function's purpose is to intake styles like fontFamily: Roboto, fontWeight: 300, fontStyle: Italic and return fontFamily: Roboto-Light-Italic depending upon the fontConfig token in typography theme. + * This function depends upon fontConfig token in typography for mapping. + */ +export function useResolvedFontFamily(props: { fontFamily: string; fontStyle: string; fontWeight: string | number; -}; - -// Android doesn't support fontWeight or fontStyle properties. So, we pass fontFamily instead. -export function useResolvedFontFamily(props: IUseResolvedFontFamily) { +}) { const { fontFamily, fontStyle = 'normal', fontWeight = 400 } = props; const { fontConfig, fontWeights, fonts } = useTheme(); if (fontFamily in fonts) { const fontToken = fonts[fontFamily]; if (fontConfig && fontConfig[fontToken]) { - // fontWeights are also specified using "400" const parsedFontWeight = parseInt(fontWeight as any); let fontWeightNumber = Number.isNaN(parsedFontWeight) ? fontWeights[fontWeight] From 1e4b1712cf96b2197cb3ea666800f7098f776081 Mon Sep 17 00:00:00 2001 From: meenu Date: Wed, 7 Jul 2021 16:11:55 +0530 Subject: [PATCH 17/57] fix: added storybook examples for buttongroup separately --- .../primitives/Button/ButtonGroup.tsx | 18 ------ .../primitives/ButtonGroup/basic.tsx | 11 ++++ .../primitives/ButtonGroup/direction.tsx | 37 ++++++++++++ .../primitives/ButtonGroup/index.tsx | 18 ++++++ .../primitives/ButtonGroup/isAttached.tsx | 60 +++++++++++++++++++ .../primitives/ButtonGroup/sizes.tsx | 17 ++++++ .../primitives/ButtonGroup/variants.tsx | 58 ++++++++++++++++++ example/storybook/stories/index.ts | 1 + src/hooks/useContrastText.ts | 16 ++--- 9 files changed, 210 insertions(+), 26 deletions(-) delete mode 100644 example/storybook/stories/components/primitives/Button/ButtonGroup.tsx create mode 100644 example/storybook/stories/components/primitives/ButtonGroup/basic.tsx create mode 100644 example/storybook/stories/components/primitives/ButtonGroup/direction.tsx create mode 100644 example/storybook/stories/components/primitives/ButtonGroup/index.tsx create mode 100644 example/storybook/stories/components/primitives/ButtonGroup/isAttached.tsx create mode 100644 example/storybook/stories/components/primitives/ButtonGroup/sizes.tsx create mode 100644 example/storybook/stories/components/primitives/ButtonGroup/variants.tsx diff --git a/example/storybook/stories/components/primitives/Button/ButtonGroup.tsx b/example/storybook/stories/components/primitives/Button/ButtonGroup.tsx deleted file mode 100644 index bfcca12e0..000000000 --- a/example/storybook/stories/components/primitives/Button/ButtonGroup.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { Button } from 'native-base'; - -export const Example = () => { - return ( - - - - - ); -}; diff --git a/example/storybook/stories/components/primitives/ButtonGroup/basic.tsx b/example/storybook/stories/components/primitives/ButtonGroup/basic.tsx new file mode 100644 index 000000000..6b6ccac48 --- /dev/null +++ b/example/storybook/stories/components/primitives/ButtonGroup/basic.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { Button } from 'native-base'; + +export const Example = () => { + return ( + + + + + ); +}; diff --git a/example/storybook/stories/components/primitives/ButtonGroup/direction.tsx b/example/storybook/stories/components/primitives/ButtonGroup/direction.tsx new file mode 100644 index 000000000..0925cc632 --- /dev/null +++ b/example/storybook/stories/components/primitives/ButtonGroup/direction.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { Button, Divider, Heading, VStack } from 'native-base'; + +export const Example = () => { + return ( + + {/* Row */} + + Row + + + + + + + + + {/* Column */} + + + Column + + + + + + + ); +}; diff --git a/example/storybook/stories/components/primitives/ButtonGroup/index.tsx b/example/storybook/stories/components/primitives/ButtonGroup/index.tsx new file mode 100644 index 000000000..64a938e38 --- /dev/null +++ b/example/storybook/stories/components/primitives/ButtonGroup/index.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react-native'; +import { withKnobs } from '@storybook/addon-knobs'; +import { Example as Sizes } from './sizes'; +import { Example as Basic } from './basic'; +import { Example as Variants } from './variants'; +import { Example as IsAttached } from './isAttached'; +import { Example as Direction } from './direction'; +import Wrapper from './../../Wrapper'; + +storiesOf('ButtonGroup', module) + .addDecorator(withKnobs) + .addDecorator((getStory: any) => {getStory()}) + .add('Basic', () => ) + .add('Variants', () => ) + .add('Sizes', () => ) + .add('isAttached', () => ) + .add('direction', () => ); diff --git a/example/storybook/stories/components/primitives/ButtonGroup/isAttached.tsx b/example/storybook/stories/components/primitives/ButtonGroup/isAttached.tsx new file mode 100644 index 000000000..8d068ea6d --- /dev/null +++ b/example/storybook/stories/components/primitives/ButtonGroup/isAttached.tsx @@ -0,0 +1,60 @@ +import React from 'react'; +import { Button, VStack, Heading, Divider } from 'native-base'; + +export const Example = () => { + return ( + + {/* Solid */} + + Solid + + + + + + + + + {/* Outline */} + + Outline + + + + + + + + + + Link + + + + + + + + + {/* Unstyled */} + + Ghost + + + + + + + + + {/* Unstyled */} + + Unstyled + + + + + + + ); +}; diff --git a/example/storybook/stories/components/primitives/ButtonGroup/sizes.tsx b/example/storybook/stories/components/primitives/ButtonGroup/sizes.tsx new file mode 100644 index 000000000..a8db74d6b --- /dev/null +++ b/example/storybook/stories/components/primitives/ButtonGroup/sizes.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { Button, Box } from 'native-base'; + +export const Example = () => { + return ( + + {['xs', 'sm', 'md', 'lg'].map((size) => ( + + {/* @ts-ignore */} + + + ))} + + ); +}; diff --git a/example/storybook/stories/components/primitives/ButtonGroup/variants.tsx b/example/storybook/stories/components/primitives/ButtonGroup/variants.tsx new file mode 100644 index 000000000..b446ba840 --- /dev/null +++ b/example/storybook/stories/components/primitives/ButtonGroup/variants.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import { Button, Divider, Heading, VStack } from 'native-base'; + +export const Example = () => { + return ( + + {/* Solid */} + + + Solid + + + + + + + + + Outline + + {/* Outline */} + + + + + + + + Link + + {/* Link */} + + + + + + + + Ghost + + {/* Ghost */} + + + + + + + + Unstyled + + {/* Unstyled */} + + + + + + ); +}; diff --git a/example/storybook/stories/index.ts b/example/storybook/stories/index.ts index cb6702e18..69ad9efa8 100644 --- a/example/storybook/stories/index.ts +++ b/example/storybook/stories/index.ts @@ -17,6 +17,7 @@ export * from './components/composites/Badge'; export * from './components/primitives/Box'; // export * from './components/composites/Breadcrumb'; export * from './components/primitives/Button'; +export * from './components/primitives/ButtonGroup'; export * from './components/composites/Center'; export * from './components/primitives/Checkbox'; // export * from './components/composites/CircularProgress'; diff --git a/src/hooks/useContrastText.ts b/src/hooks/useContrastText.ts index dfcc96dd0..92f3b8435 100644 --- a/src/hooks/useContrastText.ts +++ b/src/hooks/useContrastText.ts @@ -109,8 +109,8 @@ function getContrastRatio(foreground: string, background: string) { } const themeColorsThresholdShades: any = { - rose: 900, - pink: 900, + rose: 500, + pink: 500, fuchsia: 800, purple: 700, violet: 600, @@ -123,19 +123,19 @@ const themeColorsThresholdShades: any = { green: 400, lime: 600, yellow: 800, - amber: 900, - orange: 900, - red: 900, + amber: 500, + orange: 500, + red: 500, warmGray: 500, trueGray: 500, gray: 500, coolGray: 500, blueGray: 500, dark: 500, - danger: 900, - error: 900, + danger: 500, + error: 500, success: 400, - warning: 900, + warning: 500, muted: 500, primary: 500, info: 400, From 8527f4e3fe9ab6c8cb5828c86c19c3d98b556d6f Mon Sep 17 00:00:00 2001 From: meenu Date: Thu, 8 Jul 2021 19:27:44 +0530 Subject: [PATCH 18/57] feat: hidden component working --- .../components/primitives/Hidden/basic.tsx | 17 ++++ .../Hidden/hiddenFromAndToBreakpoints.tsx | 22 +++++ .../primitives/Hidden/hiddenOnColorModes.tsx | 22 +++++ .../primitives/Hidden/hiddenOnPlatforms.tsx | 17 ++++ .../Hidden/hiddenOnlyOnBreakPoints.tsx | 17 ++++ .../components/primitives/Hidden/index.tsx | 18 ++++ example/storybook/stories/index.ts | 1 + src/components/primitives/Hidden/index.tsx | 86 +++++++++++++++++++ src/components/primitives/Hidden/types.ts | 32 +++++++ src/components/primitives/index.ts | 3 + src/index.tsx | 4 + 11 files changed, 239 insertions(+) create mode 100644 example/storybook/stories/components/primitives/Hidden/basic.tsx create mode 100644 example/storybook/stories/components/primitives/Hidden/hiddenFromAndToBreakpoints.tsx create mode 100644 example/storybook/stories/components/primitives/Hidden/hiddenOnColorModes.tsx create mode 100644 example/storybook/stories/components/primitives/Hidden/hiddenOnPlatforms.tsx create mode 100644 example/storybook/stories/components/primitives/Hidden/hiddenOnlyOnBreakPoints.tsx create mode 100644 example/storybook/stories/components/primitives/Hidden/index.tsx create mode 100644 src/components/primitives/Hidden/index.tsx create mode 100644 src/components/primitives/Hidden/types.ts diff --git a/example/storybook/stories/components/primitives/Hidden/basic.tsx b/example/storybook/stories/components/primitives/Hidden/basic.tsx new file mode 100644 index 000000000..9e050f0d7 --- /dev/null +++ b/example/storybook/stories/components/primitives/Hidden/basic.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { Hidden, Text, Stack, Box } from 'native-base'; + +export function Example() { + return ( + + + This text will be always visible. + + + + This text will be always hidden. + + + + ); +} diff --git a/example/storybook/stories/components/primitives/Hidden/hiddenFromAndToBreakpoints.tsx b/example/storybook/stories/components/primitives/Hidden/hiddenFromAndToBreakpoints.tsx new file mode 100644 index 000000000..87dcbcb6c --- /dev/null +++ b/example/storybook/stories/components/primitives/Hidden/hiddenFromAndToBreakpoints.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { Hidden, Text, Stack, Box } from 'native-base'; + +export function Example() { + return ( + + + This text will be always visible. + + + + This text will be hidden from sm to lg screens. + + + + + hello + + + + ); +} diff --git a/example/storybook/stories/components/primitives/Hidden/hiddenOnColorModes.tsx b/example/storybook/stories/components/primitives/Hidden/hiddenOnColorModes.tsx new file mode 100644 index 000000000..2752fcf7a --- /dev/null +++ b/example/storybook/stories/components/primitives/Hidden/hiddenOnColorModes.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { Hidden, Text, Stack, Box } from 'native-base'; + +export function Example() { + return ( + + + This text will be visible on every colormode. + + + + This text will be hidden on light mode + + + + + This text will be hidden on dark mode + + + + ); +} diff --git a/example/storybook/stories/components/primitives/Hidden/hiddenOnPlatforms.tsx b/example/storybook/stories/components/primitives/Hidden/hiddenOnPlatforms.tsx new file mode 100644 index 000000000..089565484 --- /dev/null +++ b/example/storybook/stories/components/primitives/Hidden/hiddenOnPlatforms.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { Hidden, Text, Stack, Box } from 'native-base'; + +export function Example() { + return ( + + + This text will be visible on every platform. + + + + This text will be hidden on android and web. + + + + ); +} diff --git a/example/storybook/stories/components/primitives/Hidden/hiddenOnlyOnBreakPoints.tsx b/example/storybook/stories/components/primitives/Hidden/hiddenOnlyOnBreakPoints.tsx new file mode 100644 index 000000000..5f7d5097c --- /dev/null +++ b/example/storybook/stories/components/primitives/Hidden/hiddenOnlyOnBreakPoints.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { Hidden, Text, Stack, Box } from 'native-base'; + +export function Example() { + return ( + + + This text will be visible on every screen size. + + + + This text will be hidden on sm and lg only. + + + + ); +} diff --git a/example/storybook/stories/components/primitives/Hidden/index.tsx b/example/storybook/stories/components/primitives/Hidden/index.tsx new file mode 100644 index 000000000..3961e4e1d --- /dev/null +++ b/example/storybook/stories/components/primitives/Hidden/index.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react-native'; +import { withKnobs } from '@storybook/addon-knobs'; +import Wrapper from './../../Wrapper'; +import { Example as Basic } from './Basic'; +import { Example as HiddenFromAndToBreakpoints } from './hiddenFromAndToBreakpoints'; +import { Example as HiddenOnColorModes } from './hiddenOnColorModes'; +import { Example as HiddenOnlyOnBreakPoints } from './hiddenOnlyOnBreakPoints'; +import { Example as HiddenOnPlatforms } from './hiddenOnPlatforms'; + +storiesOf('Hidden', module) + .addDecorator(withKnobs) + .addDecorator((getStory: any) => {getStory()}) + .add('basic', () => ) + .add('hiddenOnColorModes', () => ) + .add('HiddenFromAndToBreakpoints', () => ) + .add('hiddenOnlyOnBreakPoints', () => ) + .add('hiddenOnPlatforms', () => ); diff --git a/example/storybook/stories/index.ts b/example/storybook/stories/index.ts index cb6702e18..0b6f6d1cd 100644 --- a/example/storybook/stories/index.ts +++ b/example/storybook/stories/index.ts @@ -31,6 +31,7 @@ export * from './components/composites/Fab'; export * from './components/primitives/Flex'; export * from './components/composites/FormControl'; export * from './components/primitives/Heading'; +export * from './components/primitives/Hidden'; export * from './components/primitives/HStack'; export * from './components/primitives/Icon'; export * from './components/composites/IconButton'; diff --git a/src/components/primitives/Hidden/index.tsx b/src/components/primitives/Hidden/index.tsx new file mode 100644 index 000000000..19f9adb76 --- /dev/null +++ b/src/components/primitives/Hidden/index.tsx @@ -0,0 +1,86 @@ +import { memo, forwardRef } from 'react'; +import type { IHiddenProps } from './types'; +import { usePropsResolution } from '../../../hooks/useThemeProps'; +import { useBreakpointValue, useTheme, useToken } from '../../../hooks'; +import { useColorMode } from '../../../core/color-mode/hooks'; +import { Platform } from 'react-native'; + +export function Hidden({ children, ...props }: IHiddenProps) { + const { from, till, only, platform, colorMode } = usePropsResolution( + 'Hidden', + props, + { + ignoreProps: ['only', 'platform'], + } + ); + const { breakpoints } = useTheme(); + const currentColorMode = useColorMode(); + + const breakpointValueObject = Object.keys(breakpoints).reduce( + (obj: any, val: string) => { + obj[val] = val; + return obj; + }, + {} + ); + const breakpointValue = useBreakpointValue(breakpointValueObject); + const [currentBreakpointValue] = useToken('breakpoints', [breakpointValue]); + const [fromBreakPointValue] = useToken('breakpoints', [from]); + const [tillBreakPointValue] = useToken('breakpoints', [till]); + + //if no prop is passed, it will hide the element wrapped with hidden + if ( + from === undefined && + till === undefined && + only === undefined && + colorMode === undefined && + platform === undefined + ) { + return null; + } + + //if from and till prop exists, it will hide the element wrapped accordingly + else if ( + from && + till && + currentBreakpointValue >= fromBreakPointValue && + currentBreakpointValue < tillBreakPointValue + ) { + return null; + } + + //if from prop exists, it will hide the element wrapped starting from that breakpoint. + else if (from && !till && currentBreakpointValue >= fromBreakPointValue) { + return null; + } + + //if till prop exists, it will hide the element wrapped starting from 0 till that breakpoint. + else if (till && !from && currentBreakpointValue < tillBreakPointValue) { + return null; + } + + //if only prop exists and is array, check that array consists current breakpoint value, and if that exists, hide on that breakpoint to next breakpoint. + // if only prop is string, hide on that breakpoint to next breakpoint. + else if ( + (Array.isArray(only) && only.includes(breakpointValue)) || + only === breakpointValue + ) { + return null; + } + //if platform prop exists and is array, check that array consists current platform value, and if that exists, hide on that platform. + // if platform prop is string, hide on that platform. + else if ( + (Array.isArray(platform) && platform.includes(Platform.OS)) || + platform === Platform.OS + ) { + return null; + } + //if colormode prop is valid string, hide on that colormode. + else if (colorMode === currentColorMode.colorMode) { + return null; + } + return children; +} + +export default memo(forwardRef(Hidden)); +export type { IHiddenProps }; diff --git a/src/components/primitives/Hidden/types.ts b/src/components/primitives/Hidden/types.ts new file mode 100644 index 000000000..75e5eb22e --- /dev/null +++ b/src/components/primitives/Hidden/types.ts @@ -0,0 +1,32 @@ +type LiteralUnion = T | (U & {}); + +export interface IHiddenProps { + /** + * The up of the hidden. + */ + from?: LiteralUnion<'base' | 'sm' | 'md' | 'lg' | 'xl'>; + /** + * The down of the hidden. + */ + till?: LiteralUnion<'base' | 'sm' | 'md' | 'lg' | 'xl'>; + /** + * The only of the hidden. + */ + only?: + | LiteralUnion<'base' | 'sm' | 'md' | 'lg' | 'xl'> + | Array>; + /** + * The colormode of the hidden. + */ + colorMode?: 'light' | 'dark'; + /** + * The platform of the hidden. + */ + platform?: + | LiteralUnion<'ios' | 'android' | 'web'> + | Array>; + /** + * + */ + children: React.ReactElement | null; +} diff --git a/src/components/primitives/index.ts b/src/components/primitives/index.ts index 038752e26..189d6a986 100644 --- a/src/components/primitives/index.ts +++ b/src/components/primitives/index.ts @@ -58,6 +58,9 @@ export type { ILinkProps } from './Link'; export { List } from './List'; export type { IListProps, IListItemProps } from './List'; +export { Hidden } from './Hidden'; +export type { IHiddenProps } from './Hidden'; + export { VisuallyHidden } from './VisuallyHidden'; export { default as ZStack } from './ZStack'; diff --git a/src/index.tsx b/src/index.tsx index 05f1afa99..5935cb9de 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -122,6 +122,8 @@ import { IRadioProps, IRadioValue, IRadioGroupProps, + Hidden, + IHiddenProps, Button, IButtonProps, Column, @@ -181,6 +183,7 @@ export { Button, IconButton, Heading, + Hidden, // View, Text, Code, @@ -265,6 +268,7 @@ export type { ITextProps, ICheckboxProps, ICheckboxGroupProps, + IHiddenProps, IRadioProps, IRadioValue, IRadioGroupProps, From 6f31d88a581742ab36cf622876f9b18f667c9d53 Mon Sep 17 00:00:00 2001 From: amars29 Date: Fri, 9 Jul 2021 16:49:41 +0530 Subject: [PATCH 19/57] fix: storybook example - stack, textarea, pressable --- .../basic/KeyboardAvoidingView/Basic.tsx | 41 ++++++++++++++++--- .../components/basic/ScrollView/Basic.tsx | 4 +- .../components/composites/Alert/action.tsx | 2 +- .../composites/Breadcrumb/Composition.tsx | 7 ++-- .../composites/FormControl/CustomStyle.tsx | 3 +- .../components/primitives/Column/Basic.tsx | 8 ++-- .../components/primitives/Image/Sizes.tsx | 3 +- .../components/primitives/Input/Variant.tsx | 3 +- .../primitives/Link/CompositeLink.tsx | 9 +++- .../components/primitives/Pressable/Basic.tsx | 8 +++- .../primitives/Pressable/Events.tsx | 7 +++- .../components/primitives/Stack/divider.tsx | 1 - .../primitives/TextArea/invalid.tsx | 14 ++++++- .../components/primitives/TextArea/size.tsx | 10 ++++- .../components/primitives/ZStack/example.tsx | 26 +++++++++--- 15 files changed, 110 insertions(+), 36 deletions(-) diff --git a/example/storybook/stories/components/basic/KeyboardAvoidingView/Basic.tsx b/example/storybook/stories/components/basic/KeyboardAvoidingView/Basic.tsx index 75300dea0..69aa6b5fc 100644 --- a/example/storybook/stories/components/basic/KeyboardAvoidingView/Basic.tsx +++ b/example/storybook/stories/components/basic/KeyboardAvoidingView/Basic.tsx @@ -1,11 +1,40 @@ import React from 'react'; -import { Input, Box, KeyboardAvoidingView } from 'native-base'; +import { + Input, + KeyboardAvoidingView, + View, + Text, + Button, + VStack, + useBreakpointValue, +} from 'native-base'; export const Example = () => { + const isLargeScreen = useBreakpointValue({ + base: false, + sm: false, + md: false, + lg: true, + }); return ( - - - - - + + {isLargeScreen ? ( + Please see the example in your mobile to observe the effect + ) : ( + + + Header + + + + + + + )} + ); }; diff --git a/example/storybook/stories/components/basic/ScrollView/Basic.tsx b/example/storybook/stories/components/basic/ScrollView/Basic.tsx index bcc001625..11337d97c 100644 --- a/example/storybook/stories/components/basic/ScrollView/Basic.tsx +++ b/example/storybook/stories/components/basic/ScrollView/Basic.tsx @@ -3,12 +3,12 @@ import { ScrollView, VStack, Center } from 'native-base'; export const Example = () => { return ( - + {[ 'one', 'two', diff --git a/example/storybook/stories/components/composites/Alert/action.tsx b/example/storybook/stories/components/composites/Alert/action.tsx index ce5652f7a..33109386a 100644 --- a/example/storybook/stories/components/composites/Alert/action.tsx +++ b/example/storybook/stories/components/composites/Alert/action.tsx @@ -17,7 +17,7 @@ export function Example() { status="error" action={ } + icon={} onPress={() => setShow(false)} /> } diff --git a/example/storybook/stories/components/composites/Breadcrumb/Composition.tsx b/example/storybook/stories/components/composites/Breadcrumb/Composition.tsx index fba08ae81..65d3be6bb 100644 --- a/example/storybook/stories/components/composites/Breadcrumb/Composition.tsx +++ b/example/storybook/stories/components/composites/Breadcrumb/Composition.tsx @@ -14,7 +14,7 @@ export const Example = () => { - + } mr={1} size="xs" /> Home @@ -23,8 +23,7 @@ export const Example = () => { } mr={1} size="xs" /> @@ -39,7 +38,7 @@ export const Example = () => { isExternal > - + } mr={1} size="xs" /> Github (This is currently active) diff --git a/example/storybook/stories/components/composites/FormControl/CustomStyle.tsx b/example/storybook/stories/components/composites/FormControl/CustomStyle.tsx index c85679d90..0f33e4b16 100644 --- a/example/storybook/stories/components/composites/FormControl/CustomStyle.tsx +++ b/example/storybook/stories/components/composites/FormControl/CustomStyle.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import { FormControl, Input, Stack, Text } from 'native-base'; -import { ScrollView } from 'react-native'; +import { FormControl, Input, Stack, Text, ScrollView } from 'native-base'; export const Example = () => { return ( diff --git a/example/storybook/stories/components/primitives/Column/Basic.tsx b/example/storybook/stories/components/primitives/Column/Basic.tsx index bce0d1ed9..ce20e57f6 100644 --- a/example/storybook/stories/components/primitives/Column/Basic.tsx +++ b/example/storybook/stories/components/primitives/Column/Basic.tsx @@ -3,10 +3,10 @@ import { Column, Box } from 'native-base'; export const Example = () => { return ( - - - - + + + + ); }; diff --git a/example/storybook/stories/components/primitives/Image/Sizes.tsx b/example/storybook/stories/components/primitives/Image/Sizes.tsx index d20d80461..e6f748b59 100644 --- a/example/storybook/stories/components/primitives/Image/Sizes.tsx +++ b/example/storybook/stories/components/primitives/Image/Sizes.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import { VStack, Image } from 'native-base'; -import { ScrollView } from 'react-native'; +import { VStack, Image, ScrollView } from 'native-base'; export function Example() { return ( diff --git a/example/storybook/stories/components/primitives/Input/Variant.tsx b/example/storybook/stories/components/primitives/Input/Variant.tsx index 8c50bb588..33cd2234b 100644 --- a/example/storybook/stories/components/primitives/Input/Variant.tsx +++ b/example/storybook/stories/components/primitives/Input/Variant.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import { Input, Stack, Center, Heading } from 'native-base'; -import { ScrollView } from 'react-native'; +import { Input, Stack, Center, Heading, ScrollView } from 'native-base'; export const Example = () => { return ( diff --git a/example/storybook/stories/components/primitives/Link/CompositeLink.tsx b/example/storybook/stories/components/primitives/Link/CompositeLink.tsx index 39dcbf62f..3460e22bf 100644 --- a/example/storybook/stories/components/primitives/Link/CompositeLink.tsx +++ b/example/storybook/stories/components/primitives/Link/CompositeLink.tsx @@ -18,10 +18,15 @@ export const Example = () => { Box - + Clicking anywhere will trigger the link - + Box diff --git a/example/storybook/stories/components/primitives/Pressable/Basic.tsx b/example/storybook/stories/components/primitives/Pressable/Basic.tsx index ffe14dc1a..ed0c83fca 100644 --- a/example/storybook/stories/components/primitives/Pressable/Basic.tsx +++ b/example/storybook/stories/components/primitives/Pressable/Basic.tsx @@ -4,7 +4,13 @@ import { Alert } from 'react-native'; export function Example() { return ( - Alert.alert('hello')} p={2} borderWidth={1}> + Alert.alert('hello')} + p={2} + borderWidth={1} + _light={{ borderColor: 'dark.200' }} + _dark={{ borderColor: 'dark.600' }} + > hello world ); diff --git a/example/storybook/stories/components/primitives/Pressable/Events.tsx b/example/storybook/stories/components/primitives/Pressable/Events.tsx index 77f536fb3..bddeb5ab0 100644 --- a/example/storybook/stories/components/primitives/Pressable/Events.tsx +++ b/example/storybook/stories/components/primitives/Pressable/Events.tsx @@ -3,7 +3,12 @@ import { Pressable, Text } from 'native-base'; export function Example() { return ( - + {({ isHovered, isFocused, isPressed }) => { return ( diff --git a/example/storybook/stories/components/primitives/Stack/divider.tsx b/example/storybook/stories/components/primitives/Stack/divider.tsx index 0d76837fa..c0a21864c 100644 --- a/example/storybook/stories/components/primitives/Stack/divider.tsx +++ b/example/storybook/stories/components/primitives/Stack/divider.tsx @@ -17,7 +17,6 @@ export function Example() { Simple Easy Beautiful - NativeBase diff --git a/example/storybook/stories/components/primitives/TextArea/invalid.tsx b/example/storybook/stories/components/primitives/TextArea/invalid.tsx index d6d2f97d0..2613dcc3e 100644 --- a/example/storybook/stories/components/primitives/TextArea/invalid.tsx +++ b/example/storybook/stories/components/primitives/TextArea/invalid.tsx @@ -7,11 +7,21 @@ export const Example = () => {
Invalid TextArea
-