npm package: @strelka/components
Description: React components and storybook for Strelka projects
Latest version: 1.17.14

[![](./screenshot.png)](https://strelka-institute.github.io/components)

# Strelka Components

>  React.js components and storybook for Strelka projects


## Requirements

- [Node.js](https://nodejs.org/en/)
- [Yarn](https://yarnpkg.com/en/docs/install) package manager


## Usage

```sh
$ yarn add emotion react-emotion emotion-theming recompose defaults.css @strelka/components
```

```js
import 'defaults.css'
import { StrelkaThemeProvider, Container, Grid } from '@strelka/components'

const Page = () => (
  <StrelkaThemeProvider>
    <Container>
      <Grid>
        <Grid.Cell col={6}> Strelka </Grid.Cell>
      </Grid>
    </Container>
  </StrelkaThemeProvider>
)
```


### Styling Props

Styling props are a special type of props that are used to style components.
For example:

```js
import { StrelkaThemeProvider, Div } from '@strelka/components'
  
const Example = () => (
  <StrelkaThemeProvider>
    <Div tm='inverted' pd mgM={2} hideT wd={1/3}>
      Example content
    </Div>
  </StrelkaThemeProvider>
)
```

Here `pd`, `mgM`, `tm`, `hideT`, `wd` are styling props that define, correspondingly, paddings, margins, colors, display and width on different screen sizes. 
`M`, `T`, `D` are styling props' modifiers for quickly setting styles for specific [`media query`](/src/constants/strelka/media-queries.js).


#### Media

Apply media query to styling props.


##### Description

Not actual prop, but modificator for prop styles (like `pd`, `wd`, `hide`, etc.)

- `M`: `(max-width: 768px)`
- `T`: `(min-width: 769px) and (max-width: 1024px)`
- `D`: `(min-width: 1025px)`


##### Usage

Append to styled prop, then define value: `pdM`, `mgD`, `hideM`.

```js
<StrelkaThemeProvider>
  <Div wdT={1/3} pdT hideM mgM={2} />
</StrelkaThemeProvider>
```


#### Spacing

Set `margin`, `padding` based on step value in sizes array.


##### Description

- `pd` — css `padding`
- `mg` — css `margin`


##### Modificators

- `l` — left
- `r` — right
- `t` — top
- `b` — bottom
- `x` — left and right
- `y` — top and bottom


##### Value

- type: `Number`, `Object`
- true value: `1`
- possible values: `0-4`

Numeric value according to position in sizes array

- desktop (D): `[ 0, 10, 20, 40, 80 ]`
- mobile (M): `[ 0, 8, 16, 32, 32 ]`

##### Links

- Possible values [in storybook](https://strelka-institute.github.io/components/?selectedKind=Constants&selectedStory=sizes).


##### Usage

```js
<StrelkaThemeProvider>
  <Div 
    mgx={2} // or `mgl={2} mgr={2}`
    pdlT={2} // or `pdl={{ T: 1 }}`
    pd // same as `pd={1}`
  />
</StrelkaThemeProvider>
```

Result (styles):

```js
{
  marginLeft: 20,
  marginRight: 20,
  padding: 10,
  '@media (min-width: 769px) and (max-width: 1024px):': {
    paddingLeft: 20
  },
  '@media (max-width: 768px)': {
    marginLeft: 16,
    marginRight: 16,
    padding: 8,
  }
}
```

#### Sizes

Quickly set width, height in element


##### Description

- `wd` — css `width`
- `minWd` — css `min-width`
- `maxWd` — css `max-width`
- `ht` — css `height`
- `minHt` — css `min-height`
- `maxHt` — css `max-height`


##### Value

- type: `Number`, `String`
- true value: `100%`
- false value: `0`
- possible values: `0-1`, `1-Infinity`, key in `theme.sizes`

If value smaller then `1`, it represents percentage, 
i.e.: `wd={1/3}` is `width: 33.3333%`, `wd={100}` is `width: 100px`


##### Links

- Possible values [in storybook](https://strelka-institute.github.io/components/?selectedKind=Constants&selectedStory=sizes).


##### Usage

```js
<StrelkaThemeProvider>
  <Container>
    <Div wd={1/3} wdM={1/2} />
    <Div wd={1/3} wdM={1/2} />
    <Div wd={1/3} wdM={1} />
    <Div ht htM={1/2} />
  </Container>
</StrelkaThemeProvider>
```

Result (styles):

```js
{
  width: '33.3333%',
  height: '100%',
  '@media (max-width: 768px)': {
    width: '50%', // or width: '100%' in last div
    height: '50%'
  }
}
```

#### Display

Quickly update display style in element


##### Description

- `flex` - css 'display: flex'
- `block` - css 'display: block'
- `inline` - css 'display: inline'
- `inlineBlock` - css 'display: inline-block'
- `inlineFlex` - css 'display: inline-flex'

##### Value

- type: `Boolean`
- possible values: `true`, `false`

##### Usage

```js
<StrelkaThemeProvider>
  <Container>
    <Div inlineBlock flexM />
  </Container>
</StrelkaThemeProvider>
```

Result (styles):

```js
{
  display: 'inline-block',
  '@media (max-width: 768px)': {
    display: 'flex'
  }
}
```


#### Shortcuts

Set frequently used styles with shortcut props


##### Description

- `hide` — css `display: none`
- `debug` - `{ outline: '1px solid {random-color} }`,
- `outline`
- `pst` - `{ position: 'static' }`
- `prl` - `{ position: 'relative' }`
- `pab` - `{ position: 'absolute' }`
- `pfx` - `{ position: 'fixed' }`
- `psy` - `{ position: 'sticky' }`
- `l` - `left`
- `r` - `right`
- `t` - `top`
- `b` - `bottom`
- `x` - `left`, `right`
- `y` - `top`, `bottom`
- `z` - `z-index`
- `display` — `display`
- `float` - `float`
- `clear` - `clear`: `both` || `none` || `value`
- `cf` - apply [Clearfix](https://css-tricks.com/snippets/css/clear-fix/)
- `bd` - `border`
- `bdt` - `border-top`
- `bdb` - `border-bottom`
- `bdl` - `border-left`
- `bdr` - `border-right`
- `radius` - `border-radius`
- `tl` - `{ text-align: left }`
- `tc` - `{ text-align: center }`
- `tr` - `{ text-align: right }`
- `tj` - `{ text-align: justify }`
- `op` - `opacity`
- `hop` - `&:hover { opacity: value }`
- `nobr` - `{ white-space: 'nowrap' }`
- `ov` - `ruleValue('overflow', 'auto')`
- `ovx` - `ruleValue('overflow-x', 'auto')`
- `ovy` - `ruleValue('overflow-y', 'auto')`
- `ovh` - `{ overflow: 'hidden' }`
- `ovsx` - `{ overflow-x: 'auto', overflow-y: 'hidden' }`
- `ovsy` - `{ overflow-x: 'hidden', overflow-y: 'auto' }`
- `ovtouch` - `{ -webkit-overflow-scrolling: 'touch' }`
- `pointerEvents` - `pointer-events`: `auto` || `none`
- `cursor`
- `transition` - `transition`: `all .3s` || `value`
- `transform`
- `_hgpu` - `{ transform: 'translateZ(0)' }`
- `_hbackface` - `{ opacity: 0.999 }`
- `_hoverflow` - `{ overflow: 'hidden' }`
- `_hz` - `{ z-index: 9999 }`


##### Usage

```js
<StrelkaThemeProvider>
  <Container df>
    <Div tc />
    <Div dfo={-1} dib />
  </Container>
</StrelkaThemeProvider>
```

Result (styles):

```js
// Container
{
  display: 'flex'
}
// First Div
{
  textAlign: 'center'
}
// Next Div
{
  order: -1,
  display: 'inline-block'
}
```


#### Theming

Easily set `background`, `text` colors based on theme context,

##### Description

- `tm` — css `background-color: bg`, `color: fg`,
- `fg` - css `color`
- `bg` - css `background-color`
- `bgi` - css `background-image`
- `bdc` - css `border-color`,
- `shadow` - css `box-shadow` (only state and color)


##### Value

- type: `Number`
- default value: `true`
- possible values: key name in current theme (like `education`, `primary`, `bg`)

Theme can be changed with `<ThemePalette />` component (see usage).


##### Links

- [All palettes](https://strelka-institute.github.io/components/?selectedKind=Constants&selectedStory=palette)
- [All colors](https://strelka-institute.github.io/components/?selectedKind=Constants&selectedStory=palette)


##### Usage

```js
<StrelkaThemeProvider>
  <Container>
    <Div tm />
    <Div tm='education' />
    <Div bg='primary' />
    {/* Change default theme */}
    <ThemePalette name='education'>
      <Div>
        <Div tm />
        <Div bg />
        <Div bg='primary' />
      </Div>
    </ThemePalette>
  </Container>
</StrelkaThemeProvider>
```

Result (styles):

```js
// (in order from top to bottom)
// top level <Div>s
{
  backgroundColor: colors.WHITE,
  color: colors.BLACK
}
// tm='education'
{
  backgroundColor: colors.YELLOW,
  color: colors.BLACK
}
// bg='primary'
{
  backgroundColor: colors.BLUE
}

// inside <ThemePalette name='education'>
// tm
{
  backgroundColor: colors.YELLOW,
  color: colors.BLACK
}
// bg
{
  backgroundColor: colors.YELLOW
}
// bg='primary'
{
  backgroundColor: colors.BLACK
}
```


## Development

### Quick Start

```sh
$ yarn
$ yarn run dev
$ open http://0.0.0.0:3003
```


## Related

- [eslint-config-strelka](https://github.com/strelka-institute/eslint-config-strelka) - Strelka's eslint config

---
Strelka