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/ .

This repository also tracks TODO and FIXME markers with gh-counter. Pull requests get one managed comment when they touch relevant files, and the current main-branch count is published as a badge to the dedicated gh-counter-assets branch.

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.

Design Principles

Components in this repository should be explained in terms of ordinary Web concepts first. That does not only mean HTML tag compatibility. A package may correspond to:

• a semantic wrapper around an HTML element
• a state provider/controller
• an interaction primitive
• a visualization primitive
• a layout/behavior primitive
• a default UI layered on top of one of the primitives above

The goal is to keep public APIs compatible with normal HTML/CSS usage whenever possible. Visual appearance should usually be controlled by consumers. When a package needs a default UI, that UI should remain replaceable and be layered on top of directly consumable primitives such as Context providers.

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 ... time visualization primitives and time context
• [x] @kitsuyui/react-timer ... timer state provider and replaceable default UI
• [x] @kitsuyui/react-stopwatch ... stopwatch state provider and replaceable default UI
• [x] @kitsuyui/react-alarm ... alarm state provider with replaceable default UI and optional notification
• [x] @kitsuyui/react-metronome ... metronome state provider with replaceable default UI
• [x] @kitsuyui/react-dekamoji ... fit-text layout primitive plus auto-measuring wrapper
• [x] @kitsuyui/react-wavebox ... animated layout primitive with provider and sized-box exports
• [x] @kitsuyui/react-treemap ... treemap layout primitive plus auto-measuring wrapper
• [x] @kitsuyui/react-measure ... measurement visualization primitive plus auto-measuring wrapper
• [x] @kitsuyui/react-textfield ... semantic wrappers for text inputs with IME-aware behavior
• [x] @kitsuyui/react-tab ... interaction primitive for tabbed interfaces
• [x] @kitsuyui/react-biticon ... visualization primitive for 128-bit identifiers
• [x] @kitsuyui/react-binary ... text/bit visualization primitives
• [x] @kitsuyui/react-zoomer ... fit-within-container layout primitive plus auto-measuring wrapper
• [x] @kitsuyui/react-hello ... minimal semantic text wrapper example
• [ ] Alarm
• [ ] Dice

License

MIT