-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
MUK035: Implement Popup component and its' stories + implement helper…
… EqualSidesContainer component and its' props
- Loading branch information
Showing
8 changed files
with
429 additions
and
33 deletions.
There are no files selected for viewing
31 changes: 31 additions & 0 deletions
31
.storybook/stories/EqualSidesContainer/EqualSidesContainer.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { Label, LabelProps } from '@appello/mobile-ui'; | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
| import React from 'react'; | ||
|
|
||
| import { CONFIG_CATEGORY } from '../../constants'; | ||
|
|
||
| const meta = { | ||
| title: 'Basic/Label', | ||
| component: Label, | ||
| render: ({ ...restProps }) => { | ||
| return <Label {...restProps} />; | ||
| }, | ||
| args: { | ||
| children: 'Label', | ||
| bgColor: '#1C88EC', | ||
| textColor: '#fff', | ||
| }, | ||
| argTypes: { | ||
| textProps: { | ||
| table: { | ||
| category: CONFIG_CATEGORY, | ||
| }, | ||
| }, | ||
| }, | ||
| } satisfies Meta<LabelProps>; | ||
|
|
||
| type Story = StoryObj<LabelProps>; | ||
|
|
||
| export const DefaultStory: Story = {}; | ||
|
|
||
| export default meta; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| import { Button, ButtonProps, EqualSidesContainer, Popup, PopupProps } from '@appello/mobile-ui'; | ||
| import CalendarIcon from '@appello/mobile-ui/icons/unicons/calendar.svg'; | ||
| import { BottomSheetModalProvider } from '@gorhom/bottom-sheet'; | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
| import React, { useEffect, useMemo, useState } from 'react'; | ||
|
|
||
| const meta = { | ||
| title: 'Basic/Popup', | ||
| component: Popup, | ||
| render: ({ opened: propOpened, onClose, buttons, topAccessory, ...props }) => { | ||
| // eslint-disable-next-line react-hooks/rules-of-hooks | ||
| const [opened, setOpened] = useState(false); | ||
| // eslint-disable-next-line react-hooks/rules-of-hooks | ||
| useEffect(() => { | ||
| setOpened(!!propOpened); | ||
| }, [propOpened]); | ||
|
|
||
| const closePopup = () => setOpened(false); | ||
|
|
||
| const CloseButton: ButtonProps = { | ||
| children: 'Close', | ||
| variant: 'primary', | ||
| onPress: closePopup, | ||
| }; | ||
| const CancelButton: ButtonProps = { | ||
| children: 'Cancel', | ||
| variant: 'secondary', | ||
| onPress: closePopup, | ||
| }; | ||
| const OkButton: ButtonProps = { | ||
| children: 'Ok', | ||
| variant: 'secondary', | ||
| onPress: closePopup, | ||
| }; | ||
|
|
||
| // eslint-disable-next-line react-hooks/rules-of-hooks | ||
| const buttonProps = useMemo<PopupProps['buttons'] | undefined>(() => { | ||
| const buttonsToShow = buttons as unknown as 'none' | 'one' | 'two' | 'three'; | ||
| if (buttonsToShow === 'one') return [CloseButton]; | ||
| if (buttonsToShow === 'two') return [CancelButton, CloseButton]; | ||
| if (buttonsToShow === 'three') return [CancelButton, OkButton, CloseButton]; | ||
|
|
||
| return undefined; | ||
| }, [buttons]); | ||
|
|
||
| // eslint-disable-next-line react-hooks/rules-of-hooks | ||
| const renderTopAccessory = useMemo( | ||
| () => ( | ||
| <EqualSidesContainer bgColor="#F9F9FB" borderRadius="rounded" size={110}> | ||
| <CalendarIcon height={38} width={38} /> | ||
| </EqualSidesContainer> | ||
| ), | ||
| [], | ||
| ); | ||
|
|
||
| return ( | ||
| <BottomSheetModalProvider> | ||
| <Button variant="primary" onPress={() => setOpened(true)}> | ||
| Open popup | ||
| </Button> | ||
| <Popup | ||
| buttons={buttonProps} | ||
| opened={opened} | ||
| topAccessory={topAccessory ? renderTopAccessory : undefined} | ||
| onClose={onClose ? closePopup : undefined} | ||
| {...props} | ||
| /> | ||
| </BottomSheetModalProvider> | ||
| ); | ||
| }, | ||
| args: { | ||
| opened: false, | ||
| title: 'Title', | ||
| message: 'Lorem ipsum dolor sit amet, consecteturadipiscing elit. Congue velit massa non.', | ||
| }, | ||
| argTypes: { | ||
| onClose: { control: 'boolean' }, | ||
| topAccessory: { control: 'boolean' }, | ||
| buttons: { | ||
| control: 'radio', | ||
| options: ['none', 'one', 'two', 'three'], | ||
| }, | ||
| }, | ||
| } satisfies Meta<PopupProps>; | ||
|
|
||
| type Story = StoryObj<PopupProps>; | ||
|
|
||
| export const DefaultStory: Story = {}; | ||
|
|
||
| export default meta; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import React from 'react'; | ||
| import { ColorValue, TouchableOpacity, TouchableOpacityProps } from 'react-native'; | ||
|
|
||
| import { makeStyles } from '../../../utils'; | ||
|
|
||
| export interface EqualSidesContainerProps extends TouchableOpacityProps { | ||
| /** | ||
| * Width and height of the container | ||
| * */ | ||
| size: number; | ||
| /** | ||
| * Color of the container background | ||
| * */ | ||
| bgColor?: ColorValue; | ||
| /** | ||
| * Border radius of the container.<br> | ||
| * Could have a specific value if passed as a number or just be round. | ||
| * */ | ||
| borderRadius?: 'rounded' | number; | ||
| } | ||
|
|
||
| /** | ||
| * Simple helper component mostly used as a background for icons | ||
| * */ | ||
| export const EqualSidesContainer: React.FC<EqualSidesContainerProps> = ({ | ||
| style, | ||
| borderRadius, | ||
| onPress, | ||
| bgColor, | ||
| size, | ||
| ...touchableProps | ||
| }) => { | ||
| const styles = useStyles({ borderRadius, bgColor, size }); | ||
|
|
||
| return ( | ||
| <TouchableOpacity | ||
| {...touchableProps} | ||
| disabled={!onPress} | ||
| style={[styles.container, style]} | ||
| onPress={onPress} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| const useStyles = makeStyles( | ||
| (theme, { size, bgColor, borderRadius }: EqualSidesContainerProps) => ({ | ||
| container: { | ||
| width: size, | ||
| height: size, | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| borderRadius: borderRadius === 'rounded' ? size / 2 : borderRadius, | ||
| backgroundColor: bgColor, | ||
| }, | ||
| }), | ||
| ); |
Oops, something went wrong.