├── .travis.yml ├── src ├── index.ts └── Skycons.tsx ├── cspell.json ├── babel.config.js ├── rollup.config.js ├── .gitignore ├── tsconfig.json ├── tests └── Skycons.spec.tsx ├── LICENSE ├── README.md └── package.json /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '10' 4 | script: 5 | - npm test 6 | install: 7 | - yarn 8 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import Skycons, { SkyconsType } from './Skycons' 2 | export { Skycons, SkyconsType } 3 | export type { SkyconsProps } from './Skycons' 4 | export default Skycons 5 | -------------------------------------------------------------------------------- /cspell.json: -------------------------------------------------------------------------------- 1 | // cSpell Settings 2 | { 3 | "version": "0.1", 4 | "language": "en", 5 | "words": [ 6 | "skycons", 7 | "skycon", 8 | "globalthis" 9 | ] 10 | } -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | '@babel/preset-react', 6 | ], 7 | } 8 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import typescript from '@rollup/plugin-typescript' 2 | 3 | export default { 4 | input: 'src/index.ts', 5 | output: { 6 | dir: 'lib', 7 | format: 'cjs', 8 | }, 9 | plugins: [typescript()], 10 | external: ['react'], 11 | } 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | /lib 14 | 15 | # misc 16 | .DS_Store 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | .eslintcache 26 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "lib", 4 | "target": "es5", 5 | "lib": ["dom", "dom.iterable", "esnext"], 6 | "allowJs": true, 7 | "skipLibCheck": true, 8 | "esModuleInterop": true, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": false, 17 | "declaration": true, 18 | "jsx": "react", 19 | "rootDir": "src" 20 | }, 21 | "include": ["src"], 22 | "exclude": ["lib"] 23 | } 24 | -------------------------------------------------------------------------------- /tests/Skycons.spec.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { render, screen } from '@testing-library/react' 3 | import '@testing-library/jest-dom/extend-expect' 4 | import Skycons, { SkyconsType } from '../src/Skycons' 5 | 6 | it('should render a component', async () => { 7 | render( 8 | 9 | ) 10 | expect(screen.queryByRole('img')).toBeInTheDocument() 11 | }) 12 | 13 | it('should be able to re-render a component', async () => { 14 | const { rerender } = render( 15 | 22 | ) 23 | rerender( 24 | 31 | ) 32 | expect(screen.queryByRole('img')).toBeInTheDocument() 33 | }) 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Steven Fong 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [react-skycons](http://roadmanfong.github.io/react-skycons/) 2 | 3 | skycons as React components 4 | 5 | [![Build Status](https://travis-ci.org/roadmanfong/react-skycons.svg?branch=master)](https://travis-ci.org/roadmanfong/react-skycons) [![npm version](https://img.shields.io/npm/v/react-skycons.svg?style=flat-square)](https://www.npmjs.com/package/react-skycons) [![npm downloads](https://img.shields.io/npm/dm/react-skycons.svg?style=flat-square)](https://www.npmjs.com/package/react-skycons) 6 | 7 | See [Demo](https://codesandbox.io/s/react-skycons-demo-r6309) here 8 | 9 | ## Installation 10 | 11 | Install via [npm](https://www.npmjs.com/package/react-skycons) 12 | 13 | ```cli 14 | $ yarn add react-skycons 15 | ``` 16 | 17 | ## Quick Example 18 | 19 | ```js 20 | import React from 'react' 21 | import Skycons, { SkyconsType } from 'react-skycons' 22 | 23 | function Demo() { 24 | const svgProps = { 25 | style: { backgroundColor: 'blue' }, 26 | } 27 | 28 | return ( 29 | 37 | ) 38 | } 39 | ``` 40 | 41 | ## Build 42 | 43 | ```cli 44 | yarn run build 45 | ``` 46 | 47 | ## Author 48 | 49 | Fong Kuanghuei(waneblade@gmail.com) 50 | 51 | ## License 52 | 53 | MIT 54 | -------------------------------------------------------------------------------- /src/Skycons.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef } from 'react' 2 | const globalThis = require('globalthis')() 3 | const Skycons = require('skycons')(globalThis) 4 | 5 | export enum SkyconsType { 6 | CLEAR_DAY = 'CLEAR_DAY', 7 | CLEAR_NIGHT = 'CLEAR_NIGHT', 8 | PARTLY_CLOUDY_DAY = 'PARTLY_CLOUDY_DAY', 9 | PARTLY_CLOUDY_NIGHT = 'PARTLY_CLOUDY_NIGHT', 10 | CLOUDY = 'CLOUDY', 11 | RAIN = 'RAIN', 12 | SLEET = 'SLEET', 13 | SNOW = 'SNOW', 14 | WIND = 'WIND', 15 | FOG = 'FOG', 16 | } 17 | 18 | export interface SkyconsProps 19 | extends React.DetailedHTMLProps< 20 | React.CanvasHTMLAttributes, 21 | HTMLCanvasElement 22 | > { 23 | color?: string 24 | animate?: boolean 25 | resizeClear?: boolean 26 | type: SkyconsType 27 | size?: number 28 | } 29 | 30 | export default function SkyconsComponent(props: SkyconsProps) { 31 | const { 32 | color, 33 | animate = true, 34 | resizeClear, 35 | type, 36 | style, 37 | size = 24, 38 | ...restPops 39 | } = props 40 | 41 | const canvasRef = useRef(null) 42 | useEffect(() => { 43 | const skycons = new Skycons({ 44 | color, 45 | resizeClear, 46 | }) 47 | 48 | skycons.add(canvasRef.current, Skycons[type]) 49 | if (animate) { 50 | skycons.play() 51 | } 52 | return () => { 53 | skycons.pause() 54 | skycons.remove() 55 | } 56 | }, [animate, color, type, resizeClear]) 57 | 58 | return ( 59 | 72 | ) 73 | } 74 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-skycons", 3 | "version": "0.8.8", 4 | "description": "skycons", 5 | "main": "lib/index.js", 6 | "types": "lib/index.d.ts", 7 | "files": [ 8 | "lib" 9 | ], 10 | "author": "Fong Kuanghui ", 11 | "bugs": { 12 | "url": "https://github.com/roadmanfong/react-skycons/issues" 13 | }, 14 | "keywords": [ 15 | "react", 16 | "react-component", 17 | "skycons" 18 | ], 19 | "sideEffects": false, 20 | "license": "MIT", 21 | "repository": { 22 | "type": "git", 23 | "url": "https://github.com/roadmanfong/react-skycons.git" 24 | }, 25 | "dependencies": { 26 | "globalthis": "^1.0.1", 27 | "skycons": "^1.0.0" 28 | }, 29 | "peerDependencies": { 30 | "react": ">=16.8.0" 31 | }, 32 | "prettier": { 33 | "semi": false, 34 | "trailingComma": "es5", 35 | "singleQuote": true, 36 | "jsxBracketSameLine": true, 37 | "tabWidth": 2, 38 | "printWidth": 80 39 | }, 40 | "jest": { 41 | "testPathIgnorePatterns": [ 42 | "/node_modules/", 43 | "jest", 44 | "scripts" 45 | ], 46 | "coverageDirectory": "./coverage/", 47 | "collectCoverage": true, 48 | "coverageReporters": [ 49 | "json", 50 | "html", 51 | "text", 52 | "text-summary" 53 | ], 54 | "collectCoverageFrom": [ 55 | "src/**/*.{js,ts,tsx}", 56 | "tests/**/*.{js,ts,tsx}" 57 | ] 58 | }, 59 | "devDependencies": { 60 | "@babel/core": "^7.11.6", 61 | "@babel/preset-env": "^7.11.5", 62 | "@babel/preset-react": "^7.10.4", 63 | "@babel/preset-typescript": "^7.10.4", 64 | "@rollup/plugin-typescript": "^5.0.2", 65 | "@testing-library/jest-dom": "^5.11.4", 66 | "@testing-library/react": "^11.0.2", 67 | "@types/jest": "^26.0.13", 68 | "@types/node": "^12.0.0", 69 | "@types/react": "^16.9.0", 70 | "@types/react-dom": "^16.9.0", 71 | "@typescript-eslint/eslint-plugin": "2.x", 72 | "@typescript-eslint/parser": "2.x", 73 | "babel-eslint": "10.x", 74 | "babel-jest": "^26.3.0", 75 | "babel-loader": "^8.1.0", 76 | "babel-plugin-named-asset-import": "^0.3.6", 77 | "canvas": "^2.6.1", 78 | "cspell": "^4.1.0", 79 | "eslint": "6.x", 80 | "eslint-config-react-app": "^5.2.1", 81 | "eslint-plugin-flowtype": "4.x", 82 | "eslint-plugin-import": "2.x", 83 | "eslint-plugin-jsx-a11y": "6.x", 84 | "eslint-plugin-react": "7.x", 85 | "eslint-plugin-react-hooks": "^4.1.2", 86 | "husky": "^4.2.5", 87 | "jest": "^26.4.2", 88 | "jest-environment-jsdom-sixteen": "^1.0.3", 89 | "lint-staged": ">=10", 90 | "prettier": "^2.1.1", 91 | "react": "^16.13.1", 92 | "react-dom": "^16.13.1", 93 | "react-scripts": "3.4.3", 94 | "rimraf": "^3.0.2", 95 | "rollup": "^2.26.9", 96 | "tslib": "^2.0.1", 97 | "typescript": "^4.0.2" 98 | }, 99 | "scripts": { 100 | "clean": "rimraf lib", 101 | "format": "eslint 'src/**/*.{js,ts,tsx}' --quiet --fix && prettier --write .", 102 | "lint": "tsc --project tsconfig.json --noEmit && eslint 'src/**/*.{js,ts,tsx}' && cspell 'src/**/*.{js,ts,tsx}'", 103 | "test": "jest --env=jest-environment-jsdom-sixteen", 104 | "build": "rollup -c", 105 | "prepublishOnly": "npm run build" 106 | }, 107 | "eslintConfig": { 108 | "extends": [ 109 | "react-app", 110 | "plugin:react-hooks/recommended" 111 | ] 112 | }, 113 | "browserslist": { 114 | "production": [ 115 | ">0.2%", 116 | "not dead", 117 | "not op_mini all" 118 | ], 119 | "development": [ 120 | "last 1 chrome version", 121 | "last 1 firefox version", 122 | "last 1 safari version" 123 | ] 124 | }, 125 | "husky": { 126 | "hooks": { 127 | "pre-commit": "lint-staged" 128 | } 129 | }, 130 | "lint-staged": { 131 | "*.{js,ts,tsx}": "eslint --cache --fix", 132 | "*.{js,ts,tsx,css,md}": "prettier --write" 133 | } 134 | } 135 | --------------------------------------------------------------------------------