This repo is the companion to the "Rapid UI Development in React: Harnessing custom component libraries and & design systems" workshop at React Advandced London 2022.
Clone the repo and run yarn
for package installs.
Alternatively you can run npm i
to run installs.
If you have any install issues check your version of Node and update to the latest stable version (easiest way is using nvm), If you already have nvm just run nvm use
in the project directory.
In the project directory, run:
This will run the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
In the src
folder you'll find folders named after the headings on the page. Don't forget to reference the example when completing the exercises ๐
Open the src/Theming
folder and open up /excercise
.
Your task is to implement the theme.ts. Follow the code comments for guidance.
- Wrap the whole component with the
ThemeProvider
from "styled-components". - Create a simple theme in
theme.js
and import it. (import theme from './theme'
). This theme should have the base colors for your app. - Implement the colors you have created in
theme.ts
in the styled components to style your card component.
Bonus: Import the brand colors from legacy-styles, add them to your theme and use them also.
Extra bonus: Get TS working for your new theme. Bear in mind you may have ignore it complaining about other files in the project due to multiple theme files ;-)
Have a look at a theme specification. How would go about structuring your theme?
Open the src/StyledSystem
folder and open up /excercise
Your task is to add styled system utils for prop based styling to the button styled component.
- Import the space and color utils from styled-system and apply them to the button styled component.
- Use the utils to customize styling of the button, try changing the padding, background color and and text color. ref: https://styled-system.com/api
- Use the styles referenced in the theme.ts for some of the custom styling via styled system utils props, there are both colors and space in the theme. See: https://styled-system.com/theme-specification
Open the src/Variants
folder and open up /excercise
- Create a cariant called alertStyle
- In theme.ts add your variants for default, error, sucess and warning
- Add the variant to your Alert styled component at the end
- Add default props to the Alert component so the variant prop doesn't have to be passed Bonus: Check out the docs to see how to write the variants inline: https://styled-system.com/variants#variants. Try it this way also, which do you like better?
Open the src/Chakra
folder and open up index
Chakra implement the styled system theme specification that you're now familiar with! https://chakra-ui.com/docs/styled-system/theme
If we are using Chakra, we probably want to customize the default theme.
- Extend the Chakra theme in theme.ts to bring in our brand colors and apply them to the design, perhaps the background of the badge on line 21 ;-)
Bonus: Overide a chakra component with custom styles https://chakra-ui.com/docs/styled-system/component-style