Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create resuable library - ASAB WebUI Components #1

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

Create resuable library - ASAB WebUI Components #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
24bff0a
Update changelog, readme and .gitignore files
Jul 26, 2023
39e41fa
WIP updates towards the creating of separate package library
Jul 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 6 additions & 11 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,15 @@
# See https://help.github.com/ignore-files/ for more about ignoring files.

# dependencies
/node_modules

# testing
/coverage

# production
/build
/dist

# misc
.DS_Store

npm-debug.log*
yarn-debug.log*
yarn-error.log*

yarn.lock
yarn.lock

/coverage
/dist
/debug
/node_modules
607 changes: 0 additions & 607 deletions CHANGELOG.md
View file
Open in desktop

Large diffs are not rendered by default.

160 changes: 11 additions & 149 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,166 +1,28 @@
ASAB Web UI
ASAB Web UI Components
===========

ASAB Web UI a library of webpack build scripts and React components built on top of [reactstrap](https://reactstrap.github.io/).
It is inspired by the architecture of [ASAB](https://github.com/teskalabs/asab) python project.
It is designed primarily for web-based user interfaces for ASAB microservices but it can be used in different architectures as well.
ASAB Web UI Components is a package which is used as a dependency to ASAB WebUI related applications.


## Quick links
## Reusable components

- [Bootstrap](https://getbootstrap.com)
- [ReactStrap](https://reactstrap.github.io)
- [Atlas Icons](https://atlasicons.vectopus.com)
TODO


## Unified Features
## Add to the package dependencies

- Admin UI template
- Header
- Sidebar
- Alerts
- Network activity indicator
- Axios based REST API configuration


## REST API design

TODO ...

```
[ASAB UI App] -- [ HTTP proxy (API_PATH) ] -- [ actual microservices ]
```

TODO: Example of `webpackDevServer` proxy config.

The default `API_PATH` is `api`, it means that it uses the HTTP location of the application itself.



## Start a project

Add this repo as a submodule to your project.

```
$ git init .
$ git submodule add https://github.com/TeskaLabs/asab-webui.git
```

Bootstrap your project with example files.

```
$ rsync -a --ignore-existing ./asab-webui/demo/* .
```

Install dependencies

```
$ yarn install
```

## Run

`yarn start` runs the application in development mode.

```
$ yarn start
```

### Run with `DEV` configuration
Latest master version:

```
$ yarn start -c conf/config.js
```

This option is suitable for developers, who want to provide specific configuration for the application (e.g. simulate list of `tenants`) and need to work on parts of the application without bundling it into static files for production via `yarn build`.

`DEV` configuration provides an option to simulate some part of the information usually obtained from the service, such as simulation of `userinfo` or any other configuration.

**Important note**: the configuration set in `devConfig` is **NOT** propagated to the production environment!

To find more about how to use `devConfig` and simulate `userinfo`, see `doc` folder in ASAB Web UI project:

```
/doc/devconfig.md
```

Example of `config.js`

Where

* `app` provide url, service and other common configuration, which is similar to build config

* `devConfig` provide configuration for devs, where e.g. `userinfo` can be simulated via `MOCK_USERINFO`. This is not a part of build config

* `webPackDevServer` where webpack settings for dev server is provided. This is not a part of build config

```
module.exports = {
app: {
BASE_URL: 'http://localhost:3000',
API_PATH: 'api',
SERVICES: {
openidconnect: 'openidconnect',
asab-config: 'asab-config',
seacat-auth-webui: 'http://localhost:3000/auth'
}
},
devConfig: {
MOCK_USERINFO: {
"email": "test@test.te",
"phone": "0123456789",
"username": "Test",
"resources": ["test:testy:read"],
"roles": ["default/Gringo"],
"sub": "tst:123456789",
"tenants": ["default"]
}
},
webPackDevServer: {
port: 3000,
proxy: {
'/api/asab-config': {
target: "http://localhost:8080",
pathRewrite: { '^/api/asab-config': ''}
},
}
}
"dependencies": {
"asab-webui": "Pe5h4/asab-webui#master"
}
```


## Build

`yarn build` bundles the application into static files for production.

```
$ yarn build
```

### Build for production to a specific public url

```
$ yarn build -u https://example.com/app
```

### Build for production with configuration

```
$ yarn build -c conf/config.js
```

Example of `config.js`
or latest tag:

```
module.exports = {
app: {
BASE_URL: 'https://example.com',
API_PATH: 'api',
SERVICES: {
openidconnect: 'openidconnect',
asab-config: 'asab-config',
seacat-auth-webui: 'https://example.com/auth'
}
}
"dependencies": {
"asab-webui": "Pe5h4/asab-webui#<tag-version>"
}
```
2 changes: 1 addition & 1 deletion config/defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ module.exports = {
webpack: {
resolve: {
alias: {
"asab-webui": path.resolve('asab-webui', 'src')
"asab-webui": path.resolve('src')
}
}
},
Expand Down
70 changes: 70 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
{
"name": "asab-webui-components",
"version": "1.0.0",
"main": "dist/index.js",
"scripts": {
"build": "node ./script/build.js"
},
"author": "",
"license": "",
"description": "",
"browserslist": ["defaults"],
"devDependencies": {
"@babel/core": "^7.9.0",
"@babel/preset-env": "^7.18.10",
"@babel/preset-react": "^7.18.6",
"argparse": "^2.0.1",
"assign-deep": "^1.0.1",
"autoprefixer": "^10.4.13",
"babel-loader": "^9.1.0",
"babel-plugin-transform-object-rest-spread": "^7.0.0-beta.3",
"babel-polyfill": "^7.0.0-beta.3",
"css-loader": "^6.7.2",
"css-mqpacker": "^7.0.0",
"cssnano": "^5.1.14",
"file-loader": "^6.0.0",
"fs-extra": "^10.1.0",
"html-webpack-plugin": "^5.5.0",
"interpolate-html-plugin": "^4.0.0",
"mini-css-extract-plugin": "^2.7.0",
"monaco-editor-webpack-plugin": "^7.0.1",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"postcss": "^8.4.19",
"postcss-loader": "^7.0.1",
"sass": "^1.56.1",
"sass-loader": "^13.2.0",
"style-loader": "^3.3.1",
"webpack": "^5.75.0",
"webpack-bundle-analyzer": "^4.7.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^4.11.1",
"webpack-node-externals": "^3.0.0",
"window": "^4.2.7"
},
"dependencies": {
"@coreui/icons": "^1.0.1",
"axios": "^0.21.1",
"core-js": "3",
"date-fns": "^2.28.0",
"bootstrap": "4.6.0",
"css-minimizer-webpack-plugin": "^4.2.2",
"file-saver": "^2.0.5",
"i18next": "^20.3.5",
"i18next-browser-languagedetector": "^6.1.2",
"i18next-http-backend": "^1.3.0",
"moment": "^2.24.0",
"monaco-editor": "^0.33.0",
"react": "^17.0.0",
"react-content-loader": "^6.1.0",
"react-dom": "^17.0.0",
"react-i18next": "^11.8.12",
"react-hook-form": "^7.43.1",
"react-json-view": "^1.21.1",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"react-simple-tree-menu": "^1.1.18",
"reactstrap": "^8.9.0",
"redux": "^4.0.5",
"terser-webpack-plugin": "^5.3.6"
}
}
Empty file removed public/.nothing.here
View file
Open in desktop
Empty file.
28 changes: 28 additions & 0 deletions public/body.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
body {
background-color: #f3f4fa;
}

body::after {
content: "";
position: absolute;
top: 42%;
left: 50%;

display: flex;
flex-direction: column;
justify-content: center;
width: 38%;
height: 1rem;

transform: translate(-50%, -42%);
background-color: #315ee3;

overflow: hidden;
text-align: center;
white-space: nowrap;
background-image: linear-gradient(45deg, hsla(0, 0%, 100%, .15) 25%, transparent 0, transparent 50%, hsla(0, 0%, 100%, .15) 0, hsla(0, 0%, 100%, .15) 75%, transparent 0, transparent);
background-size: 1rem 1rem;
animation: progress-bar-stripes 1s linear infinite;
transition: width .6s ease;
border-radius: 4px;
}
54 changes: 54 additions & 0 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="./manifest.json">
<link rel="shortcut icon" href="./media/favicon/favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="./media/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="./media/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="./media/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="./media/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="./media/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="./media/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="./media/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="./media/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./media/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="./media/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="./media/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="./media/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="./media/favicon/favicon-16x16.png">
<link rel="stylesheet" href="body.css">

<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="./media/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- Dynamic config section start -->
<meta name="header-logo-full">
<meta name="header-logo-full-dark">
<meta name="header-logo-minimized">
<meta name="header-logo-minimized-dark">
<meta name="title">
<meta name="custom-css-file">
<!-- Dynamic config section end -->

<link rel="manifest" href="./manifest.json">
<link rel="stylesheet" href="body.css">
<title>%__TITLE__%</title>
<meta property="og:title" content="%__TITLE__%">
<meta property="og:description" content="...">
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="app">
</div>
</body>
</html>
2 changes: 0 additions & 2 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,6 @@ export { validateConfiguration } from './config/validateConfiguration';
export { default as TreeMenu } from './components/TreeMenu';
export { locationReplace } from './components/locationReplace';
export { getBrandImage } from './components/branding/BrandImage'

// TODO: Review componentLoader if it is needed after containerisation to microfrontends
export { componentLoader } from './components/componentLoader';

import "./styles/index.scss";