@ballistix.digital/react-components 0.3.0 → 0.3.3

package/README.md

@@ -1,46 +1,71 @@
-# Getting Started with Create React App
+# BallistiX React Component Library Documentation
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+## 1. Introduction
 
-## Available Scripts
+A repo as library to easily build, test and internally use standardized React.js components across multiple projects.
 
-In the project directory, you can run:
+### 1.2 Features
 
-### `npm start`
+- Fully responsive components out of the box.
+- Ability to fully customize a component's styling.
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+## 2. Usage
 
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
+This library assumes you have worked with React.js before. If that is not the case, it is recommended you go trough [React.js' Getting Started Course](https://reactjs.org/docs/getting-started.html) first. This project is written in TypeScript. If you are not familiar with TypeScript, [learn it](https://www.typescriptlang.org/docs/). It wil improve your life dramatically.
 
-### `npm test`
+### 2.1 Installation
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+In order to start using the BallistiX Component Library in your project, you will need to add it as a dependency to your project. To add the library to your project, run:
 
-### `npm run build`
+```
+yarn add @ballistix/react-components
+```
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+That's it. You're all set and done. To import components you can do so using following import statement:
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+```
+import ButtonElement from '@ballistix/react-components/elements/Button';
+```
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+For a fully listed overview of available components and their props and states, please visit https://layeredprints.github.io/react-components.
 
-### `npm run eject`
+## 3. Contributing
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+This library assumes you have worked with React.js before. If that is not the case, it is recommended you go trough [React.js' Getting Started Course](https://reactjs.org/docs/getting-started.html) first. This project is written in TypeScript. If you are not familiar with TypeScript, [learn it](https://www.typescriptlang.org/docs/). It wil improve your life dramatically.
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+### 3.1 Requirements
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+To run this project you will need to have some tools and dependencies installed:
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+- [Git](https://git-scm.com/) - For cloning this project as a template to your machine, and use as your own.
+- [Node.js](https://nodejs.org/en/) - For running Next.js and tools in this project.
+- [Node Package Manager](https://www.npmjs.com/) (NPM) / [Yarn](https://yarnpkg.com/) - For installing dependencies.
 
-## Learn More
+### 3.2 Quickstart
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+To run the project you must first clone it as a template onto your machine. You can do this by navigating in a terminal to a location you are comfortable downloading the project in, and running:
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+```
+git clone https://github.com/layeredprints/react-components/
+```
+
+After that, you must navigate into the project's folder and install the dependencies with Node Package Manager or Yarn.
+
+```
+cd react-components && yarn
+```
+
+Once all dependencies are installed you should be able to start up a development server.
+
+```
+yarn storybook
+```
+
+Now visit `http://localhost:6006/` to open the Storybook. Congratulations, you are now ready to start building a components!
+
+## 4. Resources
+
+- [React](https://reactjs.org/) - A JavaScript library for building user interfaces.
+- [Tailwind CSS](https://tailwindcss.com/) - A utility-first CSS framework packed with standardized classes for easy styling.
+- [Tailwind UI](https://tailwindui.com/) - A library with pre-build and styled responsive components.
+- [TanStack](https://tanstack.com/) - High-quality open-source software for web developers.