Let's make things easy (and beautiful ๐)
- Buttons (variant: add, delete, save changes, cancel, and loader)
- Drawer
- Divider
- Icons:
- IconAwesome
- IconLabel
- InfoBar (WellInfo previously)
- ModalDialog
- Table
- TableFilter
- Preloader
- BaseTable
- AttendeesTable
- Dashboard
- EventTable
- ExcerciseTable
- GroupTable
- LanguageTable
- LanguageCategoriesTable
- RoleTable
- SiteTable
- UserTable
Install dependencies with yarn install
or npm install
.
Run yarn dev
or npm run dev
to start local dev server (will be run on http://localhost:6006).
yarn build
Build storybook yarn sb:build
or npm run sb:storybook
Run yarn sb:start
or npm run sb:start
to start local dev server (will be run on http://localhost:6006).
Add new item with a form in Drawer
Delete item confirmation with Modal Dialog
To add the UI library for a first time:
npm i og-ui
or yarn add og-ui
To upgrade the current version:
npm update og-ui
or yarn upgrade og-ui
When time to update library comes (new components added or improved), follow next steps to update the library version.
- Be sure that your code is well tested, then commit it
- Increase verion number inside
package.json
and commit this change - Build new version and commit results (
TODO: add gitlab worker to build new version
) - Update related projects (
yarn upgrade og-ui
ornpm update og-ui
)
- commit message (string)
- release type (oneOf: ['patch','major','minor'])
Patch example: 1.0.1 -> 1.0.2 (Increment the third digit) Minor example: 1.0.12 -> 1.1.0 (Increment the middle digit and reset last digit to zero) Major example: 1.3.54 -> 2.0.0 (Increment the first digit and reset middle and last digits to zero)
Details: https://docs.npmjs.com/about-semantic-versioning
- run build and then build:docs command
- commit and push changes to git (need to ask comment message as a param)
- change package version (
npm version <update_type>
, seerelease type
input param) - publish changes to npm (
npm publish
)
<script
src="https://unpkg.com/react@17/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/og-ui-library/dist/og-ui-library.umd.js"
crossorigin
></script>
...
<script type="text/javascript">
var placeHere = document.getElementById("content-table-inner");
var Button = OgUiLib.Button;
const domContainer = document.getElementById("content-table-inner");
ReactDOM.render(
React.createElement(Button, { label: "Victory ๐", size: "large" }),
domContainer
);
</script>