Skip to content

Commit

Permalink
Add prettier support and process entire project
Browse files Browse the repository at this point in the history
  • Loading branch information
Tania committed May 21, 2021
1 parent 7eeb47f commit 05556fd
Show file tree
Hide file tree
Showing 15 changed files with 502 additions and 452 deletions.
75 changes: 30 additions & 45 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -1,47 +1,32 @@
module.exports = {
"env": {
"browser": true,
"es2021": true,
"react-native/react-native": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react-native/all"
],
"parser": "@babel/eslint-parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": [
"react",
"react-native"
],
"settings": {
"react": {
"version": "detect"
}
},
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"double"
],
"semi": [
"error",
"always"
]
}
env: {
browser: true,
es2021: true,
"react-native/react-native": true
},
extends: [
"eslint:recommended",
"prettier",
"plugin:react/recommended",
"plugin:react-native/all"
],
parser: "@babel/eslint-parser",
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: 12,
sourceType: "module"
},
plugins: ["react", "react-native"],
settings: {
react: {
version: "detect"
}
},
rules: {
"linebreak-style": ["error", "unix"],
quotes: ["error", "double"],
semi: ["error", "always"]
}
};
2 changes: 2 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# Ignore artifacts:
coverage
4 changes: 4 additions & 0 deletions .prettierrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"printWidth": 90,
"trailingComma": "none"
}
2 changes: 1 addition & 1 deletion .travis.yml
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
language: node_js
node_js:
- '15'
- "15"

jobs:
include:
Expand Down
17 changes: 12 additions & 5 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,24 +1,31 @@
# Changelog

All notable changes to this project will be documented in this file.

The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [Unreleased]

### Added
- Code-linting support with ESLint
- Linting job on CI configuration

- Code-linting support with ESLint
- Linting job on CI configuration
- [Prettier](https://prettier.io/) support

## [1.0.1] - 2021-05-16

### Added

- Unit tests for **RGrid** and **RView** components
- Integration with [Travis CI](https://www.travis-ci.com/) and [Coveralls](https://coveralls.io/)
- Integration with [Travis CI](https://www.travis-ci.com/) and [Coveralls](https://coveralls.io/)

## [1.0.0] - 2021-05-10

### Added

- Components **RGrid** and **RView**
- Support for Bootstrap classes:
- Support for Bootstrap classes:
- `container`
- `container-fluid`
- `container-{breakpoint}`
Expand All @@ -30,6 +37,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- `col-auto`
- `col-{breakpoint}-auto`

[Unreleased]: https://github.com/t-medina/react-native-rgrid/compare/1.0.1...develop
[unreleased]: https://github.com/t-medina/react-native-rgrid/compare/1.0.1...develop
[1.0.1]: https://github.com/t-medina/react-native-rgrid/compare/1.0.0...1.0.1
[1.0.0]: https://github.com/t-medina/react-native-rgrid/releases/tag/1.0.0
129 changes: 67 additions & 62 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,25 @@
# React Native RGrid
React Native Responsive Bootstrap Grid

React Native Responsive Bootstrap Grid

[![npm version](https://img.shields.io/npm/v/react-native-rgrid.svg)](https://www.npmjs.org/package/react-native-rgrid)
![NPM](https://img.shields.io/npm/l/react-native-rgrid)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

[![Build Status](https://travis-ci.com/t-medina/react-native-rgrid.svg?branch=develop)](https://travis-ci.com/t-medina/react-native-rgrid?branch=develop)
[![Coverage Status](https://coveralls.io/repos/github/t-medina/react-native-rgrid/badge.svg?branch=develop)](https://coveralls.io/github/t-medina/react-native-rgrid?branch=develop)

[![dependencies Status](https://status.david-dm.org/gh/t-medina/react-native-rgrid.svg)](https://david-dm.org/t-medina/react-native-rgrid)
[![devDependencies Status](https://status.david-dm.org/gh/t-medina/react-native-rgrid.svg?type=dev)](https://david-dm.org/t-medina/react-native-rgrid?type=dev)
[![peerDependencies Status](https://status.david-dm.org/gh/t-medina/react-native-rgrid.svg?type=peer)](https://david-dm.org/t-medina/react-native-rgrid?type=peer)

## Getting Started

## Getting Started
This library aims to ease the use of the same React Native codebase for mobile and web applications by porting [Bootstrap 5](https://getbootstrap.com/docs/5.0/layout/grid/) flexbox grid system to React Native.
This library aims to ease the use of the same React Native codebase for mobile and web applications by porting [Bootstrap 5](https://getbootstrap.com/docs/5.0/layout/grid/) flexbox grid system to React Native.

It includes the same twelve column system and six responsive tiers of Bootstrap, and uses the same classes names. It uses [matchmediaquery](https://github.com/ncochard/matchmediaquery) to evaluate media queries both in the web and mobile applications, with [@expo/match-media](https://github.com/expo/match-media) as polyfill for mobile applications.

Styles classes are defined with [StyleSheet](https://reactnative.dev/docs/stylesheet), taking advantage of the performance and memory optimizations it provides.

Styles classes are defined with [StyleSheet](https://reactnative.dev/docs/stylesheet), taking advantage of the performance and memory optimizations it provides.

## Installation

Expand All @@ -32,7 +35,6 @@ or using yarn:
yarn add react-native-rgrid
```


## Usage

### Snack
Expand All @@ -41,28 +43,29 @@ You can try the library right away on this [snack](https://snack.expo.io/@t-medi

### Bootstrap classes

The Grid system has been implemented following the same Bootstrap [guidelines](https://getbootstrap.com/docs/5.0/layout/grid/). The [breakpoints](https://getbootstrap.com/docs/5.0/layout/breakpoints/) have been configured with the same values as the **Bootstrap grid system** and they work in the [same way](https://getbootstrap.com/docs/5.0/layout/grid/#how-it-works).
The Grid system has been implemented following the same Bootstrap [guidelines](https://getbootstrap.com/docs/5.0/layout/grid/). The [breakpoints](https://getbootstrap.com/docs/5.0/layout/breakpoints/) have been configured with the same values as the **Bootstrap grid system** and they work in the [same way](https://getbootstrap.com/docs/5.0/layout/grid/#how-it-works).

The following is a list of the Bootstrap classes you will be able to use with **react-native-rgrid**:
* All of the [container classes](https://getbootstrap.com/docs/5.0/layout/containers/):
* `container`
* `container-sm`
* `container-md`
* `container-lg`
* `container-xl`
* `container-xxl`
* `container-fluid`
* Row class:
* `row`: wrappers for columns
* Columns [responsive-classes](https://getbootstrap.com/docs/5.0/layout/grid/#responsive-classes):
* `col`: for equal-width columns on all breakpoints
* `col-{breakpoint}`: for equal-width columns on the specified breakpoint and up
* `col-*`: for when you need a particularly sized column (e.g. `col-4`)
* `col-{breakpoint}-*`: for when you need a particularly sized column on the specified breakpoint and up (e.g. `col-md-4)
* `col-auto`: to size columns based on the natural width of their content on all breakpoints
* `col-{breakpoint}-auto`: to size columns based on the natural width of their content on the specified breakpoint and up

As with Bootstrap, you can [mix and match](https://getbootstrap.com/docs/5.0/layout/grid/#mix-and-match) these columns classes, so the content can be distributed on each grid breakpoint. [Nesting](https://getbootstrap.com/docs/5.0/layout/grid/#nesting) is also supported.

- All of the [container classes](https://getbootstrap.com/docs/5.0/layout/containers/):
- `container`
- `container-sm`
- `container-md`
- `container-lg`
- `container-xl`
- `container-xxl`
- `container-fluid`
- Row class:
- `row`: wrappers for columns
- Columns [responsive-classes](https://getbootstrap.com/docs/5.0/layout/grid/#responsive-classes):
- `col`: for equal-width columns on all breakpoints
- `col-{breakpoint}`: for equal-width columns on the specified breakpoint and up
- `col-*`: for when you need a particularly sized column (e.g. `col-4`)
- `col-{breakpoint}-*`: for when you need a particularly sized column on the specified breakpoint and up (e.g. `col-md-4)
- `col-auto`: to size columns based on the natural width of their content on all breakpoints
- `col-{breakpoint}-auto`: to size columns based on the natural width of their content on the specified breakpoint and up

As with Bootstrap, you can [mix and match](https://getbootstrap.com/docs/5.0/layout/grid/#mix-and-match) these columns classes, so the content can be distributed on each grid breakpoint. [Nesting](https://getbootstrap.com/docs/5.0/layout/grid/#nesting) is also supported.

Support for [row columns](https://getbootstrap.com/docs/5.0/layout/grid/#row-columns), [alignment](https://getbootstrap.com/docs/5.0/layout/columns/#alignment) and [reordering](https://getbootstrap.com/docs/5.0/layout/columns/#reordering) classes will be added on a future version.

Expand All @@ -72,47 +75,46 @@ The library exports two components: **RGrid** and **RView**.

#### RGrid

**RGrid** stands for **Responsive Grid**. It's the component in charge of configuring and initializing the Responsive Grid layout and styles classes.
**RGrid** stands for **Responsive Grid**. It's the component in charge of configuring and initializing the Responsive Grid layout and styles classes.
It should be used only once in the application:

```javascript
```javascript
export default function App() {
return (
<RGrid>
<Text>React Native RGrid</Text>
<Text>React Native RGrid</Text>
</RGrid>
);
}
```


#### RView

**RView** stands for **Responsive View**. The classes ported from Bootstrap will only have effect if they are used in conjunction with **RView**, so its use is mandatory.
**RView** stands for **Responsive View**. The classes ported from Bootstrap will only have effect if they are used in conjunction with **RView**, so its use is mandatory.

It defines a prop named `classes`, which can be either an Array where each item is a responsive class, or a String where responsive classes are separated by space.

Under the hood **RView** is replaced with a **View** component and evaluates the media queries to apply the appropriate styling, so you can expect it to behave in the exact same way as a **View**. Support for common **View** props will be added in a future, for now only `styl` is supported.
Under the hood **RView** is replaced with a **View** component and evaluates the media queries to apply the appropriate styling, so you can expect it to behave in the exact same way as a **View**. Support for common **View** props will be added in a future, for now only `styl` is supported.

```javascript
```javascript
export default function App() {
return (
<RGrid>
<RView classes="container">
<RView classes="row">
<RView classes="col col-lg-2">
<Text>1 of 3</Text>
</RView>

<RView classes="col-md-auto">
<Text>Variable width content</Text>
</RView>

<RView classes={["col", "col-lg-2"]}>
<Text>3 of 3</Text>
</RView>
</RView>
<RView classes="container">
<RView classes="row">
<RView classes="col col-lg-2">
<Text>1 of 3</Text>
</RView>

<RView classes="col-md-auto">
<Text>Variable width content</Text>
</RView>

<RView classes={["col", "col-lg-2"]}>
<Text>3 of 3</Text>
</RView>
</RView>
</RView>
</RGrid>
);
}
Expand All @@ -124,21 +126,24 @@ Since the `style` prop is supported, you can apply custom styles to a **RView**,
export default function App() {
return (
<RGrid>
<RView classes="container">
<RView classes="row">
<RView classes="col col-lg-2" style={styles.column}>
<Text>1 of 3</Text>
</RView>

<RView classes="col-md-auto" style={[styles.column, { backgroundColor: "#ff0000" }]}>
<Text>Variable width content</Text>
</RView>

<RView classes={["col", "col-lg-2"]} style={styles.column}>
<Text>3 of 3</Text>
</RView>
</RView>
<RView classes="container">
<RView classes="row">
<RView classes="col col-lg-2" style={styles.column}>
<Text>1 of 3</Text>
</RView>

<RView
classes="col-md-auto"
style={[styles.column, { backgroundColor: "#ff0000" }]}
>
<Text>Variable width content</Text>
</RView>

<RView classes={["col", "col-lg-2"]} style={styles.column}>
<Text>3 of 3</Text>
</RView>
</RView>
</RView>
</RGrid>
);
}
Expand All @@ -150,6 +155,6 @@ const styles = StyleSheet.create({
borderColor: "#27292b1a",
paddingTop: 12,
paddingBottom: 12
},
}
});
```
2 changes: 1 addition & 1 deletion babel.config.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
presets: ["module:metro-react-native-babel-preset"]
};
8 changes: 4 additions & 4 deletions jest.config.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
module.exports = {
preset: 'react-native',
transformIgnorePatterns: [
'node_modules/(?!(jest-)?react-native|@react-native-community|@?expo|@unimodules|@react-native)',
],
preset: "react-native",
transformIgnorePatterns: [
"node_modules/(?!(jest-)?react-native|@react-native-community|@?expo|@unimodules|@react-native)"
]
};
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,12 @@
"babel-jest": "^26.6.3",
"coveralls": "^3.1.0",
"eslint": "^7.26.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-native": "^3.10.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.66.0",
"prettier": "2.3.0",
"prop-types": "^15.6.0",
"react": ">=16.13.0",
"react-native": ">=0.50.0",
Expand Down
Loading

0 comments on commit 05556fd

Please sign in to comment.