forked from Raathigesh/retoggle
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
bc7068a
commit 3a64852
Showing
10 changed files
with
296 additions
and
99 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| --- | ||
| name: Writting a Custom Knob | ||
| menu: Knobs | ||
| --- | ||
| import {useState} from "react"; | ||
| import { Playground } from "docz"; | ||
| import useChartKnob from "../example/custom-chart-knob"; | ||
|
|
||
| ### Writting a custom Knob | ||
| Retoggle allows you to add your own knows to the Inspector with a simple API. | ||
|
|
||
| - A component to render in the inspector panel | ||
| - A custom hook to manage state | ||
|
|
||
| ### The API | ||
|
|
||
| ```javascript | ||
| import { setKnob, removeKnob, addKnobRenderer } from "retoggle"; | ||
| ``` | ||
|
|
||
| - `addKnobRenderer(type, Component)` - Registers a knob renderer with the store. | ||
| - `type`: Knob type. This is a string. Should be unqiue. | ||
| - `Component`: The component constructor. | ||
|
|
||
| - `setKnob(props)` - You would call this method to update your knob. The following are required props. | ||
| - `name`: The name of your knob. | ||
| - `type`: Type of the knob. | ||
|
|
||
| - `removeKnob(name)` - You would call this method remove your knob from the inspector. | ||
| - `name`: The name of your knob. | ||
|
|
||
|
|
||
| ### A walkthough of the custom knob sample | ||
|
|
||
| This example knob implementation can be found in [src/example/custom-chart-knob](https://github.com/Raathigesh/storyhooks/blob/master/src/example/custom-chart-knob/index.ts). | ||
|
|
||
| #### The Component of the Knob | ||
| The props of this components are passed by your from your custom hook | ||
|
|
||
| ```javascript | ||
| import React from "react"; | ||
| import styled from "styled-components"; | ||
| import { Activity } from "react-feather"; | ||
| import { Sparklines, SparklinesLine, SparklinesSpots } from "react-sparklines"; | ||
| import { KnobFrame } from "retoggle"; | ||
|
|
||
| const Container = styled.div` | ||
| display: flex; | ||
| width: 100%; | ||
| margin-top: 5px; | ||
| svg { | ||
| width: 100%; | ||
| height: 50px; | ||
| } | ||
| `; | ||
|
|
||
| export default function Chart({ data }) { | ||
| return ( | ||
| <KnobFrame | ||
| label="This is a custom knob" | ||
| direction="column" | ||
| icon={<Activity size={11} />} | ||
| > | ||
| <Container> | ||
| <Sparklines data={data} limit={20}> | ||
| <SparklinesLine color="#1c8cdc" /> | ||
| <SparklinesSpots /> | ||
| </Sparklines> | ||
| </Container> | ||
| </KnobFrame> | ||
| ); | ||
| } | ||
|
|
||
| ``` | ||
|
|
||
| #### The custom hook | ||
| ```javascript | ||
| import { useState, useEffect } from "react"; | ||
| import { setKnob, removeKnob, addKnobRenderer } from "retoggle"; | ||
| import Component from "./component"; | ||
|
|
||
| const KnobType = "chart"; | ||
| addKnobRenderer(KnobType, Component); | ||
|
|
||
| export default function useChartKnob(name: string, value: any) { | ||
| const [data, setData] = useState([]); | ||
|
|
||
| useEffect( | ||
| () => { | ||
| const randomNumber = Math.floor(Math.random() * 6) + 1; | ||
| setData([...data, randomNumber]); | ||
|
|
||
| setKnob({ | ||
| name, | ||
| type: KnobType, | ||
| data | ||
| }); | ||
| }, | ||
| [value] | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| return () => removeKnob(name); | ||
| }, []); | ||
| } | ||
|
|
||
| ``` | ||
|
|
||
|
|
||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| --- | ||
| name: Getting started | ||
| route: / | ||
| --- | ||
| import {Playground} from 'docz'; | ||
| import image from './Retoggle.png' | ||
| import App from '../src/example/app.tsx'; | ||
|
|
||
| ## Retoggle | ||
| <Playground> | ||
| {() => { | ||
| return <App /> | ||
| }} | ||
| </Playground> | ||
|
|
||
| [](https://travis-ci.org/Raathigesh/storyhooks) | ||
|
|
||
| Retoggle is a dev utility for your demos, presentations and debugging use-cases inspired by [ideas from Dan Abramov](https://twitter.com/dan_abramov/status/1058834904207761409). | ||
|
|
||
| - 🎉 A wide range of toggles | ||
| - 💡 Frictionless integration | ||
| - 🎨 Themeable components | ||
| - 🎁 Extensible. Write your custom toggles. | ||
|
|
||
| ### Take it for a spin | ||
|
|
||
|
|
||
|
|
||
| ### Avilable knobs | ||
|
|
||
| - 📝 `useLog()` - Keeps track of a variable value | ||
| - 🅰 `useTextKnob()` - Shows a text box | ||
| - 1️⃣ `useNumberKnob()` - Shows a number box | ||
| - ✅️ `useBooleanKnob()` - Shows a check box | ||
| - 🎚 `useRangeKnob()` - Shows a slider | ||
| - 🎛 `useRangesKnob()` - Shows multiple sliders | ||
| - 🎏 `useSelectKnob()` - Shows a select box | ||
| - ⚒ `useObjectKnob()` - Shows an object editor | ||
| - 🎨 `useColorKnob()` - Shows a color picker | ||
| - ⏰ `useTimemachine()` - Shows a slider and tracks the state of a given variable and allows to travel back in time | ||
|
|
||
| #### 📚 [API Docs with live preview available here.](https://storyhooks.debuggable.io) | ||
|
|
||
|
|
||
|
|
||
| ## Contribute | ||
|
|
||
| ### Preparing dev environment | ||
|
|
||
| - `yarn install` to install dev dependencies | ||
|
|
||
| ### Running and building the library | ||
|
|
||
| - `yarn start` will start the dev server and expose the sample app | ||
| - `yarn build` will output the build artifact to `./lib` folder | ||
|
|
||
| ### Docs | ||
|
|
||
| - `docz:dev` will start the docz developement server | ||
| - `docz:build` will build the docs | ||
|
|
||
| ## License | ||
|
|
||
| MIT |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| --- | ||
| name: useBooleanKnob | ||
| menu: Knobs | ||
| --- | ||
| import {useState} from "react"; | ||
| import { Playground } from "docz"; | ||
| import { Inspector, useBooleanKnob } from "../src/lib"; | ||
|
|
||
| ### useBooleanKnob(label, value) | ||
|
|
||
| A color picker which let you pic a color | ||
|
|
||
| - `label` - A label for the color picker | ||
| - `value` - A boolean value as initial value | ||
|
|
||
|
|
||
| #### Usage | ||
| ```javascript | ||
| import { useBooleanKnob } from "retoggle"; | ||
| ``` | ||
| <Playground> | ||
| {() => { | ||
| const [value, setValue] = useBooleanKnob("Boolean", true); | ||
|
|
||
| return ( | ||
| <React.Fragment> | ||
| <Inspector usePortal={false} /> | ||
| {value.toString()} | ||
| </React.Fragment> | ||
| ) | ||
| }} | ||
| </Playground> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,66 @@ | ||
| import React from "react"; | ||
| import styled from "styled-components"; | ||
| import { Inspector } from "../lib"; | ||
| import Icon from "./icon"; | ||
| import { Ghost } from "react-kawaii"; | ||
| import { | ||
| Inspector, | ||
| useLog, | ||
| useBooleanKnob, | ||
| useNumberKnob, | ||
| useRangeKnob, | ||
| useSelectKnob, | ||
| useTimemachine, | ||
| useColorKnob, | ||
| useObjectKnob | ||
| } from "../lib"; | ||
| import useChartKnob from "./custom-chart-knob"; | ||
|
|
||
| const Container = styled.div` | ||
| background-color: #3356d0; | ||
| flex-direction: column; | ||
| display: flex; | ||
| justify-content: center; | ||
| padding: 15px; | ||
| margin: 5px; | ||
| border-radius: 5px; | ||
| width: 400px; | ||
| height: 400px; | ||
| align-items: center; | ||
| height: 97vh; | ||
| justify-content: center; | ||
| box-shadow: rgba(195, 22, 22, 0.03) 0px 0px 5px, | ||
| rgba(63, 81, 181, 0.55) 10px 13px 47px; | ||
| `; | ||
|
|
||
| export default function App() { | ||
| export default function Icon() { | ||
| const [visibility] = useBooleanKnob("Icon Visibility", true); | ||
|
|
||
| useLog("Visibility", { | ||
| visibility | ||
| }); | ||
|
|
||
| const [borderWidth] = useNumberKnob("Border Width"); | ||
| const [rangeKnobValue] = useRangeKnob("Ghost Size", { | ||
| initialValue: 240, | ||
| min: 0, | ||
| max: 500 | ||
| }); | ||
| const [mood] = useSelectKnob( | ||
| "Mood", | ||
| ["sad", "shocked", "happy", "blissful", "lovestruck", "excited"], | ||
| "blissful" | ||
| ); | ||
| const [colorValue] = useColorKnob("Color", "wheat"); | ||
| const [obj, setObj] = useObjectKnob("Object", {}); | ||
| const timemachineValue = useTimemachine("Textbox timemachine", colorValue); | ||
| useChartKnob("Chart", timemachineValue); | ||
|
|
||
| return ( | ||
| <Container> | ||
| <Container | ||
| style={{ borderWidth, borderStyle: "solid", borderColor: "white" }} | ||
| > | ||
| <Inspector /> | ||
| <Icon /> | ||
| {visibility && ( | ||
| <Ghost size={rangeKnobValue} mood={mood} color={timemachineValue} /> | ||
| )} | ||
| </Container> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.