@inriver/inri 1.18.0 → 1.20.0

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

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

package/CHANGELOG.md

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

package/README.md

@@ -10,22 +10,56 @@ Before installing and using *inri*, please make sure you have the following peer
 * 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/integrations/
+* 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
 ```
 
-## Example
+## 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 'virtual:windi.css';
 import { createApp } from 'vue';
 import App from './App.vue';
+import 'virtual:windi.css';
 
 import { initInriFramework } from '@inriver/inri';
 const app = createApp(App);
@@ -46,18 +80,19 @@ CSS
 Create a tailwind.config.js file and copy this
 
 ```
-import baseConfig from '@inriver/inri/configs/base-tailwind-config'
+import { baseTailwindConfig } from './node_modules/@inriver/inri/configs/base-tailwind-config'
 
 export default {
-  ...baseConfig,
+  ...baseTailwindConfig,
   extract: {
     include: [
-      '../inri/src/**/*.{vue,html,jsx,tsx}',
+      './node_modules/@inriver/inri/src/**/*.{vue,html,jsx,tsx}',
       'src/**/*.{vue,html,jsx,tsx}',
     ],
   },
 }
 
+
 ```
 ### Using changesets
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inriver/inri",
-  "version": "1.18.0",
+  "version": "1.20.0",
   "peerDependencies": {
     "quasar": "2.12.1",
     "vue": "^3.3.4",

package/src/components/CBtn.vue

@@ -52,7 +52,7 @@ defineProps({
 </script>
 
 <style lang="scss">
-.c-btn {
+.c-inri-btn {
   height: 40px;
   font-weight: 600;
   padding: 4px 56px !important;

package/src/components/CContextMenu.vue

@@ -6,7 +6,7 @@
     @click.prevent
   >
     <q-menu>
-      <q-list class="menu-list pb-0">
+      <q-list class="c-inri-menu-list pb-0">
         <slot />
       </q-list>
     </q-menu>
@@ -23,7 +23,7 @@ defineProps({
 </script>
 
 <style scoped lang="scss">
-.menu-list {
+.c-inri-menu-list {
   min-width: 146px;
 }
 </style>

package/src/components/CDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <q-dialog
     data-id="dialog"
-    class="c-dialog"
+    class="c-inri-dialog"
     :model-value="modelValue"
     :position="position"
     transition-show="fade"
@@ -192,7 +192,7 @@ defineExpose({
 
 <style lang="scss">
 // This css is also shared by the programmatic dialogs
-.c-dialog {
+.c-inri-dialog {
   .q-dialog__backdrop {
     background: var(--dialog-backdrop-color);
   }
@@ -210,11 +210,11 @@ defineExpose({
   }
 
   .dialog-card-action-buttons {
-    .c-btn {
+    .c-inri-btn {
       width: 100%;
     }
 
-    .c-btn + .c-btn {
+    .c-inri-btn + .c-inri-btn {
       margin-top: 16px;
     }
   }
@@ -222,13 +222,13 @@ defineExpose({
 
 // 'sm' displays
 @media (min-width: 640px) {
-  .c-dialog {
+  .c-inri-dialog {
     .dialog-card-action-buttons {
-      .c-btn {
+      .c-inri-btn {
         width: auto;
       }
 
-      .c-btn + .c-btn {
+      .c-inri-btn + .c-inri-btn {
         margin-top: 0;
         margin-left: 10px;
       }
@@ -238,7 +238,7 @@ defineExpose({
 
 // 'md' displays
 @media (min-width: 1024px) {
-  .c-dialog {
+  .c-inri-dialog {
     // position="top" (default) should be offset with 60px from the top
     .q-dialog__inner.fixed-top {
       padding: 0 60px;

package/src/components/CDrawerButton.vue

@@ -2,7 +2,7 @@
   <q-btn
     ref="drawerButton"
     data-id="drawer-btn"
-    class="drawer-button group"
+    class="c-inri-drawer-button group"
     :class="{
       'is-left': left,
       'w-60px sm:w-340px': isOpen,
@@ -63,7 +63,7 @@ function toggle () {
 </script>
 
 <style lang="scss">
-.drawer-button {
+.c-inri-drawer-button {
   height: 60px;
   border-radius: 0;
   transition: width 0.1s;
@@ -83,7 +83,7 @@ function toggle () {
 }
 
 // Left side drawer button
-.drawer-button.is-left {
+.c-inri-drawer-button.is-left {
   .q-btn__content {
     justify-content: end;
   }

package/src/components/CExpansionItem.vue

@@ -2,7 +2,7 @@
   <q-expansion-item
     :label="label"
     :header-class="headerClass"
-    class="c-expansion-item"
+    class="c-inri-expansion-item"
   >
     <slot />
   </q-expansion-item>
@@ -22,7 +22,7 @@ defineProps({
 </script>
 
 <style lang="scss">
-.c-expansion-item {
+.c-inri-expansion-item {
   border-bottom: 1px solid var(--color-border);
 
   .q-item__section {

package/src/components/CExpansionItemWithCheckbox.vue

@@ -1,7 +1,7 @@
 <template>
   <q-expansion-item
     :header-class="headerClass"
-    class="c-expansion-item"
+    class="c-inri-expansion-item"
   >
     <template #header>
       <q-checkbox

package/src/components/CHeaderLinks.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="showExtendedMenu"
-    class="header-links gt-sm"
+    class="c-inri-header-links gt-sm"
   >
     <c-header-menu-link
       v-for="link in links"
@@ -52,7 +52,7 @@ const showExtendedMenu = computed(() => props.maxVisible >= props.links.length)
 </script>
 
 <style scoped>
-.header-links {
+.c-inri-header-links {
   margin-right: 32px;
   height: 100%;
   display: flex;

package/src/components/CHeaderMenuLink.vue

@@ -1,6 +1,6 @@
 <template>
   <a
-    class="link"
+    class="c-inri-link"
     :class="{ 'is-active': isActive }"
     :href="href"
   >
@@ -21,7 +21,7 @@ defineProps<Props>()
 </script>
 
 <style scoped>
-.link {
+.c-inri-link {
   display: flex;
   align-items: center;
   font-size: 16px;
@@ -31,7 +31,7 @@ defineProps<Props>()
   min-width: 0;
 }
 
-.link:hover {
+.c-inri-link:hover {
   text-decoration: underline;
 }
 

package/src/components/CIconBtn.vue

@@ -1,6 +1,6 @@
 <template>
   <q-btn
-    class="c-icon-btn"
+    class="c-inri-icon-btn"
     flat
     round
     :color="color"
@@ -61,7 +61,7 @@ defineProps({
 <style scoped lang="scss">
 $size: 32px;
 
-.c-icon-btn {
+.c-inri-icon-btn {
   height: $size;
   width: $size;
   min-height: $size;

package/src/components/CSection.vue

@@ -1,6 +1,6 @@
 <template>
   <section
-    class="c-section"
+    class="c-inri-section"
     :class="{
       'overflow-y-overlay': scroll || main,
       'flex-1': flex || main,
@@ -23,7 +23,7 @@ defineProps({
 </script>
 
 <style>
-.c-section {
+.c-inri-section {
   @apply py-7 px-6;
 }
 </style>

package/src/components/CSelect.vue

@@ -1,7 +1,7 @@
 <template>
   <q-select
     ref="selectRef"
-    class="c-select"
+    class="c-inri-select"
     :model-value="modelValue"
     v-bind="dense ? $inri.inputDense : $inri.input"
     :options="internalOptions"
@@ -191,7 +191,7 @@ function onToggleAll (evt, emitString) {
 </script>
 
 <style lang="scss">
-.c-select {
+.c-inri-select {
   ::placeholder {
     color: var(--color-text);
   }

package/src/components/CSlideEffect.vue

@@ -3,13 +3,13 @@
 
   <div class="absolute overflow-hidden inset-0">
     <div
-      class="bg-white slide-box"
+      class="bg-white c-inri-slide-box"
       :class="slideOffsetClasses"
     />
 
     <!-- Slider -->
     <div
-      class="slide-box"
+      class="c-inri-slide-box"
       :class="[transitionBg, slideOffsetClasses]"
     />
   </div>
@@ -56,7 +56,7 @@ const transitionBg = computed(() => {
 </script>
 
 <style scoped>
-.slide-box {
+.c-inri-slide-box {
   @apply absolute transition-all duration-500 w-full h-full top-0;
 }
 </style>

package/src/components/CSpinner.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="c-spinner"
+    class="c-inri-spinner"
     :style="{
       width: size + 'px',
       height: size + 'px',
@@ -63,7 +63,7 @@ const transitionColor = computed(() => {
 // Based on:
 // https://codepen.io/joshuaward/pen/XejbZv
 
-.c-spinner {
+.c-inri-spinner {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
 

package/src/components/CTileBtn.vue

@@ -1,7 +1,7 @@
 <template>
   <q-btn
     ref="button"
-    class="c-tile-btn group"
+    class="c-inri-tile-btn group"
     :class="{
       'c-tile-btn--small': small,
       'pointer-events-none': loading
@@ -154,7 +154,7 @@ const tooltipRightDataId = computed(() => {
 </script>
 
 <style lang="scss">
-.c-tile-btn {
+.c-inri-tile-btn {
   padding: 0;
   width: 60px;
   height: 60px;

package/src/components/cards/CSmallCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="card"
-    class="c-small-card"
+    class="c-inri-small-card"
     @mouseover="isHoveredOver = true"
     @mouseleave="isHoveredOver = false"
     @click="$emit('click', $event)"
@@ -106,7 +106,7 @@ defineProps({
 </script>
 
 <style scoped lang="scss">
-.c-small-card {
+.c-inri-small-card {
   width: var(--small-card-image-size);
   min-height: 100px;
 

package/src/components/internal-components/ConfirmDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <q-dialog
     ref="dialogRef"
-    class="c-dialog"
+    class="c-inri-dialog"
     @hide="onDialogHide"
   >
     <q-card

package/src/layouts/layout-fragments/CPageBlank.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="c-page">
+  <div class="c-inri-page">
     <slot />
   </div>
 </template>
@@ -11,7 +11,7 @@ export default {
 </script>
 
 <style scoped>
-.c-page {
+.c-inri-page {
   position: absolute;
   width: 100%;
   height: 100%;

package/src/styles/components/_notifications.scss

@@ -1,5 +1,5 @@
 .c-notify {
-  .c-spinner {
+  .c-inri-spinner {
     width: 18px !important;
     height: 18px !important;
     color: #fff !important;