Merge pull request #1669 from dxc-technology/gomezivann-update-readmes

raquelarrojo · web-flow · commit 9e83fd25a3d7 · 2023-08-21T11:09:05.000+02:00
Updates to all the READMEs and templates
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -11,8 +11,8 @@ Include steps to reproduce the behaviour.
 
 Example:
 
-1. Create a new React App using `create-react-app`.
-2. Install the `@dxc-technology\halstack-react` dependencies and run the app.
+1. Create a new React app using Vite.
+2. Install `@dxc-technology\halstack-react` package.
 3. Click on '...'.
 4. Scroll down to '...'.
 5. See the error.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -4,7 +4,7 @@ about: Suggest an idea for this project
 ---
 
 **Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...].
 
 **Describe the solution you'd like**
 A clear and concise description of what you want to happen.
@@ -16,4 +16,4 @@ A clear and concise description of any alternative solutions or features you've
 Add any other context or screenshots about the feature request here.
 
 **Add Labels**
-Add any applicable labels like related components, services, team or project reporting this new feature... etc
+Add any applicable labels like related components, services, team or project reporting this new feature... etc.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,7 +1,8 @@
 **Checklist**
 _(Check off all the items before submitting)_
-- [ ] Build process is done without errors and all tests pass in `/lib` directory.
-- [ ] Self-reviewed the code prior to submitting.
+
+- [ ] Build process is done without errors. All tests pass in the `/lib` directory.
+- [ ] Self-reviewed the code before submitting.
 - [ ] Meets accessibility standards.
 - [ ] Added/updated documentation to `/website` as needed.
 - [ ] Added/updated tests as needed.
@@ -13,9 +14,9 @@ A clear description of the purpose of the change. Applicable in case this change
 A clear and concise description of the change.
 
 **Screenshots**
-If applicable, add screenshots to help explain your change.
+If applicable, add screenshots to help explain your change request.
 
 **Additional context**
 Add any other context about the change here.
 
-**Closes #`issue-number`**
+**Closes #`issue-number`**
diff --git a/README.md b/README.md
@@ -1,81 +1,44 @@
-# Halstack React CDK 
+<p align="center">
+  <a href="https://developer.dxc.com/halstack/">
+    <img src="website/screens/common/images/halstack_logo.svg" alt="Halstack Design System logo" />
+  </a>
+</p>
 
-Halstack React CDK is a npm library of reusable React components, made with the purpose of helping React developers with the task of implementing User Interfaces following the DXC Design Guidelines.
+<h1 align="center">Halstack Design System</h1>
 
-- It increases visual and behavioral consistency across the applications using the library.
+Halstack is an Open Source Design System built and maintained by DXC Technology with the purpose of providing all the necessary tools for designing and implementing accessible, intuitive and consistent User Experiences with React.
 
-- It cuts down development efforts, taking the responsability of following the Design Guidelines away from the developer, and allowing him to focus on providing business value.
+## How to start
 
-## Usage
-
-Halstack React CDK is a set of reusable components distributed as a npm library. See the [documentation site](https://developer.dxc.com/halstack/) for details on how to use it.
-
-## Contributing
-
-Before opening new issues or pull requests, please refer to [CONTRIBUTING.MD](https://github.com/dxc-technology/halstack-react/blob/master/CONTRIBUTING.md).
-
-## Development Setup
-
-These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. 
-
-
-The project is divided in two main folders. One is for the actual library, and the other one is a React application using the library.
-
-### Library
-
-Contained in the `lib` folder.
+You can start using Halstack right now:
 
 ```bash
-cd lib
+npm i @dxc-technology/halstack-react
 ```
 
-Install the library dependencies.
-
-```bash
-npm install
-```
+### Usage
 
-Run the build process into `dist` folder, detecting and automatically building changes in src. 
+```jsx
+import React from "react";
+import { DxcButton, DxcTextInput } from "@dxc-technology/halstack-react";
 
-```bash
-npm run build:watch #'npm run build' if there is no need to watch for changes
+const App = () => (
+  <>
+    <DxcTextInput label="Enter your name" />
+    <DxcButton label="Submit" type="submit" />
+  </>
+);
 ```
 
-### Example Application
-
-Contained in the `app` folder.
+## Where to start
 
-```bash
-cd app # from the root folder
-```
+Learn everything you need to know about Halstack principles and components on the [official documentation site](https://developer.dxc.com/halstack/).
 
-Install the application dependencies. The Halstack React CDK dependency is linked to the local `lib` folder. This one must have been previously built.
-
-```bash
-npm install
-```
-
-Start the application.
-
-```bash
-npm start # runs create-react-app dev server
-```
-
-Now, anytime you make a change to the library or the app, `create-react-app` will live-reload your local dev server so you can iterate on your component in real-time.
-
-## Storybook
-
-Contained in the `lib` folder.
-
-```bash
-cd lib
-```
+## Contributing
 
-Run storybook.
+Any feedback is always welcome in Halstack!
 
-```bash
-npm run storybook
-```
+Before opening a new issue, pull request or discussion, please read carefully and respect our [contribution guidelines](https://github.com/dxc-technology/halstack-react/wiki/Contributing).
 
 ## Thanks
 
diff --git a/lib/README.md b/lib/README.md
@@ -1,25 +1,19 @@
-# Halstack React CDK
+<h1 align="center">Halstack React library</h1>
 
-Halstack React CDK is a npm library of reusable React components, made with the purpose of helping React developers with the task of implementing User Interfaces following the DXC Design Guidelines.
+`@dxc-technology/halstack-react` is an npm library of reusable React components, made to help React developers with the task of implementing User Interfaces following the DXC Halstack Design Guidelines.
 
-- It increases visual and behavioral consistency across the applications using the library.
+- It increases visual and behavioural consistency across the applications using the library.
 
-- It cuts down development efforts, taking the responsability of following the Design Guidelines away from the developer, and allowing him to focus on providing business value.
+- It cuts down development efforts, taking the responsibility of following the Design Guidelines away from the developer, and allowing him to focus on providing business value.
 
-## Usage
+## Before start working
 
-Halstack React CDK is a set of reusable components distributed as a npm library. See the [documentation site](https://developer.dxc.com/halstack/) for details on how to use it.
-
-## Contributing
-
-Before opening new issues or pull requests, please refer to [CONTRIBUTING.MD](https://github.com/dxc-technology/halstack-react/blob/master/CONTRIBUTING.md).
+Remember to read [the documentation site](https://developer.dxc.com/halstack/) carefully before trying to modify any Halstack implementation.
 
 ## Development Setup
 
 These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
 
-The project is divided in two main folders. One is for the actual library, and the other one is a React application using the library.
-
 ### Library
 
 Contained in the `lib` folder.
@@ -28,13 +22,13 @@ Contained in the `lib` folder.
 cd lib
 ```
 
-Install the library dependencies.
+Install the library dependencies:
 
 ```bash
 npm install
 ```
 
-Run the build process into `dist` folder, detecting and automatically building changes in src.
+Run the build process into `dist` folder, detecting and automatically building changes in src:
 
 ```bash
 npm run build:watch #'npm run build' if there is no need to watch for changes
@@ -48,18 +42,50 @@ Contained in the `app` folder.
 cd app # from the root folder
 ```
 
-Install the application dependencies. The Halstack React CDK dependency is linked to the local `lib` folder. This one must have been previously built.
+Install the application dependencies. The Halstack React library dependency is linked to the local `lib` folder. This one must have been previously built:
 
 ```bash
 npm install
 ```
 
-Start the application.
+Start the application:
 
 ```bash
 npm start # runs create-react-app dev server
 ```
 
 Now, anytime you make a change to the library or the app, `create-react-app` will live-reload your local dev server so you can iterate on your component in real-time.
 
-## Running tests
+### Running tests
+
+Contained in the `lib` folder.
+
+```bash
+cd lib
+```
+
+Launch all the tests:
+
+```bash
+npm test
+```
+
+Or run only those of a specific component:
+
+```bash
+npm test Button.test.js
+```
+
+### Storybook
+
+Contained in the `lib` folder.
+
+```bash
+cd lib
+```
+
+Run storybook:
+
+```bash
+npm run storybook
+```
diff --git a/website/README.md b/website/README.md
@@ -1,8 +1,18 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 
+<h1 align="center">Halstack documentation site</h1>
+
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
 ## Getting Started
 
-First, run the development server:
+First, install the project dependencies:
+
+```bash
+npm install
+# or
+yarn
+```
+
+And then, run the development server:
 
 ```bash
 npm run dev
