Skip to content

Commit 1d83a7a

Browse files
author
spoeck
committed
initial commit
0 parents  commit 1d83a7a

33 files changed

+17267
-0
lines changed

‎.gitignore‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
# See https://help.github.com/ignore-files/ for more about ignoring files.
3+
4+
# dependencies
5+
node_modules
6+
7+
# builds
8+
build
9+
dist
10+
.rpt2_cache
11+
12+
# misc
13+
.DS_Store
14+
.env
15+
.env.local
16+
.env.development.local
17+
.env.test.local
18+
.env.production.local
19+
20+
npm-debug.log*
21+
yarn-debug.log*
22+
yarn-error.log*

‎.prettierignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
build/
2+
dist/

‎.storybook/addon-order.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// export action addon this way, so that knob tab is the first one
2+
export * from '@storybook/addon-actions/register';

‎.storybook/addons.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import '@storybook/addon-knobs/register';
2+
import '@storybook/addon-links/register';
3+
import '@storybook/addon-viewport/register';
4+
import './addon-order';

‎.storybook/preview.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { withKnobs } from '@storybook/addon-knobs/dist';
2+
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
3+
import { addDecorator, addParameters, configure } from '@storybook/react';
4+
5+
addParameters({
6+
viewport: {
7+
viewports: INITIAL_VIEWPORTS,
8+
},
9+
});
10+
11+
addDecorator(withKnobs);
12+
13+
configure(require.context('../src', true, /\.stories\.tsx$/), module);

‎.storybook/webpack.config.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const path = require('path');
2+
const SRC_PATH = path.join(__dirname, '../src');
3+
4+
module.exports = ({ config }) => {
5+
config.module.rules.push({
6+
test: /\.(ts|tsx)$/,
7+
include: [SRC_PATH],
8+
use: [
9+
{
10+
loader: require.resolve('awesome-typescript-loader'),
11+
options: {
12+
configFileName: './tsconfig.json',
13+
},
14+
},
15+
],
16+
});
17+
config.resolve.extensions.push('.ts', '.tsx');
18+
return config;
19+
};

‎README.md‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
# react-planet
2+
3+
[![Version](https://img.shields.io/npm/v/react-planet.svg)](https://www.npmjs.com/package/react-planet)
4+
[![Downloads](https://img.shields.io/npm/dt/react-planet.svg)](https://www.npmjs.com/package/react-planet)
5+
<br />
6+
<br />
7+
A react lib for building circular menus in a very easy and handy way.
8+
9+
<img src="doc/react-planet_menu.gif" width="40%"/>
10+
11+
Live-Demo: [STORYBOOK](https://innfactory.github.io/react-planet)
12+
13+
## install
14+
15+
```
16+
npm install --save react-planet
17+
```
18+
19+
## Concept
20+
21+
<img src="doc/concept.png" width="100%"/>
22+
23+
## Basic Example
24+
25+
<img src="doc/example1.png" width="40%">
26+
27+
```jsx
28+
import { Planet } from 'react-planet;
29+
30+
export function MyPlanet() {
31+
32+
return (
33+
<Planet
34+
centerContent={
35+
<div
36+
style={{
37+
height: 100,
38+
width: 100,
39+
borderRadius: '50%',
40+
backgroundColor: '#1da8a4',
41+
}}
42+
/>
43+
}
44+
open
45+
autoClose
46+
>
47+
<div
48+
style={{
49+
height: 70,
50+
width: 70,
51+
borderRadius: '50%',
52+
backgroundColor: '#9257ad',
53+
}}
54+
/>
55+
<div
56+
style={{
57+
height: 70,
58+
width: 70,
59+
borderRadius: '50%',
60+
backgroundColor: '#9257ad',
61+
}}
62+
/>
63+
</Planet>
64+
);
65+
}
66+
```
67+
68+
## Change the orbit
69+
70+
<img src="doc/example2.png" width="40%">
71+
72+
```jsx
73+
<Planet centerContent={div style={...yourStlye}/>}
74+
open
75+
orbitRadius={120}
76+
rotation={30}
77+
...
78+
>
79+
```
80+
81+
## Orbit Style
82+
83+
<img src="doc/example3.png" width="40%">
84+
85+
```jsx
86+
<Planet
87+
orbitStyle={(defaultStyle) => ({
88+
...defaultStyle,
89+
borderWidth: 4,
90+
borderStyle: 'dashed',
91+
borderColor: '#6f03fc',
92+
})}
93+
centerContent={<div className={classes.planetSmall} />}
94+
open
95+
>
96+
<div className={classes.satellite1} />
97+
<div className={classes.satellite2} />
98+
<div className={classes.satellite3} />
99+
</Planet>
100+
```
101+
102+
## Weird satellites and their orientation
103+
104+
<img src="doc/react-planet_satelliteOrientation.gif" width="60%">
105+
106+
```jsx
107+
<Planet
108+
// set one of the orientations
109+
satelliteOrientation="INSIDE"
110+
111+
```
112+
113+
## Bring it to life
114+
115+
<img src="doc/react-planet_bring_it_to_life.gif" width="40%">
116+
117+
```jsx
118+
<Planet
119+
dragablePlanet
120+
dragRadiusPlanet={20}
121+
bounce
122+
```
123+
124+
## Planetception
125+
126+
Nested planets
127+
128+
<img src="doc/react-planet_planetception.gif" width="60%">
129+
130+
Code: [/src/stories/Planet.stories.tsx](/src/stories/Planet.stories.tsx)
131+
132+
## Face the space
133+
134+
<img src="doc/react-planet_space.gif" width="30%">
135+
136+
```jsx
137+
<Planet
138+
centerContent={<YourButton0 />}
139+
hideOrbit
140+
autoClose
141+
orbitRadius={60}
142+
bounceOnClose
143+
rotation={105}
144+
// the bounce direction is minimal visible
145+
// but on close it seems the button wobbling a bit to the bottom
146+
bounceDirection="BOTTOM"
147+
>
148+
<YourButton1 />
149+
<YourButton2 />
150+
<YourButton3 />
151+
<div />
152+
<div />
153+
<div />
154+
<div />
155+
</Planet>
156+
```
157+
158+
## Alter the physics
159+
160+
<img src="doc/react-planet_physic.gif" width="50%">
161+
162+
```jsx
163+
<Planet
164+
mass={4}
165+
tension={500}
166+
friction={19}
167+
168+
```
169+
170+
<br/>
171+
172+
# Props
173+
174+
| name | type | example /default | description |
175+
| -------------------- | --------------------------------------- | ------------------------ | -------------------------------------------------------------- |
176+
| centerContent | React.Node? | <div /> | The planet component |
177+
| orbitRadius | number? | 120 | How far the satellites are away from the planet |
178+
| open | boolean? | false | Set the open/close state from outside |
179+
| autoClose | boolean? | false | If true the planet handles the open/close state by itself |
180+
| hideOrbit | boolean? | false | If true the orbit is hidden / not rendered |
181+
| rotation | number? | 0 | The angle for the rotation of all satellites around the planet |
182+
| satelliteOrientation | DEFAULT INSIDE OUTSIDE READABLE | undefined / DEFAULT | The angle for the rotation of one satellite itself |
183+
| dragableSatellites | boolean? | false | If true you can click and drag a satellite |
184+
| dragRadiusSatellites | number? | 12 | Defines how much you can drag the satellites |
185+
| dragablePlanet | boolean? | false | If true you can click and drag the planet |
186+
| dragRadiusPlanet | number? | 12 | Defines how much you can drag the planet |
187+
| bounce | boolean? | false | If true the planet bounces on open and close |
188+
| bounceOnOpen | boolean? | false | If true the planet bounces only on open |
189+
| bounceOnClose | boolean? | false | If true the planet bounces only on close |
190+
| bounceRadius | number? | 3 | Defines how much the planet bounces |
191+
| bounceDirection | TOP BOTTOM LEFT RIGHT | undefined | On hight bounceRadius you can see a direction |
192+
| tension | number? | 500 | a react-spring animation physic value |
193+
| friction | number? | 17 | a react-spring animation physic value |
194+
| mass | number? | 1 | a react-spring animation physic value |
195+
| orbitStyle | (default: CSSProperties)=>CSSProperties | () => ({borderWidth: 4}) | You can override or set a new style for the orbit |
196+
| onClick | (e: MouseEvent)=>void | ()=>{} | The function is triggered if you click on the centerComponent |
197+
| onClose | (e: MouseEvent)=>void | ()=>{} | The function is triggered if the planet wants to close |
198+
199+
# Start Storybook local
200+
201+
```
202+
npm install
203+
npm start
204+
```
205+
206+
<br/>
207+
208+
# Made by:
209+
210+
<br/>
211+
<img src="doc/innFactory.svg" width="100%"/>
212+
213+
[https://innFactory.de/](https://innFactory.de/)

‎doc/concept.png‎

152 KB
Loading

‎doc/example1.png‎

15 KB
Loading

‎doc/example2.png‎

10.7 KB
Loading

0 commit comments

Comments
 (0)