From bbc6071d79597efd7cf12da2796c1e1b99c93ab2 Mon Sep 17 00:00:00 2001 From: Suraj Karambe Date: Thu, 5 Dec 2024 12:30:44 +0530 Subject: [PATCH] Review changes - Removed lui cli references --- .../frameworks-mobile/react-native.mdx | 2 +- .../development/frameworks-web/angular.mdx | 4 +- src/docs/development/frameworks-web/react.mdx | 6 +- src/docs/development/templates.mdx | 6 +- src/docs/get-started/new-project.mdx | 300 ++++++++++-------- 5 files changed, 170 insertions(+), 148 deletions(-) diff --git a/src/docs/development/frameworks-mobile/react-native.mdx b/src/docs/development/frameworks-mobile/react-native.mdx index 8aa8d164..1f7aca33 100644 --- a/src/docs/development/frameworks-mobile/react-native.mdx +++ b/src/docs/development/frameworks-mobile/react-native.mdx @@ -19,7 +19,7 @@ You'll need to start by following the general instructions for setting up your d ## Using the Brightlayer UI CLI -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: +The fastest way to start a new Brightlayer UI project is to use our templates. The [React Native Community CLI](https://github.com/react-native-community/cli) will automatically scaffold a starter project for you using the Brightlayer UI templates with all of the necessary Brightlayer UI dependencies pre-configured. To start a React Native project: ```sh npx react-native init MyApp diff --git a/src/docs/development/frameworks-web/angular.mdx b/src/docs/development/frameworks-web/angular.mdx index 6efa7942..1cd8bdbe 100644 --- a/src/docs/development/frameworks-web/angular.mdx +++ b/src/docs/development/frameworks-web/angular.mdx @@ -7,13 +7,13 @@ import { Divider } from '../../../app/components'; ## Using an Existing Project -If you have an existing project and would like to integrate Brightlayer UI, you can follow the manual integration instructions below. If you have not already started your project, we recommend that you scaffold your project with the Brightlayer UI CLI. +If you have an existing Angular project and would like to integrate Brightlayer UI, you can follow the manual integration instructions below. # Manual Brightlayer UI Integration -Before taking the following steps, you'll want to make sure that you have an existing application. If you used the Brightlayer UI CLI to start your project, these steps have already been done for you automatically. +Before taking the following steps, you'll want to make sure that you have an existing application. ## Including the Component Libraries diff --git a/src/docs/development/frameworks-web/react.mdx b/src/docs/development/frameworks-web/react.mdx index 7b466d59..1fba404d 100644 --- a/src/docs/development/frameworks-web/react.mdx +++ b/src/docs/development/frameworks-web/react.mdx @@ -9,7 +9,7 @@ The following instructions will guide you through starting a new Brightlayer UI ## Using the Brightlayer UI Templates -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: +The fastest way to start a new Brightlayer UI project is to use the [Brightlayer UI Templates](/development/templates). The Brightlayer UI templates will automatically create a starter project for you using [Vite](https://vite.dev/guide/) to scaffold the project with all of the necessary Brightlayer UI dependencies pre-configured. To start a React project: ```sh npx create-blui-react-app @@ -40,13 +40,13 @@ For detailed usage instructions, refer to the [Brightlayer UI React Templates do ## Using an Existing Project -If you have an existing project and would like to integrate Brightlayer UI, you can follow the manual integration instructions below. If you have not already started your project, we recommend that you scaffold your project with the Brightlayer UI CLI. +If you have an existing project and would like to integrate Brightlayer UI, you can follow the manual integration instructions below. If you have not already started your project, we recommend that you scaffold your project with the Brightlayer UI Templates. # Manual Brightlayer UI Integration -Before taking the following steps, you'll want to make sure that you have an existing application. If you used the Brightlayer UI CLI to start your project, these steps have already been done for you automatically. +Before taking the following steps, you'll want to make sure that you have an existing application. If you used the Brightlayer UI Templates to start your project, these steps have already been done for you automatically. ## Including the Component Libraries diff --git a/src/docs/development/templates.mdx b/src/docs/development/templates.mdx index ecbd3ec6..3ba82bc0 100644 --- a/src/docs/development/templates.mdx +++ b/src/docs/development/templates.mdx @@ -18,7 +18,7 @@ When starting a new project, you will have the opportunity to select a template > These templates are available for [React](https://github.com/etn-ccis/blui-react-cli-templates/blob/master/README.md#react-cli-templates), and [React-Native](https://github.com/etn-ccis/blui-react-native-cli-templates/blob/master/README.md#react-native-cli-templates). -To start a new project using the React Template: +To create a new project using the React Templates: ```sh npx create-blui-react-app @@ -27,7 +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 +npx react-native init MyApp --template @brightlayer-ui/react-native-template-authentication-typescript ``` -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). +For more detailed information, templates 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). diff --git a/src/docs/get-started/new-project.mdx b/src/docs/get-started/new-project.mdx index bab1be10..241c9d95 100644 --- a/src/docs/get-started/new-project.mdx +++ b/src/docs/get-started/new-project.mdx @@ -25,144 +25,166 @@ When approaching a potential new project, it can be challenging to know where to ### Getting Started - - Brightlayer UI can speed up and enhance your process by offering style libraries, design patterns and a variety of Figma components that use the Material Design open-source framework. Using Brightlayer UI also ensures that your designs match the Eaton brand and standards. - - - - - -

, - icon: TabIconBLC - }, - { - label: 'Develop with BLUI', - content: -

- Developers can benefit from Brightlayer UI resources such as a Command-Line Interface (CLI) and component libraries in Angular and React, available as NPM packages. Using Brightlayer UI components ensures that the coded solution looks exactly like the designs, keeping our products in brand. - - - - - -

, - icon: TabIconDevelop - }, - { - label: 'Style Guide', - content: -

- Brightlayer UI has a wide variety of style resources to help ensure consistency across applications and make designing and building them easier. - - - - - -

, - icon: StyleGuideIcon - }, - { - label: 'Community', - content: -

- Brightlayer UI is an open source design system that thrives on having an active and engaged community of maintainers and contributors. Check out the links below to learn more about our team and how you can be a part of the Brightlayer UI community. - - - - - -

, - icon: CommunityIcon - }, - ]}/> + + + Brightlayer UI can speed up and enhance your process by offering style libraries, design + patterns and a variety of Figma components that use the Material Design open-source framework. + Using Brightlayer UI also ensures that your designs match the Eaton brand and standards. + + + + + + +

+ ), + icon: TabIconBLC, + }, + { + label: 'Develop with BLUI', + content: ( +

+ + Developers can benefit from Brightlayer UI resources such as a Brightlayer UI Templates and + component libraries in Angular and React, available as NPM packages. Using Brightlayer UI + components ensures that the coded solution looks exactly like the designs, keeping our products + in brand. + + + + + + +

+ ), + icon: TabIconDevelop, + }, + { + label: 'Style Guide', + content: ( +

+ + Brightlayer UI has a wide variety of style resources to help ensure consistency across + applications and make designing and building them easier. + + + + + + +

+ ), + icon: StyleGuideIcon, + }, + { + label: 'Community', + content: ( +

+ + Brightlayer UI is an open source design system that thrives on having an active and engaged + community of maintainers and contributors. Check out the links below to learn more about our + team and how you can be a part of the Brightlayer UI community. + + + + + + +

+ ), + icon: CommunityIcon, + }, + ]} +/> ### Web Applications @@ -188,4 +210,4 @@ In general, you will want to at least provide the same type of application as be Think about how the product will be used. Does it offer features that users will want to access on the go? Is it going to be actively used in the field, or is it something users will more likely use from their desk? -In general, you can't go wrong with a web application. If you do your due diligence and design a properly responsive application, you will be able to access it from any connected device, including mobile. If you suspect that the primary mode of interacting with the application will be from a mobile device or if the application needs to work offline, you may want to consider building a dedicated mobile app. \ No newline at end of file +In general, you can't go wrong with a web application. If you do your due diligence and design a properly responsive application, you will be able to access it from any connected device, including mobile. If you suspect that the primary mode of interacting with the application will be from a mobile device or if the application needs to work offline, you may want to consider building a dedicated mobile app.