https://github.com/hipstersmoothie/lightsaber

An example of how to write components in React using Typescript and Storybook.
https://github.com/hipstersmoothie/lightsaber

react star-wars storybook typescript

Last synced: 7 days ago
JSON representation

An example of how to write components in React using Typescript and Storybook.

• Host: GitHub
• URL: https://github.com/hipstersmoothie/lightsaber
• Owner: hipstersmoothie
• Created: 2019-06-19T18:08:49.000Z (over 5 years ago)
• Default Branch: start
• Last Pushed: 2023-01-04T00:48:14.000Z (about 2 years ago)
• Last Synced: 2024-12-21T23:24:09.431Z (about 1 month ago)
• Topics: react, star-wars, storybook, typescript
• Language: TypeScript
• Homepage: https://hipstersmoothie.github.io/lightsaber
• Size: 13.4 MB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 25
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# F2E React + Storybook + Typescript

An example of how to write components in React using Typescript and Storybook.

![Example output](./storybook.png)

## Branches

- `start` - The starting point for the challenge

- `solution` - Examples of two different APIs for a lightsaber: 1 top level component + a composable lightsaber with more flexibility

## Getting Started

Run the following commands to get setup:

```sh

# Install Deps

yarn

# Start dev server

yarn storybook

```

After that is done start editing `src/Lightsaber.stories.tsx` and creating your component!

## Challenge

Your task is to build a lightsaber component using that parts included in this repo.

### Components Structure

The following is the way you should put your lightsaber together. A lightsaber body contains a blade and a handle.

```html

  

  

```

### Included Parts

1. `src/handles.tsx` - An object containing the different handles a lightsaber can have

2. `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

3. `src/useLightSaberHum.tsx` - a hook for adding the lightsaber hum to your component

   ```ts

   // Attach this ref to the element you want to hum

   const ref = useLightsaberHum(active);

   ```

## Tasks

- [ ] 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!)