10 |
11 | Live-Demo: [STORYBOOK](https://innfactory.github.io/react-planet)
12 |
13 | Read the full story @ [Medium](https://medium.com/@innFactory/creating-circular-menus-with-react-planet-8c7c9df6d766) or [innFactory-Blog](https://innfactory.de/softwareentwicklung/ui-ux/creating-circular-menus-with-react-planet/)
14 |
15 | ## install
16 |
17 | ```
18 | npm install --save react-planet
19 | ```
20 |
21 | ## Concept
22 |
23 | 
24 |
25 | ## Basic Example
26 |
27 | 
28 |
29 | ```jsx
30 | import { Planet } from 'react-planet';
31 |
32 | export function MyPlanet() {
33 | return (
34 | 
72 |
73 | ```jsx
74 | 
85 |
86 | ```jsx
87 | 
106 |
107 | ```jsx
108 | 
136 |
137 | ```jsx
138 | 
162 |
163 | ```jsx
164 | 208 | 209 | # Made by: 210 | 211 |
212 |
213 |
214 | [https://innFactory.de/](https://innFactory.de/)
215 |
--------------------------------------------------------------------------------
/doc/concept.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/innFactory/react-planet/29fde3c9828eec46562facad63195d1a7ab11974/doc/concept.png
--------------------------------------------------------------------------------
/doc/example1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/innFactory/react-planet/29fde3c9828eec46562facad63195d1a7ab11974/doc/example1.png
--------------------------------------------------------------------------------
/doc/example2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/innFactory/react-planet/29fde3c9828eec46562facad63195d1a7ab11974/doc/example2.png
--------------------------------------------------------------------------------
/doc/example3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/innFactory/react-planet/29fde3c9828eec46562facad63195d1a7ab11974/doc/example3.png
--------------------------------------------------------------------------------
/doc/innFactory.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/doc/react-planet_bring_it_to_life.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/innFactory/react-planet/29fde3c9828eec46562facad63195d1a7ab11974/doc/react-planet_bring_it_to_life.gif
--------------------------------------------------------------------------------
/doc/react-planet_menu.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/innFactory/react-planet/29fde3c9828eec46562facad63195d1a7ab11974/doc/react-planet_menu.gif
--------------------------------------------------------------------------------
/doc/react-planet_physic.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/innFactory/react-planet/29fde3c9828eec46562facad63195d1a7ab11974/doc/react-planet_physic.gif
--------------------------------------------------------------------------------
/doc/react-planet_planetception.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/innFactory/react-planet/29fde3c9828eec46562facad63195d1a7ab11974/doc/react-planet_planetception.gif
--------------------------------------------------------------------------------
/doc/react-planet_satelliteOrientation.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/innFactory/react-planet/29fde3c9828eec46562facad63195d1a7ab11974/doc/react-planet_satelliteOrientation.gif
--------------------------------------------------------------------------------
/doc/react-planet_space.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/innFactory/react-planet/29fde3c9828eec46562facad63195d1a7ab11974/doc/react-planet_space.gif
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-planet",
3 | "version": "1.0.1",
4 | "description": "A react lib for building circular menus in a very easy and handy way.",
5 | "author": "innFactory",
6 | "license": "MIT",
7 | "repository": {
8 | "type": "git",
9 | "url": "https://github.com/innFactory/react-planet"
10 | },
11 | "keywords": [
12 | "react-planet",
13 | "planet",
14 | "planet-menu",
15 | "circular",
16 | "round",
17 | "circular-menu",
18 | "menu",
19 | "submenu"
20 | ],
21 | "main": "dist/index.js",
22 | "module": "dist/index.es.js",
23 | "jsnext:main": "dist/index.es.js",
24 | "engines": {
25 | "node": ">=8",
26 | "npm": ">=5"
27 | },
28 | "scripts": {
29 | "test": "cross-env CI=1 react-scripts-ts test --env=jsdom",
30 | "test:watch": "react-scripts-ts test --env=jsdom",
31 | "build": "rollup -c",
32 | "start": "start-storybook -p 9001 -c .storybook -s ./src/stories/public",
33 | "prepare": "npm run build",
34 | "predeploy": "npm install && npm run build",
35 | "deploy": "storybook-to-ghpages",
36 | "storybook": "npm start",
37 | "build-storybook": "build-storybook"
38 | },
39 | "dependencies": {
40 | "@material-ui/core": "4.9.12",
41 | "@material-ui/styles": "^4.9.10",
42 | "react-spring": "^8.0.27",
43 | "react-use-gesture": "^7.0.15",
44 | "use-resize-observer": "^6.1.0"
45 | },
46 | "peerDependencies": {
47 | "react": ">=16.12.0",
48 | "react-dom": ">=16.12.0"
49 | },
50 | "devDependencies": {
51 | "@babel/core": "^7.7.7",
52 | "@material-ui/icons": "4.9.1",
53 | "@storybook/addon-actions": "^5.3.9",
54 | "@storybook/addon-knobs": "^5.3.17",
55 | "@storybook/addon-links": "^5.3.9",
56 | "@storybook/addon-viewport": "^5.3.17",
57 | "@storybook/react": "^5.2.8",
58 | "@storybook/storybook-deployer": "^2.8.5",
59 | "@testing-library/jest-dom": "^4.2.4",
60 | "@testing-library/react": "^9.4.0",
61 | "@types/classnames": "2.2.7",
62 | "@types/jest": "^24.0.24",
63 | "@types/react": "16.9.19",
64 | "@types/react-dom": "16.9.5",
65 | "@types/react-motion": "0.0.29",
66 | "@types/react-virtualized": "9.18.11",
67 | "awesome-typescript-loader": "^5.2.1",
68 | "babel-loader": "^8.0.6",
69 | "jest": "^24.9.0",
70 | "prettier": "2.0.2",
71 | "react": "16.12.0",
72 | "react-dom": "16.12.0",
73 | "react-easy-crop": "2.1.1",
74 | "rollup": "^1.27.13",
75 | "rollup-plugin-commonjs": "^10.1.0",
76 | "rollup-plugin-node-resolve": "^5.2.0",
77 | "rollup-plugin-peer-deps-external": "^2.2.0",
78 | "rollup-plugin-typescript2": "^0.25.3",
79 | "ts-jest": "^24.2.0",
80 | "typescript": "3.7.5"
81 | },
82 | "files": [
83 | "dist"
84 | ]
85 | }
86 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import commonjs from 'rollup-plugin-commonjs';
2 | import resolve from 'rollup-plugin-node-resolve';
3 | import external from 'rollup-plugin-peer-deps-external';
4 | import typescript from 'rollup-plugin-typescript2';
5 | import pkg from './package.json';
6 |
7 | export default {
8 | input: 'src/index.ts',
9 | output: [
10 | {
11 | file: pkg.main,
12 | format: 'cjs',
13 | exports: 'named',
14 | sourcemap: true,
15 | },
16 | {
17 | file: pkg.module,
18 | format: 'es',
19 | exports: 'named',
20 | sourcemap: true,
21 | },
22 | ],
23 | plugins: [
24 | external(),
25 | resolve(),
26 | typescript({
27 | rollupCommonJSResolveHack: true,
28 | exclude: ['**/__tests__/**', '**/*.stories.tsx'],
29 | clean: true,
30 | }),
31 | commonjs({
32 | include: [/node_modules/],
33 | namedExports: {
34 | 'node_modules/react/react.js': ['Children', 'Component', 'PropTypes', 'createElement'],
35 | 'node_modules/react-dom/index.js': ['render'],
36 | 'prop-types': [
37 | 'array',
38 | 'bool',
39 | 'func',
40 | 'number',
41 | 'object',
42 | 'string',
43 | 'symbol',
44 | 'any',
45 | 'arrayOf',
46 | 'element',
47 | 'elementType',
48 | 'instanceOf',
49 | 'node',
50 | 'objectOf',
51 | 'oneOf',
52 | 'oneOfType',
53 | 'shape',
54 | 'exact',
55 | ],
56 | 'node_modules/react-is/index.js': [
57 | 'isElement',
58 | 'isValidElementType',
59 | 'ForwardRef',
60 | 'Memo',
61 | 'isFragment',
62 | ],
63 | },
64 | }),
65 | ],
66 | };
67 |
--------------------------------------------------------------------------------
/src/components/DragableContainer.tsx:
--------------------------------------------------------------------------------
1 | // prettier-ignore
2 | import { makeStyles } from '@material-ui/core';
3 | import * as React from "react";
4 | import { animated, useSpring } from "react-spring";
5 | import { useDrag } from "react-use-gesture";
6 | interface Props {
7 | children: React.ReactNode;
8 | on: boolean;
9 | dragable?: boolean;
10 | dragRadius?: number;
11 | bounceRadius?: number;
12 | open?: boolean;
13 | bounceOnOpen?: boolean;
14 | bounceOnClose?: boolean;
15 | bounceDirection?: "TOP" | "BOTTOM" | "LEFT" | "RIGHT";
16 | }
17 |
18 | const DEFAULT_DRAG_RADIUS = 12;
19 | const DEFAULT_BOUNCE_RADIUS = 3;
20 |
21 | export function DragableContainer(props: Props) {
22 | const {
23 | children,
24 | on,
25 | dragable,
26 | dragRadius,
27 | bounceRadius,
28 | open,
29 | bounceOnOpen,
30 | bounceOnClose,
31 | bounceDirection,
32 | } = props;
33 |
34 | if (on) {
35 | const [{ x, y, cursor }, set] = useSpring(() => ({
36 | x: 0,
37 | y: 0,
38 | config: { tension: 400, friction: 7, precision: 0.1 },
39 | cursor: "pointer",
40 | }));
41 |
42 | const classes = useStyles(props);
43 |
44 | React.useEffect(() => {
45 | if ((open && bounceOnOpen) || (!open && bounceOnClose)) {
46 | const bRadius = bounceRadius ? bounceRadius : DEFAULT_BOUNCE_RADIUS;
47 | let x = bRadius;
48 | let y = bRadius;
49 | switch (bounceDirection) {
50 | case "LEFT":
51 | x = -bRadius;
52 | y = 0;
53 | break;
54 | case "RIGHT":
55 | x = bRadius;
56 | y = 0;
57 | break;
58 | case "TOP":
59 | x = 0;
60 | y = -bRadius;
61 | break;
62 | case "BOTTOM":
63 | x = 0;
64 | y = bRadius;
65 | break;
66 | }
67 | set({ x, y });
68 | setTimeout(() => set({ x: 0, y: 0 }), 100);
69 | }
70 | }, [open]);
71 |
72 | // Creates a drag gesture
73 | const bind = useDrag(({ down, movement: [dX, dY] }) => {
74 | if (dragable) {
75 | const rMax = dragRadius ? dragRadius : DEFAULT_DRAG_RADIUS;
76 | const r = Math.sqrt(Math.pow(dX, 2) + Math.pow(dY, 2));
77 | // Find point along radius with rMax length
78 | // See: https://math.stackexchange.com/q/1630886
79 | if (r > rMax) {
80 | dX *= rMax / r;
81 | dY *= rMax / r;
82 | }
83 | set({
84 | x: down ? dX : 0,
85 | y: down ? dY : 0,
86 | immediate: down,
87 | cursor: down ? "grabbing" : "pointer",
88 | });
89 | }
90 | });
91 |
92 | return (
93 |
94 |
99 | {children}
100 |
101 |
102 | );
103 | } else {
104 | return <>{children};
105 | }
106 | }
107 |
108 | const useStyles = makeStyles({
109 | root: {
110 | top: 0,
111 | left: 0,
112 | },
113 |
114 | dragable: {
115 | position: "absolute",
116 | },
117 | });
118 |
--------------------------------------------------------------------------------
/src/components/Orbit.tsx:
--------------------------------------------------------------------------------
1 | // prettier-ignore
2 | import { makeStyles } from '@material-ui/core';
3 | import { CreateCSSProperties, CSSProperties } from '@material-ui/styles';
4 | import * as React from 'react';
5 | import { animated, useSpring } from 'react-spring';
6 |
7 | interface Props {
8 | orbitStyle?: (defaultStyle: CSSProperties | CreateCSSProperties<{}>) => CSSProperties | CreateCSSProperties<{}>;
9 | orbitRadius: number;
10 | planetWidth: number;
11 | planetHeight: number;
12 | open: boolean;
13 | mass: number;
14 | tension: number;
15 | friction: number;
16 | }
17 |
18 | export function Orbit(props: Props) {
19 | const { orbitRadius, planetWidth, planetHeight, open, tension, friction, mass } = props;
20 | const classes = useStyles(props);
21 | const position = useSpring({
22 | reverse: !open,
23 | from: getInitalOrbitPosition(planetWidth, planetHeight),
24 | to: getFinalOrbitPosition(planetWidth, planetHeight, orbitRadius),
25 | config: { mass, tension, friction },
26 | });
27 |
28 | return
134 | {!hideOrbit && (
135 |
164 |
148 |
160 |
162 |
163 | {centerContent}
161 | {children}
69 |
56 |
80 | );
81 | });
82 |
83 | const useStyles = makeStyles((theme: Theme) => ({
84 | root: {
85 | display: 'flex',
86 | flex: 1,
87 | width: '100%',
88 | backgroundColor: 'white',
89 | justifyContent: 'center',
90 | alignItems: 'center',
91 | minHeight: 600,
92 | },
93 |
94 | planet: {
95 | height: 100,
96 | width: 100,
97 | borderRadius: '50%',
98 | backgroundColor: theme.palette.primary.main,
99 | '&:hover': {
100 | borderWidth: 10,
101 | boxShadow: '0px 0px 15px 10px ' + theme.palette.secondary.light,
102 | cursor: 'pointer',
103 | },
104 | },
105 | }));
106 |
--------------------------------------------------------------------------------
/src/stories/CustomOrbit.stories.tsx:
--------------------------------------------------------------------------------
1 | import { makeStyles, Theme } from '@material-ui/core';
2 | import { storiesOf } from '@storybook/react';
3 | import * as React from 'react';
4 | import { Planet } from '../components';
5 | import { withTheme } from './index.stories';
6 | import { generateSatellites } from './storybook_utils.tsx/generateSatellites';
7 |
8 | storiesOf('Planet', module).add('custom orbit', () => {
9 | const classes = useStyles();
10 |
11 | return withTheme(
12 |
13 | ({
15 | ...defaultStyle,
16 | borderWidth: 4,
17 | borderStyle: 'dashed',
18 | borderColor: '#6f03fc',
19 | })}
20 | centerContent={}
21 | open
22 | orbitRadius={200}
23 | autoClose
24 | >
25 | {generateSatellites(3)}
26 |
27 |
28 | );
29 | });
30 |
31 | const useStyles = makeStyles((theme: Theme) => ({
32 | root: {
33 | display: 'flex',
34 | flex: 1,
35 | width: '100%',
36 | backgroundColor: 'white',
37 | justifyContent: 'center',
38 | alignItems: 'center',
39 | minHeight: 600,
40 | },
41 |
42 | planetSmall: {
43 | height: 10,
44 | width: 10,
45 | backgroundColor: theme.palette.primary.main,
46 | borderRadius: '50%',
47 | '&:hover': {
48 | borderWidth: 10,
49 | boxShadow: '0px 0px 15px 10px ' + theme.palette.secondary.light,
50 | cursor: 'pointer',
51 | },
52 | },
53 | }));
54 |
--------------------------------------------------------------------------------
/src/stories/Half.stories.tsx:
--------------------------------------------------------------------------------
1 | import { makeStyles, Theme } from '@material-ui/core';
2 | import { storiesOf } from '@storybook/react';
3 | import * as React from 'react';
4 | import { Planet } from '../components';
5 | import { withTheme } from './index.stories';
6 | import { generateSatellites } from './storybook_utils.tsx/generateSatellites';
7 |
8 | storiesOf('Planet', module).add('half', () => {
9 | const classes = useStyles();
10 |
11 | return withTheme(
12 |
13 |
20 | );
21 | });
22 |
23 | const useStyles = makeStyles((theme: Theme) => ({
24 | root: {
25 | display: 'flex',
26 | flex: 1,
27 | width: '100%',
28 | backgroundColor: 'white',
29 | justifyContent: 'center',
30 | alignItems: 'center',
31 | minHeight: 600,
32 | },
33 |
34 | planet: {
35 | height: 100,
36 | width: 100,
37 | borderRadius: '50%',
38 | backgroundColor: theme.palette.primary.main,
39 | '&:hover': {
40 | borderWidth: 10,
41 | boxShadow: '0px 0px 15px 10px ' + theme.palette.secondary.light,
42 | cursor: 'pointer',
43 | },
44 | },
45 | }));
46 |
--------------------------------------------------------------------------------
/src/stories/Menu.stories.tsx:
--------------------------------------------------------------------------------
1 | import { IconButton, makeStyles, Paper, Theme } from '@material-ui/core';
2 | import DeleteIcon from '@material-ui/icons/Delete';
3 | import EditIcon from '@material-ui/icons/Edit';
4 | import InfoIcon from '@material-ui/icons/InfoOutlined';
5 | import MenuIcon from '@material-ui/icons/Menu';
6 | import { boolean } from '@storybook/addon-knobs';
7 | import { storiesOf } from '@storybook/react';
8 | import * as React from 'react';
9 | import { Planet } from '../components';
10 | import { withTheme } from './index.stories';
11 |
12 | storiesOf('Planet', module).add('menu', () => {
13 | const classes = useStyles();
14 |
15 | const bounce = boolean('bounce', false);
16 | const bounceOnClose = boolean('bounce on close', false);
17 |
18 | return withTheme(
19 |
20 |
23 |
33 |
35 |
36 |
38 |
39 |
41 |
42 |
43 | );
44 | });
45 |
46 | function PaperButton(props: { color: string; children: React.ReactNode; iconColor: 'LIGHT' | 'DARK' }) {
47 | return (
48 |
13 |
39 | );
40 | });
41 |
42 | const useStyles = makeStyles((theme: Theme) => ({
43 | root: {
44 | display: "flex",
45 | flex: 1,
46 | width: "100%",
47 | backgroundColor: "white",
48 | justifyContent: "center",
49 | alignItems: "center",
50 | minHeight: 600,
51 | },
52 | planet: {
53 | height: 100,
54 | width: 100,
55 | borderRadius: "50%",
56 | backgroundColor: theme.palette.primary.main,
57 | "&:hover": {
58 | borderWidth: 10,
59 | boxShadow: "0px 0px 15px 10px " + theme.palette.secondary.light,
60 | cursor: "pointer",
61 | },
62 | },
63 |
64 | planetception: {
65 | position: "absolute",
66 | top: -15,
67 | left: -15,
68 | height: 30,
69 | width: 30,
70 | backgroundColor: theme.palette.secondary.main,
71 | borderRadius: "50%",
72 | "&:hover": {
73 | borderWidth: 10,
74 | boxShadow: "0px 0px 15px 10px " + theme.palette.secondary.light,
75 | cursor: "pointer",
76 | },
77 | },
78 | }));
79 |
--------------------------------------------------------------------------------
/src/stories/WeirdPlanet.stories.tsx:
--------------------------------------------------------------------------------
1 | import { makeStyles, Theme } from '@material-ui/core';
2 | import { storiesOf } from '@storybook/react';
3 | import * as React from 'react';
4 | import { Planet } from '../components';
5 | import { withTheme } from './index.stories';
6 | import { generateSatellites } from './storybook_utils.tsx/generateSatellites';
7 |
8 | storiesOf('Planet', module).add('weird planet', () => {
9 | const classes = useStyles();
10 |
11 | return withTheme(
12 |
13 |
17 | );
18 | });
19 |
20 | const useStyles = makeStyles((theme: Theme) => ({
21 | root: {
22 | display: 'flex',
23 | flex: 1,
24 | width: '100%',
25 | backgroundColor: 'white',
26 | justifyContent: 'center',
27 | alignItems: 'center',
28 | minHeight: 600,
29 | },
30 |
31 | planetWeird: {
32 | height: 30,
33 | width: 90,
34 | backgroundColor: theme.palette.primary.dark,
35 | borderRadius: '10%',
36 | '&:hover': {
37 | backgroundColor: theme.palette.primary.main,
38 | cursor: 'pointer',
39 | },
40 | },
41 | }));
42 |
--------------------------------------------------------------------------------
/src/stories/WeirdSatellites.stories.tsx:
--------------------------------------------------------------------------------
1 | import { makeStyles, Theme } from '@material-ui/core';
2 | import { select } from '@storybook/addon-knobs';
3 | import { storiesOf } from '@storybook/react';
4 | import * as React from 'react';
5 | import { Planet } from '../components';
6 | import { withTheme } from './index.stories';
7 | import { generateSatellites } from './storybook_utils.tsx/generateSatellites';
8 |
9 | storiesOf('Planet', module).add('weird satelites', () => {
10 | const classes = useStyles();
11 |
12 | const satelliteOrientation = select(
13 | 'satellite Orientation',
14 | {
15 | unset: undefined,
16 | DEFAULT: 'DEFAULT',
17 | INSIDE: 'INSIDE',
18 | OUTSIDE: 'OUTSIDE',
19 | READABLE: 'READABLE',
20 | },
21 | 'READABLE'
22 | );
23 |
24 | return withTheme(
25 |
26 |
36 | );
37 | });
38 |
39 | const useStyles = makeStyles((theme: Theme) => ({
40 | root: {
41 | display: 'flex',
42 | flex: 1,
43 | width: '100%',
44 | backgroundColor: 'white',
45 | justifyContent: 'center',
46 | alignItems: 'center',
47 | minHeight: 600,
48 | },
49 |
50 | planet: {
51 | height: 100,
52 | width: 100,
53 | borderRadius: '50%',
54 | backgroundColor: theme.palette.primary.main,
55 | '&:hover': {
56 | borderWidth: 10,
57 | boxShadow: '0px 0px 15px 10px ' + theme.palette.secondary.light,
58 | cursor: 'pointer',
59 | },
60 | },
61 | }));
62 |
--------------------------------------------------------------------------------
/src/stories/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import { createMuiTheme, CssBaseline } from '@material-ui/core';
2 | import { ThemeProvider } from '@material-ui/styles';
3 | import * as React from 'react';
4 | import { scale } from './storybook_utils.tsx/utils';
5 |
6 | const theme = createMuiTheme({
7 | palette: {
8 | primary: {
9 | light: '#5593e6',
10 | main: '#0066B3',
11 | dark: '#003c83',
12 | contrastText: '#fff',
13 | },
14 | secondary: {
15 | light: '#ff983f',
16 | main: '#FF6600',
17 | dark: '#c43300',
18 | contrastText: '#fff',
19 | },
20 | },
21 | typography: {
22 | fontSize: scale(14, 11, 14),
23 | },
24 | });
25 | export const withTheme = (component: any) => {
26 | return (
27 |
23 | {text && {only3 === 1 ? '1' : only3 === 2 ? '2' : '3'} }
24 |
25 | );
26 | } else {
27 | satellites.push(
28 |
32 | {text && {i + 1} }
33 |
34 | );
35 | }
36 |
37 | only3++;
38 | if (only3 > 3) {
39 | only3 = 1;
40 | }
41 | }
42 |
43 | return satellites;
44 | }
45 |
46 | const useStyles = makeStyles((theme: Theme) => ({
47 | satellite1: {
48 | height: 50,
49 | width: 50,
50 | borderRadius: '50%',
51 | backgroundColor: theme.palette.secondary.main,
52 | display: 'flex',
53 | justifyContent: 'center',
54 | alignItems: 'center',
55 | color: 'white',
56 | },
57 |
58 | satellite2: {
59 | height: 50,
60 | width: 50,
61 | borderRadius: '50%',
62 | backgroundColor: theme.palette.secondary.dark,
63 | display: 'flex',
64 | justifyContent: 'center',
65 | alignItems: 'center',
66 | color: 'white',
67 | },
68 |
69 | satellite3: {
70 | height: 50,
71 | width: 50,
72 | borderRadius: '50%',
73 | backgroundColor: theme.palette.secondary.light,
74 | display: 'flex',
75 | justifyContent: 'center',
76 | alignItems: 'center',
77 | color: 'white',
78 | },
79 |
80 | satelliteWeird1: {
81 | height: 120,
82 | width: 20,
83 | backgroundColor: '#f5e298',
84 | display: 'flex',
85 | justifyContent: 'center',
86 | alignItems: 'center',
87 | color: '#424242',
88 | },
89 |
90 | satelliteWeird2: {
91 | height: 30,
92 | width: 100,
93 | borderRadius: '25%',
94 | backgroundColor: '#db7948',
95 | display: 'flex',
96 | justifyContent: 'center',
97 | alignItems: 'center',
98 | color: 'white',
99 | },
100 |
101 | satelliteWeird3: {
102 | height: 50,
103 | width: 80,
104 | borderRadius: '50%',
105 | backgroundColor: '#aabf73',
106 | display: 'flex',
107 | justifyContent: 'center',
108 | alignItems: 'center',
109 | color: 'white',
110 | },
111 | }));
112 |
--------------------------------------------------------------------------------
/src/stories/storybook_utils.tsx/utils.ts:
--------------------------------------------------------------------------------
1 | export function scale(size?: number, min?: number, max?: number) {
2 | const w = window.innerWidth;
3 | const h = window.innerHeight;
4 | const zw = w / 1200;
5 | const zh = h / 900;
6 |
7 | const scaleFactor = zw <= zh ? zw : zh;
8 |
9 | if (!size) {
10 | return scaleFactor;
11 | }
12 |
13 | const s = size * scaleFactor;
14 |
15 | if (min && min > s) {
16 | return min;
17 | }
18 | if (max && max < s) {
19 | return max;
20 | }
21 |
22 | return s;
23 | }
24 |
--------------------------------------------------------------------------------
/src/typings.d.ts:
--------------------------------------------------------------------------------
1 | declare module '@storybook/*';
2 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "outDir": "dist",
4 | "module": "esnext",
5 | "target": "es5",
6 | "lib": ["es6", "dom", "es2016", "es2017"],
7 | "sourceMap": true,
8 | "allowJs": false,
9 | "jsx": "react",
10 | "declaration": true,
11 | "moduleResolution": "node",
12 | "forceConsistentCasingInFileNames": true,
13 | "noImplicitReturns": true,
14 | "noImplicitThis": true,
15 | "noImplicitAny": true,
16 | "strictNullChecks": true,
17 | "suppressImplicitAnyIndexErrors": true,
18 | "noUnusedLocals": false,
19 | "noUnusedParameters": false,
20 | "esModuleInterop": true,
21 | "skipLibCheck": true
22 | },
23 | "include": ["src"],
24 | "exclude": ["node_modules", "build", "dist", "example", "rollup.config.js", "src/stories/*"]
25 | }
26 |
--------------------------------------------------------------------------------
/tsconfig.test.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "module": "commonjs"
5 | }
6 | }
7 |
--------------------------------------------------------------------------------