@inriver/inri 1.17.0 → 1.19.0

package/.changeset/chilly-boxes-count.md

@@ -0,0 +1,5 @@
+---
+"@inriver/inri": minor
+---
+
+Update documentation

package/.changeset/config.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://unpkg.com/@changesets/config@2.3.1/schema.json",
-  "changelog": ["@changesets/changelog-github", {"repo": "inriver/inri-monorepo"}],
+  "changelog": "@changesets/cli/changelog",
   "commit": false,
   "fixed": [],
   "linked": [],

package/.changeset/small-cars-pull.md

@@ -0,0 +1,5 @@
+---
+"@inriver/inri": minor
+---
+
+Updating README and exporting tailwing config

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# @inriver/inri
+
+## 1.19.0
+
+### Minor Changes
+
+- Update documentation
+- Updating README and exporting tailwing config
+
+## 1.18.0
+
+### Minor Changes
+
+- Updating README and exporting tailwing config

package/README.md

@@ -0,0 +1,106 @@
+# Inri framework
+
+In order to use the *inri* package properly, you need to have certain peer dependencies installed in your project. These peer dependencies are not automatically installed when you install inri, so you have to install them separately.
+
+## Peer dependencies
+
+Before installing and using *inri*, please make sure you have the following peer dependencies installed in your project:
+
+* quasar version 2.12.1 or compatible
+* vue version 3.x.x or any compatible version starting with 3
+* vue-i18n version 9.1.7 or any compatible version starting with 9.1
+* vue-router version 4.0.12 or any compatible version starting with 4
+* WindiCSS - Follow this guide how to set it up https://windicss.org/guide/installation.html
+
+## Installation
+
+* Create a `.npmrc` file and add the following line `//registry.npmjs.org/:_authToken=${NPM_TOKEN}`
+
+* Create `.env` file that is `.gitignored` (important!)
+
+* Get the token from the `inri-access-group` variable group located in the pipelines
+
+
+```
+pnpm install @inriver/inri
+pnpm install quasar@2.12.1 vue@^3.3.4 vue-i18n@^9.1.7 vue-router@^4.0.12
+```
+
+## Deploying your app with the inri framework
+
+
+The build stage must also have access to the `inri-access-group`
+Add it to your stage for example
+```
+stages:
+  - stage: Build
+    dependsOn:
+    variables:
+    - template: 'someTemplate.yml'
+    - group: inri-access-token
+    jobs:
+    ...
+```
+Your build pipeline must have access to the .npmrc file so add this script
+to the build stage of your pipeline.
+
+```
+- bash: |
+    echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > .npmrc
+  env:
+    NPM_TOKEN: $(NPM_TOKEN)
+  displayName: Init .npmrc file
+```
+
+## Initializing the framework
+
+main.ts (entry file)
+It's importing that you import the `virtual:windi.css` after the App import
+```
+import { createApp } from 'vue';
+import App from './App.vue';
+import 'virtual:windi.css';
+
+import { initInriFramework } from '@inriver/inri';
+const app = createApp(App);
+app.use(initInriFramework);
+
+app.mount('#app');
+```
+
+App.vue
+
+```
+import { useInriApp } from '@inriver/inri';
+....
+useInriApp()
+```
+CSS
+
+Create a tailwind.config.js file and copy this
+
+```
+import { baseTailwindConfig } from './node_modules/@inriver/inri/configs/base-tailwind-config'
+
+export default {
+  ...baseTailwindConfig,
+  extract: {
+    include: [
+      './node_modules/@inriver/inri/src/**/*.{vue,html,jsx,tsx}',
+      'src/**/*.{vue,html,jsx,tsx}',
+    ],
+  },
+}
+
+
+```
+### Using changesets
+
+When it's time to publish a PR follow these steps using changesets CLI
+
+```
+1. Run pnpm changeset and follow the prompt
+2. When all is well and one and it's time to release run 
+  pnpm changeset version which will automatically bump the package.json
+3. Publish command is handled in the release pipeline when merged to main
+```

package/configs/base-tailwind-config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export const baseTailwindConfig = {
   preflight: false,
   darkMode: false,
   theme: {

package/index.ts

@@ -10,7 +10,7 @@ import { useDoubleClickListener } from './src/composables/useDoubleClickListener
 import { useDirtyCheck } from './src/composables/useDirtyCheck'
 import { useTruncateChips } from './src/composables/useTruncateChips'
 import { initInriIcons } from './src/plugins/inriIcons'
-import baseTailwindConfig  from './configs/base-tailwind-config'
+import { baseTailwindConfig } from './configs/base-tailwind-config'
 
 export {
   useInriStore,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inriver/inri",
-  "version": "1.17.0",
+  "version": "1.19.0",
   "peerDependencies": {
     "quasar": "2.12.1",
     "vue": "^3.3.4",
@@ -30,7 +30,8 @@
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0",
     "stylelint-webpack-plugin": "^3.0.1",
-    "typescript": "~4.1.5"
+    "typescript": "~4.1.5",
+    "@changesets/cli": "^2.26.2"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"
@@ -45,12 +46,10 @@
       "git add"
     ]
   },
-  "dependencies": {
-    "@changesets/cli": "^2.26.2"
-  },
   "scripts": {
     "lint": "vue-cli-service lint",
     "changeset": "changeset",
+    "version": "changeset version",
     "release": "changeset publish"
   }
 }

package/src/init/initInriFramework.ts

@@ -1,6 +1,4 @@
 import '../styles/main.scss'
-// import 'windi.css'
-// import '../styles/tailwind/index.css'
 import { App } from 'vue'
 import { Quasar, Notify, Dialog, Meta } from 'quasar'
 import { registerComponents } from '../plugins/library'

package/src/styles/tailwind/index.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;