From 1a5813f34c3510e55fa5bad7e370c1651dcbc038 Mon Sep 17 00:00:00 2001 From: Renato Pozzi Date: Tue, 24 May 2022 21:56:20 +0200 Subject: [PATCH 01/19] migrated project under nx --- .editorconfig | 13 + .eslintrc.json | 35 + .github/workflows/build.yml | 49 - .github/workflows/codecov.yml | 28 - .gitignore | 49 +- .npmrc | 1 - .prettierignore | 4 + .prettierrc | 3 + .vscode/extensions.json | 8 + LICENSE | 21 - README.md | 209 +- apps/.gitkeep | 0 apps/demo-e2e/.eslintrc.json | 17 + apps/demo-e2e/cypress.json | 12 + apps/demo-e2e/project.json | 28 + apps/demo-e2e/src/fixtures/example.json | 4 + apps/demo-e2e/src/integration/app.spec.ts | 13 + apps/demo-e2e/src/support/app.po.ts | 1 + apps/demo-e2e/src/support/commands.ts | 33 + apps/demo-e2e/src/support/index.ts | 17 + apps/demo-e2e/tsconfig.json | 10 + apps/demo/.babelrc | 11 + apps/demo/.browserslistrc | 16 + apps/demo/.eslintrc.json | 18 + apps/demo/jest.config.ts | 11 + apps/demo/project.json | 80 + apps/demo/src/app/app.spec.tsx | 17 + apps/demo/src/app/app.tsx | 16 + apps/demo/src/app/nx-welcome.tsx | 820 + apps/demo/src/assets/.gitkeep | 0 .../demo/src/environments/environment.prod.ts | 3 + apps/demo/src/environments/environment.ts | 6 + apps/demo/src/favicon.ico | Bin 0 -> 15086 bytes {public => apps/demo/src}/index.html | 6 +- apps/demo/src/main.tsx | 13 + apps/demo/src/polyfills.ts | 7 + apps/demo/tsconfig.app.json | 23 + apps/demo/tsconfig.json | 25 + apps/demo/tsconfig.spec.json | 24 + babel.config.json | 3 + demo/.gitignore | 23 - demo/README.md | 70 - demo/package-lock.json | 27190 ---------------- demo/package.json | 44 - demo/postcss.config.js | 6 - demo/public/index.html | 13 - demo/src/App.js | 73 - demo/src/index.css | 3 - demo/src/index.js | 12 - demo/src/setupTests.js | 5 - demo/tailwind.config.js | 7 - jest.config.ts | 5 + jest.preset.js | 3 + libs/.gitkeep | 0 libs/plock/.babelrc | 12 + libs/plock/.eslintrc.json | 18 + libs/plock/README.md | 7 + libs/plock/jest.config.ts | 10 + libs/plock/package.json | 4 + libs/plock/project.json | 43 + libs/plock/src/index.ts | 1 + libs/plock/src/lib/plock.spec.tsx | 10 + libs/plock/src/lib/plock.tsx | 18 + libs/plock/tsconfig.json | 25 + libs/plock/tsconfig.lib.json | 23 + libs/plock/tsconfig.spec.json | 20 + nx.json | 50 + package-lock.json | 12378 +++++++ package.json | 125 +- public/header.png | Bin 49775 -> 0 bytes rollup.config.js | 23 - src/components/Plock.js | 142 - src/components/Plock.test.js | 347 - src/components/index.js | 1 - src/index.js | 24 - src/setupTests.js | 5 - tools/generators/.gitkeep | 0 tools/tsconfig.tools.json | 12 + tsconfig.base.json | 22 + workspace.json | 9 + 80 files changed, 14118 insertions(+), 28319 deletions(-) create mode 100644 .editorconfig create mode 100644 .eslintrc.json delete mode 100644 .github/workflows/build.yml delete mode 100644 .github/workflows/codecov.yml delete mode 100644 .npmrc create mode 100644 .prettierignore create mode 100644 .prettierrc create mode 100644 .vscode/extensions.json delete mode 100644 LICENSE create mode 100644 apps/.gitkeep create mode 100644 apps/demo-e2e/.eslintrc.json create mode 100644 apps/demo-e2e/cypress.json create mode 100644 apps/demo-e2e/project.json create mode 100644 apps/demo-e2e/src/fixtures/example.json create mode 100644 apps/demo-e2e/src/integration/app.spec.ts create mode 100644 apps/demo-e2e/src/support/app.po.ts create mode 100644 apps/demo-e2e/src/support/commands.ts create mode 100644 apps/demo-e2e/src/support/index.ts create mode 100644 apps/demo-e2e/tsconfig.json create mode 100644 apps/demo/.babelrc create mode 100644 apps/demo/.browserslistrc create mode 100644 apps/demo/.eslintrc.json create mode 100644 apps/demo/jest.config.ts create mode 100644 apps/demo/project.json create mode 100644 apps/demo/src/app/app.spec.tsx create mode 100644 apps/demo/src/app/app.tsx create mode 100644 apps/demo/src/app/nx-welcome.tsx create mode 100644 apps/demo/src/assets/.gitkeep create mode 100644 apps/demo/src/environments/environment.prod.ts create mode 100644 apps/demo/src/environments/environment.ts create mode 100644 apps/demo/src/favicon.ico rename {public => apps/demo/src}/index.html (65%) create mode 100644 apps/demo/src/main.tsx create mode 100644 apps/demo/src/polyfills.ts create mode 100644 apps/demo/tsconfig.app.json create mode 100644 apps/demo/tsconfig.json create mode 100644 apps/demo/tsconfig.spec.json create mode 100644 babel.config.json delete mode 100644 demo/.gitignore delete mode 100644 demo/README.md delete mode 100644 demo/package-lock.json delete mode 100644 demo/package.json delete mode 100644 demo/postcss.config.js delete mode 100644 demo/public/index.html delete mode 100644 demo/src/App.js delete mode 100644 demo/src/index.css delete mode 100644 demo/src/index.js delete mode 100644 demo/src/setupTests.js delete mode 100644 demo/tailwind.config.js create mode 100644 jest.config.ts create mode 100644 jest.preset.js create mode 100644 libs/.gitkeep create mode 100644 libs/plock/.babelrc create mode 100644 libs/plock/.eslintrc.json create mode 100644 libs/plock/README.md create mode 100644 libs/plock/jest.config.ts create mode 100644 libs/plock/package.json create mode 100644 libs/plock/project.json create mode 100644 libs/plock/src/index.ts create mode 100644 libs/plock/src/lib/plock.spec.tsx create mode 100644 libs/plock/src/lib/plock.tsx create mode 100644 libs/plock/tsconfig.json create mode 100644 libs/plock/tsconfig.lib.json create mode 100644 libs/plock/tsconfig.spec.json create mode 100644 nx.json create mode 100644 package-lock.json delete mode 100644 public/header.png delete mode 100644 rollup.config.js delete mode 100644 src/components/Plock.js delete mode 100644 src/components/Plock.test.js delete mode 100644 src/components/index.js delete mode 100644 src/index.js delete mode 100644 src/setupTests.js create mode 100644 tools/generators/.gitkeep create mode 100644 tools/tsconfig.tools.json create mode 100644 tsconfig.base.json create mode 100644 workspace.json diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..6e87a00 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,13 @@ +# Editor configuration, see http://editorconfig.org +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +max_line_length = off +trim_trailing_whitespace = false diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..06cc47d --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,35 @@ +{ + "root": true, + "ignorePatterns": ["**/*"], + "plugins": ["@nrwl/nx"], + "overrides": [ + { + "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "rules": { + "@nrwl/nx/enforce-module-boundaries": [ + "error", + { + "enforceBuildableLibDependency": true, + "allow": [], + "depConstraints": [ + { + "sourceTag": "*", + "onlyDependOnLibsWithTags": ["*"] + } + ] + } + ] + } + }, + { + "files": ["*.ts", "*.tsx"], + "extends": ["plugin:@nrwl/nx/typescript"], + "rules": {} + }, + { + "files": ["*.js", "*.jsx"], + "extends": ["plugin:@nrwl/nx/javascript"], + "rules": {} + } + ] +} diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml deleted file mode 100644 index 68ded70..0000000 --- a/.github/workflows/build.yml +++ /dev/null @@ -1,49 +0,0 @@ -name: Build CI - -on: - push: - branches: [main, next] - pull_request: - branches: [main] - -jobs: - build: - runs-on: ubuntu-latest - - strategy: - matrix: - node: [12, 14, 16] - - steps: - - uses: actions/checkout@v2 - - name: Use Node.js 16 - uses: actions/setup-node@v2 - with: - node-version: ${{ matrix.node }} - - - name: Download Deps - uses: bahmutov/npm-install@v1 - with: - useLockFile: false - - - run: npm run test-ci - - release: - needs: build - if: ${{ github.event_name == 'push' }} - runs-on: ubuntu-latest - - steps: - - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 - - - name: Download Deps - uses: bahmutov/npm-install@v1 - with: - useLockFile: false - - - run: npm run build - - run: npm run semantic-release - env: - GH_TOKEN: ${{ secrets.GH_TOKEN }} - NPM_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/.github/workflows/codecov.yml b/.github/workflows/codecov.yml deleted file mode 100644 index 30a95c6..0000000 --- a/.github/workflows/codecov.yml +++ /dev/null @@ -1,28 +0,0 @@ -name: Codecov CI - -on: - push: - branches: [main] - pull_request: - branches: [main] - -jobs: - coverage: - runs-on: ubuntu-latest - - steps: - - uses: actions/checkout@v2 - - - name: Use Node.js - uses: actions/setup-node@v2 - - - name: Download Deps - uses: bahmutov/npm-install@v1 - with: - useLockFile: false - - - name: Generate Coverage Report - run: npm run test-ci -- --coverage - - - name: Upload coverage to Codecov - uses: codecov/codecov-action@v2 diff --git a/.gitignore b/.gitignore index 800f3a8..f5a5e0b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,24 +1,39 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# compiled output +/dist +/tmp +/out-tsc # dependencies -/node_modules -/.pnp -.pnp.js +node_modules -# testing -/coverage +# IDEs and editors +/.idea +.project +.classpath +.c9/ +*.launch +.settings/ +*.sublime-workspace -# production -/build -/dist +# IDE - VSCode +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json # misc -.DS_Store -.env.local -.env.development.local -.env.test.local -.env.production.local +/.sass-cache +/connect.lock +/coverage +/libpeerconnection.log +npm-debug.log +yarn-error.log +testem.log +/typings -npm-debug.log* -yarn-debug.log* -yarn-error.log* +# System Files +.DS_Store +Thumbs.db diff --git a/.npmrc b/.npmrc deleted file mode 100644 index 43c97e7..0000000 --- a/.npmrc +++ /dev/null @@ -1 +0,0 @@ -package-lock=false diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..d0b804d --- /dev/null +++ b/.prettierignore @@ -0,0 +1,4 @@ +# Add files here to ignore them from prettier formatting + +/dist +/coverage diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..544138b --- /dev/null +++ b/.prettierrc @@ -0,0 +1,3 @@ +{ + "singleQuote": true +} diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..64553b1 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,8 @@ +{ + "recommendations": [ + "nrwl.angular-console", + "esbenp.prettier-vscode", + "firsttris.vscode-jest-runner", + "dbaeumer.vscode-eslint" + ] +} diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 3ee5fea..0000000 --- a/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2022 Renato Pozzi - -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/README.md b/README.md index 9f9c4c8..ffb5092 100644 --- a/README.md +++ b/README.md @@ -1,155 +1,90 @@ -
+# react-plock -

- -

+This project was generated using [Nx](https://nx.dev). -
- -

-Build Status -Release -Coverage -Stars -License -

- -
- -# About Plock 🌈 - -Plock is a responsive masonry layout implementation for React. Very simple to use and easy to understand. - -## Can I see a demo? 👀 - -The demo is available for you [here](https://react-plock.netlify.app/)! - -### Getting Started 🤩 - -Install the package with [yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/): - -```bash -$ yarn add react-plock -$ npm install react-plock -``` - -The simplest way to use Plock is to import it in your React app: - -```jsx -import { Plock } from "react-plock"; - -export function Komponent() { - return ( - -
Sun is shining ☀ī¸
-
Moon is shining 🌙
-
Stars are shining ✨
- - ); -} -``` +

-And that's it! 🎉 🎉 🎉 By default, Plock will use the `grid` layout with three columns. You can also override this prop by setting the `nColumns` prop: +🔎 **Smart, Fast and Extensible Build System** -```jsx -import { Plock } from "react-plock"; +## Adding capabilities to your workspace -const Tile = ({ children, style, ...rest }) => ( -
- {children} -
-); +Nx supports many plugins which add capabilities for developing different types of applications and different tools. -export function Komponent() { - return ( - - I love Plock! 💙 - I love React! 💛 - I love Javascript! 💝 - Give us a Star! 🌟 - - ); -} -``` +These capabilities include generating applications, libraries, etc as well as the devtools to test, and build projects as well. -If you need different breakpoints, you can use pass an array like this: +Below are our core plugins: -```jsx -import { Plock } from "react-plock"; +- [React](https://reactjs.org) + - `npm install --save-dev @nrwl/react` +- Web (no framework frontends) + - `npm install --save-dev @nrwl/web` +- [Angular](https://angular.io) + - `npm install --save-dev @nrwl/angular` +- [Nest](https://nestjs.com) + - `npm install --save-dev @nrwl/nest` +- [Express](https://expressjs.com) + - `npm install --save-dev @nrwl/express` +- [Node](https://nodejs.org) + - `npm install --save-dev @nrwl/node` -export function Komponent() { - const breakpoints = [ - { size: 640, columns: 1 }, - { size: 768, columns: 2 }, - { size: 1024, columns: 3 }, - { size: 1280, columns: 6 }, - ]; +There are also many [community plugins](https://nx.dev/community) you could add. - return ( - -
Pikachu
-
Charmander
-
Squirtle
-
Bulbasaur
- - ); -} -``` +## Generate an application -> Note: The element resizing is automatically debounced with a delay of 200ms. You can override this delay by setting the `debounce` prop with a number in milliseconds. +Run `nx g @nrwl/react:app my-app` to generate an application. -Also the gap between columns can be set by setting the `gap` prop: +> You can use any of the plugins above to generate applications as well. -```jsx -import { Plock } from "react-plock"; +When using Nx, you can create multiple applications and libraries in the same workspace. -export function Komponent() { - return ( - -
Pikachu
-
Charmander
-
Squirtle
-
Bulbasaur
- - ); -} -``` +## Generate a library -Needs also some extra styling? No problem, you can extend the default styles by setting the `style` or the `className` prop: +Run `nx g @nrwl/react:lib my-lib` to generate a library. -```jsx -import { Plock } from "react-plock"; +> You can also use any of the plugins above to generate libraries as well. -export function Komponent() { - return ( - -
Pikachu
-
Charmander
-
Squirtle
-
Bulbasaur
- - ); -} -``` - -### Built With 🏗ī¸ - -- [ReactJS](https://reactjs.org/) - -### Versioning đŸšĻ - -We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/itsrennyman/react-plock/tags). - -### Authors 🙋 - -- **Renato Pozzi** - [itsrennyman](https://github.com/itsrennyman) - -### Stargazers 🌟 - -[![Stargazers repo roster for @itsrennyman/react-plock](https://reporoster.com/stars/itsrennyman/react-plock)](https://github.com/itsrennyman/react-plock/stargazers) +Libraries are shareable across libraries and applications. They can be imported from `@react-plock/mylib`. -See also the list of [contributors](https://github.com/itsrennyman/react-plock/contributors) who participated in this project. - -### License - -This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details +## Development server + +Run `nx serve my-app` for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files. + +## Code scaffolding + +Run `nx g @nrwl/react:component my-component --project=my-app` to generate a new component. + +## Build + +Run `nx build my-app` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. + +## Running unit tests + +Run `nx test my-app` to execute the unit tests via [Jest](https://jestjs.io). + +Run `nx affected:test` to execute the unit tests affected by a change. + +## Running end-to-end tests + +Run `nx e2e my-app` to execute the end-to-end tests via [Cypress](https://www.cypress.io). + +Run `nx affected:e2e` to execute the end-to-end tests affected by a change. + +## Understand your workspace + +Run `nx graph` to see a diagram of the dependencies of your projects. + +## Further help + +Visit the [Nx Documentation](https://nx.dev) to learn more. + +## ☁ Nx Cloud + +### Distributed Computation Caching & Distributed Task Execution + +

+ +Nx Cloud pairs with Nx in order to enable you to build and test code more rapidly, by up to 10 times. Even teams that are new to Nx can connect to Nx Cloud and start saving time instantly. + +Teams using Nx gain the advantage of building full-stack applications with their preferred framework alongside Nx’s advanced code generation and project dependency graph, plus a unified experience for both frontend and backend developers. + +Visit [Nx Cloud](https://nx.app/) to learn more. diff --git a/apps/.gitkeep b/apps/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/apps/demo-e2e/.eslintrc.json b/apps/demo-e2e/.eslintrc.json new file mode 100644 index 0000000..4c5989b --- /dev/null +++ b/apps/demo-e2e/.eslintrc.json @@ -0,0 +1,17 @@ +{ + "extends": ["plugin:cypress/recommended", "../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "rules": {} + }, + { + "files": ["src/plugins/index.js"], + "rules": { + "@typescript-eslint/no-var-requires": "off", + "no-undef": "off" + } + } + ] +} diff --git a/apps/demo-e2e/cypress.json b/apps/demo-e2e/cypress.json new file mode 100644 index 0000000..f5d8e7a --- /dev/null +++ b/apps/demo-e2e/cypress.json @@ -0,0 +1,12 @@ +{ + "fileServerFolder": ".", + "fixturesFolder": "./src/fixtures", + "integrationFolder": "./src/integration", + "modifyObstructiveCode": false, + "supportFile": "./src/support/index.ts", + "pluginsFile": false, + "video": true, + "videosFolder": "../../dist/cypress/apps/demo-e2e/videos", + "screenshotsFolder": "../../dist/cypress/apps/demo-e2e/screenshots", + "chromeWebSecurity": false +} diff --git a/apps/demo-e2e/project.json b/apps/demo-e2e/project.json new file mode 100644 index 0000000..77bacca --- /dev/null +++ b/apps/demo-e2e/project.json @@ -0,0 +1,28 @@ +{ + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "apps/demo-e2e/src", + "projectType": "application", + "targets": { + "e2e": { + "executor": "@nrwl/cypress:cypress", + "options": { + "cypressConfig": "apps/demo-e2e/cypress.json", + "devServerTarget": "demo:serve:development" + }, + "configurations": { + "production": { + "devServerTarget": "demo:serve:production" + } + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": ["apps/demo-e2e/**/*.{js,ts}"] + } + } + }, + "tags": [], + "implicitDependencies": ["demo"] +} diff --git a/apps/demo-e2e/src/fixtures/example.json b/apps/demo-e2e/src/fixtures/example.json new file mode 100644 index 0000000..294cbed --- /dev/null +++ b/apps/demo-e2e/src/fixtures/example.json @@ -0,0 +1,4 @@ +{ + "name": "Using fixtures to represent data", + "email": "hello@cypress.io" +} diff --git a/apps/demo-e2e/src/integration/app.spec.ts b/apps/demo-e2e/src/integration/app.spec.ts new file mode 100644 index 0000000..b2186cf --- /dev/null +++ b/apps/demo-e2e/src/integration/app.spec.ts @@ -0,0 +1,13 @@ +import { getGreeting } from '../support/app.po'; + +describe('demo', () => { + beforeEach(() => cy.visit('/')); + + it('should display welcome message', () => { + // Custom command example, see `../support/commands.ts` file + cy.login('my-email@something.com', 'myPassword'); + + // Function helper example, see `../support/app.po.ts` file + getGreeting().contains('Welcome demo'); + }); +}); diff --git a/apps/demo-e2e/src/support/app.po.ts b/apps/demo-e2e/src/support/app.po.ts new file mode 100644 index 0000000..3293424 --- /dev/null +++ b/apps/demo-e2e/src/support/app.po.ts @@ -0,0 +1 @@ +export const getGreeting = () => cy.get('h1'); diff --git a/apps/demo-e2e/src/support/commands.ts b/apps/demo-e2e/src/support/commands.ts new file mode 100644 index 0000000..310f1fa --- /dev/null +++ b/apps/demo-e2e/src/support/commands.ts @@ -0,0 +1,33 @@ +// *********************************************** +// This example commands.js shows you how to +// create various custom commands and overwrite +// existing commands. +// +// For more comprehensive examples of custom +// commands please read more here: +// https://on.cypress.io/custom-commands +// *********************************************** + +// eslint-disable-next-line @typescript-eslint/no-namespace +declare namespace Cypress { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + interface Chainable { + login(email: string, password: string): void; + } +} +// +// -- This is a parent command -- +Cypress.Commands.add('login', (email, password) => { + console.log('Custom command example: Login', email, password); +}); +// +// -- This is a child command -- +// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) +// +// +// -- This is a dual command -- +// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) +// +// +// -- This will overwrite an existing command -- +// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) diff --git a/apps/demo-e2e/src/support/index.ts b/apps/demo-e2e/src/support/index.ts new file mode 100644 index 0000000..3d469a6 --- /dev/null +++ b/apps/demo-e2e/src/support/index.ts @@ -0,0 +1,17 @@ +// *********************************************************** +// This example support/index.js is processed and +// loaded automatically before your test files. +// +// This is a great place to put global configuration and +// behavior that modifies Cypress. +// +// You can change the location of this file or turn off +// automatically serving support files with the +// 'supportFile' configuration option. +// +// You can read more here: +// https://on.cypress.io/configuration +// *********************************************************** + +// Import commands.js using ES2015 syntax: +import './commands'; diff --git a/apps/demo-e2e/tsconfig.json b/apps/demo-e2e/tsconfig.json new file mode 100644 index 0000000..c4f818e --- /dev/null +++ b/apps/demo-e2e/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "sourceMap": false, + "outDir": "../../dist/out-tsc", + "allowJs": true, + "types": ["cypress", "node"] + }, + "include": ["src/**/*.ts", "src/**/*.js"] +} diff --git a/apps/demo/.babelrc b/apps/demo/.babelrc new file mode 100644 index 0000000..f5a563d --- /dev/null +++ b/apps/demo/.babelrc @@ -0,0 +1,11 @@ +{ + "presets": [ + [ + "@nrwl/react/babel", + { + "runtime": "automatic" + } + ] + ], + "plugins": [["styled-components", { "pure": true, "ssr": true }]] +} diff --git a/apps/demo/.browserslistrc b/apps/demo/.browserslistrc new file mode 100644 index 0000000..f1d12df --- /dev/null +++ b/apps/demo/.browserslistrc @@ -0,0 +1,16 @@ +# This file is used by: +# 1. autoprefixer to adjust CSS to support the below specified browsers +# 2. babel preset-env to adjust included polyfills +# +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# +# If you need to support different browsers in production, you may tweak the list below. + +last 1 Chrome version +last 1 Firefox version +last 2 Edge major versions +last 2 Safari major version +last 2 iOS major versions +Firefox ESR +not IE 9-11 # For IE 9-11 support, remove 'not'. \ No newline at end of file diff --git a/apps/demo/.eslintrc.json b/apps/demo/.eslintrc.json new file mode 100644 index 0000000..734ddac --- /dev/null +++ b/apps/demo/.eslintrc.json @@ -0,0 +1,18 @@ +{ + "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "rules": {} + }, + { + "files": ["*.ts", "*.tsx"], + "rules": {} + }, + { + "files": ["*.js", "*.jsx"], + "rules": {} + } + ] +} diff --git a/apps/demo/jest.config.ts b/apps/demo/jest.config.ts new file mode 100644 index 0000000..4cfe09a --- /dev/null +++ b/apps/demo/jest.config.ts @@ -0,0 +1,11 @@ +/* eslint-disable */ +export default { + displayName: 'demo', + preset: '../../jest.preset.js', + transform: { + '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest', + '^.+\\.[tj]sx?$': 'babel-jest', + }, + moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'], + coverageDirectory: '../../coverage/apps/demo', +}; diff --git a/apps/demo/project.json b/apps/demo/project.json new file mode 100644 index 0000000..dbfde1c --- /dev/null +++ b/apps/demo/project.json @@ -0,0 +1,80 @@ +{ + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "apps/demo/src", + "projectType": "application", + "targets": { + "build": { + "executor": "@nrwl/web:webpack", + "outputs": ["{options.outputPath}"], + "defaultConfiguration": "production", + "options": { + "compiler": "babel", + "outputPath": "dist/apps/demo", + "index": "apps/demo/src/index.html", + "baseHref": "/", + "main": "apps/demo/src/main.tsx", + "polyfills": "apps/demo/src/polyfills.ts", + "tsConfig": "apps/demo/tsconfig.app.json", + "assets": ["apps/demo/src/favicon.ico", "apps/demo/src/assets"], + "styles": [], + "scripts": [], + "webpackConfig": "@nrwl/react/plugins/webpack" + }, + "configurations": { + "development": { + "extractLicenses": false, + "optimization": false, + "sourceMap": true, + "vendorChunk": true + }, + "production": { + "fileReplacements": [ + { + "replace": "apps/demo/src/environments/environment.ts", + "with": "apps/demo/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "namedChunks": false, + "extractLicenses": true, + "vendorChunk": false + } + } + }, + "serve": { + "executor": "@nrwl/web:dev-server", + "defaultConfiguration": "development", + "options": { + "buildTarget": "demo:build", + "hmr": true + }, + "configurations": { + "development": { + "buildTarget": "demo:build:development" + }, + "production": { + "buildTarget": "demo:build:production", + "hmr": false + } + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": ["apps/demo/**/*.{ts,tsx,js,jsx}"] + } + }, + "test": { + "executor": "@nrwl/jest:jest", + "outputs": ["coverage/apps/demo"], + "options": { + "jestConfig": "apps/demo/jest.config.ts", + "passWithNoTests": true + } + } + }, + "tags": [] +} diff --git a/apps/demo/src/app/app.spec.tsx b/apps/demo/src/app/app.spec.tsx new file mode 100644 index 0000000..db6c493 --- /dev/null +++ b/apps/demo/src/app/app.spec.tsx @@ -0,0 +1,17 @@ +import { render } from '@testing-library/react'; + +import App from './app'; + +describe('App', () => { + it('should render successfully', () => { + const { baseElement } = render(); + + expect(baseElement).toBeTruthy(); + }); + + it('should have a greeting as the title', () => { + const { getByText } = render(); + + expect(getByText(/Welcome demo/gi)).toBeTruthy(); + }); +}); diff --git a/apps/demo/src/app/app.tsx b/apps/demo/src/app/app.tsx new file mode 100644 index 0000000..a7efcaf --- /dev/null +++ b/apps/demo/src/app/app.tsx @@ -0,0 +1,16 @@ +import styled from 'styled-components'; +import NxWelcome from './nx-welcome'; + +const StyledApp = styled.div` + // Your style here +`; + +export function App() { + return ( + + + + ); +} + +export default App; diff --git a/apps/demo/src/app/nx-welcome.tsx b/apps/demo/src/app/nx-welcome.tsx new file mode 100644 index 0000000..6278272 --- /dev/null +++ b/apps/demo/src/app/nx-welcome.tsx @@ -0,0 +1,820 @@ +/* + * * * * * * * * * * * * * * * * * * * * * * * * * * * * + This is a starter component and can be deleted. + * * * * * * * * * * * * * * * * * * * * * * * * * * * * + Delete this file and get started with your project! + * * * * * * * * * * * * * * * * * * * * * * * * * * * * + */ +export function NxWelcome({ title }: { title: string }) { + return ( + <> +