# pergaulan-bebas

> constraints ui kit for react

Latest version **0.0.4** (published 2018-04-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install pergaulan-bebas
pnpm add pergaulan-bebas
yarn add pergaulan-bebas
bun add pergaulan-bebas
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2018-04-11 |
| First published | 2018-02-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 36.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | hasft |
| Maintainers | burito |

## Links

- npm: https://www.npmjs.com/package/pergaulan-bebas
- npm.io page: https://npm.io/package/pergaulan-bebas

## Dependencies (2)

- [recompose](https://npm.io/package/recompose.md) ^0.26.0
- [styled-components](https://npm.io/package/styled-components.md) ^3.2.5

## Recent versions

- 0.0.4 (latest) — 2018-04-11
- 0.0.3 — 2018-02-04
- 0.0.2 — 2018-02-04
- 0.0.1 — 2018-02-04

## README

# [WIP] PERGAULAN-BEBAS  

Design system utilities untuk `styled-components` dan macam-macam css-js "library"

[![codecov](https://codecov.io/gh/hasft/cool-guys-kit/branch/master/graph/badge.svg)](https://codecov.io/gh/hasft/cool-guys-kit)

```sh
npm i pergaulan-bebas
```

### Daftar Isi

- [Cara Pakai](#cara-pakai)
- [Mulai](#mulai)

## Cara Pakai

```jsx
// Example uses pergaulan-bebas,  
// but pergaulan-bebas works with 
// most other css-in-js libraries as well
import styled from 'styled-components'
import { space, width, fontSize, color } from 'pergaulan-bebas'

// Add pergaulan-bebas fungsi to your component
const Box = styled.div`
  ${space}
  ${width}
  ${fontSize}
  ${color}
`
```

```jsx
// width: 50%
<Box width={1/2} />

// font-size: 20px (theme.fontSizes[4])
<Box fontSize={4} />

// margin: 16px (theme.space[2])
<Box m={2} />

// padding: 32px (theme.space[3])
<Box p={3} />

// color
<Box color='tomato' />

// color: #333 (theme.colors.gray[0])
<Box color='grays.0' />

// background color
<Box bg='tomato' />
```

## Responsive

Untuk responsive, gunakanlah array. hal ini hanya bisa terjadi jika menggunakan properti dari "pergaulan-bebas" 
 [Lebih Lanjut](#responsive-styles)

```jsx
// responsive width
<Box width={[ 1, 1/2, 1/4 ]} />

// responsive font-size
<Box fontSize={[ 2, 3, 4 ]} />

// responsive margin
<Box m={[ 1, 2, 3 ]} />

// responsive padding
<Box p={[ 1, 2, 3 ]} />
```

## Mulai

Meski tidak "required", pergaulan-bebas bagusnya menggunakan theme custom.
buat file `theme.js` [ThemeProvider](https://www.styled-components.com/docs/advanced#theming)
di "application root".

```js
// empty theme.js
const theme = {}

export default theme
```

```jsx
// root App component
import React from 'react'
import { ThemeProvider } from 'styled-components'
import theme from './theme'

const App = props => (
  <ThemeProvider theme={theme}>
    {/* ... */}
  </ThemeProvider>
)
```

Hampir semua utility fungsi di pergaulan-bebas akan melihat nilai yang ada di theme terlebih dulu,
jika tidak ada di sana, ia akan fallback ke nilai yang ditulis.

```js
// theme.js
const colors = {
  text: '#024',
  blue: '#07c'
}

const theme = {
  colors
}

export default theme
```

properti-properti yang ada di pergaulan-bebas dipakai dengan cara menjadikannya properti di komponen.

```jsx
// picks up the value `#07c` from the theme
<Box color='blue' />
```

Kalau nilai atau "value" **tidak** ada dalam theme, ia akan dibiarkan sebagai nilai-aseli alias tidak akan dicocokan.

```jsx
// renders the CSS `tomato` color since it's not defined in theme
<Box color='tomato' />
```

Sangat direkomendasikan untuk membuat set skala dalam bentuk object berisi array ke dalam theme untuk konsistensi desain aplikasi.
Semua value di theme adalah "optional" dan bisa diatur sendiri.
Lihat penjelasan [Default Theme](#default-theme) untuk melihat fallback values.

```js
// theme.js

// breakpoint values
// any array length works with pergaulan-bebas
const breakpoints = [
  '40em', '52em', '64em'
]

const colors = {
  text: '#024',
  blue: '#07c',
  // nested objects work as well
  dark: {
    blue: '#058'
  },
  // arrays can be used for scales of colors
  gray: [
    '#333',
    '#666',
    '#999',
    '#ccc',
    '#eee',
    '#f6f6f6',
  ]
}

// space is used for margin and padding scales
// it's recommended to use powers of two to ensure alignment
// when used in nested elements
// numbers are converted to px
const space = [
  0, 4, 8, 16, 32, 64, 128, 256, 512
]

// typographic scale
const fontSizes = [
  12, 14, 16, 20, 24, 32, 48, 64, 96, 128
]

// for any scale, either array or objects will work
const lineHeights = [
  1, 1.125, 1.25, 1.5
]

const fontWeights = {
  normal: 500,
  bold: 700
}

const letterSpacings = {
  normal: 'normal',
  caps: '0.25em'
}

// border-radius
const radii = [
  0, 2, 4, 8
]

const borderWidths = [
  0, 1, 2
]

const shadows = [
  `0 1px 2px 0 ${colors.text}`,
  `0 1px 4px 0 ${colors.text}`
]

const theme = {
  breakpoints,
  colors,
  space,
  fontSizes,
  lineHeights,
  fontWeights,
  letterSpacings,
  radii,
  borderWidths,
  shadows,
}

export default theme
```

Lanjut, buatlah set untuk UI components di dalam theme.
Direkomendasikan agar membuat set yang simple.
Untuk UI components, pisahkan berdasarkan masing-masing konsentrasi, contoh: layout, typography, dll. Terutama:  margin, padding, dan color.

```js
import styled from 'styled-components'
import {
  space,
  color,
  width,
  fontSize,
} from 'pergaulan-bebas'

// Example of a general purpose Box layout component
export const Box = styled.div`
  ${space}
  ${color}
  ${width}
`

// General purpose typographic component
export const Text = styled.div`
  ${space}
  ${color}
  ${fontSize}
`
```

---

## Table of Style Props

Function Name | Prop       | CSS Property    | Theme Field  | Responsive
--------------|------------|-----------------|--------------|-----------
`space`       | `m`        | `margin`        | `space`      | yes
`space`       | `mt`       | `margin-top`    | `space`      | yes
`space`       | `mr`       | `margin-right`  | `space`      | yes
`space`       | `mb`       | `margin-bottom` | `space`      | yes
`space`       | `ml`       | `margin-left`   | `space`      | yes
`space`       | `p`        | `padding`       | `space`      | yes
`space`       | `pt`       | `padding-top`   | `space`      | yes
`space`       | `pr`       | `padding-right` | `space`      | yes
`space`       | `pb`       | `padding-bottom` | `space`     | yes
`space`       | `pl`       | `padding-left`  | `space`      | yes
`width`       | `width` `w` | `width`        | none         | yes
`fontSize`    | `fontSize` `f`|`font-size`   |`fontSizes`   | yes
`color`       | `color`    | `color`         | `colors`     | yes
`color`       | `bg`       | `background-color`| `colors`   | yes

---

### Default Theme

Jika tidak ada theme, pergaulan-bebas menggunakan properti default untuk "breakpoints", "typographic scale", dan "spacing scale".

```js
// Breakpoints
const breakpoints = [ '40em', '52em', '64em' ]
// @media screen and (min-width: 40em)
// @media screen and (min-width: 52em)
// @media screen and (min-width: 64em)

// Other units work as well, but em units are recommended
// const breakpoints = [ '300px', '600px', '1200px' ]

// Typographic Scale
// numbers are converted to px values
const fontSizes = [11, 12, 14, 15, 16, 19, 21, 27, 33];

// Spacing Scale
// used for margin and padding
const space = [0, 8, 16, 32, 64];

```

---

[MIT License](LICENSE.md)

---
_Source: https://npm.io/package/pergaulan-bebas · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._