An example of how to write components in React using Typescript and Storybook.
start
- The starting point for the challengesolution
- Examples of two different APIs for a lightsaber: 1 top level component + a composable lightsaber with more flexibility
Run the following commands to get setup:
# Install Deps
yarn
# Start dev server
yarn storybook
After that is done start editing src/Lightsaber.stories.tsx
and creating your component!
Your task is to build a lightsaber component using that parts included in this repo.
The following is the way you should put your lightsaber together. A lightsaber body contains a blade and a handle.
<lightsaber-body>
<lightsaber-handle />
<lightsaber-blade />
</lightsaber-body>
-
src/handles.tsx
- An object containing the different handles a lightsaber can have -
src/Lightsaber.css
- The only CSS you should need to build your light saber.body
- the wrapper div for you blade.blade
- the light emitting portion of the lightsaber.blade.active
- to be used when the lightsaber blade is visible
-
src/useLightSaberHum.tsx
- a hook for adding the lightsaber hum to your component// Attach this ref to the element you want to hum const ref = useLightsaberHum<HTMLDivElement>(active);
- Create a
Lightsaber
component - Have the color, active state, and handles all be configurable
- Create an interactive story that uses your component
Bonus:
- Make it go
woosh
(use the hook!)