1.1.40 • Published 3 years ago

@dacost/rhokey-ui v1.1.40

Weekly downloads
-
License
MIT
Repository
gitlab
Last release
3 years ago

Rhokey UI library

Open source dynamic & custom ui components library


Import 🚀

Prerequisites 📋

React app


Yarn

yarn add @dacost/rhokey-ui

Npm

npm i @dacost/rhokey-ui

Import Components 📋

Add google icon & fonts material cdn's to the header on your index.html

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0" />

Import one component

//AppComponent.js
import React from 'react';
import {Input} from '@dacost/rhokey-ui';

fuction AppComponent(){
  return(
    <>
      <Input />
    </>
  )
}

export default AppComponent;

Import multiple components

//AppComponent.js
import React from 'react';
import {Input, Calendar} from '@dacost/rhokey-ui';

fuction AppComponent(){
  return(
    <>
      <Input />
      <Calendar />
    </>
  )
}

export default AppComponent;

Source Code 🛠️

Clone the project 🔧

git clone git@gitlab.com:dacost.dev/rhokey-ui.git

Install dependecies 📖

Yarn

yarn

Npm

npm i

Run project ⚙️

Yarn

yarn storybook

Npm

npm run storybook

NPM deploy 🆙

Change the package.json

//package.json
{
  "devDependencies": {
    "@babel/core": "^7.18.10",
    "@rollup/plugin-babel": "^5.3.1",
    "@rollup/plugin-commonjs": "^22.0.2",
    "@rollup/plugin-node-resolve": "^13.3.0",
    "@rollup/plugin-replace": "^4.0.0",
    "@storybook/addon-actions": "^6.5.10",
    "@storybook/addon-essentials": "^6.5.10",
    "@storybook/addon-interactions": "^6.5.10",
    "@storybook/addon-links": "^6.5.10",
    "@storybook/builder-webpack4": "^6.5.10",
    "@storybook/manager-webpack4": "^6.5.10",
    "@storybook/react": "^6.5.10",
    "@storybook/testing-library": "^0.0.13",
    "@svgr/webpack": "^6.3.1",
    "autoprefixer": "^8.0.0",
    "babel-loader": "^8.2.5",
    "postcss": "^8.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "rollup": "^2.78.1",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-typescript2": "^0.32.1",
    "rollup-plugin-uglify": "^6.0.4"
  },
  "peerDependencies": {
    "postcss": "^8.0.0"
  },
  "scripts": {
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "buildLib": "rollup -c"
  },
  "main": "dist/index.js",
  "files": [
    "dist"
  ],
  "browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "dependencies": {
    "@ladifire-opensource/babel-plugin-transform-stylex": "^0.1.0-beta.0",
    "@ladifire-opensource/stylex": "^0.1.0-beta.0"
  }
}
    If you use yarn delete yarn.lock & if you use npm delete package.lock,
    Also delete .node_modules

Intall dependencies 📝

Yarn

yarn

Npm

npm i

NPM init 💻

npm login
npm init

Build 📦

Yarn

yarn buildLib

Npm

npm run buildLib

Publish 🎸

Change react dependencies to peerDependencies in package.json before publish

  "devDependencies": {
    "@babel/core": "^7.18.10",
    "@rollup/plugin-babel": "^5.3.1",
    "@rollup/plugin-commonjs": "^22.0.2",
    "@rollup/plugin-node-resolve": "^13.3.0",
    "@rollup/plugin-replace": "^4.0.0",
    "@storybook/addon-actions": "^6.5.10",
    "@storybook/addon-essentials": "^6.5.10",
    "@storybook/addon-interactions": "^6.5.10",
    "@storybook/addon-links": "^6.5.10",
    "@storybook/builder-webpack4": "^6.5.10",
    "@storybook/manager-webpack4": "^6.5.10",
    "@storybook/react": "^6.5.10",
    "@storybook/testing-library": "^0.0.13",
    "@svgr/webpack": "^6.3.1",
    "autoprefixer": "^8.0.0",
    "babel-loader": "^8.2.5",
    "postcss": "^8.0.0",
    "rollup": "^2.78.1",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-typescript2": "^0.32.1",
    "rollup-plugin-uglify": "^6.0.4"
  },
  "peerDependencies": {
    "postcss": "^8.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },

Run again the build command

Yarn

yarn buildLib

Npm

npm run buildLib

(The whole above process is necessary to avoid problems when importing the component by duplicate React projects)

Finally publish your own library 🤘

npm publish

Bulding by 🖇️


Contributing 📖

Por favor lee el CONTRIBUTING.md


Versions 📌

respostory tags


Authors ✒️


License 📄

Rhokey UI is open source software licensed as MIT. - LICENSE.md

1.1.29

3 years ago

1.1.28

3 years ago

1.1.30

3 years ago

1.1.34

3 years ago

1.1.33

3 years ago

1.1.32

3 years ago

1.1.31

3 years ago

1.1.38

3 years ago

1.1.37

3 years ago

1.1.36

3 years ago

1.1.35

3 years ago

1.1.39

3 years ago

1.1.40

3 years ago

1.1.27

3 years ago

1.1.26

3 years ago

1.0.19

3 years ago

1.0.18

3 years ago

1.0.17

3 years ago

1.0.16

3 years ago

1.0.22

3 years ago

1.0.21

3 years ago

1.0.20

3 years ago

1.0.26

3 years ago

1.0.25

3 years ago

1.0.24

3 years ago

1.0.23

3 years ago

1.0.29

3 years ago

1.0.28

3 years ago

1.0.27

3 years ago

1.0.30

3 years ago

1.1.1

3 years ago

1.1.0

3 years ago

1.1.9

3 years ago

1.1.8

3 years ago

1.1.7

3 years ago

1.1.6

3 years ago

1.1.5

3 years ago

1.1.4

3 years ago

1.1.3

3 years ago

1.1.2

3 years ago

1.1.12

3 years ago

1.1.11

3 years ago

1.1.10

3 years ago

1.1.16

3 years ago

1.1.15

3 years ago

1.1.14

3 years ago

1.1.13

3 years ago

1.1.19

3 years ago

1.1.18

3 years ago

1.1.17

3 years ago

1.1.23

3 years ago

1.0.11

3 years ago

1.1.22

3 years ago

1.0.10

3 years ago

1.1.21

3 years ago

1.1.20

3 years ago

1.0.15

3 years ago

1.0.14

3 years ago

1.1.25

3 years ago

1.0.13

3 years ago

1.0.12

3 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago