-
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.
chore: add Figma code connect (#424)
- Loading branch information
1 parent
c715fd8
commit 8b0a57b
Showing
12 changed files
with
1,006 additions
and
20 deletions.
There are no files selected for viewing
35 changes: 35 additions & 0 deletions
35
apps/native-ui-storybook/figma-connect/Actionsheet.figma.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,35 @@ | ||
import React from 'react'; | ||
import { | ||
Actionsheet, | ||
ActionsheetBackdrop, | ||
ActionsheetContent, | ||
ActionsheetDragIndicator, | ||
ActionsheetDragIndicatorWrapper, | ||
} from '@utilitywarehouse/native-ui/lab'; | ||
import figma from '@figma/code-connect'; | ||
|
||
const showActionsheet = true; | ||
const handleClose = () => console.log('close'); | ||
|
||
figma.connect( | ||
Actionsheet, | ||
'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=5680-5281&m=dev', | ||
{ | ||
props: { | ||
content: figma.enum('content', { | ||
custom: '{content goes here}', | ||
}), | ||
}, | ||
example: ({ content }) => ( | ||
<Actionsheet isOpen={showActionsheet} onClose={handleClose} zIndex={999}> | ||
<ActionsheetBackdrop /> | ||
<ActionsheetContent h="$64" zIndex={999}> | ||
<ActionsheetDragIndicatorWrapper> | ||
<ActionsheetDragIndicator /> | ||
</ActionsheetDragIndicatorWrapper> | ||
{content} | ||
</ActionsheetContent> | ||
</Actionsheet> | ||
), | ||
} | ||
); |
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,48 @@ | ||
import React from 'react'; | ||
import { Alert } from '@utilitywarehouse/native-ui'; | ||
import figma from '@figma/code-connect'; | ||
|
||
figma.connect( | ||
Alert, | ||
'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=5232-8219&m=dev', | ||
{ | ||
props: { | ||
linkText: figma.string('link'), | ||
showTitle: figma.boolean('Title?', { | ||
true: figma.string('title'), | ||
false: undefined, | ||
}), | ||
title: figma.string('title'), | ||
iconButton: figma.boolean('Icon Button?', { | ||
true: () => console.log('icon button pressed'), | ||
false: undefined, | ||
}), | ||
showLink: figma.boolean('link?', { | ||
true: () => console.log('link pressed'), | ||
false: undefined, | ||
}), | ||
text: figma.string('text'), | ||
close: figma.boolean('close', { | ||
true: () => console.log('close'), | ||
false: undefined, | ||
}), | ||
colorScheme: figma.enum('colorScheme', { | ||
red: 'red', | ||
cyan: 'cyan', | ||
gold: 'gold', | ||
green: 'green', | ||
}), | ||
}, | ||
example: ({ colorScheme, close, iconButton, showLink, showTitle, text, linkText }) => ( | ||
<Alert | ||
colorScheme={colorScheme} | ||
title={showTitle} | ||
text={text} | ||
onClose={close} | ||
onPressIconButton={iconButton} | ||
linkText={linkText} | ||
onPressLink={showLink} | ||
/> | ||
), | ||
} | ||
); |
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,37 @@ | ||
import React from 'react'; | ||
import { Badge, BadgeText } from '@utilitywarehouse/native-ui'; | ||
import figma from '@figma/code-connect'; | ||
|
||
figma.connect( | ||
Badge, | ||
'https://www.figma.com/file/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?type=design&node-id=3386-6376&mode=dev', | ||
{ | ||
links: [ | ||
{ | ||
name: 'Storybook - Docs', | ||
url: 'https://uw-native-ui.vercel.app/?path=/docs/components-badge--docs', | ||
}, | ||
], | ||
props: { | ||
text: figma.string('text'), | ||
strong: figma.boolean('strong'), | ||
colorScheme: figma.enum('colorScheme', { | ||
cyan: 'cyan', | ||
gold: 'gold', | ||
green: 'green', | ||
grey: 'grey', | ||
red: 'red', | ||
}), | ||
size: figma.enum('size', { | ||
'large (default)': 'large', | ||
small: 'small', | ||
}), | ||
borderless: figma.boolean('borderless?'), | ||
}, | ||
example: ({ text, colorScheme, strong, size, borderless }) => ( | ||
<Badge colorScheme={colorScheme} strong={strong} size={size} borderless={borderless}> | ||
<BadgeText>{text}</BadgeText> | ||
</Badge> | ||
), | ||
} | ||
); |
229 changes: 229 additions & 0 deletions
229
apps/native-ui-storybook/figma-connect/Button.figma.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,229 @@ | ||
import React from 'react'; | ||
import { Button, ButtonIcon, ButtonText } from '@utilitywarehouse/native-ui'; | ||
import figma from '@figma/code-connect'; | ||
|
||
const props = { | ||
iconPosition: figma.boolean('Icon Left?', { | ||
true: 'left', | ||
false: figma.boolean('Icon Right?', { | ||
true: 'right', | ||
false: undefined, | ||
}), | ||
}), | ||
icon: figma.boolean('Icon Right?', { | ||
true: figma.instance('Icon Right'), | ||
false: figma.boolean('Icon Left?', { | ||
true: figma.instance('Icon Left'), | ||
false: undefined, | ||
}), | ||
}), | ||
iconRight: figma.instance('Icon Right'), | ||
iconLeft: figma.instance('Icon Left'), | ||
text: figma.string('Text'), | ||
colorScheme: figma.enum('colorScheme', { | ||
cyan: 'cyan', | ||
green: 'green', | ||
red: 'red', | ||
}), | ||
size: figma.enum('size', { | ||
'medium - 48 (default)': 'medium', | ||
'large - 56': 'large', | ||
'small - 32': 'small', | ||
}), | ||
disabled: figma.enum('state', { | ||
disabled: true, | ||
}), | ||
loading: figma.enum('state', { | ||
loading: true, | ||
}), | ||
inverted: figma.boolean('inverted'), | ||
}; | ||
|
||
// Solid Button | ||
|
||
figma.connect( | ||
Button, | ||
'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=7249-3682&m=dev', | ||
{ | ||
props, | ||
links: [ | ||
{ | ||
name: 'Documentation', | ||
url: 'https://uw-native-ui.vercel.app/?path=/docs/native-ui-components-button--docs', | ||
}, | ||
], | ||
example: ({ text, inverted, disabled, loading, colorScheme, size, icon, iconPosition }) => ( | ||
<Button | ||
variant="solid" | ||
onPress={() => console.log('button pressed')} | ||
colorScheme={colorScheme} | ||
size={size} | ||
inverted={inverted} | ||
disabled={disabled} | ||
loading={loading} | ||
iconPosition={iconPosition} | ||
icon={icon} | ||
> | ||
{text} | ||
</Button> | ||
), | ||
} | ||
); | ||
|
||
figma.connect( | ||
Button, | ||
'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=7249-3682&m=dev', | ||
{ | ||
props, | ||
links: [ | ||
{ | ||
name: 'Documentation', | ||
url: 'https://uw-native-ui.vercel.app/?path=/docs/native-ui-components-button--docs', | ||
}, | ||
], | ||
variant: { | ||
'Icon Right?': true, | ||
'Icon Left?': true, | ||
}, | ||
example: ({ text, inverted, disabled, colorScheme, size, iconLeft, iconRight }) => ( | ||
<Button | ||
variant="solid" | ||
onPress={() => console.log('button pressed')} | ||
colorScheme={colorScheme} | ||
size={size} | ||
inverted={inverted} | ||
disabled={disabled} | ||
> | ||
<ButtonIcon as={iconLeft} /> | ||
<ButtonText>{text}</ButtonText> | ||
<ButtonIcon as={iconRight} /> | ||
</Button> | ||
), | ||
} | ||
); | ||
|
||
// Outline Button | ||
|
||
figma.connect( | ||
Button, | ||
'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=7250-1321&m=dev', | ||
{ | ||
props, | ||
links: [ | ||
{ | ||
name: 'Documentation', | ||
url: 'https://uw-native-ui.vercel.app/?path=/docs/native-ui-components-button--docs', | ||
}, | ||
], | ||
example: ({ text, inverted, disabled, loading, colorScheme, size, icon, iconPosition }) => ( | ||
<Button | ||
variant="outline" | ||
onPress={() => console.log('button pressed')} | ||
colorScheme={colorScheme} | ||
size={size} | ||
inverted={inverted} | ||
disabled={disabled} | ||
loading={loading} | ||
iconPosition={iconPosition} | ||
icon={icon} | ||
> | ||
{text} | ||
</Button> | ||
), | ||
} | ||
); | ||
|
||
figma.connect( | ||
Button, | ||
'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=7249-3682&m=dev', | ||
{ | ||
props, | ||
links: [ | ||
{ | ||
name: 'Documentation', | ||
url: 'https://uw-native-ui.vercel.app/?path=/docs/native-ui-components-button--docs', | ||
}, | ||
], | ||
variant: { | ||
'Icon Right?': true, | ||
'Icon Left?': true, | ||
}, | ||
example: ({ text, inverted, disabled, colorScheme, size, iconLeft, iconRight }) => ( | ||
<Button | ||
variant="outline" | ||
onPress={() => console.log('button pressed')} | ||
colorScheme={colorScheme} | ||
size={size} | ||
inverted={inverted} | ||
disabled={disabled} | ||
> | ||
<ButtonIcon as={iconLeft} /> | ||
<ButtonText>{text}</ButtonText> | ||
<ButtonIcon as={iconRight} /> | ||
</Button> | ||
), | ||
} | ||
); | ||
|
||
// Ghost button | ||
|
||
figma.connect( | ||
Button, | ||
'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=7250-2103&m=dev', | ||
{ | ||
props, | ||
links: [ | ||
{ | ||
name: 'Documentation', | ||
url: 'https://uw-native-ui.vercel.app/?path=/docs/native-ui-components-button--docs', | ||
}, | ||
], | ||
example: ({ text, inverted, disabled, loading, colorScheme, size, icon, iconPosition }) => ( | ||
<Button | ||
variant="ghost" | ||
onPress={() => console.log('button pressed')} | ||
colorScheme={colorScheme} | ||
size={size} | ||
inverted={inverted} | ||
disabled={disabled} | ||
loading={loading} | ||
iconPosition={iconPosition} | ||
icon={icon} | ||
> | ||
{text} | ||
</Button> | ||
), | ||
} | ||
); | ||
|
||
figma.connect( | ||
Button, | ||
'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=7249-3682&m=dev', | ||
{ | ||
props, | ||
links: [ | ||
{ | ||
name: 'Documentation', | ||
url: 'https://uw-native-ui.vercel.app/?path=/docs/native-ui-components-button--docs', | ||
}, | ||
], | ||
variant: { | ||
'Icon Right?': true, | ||
'Icon Left?': true, | ||
}, | ||
example: ({ text, inverted, disabled, colorScheme, size, iconLeft, iconRight }) => ( | ||
<Button | ||
variant="ghost" | ||
onPress={() => console.log('button pressed')} | ||
colorScheme={colorScheme} | ||
size={size} | ||
inverted={inverted} | ||
disabled={disabled} | ||
> | ||
<ButtonIcon as={iconLeft} /> | ||
<ButtonText>{text}</ButtonText> | ||
<ButtonIcon as={iconRight} /> | ||
</Button> | ||
), | ||
} | ||
); |
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,32 @@ | ||
import React from 'react'; | ||
import { Checkbox, CheckboxIndicator, CheckboxLabel } from '@utilitywarehouse/native-ui'; | ||
import figma from '@figma/code-connect'; | ||
|
||
const props = { | ||
helperText: figma.boolean('Helper Text?'), | ||
isDisabled: figma.boolean('isDisabled'), | ||
invalid: figma.boolean('invalid'), | ||
}; | ||
|
||
figma.connect( | ||
Checkbox, | ||
'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=5623-561&m=dev', | ||
{ | ||
props, | ||
imports: [ | ||
'import { Checkbox, CheckboxIndicator, CheckboxLabel } from "@utilitywarehouse/native-ui";', | ||
], | ||
example: ({ isDisabled }) => ( | ||
<Checkbox | ||
value="someValue" | ||
onChange={(isChecked: boolean) => console.log(isChecked)} | ||
isDisabled={isDisabled} | ||
> | ||
<CheckboxIndicator /> | ||
<CheckboxLabel>Label</CheckboxLabel> | ||
</Checkbox> | ||
), | ||
} | ||
); | ||
|
||
// TODO: Add variants with helperText when it's implemented |
Oops, something went wrong.