├── .gitignore ├── src ├── .eslintrc ├── test │ └── Orbit.spec.tsx ├── typings.d.ts ├── components │ ├── ReactOrbits │ │ └── index.tsx │ ├── Nucleus │ │ └── index.tsx │ ├── Planet │ │ └── index.tsx │ └── Orbit │ │ └── index.tsx ├── styles.css ├── index.tsx ├── helpers.ts ├── stories │ ├── assets │ │ ├── direction.svg │ │ ├── flow.svg │ │ ├── code-brackets.svg │ │ ├── comments.svg │ │ ├── repo.svg │ │ ├── plugin.svg │ │ ├── stackalt.svg │ │ └── colors.svg │ ├── Planet.stories.tsx │ ├── Nucleus.stories.tsx │ ├── ReactOrbits.stories.tsx │ ├── Orbit.stories.tsx │ └── Introduction.stories.mdx └── types.ts ├── .eslintignore ├── assets ├── example.png └── output.gif ├── .husky └── pre-commit ├── tsconfig.test.json ├── .editorconfig ├── .storybook ├── preview.js └── main.js ├── .eslintrc ├── tsconfig.json ├── README.md └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .idea 4 | public 5 | -------------------------------------------------------------------------------- /src/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "jest": true 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/ 2 | dist/ 3 | public/ 4 | node_modules/ 5 | .snapshots/ 6 | *.min.js 7 | -------------------------------------------------------------------------------- /assets/example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1pedro/react-orbits/HEAD/assets/example.png -------------------------------------------------------------------------------- /assets/output.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1pedro/react-orbits/HEAD/assets/output.gif -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | yarn run validate 5 | -------------------------------------------------------------------------------- /tsconfig.test.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "module": "commonjs" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/test/Orbit.spec.tsx: -------------------------------------------------------------------------------- 1 | import Orbit from '../components/Orbit'; 2 | 3 | describe('Orbit', () => { 4 | it('is truthy', () => { 5 | expect(Orbit).toBeTruthy(); 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.storybook/preview.js: -------------------------------------------------------------------------------- 1 | export const parameters = { 2 | actions: { argTypesRegex: "^on[A-Z].*" }, 3 | controls: { 4 | matchers: { 5 | color: /(background|color)$/i, 6 | date: /Date$/, 7 | }, 8 | }, 9 | } -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "stories": [ 3 | "../src/**/*.stories.mdx", 4 | "../src/**/*.stories.@(js|jsx|ts|tsx)" 5 | ], 6 | "addons": [ 7 | "@storybook/addon-links", 8 | "@storybook/addon-essentials", 9 | "@storybook/addon-interactions" 10 | ], 11 | "framework": "@storybook/react", 12 | "core": { 13 | "builder": "@storybook/builder-webpack5" 14 | } 15 | } -------------------------------------------------------------------------------- /src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Default CSS definition for typescript, 3 | * will be overridden with file-specific definitions by rollup 4 | */ 5 | declare module '*.css' { 6 | const content: { [className: string]: string }; 7 | export default content; 8 | } 9 | 10 | type SvgrComponent = React.FunctionComponent>; 11 | 12 | declare module '*.svg' { 13 | const svgUrl: string; 14 | const svgComponent: SvgrComponent; 15 | export default svgUrl; 16 | export { svgComponent as ReactComponent }; 17 | } 18 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "@typescript-eslint/parser", 3 | "extends": ["@1pedro/eslint-config"], 4 | "env": { 5 | "node": true 6 | }, 7 | "parserOptions": { 8 | "ecmaVersion": 2020, 9 | "ecmaFeatures": { 10 | "legacyDecorators": true, 11 | "jsx": true 12 | } 13 | }, 14 | "settings": { 15 | "react": { 16 | "version": "16" 17 | } 18 | }, 19 | "rules": { 20 | "space-before-function-paren": 0, 21 | "react/prop-types": 0, 22 | "react/jsx-handler-names": 0, 23 | "react/jsx-fragments": 0, 24 | "react/no-unused-prop-types": 0, 25 | "import/export": 0 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@1pedro/tsconfig", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "module": "esnext", 6 | "lib": ["dom", "esnext"], 7 | "moduleResolution": "node", 8 | "jsx": "react", 9 | "sourceMap": true, 10 | "declaration": true, 11 | "esModuleInterop": true, 12 | "noImplicitReturns": true, 13 | "noImplicitThis": true, 14 | "noImplicitAny": true, 15 | "strictNullChecks": true, 16 | "suppressImplicitAnyIndexErrors": true, 17 | "noUnusedLocals": true, 18 | "noUnusedParameters": true, 19 | "allowSyntheticDefaultImports": true 20 | }, 21 | "include": ["src"], 22 | "exclude": ["node_modules", "dist", "example"] 23 | } 24 | -------------------------------------------------------------------------------- /src/components/ReactOrbits/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { getSpecificChild } from '../../helpers'; 4 | import { ReactOrbitsConfig } from '../../types'; 5 | 6 | function ReactOrbits({ children, firstOrbitDiameter, marginBetweenOrbits }: ReactOrbitsConfig) { 7 | const Orbits: JSX.Element[] = getSpecificChild(children, ['Orbit'], 'ReactPlanet'); 8 | 9 | return ( 10 | 11 | {Orbits.map((o, i) => { 12 | return React.cloneElement(o, { 13 | size: firstOrbitDiameter, 14 | marginSpace: marginBetweenOrbits, 15 | index: i, 16 | key: i, 17 | }); 18 | })} 19 | 20 | ); 21 | } 22 | 23 | export default ReactOrbits; 24 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | /* add css module styles here (optional) */ 2 | 3 | .atom-nucleus { 4 | background-color: #38b6ff; 5 | border-radius: 50%; 6 | left: 50%; 7 | position: absolute; 8 | top: 50%; 9 | } 10 | 11 | .electron { 12 | background-color: white; 13 | border-radius: 50px; 14 | left: 50%; 15 | position: absolute; 16 | top: 0%; 17 | } 18 | 19 | .planet-cyan { 20 | background-color: cyan !important; 21 | } 22 | 23 | .nice-shadow { 24 | box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; 25 | } 26 | 27 | .atom-orbit { 28 | border-radius: 50%; 29 | position: absolute; 30 | } 31 | 32 | @keyframes spin-right { 33 | 100% { 34 | -webkit-transform: rotate(360deg); 35 | } 36 | } 37 | 38 | @keyframes spin-left { 39 | 100% { 40 | -webkit-transform: rotate(-360deg); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import Nucleus from './components/Nucleus'; 4 | import Orbit from './components/Orbit'; 5 | import Planet from './components/Planet'; 6 | import ReactOrbits from './components/ReactOrbits'; 7 | 8 | function ExampleComponent() { 9 | return ( 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ); 21 | } 22 | 23 | export { Nucleus, ReactOrbits, Orbit, Planet, ExampleComponent }; 24 | -------------------------------------------------------------------------------- /src/helpers.ts: -------------------------------------------------------------------------------- 1 | export function getSpecificChild( 2 | childs: JSX.Element | JSX.Element[] | undefined, 3 | allowedTypes: string[], 4 | parent: string, 5 | ): JSX.Element[] { 6 | if (!childs) { 7 | return []; 8 | } 9 | 10 | if (isElement(childs) && allowedTypes.includes(childs.type.name)) { 11 | return [childs]; 12 | } else if (isElement(childs) && allowedTypes.includes(childs.type.name)) { 13 | return []; 14 | } 15 | 16 | const hasNoSpecificChilds = 17 | Array.isArray(childs) && childs.some(c => !allowedTypes.includes(c.type.name)); 18 | 19 | if (hasNoSpecificChilds) { 20 | console.error(` ${parent} expect receive only ${allowedTypes.join(', ')}.`); 21 | 22 | return []; 23 | } 24 | 25 | if (Array.isArray(childs) && childs.every(c => allowedTypes.includes(c.type.name))) { 26 | return childs; 27 | } 28 | 29 | return []; 30 | } 31 | 32 | function isElement(e: any): e is JSX.Element { 33 | return e && !Array.isArray(e); 34 | } 35 | -------------------------------------------------------------------------------- /src/components/Nucleus/index.tsx: -------------------------------------------------------------------------------- 1 | import '../../styles.css'; 2 | 3 | import React from 'react'; 4 | 5 | import { NucleoProps } from '../../types'; 6 | 7 | function Nucleus({ 8 | animationSpeedInSeconds = 2, 9 | backgroundColor = 'red', 10 | backgroundImageURL, 11 | className, 12 | shouldSpin = true, 13 | size = 20, 14 | spin = 'left', 15 | }: NucleoProps) { 16 | const margin = (size / 2) * -1; 17 | const oppositeDirection = spin === 'left' ? 'right' : 'left'; 18 | 19 | return ( 20 |
38 | ); 39 | } 40 | 41 | export default Nucleus; 42 | -------------------------------------------------------------------------------- /src/stories/assets/direction.svg: -------------------------------------------------------------------------------- 1 | illustration/direction -------------------------------------------------------------------------------- /src/stories/assets/flow.svg: -------------------------------------------------------------------------------- 1 | illustration/flow -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Orbits 2 | 3 | > Create beautiful Orbit Components with React 4 | 5 | ![Orbit](assets/output.gif) 6 | 7 | [![NPM](https://img.shields.io/npm/v/react-orbits.svg)](https://www.npmjs.com/package/react-orbits) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-airbnb-brightgreen.svg)](https://airbnb.io/javascript/react/) 8 | 9 | ## [DEMO](https://1pedro.github.io/react-orbits/?path=/story/example-reactorbits--multiple-orbits) 10 | 11 | ## Install 12 | 13 | ```bash 14 | npm install --save react-orbits 15 | ``` 16 | 17 | ## Usage 18 | 19 | ```tsx 20 | import React, { Component } from 'react'; 21 | 22 | import ReactOrbits from 'react-orbits'; 23 | import 'react-orbits/dist/index.css'; 24 | 25 | class Example extends Component { 26 | render() { 27 | return ( 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | ) 39 | } 40 | } 41 | ``` 42 | 43 | ## License 44 | 45 | MIT © [1pedro](https://github.com/1pedro) 46 | -------------------------------------------------------------------------------- /src/stories/assets/code-brackets.svg: -------------------------------------------------------------------------------- 1 | illustration/code-brackets -------------------------------------------------------------------------------- /src/stories/assets/comments.svg: -------------------------------------------------------------------------------- 1 | illustration/comments -------------------------------------------------------------------------------- /src/stories/assets/repo.svg: -------------------------------------------------------------------------------- 1 | illustration/repo -------------------------------------------------------------------------------- /src/stories/Planet.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentMeta, ComponentStory } from '@storybook/react'; 3 | 4 | import Planet from '../components/Planet'; 5 | import { PlanetPropsConfig } from '../types'; 6 | 7 | export default { 8 | title: 'Example/Planet', 9 | component: Planet, 10 | argTypes: { 11 | borderSize: { control: false }, 12 | planetIndex: { control: false }, 13 | backgroundColor: { control: 'color' }, 14 | }, 15 | } as ComponentMeta; 16 | 17 | // eslint-disable-next-line react/function-component-definition 18 | const Template: ComponentStory = (args: PlanetPropsConfig) => ( 19 |
20 | ; 21 |
22 | ); 23 | 24 | export const Colored = Template.bind({}); 25 | Colored.args = { 26 | size: 40, 27 | backgroundColor: 'red', 28 | }; 29 | 30 | export const WithBackgroundImage = Template.bind({}); 31 | WithBackgroundImage.args = { 32 | size: 40, 33 | backgroundImageURL: 34 | 'https://lh3.googleusercontent.com/StND2cg3sSbR6l-AHr3VdxKziIhEP4kYHQiTppD-aKc6gwn7PVdht1YqzjWSmwf5JLWf=w200-rwa', 35 | spin: 'no-spin', 36 | }; 37 | 38 | export const WithAnimation = Template.bind({}); 39 | WithAnimation.args = { 40 | size: 40, 41 | backgroundImageURL: 42 | 'https://lh3.googleusercontent.com/StND2cg3sSbR6l-AHr3VdxKziIhEP4kYHQiTppD-aKc6gwn7PVdht1YqzjWSmwf5JLWf=w200-rwa', 43 | spin: 'left', 44 | animationSpeedInSeconds: 5, 45 | }; 46 | 47 | export const WithCustomCSSClasses = Template.bind({}); 48 | WithCustomCSSClasses.args = { 49 | className: 'planet-cyan nice-shadow', 50 | size: 40, 51 | }; 52 | -------------------------------------------------------------------------------- /src/components/Planet/index.tsx: -------------------------------------------------------------------------------- 1 | import '../../styles.css'; 2 | 3 | import React from 'react'; 4 | 5 | import { PlanetProps, PlanetPropsConfig } from '../../types'; 6 | 7 | function Planet(props: PlanetProps | PlanetPropsConfig) { 8 | const { 9 | animationSpeedInSeconds = 5, 10 | backgroundColor = 'blue', 11 | backgroundImageURL, 12 | borderColor, 13 | borderStyle, 14 | borderWidth, 15 | className, 16 | degrees, 17 | padding, 18 | shouldSpin = true, 19 | size, 20 | } = props; 21 | 22 | const spin = (props as PlanetPropsConfig).spin || 'right'; 23 | const borderSize = (props as PlanetProps).borderSize || 0; 24 | const oppositeDirection = spin === 'left' ? 'right' : 'left'; 25 | const margin = ((size / 20) * 10 + borderSize / 2) * -1; 26 | const bg = backgroundImageURL 27 | ? { backgroundImage: `url('${backgroundImageURL}')` } 28 | : { backgroundColor }; 29 | 30 | const degreesInverse = Number(degrees) * -1; 31 | 32 | return ( 33 |
54 | ); 55 | } 56 | 57 | export default Planet; 58 | -------------------------------------------------------------------------------- /src/stories/Nucleus.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/function-component-definition */ 2 | import React from 'react'; 3 | import { ComponentMeta, ComponentStory } from '@storybook/react'; 4 | 5 | import Nucleus from '../components/Nucleus'; 6 | 7 | export default { 8 | title: 'Example/Nucleus', 9 | component: Nucleus, 10 | argTypes: {}, 11 | subcomponents: { Nucleus }, 12 | parameters: { 13 | layout: 'centered', 14 | }, 15 | } as ComponentMeta; 16 | 17 | function Container({ children }: { children: JSX.Element | JSX.Element[] }) { 18 | return
{children}
; 19 | } 20 | 21 | const Template: ComponentStory = (args: any) => ( 22 | 23 | 24 | 25 | ); 26 | 27 | export const Colored = Template.bind({}); 28 | Colored.args = { 29 | size: 100, 30 | backgroundColor: '#95abd5', 31 | }; 32 | 33 | export const WithBackgroundImage = Template.bind({}); 34 | WithBackgroundImage.args = { 35 | size: 100, 36 | spin: 'no-spin', 37 | backgroundImageURL: 38 | 'https://lh3.googleusercontent.com/StND2cg3sSbR6l-AHr3VdxKziIhEP4kYHQiTppD-aKc6gwn7PVdht1YqzjWSmwf5JLWf=w200-rwa', 39 | }; 40 | 41 | export const Spin = Template.bind({}); 42 | Spin.args = { 43 | size: 100, 44 | backgroundImageURL: 45 | 'https://lh3.googleusercontent.com/StND2cg3sSbR6l-AHr3VdxKziIhEP4kYHQiTppD-aKc6gwn7PVdht1YqzjWSmwf5JLWf=w200-rwa', 46 | }; 47 | 48 | export const WithCustomClasses = Template.bind({}); 49 | WithCustomClasses.args = { 50 | size: 100, 51 | className: 'nice-shadow', 52 | backgroundImageURL: 53 | 'https://lh3.googleusercontent.com/StND2cg3sSbR6l-AHr3VdxKziIhEP4kYHQiTppD-aKc6gwn7PVdht1YqzjWSmwf5JLWf=w200-rwa', 54 | }; 55 | -------------------------------------------------------------------------------- /src/types.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Orbit from './components/Orbit'; 4 | 5 | export type Spin = 'right' | 'left' | 'no-spin'; 6 | 7 | export interface NucleusPropsConfig { 8 | animationSpeedInSeconds?: number; 9 | backgroundColor?: string; 10 | backgroundImageURL?: string; 11 | className?: string; 12 | margin?: number; 13 | shouldSpin?: boolean; 14 | size: number; 15 | } 16 | 17 | export interface NucleoProps extends NucleusPropsConfig { 18 | animationSpeedInSeconds?: number; 19 | spin?: Spin; 20 | } 21 | 22 | export interface PlanetPropsConfig { 23 | animationSpeedInSeconds?: number; 24 | backgroundColor?: string; 25 | backgroundImageURL?: string; 26 | borderColor?: string; 27 | borderStyle?: string; 28 | borderWidth?: number; 29 | className?: string; 30 | degrees?: number; 31 | margin?: number; 32 | padding?: number; 33 | shouldSpin?: boolean; 34 | size: number; 35 | spin?: Spin; 36 | } 37 | 38 | export interface PlanetProps extends PlanetPropsConfig { 39 | borderSize?: number; 40 | planetIndex?: number; 41 | } 42 | 43 | export interface OrbitProps { 44 | animationSpeedInSeconds?: number; 45 | borderColor?: 'red' | 'green' | 'blue'; 46 | borderSize?: number; 47 | children?: JSX.Element | JSX.Element[]; 48 | degrees?: number; 49 | direction?: Spin; 50 | index?: number; 51 | marginSpace?: number; 52 | nucleus?: NucleusPropsConfig; 53 | planets?: PlanetPropsConfig[]; 54 | size?: number; 55 | useNucleus?: boolean; 56 | } 57 | 58 | type OrbitComponent = React.ReactElement; 59 | 60 | export interface ReactOrbitsConfig { 61 | children: OrbitComponent | OrbitComponent[]; 62 | firstOrbitDiameter: number; 63 | marginBetweenOrbits: number; 64 | nucleus?: NucleusPropsConfig; 65 | } 66 | -------------------------------------------------------------------------------- /src/stories/assets/plugin.svg: -------------------------------------------------------------------------------- 1 | illustration/plugin -------------------------------------------------------------------------------- /src/stories/assets/stackalt.svg: -------------------------------------------------------------------------------- 1 | illustration/stackalt -------------------------------------------------------------------------------- /src/components/Orbit/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { getSpecificChild } from '../../helpers'; 4 | 5 | function OrbitSkeleton({ 6 | animationSpeedInSeconds, 7 | borderColor, 8 | borderSize, 9 | children: child, 10 | className, 11 | degrees, 12 | height, 13 | index: i, 14 | orbitMargin, 15 | spin, 16 | width, 17 | }: any) { 18 | const animation = 19 | spin === 'no-spin' 20 | ? {} 21 | : { 22 | WebkitAnimation: `spin-${spin} ${animationSpeedInSeconds}s linear infinite`, 23 | MozAnimation: `spin-${spin} ${animationSpeedInSeconds}s linear infinite`, 24 | OAnimation: `spin-${spin} ${animationSpeedInSeconds}s linear infinite`, 25 | animation: `spin-${spin} ${animationSpeedInSeconds}s linear infinite`, 26 | }; 27 | 28 | return ( 29 |
46 | {child} 47 |
48 | ); 49 | } 50 | 51 | function Orbit({ 52 | animationSpeedInSeconds = 8, 53 | borderColor = 'red', 54 | borderSize = 2, 55 | children, 56 | className, 57 | degrees = 20, 58 | index = 0, 59 | marginSpace = 0, 60 | size = 10, 61 | spin = 'right', 62 | }: any) { 63 | const childs = getSpecificChild(children, ['Nucleus', 'Planet'], 'Orbit'); 64 | 65 | const Nucleus = childs.find(c => c.type.name === 'Nucleus'); 66 | const nucleus = 67 | Nucleus && 68 | React.cloneElement(Nucleus, { 69 | rotate: '0deg', 70 | spin, 71 | animationSpeedInSeconds, 72 | }); 73 | 74 | const globalMargin = marginSpace * 2; 75 | const width = size + index * globalMargin; 76 | const height = size + index * globalMargin; 77 | const middle = globalMargin / 2; 78 | const base = globalMargin * index * -1; 79 | const margin = base - middle + middle * index; 80 | const orbitMargin = margin - borderSize; 81 | 82 | const Planets = childs.filter(c => c.type.name === 'Planet'); 83 | 84 | const orbitProps = { 85 | animationSpeedInSeconds, 86 | borderColor, 87 | borderSize, 88 | height, 89 | orbitMargin, 90 | spin, 91 | width, 92 | className, 93 | }; 94 | 95 | let output; 96 | 97 | if (Planets.length) { 98 | output = Planets.map((p, i) => { 99 | const orbitDegrees = i * degrees; 100 | 101 | const planet = React.cloneElement(p, { 102 | spin, 103 | animationSpeedInSeconds, 104 | borderSize, 105 | degrees: orbitDegrees, 106 | planetIndex: i, 107 | }); 108 | 109 | return ( 110 | 117 | {i === 0 && nucleus ? nucleus : } 118 | 119 | {planet} 120 | 121 | ); 122 | }); 123 | } else { 124 | output = ( 125 | 126 | {nucleus || } 127 | 128 | ); 129 | } 130 | 131 | return {Planets && output}; 132 | } 133 | 134 | export default Orbit; 135 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-orbits", 3 | "version": "1.0.6", 4 | "description": "React Orbit Component", 5 | "homepage": "https://1pedro.github.io/react-orbits/?path=/story/example-reactorbits--multiple-orbits", 6 | "author": "1pedro", 7 | "license": "MIT", 8 | "repository": { 9 | "type": "git", 10 | "url": "git+https://github.com/1pedro/react-orbits.git" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/1pedro/react-orbits/issues" 14 | }, 15 | "keywords": [ 16 | "react", 17 | "react components", 18 | "react planets", 19 | "react orbit", 20 | "orbits", 21 | "planets" 22 | ], 23 | "main": "dist/index.js", 24 | "module": "dist/index.modern.js", 25 | "source": "src/index.tsx", 26 | "engines": { 27 | "node": ">=10" 28 | }, 29 | "prettier": "@1pedro/prettier-config", 30 | "scripts": { 31 | "build": "microbundle-crl --no-compress --format modern,cjs && cp src/styles.css dist", 32 | "start": "microbundle-crl watch --no-compress --format modern,cjs", 33 | "validate": "run-s lint-fix typecheck test:unit test:lint", 34 | "lint-fix": "eslint . --fix", 35 | "test:lint": "eslint .", 36 | "test:unit": "cross-env CI=1 react-scripts test --env=jsdom", 37 | "test:watch": "react-scripts src/test --env=jsdom", 38 | "typecheck": "tsc --noEmit", 39 | "predeploy": "run-s validate build build-storybook", 40 | "prepublish": "run-s validate", 41 | "deploy": "gh-pages -d ./public", 42 | "storybook": "start-storybook -p 6006 -s public", 43 | "build-storybook": "build-storybook -o ./public", 44 | "husky-install": "husky install" 45 | }, 46 | "peerDependencies": { 47 | "react": "^16.0.0" 48 | }, 49 | "devDependencies": { 50 | "@1pedro/eslint-config": "^0.1.17", 51 | "@1pedro/prettier-config": "^0.1.3", 52 | "@1pedro/tsconfig": "^0.1.3", 53 | "@babel/core": "^7.20.2", 54 | "@babel/eslint-plugin": "^7.19.1", 55 | "@storybook/addon-actions": "^6.5.13", 56 | "@storybook/addon-essentials": "^6.5.13", 57 | "@storybook/addon-interactions": "^6.5.13", 58 | "@storybook/addon-links": "^6.5.13", 59 | "@storybook/builder-webpack5": "^6.5.13", 60 | "@storybook/manager-webpack5": "^6.5.13", 61 | "@storybook/react": "^6.5.13", 62 | "@storybook/testing-library": "^0.0.13", 63 | "@testing-library/jest-dom": "^5.16.5", 64 | "@testing-library/react": "^13.4.0", 65 | "@testing-library/user-event": "^14.4.3", 66 | "@types/jest": "^29.2.3", 67 | "@types/node": "^18.11.9", 68 | "@types/react": "^18.0.25", 69 | "@types/react-dom": "^18.0.9", 70 | "@typescript-eslint/eslint-plugin": "^5.43.0", 71 | "@typescript-eslint/parser": "^5.43.0", 72 | "babel-eslint": "^10.0.3", 73 | "babel-loader": "^8.3.0", 74 | "cross-env": "^7.0.3", 75 | "eslint": "^8.27.0", 76 | "eslint-config-prettier": "^8.5.0", 77 | "eslint-plugin-import": "^2.26.0", 78 | "eslint-plugin-jest": "^27.1.5", 79 | "eslint-plugin-jest-dom": "^4.0.3", 80 | "eslint-plugin-node": "^11.1.0", 81 | "eslint-plugin-prettier": "^4.2.1", 82 | "eslint-plugin-promise": "^6.1.1", 83 | "eslint-plugin-react": "^7.31.10", 84 | "eslint-plugin-simple-import-sort": "^8.0.0", 85 | "eslint-plugin-sort-destructure-keys": "^1.4.0", 86 | "eslint-plugin-testing-library": "^5.9.1", 87 | "eslint-plugin-typescript-sort-keys": "^2.1.0", 88 | "gh-pages": "^4.0.0", 89 | "husky": "^8.0.2", 90 | "lint-staged": "^13.0.3", 91 | "microbundle-crl": "^0.13.11", 92 | "npm-run-all": "^4.1.5", 93 | "prettier": "^2.7.1", 94 | "react": "^18.2.0", 95 | "react-dom": "^18.2.0", 96 | "typescript": "^4.8.4" 97 | }, 98 | "files": [ 99 | "dist" 100 | ], 101 | "dependencies": { 102 | "react-scripts": "^5.0.1" 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /src/stories/ReactOrbits.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/function-component-definition */ 2 | import React from 'react'; 3 | import { ComponentMeta, ComponentStory } from '@storybook/react'; 4 | 5 | import Nucleus from '../components/Nucleus'; 6 | import Orbit from '../components/Orbit'; 7 | import Planet from '../components/Planet'; 8 | import ReactOrbits from '../components/ReactOrbits'; 9 | 10 | export default { 11 | title: 'Example/ReactOrbits', 12 | component: ReactOrbits, 13 | argTypes: {}, 14 | subcomponents: { ReactPlanets: ReactOrbits }, 15 | parameters: { 16 | layout: 'centered', 17 | }, 18 | } as ComponentMeta; 19 | 20 | function Container({ children }: { children: JSX.Element | JSX.Element[] }) { 21 | return
{children}
; 22 | } 23 | 24 | const Template: ComponentStory = (args: any) => ( 25 | 26 | 27 | 28 | ); 29 | 30 | export const SingleOrbit = Template.bind({}); 31 | SingleOrbit.args = { 32 | firstOrbitDiameter: 200, 33 | marginBetweenOrbits: 100, 34 | children: ( 35 | 36 | 37 | 44 | 50 | 51 | 52 | 53 | ), 54 | }; 55 | 56 | export const MultipleOrbits = Template.bind({}); 57 | MultipleOrbits.args = { 58 | firstOrbitDiameter: 200, 59 | marginBetweenOrbits: 40, 60 | children: [ 61 | 62 | 63 | 70 | 76 | 77 | 78 | , 79 | 80 | 81 | 88 | 94 | 95 | 96 | , 97 | ], 98 | }; 99 | 100 | export const SolarSystem = Template.bind({}); 101 | SolarSystem.args = { 102 | firstOrbitDiameter: 120, 103 | marginBetweenOrbits: 30, 104 | children: [ 105 | 106 | 107 | 108 | , 109 | 110 | 111 | 112 | , 113 | 114 | 115 | , 116 | 117 | 118 | 119 | , 120 | 121 | 122 | 123 | , 124 | ], 125 | }; 126 | -------------------------------------------------------------------------------- /src/stories/Orbit.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/function-component-definition */ 2 | import React from 'react'; 3 | import { ComponentMeta, ComponentStory } from '@storybook/react'; 4 | 5 | import Nucleus from '../components/Nucleus'; 6 | import Orbit from '../components/Orbit'; 7 | import Planet from '../components/Planet'; 8 | 9 | export default { 10 | title: 'Example/Orbit', 11 | component: Orbit, 12 | argTypes: {}, 13 | subcomponents: { Planet }, 14 | parameters: { 15 | layout: 'centered', 16 | }, 17 | } as ComponentMeta; 18 | 19 | function Container({ children }: { children: JSX.Element | JSX.Element[] }) { 20 | return
{children}
; 21 | } 22 | 23 | const Template: ComponentStory = (args: any) => ( 24 | 25 | 26 | 27 | ); 28 | 29 | const NucleusTemplate: ComponentStory = (args: any) => ( 30 | 31 | {/* eslint-disable-next-line react/destructuring-assignment */} 32 | {args.children.map((component: JSX.Element) => component)} 33 | 34 | ); 35 | 36 | export const Empty = Template.bind({}); 37 | Empty.args = { 38 | size: 100, 39 | borderColor: '#95abd5', 40 | }; 41 | 42 | export const Static = Template.bind({}); 43 | Static.args = { 44 | size: 100, 45 | spin: 'no-spin', 46 | borderColor: '#95abd5', 47 | children: ( 48 | 53 | ), 54 | }; 55 | 56 | export const WithSpinPlanet = Template.bind({}); 57 | WithSpinPlanet.args = { 58 | size: 100, 59 | borderColor: '#95abd5', 60 | children: ( 61 | 67 | ), 68 | }; 69 | 70 | export const WithStaticPlanet = Template.bind({}); 71 | WithStaticPlanet.args = { 72 | size: 100, 73 | borderColor: '#95abd5', 74 | children: ( 75 | 82 | ), 83 | }; 84 | 85 | export const WithMultiplePlanets = Template.bind({}); 86 | WithMultiplePlanets.args = { 87 | size: 100, 88 | borderColor: '#95abd5', 89 | degrees: 90, 90 | children: [ 91 | , 98 | , 104 | 105 | , 106 | ], 107 | }; 108 | 109 | export const WithNucleus = NucleusTemplate.bind({}); 110 | WithNucleus.args = { 111 | size: 100, 112 | spin: 'right', 113 | borderColor: '#95abd5', 114 | children: [ 115 | , 120 | , 121 | ], 122 | }; 123 | 124 | export const WithSpinNucleus = NucleusTemplate.bind({}); 125 | WithSpinNucleus.args = { 126 | size: 100, 127 | spin: 'right', 128 | borderColor: '#95abd5', 129 | children: [ 130 | , 135 | , 139 | ], 140 | }; 141 | 142 | export const WithStaticNucleus = NucleusTemplate.bind({}); 143 | WithStaticNucleus.args = { 144 | size: 100, 145 | spin: 'right', 146 | borderColor: '#95abd5', 147 | children: [ 148 | , 153 | , 158 | ], 159 | }; 160 | 161 | export const WithCustomClasses = NucleusTemplate.bind({}); 162 | WithCustomClasses.args = { 163 | size: 100, 164 | spin: 'right', 165 | borderColor: '#95abd5', 166 | className: 'nice-shadow', 167 | children: [ 168 | , 173 | , 178 | ], 179 | }; 180 | -------------------------------------------------------------------------------- /src/stories/Introduction.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/addon-docs'; 2 | import Code from './assets/code-brackets.svg'; 3 | import Colors from './assets/colors.svg'; 4 | import Comments from './assets/comments.svg'; 5 | import Direction from './assets/direction.svg'; 6 | import Flow from './assets/flow.svg'; 7 | import Plugin from './assets/plugin.svg'; 8 | import Repo from './assets/repo.svg'; 9 | import StackAlt from './assets/stackalt.svg'; 10 | 11 | 12 | 13 | 116 | 117 | # Welcome to Storybook 118 | 119 | Storybook helps you build UI components in isolation from your app's business logic, data, and context. 120 | That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA. 121 | 122 | Browse example stories now by navigating to them in the sidebar. 123 | View their code in the `stories` directory to learn how they work. 124 | We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages. 125 | 126 |
Configure
127 | 128 | 174 | 175 |
Learn
176 | 177 | 207 | 208 |
209 | TipEdit the Markdown in{' '} 210 | stories/Introduction.stories.mdx 211 |
212 | -------------------------------------------------------------------------------- /src/stories/assets/colors.svg: -------------------------------------------------------------------------------- 1 | illustration/colors --------------------------------------------------------------------------------