-
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.
- Loading branch information
1 parent
9ac7c8e
commit 234d271
Showing
20 changed files
with
314 additions
and
1,781 deletions.
There are no files selected for viewing
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 |
|---|---|---|
|
|
@@ -147,6 +147,7 @@ const preview: Preview = { | |
| ], | ||
| 'Components', | ||
| [ | ||
| 'All', | ||
| 'Alert', | ||
| 'Badge', | ||
| 'Box', | ||
|
|
||
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
251 changes: 251 additions & 0 deletions
251
apps/native-ui-storybook/docs/components/AllComponents.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,251 @@ | ||
| import React, { PropsWithChildren } from 'react'; | ||
| import { ScrollView, View } from 'react-native'; | ||
| import { | ||
| Button, | ||
| createStyleSheet, | ||
| HStack, | ||
| Text, | ||
| useStyles, | ||
| Heading, | ||
| Pressable, | ||
| Alert, | ||
| NativeUIProvider, | ||
| Center, | ||
| Checkbox, | ||
| FormField, | ||
| Input, | ||
| Icon, | ||
| IconButton, | ||
| List, | ||
| ListItem, | ||
| RadioGroup, | ||
| Radio, | ||
| Skeleton, | ||
| VStack, | ||
| Spinner, | ||
| } from '@utilitywarehouse/native-ui'; | ||
| import { Actionsheet, Box } from '@utilitywarehouse/native-ui/lab'; | ||
| import { useDarkMode } from 'storybook-dark-mode'; | ||
| import { | ||
| ElectricityMediumIcon, | ||
| MobileMediumIcon, | ||
| BroadbandMediumIcon, | ||
| InsuranceMediumIcon, | ||
| ChevronRightMediumIcon, | ||
| } from '@utilitywarehouse/react-native-icons'; | ||
|
|
||
| const ComponentWrapper: React.FC<PropsWithChildren<{ name: string; link: string }>> = ({ | ||
| name, | ||
| link, | ||
| children, | ||
| }) => { | ||
| const { styles } = useStyles(stylesheet); | ||
| const navigate = () => { | ||
| if (window.top) { | ||
| window.top.location.href = link; | ||
| } | ||
| }; | ||
| return ( | ||
| <View style={styles.component}> | ||
| <View style={styles.componentWrap}>{children}</View> | ||
| <Pressable style={styles.textWrap} onPress={navigate}> | ||
| <Text style={styles.text} highlight> | ||
| {name} | ||
| </Text> | ||
| </Pressable> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| const AllComponents: React.FC = () => { | ||
| const { styles } = useStyles(stylesheet); | ||
| const [showActionsheet, setShowActionsheet] = React.useState(false); | ||
| const toggleActionsheet = () => setShowActionsheet(!showActionsheet); | ||
| const colorScheme = useDarkMode() ? 'dark' : 'light'; | ||
| const isDark = colorScheme === 'dark'; | ||
| return ( | ||
| <NativeUIProvider colorMode={colorScheme}> | ||
| <ScrollView contentContainerStyle={styles.container}> | ||
| <HStack wrap space="md"> | ||
| <ComponentWrapper | ||
| name="Actionsheet (Lab)" | ||
| link="/?path=/docs/native-ui-components-lab-actionsheet--docs" | ||
| > | ||
| <Center flex={1}> | ||
| <Actionsheet isOpen={showActionsheet} onClose={toggleActionsheet}> | ||
| <Heading>Actionsheet</Heading> | ||
| <Text> | ||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque sint facilis autem | ||
| quia expedita quasi consequuntur dolorum magnam, laboriosam recusandae iure quos | ||
| itaque cum officia repellat rem quas labore numquam? | ||
| </Text> | ||
| </Actionsheet> | ||
| <Button onPress={toggleActionsheet}>Show Actionsheet</Button> | ||
| </Center> | ||
| </ComponentWrapper> | ||
| <ComponentWrapper name="Alert" link="/?path=/docs/native-ui-components-alert--docs"> | ||
| <Center flex={1}> | ||
| <Alert text="This is an alert" /> | ||
| </Center> | ||
| </ComponentWrapper> | ||
| <ComponentWrapper name="Box (Lab)" link="/?path=/docs/native-ui-components-lab-box--docs"> | ||
| <Center flex={1}> | ||
| <Box backgroundColor="$grey900" padding="$4" width={200} height={100}> | ||
| <Text color={isDark ? '$grey100' : '$white'} highlight> | ||
| This is a Box | ||
| </Text> | ||
| </Box> | ||
| </Center> | ||
| </ComponentWrapper> | ||
| <ComponentWrapper name="Button" link="/?path=/docs/native-ui-components-button--docs"> | ||
| <Center flex={1}> | ||
| <Button variant="outline">Press me</Button> | ||
| </Center> | ||
| </ComponentWrapper> | ||
| <ComponentWrapper name="Center" link="/?path=/docs/native-ui-components-center--docs"> | ||
| <Center flex={1}> | ||
| <Center backgroundColor="$grey900" padding="$4" width={200} height={100}> | ||
| <Text color={isDark ? '$grey100' : '$white'} highlight> | ||
| I am in the Center | ||
| </Text> | ||
| </Center> | ||
| </Center> | ||
| </ComponentWrapper> | ||
| <ComponentWrapper name="Checkbox" link="/?path=/docs/native-ui-components-checkbox--docs"> | ||
| <Center flex={1}> | ||
| <Checkbox label="I'm a Checkbox" value="" /> | ||
| </Center> | ||
| </ComponentWrapper> | ||
| <ComponentWrapper | ||
| name="Form Field" | ||
| link="/?path=/docs/native-ui-components-form-field--docs" | ||
| > | ||
| <Center flex={1}> | ||
| <FormField | ||
| validationStatus="invalid" | ||
| label="Label" | ||
| helperText="Helper text" | ||
| validText="Valid form field text" | ||
| invalidText="Invalid form field text" | ||
| > | ||
| <Input onChange={() => console.log('###')} placeholder="" /> | ||
| </FormField> | ||
| </Center> | ||
| </ComponentWrapper> | ||
| <ComponentWrapper name="Heading" link="/?path=/docs/native-ui-components-heading--docs"> | ||
| <Center flex={1}> | ||
| <Heading>This is a Heading</Heading> | ||
| </Center> | ||
| </ComponentWrapper> | ||
| <ComponentWrapper name="HStack" link="/?path=/docs/native-ui-components-hstack--docs"> | ||
| <Center flex={1}> | ||
| <HStack space="md"> | ||
| <Box w={40} h={40} bg="$cyan300" /> | ||
| <Box w={40} h={40} bg="$cyan400" /> | ||
| <Box w={40} h={40} bg="$cyan500" /> | ||
| <Box w={40} h={40} bg="$cyan600" /> | ||
| </HStack> | ||
| </Center> | ||
| </ComponentWrapper> | ||
| <ComponentWrapper name="Icons" link="/?path=/docs/native-ui-components-icons--docs"> | ||
| <Center flex={1}> | ||
| <HStack space="lg"> | ||
| <Icon as={ElectricityMediumIcon} color="$serviceElectricity" /> | ||
| <Icon as={MobileMediumIcon} color="$serviceMobile" /> | ||
| <Icon as={BroadbandMediumIcon} color="$serviceLandline" /> | ||
| <Icon as={InsuranceMediumIcon} color="$serviceInsurance" /> | ||
| </HStack> | ||
| </Center> | ||
| </ComponentWrapper> | ||
| <ComponentWrapper | ||
| name="Icon Button" | ||
| link="/?path=/docs/native-ui-components-iconbutton--docs" | ||
| > | ||
| <Center flex={1}> | ||
| <IconButton icon={ChevronRightMediumIcon} size="large" onPress={() => null} /> | ||
| </Center> | ||
| </ComponentWrapper> | ||
| <ComponentWrapper name="List" link="/?path=/docs/native-ui-components-list--docs"> | ||
| <Center flex={1}> | ||
| <List> | ||
| <ListItem text="List Item 1" divider onPress={() => console.log('item pressed')} /> | ||
| <ListItem text="List Item 2" onPress={() => console.log('item pressed')} /> | ||
| </List> | ||
| </Center> | ||
| </ComponentWrapper> | ||
| <ComponentWrapper name="Radio" link="/?path=/docs/native-ui-components-radio--docs"> | ||
| <Center flex={1}> | ||
| <RadioGroup> | ||
| <Radio label="I'm a Radio" value="1" /> | ||
| <Radio label="Me too" value="2" /> | ||
| </RadioGroup> | ||
| </Center> | ||
| </ComponentWrapper> | ||
| <ComponentWrapper name="Skeleton" link="/?path=/docs/native-ui-components-skeleton--docs"> | ||
| <Center flex={1}> | ||
| <HStack space="sm"> | ||
| <Skeleton width={30} height={30} /> | ||
| <VStack space="sm"> | ||
| <Skeleton width={120} height={15} /> | ||
| <Skeleton width={100} height={15} /> | ||
| </VStack> | ||
| </HStack> | ||
| </Center> | ||
| </ComponentWrapper> | ||
| <ComponentWrapper name="Spinner" link="/?path=/docs/native-ui-components-spinner--docs"> | ||
| <Center flex={1}> | ||
| <Spinner size="lg" /> | ||
| </Center> | ||
| </ComponentWrapper> | ||
| <ComponentWrapper name="Text" link="/?path=/docs/native-ui-components-text--docs"> | ||
| <Center flex={1}> | ||
| <Text>This is some Text</Text> | ||
| </Center> | ||
| </ComponentWrapper> | ||
| <ComponentWrapper name="VStack" link="/?path=/docs/native-ui-components-vstack--docs"> | ||
| <Center flex={1}> | ||
| <VStack space="md"> | ||
| <Box w={20} h={20} bg="$cyan300" /> | ||
| <Box w={20} h={20} bg="$cyan400" /> | ||
| <Box w={20} h={20} bg="$cyan500" /> | ||
| <Box w={20} h={20} bg="$cyan600" /> | ||
| </VStack> | ||
| </Center> | ||
| </ComponentWrapper> | ||
| </HStack> | ||
| </ScrollView> | ||
| </NativeUIProvider> | ||
| ); | ||
| }; | ||
|
|
||
| const stylesheet = createStyleSheet(({ radii, colorMode, colors, space, borderWidths }) => ({ | ||
| container: { | ||
| gap: space['2'], | ||
| }, | ||
| component: { | ||
| borderColor: colorMode === 'light' ? colors.grey100 : colors.grey400, | ||
| borderWidth: borderWidths['1'], | ||
| borderRadius: radii['lg'], | ||
| overflow: 'hidden', | ||
| glexGrow: 1, | ||
| height: 200, | ||
| flexBasis: { | ||
| xs: '100%', | ||
| md: 300, | ||
| }, | ||
| }, | ||
| componentWrap: { | ||
| padding: space['4'], | ||
| flexGrow: 1, | ||
| }, | ||
| text: {}, | ||
| textWrap: { | ||
| borderTopColor: colorMode === 'light' ? colors.grey100 : colors.grey400, | ||
| borderTopWidth: borderWidths['1'], | ||
| paddingHorizontal: space['4'], | ||
| paddingVertical: space['2'], | ||
| backgroundColor: colors.grey25, | ||
| }, | ||
| })); | ||
|
|
||
| export default AllComponents; |
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
Oops, something went wrong.