@datability/8ui 0.1.5 → 0.1.6

package/README.md

@@ -6,173 +6,20 @@
   <h1>Datability UI</h1>
 </div>
 
-## Problem that caused this project
+**Datability UI** contains foundational React UI component base libraries.
 
-Datability Team `[frontend]` every time they start a project they have a page that has a `collection of components` to use within the project , and then there's a components called `Base - components` that's not complicated. But when doing this in many projects , and the `Base - components is edited` , it must be followed up and edited in every project for `[frontend]` , causing difficulty and the information is not consistent
-
-Nuk Supagorn 😎 said :
-
-- It would be very helpful if we could make the `frontend components` we use more flexible. It becomes a `npm package` that can be downloaded from the same place
-
-- Because if corrections occur, they will be able Can be `edited in one spot`
-
-<br>
-
-## About the project
-
-Building and publishing frontend components to `Node Package Manager(NPM)` easy to share and reuse code useful in projects , this article will guide you through the steps of building and `publishing` NPM package.
-
-<br>
-
-## Prerequisites
-
-- [NPM account](https://www.npmjs.com)
-- Docker
-- NodeJS
-- GitHub for clone , push and others
-- Basic understanding of JavaScript / TypeScript
-
-<br>
-
-## Project structure
-
-```sh
-    .
-    ├── dist                          # compiled folder for `publish` to npm
-    ├── node_modules                  # package to use in project
-    ├── public                        # keep index.html for react start
-    ├── src                           # important folder
-    │   ├── components                # components folder for usage
-    │   │   ├── Button                # example `Button` component
-    │   │   │   ├── index.scss # - style css
-    │   │   │   ├── index.tsx         # - button usage
-    │   │   ├── DatePicker            # example `DatePicker` component
-    │   │   │   ├── index.scss # - style css
-    │   │   │   ├── index.tsx         # - button usage
-    │   │   ├── ...                   # other components will append here
-    │   │   ├── index.ts              # file to import all components and export
-    │   ├── App.tsx                   # calling component to display
-    │   └── index.tsx                 # calling component to display
-    ├── docker-compose.yml            # docker compose file to start project
-    ├── package.json                  # package.json to script command
-    ├── tsconfig.json                 # tsconfig.json to setting script command
-    └──
-```
-
-<br>
-
-## 📢 Getting started - `Building & Publishing` NPM Package
-
-1.) Clone the repo
-
-```sh
-git clone git@github.com:datability-th/npm-components-fe.git
-```
-
-2.) Open 2 terminals
-
-- 2.1 ) Terminal 1 : keep running `npm run start`
-
-```sh
-$ docker compose up
-```
-
-- 2.2 ) Terminal 2 : bash in to `npm-fe` container for use npm & script command
-
-```sh
-$ sudo docker exec -it npm-fe bash
-```
-
-3.) Register new component in
-
-```sh
-    ├── src                           # important folder
-    │   ├── components                # components folder for usage
-    │   │   ├── Button                # example `Button` component
-    │   │   │   ├── index.scss # - style css
-    │   │   │   ├── index.tsx         # - button usage
-    │   │   ├── DatePicker            # example `DatePicker` component
-    │   │   │   ├── index.scss # - style css
-    │   │   │   ├── index.tsx         # - button usage
-    │   │   ├── 📌  # <= Declare here & register in `index.ts` below
-    │   │   ├── index.ts              # file to import all components and export
-```
-
-4.) Use command to create compiled folder `dist` to publish to `NPM`
-
-```sh
-npm run build
-```
-
-5.) Before publish to `NPM` you need to login in command
-
-- Login into Gmail : databilitynpm@gmail.com , `Password ask (Top & P'Nuk) 📢`
-- Promp command below `npm login` . . . it will return url to replace digit code
-- Open Gmail copy _digit code_ and replace in website
-- And press enter , command will say ( Logged in ✔ )
-
-```sh
-npm login
-```
-
-6.) Use command to publish `NPM` package
-
-```sh
-npm publish --access public
-```
-
-7.) Let check in
-https://www.npmjs.com/settings/databilitynpm/packages
-
-<br>
-
-## ⚙ Getting started - `Using` NPM Package
-
-1.) Download `NPM` Package
-
-```sh
-npm i npm-components-fe
-```
-
-2.) Calling tools from package that we did
-
-```sh
-import './App.css';
-import { All, Button, DatePicker } from 'npm-components-fe' // 👈
-
-function App() {
-  return (
-    <div className="App">
-      <p>This is the result after calling component from npm </p>
-
-      <All /> // 👈
-    </div>
-  );
-}
-
-export default App;
-```
-
-<br>
-
-## Contact
-
-Top & Nuk at `Datability` 🏠
-
-<br>
-
-## Acknowledgments
-
-Thankyou for all tutorials
-
-- [Build & Publish React component as NPM package using Typescript compiler](https://blog.anoopjadhav.in/part-1-build-publish-react-component-as-npm-package-using-typescript-compiler)
+<div align="center">
 
-- [A Step-by-Step Guide to Publishing Your Own React NPM Package](https://blog.nonstopio.com/a-step-by-step-guide-to-publishing-your-own-react-npm-package-fa2b7f1d149)
+[![npm latest package](https://img.shields.io/npm/v/@datability/8ui/latest.svg)](https://www.npmjs.com/package/@datability/8ui)
+[![npm next package](https://img.shields.io/npm/v/@datability/8ui/next.svg)](https://www.npmjs.com/package/@datability/8ui)
+[![npm downloads](https://img.shields.io/npm/dm/@datability/8ui.svg)](https://www.npmjs.com/package/@datability/8ui)
 
-- [How to Build and Publish Your First React NPM Package](https://dev.to/femi_akinyemi/how-to-build-and-publish-your-first-react-npm-package-24o3)
+</div>
 
-- [How to package your React Component for distribution via NPM](https://itnext.io/how-to-package-your-react-component-for-distribution-via-npm-d32d4bf71b4f)
+# Documentation
+...
 
-- [How to Publish a React Component as a Package to Npm](https://hackernoon.com/how-to-publish-a-react-component-as-a-package-to-npm)
+# Examples
+...
 
-- [Quick and simple create and publish React component on npm](https://medium.com/@irekrog/quick-and-simple-create-and-publish-react-component-on-npm-df528cd26b0)
+<br>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datability/8ui",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "",
   "main": "dist/components/index.js",
   "types": "dist/components/index.d.ts",