0.8.5 • Published 4 years ago
@sv-keg/keg-components v0.8.5
Keg Components
- Base UI Components for the Keg Core and Tap extensions a
Dev setup
yarn install
yarn sb
- local storybookyarn sb:native
- native local storybookyarn sb:web
- web local storybookyarn format
- formats your code based on the config set inconfigs/eslint.config.js
&&configs/prettier.config.js
yarn eslint:watch
- watches any code change for any lint errors
Theming
Keg Components leverages re-theme for dynamic theming across platforms and viewport sizes
Theme objects
- For new components, create and export your theme objects in
src/theme/components
Using themes in components
Use the
useThemePath
hook:import { useThemePath } from '../../hooks' const FooBar = (props) => { // theme from `src/theme/components/fooBar.js` const fooBarTheme = useThemePath('fooBar') return ( <View style={fooBarTheme.main}> ... </View> ) }
Conventions
Every component implemented in keg-components that has a theme should define main
and content
styles:
/* src/theme/components/sampleButton.js */
export const sampleButton = {
main: { ... },
content: { ... }
}
- main: the root styles of the component
- content: the styles for content in the component
- Example: a simple Button component's
main
style would theme its root View component, whereas thecontent
style themes its inner Text component:/* src/components/button/sampleButton.js */ export const SampleButton = (props) => { const buttonTheme = useThemePath('sampleButton', props.style) return ( <View style={buttonTheme.main}> <Text style={buttonTheme.content}> { props.text } </Text> </View> ) }
Components sometimes import/consume other keg-components and then need to style those imported components within their styling context. These styles should be defined in the consumer's theme object
- Example: a button with an icon
/* src/theme/components/iconButton.js */
export const iconButton= {
main: { ... },
content: { ... },
icon: {
main: { ... },
content: { ... }
}
}
Use size keys (e.g. $small, $medium, etc.) and platform keys (e.g. $native, $web, $all, etc.) to wrap style properties only. This ensures that the shape of the theme object remains constant across all platforms and viewport sizes.
- DON'T do this:
export const button = {
$web: {
main: {
backgroundColor: 'coral'
},
},
$native: {
main: {
backgroundColor: 'green'
},
content: {
margin: 15
}
}
}
- DO this:
export const button = {
main: {
$native: {
backgroundColor: 'green'
},
$web: {
backgroundColor: 'coral'
}
},
content: {
$native: {
margin: 15
}
}
}
- in the first case, the theme object would not have the
content
styles on the$web
platform, making it inconsistent with$native