react-playground

What is this?

This is a repository for practicing React. Create React components and check them with Storybook or write tests. It only deals with content that is closed to React. It does not handle Next.js, etc. For Next.js, see https://github.com/kitsuyui/nextjs-playground/ . For TypeScript, see https://github.com/kitsuyui/ts-playground/ .

Concept

Wrapping

If you know how to use raw HTML, you know how to use it, so wrap it as it is as much as possible.

Block elements

If there is a size specification, display it with that size. If there is no size specification, it is interpreted as width: auto, height: auto

Inline elements

The size is determined by the font size specification.

Demo & Documentations

• [x] Storybook
• [x] typedocs

Goal

• [x] npm package of components
• [x] Snapshot test of components
• [x] Storybook of components
• [x] Test coverage
• [ ] Separation method that maintains the extensibility of styles

Features

• [x] @kitsuyui/react-clock ... Clock
• [x] @kitsuyui/react-timer ... Pomodoro timer
• [x] @kitsuyui/react-stopwatch ... Stopwatch
• [x] @kitsuyui/react-dekamoji ... Display big text whole screen
• [x] @kitsuyui/react-wavebox ... Variable size box (for debug)
• [x] @kitsuyui/react-treemap ... Put the box in the box like as marimekko chart
• [x] @kitsuyui/react-measure ... Display size of the box (for debug)
• [x] @kitsuyui/react-textfield ... Text field (input, textarea) with IME support
• [ ] Alarm
• [ ] Dice

License

MIT