├── .DS_Store ├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── babel.config.js ├── config ├── webpack.config.dev.js ├── webpack.config.js └── webpack.config.prod.js ├── dist └── lib │ └── cyberpunk-react.js ├── jest.config.js ├── package.json ├── public └── index.html ├── src ├── components │ ├── Button │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── button.unit.tsx.snap │ │ │ └── button.unit.tsx │ │ └── index.tsx │ └── Icon │ │ └── index.tsx ├── index.d.ts ├── index.tsx └── types │ └── custom.d.ts ├── tests └── setupTests.js ├── tsconfig.json ├── tsconfig.test.json └── yarn.lock /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cyberpunk-ui/cyberpunk-react/9302baf437a3618d1cabc2f71b476bde3cf2584f/.DS_Store -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | 63 | # custome 64 | dist/ 65 | .vscode/ 66 | .idea/ 67 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## 0.0.1 (2020-08-22) 2 | 3 | 4 | ### Features 5 | 6 | * add button component & unit test demo. ([4173021](https://github.com/cyberpunk-ui/cyberpunk-react/commit/4173021b9569c5045220b976b47a810b9e69773b)) 7 | * add changelog flow. ([dfc9d0f](https://github.com/cyberpunk-ui/cyberpunk-react/commit/dfc9d0f0e29229764eca117a4e4953647c167bc3)) 8 | * add webpack & typescript config. ([67afac0](https://github.com/cyberpunk-ui/cyberpunk-react/commit/67afac00cdd35fe7b918bfb91d9b7abaa20eaa08)) 9 | * add jest test config. ([67afac0](https://github.com/cyberpunk-ui/cyberpunk-react/commit/af7eace1487201d586f305b2e1de9d5a465ede68)) 10 | 11 | 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Cyberpunk-UI 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 | # cyberpunk-react 2 | cyberpunk-ui base React 3 | 4 | ### In development, Coming soon... 5 | 6 | 7 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@babel/preset-env', '@babel/preset-react'] 3 | } 4 | -------------------------------------------------------------------------------- /config/webpack.config.dev.js: -------------------------------------------------------------------------------- 1 | const base = require('./webpack.config') 2 | const path = require('path') 3 | const HtmlWebpackPlugin = require('html-webpack-plugin') 4 | 5 | module.exports = Object.assign({}, base, { 6 | mode: 'development', 7 | plugins: [ 8 | new HtmlWebpackPlugin({ 9 | title: "Cyberpunk-React", 10 | template: path.resolve(__dirname, '../public/index.html') 11 | }) 12 | ], 13 | }) 14 | -------------------------------------------------------------------------------- /config/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | module.exports = { 4 | entry: { 5 | 'cyberpunk-react': path.resolve(__dirname, '../src/index.tsx') 6 | }, 7 | output: { 8 | path: path.resolve(__dirname, '../dist/lib'), 9 | library: 'cyberpunk-react', 10 | libraryTarget: 'umd', 11 | }, 12 | resolve: { 13 | extensions: ['.ts', '.tsx', '.js', '.jsx'] 14 | }, 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.tsx?$/, 19 | loader: 'awesome-typescript-loader', 20 | }, 21 | { 22 | test: /\.svg?$/, 23 | loader: 'svg-sprite-loader', 24 | }, 25 | ] 26 | }, 27 | } 28 | -------------------------------------------------------------------------------- /config/webpack.config.prod.js: -------------------------------------------------------------------------------- 1 | const base = require('./webpack.config') 2 | 3 | module.exports = Object.assign({}, base, { 4 | mode: 'production', 5 | externals: { 6 | react: { 7 | commonjs: 'react', 8 | commonjs2: 'react', 9 | amd: 'react', 10 | root: 'React', 11 | }, 12 | 'react-dom': { 13 | commonjs: 'react-dom', 14 | commonjs2: 'react-dom', 15 | amd: 'react-dom', 16 | root: 'ReactDOM', 17 | }, 18 | } 19 | }) 20 | -------------------------------------------------------------------------------- /dist/lib/cyberpunk-react.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):"object"==typeof exports?exports["cyberpunk-react"]=t(require("react"),require("react-dom")):e["cyberpunk-react"]=t(e.React,e.ReactDOM)}(window,(function(e,t){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=2)}([function(t,r){t.exports=e},function(e,r){e.exports=t},function(e,t,r){"use strict";r.r(t);var n=r(0),o=r.n(n),u=r(1);var c=function(){return o.a.createElement("div",null,"Button")};r.n(u).a.render(o.a.createElement(c,null),document.body)}])})); -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | // https://jestjs.io/docs/en/configuration.html 2 | 3 | module.exports = { 4 | verbose: true, 5 | clearMocks: false, 6 | collectCoverage: false, 7 | reporters: ["default"], 8 | moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'], 9 | moduleDirectories: ['node_modules'], 10 | globals: { 11 | 'ts-jest': { 12 | tsConfig: 'tsconfig.test.json', 13 | }, 14 | }, 15 | moduleNameMapper: { 16 | "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/test/__mocks__/file-mock.js", 17 | }, 18 | testMatch: ['/**/__tests__/**/*.unit.(js|jsx|ts|tsx)'], 19 | transform: { 20 | "^.+unit\\.(js|jsx)$": "babel-jest", 21 | '^.+\\.(ts|tsx)$': 'ts-jest', 22 | }, 23 | setupFilesAfterEnv: ["tests/setupTests.js"] 24 | } 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cyberpunk-react", 3 | "version": "0.0.1", 4 | "description": "cyberpunk-ui base React", 5 | "main": "dist/lib/cyberpunk-react.js", 6 | "types": "dist/lib/cyberpunk-react.d.ts", 7 | "scripts": { 8 | "start": "npm run dev", 9 | "dev": "cross-env NODE_ENV=development webpack-dev-server --config ./config/webpack.config.dev.js", 10 | "build": "cross-env NODE_ENV=production webpack --config ./config/webpack.config.prod.js", 11 | "test": "cross-env NODE_ENV=test jest --config jest.config.js --runInBand", 12 | "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/cyberpunk-ui/cyberpunk-react.git" 17 | }, 18 | "keywords": [ 19 | "React", 20 | "react-ui", 21 | "cuberpunk", 22 | "ui", 23 | "ui-library" 24 | ], 25 | "author": "Evan Yan", 26 | "license": "MIT", 27 | "bugs": { 28 | "url": "https://github.com/cyberpunk-ui/cyberpunk-react/issues" 29 | }, 30 | "homepage": "https://github.com/cyberpunk-ui/cyberpunk-react#readme", 31 | "devDependencies": { 32 | "@babel/preset-env": "^7.11.0", 33 | "@babel/preset-react": "^7.10.4", 34 | "@types/jest": "^26.0.10", 35 | "@types/react": "^16.9.46", 36 | "@types/react-dom": "^16.9.8", 37 | "@types/react-test-renderer": "^16.9.3", 38 | "awesome-typescript-loader": "^5.2.1", 39 | "babel-jest": "^26.3.0", 40 | "conventional-changelog-cli": "^2.1.0", 41 | "cross-env": "^7.0.2", 42 | "cz-conventional-changelog": "^3.2.0", 43 | "html-webpack-plugin": "^4.3.0", 44 | "jest": "^26.4.2", 45 | "react": "^16.13.1", 46 | "react-dom": "^16.13.1", 47 | "react-test-renderer": "^16.13.1", 48 | "svg-sprite-loader": "^5.0.0", 49 | "ts-jest": "^26.2.0", 50 | "typescript": "^4.0.2", 51 | "webpack": "^4.44.1", 52 | "webpack-cli": "^3.3.12", 53 | "webpack-dev-server": "^3.11.0" 54 | }, 55 | "config": { 56 | "commitizen": { 57 | "path": "./node_modules/cz-conventional-changelog" 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /src/components/Button/__tests__/__snapshots__/button.unit.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`button test button is div 1`] = ` 4 |
5 | Button 6 |
7 | `; 8 | -------------------------------------------------------------------------------- /src/components/Button/__tests__/button.unit.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import renderer from 'react-test-renderer'; 3 | import Button from '../index'; 4 | 5 | describe('button test', () => { 6 | it('button is div', () => { 7 | const json = renderer.create(