Skip to content

Commit

Permalink
Merge pull request #33 from dubzzz/clean-badges
Browse files Browse the repository at this point in the history
docs: reference the right repo in badges
  • Loading branch information
Kikobeats authored Aug 11, 2024
2 parents 4005834 + 9ea9958 commit 7b1a46f
Show file tree
Hide file tree
Showing 6 changed files with 51 additions and 58 deletions.
27 changes: 27 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
## Run the Dev Server

```bash
# clone this repository
git clone [email protected]:microlinkhq/react-json-view.git && cd react-json-view
# install dependencies
npm install --save-dev
# run the dev server with hot reloading
npm run dev
```
Webpack Dev Server should automatically open up http://localhost:2000 in your web browser. If it does not, open a browser and navigate to port 2000. The hot reloader will automatically reload when files are modified in the `/src/` directory.

## Run the Production Build

```bash
# run the build (note: you may need to use `sudo` priveledges to run the build successfully)
npm run build
```
Please add tests for your code before posting a pull request.

You can run the test suite with `npm run test` or `npm run test:watch` to automatically reload when files are modified.

## Docker Tools

I recommend using docker for development because it enforces environmental consistency.

For information about contributing with Docker, see the [README in ./docker](https://github.com/microlinkhq/react-json-view/blob/master/docker/README.md#contributing-to-this-project-using-docker).
58 changes: 12 additions & 46 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
![alt text](https://github.com/mac-s-g/react-json-view/blob/master/doc/rjv-icon-alt.png?raw=true)
![alt text](https://raw.githubusercontent.com/microlinkhq/react-json-view/master/doc/rjv-icon-alt.png)

[![npm](https://img.shields.io/npm/v/react-json-view.svg)](https://www.npmjs.com/package/react-json-view) [![npm](https://img.shields.io/npm/l/react-json-view.svg)](https://github.com/mac-s-g/react-json-view/blob/master/LISCENSE) [![Build Status](https://travis-ci.org/mac-s-g/react-json-view.svg)](https://travis-ci.org/mac-s-g/react-json-view) [![Coverage Status](https://coveralls.io/repos/github/mac-s-g/react-json-view/badge.svg?branch=master)](https://coveralls.io/github/mac-s-g/react-json-view?branch=master)
[![npm](https://img.shields.io/npm/v/%40microlink%2Freact-json-view.svg)](https://www.npmjs.com/package/@microlink/react-json-view) [![npm](https://img.shields.io/npm/l/%40microlink%2Freact-json-view.svg
)](https://github.com/microlinkhq/react-json-view/blob/master/LICENSE) [![Build Status](https://github.com/microlinkhq/react-json-view/workflows/test/badge.svg)](https://github.com/microlinkhq/react-json-view/actions/workflows/main.yml?query=branch%3Amaster)

# react-json-view
RJV is a React component for displaying and editing javascript **arrays** and **JSON objects**.

This component provides a responsive interface for displaying arrays or JSON in a web browser. NPM offers a distribution of the source that's transpiled to ES5; so you can include this component with *any web-based javascript application*.

[Check out the Interactive Demo](https://mac-s-g.github.io/react-json-view/demo/dist/)
[Check out the Interactive Demo](https://react-json-view.microlink.io/)


### Implementation Example
Expand All @@ -21,9 +22,9 @@ import ReactJson from '@microlink/react-json-view'

### Output Examples
#### Default Theme
![alt text](https://github.com/mac-s-g/react-json-view/blob/master/doc/output-example-15.png?raw=true "Output Example 1")
![alt text](https://raw.githubusercontent.com/microlinkhq/react-json-view/master/doc/output-example-15.png "Output Example 1")
#### Hopscotch Theme, with Triangle Icons:
![alt text](https://github.com/mac-s-g/react-json-view/blob/master/doc/output-example-14.png?raw=true "Output Example 2")
![alt text](https://raw.githubusercontent.com/microlinkhq/react-json-view/master/doc/output-example-14.png "Output Example 2")

### Installation Instructions
Install this component with [NPM](https://www.npmjs.com/package/@microlink/react-json-view).
Expand All @@ -42,7 +43,7 @@ Name|Type|Default|Description
|:---|:---|:---|:---
`src`|`JSON Object`|None|This property contains your input JSON
`name`|`string`|`JSX.Element` or `false`|"root"|Contains the name of your root node. Use `null` or `false` for no name.
`theme`|`string`|"rjv-default"|RJV supports base-16 themes. Check out the list of supported themes [in the demo](https://mac-s-g.github.io/react-json-view/demo/dist/). A custom "rjv-default" theme applies by default.
`theme`|`string`|"rjv-default"|RJV supports base-16 themes. Check out the list of supported themes [in the demo](https://react-json-view.microlink.io/). A custom "rjv-default" theme applies by default.
`style`|`object`|`{}`|Style attributes for react-json-view container. Explicit style attributes will override attributes provided by a theme.
`iconStyle`|`string`|"circle"| Style of expand/collapse icons. Accepted values are "circle", triangle" or "square".
`indentWidth`|`integer`|4|Set the indent-width for nested objects
Expand Down Expand Up @@ -83,18 +84,18 @@ You can specify a `theme` name or object when you instantiate your rjv component
```jsx
<ReactJson src={my_important_json} theme="monokai" />
```
Check out the list of supported themes [in the component demo](https://mac-s-g.github.io/react-json-view/demo/dist/).
Check out the list of supported themes [in the component demo](https://react-json-view.microlink.io/).

#### Monokai theme example
![alt text](https://github.com/mac-s-g/react-json-view/blob/master/doc/output-example-monokai-2.png?raw=true "Base-16 Theme Example")
![alt text](https://raw.githubusercontent.com/microlinkhq/react-json-view/master/doc/output-example-monokai-2.png "Base-16 Theme Example")

#### Solarized theme example
![alt text](https://github.com/mac-s-g/react-json-view/blob/master/doc/output-example-solarized-2.png?raw=true "Base-16 Theme Example")
![alt text](https://raw.githubusercontent.com/microlinkhq/react-json-view/master/doc/output-example-solarized-2.png "Base-16 Theme Example")

#### Use Your Own Theme
You can supply your own base-16 theme object.

To better understand custom themes, take a look at [my example implementation](https://github.com/mac-s-g/react-json-view/blob/7c154b9a7d83ea89dce2c171ebdf4d163ff49233/dev-server/src/index.js#L135) and the [base-16 theme styling guidelines](https://github.com/chriskempson/base16/blob/master/styling.md).
To better understand custom themes, take a look at [my example implementation](https://github.com/microlinkhq/react-json-view/blob/7c154b9a7d83ea89dce2c171ebdf4d163ff49233/dev-server/src/index.js#L135) and the [base-16 theme styling guidelines](https://github.com/chriskempson/base16/blob/master/styling.md).

### onEdit, onAdd and onDelete Interaction
Pass callback methods to `onEdit`, `onAdd` and `onDelete` props. Your method will be invoked when a user attempts to update your `src` object.
Expand All @@ -110,39 +111,4 @@ The following object will be passed to your method:
}
```

Returning `false` from a callback method will prevent the src from being affected.

### Contributing to the source code
#### Run the Dev Server

```bash
# clone this repository
git clone [email protected]:mac-s-g/react-json-view.git && cd react-json-view
# install dependencies
npm install --save-dev
# run the dev server with hot reloading
npm run dev
```
Webpack Dev Server should automatically open up http://localhost:2000 in your web browser. If it does not, open a browser and navigate to port 2000. The hot reloader will automatically reload when files are modified in the `/src/` directory.

#### Run the Production Build

```bash
# run the build (note: you may need to use `sudo` priveledges to run the build successfully)
npm run build
```
Please add tests for your code before posting a pull request.

You can run the test suite with `npm run test` or `npm run test:watch` to automatically reload when files are modified.

#### Docker Tools

I recommend using docker for development because it enforces environmental consistency.

For information about contributing with Docker, see the [README in ./docker](https://github.com/mac-s-g/react-json-view/blob/master/docker/README.md#contributing-to-this-project-using-docker).


### Inspiration
I drew a ton of design ideas from [react-json-tree](https://github.com/alexkuz/react-json-tree). Thanks to the RJT contributors for putting together an awesome component!

I'm also inspired by users who come up with interesting feature requests. Reach out to me with ideas for this project or other projects you want to collaborate on. My email address is listed on my [github user page](https://github.com/mac-s-g).
Returning `false` from a callback method will prevent the src from being affected.
4 changes: 2 additions & 2 deletions demo/dist/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -55,13 +55,13 @@
<div id="references">
<div class="link-container">
<a id="npm-link" target="_blank"
href="https://www.npmjs.com/package/react-json-view">
href="https://www.npmjs.com/package/@microlink/react-json-view">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/db/Npm-logo.svg"/>
</a>
</div>
<div class="link-container">
<a id="github-link" target="_blank"
href="https://github.com/mac-s-g/react-json-view">
href="https://github.com/microlinkhq/react-json-view">
<img src="https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/github-512.png"/>
</a>
</div>
Expand Down
2 changes: 1 addition & 1 deletion demo/dist/main.js

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions demo/src/js/components/Demo.js
Original file line number Diff line number Diff line change
Expand Up @@ -61,17 +61,17 @@ class Demo extends React.PureComponent {
<div class="header-2">component demo</div>
<img
class="rjv-logo"
src="https://github.com/mac-s-g/react-json-view/blob/master/doc/rjv-icon-alt.png?raw=true"
src="https://raw.githubusercontent.com/microlinkhq/react-json-view/master/doc/rjv-icon-alt.png"
onClick={() => {
window.open(
'https://github.com/mac-s-g/react-json-view',
'https://github.com/microlinkhq/react-json-view',
'_blank'
);
}}
/>
<GitHubButton
type="stargazers"
namespace="mac-s-g"
namespace="microlinkhq"
repo="react-json-view"
/>
</div>
Expand Down
12 changes: 6 additions & 6 deletions docker/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,20 +59,20 @@ for example, the container used with this project has the following composition:

the `Dockerfile` defines exactly how a container should be composed for an application. Any docker-integrated workflow starts here.

Here is the [RJV Dockerfile](https://github.com/mac-s-g/react-json-view/blob/master/Dockerfile)
Here is the [RJV Dockerfile](https://github.com/microlinkhq/react-json-view/blob/master/Dockerfile)

Notice [here](https://github.com/mac-s-g/react-json-view/blob/master/Dockerfile#L1) that my container is built on top of a node container. If you track down that node container on docker-hub, you'll see that it's built on top of a debian container. Also notice that `node_modules` are installed directly into my container [here](https://github.com/mac-s-g/react-json-view/blob/master/Dockerfile#L6-L7).
Notice [here](https://github.com/microlinkhq/react-json-view/blob/master/Dockerfile#L1) that my container is built on top of a node container. If you track down that node container on docker-hub, you'll see that it's built on top of a debian container. Also notice that `node_modules` are installed directly into my container [here](https://github.com/microlinkhq/react-json-view/blob/master/Dockerfile#L6-L7).

When I run `./docker/build-container.sh`, docker produces a container including all the `node_modules` listed in my `package.json` file.

When I run `./docker/dev-server.sh`, a few things happen:
1. docker [runs my container and mounts some source files](https://github.com/mac-s-g/react-json-view/blob/master/docker/dev-server.sh#L16-L20) into the container
1. docker [runs my container and mounts some source files](https://github.com/microlinkhq/react-json-view/blob/master/docker/dev-server.sh#L16-L20) into the container
* "mounting" is like a soft copy. my files are linked inside the container's file system so local edits propagate to the container.
2. docker [exposes a port](https://github.com/mac-s-g/react-json-view/blob/master/docker/dev-server.sh#L23) on the container
2. docker [exposes a port](https://github.com/microlinkhq/react-json-view/blob/master/docker/dev-server.sh#L23) on the container
* this allows me to configure my app to listen and respond to to traffic at http://localhost:2000
* the port is arbitrary
3. An [entrypoint will be invoked](https://github.com/mac-s-g/react-json-view/blob/master/docker/dev-server.sh#L24) once the container is running
* With my container up and running, the [entrypoint simply runs webpack dev server](https://github.com/mac-s-g/react-json-view/blob/master/entrypoints/dev-server.sh#L6).
3. An [entrypoint will be invoked](https://github.com/microlinkhq/react-json-view/blob/master/docker/dev-server.sh#L24) once the container is running
* With my container up and running, the [entrypoint simply runs webpack dev server](https://github.com/microlinkhq/react-json-view/blob/master/entrypoints/dev-server.sh#L6).

If you understand those steps, then you'll understand any of the docker scripts in `/docker/`. They do the same thing as the dev-server script but call different entrypoints.

Expand Down

0 comments on commit 7b1a46f

Please sign in to comment.