Skip to content

kitsuyui/react-playground

Repository files navigation

react-playground

codecov

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.

Style specification

Basically, do not specify the style as much as possible. The style specification should be specified by the user of the component. As an exception, packages/style-{name} contains a CSS framework with specific styles.

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

Goal

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

Features

  • @kitsuyui/react-components npm version
    • @kitsuyui/react-clock npm version ... Clock
    • @kitsuyui/react-timer npm version ... Pomodoro timer
    • @kitsuyui/react-stopwatch npm version ... Stopwatch
    • @kitsuyui/react-dekamoji npm version ... Display big text whole screen
    • @kitsuyui/react-wavebox npm version ... Variable size box (for debug)
    • @kitsuyui/react-treemap npm version ... Put the box in the box like as marimekko chart
    • @kitsuyui/react-measure npm version ... Display size of the box (for debug)
    • @kitsuyui/react-textfield npm version ... Text field with IME support
    • @kitsuyui/react-editablelabel npm version ... Editable label with IME support
    • Alarm
    • Dice
  • @kitsuyui/react-style-bulma npm version ... Bulma CSS framework with @kitsuyui/react-components

License

MIT