diff --git a/packages/hygen-react-component/.babelrc b/packages/hygen-react-component/.babelrc new file mode 100644 index 0000000..e6d1714 --- /dev/null +++ b/packages/hygen-react-component/.babelrc @@ -0,0 +1,25 @@ +{ + "presets": [ + ["@babel/preset-env", + { + "targets": "> 0.25%, not dead" + } + ] + ], + "plugins": [], + "env": { + "test": { + "presets": [ + [ + "@babel/env", + { + "targets": { + "node": "current" + } + } + ] + ], + "compact": false + } + } +} diff --git a/packages/hygen-react-component/CHANGELOG.md b/packages/hygen-react-component/CHANGELOG.md new file mode 100644 index 0000000..44efad6 --- /dev/null +++ b/packages/hygen-react-component/CHANGELOG.md @@ -0,0 +1,4 @@ +--- +menu: "hygen-react-component" +name: Change Log +--- diff --git a/packages/hygen-react-component/LICENSE b/packages/hygen-react-component/LICENSE new file mode 100644 index 0000000..673b421 --- /dev/null +++ b/packages/hygen-react-component/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2019 ` ableneo.com + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/hygen-react-component/README.md b/packages/hygen-react-component/README.md new file mode 100644 index 0000000..608f837 --- /dev/null +++ b/packages/hygen-react-component/README.md @@ -0,0 +1,13 @@ +--- +menu: "hygen-react-component" +name: Readme +--- + +# hygen-react-component + +[![npm version](https://img.shields.io/npm/v/hygen-react-component.svg?style=flat)](https://www.npmjs.com/package/hygen-react-component) +![node](https://img.shields.io/node/v/hygen-react-component.svg) +[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/) +[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier) +[![NPM downloads](https://img.shields.io/npm/dt/@ableneohygen-react-component.svg)](https://www.npmjs.com/package/hygen-react-component) +[![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest) diff --git a/packages/hygen-react-component/_templates/component/getFolderNames.js b/packages/hygen-react-component/_templates/component/getFolderNames.js new file mode 100644 index 0000000..2de7990 --- /dev/null +++ b/packages/hygen-react-component/_templates/component/getFolderNames.js @@ -0,0 +1,11 @@ +const fs = require("fs"); +const getPath = require("./getPath"); + +module.exports = (srcFolderName = "src", options = {getPath}) => { + const srcPath = options.getPath(srcFolderName); + + return fs + .readdirSync(srcPath) + .filter(appFolderName => !appFolderName.includes(".")) + .filter(appFolderName => !appFolderName.includes("build")); +}; diff --git a/packages/hygen-react-component/_templates/component/getPath.js b/packages/hygen-react-component/_templates/component/getPath.js new file mode 100644 index 0000000..bfcade9 --- /dev/null +++ b/packages/hygen-react-component/_templates/component/getPath.js @@ -0,0 +1,5 @@ +const path = require("path"); + +module.exports = (srcFolderName = "src") => { + return path.posix.join(process.cwd(), srcFolderName); +}; diff --git a/packages/hygen-react-component/_templates/component/with-prompt/component.ejs.t b/packages/hygen-react-component/_templates/component/with-prompt/component.ejs.t new file mode 100644 index 0000000..def925c --- /dev/null +++ b/packages/hygen-react-component/_templates/component/with-prompt/component.ejs.t @@ -0,0 +1,37 @@ +--- +to: src/<%= h.changeCase.paramCase(folder) %>/<%= h.changeCase.pascalCase(componentName) %>.tsx +--- +<% + ComponentName = h.changeCase.pascalCase(componentName); +%> +import React from "react"; +import styled from "@emotion/styled"; + +const defaultProps = { + Wrapper: styled("div")` + display: flex; + width: 100%; + `, + Group: styled("div")` + display: flex; + `, +}; + +type Props = Readonly; + +type Children = (props: Props) => JSX.Element; +export const <%= ComponentName %> = ({children, ...props}: {children: Children} & Props) => + children(props); + +<%= ComponentName %>.defaultProps = { + ...defaultProps, + children: ({Wrapper, Group}: Props) => ( + + A + B + C + + ), +}; + +export default <%= ComponentName %>; diff --git a/packages/hygen-react-component/_templates/component/with-prompt/component.test.ejs.t b/packages/hygen-react-component/_templates/component/with-prompt/component.test.ejs.t new file mode 100644 index 0000000..1f7e4e6 --- /dev/null +++ b/packages/hygen-react-component/_templates/component/with-prompt/component.test.ejs.t @@ -0,0 +1,19 @@ +--- +to: src/<%= h.changeCase.paramCase(folder) %>/<%= h.changeCase.pascalCase(componentName) %>.test.tsx +--- +<% + ComponentName = h.changeCase.pascalCase(componentName); +%> +import React from "react"; +import "@testing-library/jest-dom/extend-expect"; +import { render } from "@testing-library/react"; +import <%= ComponentName %> from "./<%= ComponentName %>"; + +describe("<%= ComponentName %>", () => { + it("should render", () => { + const props = {}; + const $ = render(<<%= ComponentName %> {...props} />); + + expect($.container).toBeInTheDocument(); + }); +}); diff --git a/packages/hygen-react-component/_templates/component/with-prompt/prompt.js b/packages/hygen-react-component/_templates/component/with-prompt/prompt.js new file mode 100644 index 0000000..17d2ba9 --- /dev/null +++ b/packages/hygen-react-component/_templates/component/with-prompt/prompt.js @@ -0,0 +1,21 @@ +// see types of prompts: +// https://github.com/enquirer/enquirer/tree/master/examples +// +const getFolderNames = require("../getFolderNames"); + +const folders = getFolderNames(/* default = "src" */); + +module.exports = [ + { + type: "autocomplete", + name: "folder", + message: "Pick folder for the component:", + limit: 10, + choices: folders, + }, + { + type: "input", + name: "componentName", + message: "Name of the component:", + }, +]; diff --git a/packages/hygen-react-component/package.json b/packages/hygen-react-component/package.json new file mode 100644 index 0000000..d76c8bb --- /dev/null +++ b/packages/hygen-react-component/package.json @@ -0,0 +1,46 @@ +{ + "name": "hygen-react-component", + "version": "0.0.0", + "description": "@ableneo/modules/hygen-react-component", + "main": "dist/index.ts", + "types": "dist/index.d.ts", + "author": "Marcel Mokoš ", + "license": "MIT", + "publishConfig": { + "access": "public" + }, + "scripts": { + "test": "react-scripts test --watchAll=false --passWithNoTests", + "test:changed": "yarn test --onlyChanged --passWithNoTests --silent", + "test:watch": "react-scripts test", + "test:update": "yarn test --updateSnapshot", + "test:coverage": "yarn test --coverage --verbose --passWithNoTests --silent", + "lint": "cd ../.. && yarn run lint", + "lint:fix": "cd ../.. && yarn run lint:fix", + "generate:component": "hygen component with-prompt\n" + }, + "dependencies": {}, + "devDependencies": { + "@emotion/core": ">=10.0.0", + "@emotion/styled": ">=10.0.0", + "emotion": ">=10.0.0", + "hygen": "^4.0.9", + "react": ">=16.8.0" + }, + "peerDependencies": { + "@emotion/core": ">=10.0.0", + "@emotion/styled": ">=10.0.0", + "emotion": ">=10.0.0", + "react": ">=16.8.0" + }, + "engines": { + "node": ">=8.10" + }, + "repository": { + "type": "git", + "url": "https://github.com/ableneo/modules/tree/master/packages/hygen-react-component" + }, + "eslintConfig": { + "extends": "eslint-config-ableneo" + } +} diff --git a/packages/hygen-react-component/src/atoms/.gitkeep b/packages/hygen-react-component/src/atoms/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/packages/hygen-react-component/src/getFolderNames.test.js b/packages/hygen-react-component/src/getFolderNames.test.js new file mode 100644 index 0000000..596caaf --- /dev/null +++ b/packages/hygen-react-component/src/getFolderNames.test.js @@ -0,0 +1,11 @@ +import getFolderNames from "../_templates/component/getFolderNames"; + +const path = require("path"); + +it("should return folders", () => { + console.log(path.posix.join(__dirname)); + + expect( + getFolderNames("", {getPath: () => path.posix.join(__dirname)}), + ).toEqual(["atoms", "molecules", "organisms"]); +}); diff --git a/packages/hygen-react-component/src/molecules/.gitkeep b/packages/hygen-react-component/src/molecules/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/packages/hygen-react-component/src/organisms/.gitkeep b/packages/hygen-react-component/src/organisms/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/packages/hygen-react-component/src/react-app-env.d.ts b/packages/hygen-react-component/src/react-app-env.d.ts new file mode 100644 index 0000000..6431bc5 --- /dev/null +++ b/packages/hygen-react-component/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/packages/hygen-react-component/tsconfig.json b/packages/hygen-react-component/tsconfig.json new file mode 100644 index 0000000..af10394 --- /dev/null +++ b/packages/hygen-react-component/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react" + }, + "include": ["src"] +} diff --git a/yarn.lock b/yarn.lock index 8ddf05a..aaf5b59 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1106,12 +1106,43 @@ resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-9.0.1.tgz#c27b391d8457d1e893f1eddeaf5e5412d12ffbb5" integrity sha512-6It2EVfGskxZCQhuykrfnALg7oVeiI6KclWSmGDqB0AiInVrTGB9Jp9i4/Ad21u9Jde/voVQz6eFX/eSg/UsPA== +"@emotion/cache@^10.0.14", "@emotion/cache@^10.0.17": + version "10.0.19" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.19.tgz#d258d94d9c707dcadaf1558def968b86bb87ad71" + integrity sha512-BoiLlk4vEsGBg2dAqGSJu0vJl/PgVtCYLBFJaEO8RmQzPugXewQCXZJNXTDFaRlfCs0W+quesayav4fvaif5WQ== + dependencies: + "@emotion/sheet" "0.9.3" + "@emotion/stylis" "0.8.4" + "@emotion/utils" "0.11.2" + "@emotion/weak-memoize" "0.2.4" + +"@emotion/core@>=10.0.0": + version "10.0.17" + resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.17.tgz#3367376709721f4ee2068cff54ba581d362789d8" + integrity sha512-gykyjjr0sxzVuZBVTVK4dUmYsorc2qLhdYgSiOVK+m7WXgcYTKZevGWZ7TLAgTZvMelCTvhNq8xnf8FR1IdTbg== + dependencies: + "@babel/runtime" "^7.5.5" + "@emotion/cache" "^10.0.17" + "@emotion/css" "^10.0.14" + "@emotion/serialize" "^0.11.10" + "@emotion/sheet" "0.9.3" + "@emotion/utils" "0.11.2" + +"@emotion/css@^10.0.14": + version "10.0.14" + resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.14.tgz#95dacabdd0e22845d1a1b0b5968d9afa34011139" + integrity sha512-MozgPkBEWvorcdpqHZE5x1D/PLEHUitALQCQYt2wayf4UNhpgQs2tN0UwHYS4FMy5ROBH+0ALyCFVYJ/ywmwlg== + dependencies: + "@emotion/serialize" "^0.11.8" + "@emotion/utils" "0.11.2" + babel-plugin-emotion "^10.0.14" + "@emotion/hash@0.7.3": version "0.7.3" resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.3.tgz#a166882c81c0c6040975dd30df24fae8549bd96f" integrity sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw== -"@emotion/is-prop-valid@^0.8.1": +"@emotion/is-prop-valid@0.8.3", "@emotion/is-prop-valid@^0.8.1": version "0.8.3" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.3.tgz#cbe62ddbea08aa022cdf72da3971570a33190d29" integrity sha512-We7VBiltAJ70KQA0dWkdPMXnYoizlxOXpvtjmu5/MBnExd+u0PGgV27WCYanmLAbCwAU30Le/xA0CQs/F/Otig== @@ -1123,7 +1154,7 @@ resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.3.tgz#5b6b1c11d6a6dddf1f2fc996f74cf3b219644d78" integrity sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow== -"@emotion/serialize@^0.11.11": +"@emotion/serialize@^0.11.10", "@emotion/serialize@^0.11.11", "@emotion/serialize@^0.11.8": version "0.11.11" resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.11.tgz#c92a5e5b358070a7242d10508143306524e842a4" integrity sha512-YG8wdCqoWtuoMxhHZCTA+egL0RSGdHEc+YCsmiSBPBEDNuVeMWtjEWtGrhUterSChxzwnWBXvzSxIFQI/3sHLw== @@ -1134,6 +1165,34 @@ "@emotion/utils" "0.11.2" csstype "^2.5.7" +"@emotion/sheet@0.9.3": + version "0.9.3" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.3.tgz#689f135ecf87d3c650ed0c4f5ddcbe579883564a" + integrity sha512-c3Q6V7Df7jfwSq5AzQWbXHa5soeE4F5cbqi40xn0CzXxWW9/6Mxq48WJEtqfWzbZtW9odZdnRAkwCQwN12ob4A== + +"@emotion/styled-base@^10.0.17": + version "10.0.19" + resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.19.tgz#53655274797194d86453354fdb2c947b46032db6" + integrity sha512-Sz6GBHTbOZoeZQKvkE9gQPzaJ6/qtoQ/OPvyG2Z/6NILlYk60Es1cEcTgTkm26H8y7A0GSgp4UmXl+srvsnFPg== + dependencies: + "@babel/runtime" "^7.5.5" + "@emotion/is-prop-valid" "0.8.3" + "@emotion/serialize" "^0.11.11" + "@emotion/utils" "0.11.2" + +"@emotion/styled@>=10.0.0": + version "10.0.17" + resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.17.tgz#0cd38b8b36259541f2c6717fc22607a120623654" + integrity sha512-zHMgWjHDMNjD+ux64POtDnjLAObniu3znxFBLSdV/RiEhSLjHIowfvSbbd/C33/3uwtI6Uzs2KXnRZtka/PpAQ== + dependencies: + "@emotion/styled-base" "^10.0.17" + babel-plugin-emotion "^10.0.17" + +"@emotion/stylis@0.8.4": + version "0.8.4" + resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.4.tgz#6c51afdf1dd0d73666ba09d2eb6c25c220d6fe4c" + integrity sha512-TLmkCVm8f8gH0oLv+HWKiu7e8xmBIaokhxcEKPh1m8pXiV/akCiq50FvYgOwY42rjejck8nsdQxZlXZ7pmyBUQ== + "@emotion/unitless@0.7.4", "@emotion/unitless@^0.7.0": version "0.7.4" resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.4.tgz#a87b4b04e5ae14a88d48ebef15015f6b7d1f5677" @@ -1144,6 +1203,11 @@ resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.2.tgz#713056bfdffb396b0a14f1c8f18e7b4d0d200183" integrity sha512-UHX2XklLl3sIaP6oiMmlVzT0J+2ATTVpf0dHQVyPJHTkOITvXfaSqnRk6mdDhV9pR8T/tHc3cex78IKXssmzrA== +"@emotion/weak-memoize@0.2.4": + version "0.2.4" + resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.4.tgz#622a72bebd1e3f48d921563b4b60a762295a81fc" + integrity sha512-6PYY5DVdAY1ifaQW6XYTnOMihmBVT27elqSjEoodchsGjzYlEsTQMcEhSud99kVawatyTZRTiVkJ/c6lwbQ7nA== + "@evocateur/libnpmaccess@^3.1.2": version "3.1.2" resolved "https://registry.yarnpkg.com/@evocateur/libnpmaccess/-/libnpmaccess-3.1.2.tgz#ecf7f6ce6b004e9f942b098d92200be4a4b1c845" @@ -3414,7 +3478,7 @@ babel-plugin-dynamic-import-node@2.3.0, babel-plugin-dynamic-import-node@^2.3.0: dependencies: object.assign "^4.1.0" -babel-plugin-emotion@^10.0.19: +babel-plugin-emotion@^10.0.14, babel-plugin-emotion@^10.0.17, babel-plugin-emotion@^10.0.19: version "10.0.19" resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.19.tgz#67b9b213f7505c015f163a387a005c12c502b1de" integrity sha512-1pJb5uKN/gx6bi3gGr588Krj49sxARI9KmxhtMUa+NRJb6lR3OfC51mh3NlWRsOqdjWlT4cSjnZpnFq5K3T5ZA== @@ -4953,6 +5017,16 @@ create-ecdh@^4.0.0: bn.js "^4.1.0" elliptic "^6.0.0" +create-emotion@^10.0.14: + version "10.0.14" + resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-10.0.14.tgz#4c140aaef6a9588ed47c926f9c4679e4719be43e" + integrity sha512-5G4naKMxokOur+94eDz7iPKBfwzy4wa/+0isnPhxXyosIQHBq7yvBy4jjdZw/nnRm7G3PM7P9Ug8mUmtoqcaHg== + dependencies: + "@emotion/cache" "^10.0.14" + "@emotion/serialize" "^0.11.8" + "@emotion/sheet" "0.9.3" + "@emotion/utils" "0.11.2" + create-hash@^1.1.0, create-hash@^1.1.2: version "1.2.0" resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196" @@ -6098,6 +6172,14 @@ emojis-list@^2.0.0: resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389" integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k= +emotion@>=10.0.0: + version "10.0.17" + resolved "https://registry.yarnpkg.com/emotion/-/emotion-10.0.17.tgz#d71e99d2b01204dda109c13d069af4b191e70445" + integrity sha512-nShD/a7PKZ77hr517KfzKkHo1v26uPJBImRiYrl8IwIA4KRmI3vxVEA5pzw1TQTXD1iZl6YQtWhjOiiE+QPmTQ== + dependencies: + babel-plugin-emotion "^10.0.17" + create-emotion "^10.0.14" + encodeurl@~1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59" @@ -13252,6 +13334,15 @@ react@16.9.0, react@>=16.9.0, react@^16.8.6: object-assign "^4.1.1" prop-types "^15.6.2" +react@>=16.8.0: + version "16.10.0" + resolved "https://registry.yarnpkg.com/react/-/react-16.10.0.tgz#95c41e8fc1c706e174deef54b663b5ab94c8ee32" + integrity sha512-lc37bD3j6ZWJRso/a1rrFu6CO1qOf30ZadUDBi1c5RHA1lBSWA8x2MGABB6Oikk+RfmgC+kAT+XegL0eD1ecKg== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + prop-types "^15.6.2" + read-cmd-shim@^1.0.1: version "1.0.4" resolved "https://registry.yarnpkg.com/read-cmd-shim/-/read-cmd-shim-1.0.4.tgz#b4a53d43376211b45243f0072b6e603a8e37640d"