Skip to content

Commit

Permalink
Merge pull request #124 from hirokazutei/doc/update-doc
Browse files Browse the repository at this point in the history 
DOC: Update main doc
  • Loading branch information
@hirokazutei
hirokazutei authored Jan 20, 2021
2 parents c011256 + 4dc969e commit 266be35
Showing 1 changed file with 55 additions and 52 deletions.
107 changes: 55 additions & 52 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,53 @@
<h1 align="center">
React Native Spacing System
</h1>

<p align="center">
<a href="https://opensource.org/licenses/MIT">
<img src="https://img.shields.io/badge/License-MIT-blue.svg?style=for-the-badge" />
</a>
<a href="https://www.npmjs.org/package/react-native-spacing-system">
<img src="https://img.shields.io/npm/v/react-native-spacing-system.svg?style=for-the-badge&color=blue" />
</a>
<a href="https://github.com/hirokazutei/react-native-spacing-system/commits/develop">
<img src="https://img.shields.io/github/last-commit/hirokazutei/react-native-spacing-system.svg?style=for-the-badge" />
</a>
<a href="https://github.com/hirokazutei/react-native-spacing-system/pulls">
<img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge" />
</a>
<a href="https://opensource.org/licenses/MIT">
<img src="https://img.shields.io/badge/License-MIT-blue.svg?style=for-the-badge" />
</a>
<a href="https://www.npmjs.org/package/react-native-spacing-system">
<img src="https://img.shields.io/npm/v/react-native-spacing-system.svg?style=for-the-badge&color=blue" />
</a>
<a href="https://github.com/hirokazutei/react-native-spacing-system/commits/develop">
<img src="https://img.shields.io/github/last-commit/hirokazutei/react-native-spacing-system.svg?style=for-the-badge" />
</a>
<a href="https://github.com/hirokazutei/react-native-spacing-system/pulls">
<img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge" />
</a>
</p>

<p align="center">
<a href="https://facebook.github.io/react-native/">
<img src="https://img.shields.io/badge/-ReactNative-black.svg?style=for-the-badge&logo=react&logoColor=white&color=40AAFF">
</a>
<a href="https://www.npmjs.com/package/react-native-spacing-system">
<img src="https://img.shields.io/badge/-NPM-black.svg?style=for-the-badge&logo=NPM&color=CB3837">
</a>
<a href="https://www.typescriptlang.org/">
<img src="https://img.shields.io/badge/-Typescript-black.svg?style=for-the-badge&logo=typescript&color=007ACC">
</a>
<a href="https://flow.org/">
<img src="https://img.shields.io/badge/Supports-Flow_type-black.svg?style=for-the-badge&color=E8BD36">
</a>
<a href="https://facebook.github.io/react-native/">
<img src="https://img.shields.io/badge/-ReactNative-black.svg?style=for-the-badge&logo=react&logoColor=white&color=40AAFF">
</a>
<a href="https://www.npmjs.com/package/react-native-spacing-system">
<img src="https://img.shields.io/badge/-NPM-black.svg?style=for-the-badge&logo=NPM&color=CB3837">
</a>
<a href="https://www.typescriptlang.org/">
<img src="https://img.shields.io/badge/Typescript-black.svg?style=for-the-badge&logo=TypeScript&color=007ACC&logoColor=white">
</a>
<a href="https://flow.org/">
<img src="https://img.shields.io/badge/Supports-Flow_type-black.svg?style=for-the-badge&color=E8BD36">
</a>
</p>

Using margin and padding to control spacing between components introduces too many ways to accomplish the same goal. React Native Spacing System seeks to standardize your React Native code and increase legibility though the usage of spacing components.
# What Is It?

Using margin and padding to control spacing between components introduces too many ways to accomplish the same goal. React Native Spacing System seeks to standardize your React Native code, increase legibility, and separate the concern of layouting though the usage of spacing components.

&emsp;&emsp;
**Stack:** ![#45e6e6](https://placehold.it/30/45e6e6/000000?text=+) &emsp;
**Queue:** ![#e645e6](https://placehold.it/30/e645e6/000000?text=+) &emsp;
**Inset:** ![#e6e645](https://placehold.it/30/e6e645/000000?text=+) &emsp;

<img src="https://raw.githubusercontent.com/hirokazutei/react-native-spacing-system/master/.github/main-example.png" width="400"/> <img src="https://raw.githubusercontent.com/hirokazutei/react-native-spacing-system/master/.github/main-example-debug.png" width="400"/>

Factory method are provided so that you can use your own spacing key and values instead of raw values.

TypeScript and Flow are both supported!
<p align="center">
<img src="https://github.com/remojansen/logo.ts/blob/master/ts.png" alt='typeScript' width="40"/> and <img src="https://www.seekpng.com/png/full/222-2224870_flow-logo-flow-js-logo.png" alt='flow type' height="40"/> are both supported!
</p>

# Installation

Expand All @@ -49,21 +61,6 @@ or
yarn add react-native-spacing-system
```

# Sentiment & Rationalization

Inspired by Nathan Curtis's Medium article [Space In Design Systems](https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62) and this [react-spacing](https://github.com/nathanwinder/react-spacing) library by Nathan Winder, I figured I'd do something similar for React Native with slight tweaks.

**Stack:**
![#45e6e6](https://placehold.it/30/45e6e6/000000?text=+) &nbsp;&nbsp;
**Queue:**
![#e645e6](https://placehold.it/30/e645e6/000000?text=+) &nbsp;&nbsp;
**Inset:**
![#e6e645](https://placehold.it/30/e6e645/000000?text=+) &nbsp;&nbsp;

<img src="https://raw.githubusercontent.com/hirokazutei/react-native-spacing-system/master/.github/main-example.png" width="400"/> <img src="https://raw.githubusercontent.com/hirokazutei/react-native-spacing-system/master/.github/main-example-debug.png" width="400"/>

For the full sentiment and rationalization, please check out my [Medium blog post: Enforcing Component Spacing in React & React Native](https://medium.com/@hirokazutei/enforcing-component-spacing-in-react-react-native-556b8ef90dea?sk=9a3c83f74fceab3a0a402343ef987e6f).

# Features

## Stack
Expand All @@ -90,8 +87,8 @@ import { BuffetPlates } from "./BuffetPlates";
import { KitchenCounter } from "./KitchenCounter";

/*
Creates a vertical space with size of 16 between
<BuffetPlates /> and <KitchenCounter /> components.
Creates a vertical space with size of 16 between
<BuffetPlates /> and <KitchenCounter /> components.
*/
const QueueExample = () => {
return (
Expand Down Expand Up @@ -129,9 +126,9 @@ import { BubbleTeaJoint } from "./BubbleTeaJoint";
import { PatientPatron } from "./PatientPatron";

/*
Creates a horizontal space with size of 16 between
<BubbleTeaJoint /> and <PatientPatron /> components.
Only works when flex direction is row.
Creates a horizontal space with size of 16 between
<BubbleTeaJoint /> and <PatientPatron /> components.
Only works when flex direction is row.
*/
const StackExample = () => {
return (
Expand Down Expand Up @@ -183,8 +180,8 @@ import { Inset } from "react-native-spacing-system";
import { PictureNeedingAFrame } from "./PictureNeedingAFrame";

/*
Creates a padding of size 16 around
the <PictureNeedingAFrame /> component.
Creates a padding of size 16 around
the <PictureNeedingAFrame /> component.
*/
const InsetExample = () => {
return (
Expand Down Expand Up @@ -214,7 +211,7 @@ const spacing = {

const Stack = stackFactory(spacing);

<Stack size={16}/> // Error
<Stack size={16}/> // TS Error
<Stack size="venti"/> // Works
```
Expand Down Expand Up @@ -252,7 +249,7 @@ const spacing: Spacing = {

const Stack = stackFactory<Spacing>(spacing);

<Stack size={16}/> // Error
<Stack size={16}/> // Flow Error
<Stack size="venti"/> // Works
```
Expand All @@ -276,7 +273,7 @@ const disallowLayout = true;

const NoLayoutInset = insetFactory(spacing, disallowLayout);

<NoLayoutInset all='tall' layout={{flex: 1}}/> // Error
<NoLayoutInset all='tall' layout={{flex: 1}}/> // TS Error
<NoLayoutInset all='tall'/> // Works
```
Expand Down Expand Up @@ -304,7 +301,7 @@ const disallowLayout = true;

const NoLayoutInset = insetFactory<Spacing, DisallowLayout>(spacing, disallowLayout);

<NoLayoutInset all='tall' layout={{flex: 1}}/> // Error
<NoLayoutInset all='tall' layout={{flex: 1}}/> // Flow Error
<NoLayoutInset all='tall'/> // Works
```

Expand Down Expand Up @@ -382,6 +379,12 @@ type DebugContextProps = {|
|};
```

# Sentiment & Rationalization

Inspired by Nathan Curtis's Medium article [Space In Design Systems](https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62) and this [react-spacing](https://github.com/nathanwinder/react-spacing) library by Nathan Winder, I figured I'd do something similar for React Native with slight tweaks.

For the full sentiment and rationalization, please check out my [Medium blog post: Enforcing Component Spacing in React & React Native](https://medium.com/@hirokazutei/enforcing-component-spacing-in-react-react-native-556b8ef90dea?sk=9a3c83f74fceab3a0a402343ef987e6f).

<h2 align="center">
Contacts & Social Media
</h2>
Expand Down

0 comments on commit 266be35

Please sign in to comment.