Skip to content

Commit

Permalink
Docs (#43)
Browse files Browse the repository at this point in the history
Co-authored-by: David <david.bismut@gmail.com>
  • Loading branch information
gsimone and dbismut committed Feb 13, 2021
1 parent ede2f06 commit 5eb301c
Show file tree
Hide file tree
Showing 51 changed files with 2,014 additions and 620 deletions.
13 changes: 12 additions & 1 deletion .all-contributorsrc
Expand Up @@ -9,6 +9,7 @@
"imageSize": 80,
"commit": true,
"commitConvention": "none",
"contributorsSortAlphabetically": true,
"contributors": [
{
"login": "gsimone",
Expand Down Expand Up @@ -45,7 +46,8 @@
"avatar_url": "https://avatars1.githubusercontent.com/u/2991360?v=4",
"profile": "https://github.com/AndrewPrifer",
"contributions": [
"ideas"
"ideas",
"code"
]
},
{
Expand Down Expand Up @@ -92,6 +94,15 @@
"contributions": [
"bug"
]
},
{
"login": "clementcassajus",
"name": "clementcassajus",
"avatar_url": "https://avatars.githubusercontent.com/u/13033639?v=4",
"profile": "https://github.com/clementcassajus",
"contributions": [
"design"
]
}
],
"contributorsPerLine": 7
Expand Down
11 changes: 5 additions & 6 deletions .codesandbox/ci.json
@@ -1,10 +1,9 @@
{
"sandboxes": [
"leva-busy-dvls9",
"leva-minimal-fb873",
"leva-scrolly-e6uhn",
"leva-plugin-spring-e3wio",
"leva-panels-0zdl8",
"leva-multiple-stores-isl03"
"/sandboxes/leva-minimal",
"/sandboxes/leva-busy",
"/sandboxes/leva-scroll",
"/sandboxes/leva-plugin-spring",
"/sandboxes/leva-advanced-panels"
]
}
24 changes: 24 additions & 0 deletions .github/workflows/main.yml
@@ -0,0 +1,24 @@
name: CI
on: [push]
jobs:
build:
name: Build, lint, and test
runs-on: ubuntu-latest

steps:
- name: Checkout repo
uses: actions/checkout@v2

- name: Use Node ${{ matrix.node }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node }}

- name: Install deps and build (with cache)
uses: bahmutov/npm-install@v1

# - name: Lint
# run: yarn lint

- name: Build
run: yarn build
8 changes: 0 additions & 8 deletions .storybook/main.js

This file was deleted.

5 changes: 0 additions & 5 deletions .storybook/preview.js

This file was deleted.

109 changes: 59 additions & 50 deletions README.md
@@ -1,57 +1,65 @@
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-9-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->
# leva 🌋
<a href=""><img src="https://raw.githubusercontent.com/gsimone/leva/docs/hero.png" /></a>

<div align="center">
<img src="https://badgen.net/npm/v/leva?labelColor=181C20&color=181C20" alt="NPM Version" />
<img src="https://badgen.net/bundlephobia/minzip/leva?labelColor=181C20&color=181C20" alt="minzipped size"/>
<img src="https://github.com/gsimone/leva/workflows/CI/badge.svg" alt="Build Status" />
</a>
</div>
<br />
<div align="center"><strong>A GUI you are going to lava.</strong></div>
<div align="center"> Customizable, extensible and beautiful by default.</div>
<br />
<div align="center">
<a href="https://docs.pmnd.rs/leva">Documentation</a>
</div>
<br />
<div align="center">
<sub>by <a href="https://twitter.com/pmndrs">Poimandres</a></sub>
</div>

<br />

## Features

- ⭐️ Beautiful by default
- 🎚 More than 12 different kinds of inputs available
- 🧐 Smart input type recognition
- 🔌 Easy-to-make plugins
- ✅ Keyboard accessible
- ⚡️ No setup necessary

### Installation

```bash
yarn add leva
npm i leva
```

`useControls` brings is a smart GUI for your React apps and your creative coding endeavors:
### Quick start

- 🧐 Smart defaults, your GUI will always pick the best input type for your data
- 🤳 Mobile-ready, all inputs work perfectly on mobile
- 💪 Type safety, `useControls` is built from the ground up with typescript, all types are inferred from your code.
Simply call the `useControls` hook from anywhere in your app:

`useControls` isn't a component library.

## Features
* As-you-type filtering of inputs.
* You can modify number inputs by either dragging over the input label or inner label.
* The lib automatically calculates the number input step based on the initial value magnitude and significant digits.
* Increase / decrease numbers with arrow keys, with alt (`±0.1`) and shift (`±10`) modifiers support.
* Draggable pane.
* Supports copying values.
* Supports conditional rendering of inputs.

## Inputs
* String
* Boolean
* Number
* Range
* Interval `[min,max]`
* Point2d `[x,y]` or `{x,y}`
* Point3d `[x,y,z]` or `{x,y,z}`
* Color `#hex` and `{r,g,b,a}`
* Select
* Spring `{tension,friction,mass}`
* Image

## Usage

Simply call the `useControls` hook from anywhere in your app.

Your component will update whenever the values defined in the hook are changed!

```jsx
import { useControls } from 'leva'
```
import { useControls } from "leva"
function MyComponent() {
const { myValue } = useControls({ myValue: 10 })
return myValue
const { name, aNumber } = useControls({ name: "World", aNumber: 0 })
return <div>Hey {name}, hello! {aNumber}</div>
}
```

### Documentation

- [Getting Started](docs/getting-started.md)
- [Inputs](docs/inputs.md)
- [Configuration](docs/configuration.md)
- [Styling](docs/styling.md)

- [Advanced: Controlled Inputs](docs/advanced/controlled-inputs.md)
- [Advanced: Creating Plugins](docs/advanced/creating-plugins.md)


## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Expand All @@ -61,17 +69,18 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
<!-- markdownlint-disable -->
<table>
<tr>
<td align="center"><a href="https://twitter.com/ggsimm"><img src="https://avatars0.githubusercontent.com/u/1862172?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Gianmarco</b></sub></a><br /><a href="#ideas-gsimone" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/gsimone/leva/commits?author=gsimone" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/dbismut"><img src="https://avatars2.githubusercontent.com/u/5003380?v=4?s=80" width="80px;" alt=""/><br /><sub><b>David Bismut</b></sub></a><br /><a href="#ideas-dbismut" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/gsimone/leva/commits?author=dbismut" title="Code">💻</a></td>
<td align="center"><a href="https://iinf.in/"><img src="https://avatars0.githubusercontent.com/u/48106228?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Han</b></sub></a><br /><a href="#design-iinfin" title="Design">🎨</a></td>
<td align="center"><a href="https://github.com/AndrewPrifer"><img src="https://avatars1.githubusercontent.com/u/2991360?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Andrew Prifer</b></sub></a><br /><a href="#ideas-AndrewPrifer" title="Ideas, Planning, & Feedback">🤔</a></td>
<td align="center"><a href="https://github.com/dbismut"><img src="https://avatars2.githubusercontent.com/u/5003380?v=4?s=80" width="80px;" alt=""/><br /><sub><b>David Bismut</b></sub></a><br /><a href="#ideas-dbismut" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/gsimone/use-leva/commits?author=dbismut" title="Code">💻</a></td>
<td align="center"><a href="https://twitter.com/ggsimm"><img src="https://avatars0.githubusercontent.com/u/1862172?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Gianmarco</b></sub></a><br /><a href="#ideas-gsimone" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/gsimone/use-leva/commits?author=gsimone" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/AndrewPrifer"><img src="https://avatars1.githubusercontent.com/u/2991360?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Andrew Prifer</b></sub></a><br /><a href="#ideas-AndrewPrifer" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/gsimone/use-leva/commits?author=AndrewPrifer" title="Code">💻</a></td>
<td align="center"><a href="http://twitter.com/ariaminaei"><img src="https://avatars3.githubusercontent.com/u/593118?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Aria</b></sub></a><br /><a href="#ideas-AriaMinaei" title="Ideas, Planning, & Feedback">🤔</a></td>
<td align="center"><a href="https://github.com/emmelleppi"><img src="https://avatars2.githubusercontent.com/u/39760175?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Marco Ludovico Perego</b></sub></a><br /><a href="#ideas-emmelleppi" title="Ideas, Planning, & Feedback">🤔</a></td>
<td align="center"><a href="https://iinf.in/"><img src="https://avatars0.githubusercontent.com/u/48106228?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Han</b></sub></a><br /><a href="#design-iinfin" title="Design">🎨</a></td>
<td align="center"><a href="https://github.com/ivanross"><img src="https://avatars1.githubusercontent.com/u/15856208?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Ivan Rossi</b></sub></a><br /><a href="https://github.com/gsimone/use-leva/issues?q=author%3Aivanross" title="Bug reports">🐛</a></td>
<td align="center"><a href="https://github.com/marcofugaro"><img src="https://avatars3.githubusercontent.com/u/7217420?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Marco Fugaro</b></sub></a><br /><a href="#ideas-marcofugaro" title="Ideas, Planning, & Feedback">🤔</a></td>
</tr>
<tr>
<td align="center"><a href="https://github.com/ivanross"><img src="https://avatars1.githubusercontent.com/u/15856208?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Ivan Rossi</b></sub></a><br /><a href="https://github.com/gsimone/leva/issues?q=author%3Aivanross" title="Bug reports">🐛</a></td>
<td align="center"><a href="https://github.com/thephoenixofthevoid"><img src="https://avatars2.githubusercontent.com/u/49817252?v=4?s=80" width="80px;" alt=""/><br /><sub><b>thephoenixofthevoid</b></sub></a><br /><a href="https://github.com/gsimone/leva/issues?q=author%3Athephoenixofthevoid" title="Bug reports">🐛</a></td>
<td align="center"><a href="https://github.com/emmelleppi"><img src="https://avatars2.githubusercontent.com/u/39760175?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Marco Ludovico Perego</b></sub></a><br /><a href="#ideas-emmelleppi" title="Ideas, Planning, & Feedback">🤔</a></td>
<td align="center"><a href="https://github.com/clementcassajus"><img src="https://avatars.githubusercontent.com/u/13033639?v=4?s=80" width="80px;" alt=""/><br /><sub><b>clementcassajus</b></sub></a><br /><a href="#design-clementcassajus" title="Design">🎨</a></td>
<td align="center"><a href="https://github.com/thephoenixofthevoid"><img src="https://avatars2.githubusercontent.com/u/49817252?v=4?s=80" width="80px;" alt=""/><br /><sub><b>thephoenixofthevoid</b></sub></a><br /><a href="https://github.com/gsimone/use-leva/issues?q=author%3Athephoenixofthevoid" title="Bug reports">🐛</a></td>
</tr>
</table>

Expand Down
4 changes: 2 additions & 2 deletions babel.config.js
@@ -1,4 +1,4 @@
module.exports = {
presets: ['@babel/preset-react', '@babel/preset-typescript'],
plugins: ['babel-plugin-styled-components'],
presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
plugins: ['babel-plugin-styled-components']
}
133 changes: 133 additions & 0 deletions code_of_conduct.md
@@ -0,0 +1,133 @@

# Contributor Covenant Code of Conduct

## Our Pledge

We as members, contributors, and leaders pledge to make participation in our
community a harassment-free experience for everyone, regardless of age, body
size, visible or invisible disability, ethnicity, sex characteristics, gender
identity and expression, level of experience, education, socio-economic status,
nationality, personal appearance, race, religion, or sexual identity
and orientation.

We pledge to act and interact in ways that contribute to an open, welcoming,
diverse, inclusive, and healthy community.

## Our Standards

Examples of behavior that contributes to a positive environment for our
community include:

* Demonstrating empathy and kindness toward other people
* Being respectful of differing opinions, viewpoints, and experiences
* Giving and gracefully accepting constructive feedback
* Accepting responsibility and apologizing to those affected by our mistakes,
and learning from the experience
* Focusing on what is best not just for us as individuals, but for the
overall community

Examples of unacceptable behavior include:

* The use of sexualized language or imagery, and sexual attention or
advances of any kind
* Trolling, insulting or derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or email
address, without their explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting

## Enforcement Responsibilities

Community leaders are responsible for clarifying and enforcing our standards of
acceptable behavior and will take appropriate and fair corrective action in
response to any behavior that they deem inappropriate, threatening, offensive,
or harmful.

Community leaders have the right and responsibility to remove, edit, or reject
comments, commits, code, wiki edits, issues, and other contributions that are
not aligned to this Code of Conduct, and will communicate reasons for moderation
decisions when appropriate.

## Scope

This Code of Conduct applies within all community spaces, and also applies when
an individual is officially representing the community in public spaces.
Examples of representing our community include using an official e-mail address,
posting via an official social media account, or acting as an appointed
representative at an online or offline event.

## Enforcement

Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported to the community leaders responsible for enforcement at
[INSERT CONTACT METHOD].
All complaints will be reviewed and investigated promptly and fairly.

All community leaders are obligated to respect the privacy and security of the
reporter of any incident.

## Enforcement Guidelines

Community leaders will follow these Community Impact Guidelines in determining
the consequences for any action they deem in violation of this Code of Conduct:

### 1. Correction

**Community Impact**: Use of inappropriate language or other behavior deemed
unprofessional or unwelcome in the community.

**Consequence**: A private, written warning from community leaders, providing
clarity around the nature of the violation and an explanation of why the
behavior was inappropriate. A public apology may be requested.

### 2. Warning

**Community Impact**: A violation through a single incident or series
of actions.

**Consequence**: A warning with consequences for continued behavior. No
interaction with the people involved, including unsolicited interaction with
those enforcing the Code of Conduct, for a specified period of time. This
includes avoiding interactions in community spaces as well as external channels
like social media. Violating these terms may lead to a temporary or
permanent ban.

### 3. Temporary Ban

**Community Impact**: A serious violation of community standards, including
sustained inappropriate behavior.

**Consequence**: A temporary ban from any sort of interaction or public
communication with the community for a specified period of time. No public or
private interaction with the people involved, including unsolicited interaction
with those enforcing the Code of Conduct, is allowed during this period.
Violating these terms may lead to a permanent ban.

### 4. Permanent Ban

**Community Impact**: Demonstrating a pattern of violation of community
standards, including sustained inappropriate behavior, harassment of an
individual, or aggression toward or disparagement of classes of individuals.

**Consequence**: A permanent ban from any sort of public interaction within
the community.

## Attribution

This Code of Conduct is adapted from the [Contributor Covenant][homepage],
version 2.0, available at
[https://www.contributor-covenant.org/version/2/0/code_of_conduct.html][v2.0].

Community Impact Guidelines were inspired by
[Mozilla's code of conduct enforcement ladder][Mozilla CoC].

For answers to common questions about this code of conduct, see the FAQ at
[https://www.contributor-covenant.org/faq][FAQ]. Translations are available
at [https://www.contributor-covenant.org/translations][translations].

[homepage]: https://www.contributor-covenant.org
[v2.0]: https://www.contributor-covenant.org/version/2/0/code_of_conduct.html
[Mozilla CoC]: https://github.com/mozilla/diversity
[FAQ]: https://www.contributor-covenant.org/faq
[translations]: https://www.contributor-covenant.org/translations
9 changes: 9 additions & 0 deletions contributing.md
@@ -0,0 +1,9 @@
# Contributing

## What we are looking for

- Input Suggestions
- Plugin Suggestions
- Alternative Themes
- Unit Tests
- Docs
7 changes: 7 additions & 0 deletions docs/advanced/controlled-inputs.md
@@ -0,0 +1,7 @@
# Controlled Inputs

@TODO
This page will go in depth on how to replicate use-cases like https://twitter.com/simonghales/status/1357630773323436033
where the values are being changed outside of the GUI

This page should also probably talk about multi-panes and other non dat.GUI situations
5 changes: 5 additions & 0 deletions docs/advanced/creating-plugins.md
@@ -0,0 +1,5 @@
# Creating Plugins

@TODO
This page will contain info on how to create custom plugins,
what even qualifies as a plugin, and an idea of what kinds of plugins could be included and maintained in this repo

0 comments on commit 5eb301c

Please sign in to comment.