@strelka/components

Strelka Components

React.js components and storybook for Strelka projects

Requirements

• Node.js
• Yarn package manager

Usage

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

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:

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.

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.

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

Usage

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

Result (styles):

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

Usage

<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):

{
  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

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

Result (styles):

{
  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
• 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

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

Result (styles):

// 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
• All colors

Usage

<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):

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

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

Related

• eslint-config-strelka - Strelka's eslint config

Strelka