0.2.0-alpha.23 • Published 4 years ago

@insync-stageplayer/ui-components v0.2.0-alpha.23

Weekly downloads
-
License
ISC
Repository
-
Last release
4 years ago

insync-stageplayer/ui-components

Contains UI components used in InSync Stageplayer.

Development

To start developing inside storybook:

yarn storybook

After finished, storybook can be opened at localhost:6006

Working on multiple packages at the same time.

Sometimes, you'll need to work across several packages at once. When, for example, working on the Chart component, you might have to change something inside the @insync-stageplayer/chart package. In order for these changes to be reflected, the @insync-stageplayer/chart package will have to be rebuild, as the @insync-stageplayer/ui-components uses the files inside @insync-stageplayer/chart/lib.

The easiest way to do this, is by either starting a watch on the entire mono repo by running the watch command from the project root:

cd ..
yarn watch

(All these commands are expected to be executed from the packages/ui-components)

Or you can just only watch the @insync-stageplayer/chart package for changes with:

cd ../packages/chart
yarn watch

The watch command will rebuild the necessary files when a change to the source code is detected.

Theming

Currently we have a light and a dark theme. We can switch between these while developing by using the theme button in storybook:

Switch theme button

@insync-stageplayer/ui-components uses styled-components for styling.

The themes are defined in src/themes and have the Theme interface. To read more about theming in styled components please read this.

In order have the themes typesafe the styled function commonly imported like this:

import styled from "styled-components"

should instead be imported like:

import { styled } from "../themes"

This will make sure that all the the theme properties are available on the props and can be used like this:

const Foo = styled.div`
  width: 50px;
  background-color: ${(props): string => props.theme.colors.primary}
`
0.2.0-alpha.23

4 years ago

0.2.0-alpha.22

4 years ago

0.2.0-alpha.21

4 years ago

0.2.0-alpha.20

4 years ago

0.2.0-alpha.18

4 years ago

0.2.0-alpha.17

4 years ago

0.2.0-alpha.16

4 years ago

0.2.0-alpha.15

4 years ago

0.2.0-alpha.14

4 years ago

0.2.0-alpha.13

4 years ago

0.2.0-alpha.12

4 years ago

0.2.0-alpha.11

4 years ago

0.2.0-alpha.10

4 years ago

0.2.0-alpha.9

4 years ago

0.2.0-alpha.8

4 years ago

0.2.0-alpha.7

4 years ago

0.2.0-alpha.6

4 years ago

0.2.0-alpha.5

4 years ago

0.2.0-alpha.4

4 years ago

0.2.0-alpha.3

4 years ago

0.2.0-y.0

4 years ago

0.2.0-alpha.2

4 years ago

0.2.0-alpha.1

4 years ago

0.2.0-alpha.0

4 years ago

0.0.1-y.0

4 years ago

0.0.1-y.1

4 years ago

0.0.1-alpha.18

4 years ago

0.1.0

4 years ago

0.0.1-alpha.17

4 years ago

0.0.1-alpha.16

4 years ago

0.0.1-alpha.14

4 years ago

0.0.1-alpha.15

4 years ago

0.0.1-alpha.12

4 years ago

0.0.1-alpha.13

4 years ago

0.0.1-alpha.11

4 years ago

0.0.1-alpha.10

4 years ago

0.0.1-alpha.9

4 years ago

0.0.1-alpha.8

4 years ago

0.0.1-alpha.7

4 years ago

0.0.1-alpha.6

4 years ago

0.0.1-alpha.5

4 years ago

0.0.1-alpha.4

4 years ago

0.0.1-alpha.3

4 years ago

0.0.1-alpha.2

4 years ago

0.0.1-alpha.1

4 years ago