From 232505418c1ba4c8d340fed9945c3967b6b0d898 Mon Sep 17 00:00:00 2001 From: Suraj Karambe Date: Tue, 26 Nov 2024 12:36:24 +0530 Subject: [PATCH] Replaced blui cli templates with templates --- .../frameworks-mobile/react-native.mdx | 14 +++++++++--- src/docs/development/frameworks-web/react.mdx | 22 +++++++++++++------ src/docs/development/templates.mdx | 4 +--- 3 files changed, 27 insertions(+), 13 deletions(-) diff --git a/src/docs/development/frameworks-mobile/react-native.mdx b/src/docs/development/frameworks-mobile/react-native.mdx index 82f26a8a..8aa8d164 100644 --- a/src/docs/development/frameworks-mobile/react-native.mdx +++ b/src/docs/development/frameworks-mobile/react-native.mdx @@ -22,12 +22,20 @@ You'll need to start by following the general instructions for setting up your d The fastest way to start a new Brightlayer UI project is to use the [Brightlayer UI CLI](/development/cli). The CLI will automatically create a starter project for you using the [React Native Community CLI](https://github.com/react-native-community/cli) with all of the necessary Brightlayer UI dependencies pre-configured. To start a React Native project: ```sh -npx -p @brightlayer-ui/cli blui new react-native +npx react-native init MyApp +``` + +You can also select the template you want to use when starting a new project: + +```sh +npx react-native init MyApp --template @brightlayer-ui/react-native-template-blank-typescript +npx react-native init MyApp --template @brightlayer-ui/react-native-template-routing-typescript +npx react-native init MyApp --template @brightlayer-ui/react-native-template-authentication-typescript ``` You will be asked to provide a name for your project and whether you want to use the Brightlayer UI eslint and prettier configurations files. -The Brightlayer UI CLI will automatically include: +The Brightlayer UI React Native Templates will automatically include: - React Native Paper Component Library ([react-native-paper](https://www.npmjs.com/package/react-native-paper)) - Brightlayer UI Component Library ([@brightlayer-ui/react-native-components](https://www.npmjs.com/package/@brightlayer-ui/react-native-components)) @@ -39,7 +47,7 @@ The Brightlayer UI CLI will automatically include: - Brightlayer UI ESLint and Prettier configurations, if selected ([@brightlayer-ui/eslint-config](https://www.npmjs.com/package/@brightlayer-ui/eslint-config) / [@brightlayer-ui/prettier-config](https://www.npmjs.com/package/@brightlayer-ui/prettier-config)) - Testing libraries ([jest](https://www.npmjs.com/package/jest) / [react-test-renderer](https://www.npmjs.com/package/react-test-renderer)) -For detailed usage instructions, refer to the [Brightlayer UI CLI documentation](https://www.npmjs.com/package/@brightlayer-ui/cli). +For detailed usage instructions, refer to the [Brightlayer UI React Native Templates documentation](https://github.com/etn-ccis/blui-react-native-cli-templates/blob/master/README.md). ## Using an Existing Project diff --git a/src/docs/development/frameworks-web/react.mdx b/src/docs/development/frameworks-web/react.mdx index 1b889e52..7b466d59 100644 --- a/src/docs/development/frameworks-web/react.mdx +++ b/src/docs/development/frameworks-web/react.mdx @@ -7,17 +7,25 @@ import { Divider } from '../../../app/components'; The following instructions will guide you through starting a new Brightlayer UI project using React. Alternatively, you can also start your project by downloading one of our code samples from [Github](https://github.com/etn-ccis?q=blui) (the Login or Navigation examples are good projects to start from). -## Using the Brightlayer UI CLI +## Using the Brightlayer UI Templates -The fastest way to start a new Brightlayer UI project is to use the [Brightlayer UI CLI](/development/cli). The CLI will automatically create a starter project for you (using [Create React App](https://github.com/facebookincubator/create-react-app)) with all of the necessary Brightlayer UI dependencies pre-configured. To start a React project: +The fastest way to start a new Brightlayer UI project is to use the [Brightlayer UI Templates](/development/cli). The CLI will automatically create a starter project for you (using [Create React App](https://github.com/facebookincubator/create-react-app)) with all of the necessary Brightlayer UI dependencies pre-configured. To start a React project: ```sh -npx -p @brightlayer-ui/cli blui new react +npx create-blui-react-app +``` + +You can also select the template you want to use when starting a new project: + +```sh +npx create-react-app app-name --template @brightlayer-ui/blank-typescript +npx create-react-app app-name --template @brightlayer-ui/routing-typescript +npx create-react-app app-name --template @brightlayer-ui/authentication-typescript ``` You will be asked to provide a name for your project and whether you want to use the Brightlayer UI eslint and prettier configuration files. -The Brightlayer UI CLI will automatically include: +The Brightlayer UI React Templates will automatically include: - MUI Component Library and Icons ([@mui/material](https://www.npmjs.com/package/@mui/material) / [@mui/icons-material](https://www.npmjs.com/package/@mui/icons-material)) - Brightlayer UI Component Library ([@brightlayer-ui/react-components](https://www.npmjs.com/package/@brightlayer-ui/react-components)) @@ -28,7 +36,7 @@ The Brightlayer UI CLI will automatically include: - Brightlayer UI ESLint and Prettier configurations, if selected ([@brightlayer-ui/eslint-config](https://www.npmjs.com/package/@brightlayer-ui/eslint-config) / [@brightlayer-ui/prettier-config](https://www.npmjs.com/package/@brightlayer-ui/prettier-config)) - Enzyme testing library ([enzyme](https://www.npmjs.com/package/enzyme) / [enzyme-adapter-react-16](https://www.npmjs.com/package/enzyme-adapter-react-16)) -For detailed usage instructions, refer to the [Brightlayer UI CLI documentation](https://www.npmjs.com/package/@brightlayer-ui/cli). +For detailed usage instructions, refer to the [Brightlayer UI React Templates documentation](https://github.com/etn-ccis/blui-react-cli-templates/blob/master/README.md). ## Using an Existing Project @@ -91,8 +99,8 @@ To add the theme to your whole application, you would simply add a ` - - + + ``` diff --git a/src/docs/development/templates.mdx b/src/docs/development/templates.mdx index 38e15815..ecbd3ec6 100644 --- a/src/docs/development/templates.mdx +++ b/src/docs/development/templates.mdx @@ -27,9 +27,7 @@ npx create-blui-react-app To create a new project using the React Native Template simply run: ```sh -npx react-native init MyApp --template @brightlayer-ui/react-native-template-blank-typescript -npx react-native init MyApp --template @brightlayer-ui/react-native-template-routing-typescript -npx react-native init MyApp --template @brightlayer-ui/react-native-template-authentication-typescript +npx react-native init MyApp ``` For more detailed information and usage instructions, check out the [React documentation](https://github.com/etn-ccis/blui-react-cli-templates/blob/master/README.md) and [React Native documentation](https://github.com/etn-ccis/blui-react-native-cli-templates/blob/master/README.md).