diff --git a/docs/adoption.md b/docs/adoption.md index 82fa6e9..b3e11e6 100644 --- a/docs/adoption.md +++ b/docs/adoption.md @@ -15,5 +15,5 @@ Universal React accelerator has taken several steps to ensure the Adoption Readi Universal React accelerator can be adopted into your projects in multiple ways. -1. **Out of the box Adoption**: You can use `npx create-universal-react`to setup your project, if you are completely aligned with [Technology choices](/universal-react-docs/docs/features/). You can make necessary tweaks and adjust these choices post initial setup. -2. **Clone The Generator**: You can clone the generator, customize it as per your organization needs. +1. **Out of the box adoption**: You can use `npx create-universal-react`to setup your project, if you are completely aligned with [Technology choices](/universal-react-docs/docs/features/). You can make necessary tweaks and adjust these choices post initial setup. +2. **Clone the Generator**: You can clone the generator, customize it as per your organization needs and publish it to artifactory. diff --git a/docs/consuming-web-component-in-react.md b/docs/consuming-web-component-in-react.md deleted file mode 100644 index 1948b9f..0000000 --- a/docs/consuming-web-component-in-react.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -id: web-component -title: Consuming Web component in react -sidebar_label: Consuming Web component in react ---- - -## What are web component ? -Web Components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. For example, we can create our new component called ``, with its unique styling and functionality, and use it in any JavaScript framework or library. - - -## Consuming the Web Component in React [ universal-react-v2 ] -1. Create universal-react-v2 -2. Chosse prefered app type -3. Copy file in your project `src/` folder or `inside of src/ as you wish` or `provide url of web-component it will installed in src/web-component` -4. Now simply call your import your web-component in respected file. -5. Install webcomponentjs and vendor copy to make polyfills and to make the polyfills available on runtime. -6. Run `npm install --save @webcomponents/webcomponentsjs vendor-copy` -7. Add postinstall in script as follows, -```javascript -"scripts": { - "postinstall": "vendor-copy" -}, -``` -8. Give instructions to vendor-copy on what it should copy over when the install is run. We need webcomponents-bundle.js and custom-elements-es5-adapter.js -9. Run `npm i` or `npm install` -10. Lastly we have to use the polyfills at runtime by adding them to our /public/index.html - -`//index.js` -```javascript - - - - - -``` -11. Run `npm start` - -## Reference : -* https://academind.com/tutorials/web-components-introduction -* https://vaadin.com/learn/tutorials/using-web-components-in-react diff --git a/docs/monorepo.md b/docs/monorepo.md index 1b27b44..177b6cd 100644 --- a/docs/monorepo.md +++ b/docs/monorepo.md @@ -4,7 +4,14 @@ title: Monorepo sidebar_label: Monorepo --- -# Setup Monorepo structure with Turborepo +## Monorepo structure with Turborepo Monorepos are incredible for productivity, especially on the frontend, but the tooling can be a nightmare. [Turborepo](https://turborepo.org/) makes it easy. +Learn more here, on why use [Turborepo](https://turborepo.org/docs#why-turborepo)? + +Read this for a [comparison of NX vs Turborepo](https://nx.dev/guides/turbo-and-nx) + +## Project structure in Turborepo + +![Project structure in Turborepo](/img/turborepo-structure.png) diff --git a/docs/quality-control.md b/docs/quality-control.md index f995819..969f283 100644 --- a/docs/quality-control.md +++ b/docs/quality-control.md @@ -1,126 +1,10 @@ --- id: quality-control title: Static Quality Control -sidebar_label: Quality Control --- -# XT Page Source Code Quality Config Package +## Linting -Package to unify code quality control configuration and rules across projects. No need to install those packages anymore in your projects and maintain them all separately. +Config packages to unify code linting and typescript configuration and rules across projects. No need to install those packages anymore in your each project and maintain them all separately, thanks to monorepo structure. -## Eslint Package - -To Install package <@xt-pagesource/eslint-config> - -```sh -npm install @xt-pagesource/eslint-config-react -``` - -#### Configure - -Create the file .eslintrc in your app root folder and extend rules. you can also add additional rules as per your desire. - -``` -{ - "extends":["@xt-pagesource/eslint-config-react"] -} -``` - -#### Note: - You can extend or modify this rules in your project as is described on the documentation of eslint, the same way as you will do when extending eslint recommended rules. - -``` -{ - "extends":["@xt-pagesource/eslint-config-react"], - - rules:{ - your rules here - } -} -``` - -### Usage - -Like you will do normally with eslint, this package is nothing else just a wrapper. - For just linting and to see the report, run: - -``` -eslint path/to/folder -``` - -For linting and autofix the problems, run: - -``` -eslint --fix path/to/folder -``` - -Recommended -Add in your package.json at the scripts section the two following scripts: - -``` -{ - "scripts": { - "lint:js": "eslint path/to/folder", - "lint:fix": "eslint --fix path/to/folder" - } -} -``` - ---- - -## Stylint Package - -To Install package <@xt-pagesource/stylelint-config> - -``` -npm install @xt-pagesource/stylelint-config-react -``` - -#### Configure - -Create the file .stylelintrc in your app root folder and extend rules. you can also add additional rules as per your desire. - -``` -{ - "extends":["@xt-pagesource/stylelint-config-react"] -} -``` - -#### Note: -You can extend or modify this rules in your project as is described on the documentation of eslint, the same way as you will do when extending eslint recommended rules. - -``` -{ - "extends":["@xt-pagesource/stylelint-config-react"], - - rules:{ - your rules here - } - -} -``` - -### Usage - -Like you will do normally with stylelint, this package is a wrapper. - For just linting and to see the report, run: - -``` -stylelint path/to/folder -``` - -For linting and autofix the problems, run: - -``` -stylelint --fix path/to/folder -``` - -Recommended -Add in your package.json at the scripts section the two following scripts: - -``` -{ - "scripts": { - - "lint:css": "stylelint path/to/folder", - } -} -``` \ No newline at end of file +![Linting config in Turborepo](/img/linting-config.png) \ No newline at end of file diff --git a/sidebars.js b/sidebars.js index 41e479b..569e688 100644 --- a/sidebars.js +++ b/sidebars.js @@ -1,6 +1,6 @@ module.exports = { someSidebar: { Introduction: ['intro', 'why', 'how', 'features', 'road-map', 'contribution', 'adoption', 'support'], - Features: ['quality-control', 'smart-context', 'unit-testing', 'design-system', 'loader', 'web-component', 'logger', 'generate-plop', 'module-federation', 'monorepo', 'storybook'], + Features: ['monorepo', 'smart-context', 'design-system', 'loader', 'logger', 'generate-plop', 'module-federation', 'storybook', 'quality-control', 'unit-testing' ], }, }; diff --git a/static/img/linting-config.png b/static/img/linting-config.png new file mode 100644 index 0000000..3101987 Binary files /dev/null and b/static/img/linting-config.png differ diff --git a/static/img/turborepo-structure.png b/static/img/turborepo-structure.png new file mode 100644 index 0000000..635966d Binary files /dev/null and b/static/img/turborepo-structure.png differ