acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Integrate new design tokens, reorg storybook

Browse Source
This commit is contained in:
Eric Bailey
2024-01-12 11:22:29 -06:00
parent b6b6c701fc
commit e85df54156
24 changed files with 1138 additions and 1462 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Navigation.tsx
+2 -2
View File
@@ -61,7 +61,7 @@ import {ProfileListScreen} from './view/screens/ProfileList'
import {PostThreadScreen} from './view/screens/PostThread'
import {PostLikedByScreen} from './view/screens/PostLikedBy'
import {PostRepostedByScreen} from './view/screens/PostRepostedBy'
import {DebugScreen} from './view/screens/DebugNew'
import {Storybook} from './view/screens/Storybook'
import {LogScreen} from './view/screens/Log'
import {SupportScreen} from './view/screens/Support'
import {PrivacyPolicyScreen} from './view/screens/PrivacyPolicy'
@@ -191,7 +191,7 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
/>
<Stack.Screen
name="Debug"
getComponent={() => DebugScreen}
getComponent={() => Storybook}
options={{title: title('Debug'), requireAuth: true}}
/>
<Stack.Screen
src/alf/atoms.ts
+234 -78
View File
@@ -61,8 +61,8 @@ export const atoms = {
/*
* Flex
*/
gap_xxs: {
gap: tokens.space.xxs,
gap_2xs: {
gap: tokens.space._2xs,
},
gap_xs: {
gap: tokens.space.xs,
@@ -79,8 +79,17 @@ export const atoms = {
gap_xl: {
gap: tokens.space.xl,
},
gap_xxl: {
gap: tokens.space.xxl,
gap_2xl: {
gap: tokens.space._2xl,
},
gap_3xl: {
gap: tokens.space._3xl,
},
gap_4xl: {
gap: tokens.space._4xl,
},
gap_5xl: {
gap: tokens.space._5xl,
},
flex: {
display: 'flex',
@@ -128,9 +137,9 @@ export const atoms = {
text_right: {
textAlign: 'right',
},
text_xxs: {
fontSize: tokens.fontSize.xxs,
lineHeight: tokens.fontSize.xxs,
text_2xs: {
fontSize: tokens.fontSize._2xs,
lineHeight: tokens.fontSize._2xs,
},
text_xs: {
fontSize: tokens.fontSize.xs,
@@ -152,9 +161,21 @@ export const atoms = {
fontSize: tokens.fontSize.xl,
lineHeight: tokens.fontSize.xl,
},
text_xxl: {
fontSize: tokens.fontSize.xxl,
lineHeight: tokens.fontSize.xxl,
text_2xl: {
fontSize: tokens.fontSize._2xl,
lineHeight: tokens.fontSize._2xl,
},
text_3xl: {
fontSize: tokens.fontSize._3xl,
lineHeight: tokens.fontSize._3xl,
},
text_4xl: {
fontSize: tokens.fontSize._4xl,
lineHeight: tokens.fontSize._4xl,
},
text_5xl: {
fontSize: tokens.fontSize._5xl,
lineHeight: tokens.fontSize._5xl,
},
leading_tight: {
lineHeight: 1.25,
@@ -165,11 +186,8 @@ export const atoms = {
font_normal: {
fontWeight: tokens.fontWeight.normal,
},
font_semibold: {
fontWeight: tokens.fontWeight.semibold,
},
font_bold: {
fontWeight: tokens.fontWeight.bold,
fontWeight: tokens.fontWeight.semibold,
},
/*
@@ -188,8 +206,8 @@ export const atoms = {
/*
* Padding
*/
p_xxs: {
padding: tokens.space.xxs,
p_2xs: {
padding: tokens.space._2xs,
},
p_xs: {
padding: tokens.space.xs,
@@ -206,12 +224,21 @@ export const atoms = {
p_xl: {
padding: tokens.space.xl,
},
p_xxl: {
padding: tokens.space.xxl,
p_2xl: {
padding: tokens.space._2xl,
},
px_xxs: {
paddingLeft: tokens.space.xxs,
paddingRight: tokens.space.xxs,
p_3xl: {
padding: tokens.space._3xl,
},
p_4xl: {
padding: tokens.space._4xl,
},
p_5xl: {
padding: tokens.space._5xl,
},
px_2xs: {
paddingLeft: tokens.space._2xs,
paddingRight: tokens.space._2xs,
},
px_xs: {
paddingLeft: tokens.space.xs,
@@ -233,13 +260,25 @@ export const atoms = {
paddingLeft: tokens.space.xl,
paddingRight: tokens.space.xl,
},
px_xxl: {
paddingLeft: tokens.space.xxl,
paddingRight: tokens.space.xxl,
px_2xl: {
paddingLeft: tokens.space._2xl,
paddingRight: tokens.space._2xl,
},
py_xxs: {
paddingTop: tokens.space.xxs,
paddingBottom: tokens.space.xxs,
px_3xl: {
paddingLeft: tokens.space._3xl,
paddingRight: tokens.space._3xl,
},
px_4xl: {
paddingLeft: tokens.space._4xl,
paddingRight: tokens.space._4xl,
},
px_5xl: {
paddingLeft: tokens.space._5xl,
paddingRight: tokens.space._5xl,
},
py_2xs: {
paddingTop: tokens.space._2xs,
paddingBottom: tokens.space._2xs,
},
py_xs: {
paddingTop: tokens.space.xs,
@@ -261,12 +300,24 @@ export const atoms = {
paddingTop: tokens.space.xl,
paddingBottom: tokens.space.xl,
},
py_xxl: {
paddingTop: tokens.space.xxl,
paddingBottom: tokens.space.xxl,
py_2xl: {
paddingTop: tokens.space._2xl,
paddingBottom: tokens.space._2xl,
},
pt_xxs: {
paddingTop: tokens.space.xxs,
py_3xl: {
paddingTop: tokens.space._3xl,
paddingBottom: tokens.space._3xl,
},
py_4xl: {
paddingTop: tokens.space._4xl,
paddingBottom: tokens.space._4xl,
},
py_5xl: {
paddingTop: tokens.space._5xl,
paddingBottom: tokens.space._5xl,
},
pt_2xs: {
paddingTop: tokens.space._2xs,
},
pt_xs: {
paddingTop: tokens.space.xs,
@@ -283,11 +334,20 @@ export const atoms = {
pt_xl: {
paddingTop: tokens.space.xl,
},
pt_xxl: {
paddingTop: tokens.space.xxl,
pt_2xl: {
paddingTop: tokens.space._2xl,
},
pb_xxs: {
paddingBottom: tokens.space.xxs,
pt_3xl: {
paddingTop: tokens.space._3xl,
},
pt_4xl: {
paddingTop: tokens.space._4xl,
},
pt_5xl: {
paddingTop: tokens.space._5xl,
},
pb_2xs: {
paddingBottom: tokens.space._2xs,
},
pb_xs: {
paddingBottom: tokens.space.xs,
@@ -304,11 +364,20 @@ export const atoms = {
pb_xl: {
paddingBottom: tokens.space.xl,
},
pb_xxl: {
paddingBottom: tokens.space.xxl,
pb_2xl: {
paddingBottom: tokens.space._2xl,
},
pl_xxs: {
paddingLeft: tokens.space.xxs,
pb_3xl: {
paddingBottom: tokens.space._3xl,
},
pb_4xl: {
paddingBottom: tokens.space._4xl,
},
pb_5xl: {
paddingBottom: tokens.space._5xl,
},
pl_2xs: {
paddingLeft: tokens.space._2xs,
},
pl_xs: {
paddingLeft: tokens.space.xs,
@@ -325,11 +394,20 @@ export const atoms = {
pl_xl: {
paddingLeft: tokens.space.xl,
},
pl_xxl: {
paddingLeft: tokens.space.xxl,
pl_2xl: {
paddingLeft: tokens.space._2xl,
},
pr_xxs: {
paddingRight: tokens.space.xxs,
pl_3xl: {
paddingLeft: tokens.space._3xl,
},
pl_4xl: {
paddingLeft: tokens.space._4xl,
},
pl_5xl: {
paddingLeft: tokens.space._5xl,
},
pr_2xs: {
paddingRight: tokens.space._2xs,
},
pr_xs: {
paddingRight: tokens.space.xs,
@@ -346,15 +424,24 @@ export const atoms = {
pr_xl: {
paddingRight: tokens.space.xl,
},
pr_xxl: {
paddingRight: tokens.space.xxl,
pr_2xl: {
paddingRight: tokens.space._2xl,
},
pr_3xl: {
paddingRight: tokens.space._3xl,
},
pr_4xl: {
paddingRight: tokens.space._4xl,
},
pr_5xl: {
paddingRight: tokens.space._5xl,
},
/*
* Margin
*/
m_xxs: {
margin: tokens.space.xxs,
m_2xs: {
margin: tokens.space._2xs,
},
m_xs: {
margin: tokens.space.xs,
@@ -371,12 +458,21 @@ export const atoms = {
m_xl: {
margin: tokens.space.xl,
},
m_xxl: {
margin: tokens.space.xxl,
m_2xl: {
margin: tokens.space._2xl,
},
mx_xxs: {
marginLeft: tokens.space.xxs,
marginRight: tokens.space.xxs,
m_3xl: {
margin: tokens.space._3xl,
},
m_4xl: {
margin: tokens.space._4xl,
},
m_5xl: {
margin: tokens.space._5xl,
},
mx_2xs: {
marginLeft: tokens.space._2xs,
marginRight: tokens.space._2xs,
},
mx_xs: {
marginLeft: tokens.space.xs,
@@ -398,13 +494,25 @@ export const atoms = {
marginLeft: tokens.space.xl,
marginRight: tokens.space.xl,
},
mx_xxl: {
marginLeft: tokens.space.xxl,
marginRight: tokens.space.xxl,
mx_2xl: {
marginLeft: tokens.space._2xl,
marginRight: tokens.space._2xl,
},
my_xxs: {
marginTop: tokens.space.xxs,
marginBottom: tokens.space.xxs,
mx_3xl: {
marginLeft: tokens.space._3xl,
marginRight: tokens.space._3xl,
},
mx_4xl: {
marginLeft: tokens.space._4xl,
marginRight: tokens.space._4xl,
},
mx_5xl: {
marginLeft: tokens.space._5xl,
marginRight: tokens.space._5xl,
},
my_2xs: {
marginTop: tokens.space._2xs,
marginBottom: tokens.space._2xs,
},
my_xs: {
marginTop: tokens.space.xs,
@@ -426,12 +534,24 @@ export const atoms = {
marginTop: tokens.space.xl,
marginBottom: tokens.space.xl,
},
my_xxl: {
marginTop: tokens.space.xxl,
marginBottom: tokens.space.xxl,
my_2xl: {
marginTop: tokens.space._2xl,
marginBottom: tokens.space._2xl,
},
mt_xxs: {
marginTop: tokens.space.xxs,
my_3xl: {
marginTop: tokens.space._3xl,
marginBottom: tokens.space._3xl,
},
my_4xl: {
marginTop: tokens.space._4xl,
marginBottom: tokens.space._4xl,
},
my_5xl: {
marginTop: tokens.space._5xl,
marginBottom: tokens.space._5xl,
},
mt_2xs: {
marginTop: tokens.space._2xs,
},
mt_xs: {
marginTop: tokens.space.xs,
@@ -448,11 +568,20 @@ export const atoms = {
mt_xl: {
marginTop: tokens.space.xl,
},
mt_xxl: {
marginTop: tokens.space.xxl,
mt_2xl: {
marginTop: tokens.space._2xl,
},
mb_xxs: {
marginBottom: tokens.space.xxs,
mt_3xl: {
marginTop: tokens.space._3xl,
},
mt_4xl: {
marginTop: tokens.space._4xl,
},
mt_5xl: {
marginTop: tokens.space._5xl,
},
mb_2xs: {
marginBottom: tokens.space._2xs,
},
mb_xs: {
marginBottom: tokens.space.xs,
@@ -469,11 +598,20 @@ export const atoms = {
mb_xl: {
marginBottom: tokens.space.xl,
},
mb_xxl: {
marginBottom: tokens.space.xxl,
mb_2xl: {
marginBottom: tokens.space._2xl,
},
ml_xxs: {
marginLeft: tokens.space.xxs,
mb_3xl: {
marginBottom: tokens.space._3xl,
},
mb_4xl: {
marginBottom: tokens.space._4xl,
},
mb_5xl: {
marginBottom: tokens.space._5xl,
},
ml_2xs: {
marginLeft: tokens.space._2xs,
},
ml_xs: {
marginLeft: tokens.space.xs,
@@ -490,11 +628,20 @@ export const atoms = {
ml_xl: {
marginLeft: tokens.space.xl,
},
ml_xxl: {
marginLeft: tokens.space.xxl,
ml_2xl: {
marginLeft: tokens.space._2xl,
},
mr_xxs: {
marginRight: tokens.space.xxs,
ml_3xl: {
marginLeft: tokens.space._3xl,
},
ml_4xl: {
marginLeft: tokens.space._4xl,
},
ml_5xl: {
marginLeft: tokens.space._5xl,
},
mr_2xs: {
marginRight: tokens.space._2xs,
},
mr_xs: {
marginRight: tokens.space.xs,
@@ -511,7 +658,16 @@ export const atoms = {
mr_xl: {
marginRight: tokens.space.xl,
},
mr_xxl: {
marginRight: tokens.space.xxl,
mr_2xl: {
marginRight: tokens.space._2xl,
},
mr_3xl: {
marginRight: tokens.space._3xl,
},
mr_4xl: {
marginRight: tokens.space._4xl,
},
mr_5xl: {
marginRight: tokens.space._5xl,
},
} as const
src/alf/themes.ts
+47 -41
View File
@@ -12,7 +12,8 @@ export const lightPalette = {
positive: tokens.color.green_500,
negative: tokens.color.red_500,
contrast_0: tokens.color.gray_0,
contrast_25: tokens.color.gray_25,
contrast_50: tokens.color.gray_50,
contrast_100: tokens.color.gray_100,
contrast_200: tokens.color.gray_200,
contrast_300: tokens.color.gray_300,
@@ -22,7 +23,6 @@ export const lightPalette = {
contrast_700: tokens.color.gray_700,
contrast_800: tokens.color.gray_800,
contrast_900: tokens.color.gray_900,
contrast_1000: tokens.color.gray_1000,
} as const
export const darkPalette: Palette = {
@@ -30,17 +30,17 @@ export const darkPalette: Palette = {
positive: tokens.color.green_400,
negative: tokens.color.red_400,
contrast_0: tokens.color.gray_1000,
contrast_100: tokens.color.gray_900,
contrast_200: tokens.color.gray_800,
contrast_300: tokens.color.gray_700,
contrast_400: tokens.color.gray_600,
contrast_500: tokens.color.gray_500,
contrast_600: tokens.color.gray_400,
contrast_700: tokens.color.gray_300,
contrast_800: tokens.color.gray_200,
contrast_900: tokens.color.gray_100,
contrast_1000: tokens.color.gray_0,
contrast_25: tokens.color.gray_900,
contrast_50: tokens.color.gray_800,
contrast_100: tokens.color.gray_700,
contrast_200: tokens.color.gray_600,
contrast_300: tokens.color.gray_500,
contrast_400: tokens.color.gray_400,
contrast_500: tokens.color.gray_300,
contrast_600: tokens.color.gray_200,
contrast_700: tokens.color.gray_100,
contrast_800: tokens.color.gray_50,
contrast_900: tokens.color.gray_25,
} as const
export const light = {
@@ -48,13 +48,16 @@ export const light = {
palette: lightPalette,
atoms: {
text: {
color: tokens.color.gray_1000,
color: tokens.color.gray_900,
},
text_contrast_700: {
color: tokens.color.gray_700,
text_contrast_600: {
color: lightPalette.contrast_600,
},
text_contrast_500: {
color: tokens.color.gray_500,
color: lightPalette.contrast_500,
},
text_contrast_400: {
color: lightPalette.contrast_400,
},
text_inverted: {
color: tokens.color.white,
@@ -62,20 +65,20 @@ export const light = {
bg: {
backgroundColor: tokens.color.white,
},
bg_contrast_25: {
backgroundColor: lightPalette.contrast_25,
},
bg_contrast_50: {
backgroundColor: lightPalette.contrast_50,
},
bg_contrast_100: {
backgroundColor: tokens.color.gray_100,
backgroundColor: lightPalette.contrast_100,
},
bg_contrast_200: {
backgroundColor: tokens.color.gray_200,
backgroundColor: lightPalette.contrast_200,
},
bg_contrast_300: {
backgroundColor: tokens.color.gray_300,
},
bg_positive: {
backgroundColor: tokens.color.green_500,
},
bg_negative: {
backgroundColor: tokens.color.red_400,
backgroundColor: lightPalette.contrast_300,
},
border: {
borderColor: tokens.color.gray_200,
@@ -93,32 +96,35 @@ export const dark: Theme = {
text: {
color: tokens.color.white,
},
text_contrast_700: {
color: tokens.color.gray_300,
text_contrast_600: {
color: darkPalette.contrast_600,
},
text_contrast_500: {
color: tokens.color.gray_500,
color: darkPalette.contrast_500,
},
text_contrast_400: {
color: darkPalette.contrast_400,
},
text_inverted: {
color: tokens.color.gray_1000,
color: tokens.color.gray_900,
},
bg: {
backgroundColor: tokens.color.gray_1000,
},
bg_contrast_100: {
backgroundColor: tokens.color.gray_900,
},
bg_contrast_25: {
backgroundColor: darkPalette.contrast_25,
},
bg_contrast_50: {
backgroundColor: darkPalette.contrast_50,
},
bg_contrast_100: {
backgroundColor: darkPalette.contrast_100,
},
bg_contrast_200: {
backgroundColor: tokens.color.gray_800,
backgroundColor: darkPalette.contrast_200,
},
bg_contrast_300: {
backgroundColor: tokens.color.gray_700,
},
bg_positive: {
backgroundColor: tokens.color.green_400,
},
bg_negative: {
backgroundColor: tokens.color.red_400,
backgroundColor: darkPalette.contrast_300,
},
border: {
borderColor: tokens.color.gray_800,
src/alf/tokens.ts
+57 -55
View File
@@ -1,79 +1,81 @@
const BLUE_HUE = 211
const GRAYSCALE_SATURATION = 22
export const color = {
white: '#FFFFFF',
gray_0: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 100%)`,
gray_100: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 95%)`,
gray_200: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 85%)`,
gray_300: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 75%)`,
gray_400: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 65%)`,
gray_500: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 55%)`,
gray_600: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 45%)`,
gray_700: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 35%)`,
gray_800: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 25%)`,
gray_900: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 15%)`,
gray_1000: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 5%)`,
gray_25: `#FCFCFD`,
gray_50: `#F9FAFB`,
gray_100: `#F3F4F6`,
gray_200: `#E5E7EB`,
gray_300: `#D2D6DB`,
gray_400: `#9DA4AE`,
gray_500: `#6C737F`,
gray_600: `#4D5761`,
gray_700: `#384250`,
gray_800: `#1F2A37`,
gray_900: `#111927`,
blue_0: `hsl(${BLUE_HUE}, 99%, 100%)`,
blue_100: `hsl(${BLUE_HUE}, 99%, 93%)`,
blue_200: `hsl(${BLUE_HUE}, 99%, 83%)`,
blue_300: `hsl(${BLUE_HUE}, 99%, 73%)`,
blue_400: `hsl(${BLUE_HUE}, 99%, 63%)`,
blue_500: `hsl(${BLUE_HUE}, 99%, 53%)`,
blue_600: `hsl(${BLUE_HUE}, 99%, 43%)`,
blue_700: `hsl(${BLUE_HUE}, 99%, 33%)`,
blue_800: `hsl(${BLUE_HUE}, 99%, 23%)`,
blue_900: `hsl(${BLUE_HUE}, 99%, 13%)`,
blue_1000: `hsl(${BLUE_HUE}, 99%, 8%)`,
blue_25: `#F5FAFF`,
blue_50: `#EFF8FF`,
blue_100: `#EFF8FF`,
blue_200: `#B2DDFF`,
blue_300: `#84CAFF`,
blue_400: `#53B1FD`,
blue_500: `#1185FE`,
blue_600: `#1073DB`,
blue_700: `#0B5CB2`,
blue_800: `#084585`,
blue_900: `#08305A`,
green_0: `hsl(130, 60%, 100%)`,
green_100: `hsl(130, 60%, 95%)`,
green_200: `hsl(130, 60%, 85%)`,
green_300: `hsl(130, 60%, 75%)`,
green_400: `hsl(130, 60%, 65%)`,
green_500: `hsl(130, 60%, 55%)`,
green_600: `hsl(130, 60%, 45%)`,
green_700: `hsl(130, 60%, 35%)`,
green_800: `hsl(130, 60%, 25%)`,
green_900: `hsl(130, 60%, 15%)`,
green_1000: `hsl(130, 60%, 5%)`,
green_25: `#F6FEF9`,
green_50: `#ECFDF3`,
green_100: `#D1FADF`,
green_200: `#A6F4C5`,
green_300: `#6CE9A6`,
green_400: `#32D583`,
green_500: `#12B76A`,
green_600: `#039855`,
green_700: `#027A48`,
green_800: `#05603A`,
green_900: `#054F31`,
red_0: `hsl(349, 96%, 100%)`,
red_100: `hsl(349, 96%, 95%)`,
red_200: `hsl(349, 96%, 85%)`,
red_300: `hsl(349, 96%, 75%)`,
red_400: `hsl(349, 96%, 65%)`,
red_500: `hsl(349, 96%, 55%)`,
red_600: `hsl(349, 96%, 45%)`,
red_700: `hsl(349, 96%, 35%)`,
red_800: `hsl(349, 96%, 25%)`,
red_900: `hsl(349, 96%, 15%)`,
red_1000: `hsl(349, 96%, 5%)`,
red_25: `#FFF5F6`,
red_50: `#FFF1F3`,
red_100: `#FFE4E8`,
red_200: `#FECDD6`,
red_300: `#FEA3B4`,
red_400: `#FD6F8E`,
red_500: `#F63D68`,
red_600: `#E31B54`,
red_700: `#C01048`,
red_800: `#A11043`,
red_900: `#89123E`,
} as const
export const space = {
xxs: 2,
_2xs: 2,
xs: 4,
sm: 8,
md: 12,
lg: 18,
xl: 24,
xxl: 32,
lg: 16,
xl: 20,
_2xl: 24,
_3xl: 28,
_4xl: 32,
_5xl: 40,
} as const
export const fontSize = {
xxs: 10,
_2xs: 10,
xs: 12,
sm: 14,
md: 16,
lg: 18,
xl: 22,
xxl: 26,
xl: 20,
_2xl: 22,
_3xl: 26,
_4xl: 32,
_5xl: 40,
} as const
// TODO test
export const lineHeight = {
none: 1,
normal: 1.5,
src/view/com/Button.tsx
+1 -1
View File
@@ -284,7 +284,7 @@ export function ButtonText({
return (
<Text
{...rest}
style={[atoms.font_semibold, atoms.text_center, ...textStyles, style]}>
style={[atoms.font_bold, atoms.text_center, ...textStyles, style]}>
{children}
</Text>
)
src/view/com/Dialog/index.tsx
+1 -1
View File
@@ -91,7 +91,7 @@ export function Inner(props: DialogInnerProps) {
<View
style={[
a.p_lg,
a.pt_xxl,
a.pt_3xl,
{
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
src/view/com/Prompt.tsx
+2 -2
View File
@@ -72,7 +72,7 @@ export function Title({children}: React.PropsWithChildren<{}>) {
return (
<H2
nativeID={titleId}
style={[a.font_semibold, t.atoms.text_contrast_700, a.pb_sm]}>
style={[a.font_bold, t.atoms.text_contrast_600, a.pb_sm]}>
{children}
</H2>
)
@@ -82,7 +82,7 @@ export function Description({children}: React.PropsWithChildren<{}>) {
const t = useTheme()
const {descriptionId} = React.useContext(Context)
return (
<P nativeID={descriptionId} style={[t.atoms.text_contrast_700, a.pb_lg]}>
<P nativeID={descriptionId} style={[t.atoms.text, a.pb_lg]}>
{children}
</P>
)
src/view/com/Typography.tsx
+6 -6
View File
@@ -19,7 +19,7 @@ export function H1({style, ...rest}: TextProps) {
<RNText
{...attr}
{...rest}
style={[atoms.text_xl, atoms.font_bold, t.atoms.text, flatten(style)]}
style={[atoms.text_5xl, atoms.font_bold, t.atoms.text, flatten(style)]}
/>
)
}
@@ -35,7 +35,7 @@ export function H2({style, ...rest}: TextProps) {
<RNText
{...attr}
{...rest}
style={[atoms.text_lg, atoms.font_bold, t.atoms.text, flatten(style)]}
style={[atoms.text_4xl, atoms.font_bold, t.atoms.text, flatten(style)]}
/>
)
}
@@ -51,7 +51,7 @@ export function H3({style, ...rest}: TextProps) {
<RNText
{...attr}
{...rest}
style={[atoms.text_md, atoms.font_bold, t.atoms.text, flatten(style)]}
style={[atoms.text_3xl, atoms.font_bold, t.atoms.text, flatten(style)]}
/>
)
}
@@ -67,7 +67,7 @@ export function H4({style, ...rest}: TextProps) {
<RNText
{...attr}
{...rest}
style={[atoms.text_sm, atoms.font_bold, t.atoms.text, flatten(style)]}
style={[atoms.text_2xl, atoms.font_bold, t.atoms.text, flatten(style)]}
/>
)
}
@@ -83,7 +83,7 @@ export function H5({style, ...rest}: TextProps) {
<RNText
{...attr}
{...rest}
style={[atoms.text_xs, atoms.font_bold, t.atoms.text, flatten(style)]}
style={[atoms.text_xl, atoms.font_bold, t.atoms.text, flatten(style)]}
/>
)
}
@@ -99,7 +99,7 @@ export function H6({style, ...rest}: TextProps) {
<RNText
{...attr}
{...rest}
style={[atoms.text_xxs, atoms.font_bold, t.atoms.text, flatten(style)]}
style={[atoms.text_lg, atoms.font_bold, t.atoms.text, flatten(style)]}
/>
)
}
src/view/com/forms/InputDate/index.android.tsx
+2 -2
View File
@@ -87,8 +87,8 @@ export function InputDate({
nativeID={labelId}
style={[
atoms.text_sm,
atoms.font_semibold,
t.atoms.text_contrast_700,
atoms.font_bold,
t.atoms.text_contrast_600,
atoms.mb_sm,
]}>
{label}
src/view/com/forms/InputDate/index.tsx
+2 -2
View File
@@ -48,8 +48,8 @@ export function InputDate({
nativeID={labelId}
style={[
atoms.text_sm,
atoms.font_semibold,
t.atoms.text_contrast_700,
atoms.font_bold,
t.atoms.text_contrast_600,
atoms.mb_sm,
]}>
{label}
src/view/com/forms/InputDate/index.web.tsx
+2 -2
View File
@@ -85,8 +85,8 @@ export function InputDate({
nativeID={labelId}
style={[
atoms.text_sm,
atoms.font_semibold,
t.atoms.text_contrast_700,
atoms.font_bold,
t.atoms.text_contrast_600,
atoms.mb_sm,
]}>
{label}
src/view/com/forms/InputText.tsx
+2 -2
View File
@@ -100,8 +100,8 @@ export function InputText({
nativeID={labelId}
style={[
atoms.text_sm,
atoms.font_semibold,
t.atoms.text_contrast_700,
atoms.font_bold,
t.atoms.text_contrast_600,
atoms.mb_sm,
]}>
{label}
src/view/icons/Logo.tsx
+3 -2
View File
@@ -1,5 +1,5 @@
import React from 'react'
import {StyleSheet} from 'react-native'
import {StyleSheet, TextProps} from 'react-native'
import Svg, {
Path,
Defs,
@@ -15,7 +15,8 @@ const ratio = 57 / 64
type Props = {
fill?: PathProps['fill']
} & SvgProps
style?: TextProps['style']
} & Omit<SvgProps, 'style'>
export const Logo = React.forwardRef(function LogoImpl(props: Props, ref) {
const {fill, ...rest} = props
src/view/screens/Debug.tsx
-520
View File
@@ -1,520 +0,0 @@
import React from 'react'
import {ScrollView, View} from 'react-native'
import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
import {ViewHeader} from '../com/util/ViewHeader'
import {ThemeProvider, PaletteColorName} from 'lib/ThemeContext'
import {usePalette} from 'lib/hooks/usePalette'
import {s} from 'lib/styles'
import * as Toast from 'view/com/util/Toast'
import {Text} from '../com/util/text/Text'
import {ViewSelector} from '../com/util/ViewSelector'
import {EmptyState} from '../com/util/EmptyState'
import * as LoadingPlaceholder from '../com/util/LoadingPlaceholder'
import {Button, ButtonType} from '../com/util/forms/Button'
import {DropdownButton, DropdownItem} from '../com/util/forms/DropdownButton'
import {ToggleButton} from '../com/util/forms/ToggleButton'
import {RadioGroup} from '../com/util/forms/RadioGroup'
import {ErrorScreen} from '../com/util/error/ErrorScreen'
import {ErrorMessage} from '../com/util/error/ErrorMessage'
const MAIN_VIEWS = ['Base', 'Controls', 'Error', 'Notifs']
export const DebugScreen = ({}: NativeStackScreenProps<
CommonNavigatorParams,
'Debug'
>) => {
const [colorScheme, setColorScheme] = React.useState<'light' | 'dark'>(
'light',
)
const onToggleColorScheme = () => {
setColorScheme(colorScheme === 'light' ? 'dark' : 'light')
}
return (
<ThemeProvider theme={colorScheme}>
<DebugInner
colorScheme={colorScheme}
onToggleColorScheme={onToggleColorScheme}
/>
</ThemeProvider>
)
}
function DebugInner({
colorScheme,
onToggleColorScheme,
}: {
colorScheme: 'light' | 'dark'
onToggleColorScheme: () => void
}) {
const [currentView, setCurrentView] = React.useState<number>(0)
const pal = usePalette('default')
const renderItem = (item: any) => {
return (
<View key={`view-${item.currentView}`}>
<View style={[s.pt10, s.pl10, s.pr10]}>
<ToggleButton
type="default-light"
onPress={onToggleColorScheme}
isSelected={colorScheme === 'dark'}
label="Dark mode"
/>
</View>
{item.currentView === 3 ? (
<NotifsView />
) : item.currentView === 2 ? (
<ErrorView />
) : item.currentView === 1 ? (
<ControlsView />
) : (
<BaseView />
)}
</View>
)
}
const items = [{currentView}]
return (
<View style={[s.hContentRegion, pal.view]}>
<ViewHeader title="Debug panel" />
<ViewSelector
swipeEnabled
sections={MAIN_VIEWS}
items={items}
renderItem={renderItem}
onSelectView={setCurrentView}
/>
</View>
)
}
function Heading({label}: {label: string}) {
const pal = usePalette('default')
return (
<View style={[s.pt10, s.pb5]}>
<Text type="title-lg" style={pal.text}>
{label}
</Text>
</View>
)
}
function BaseView() {
return (
<View style={[s.pl10, s.pr10]}>
<Heading label="Typography" />
<TypographyView />
<Heading label="Palettes" />
<PaletteView palette="default" />
<PaletteView palette="primary" />
<PaletteView palette="secondary" />
<PaletteView palette="inverted" />
<PaletteView palette="error" />
<Heading label="Empty state" />
<EmptyStateView />
<Heading label="Loading placeholders" />
<LoadingPlaceholderView />
<View style={s.footerSpacer} />
</View>
)
}
function ControlsView() {
return (
<ScrollView style={[s.pl10, s.pr10]}>
<Heading label="Buttons" />
<ButtonsView />
<Heading label="Dropdown Buttons" />
<DropdownButtonsView />
<Heading label="Toggle Buttons" />
<ToggleButtonsView />
<Heading label="Radio Buttons" />
<RadioButtonsView />
<View style={s.footerSpacer} />
</ScrollView>
)
}
function ErrorView() {
return (
<View style={s.p10}>
<View style={s.mb5}>
<ErrorScreen
title="Error screen"
message="A major error occurred that led the entire screen to fail"
details="Here are some details"
onPressTryAgain={() => {}}
/>
</View>
<View style={s.mb5}>
<ErrorMessage message="This is an error that occurred while things were being done" />
</View>
<View style={s.mb5}>
<ErrorMessage
message="This is an error that occurred while things were being done"
numberOfLines={1}
/>
</View>
<View style={s.mb5}>
<ErrorMessage
message="This is an error that occurred while things were being done"
onPressTryAgain={() => {}}
/>
</View>
<View style={s.mb5}>
<ErrorMessage
message="This is an error that occurred while things were being done"
onPressTryAgain={() => {}}
numberOfLines={1}
/>
</View>
</View>
)
}
function NotifsView() {
const triggerPush = () => {
// TODO: implement local notification for testing
}
const triggerToast = () => {
Toast.show('The task has been completed')
}
const triggerToast2 = () => {
Toast.show('The task has been completed successfully and with no problems')
}
return (
<View style={s.p10}>
<View style={s.flexRow}>
<Button onPress={triggerPush} label="Trigger Push" />
<Button onPress={triggerToast} label="Trigger Toast" />
<Button onPress={triggerToast2} label="Trigger Toast 2" />
</View>
</View>
)
}
function PaletteView({palette}: {palette: PaletteColorName}) {
const defaultPal = usePalette('default')
const pal = usePalette(palette)
return (
<View style={[pal.view, pal.border, s.p10, s.mb5, s.border1]}>
<Text style={[pal.text]}>{palette} colors</Text>
<Text style={[pal.textLight]}>Light text</Text>
<Text style={[pal.link]}>Link text</Text>
{palette !== 'default' && (
<View style={[defaultPal.view]}>
<Text style={[pal.textInverted]}>Inverted text</Text>
</View>
)}
</View>
)
}
function TypographyView() {
const pal = usePalette('default')
return (
<View style={[pal.view]}>
<Text type="2xl-thin" style={[pal.text]}>
'2xl-thin' lorem ipsum dolor
</Text>
<Text type="2xl" style={[pal.text]}>
'2xl' lorem ipsum dolor
</Text>
<Text type="2xl-medium" style={[pal.text]}>
'2xl-medium' lorem ipsum dolor
</Text>
<Text type="2xl-bold" style={[pal.text]}>
'2xl-bold' lorem ipsum dolor
</Text>
<Text type="2xl-heavy" style={[pal.text]}>
'2xl-heavy' lorem ipsum dolor
</Text>
<Text type="xl-thin" style={[pal.text]}>
'xl-thin' lorem ipsum dolor
</Text>
<Text type="xl" style={[pal.text]}>
'xl' lorem ipsum dolor
</Text>
<Text type="xl-medium" style={[pal.text]}>
'xl-medium' lorem ipsum dolor
</Text>
<Text type="xl-bold" style={[pal.text]}>
'xl-bold' lorem ipsum dolor
</Text>
<Text type="xl-heavy" style={[pal.text]}>
'xl-heavy' lorem ipsum dolor
</Text>
<Text type="lg-thin" style={[pal.text]}>
'lg-thin' lorem ipsum dolor
</Text>
<Text type="lg" style={[pal.text]}>
'lg' lorem ipsum dolor
</Text>
<Text type="lg-medium" style={[pal.text]}>
'lg-medium' lorem ipsum dolor
</Text>
<Text type="lg-bold" style={[pal.text]}>
'lg-bold' lorem ipsum dolor
</Text>
<Text type="lg-heavy" style={[pal.text]}>
'lg-heavy' lorem ipsum dolor
</Text>
<Text type="md-thin" style={[pal.text]}>
'md-thin' lorem ipsum dolor
</Text>
<Text type="md" style={[pal.text]}>
'md' lorem ipsum dolor
</Text>
<Text type="md-medium" style={[pal.text]}>
'md-medium' lorem ipsum dolor
</Text>
<Text type="md-bold" style={[pal.text]}>
'md-bold' lorem ipsum dolor
</Text>
<Text type="md-heavy" style={[pal.text]}>
'md-heavy' lorem ipsum dolor
</Text>
<Text type="sm-thin" style={[pal.text]}>
'sm-thin' lorem ipsum dolor
</Text>
<Text type="sm" style={[pal.text]}>
'sm' lorem ipsum dolor
</Text>
<Text type="sm-medium" style={[pal.text]}>
'sm-medium' lorem ipsum dolor
</Text>
<Text type="sm-bold" style={[pal.text]}>
'sm-bold' lorem ipsum dolor
</Text>
<Text type="sm-heavy" style={[pal.text]}>
'sm-heavy' lorem ipsum dolor
</Text>
<Text type="xs-thin" style={[pal.text]}>
'xs-thin' lorem ipsum dolor
</Text>
<Text type="xs" style={[pal.text]}>
'xs' lorem ipsum dolor
</Text>
<Text type="xs-medium" style={[pal.text]}>
'xs-medium' lorem ipsum dolor
</Text>
<Text type="xs-bold" style={[pal.text]}>
'xs-bold' lorem ipsum dolor
</Text>
<Text type="xs-heavy" style={[pal.text]}>
'xs-heavy' lorem ipsum dolor
</Text>
<Text type="title-2xl" style={[pal.text]}>
'title-2xl' lorem ipsum dolor
</Text>
<Text type="title-xl" style={[pal.text]}>
'title-xl' lorem ipsum dolor
</Text>
<Text type="title-lg" style={[pal.text]}>
'title-lg' lorem ipsum dolor
</Text>
<Text type="title" style={[pal.text]}>
'title' lorem ipsum dolor
</Text>
<Text type="button" style={[pal.text]}>
Button
</Text>
<Text type="button-lg" style={[pal.text]}>
Button-lg
</Text>
</View>
)
}
function EmptyStateView() {
return <EmptyState icon="bars" message="This is an empty state" />
}
function LoadingPlaceholderView() {
return (
<>
<LoadingPlaceholder.PostLoadingPlaceholder />
<LoadingPlaceholder.NotificationLoadingPlaceholder />
</>
)
}
function ButtonsView() {
const defaultPal = usePalette('default')
const buttonStyles = {marginRight: 5}
return (
<View style={[defaultPal.view]}>
<View style={[s.flexRow, s.mb5]}>
<Button type="primary" label="Primary solid" style={buttonStyles} />
<Button type="secondary" label="Secondary solid" style={buttonStyles} />
</View>
<View style={[s.flexRow, s.mb5]}>
<Button type="default" label="Default solid" style={buttonStyles} />
<Button type="inverted" label="Inverted solid" style={buttonStyles} />
</View>
<View style={s.flexRow}>
<Button
type="primary-outline"
label="Primary outline"
style={buttonStyles}
/>
<Button
type="secondary-outline"
label="Secondary outline"
style={buttonStyles}
/>
</View>
<View style={s.flexRow}>
<Button
type="primary-light"
label="Primary light"
style={buttonStyles}
/>
<Button
type="secondary-light"
label="Secondary light"
style={buttonStyles}
/>
</View>
<View style={s.flexRow}>
<Button
type="default-light"
label="Default light"
style={buttonStyles}
/>
</View>
</View>
)
}
const DROPDOWN_ITEMS: DropdownItem[] = [
{
icon: ['far', 'paste'],
label: 'Copy post text',
onPress() {},
},
{
icon: 'share',
label: 'Share...',
onPress() {},
},
{
icon: 'circle-exclamation',
label: 'Report post',
onPress() {},
},
]
function DropdownButtonsView() {
const defaultPal = usePalette('default')
return (
<View style={[defaultPal.view]}>
<View style={s.mb5}>
<DropdownButton
type="primary"
items={DROPDOWN_ITEMS}
menuWidth={200}
label="Primary button"
/>
</View>
<View style={s.mb5}>
<DropdownButton type="bare" items={DROPDOWN_ITEMS} menuWidth={200}>
<Text>Bare</Text>
</DropdownButton>
</View>
</View>
)
}
function ToggleButtonsView() {
const defaultPal = usePalette('default')
const buttonStyles = s.mb5
const [isSelected, setIsSelected] = React.useState(false)
const onToggle = () => setIsSelected(!isSelected)
return (
<View style={[defaultPal.view]}>
<ToggleButton
type="primary"
label="Primary solid"
style={buttonStyles}
isSelected={isSelected}
onPress={onToggle}
/>
<ToggleButton
type="secondary"
label="Secondary solid"
style={buttonStyles}
isSelected={isSelected}
onPress={onToggle}
/>
<ToggleButton
type="inverted"
label="Inverted solid"
style={buttonStyles}
isSelected={isSelected}
onPress={onToggle}
/>
<ToggleButton
type="primary-outline"
label="Primary outline"
style={buttonStyles}
isSelected={isSelected}
onPress={onToggle}
/>
<ToggleButton
type="secondary-outline"
label="Secondary outline"
style={buttonStyles}
isSelected={isSelected}
onPress={onToggle}
/>
<ToggleButton
type="primary-light"
label="Primary light"
style={buttonStyles}
isSelected={isSelected}
onPress={onToggle}
/>
<ToggleButton
type="secondary-light"
label="Secondary light"
style={buttonStyles}
isSelected={isSelected}
onPress={onToggle}
/>
<ToggleButton
type="default-light"
label="Default light"
style={buttonStyles}
isSelected={isSelected}
onPress={onToggle}
/>
</View>
)
}
const RADIO_BUTTON_ITEMS = [
{key: 'default-light', label: 'Default Light'},
{key: 'primary', label: 'Primary'},
{key: 'secondary', label: 'Secondary'},
{key: 'inverted', label: 'Inverted'},
{key: 'primary-outline', label: 'Primary Outline'},
{key: 'secondary-outline', label: 'Secondary Outline'},
{key: 'primary-light', label: 'Primary Light'},
{key: 'secondary-light', label: 'Secondary Light'},
]
function RadioButtonsView() {
const defaultPal = usePalette('default')
const [rgType, setRgType] = React.useState<ButtonType>('default-light')
return (
<View style={[defaultPal.view]}>
<RadioGroup
type={rgType}
items={RADIO_BUTTON_ITEMS}
initialSelection="default-light"
onSelect={v => setRgType(v as ButtonType)}
/>
</View>
)
}
src/view/screens/DebugNew.tsx
-746
View File
@@ -1,746 +0,0 @@
import React from 'react'
import {View} from 'react-native'
import {CenteredView, ScrollView} from '#/view/com/util/Views'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {useSetColorMode} from '#/state/shell'
import * as tokens from '#/alf/tokens'
import {atoms as a, useTheme, useBreakpoints, ThemeProvider as Alf} from '#/alf'
import {Button, ButtonText} from '#/view/com/Button'
import {Link} from '#/view/com/Link'
import {Text, H1, H2, H3, H4, H5, H6, P} from '#/view/com/Typography'
import {InputText} from '#/view/com/forms/InputText'
import {InputDate, utils} from '#/view/com/forms/InputDate'
import {Logo} from '#/view/icons/Logo'
import * as Dialog from '#/view/com/Dialog'
import * as Prompt from '#/view/com/Prompt'
function ThemeSelector() {
const setColorMode = useSetColorMode()
return (
<View style={[a.flex_row, a.align_start, a.gap_md]}>
<Button
type="secondary"
size="small"
accessibilityLabel='Set theme to "system"'
accessibilityHint="Set theme to system default"
onPress={() => setColorMode('system')}>
System
</Button>
<Button
type="secondary"
size="small"
accessibilityLabel='Set theme to "system"'
accessibilityHint="Set theme to system default"
onPress={() => setColorMode('light')}>
Light
</Button>
<Button
type="secondary"
size="small"
accessibilityLabel='Set theme to "system"'
accessibilityHint="Set theme to system default"
onPress={() => setColorMode('dark')}>
Dark
</Button>
</View>
)
}
function BreakpointDebugger() {
const t = useTheme()
const breakpoints = useBreakpoints()
return (
<View>
<H3 style={[a.pb_md]}>Breakpoint Debugger</H3>
<Text style={[a.pb_md]}>
Current breakpoint: {!breakpoints.gtMobile && <Text>mobile</Text>}
{breakpoints.gtMobile && !breakpoints.gtTablet && <Text>tablet</Text>}
{breakpoints.gtTablet && <Text>desktop</Text>}
</Text>
<Text
style={[a.p_md, t.atoms.bg_contrast_100, {fontFamily: 'monospace'}]}>
{JSON.stringify(breakpoints, null, 2)}
</Text>
</View>
)
}
function ThemedSection() {
const t = useTheme()
return (
<View style={[t.atoms.bg, a.gap_md, a.p_xl]}>
<H3 style={[a.font_bold]}>theme.atoms.text</H3>
<View style={[a.flex_1, t.atoms.border, a.border_t]} />
<H3 style={[a.font_bold, t.atoms.text_contrast_700]}>
theme.atoms.text_contrast_700
</H3>
<View style={[a.flex_1, t.atoms.border, a.border_t]} />
<H3 style={[a.font_bold, t.atoms.text_contrast_500]}>
theme.atoms.text_contrast_500
</H3>
<View style={[a.flex_1, t.atoms.border_contrast_500, a.border_t]} />
<View style={[a.flex_row, a.gap_md]}>
<View
style={[
a.flex_1,
t.atoms.bg,
a.align_center,
a.justify_center,
{height: 60},
]}>
<Text>theme.bg</Text>
</View>
<View
style={[
a.flex_1,
t.atoms.bg_contrast_100,
a.align_center,
a.justify_center,
{height: 60},
]}>
<Text>theme.bg_contrast_100</Text>
</View>
</View>
<View style={[a.flex_row, a.gap_md]}>
<View
style={[
a.flex_1,
t.atoms.bg_contrast_200,
a.align_center,
a.justify_center,
{height: 60},
]}>
<Text>theme.bg_contrast_200</Text>
</View>
<View
style={[
a.flex_1,
t.atoms.bg_contrast_300,
a.align_center,
a.justify_center,
{height: 60},
]}>
<Text>theme.bg_contrast_300</Text>
</View>
</View>
<View style={[a.flex_row, a.gap_md]}>
<View
style={[
a.flex_1,
t.atoms.bg_positive,
a.align_center,
a.justify_center,
{height: 60},
]}>
<Text>theme.bg_positive</Text>
</View>
<View
style={[
a.flex_1,
t.atoms.bg_negative,
a.align_center,
a.justify_center,
{height: 60},
]}>
<Text>theme.bg_negative</Text>
</View>
</View>
</View>
)
}
export function Buttons() {
const t = useTheme()
return (
<View style={[a.gap_md, a.align_start]}>
<Button
accessibilityLabel="Click here"
accessibilityHint="Opens something">
Unstyled button
</Button>
<Button
accessibilityLabel="Click here"
accessibilityHint="Opens something">
{({state}) => (
<View style={[a.p_md, a.rounded_full, t.atoms.bg_contrast_300]}>
<Text>Entirely custom button, state: {JSON.stringify(state)}</Text>
</View>
)}
</Button>
<Button
accessibilityLabel="Click here"
accessibilityHint="Opens something"
type="primary"
size="large">
Default button
</Button>
<Button
accessibilityLabel="Click here"
accessibilityHint="Opens something"
type="primary"
size="large"
disabled>
Default button (disabled)
</Button>
<Button
accessibilityLabel="Click here"
accessibilityHint="Opens something"
type="primary"
size="large">
{({props}) => (
<>
<FontAwesomeIcon icon={['fas', 'plus']} size={12} />
<ButtonText {...props}>Default with an icon</ButtonText>
</>
)}
</Button>
<Button
accessibilityLabel="Click here"
accessibilityHint="Opens something"
type="secondary"
size="small">
Small button
</Button>
<Button
accessibilityLabel="Click here"
accessibilityHint="Opens something"
type="secondary"
size="small"
disabled>
Small button (disabled)
</Button>
<Link
accessibilityLabel="Click here"
accessibilityHint="Opens something"
to="https://blueskyweb.xyz"
warnOnMismatchingTextChild
style={[a.text_md]}>
External
</Link>
<Link
accessibilityLabel="Click here"
accessibilityHint="Opens something"
to="https://blueskyweb.xyz"
style={[a.text_md]}>
<H3>External with custom children</H3>
</Link>
<Link
accessibilityLabel="Click here"
accessibilityHint="Opens something"
to="https://blueskyweb.xyz"
warnOnMismatchingTextChild
style={[a.text_md]}>
https://blueskyweb.xyz
</Link>
<Link
accessibilityLabel="Click here"
accessibilityHint="Opens something"
to="https://bsky.app/profile/bsky.app"
warnOnMismatchingTextChild
style={[a.text_md]}>
Internal
</Link>
<Link
accessibilityLabel="Click here"
accessibilityHint="Opens something"
type="primary"
size="large"
to="https://bsky.app/profile/bsky.app">
{({props}) => <ButtonText {...props}>Link as a button</ButtonText>}
</Link>
</View>
)
}
function Forms() {
return (
<View style={[a.gap_md, a.align_start]}>
<InputText
testID="input"
accessibilityLabel="Input"
accessibilityHint="Enter some text"
placeholder="Type here"
value=""
onChange={text => console.log(text)}
/>
<InputText
hasError
testID="input"
accessibilityLabel="Input"
accessibilityHint="Enter some text"
placeholder="Type here"
value="Test initial value"
onChange={text => console.log(text)}
/>
<InputText
testID="input"
accessibilityLabel="Input"
accessibilityHint="Enter some text"
placeholder="Type here"
value=""
onChange={text => console.log(text)}
icon={Logo}
/>
<InputText
testID="input"
accessibilityLabel="Input"
accessibilityHint="Enter some text"
placeholder="Type here"
value=""
onChange={text => console.log(text)}
icon={Logo}
suffix={() => <Text>.bksy.social</Text>}
/>
<InputDate
testID="date"
value={'2001-01-01'}
onChange={date => console.log(date)}
accessibilityLabel="Date"
accessibilityHint="Enter a date"
/>
<InputDate
testID="date"
value={utils.toSimpleDateString(new Date())}
onChange={date => console.log(date)}
accessibilityLabel="Date"
accessibilityHint="Enter a date"
/>
</View>
)
}
function Dialogs() {
const control = Dialog.useDialogControl()
const prompt = Prompt.usePromptControl()
return (
<>
<Button
type="secondary"
size="small"
onPress={() => control.open()}
accessibilityLabel="Open basic dialog"
accessibilityHint="Open basic dialog">
Open basic dialog
</Button>
<Button
type="negative"
size="small"
onPress={() => prompt.open()}
accessibilityLabel="Open prompt"
accessibilityHint="Open prompt">
Open prompt
</Button>
<Prompt.Outer control={prompt}>
<Prompt.Title>Are you sure?</Prompt.Title>
<Prompt.Description>
This action cannot be undone. This action cannot be undone. This
action cannot be undone.
</Prompt.Description>
<Prompt.Actions>
<Prompt.Cancel>Cancel</Prompt.Cancel>
<Prompt.Action>Confirm</Prompt.Action>
</Prompt.Actions>
</Prompt.Outer>
<Dialog.Outer control={control}>
<Dialog.Inner
accessibilityLabelledBy="dialog-title"
accessibilityDescribedBy="dialog-description">
<Dialog.Handle />
<View style={[a.gap_md]}>
<H3 nativeID="dialog-title">Dialog</H3>
<P nativeID="dialog-description">Description</P>
<View style={[a.flex_row, a.justify_end]}>
<Button
type="primary"
size="small"
onPress={() => control.close()}
accessibilityLabel="Open basic dialog"
accessibilityHint="Open basic dialog">
Close basic dialog
</Button>
</View>
</View>
</Dialog.Inner>
</Dialog.Outer>
</>
)
}
export function DebugScreen() {
const t = useTheme()
return (
<ScrollView>
<CenteredView style={[t.atoms.bg]}>
<View style={[a.p_xl, a.gap_xxl, {paddingBottom: 200}]}>
<ThemeSelector />
<Dialogs />
<Forms />
<Buttons />
<Alf theme="light">
<ThemedSection />
</Alf>
<Alf theme="dark">
<ThemedSection />
</Alf>
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
<Text style={[a.text_xxl]}>atoms.text_xxl</Text>
<Text style={[a.text_xl]}>atoms.text_xl</Text>
<Text style={[a.text_lg]}>atoms.text_lg</Text>
<Text style={[a.text_md]}>atoms.text_md</Text>
<Text style={[a.text_sm]}>atoms.text_sm</Text>
<Text style={[a.text_xs]}>atoms.text_xs</Text>
<Text style={[a.text_xxs]}>atoms.text_xxs</Text>
<View style={[a.gap_md]}>
<View style={[a.flex_row, a.gap_md]}>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_0},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_100},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_200},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_300},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_400},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_500},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_600},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_700},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_800},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_900},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_1000},
]}
/>
</View>
<View style={[a.flex_row, a.gap_md]}>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_0},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_100},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_200},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_300},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_400},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_500},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_600},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_700},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_800},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_900},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_1000},
]}
/>
</View>
<View style={[a.flex_row, a.gap_md]}>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_0},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_100},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_200},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_300},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_400},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_500},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_600},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_700},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_800},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_900},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_1000},
]}
/>
</View>
<View style={[a.flex_row, a.gap_md]}>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_0},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_100},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_200},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_300},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_400},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_500},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_600},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_700},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_800},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_900},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_1000},
]}
/>
</View>
</View>
<View>
<H3 style={[a.pb_md, a.font_bold]}>Spacing</H3>
<View style={[a.gap_md]}>
<View style={[a.flex_row, a.align_center]}>
<Text style={{width: 80}}>xxs (2px)</Text>
<View style={[a.flex_1, a.pt_xxs, t.atoms.bg_contrast_300]} />
</View>
<View style={[a.flex_row, a.align_center]}>
<Text style={{width: 80}}>xs (4px)</Text>
<View style={[a.flex_1, a.pt_xs, t.atoms.bg_contrast_300]} />
</View>
<View style={[a.flex_row, a.align_center]}>
<Text style={{width: 80}}>sm (8px)</Text>
<View style={[a.flex_1, a.pt_sm, t.atoms.bg_contrast_300]} />
</View>
<View style={[a.flex_row, a.align_center]}>
<Text style={{width: 80}}>md (12px)</Text>
<View style={[a.flex_1, a.pt_md, t.atoms.bg_contrast_300]} />
</View>
<View style={[a.flex_row, a.align_center]}>
<Text style={{width: 80}}>lg (18px)</Text>
<View style={[a.flex_1, a.pt_lg, t.atoms.bg_contrast_300]} />
</View>
<View style={[a.flex_row, a.align_center]}>
<Text style={{width: 80}}>xl (24px)</Text>
<View style={[a.flex_1, a.pt_xl, t.atoms.bg_contrast_300]} />
</View>
<View style={[a.flex_row, a.align_center]}>
<Text style={{width: 80}}>xxl (32px)</Text>
<View style={[a.flex_1, a.pt_xxl, t.atoms.bg_contrast_300]} />
</View>
</View>
</View>
<BreakpointDebugger />
</View>
</CenteredView>
</ScrollView>
)
}
src/view/screens/Storybook/Breakpoints.tsx
+25
View File
@@ -0,0 +1,25 @@
import React from 'react'
import {View} from 'react-native'
import {atoms as a, useTheme, useBreakpoints} from '#/alf'
import {Text, H3} from '#/view/com/Typography'
export function Breakpoints() {
const t = useTheme()
const breakpoints = useBreakpoints()
return (
<View>
<H3 style={[a.pb_md]}>Breakpoint Debugger</H3>
<Text style={[a.pb_md]}>
Current breakpoint: {!breakpoints.gtMobile && <Text>mobile</Text>}
{breakpoints.gtMobile && !breakpoints.gtTablet && <Text>tablet</Text>}
{breakpoints.gtTablet && <Text>desktop</Text>}
</Text>
<Text
style={[a.p_md, t.atoms.bg_contrast_100, {fontFamily: 'monospace'}]}>
{JSON.stringify(breakpoints, null, 2)}
</Text>
</View>
)
}
src/view/screens/Storybook/Buttons.tsx
+120
View File
@@ -0,0 +1,120 @@
import React from 'react'
import {View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {atoms as a, useTheme} from '#/alf'
import {Button, ButtonText} from '#/view/com/Button'
import {Link} from '#/view/com/Link'
import {Text, H3} from '#/view/com/Typography'
export function Buttons() {
const t = useTheme()
return (
<View style={[a.gap_md, a.align_start]}>
<Button
accessibilityLabel="Click here"
accessibilityHint="Opens something">
Unstyled button
</Button>
<Button
accessibilityLabel="Click here"
accessibilityHint="Opens something">
{({state}) => (
<View style={[a.p_md, a.rounded_full, t.atoms.bg_contrast_300]}>
<Text>Entirely custom button, state: {JSON.stringify(state)}</Text>
</View>
)}
</Button>
<Button
accessibilityLabel="Click here"
accessibilityHint="Opens something"
type="primary"
size="large">
Default button
</Button>
<Button
accessibilityLabel="Click here"
accessibilityHint="Opens something"
type="primary"
size="large"
disabled>
Default button (disabled)
</Button>
<Button
accessibilityLabel="Click here"
accessibilityHint="Opens something"
type="primary"
size="large">
{({props}) => (
<>
<FontAwesomeIcon icon={['fas', 'plus']} size={12} />
<ButtonText {...props}>Default with an icon</ButtonText>
</>
)}
</Button>
<Button
accessibilityLabel="Click here"
accessibilityHint="Opens something"
type="secondary"
size="small">
Small button
</Button>
<Button
accessibilityLabel="Click here"
accessibilityHint="Opens something"
type="secondary"
size="small"
disabled>
Small button (disabled)
</Button>
<Link
accessibilityLabel="Click here"
accessibilityHint="Opens something"
to="https://blueskyweb.xyz"
warnOnMismatchingTextChild
style={[a.text_md]}>
External
</Link>
<Link
accessibilityLabel="Click here"
accessibilityHint="Opens something"
to="https://blueskyweb.xyz"
style={[a.text_md]}>
<H3>External with custom children</H3>
</Link>
<Link
accessibilityLabel="Click here"
accessibilityHint="Opens something"
to="https://blueskyweb.xyz"
warnOnMismatchingTextChild
style={[a.text_md]}>
https://blueskyweb.xyz
</Link>
<Link
accessibilityLabel="Click here"
accessibilityHint="Opens something"
to="https://bsky.app/profile/bsky.app"
warnOnMismatchingTextChild
style={[a.text_md]}>
Internal
</Link>
<Link
accessibilityLabel="Click here"
accessibilityHint="Opens something"
type="primary"
size="large"
to="https://bsky.app/profile/bsky.app">
{({props}) => <ButtonText {...props}>Link as a button</ButtonText>}
</Link>
</View>
)
}
src/view/screens/Storybook/Dialogs.tsx
+69
View File
@@ -0,0 +1,69 @@
import React from 'react'
import {View} from 'react-native'
import {atoms as a} from '#/alf'
import {Button} from '#/view/com/Button'
import {H3, P} from '#/view/com/Typography'
import * as Dialog from '#/view/com/Dialog'
import * as Prompt from '#/view/com/Prompt'
export function Dialogs() {
const control = Dialog.useDialogControl()
const prompt = Prompt.usePromptControl()
return (
<>
<Button
type="secondary"
size="small"
onPress={() => control.open()}
accessibilityLabel="Open basic dialog"
accessibilityHint="Open basic dialog">
Open basic dialog
</Button>
<Button
type="negative"
size="small"
onPress={() => prompt.open()}
accessibilityLabel="Open prompt"
accessibilityHint="Open prompt">
Open prompt
</Button>
<Prompt.Outer control={prompt}>
<Prompt.Title>Are you sure?</Prompt.Title>
<Prompt.Description>
This action cannot be undone. This action cannot be undone. This
action cannot be undone.
</Prompt.Description>
<Prompt.Actions>
<Prompt.Cancel>Cancel</Prompt.Cancel>
<Prompt.Action>Confirm</Prompt.Action>
</Prompt.Actions>
</Prompt.Outer>
<Dialog.Outer control={control}>
<Dialog.Inner
accessibilityLabelledBy="dialog-title"
accessibilityDescribedBy="dialog-description">
<Dialog.Handle />
<View style={[a.gap_md]}>
<H3 nativeID="dialog-title">Dialog</H3>
<P nativeID="dialog-description">Description</P>
<View style={[a.flex_row, a.justify_end]}>
<Button
type="primary"
size="small"
onPress={() => control.close()}
accessibilityLabel="Open basic dialog"
accessibilityHint="Open basic dialog">
Close basic dialog
</Button>
</View>
</View>
</Dialog.Inner>
</Dialog.Outer>
</>
)
}
src/view/screens/Storybook/Forms.tsx
+66
View File
@@ -0,0 +1,66 @@
import React from 'react'
import {View} from 'react-native'
import {atoms as a} from '#/alf'
import {Text} from '#/view/com/Typography'
import {InputText} from '#/view/com/forms/InputText'
import {InputDate, utils} from '#/view/com/forms/InputDate'
import {Logo} from '#/view/icons/Logo'
export function Forms() {
return (
<View style={[a.gap_md, a.align_start]}>
<InputText
testID="input"
accessibilityLabel="Input"
accessibilityHint="Enter some text"
placeholder="Type here"
value=""
onChange={text => console.log(text)}
/>
<InputText
hasError
testID="input"
accessibilityLabel="Input"
accessibilityHint="Enter some text"
placeholder="Type here"
value="Test initial value"
onChange={text => console.log(text)}
/>
<InputText
testID="input"
accessibilityLabel="Input"
accessibilityHint="Enter some text"
placeholder="Type here"
value=""
onChange={text => console.log(text)}
icon={Logo}
/>
<InputText
testID="input"
accessibilityLabel="Input"
accessibilityHint="Enter some text"
placeholder="Type here"
value=""
onChange={text => console.log(text)}
icon={Logo}
suffix={() => <Text>.bksy.social</Text>}
/>
<InputDate
testID="date"
value={'2001-01-01'}
onChange={date => console.log(date)}
accessibilityLabel="Date"
accessibilityHint="Enter a date"
/>
<InputDate
testID="date"
value={utils.toSimpleDateString(new Date())}
onChange={date => console.log(date)}
accessibilityLabel="Date"
accessibilityHint="Enter a date"
/>
</View>
)
}
src/view/screens/Storybook/Palette.tsx
+279
View File
@@ -0,0 +1,279 @@
import React from 'react'
import {View} from 'react-native'
import * as tokens from '#/alf/tokens'
import {atoms as a} from '#/alf'
export function Palette() {
return (
<View style={[a.gap_md]}>
<View style={[a.flex_row, a.gap_md]}>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_25},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_50},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_100},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_200},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_300},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_400},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_500},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_600},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_700},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_800},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_900},
]}
/>
</View>
<View style={[a.flex_row, a.gap_md]}>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_25},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_50},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_100},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_200},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_300},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_400},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_500},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_600},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_700},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_800},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_900},
]}
/>
</View>
<View style={[a.flex_row, a.gap_md]}>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_25},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_50},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_100},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_200},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_300},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_400},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_500},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_600},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_700},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_800},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.green_900},
]}
/>
</View>
<View style={[a.flex_row, a.gap_md]}>
<View
style={[a.flex_1, {height: 60, backgroundColor: tokens.color.red_25}]}
/>
<View
style={[a.flex_1, {height: 60, backgroundColor: tokens.color.red_50}]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_100},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_200},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_300},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_400},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_500},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_600},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_700},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_800},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_900},
]}
/>
</View>
</View>
)
}
src/view/screens/Storybook/Spacing.tsx
+64
View File
@@ -0,0 +1,64 @@
import React from 'react'
import {View} from 'react-native'
import {atoms as a, useTheme} from '#/alf'
import {Text} from '#/view/com/Typography'
export function Spacing() {
const t = useTheme()
return (
<View>
<View style={[a.gap_md]}>
<View style={[a.flex_row, a.align_center]}>
<Text style={{width: 80}}>2xs (2px)</Text>
<View style={[a.flex_1, a.pt_2xs, t.atoms.bg_contrast_300]} />
</View>
<View style={[a.flex_row, a.align_center]}>
<Text style={{width: 80}}>xs (4px)</Text>
<View style={[a.flex_1, a.pt_xs, t.atoms.bg_contrast_300]} />
</View>
<View style={[a.flex_row, a.align_center]}>
<Text style={{width: 80}}>sm (8px)</Text>
<View style={[a.flex_1, a.pt_sm, t.atoms.bg_contrast_300]} />
</View>
<View style={[a.flex_row, a.align_center]}>
<Text style={{width: 80}}>md (12px)</Text>
<View style={[a.flex_1, a.pt_md, t.atoms.bg_contrast_300]} />
</View>
<View style={[a.flex_row, a.align_center]}>
<Text style={{width: 80}}>lg (16px)</Text>
<View style={[a.flex_1, a.pt_lg, t.atoms.bg_contrast_300]} />
</View>
<View style={[a.flex_row, a.align_center]}>
<Text style={{width: 80}}>xl (20px)</Text>
<View style={[a.flex_1, a.pt_xl, t.atoms.bg_contrast_300]} />
</View>
<View style={[a.flex_row, a.align_center]}>
<Text style={{width: 80}}>2xl (24px)</Text>
<View style={[a.flex_1, a.pt_2xl, t.atoms.bg_contrast_300]} />
</View>
<View style={[a.flex_row, a.align_center]}>
<Text style={{width: 80}}>3xl (28px)</Text>
<View style={[a.flex_1, a.pt_3xl, t.atoms.bg_contrast_300]} />
</View>
<View style={[a.flex_row, a.align_center]}>
<Text style={{width: 80}}>4xl (32px)</Text>
<View style={[a.flex_1, a.pt_4xl, t.atoms.bg_contrast_300]} />
</View>
<View style={[a.flex_row, a.align_center]}>
<Text style={{width: 80}}>5xl (40px)</Text>
<View style={[a.flex_1, a.pt_5xl, t.atoms.bg_contrast_300]} />
</View>
</View>
</View>
)
}
src/view/screens/Storybook/Theming.tsx
+56
View File
@@ -0,0 +1,56 @@
import React from 'react'
import {View} from 'react-native'
import {atoms as a, useTheme} from '#/alf'
import {Text} from '#/view/com/Typography'
import {Palette} from './Palette'
export function Theming() {
const t = useTheme()
return (
<View style={[t.atoms.bg, a.gap_lg, a.p_xl]}>
<Palette />
<Text style={[a.font_bold, a.pt_xl, a.px_md]}>theme.atoms.text</Text>
<View style={[a.flex_1, t.atoms.border, a.border_t]} />
<Text style={[a.font_bold, t.atoms.text_contrast_600, a.px_md]}>
theme.atoms.text_contrast_600
</Text>
<View style={[a.flex_1, t.atoms.border, a.border_t]} />
<Text style={[a.font_bold, t.atoms.text_contrast_500, a.px_md]}>
theme.atoms.text_contrast_500
</Text>
<View style={[a.flex_1, t.atoms.border, a.border_t]} />
<Text style={[a.font_bold, t.atoms.text_contrast_400, a.px_md]}>
theme.atoms.text_contrast_400
</Text>
<View style={[a.flex_1, t.atoms.border_contrast_500, a.border_t]} />
<View style={[a.w_full, a.gap_md]}>
<View style={[t.atoms.bg, a.justify_center, a.p_md]}>
<Text>theme.atoms.bg</Text>
</View>
<View style={[t.atoms.bg_contrast_25, a.justify_center, a.p_md]}>
<Text>theme.atoms.bg_contrast_25</Text>
</View>
<View style={[t.atoms.bg_contrast_50, a.justify_center, a.p_md]}>
<Text>theme.atoms.bg_contrast_50</Text>
</View>
<View style={[t.atoms.bg_contrast_100, a.justify_center, a.p_md]}>
<Text>theme.atoms.bg_contrast_100</Text>
</View>
<View style={[t.atoms.bg_contrast_200, a.justify_center, a.p_md]}>
<Text>theme.atoms.bg_contrast_200</Text>
</View>
<View style={[t.atoms.bg_contrast_300, a.justify_center, a.p_md]}>
<Text>theme.atoms.bg_contrast_300</Text>
</View>
</View>
</View>
)
}
src/view/screens/Storybook/Typography.tsx
+29
View File
@@ -0,0 +1,29 @@
import React from 'react'
import {atoms as a} from '#/alf'
import {Text, H1, H2, H3, H4, H5, H6, P} from '#/view/com/Typography'
export function Typography() {
return (
<>
<H1>H1 Heading</H1>
<H2>H2 Heading</H2>
<H3>H3 Heading</H3>
<H4>H4 Heading</H4>
<H5>H5 Heading</H5>
<H6>H6 Heading</H6>
<P>P Paragraph</P>
<Text style={[a.text_5xl]}>atoms.text_5xl</Text>
<Text style={[a.text_4xl]}>atoms.text_4xl</Text>
<Text style={[a.text_3xl]}>atoms.text_3xl</Text>
<Text style={[a.text_2xl]}>atoms.text_2xl</Text>
<Text style={[a.text_xl]}>atoms.text_xl</Text>
<Text style={[a.text_lg]}>atoms.text_lg</Text>
<Text style={[a.text_md]}>atoms.text_md</Text>
<Text style={[a.text_sm]}>atoms.text_sm</Text>
<Text style={[a.text_xs]}>atoms.text_xs</Text>
<Text style={[a.text_2xs]}>atoms.text_2xs</Text>
</>
)
}
src/view/screens/Storybook/index.tsx
+69
View File
@@ -0,0 +1,69 @@
import React from 'react'
import {View} from 'react-native'
import {CenteredView, ScrollView} from '#/view/com/util/Views'
import {atoms as a, useTheme, ThemeProvider} from '#/alf'
import {useSetColorMode} from '#/state/shell'
import {Button} from '#/view/com/Button'
import {Theming} from './Theming'
import {Typography} from './Typography'
import {Spacing} from './Spacing'
import {Buttons} from './Buttons'
import {Forms} from './Forms'
import {Dialogs} from './Dialogs'
import {Breakpoints} from './Breakpoints'
export function Storybook() {
const t = useTheme()
const setColorMode = useSetColorMode()
return (
<ScrollView>
<CenteredView style={[t.atoms.bg]}>
<View style={[a.p_xl, a.gap_2xl, {paddingBottom: 200}]}>
<View style={[a.flex_row, a.align_start, a.gap_md]}>
<Button
type="secondary"
size="small"
accessibilityLabel='Set theme to "system"'
accessibilityHint="Set theme to system default"
onPress={() => setColorMode('system')}>
System
</Button>
<Button
type="secondary"
size="small"
accessibilityLabel='Set theme to "system"'
accessibilityHint="Set theme to system default"
onPress={() => setColorMode('light')}>
Light
</Button>
<Button
type="secondary"
size="small"
accessibilityLabel='Set theme to "system"'
accessibilityHint="Set theme to system default"
onPress={() => setColorMode('dark')}>
Dark
</Button>
</View>
<ThemeProvider theme="light">
<Theming />
</ThemeProvider>
<ThemeProvider theme="dark">
<Theming />
</ThemeProvider>
<Typography />
<Spacing />
<Buttons />
<Forms />
<Dialogs />
<Breakpoints />
</View>
</CenteredView>
</ScrollView>
)
}