@jaak/primitives/README.md

JAAK UI primitives

# Primitives 🏗

> UI primitives with predictable, unopinionated defaults and HTML-based
  semantics for scalable application architecture

## Install
```
npm i @jaak/primitives
```

## Usage
```js
import { Text } from '@jaak/primitives'

const Component = () => (
  <Text>Hello primitives!</Text>
)
```

### Composition
Primitives can be extended at application-level and composed into React
components.

```js
import { Button, Text, View } from '@jaak/primitives'

// Enhance primitives with custom attributes
const PrimaryButton = styled(Button)`
  box-shadow: ${({ boxShadow }) => boxShadow};
`

// Compose library and application-level primitives
const Component = () => (
  <View>
    <Text color='primary'>
      I 💖 Primitives!
    </Text>

    <AnchorButton>
      I want to be an ⚓️
    </AnchorButton>

    <PrimaryButton boxShadow='4px 2px 4px black'>
      🏗
    </PrimaryButton>
  </View>
)
```

### Theming
Generate a theme that can be used with `styled-components` `<ThemeProvider>`:
```js
import { theme } from '@jaak/primitives'
import { ThemeProvider } from 'styled-components'

// Theme values can be customised - this is optional
const customTheme = {
  palette: {
    primary: '#AAAAAA',
  }
}

const Component = () => (
  <ThemeProvider theme={theme(customTheme)}>
    ...
  </ThemeProvider>
)
```

## Contributing

### Preview
```
npm run styleguide:start
```

### Build
```
npm run build
```

### Test
```
npm test
```