axitech-widget 1.0.0-dev.2 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +67 -166
  2. package/package.json +2 -2
package/README.md CHANGED
@@ -1,189 +1,90 @@
1
- [![Netlify Status](https://api.netlify.com/api/v1/badges/b1b84831-789e-4629-a9e3-55a36e136653/deploy-status)](https://app.netlify.com/sites/sharp-babbage-154f0a/deploys)
1
+ # Axitech Widget
2
2
 
3
- # Vue Component Library Starter
3
+ The Axitech Widget is a powerful tool that allows clients to seamlessly integrate insurance claim experiences (such as accidents, thefts, and damages) into their own web applications. This repository provides two methods of using the widget: installation via npm and usage through a CDN URL.
4
4
 
5
- > Create your own [Vue 3](https://v3.vuejs.org/) component library with TypeScript, [Vite](https://vitejs.dev) and [VitePress](https://vitepress.vuejs.org/).
5
+ ## Installation
6
6
 
7
- Sooner or later, you will find that creating a component library is much better than having all components inside your app project. A component library force to you remove app specific logic from your components, making it easier to test and reuse them in other apps.
7
+ ### Using npm
8
8
 
9
- Once the components are in a library, documentation becomes critical. This starter project includes a documentation app powered by VitePress. It not only documents the usage of the component, but also provides a testing bed during the development of components. See the generated documentation app [here](https://sharp-babbage-154f0a.netlify.com/).
10
-
11
-
12
- ## Setup
13
-
14
- > When running `docs:dev` for the first time, you may encounter error like `vitepress data not properly injected in app` in your browser. Restart the server and reload the browser. Please refer to [issue #30](https://github.com/wuruoyun/vue-component-lib-starter/issues/30) for more details.
9
+ To install the Axitech Widget from npm, run the following command in your project directory:
15
10
 
16
11
  ```bash
17
- # install dependencies
18
- npm install
19
-
20
- # start the doc app with hot reload, great for testing components
21
- npm run docs:dev
22
-
23
- # build the library, available under dist
24
- npm run build
25
-
26
- # build the doc app, available under docs/.vitepress/dist
27
- npm run docs:build
28
-
29
- # preview the doc app locally from docs/.vitepress/dist
30
- npm run docs:serve
12
+ npm install axitech-widget --save
31
13
  ```
32
14
 
33
- You may use [Netlify](https://www.netlify.com/) to auto build and deloy the doc app like this project does.
34
-
35
- ## Develop and test locally
36
-
37
- The best way to develop and test your component is by creating demos in `docs/components/demo` folder, as shown by the example components.
38
-
39
- If you want to test the library in your Vue3 app locally:
40
-
41
- - In the root folder of this library, run `npm link`. This will create a symbolic link to the library.
42
- - In the root folder of your client app, run `npm link axitech-widget`. This will add the symbolic link to the `node_modules` folder in your client app.
43
- - You can now import `axitech-widget` in your client app.
44
-
45
- There is no need to add `axitech-widget` to your client app's dependency in this case.
46
-
47
- If you made changes to the library, you will need to rebuild the library. Your Vue3 app shall hot reload when the building of library is completed.
48
-
49
- ## How it works
50
-
51
- ### Components
15
+ ### Using CDN
52
16
 
53
- The library is a [Vue plugin](https://v3.vuejs.org/guide/plugins.html). The `install` function in [index.ts](src/index.ts) registers all components under [components](src/components) to Vue globably.
17
+ Alternatively, you can include the widget in your HTML file using a CDN URL:
54
18
 
55
- The components are also exported by [index.ts](src/index.ts) so that the client app can import them individually and register them locally, instead of using the library as a plugin. This may be a better option if the client app only use a small set of components in your library.
56
-
57
- As there are already many UI component libraries for Vue 3, you may just want to build on top of one of them and create components for your specific needs. The Component B in this starter shows the example of using as the fundation library. However, this means the client app shall also use the same fundation component library as your library does.
58
-
59
- The doc app itself is a client app of the libary, therefore PrimeVue is imported in [docs/.vitepress/theme/index.js](docs/.vitepress/theme/index.js). The configuration in [docs/.vitepress/config.js](docs/.vitepress/config.js) below forces VitePress to resolve these modules with no duplication, avoiding error at runtime, also has Vue in its dependency.
60
-
61
- ```js
62
- module.exports = {
63
- vite: {
64
- resolve: {
65
- dedupe: ['vue'],
66
- },
67
- },
68
- }
19
+ ```html
20
+ <script src="https://unpkg.com/axitech-widget@1.0.0/dist/axitech-widget.umd.js"></script>
69
21
  ```
70
22
 
71
- > In [vite.config.ts](vite.config.ts), format 'umd' is not present in `build.lib.formats` option
23
+ ## Usage
72
24
 
73
- ### Utilities and constants
25
+ ### ES Module
74
26
 
75
- The library includes example utilities and constants. They are also exported in [index.ts](src/index.ts). The client app may use them as below:
27
+ If you've installed the widget using npm and are using it as an ES module, you can import and use it in your JavaScript code like this:
76
28
 
77
- ```js
78
- <script lang="ts">
79
- import { MyConstants, MyUtil } from 'axitech-widget'
29
+ ```javascript
30
+ import { load } from 'axitech-widget';
80
31
 
81
- export default {
82
- data () {
83
- return {
84
- magicNum: MyConstants.MAGIC_NUM
85
- }
32
+ load('YOUR_API_KEY', {
33
+ type: 'claim',
34
+ clientId: 'YOUR_CLIENT_ID',
35
+ user: {
36
+ id: 'test',
37
+ name: 'Test User',
38
+ email: 'test@test.test',
39
+ phone: '+4917123456789',
86
40
  },
87
- methods: {
88
- add (a:number, b:number) {
89
- return MyUtil.add(a, b)
90
- }
91
- }
92
- }
93
- </script>
94
- ```
95
-
96
- ### Styling
97
-
98
- Individual compopnent may have styles defined in its `.vue` file. They will be processed, combined and minified into `dist/style.css`, which is included in the `exports` list in [package.json](package.json).
99
-
100
- If you have library level styles shared by all components in the library, you may add them to [src/assets/main.scss](src/assets/main.scss). This file is imported in [index.ts](src/index.ts), therefore the processed styles are also included into `dist/style.css`. To avoid conflicting with other global styles, consider pre-fixing the class names or wrapping them into a namespace class.
101
-
102
- If you have your own special set of SVG icons, you may create a font file (`.woff` format) using tools like [Icomoon](https://icomoon.io/) or [Fontello](https://fontello.com/). This starter includes an example font file [src/assets/fonts/myfont.woff](src/assets/fonts/myfont.woff) and references it in [src/assets/main.scss](src/assets/main.scss), with utility icon CSS classes. An icon from the font file is used in Component A. Vite will include the font file into the build, see [https://vitejs.dev/guide/assets.html](https://vitejs.dev/guide/assets.html).
103
-
104
- The client app shall import `style.css`, usually in the entry file:
105
-
106
- ```js
107
- import 'axitech-widget/dist/style.css'
108
- ```
109
-
110
- ### Third-party dependencies
111
-
112
- Third-party libraries used by you library may bloat up the size of your library, if you simply add them to the `dependencies` in [package.json](package.json).
113
-
114
- The following are some strategies to reduce the size of your library:
115
-
116
- #### Externalization
117
-
118
- If you expect the client app of your library may also need the same dependency, you may externalize the dependency. For example, to exclude PrimeVue from your library build artifact, in [vite.config.ts](vite.config.ts), you may have
119
-
120
- ```js
121
- module.exports = defineConfig({
122
- rollupOptions: {
123
- external: ['vue', /primevue\/.+/]
124
- }
125
- }
126
- })
127
- ```
128
-
129
- The dependency to be externalized may be declared as peer dependency in your library.
130
-
131
- #### Cherry picking
132
-
133
- If you don't expect the client app of your library also needing the same dependency, you may embed cherry-picked functions. For example, to embed the `fill` function of popular library [lodash](https://lodash.com), import the `fill` function like the following:
134
-
135
- ```js
136
- import fill from 'lodash/fill'
137
- ```
138
-
139
- Even with tree-shaking, the codes being brought into your library may still be large, as the function may have its own dependencies.
140
-
141
- Note that `import { fill } from 'lodash'` or `import _ from 'lodash'` will not work and will embed the whole `lodash` library.
142
-
143
- Finally, if your client app also use `lodash` and you don't want `lodash` to be in both the client app and your libraries, even after cherry-picking, you may consider cherry-picking in component library and re-export them as utils for client to consume, so that the client does not need to depend on `lodash`, therefore avoiding duplication.
144
-
145
- ### Type generation
146
-
147
- In [tsconfig.json](tsconfig.json), the following options instructs `tsc` to emit declaration (`.d.ts` files) only, as `vite build` handles the `.js` file generation. The generated `.d.ts` files are sent to `dist/types` folder.
148
-
149
- ```json
150
- "compilerOptions": {
151
- "declaration": true,
152
- "emitDeclarationOnly": true,
153
- "declarationDir": "./dist/types"
154
- }
155
- ```
156
-
157
- In [package.json](package.json), the line below locates the generated types for library client.
158
-
159
- ```json
160
- "types": "./dist/types/index.d.ts",
41
+ insurance: {
42
+ provider: 'Test Insurance Provider',
43
+ policyNumber: '123456',
44
+ },
45
+ contact: {
46
+ phone: '0330 058 4077',
47
+ email: 'claims@clientname.com',
48
+ },
49
+ onSuccess: console.log,
50
+ onError: console.log,
51
+ });
161
52
  ```
162
53
 
163
- > In [vite.config.ts](vite.config.ts), `build.emptyOutDir` is set to `false` and `rimraf` is used instead to remove the `dist` folder before the build. This is to avoid the `dist/types` folder generated by `tsc` being deleted when running `vite build`.
164
-
165
- ### Configuration
166
-
167
- #### TypeScript
168
-
169
- In [tsconfig.json](tsconfig.js), set the following as recommended by Vite (since esbuild is used). However, enableing this option leads to https://github.com/vitejs/vite/issues/5814. The workaround is to also enable `compilerOptions.skipLibCheck`.
170
-
171
- ```json
172
- "compilerOptions": {
173
- "isolatedModules": true
174
- }
54
+ ### UMD (Global) Version
55
+
56
+ If you're using the UMD version via the CDN, you can load and initialize the widget within a DOMContentLoaded event listener:
57
+
58
+ ```html
59
+ <script>
60
+ window.addEventListener('DOMContentLoaded', (event) => {
61
+ ClaimsWidget.load('YOUR_API_KEY', {
62
+ clientId: 'YOUR_CLIENT_ID',
63
+ user: {
64
+ id: 'test',
65
+ name: 'Test User',
66
+ email: 'test@test.test',
67
+ phone: '+4917123456789',
68
+ },
69
+ insurance: {
70
+ provider: 'Test Insurance Provider',
71
+ policyNumber: '123456',
72
+ },
73
+ contact: {
74
+ phone: '0330 058 4077',
75
+ email: 'claims@clientname.com',
76
+ },
77
+ onSuccess: console.log,
78
+ onError: console.log,
79
+ });
80
+ });
81
+ </script>
175
82
  ```
176
83
 
177
- In [tsconfig.json](tsconfig.js), set the following to address [Issue #32](https://github.com/wuruoyun/vue-component-lib-starter/issues/32). The solution is from https://github.com/johnsoncodehk/volar/discussions/592.
178
-
179
- ```json
180
- "compilerOptions": {
181
- "types": [
182
- "vite/client"
183
- ]
184
- }
185
- ```
84
+ ## License
186
85
 
187
- #### Dependencies
86
+ <!-- For more information and customization options, visit the [Axitech Widget documentation](https://axitech-widgets-docs.example.com). -->
188
87
 
189
- In [package.json](package.json), Vue and PrimeVue are declared in both `peerDependencies` and `devDependencies`. The former requires the client app to add these dependencies, and the later makes it easier to setup this library by simply running `npm install`.
88
+ <!-- For support, contact us at support@axitech.co. -->
89
+ <!-- https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines -->
90
+ © 2023 Axitech. All rights reserved.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "axitech-widget",
3
- "version": "1.0.0-dev.2",
3
+ "version": "1.1.0",
4
4
  "scripts": {
5
5
  "build": "rimraf dist && vue-tsc && vite build",
6
6
  "docs:dev": "vitepress dev docs",
@@ -16,7 +16,7 @@
16
16
  "branches": [
17
17
  "main",
18
18
  {
19
- "name": "dev",
19
+ "name": "beta",
20
20
  "prerelease": true
21
21
  }
22
22
  ]