@livestorm/ui-vue 1.1.1 → 1.1.2

package/.env

@@ -0,0 +1 @@
+VITE_UI_VUE=true

package/.eslintignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+coverage/
+!.*

package/.eslintrc.js

@@ -0,0 +1,47 @@
+module.exports = {
+  root: true,
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+  },
+  extends: [
+    'plugin:vue/vue3-recommended',
+    '@vue/eslint-config-standard',
+    'plugin:vitest-globals/recommended',
+    '@vue/typescript',
+  ],
+  env: {
+    node: true,
+    mocha: true,
+    'vitest-globals/env': true,
+  },
+  rules: {
+    'no-console': 'off',
+    'no-debugger': 'off',
+    'comma-dangle': ['error', {
+      arrays: 'always-multiline',
+      objects: 'always-multiline',
+      imports: 'always-multiline',
+      exports: 'always-multiline',
+      functions: 'only-multiline',
+    }],
+    'vue/no-v-html': 'off',
+    // html-quotes off: Allow :query='gql => gql`query { foo (bar: "text with quotes") }`' as GraphQL only support double quotes (") for text in queries
+    'vue/html-quotes': 'off',
+    'vue/no-unsupported-features': ['warn', {
+      version: '^3.2.30',
+      ignores: [],
+    }],
+    'vue/multi-word-component-names': 'warn',
+    'import/export': 'off',
+    'no-use-before-define': 'off',
+  },
+  overrides: [
+    {
+      files: ['**/*.vue'],
+      rules: {
+        'import/first': 'off',
+      },
+    },
+  ],
+}

package/.pkg

@@ -0,0 +1,11 @@
+target: //ui-vue
+context: //..
+name: ui-vue
+description: Library for building Livestorm frontend
+template: empty
+owners: ["@livestorm/chapter-front-end"]
+namespaced: false
+runtime_dependencies: []
+submodule: true
+labels:
+  - livestorm-app

package/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset',
+  ],
+}

package/build/Dockerfile

@@ -0,0 +1,31 @@
+FROM public.ecr.aws/docker/library/node:16-alpine as base
+
+# Setup PNPM
+
+RUN corepack enable && corepack prepare pnpm@8.6.0 --activate
+
+WORKDIR /app
+
+# @TODO improve CI
+# COPY . .
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml .
+COPY packages/ui-icons/package.json packages/ui-icons/
+COPY packages/ui-vue/package.json packages/ui-vue/
+# Needed for the depedencies (for example postcss.config.js)
+COPY packages/frontend/package.json packages/frontend/
+COPY packages/dev-utils/package.json packages/dev-utils/
+
+# NPM dependencies
+
+RUN --mount=type=cache,id=pnpm-store,target=/root/.local/share/pnpm/store/v3 \
+  pnpm install --frozen-lockfile --ignore-scripts --prefer-offline --filter "@livestorm/ui-vue..." --filter "@livestorm/frontend..."
+
+COPY packages/ui-icons packages/ui-icons
+COPY packages/ui-vue packages/ui-vue
+# Needed for the references to '../frontend'
+COPY packages/frontend/ packages/frontend/
+
+RUN pnpm run -r --filter "@livestorm/ui-vue..." prepare && \
+    pnpm run -r --filter "@livestorm/ui-vue^..." build
+
+WORKDIR /app/packages/ui-vue

package/ci/ci.yml

@@ -0,0 +1,54 @@
+steps:
+  - label: ":docker: Build package (base)"
+    key: build-base
+    agents:
+      queue: "elastic-builders"
+    plugins:
+      - livestorm/lsc#v1.0.32:
+          build-package: true
+          build-target: base
+          build-cache-from:
+            - ${PACKAGE_REGISTRY}/${PACKAGE_IMAGE_NAME}:latest
+
+  - label: ":eslint: Run ESLint"
+    depends_on: build-base
+    command: |
+      pnpm run test:eslint
+    plugins:
+      - docker#v4.0.0:
+          image: "${PACKAGE_IMAGE}-base"
+          skip-checkout: true
+          mount-checkout: false
+
+  - label: ":typescript: Run TypeScript check"
+    depends_on: build-base
+    command: |
+      pnpm run test:types
+    plugins:
+      - docker#v4.0.0:
+          image: "${PACKAGE_IMAGE}-base"
+          skip-checkout: true
+          mount-checkout: false
+
+  - label: ":vitest: Run unit tests"
+    depends_on: build-base
+    key: "ut"
+    artifact_paths: "reports/junit/*.xml"
+    command: |
+      pnpm run test:vitest:run --reporter=default --reporter=junit --outputFile.junit=reports/junit/junit.xml
+    plugins:
+      - docker#v4.0.0:
+          image: "${PACKAGE_IMAGE}-base"
+          skip-checkout: true
+          mount-checkout: false
+          volumes:
+            - ./reports/junit:/app/packages/ui-vue/reports/junit
+
+  - label: ":memo: Tests Report"
+    depends_on: "ut"
+    allow_dependency_failure: true
+    plugins:
+      - junit-annotate#v2.0.2:
+          artifacts: "reports/junit/*.xml"
+          failure-format: file
+          report-slowest: 20

package/components-vite.js

@@ -0,0 +1,29 @@
+import { RenderSlot } from './src/utils/slot'
+
+const NAME_REG = /Base([a-z0-9]+)\./i
+
+export function registerComponents (app, prefix = 'Ls') {
+  app.component('RenderSlot', RenderSlot)
+
+  const componentsLib = import.meta.globEager('./src/components/**/Base+([a-zA-Z0-9]).{js,jsx,vue}')
+  for (const key in componentsLib) {
+    const component = componentsLib[key]
+    const name = key.match(NAME_REG)[1]
+    app.component(`${prefix}${name}`, component.default || component)
+  }
+}
+
+export function getComponents (prefix = 'Ls') {
+  const componentsMap = {}
+
+  componentsMap.RenderSlot = RenderSlot
+
+  const componentsLib = import.meta.globEager('./src/components/**/Base+([a-zA-Z0-9]).{js,jsx,vue}')
+  for (const key in componentsLib) {
+    const component = componentsLib[key]
+    const name = key.match(NAME_REG)[1]
+    componentsMap[`${prefix}${name}`] = component.default || component
+  }
+
+  return componentsMap
+}

package/components-webpack.js

@@ -0,0 +1,29 @@
+import { RenderSlot } from './src/utils/slot'
+
+const NAME_REG = /Base([a-z0-9]+)\./i
+
+export function registerComponents (app, prefix = 'Ls') {
+  app.component('RenderSlot', RenderSlot)
+
+  const requireComponentsLib = require.context('./src/components/', true, /Base[a-z0-9]+\.(jsx?|vue)$/i)
+  requireComponentsLib.keys().forEach(fileName => {
+    const component = requireComponentsLib(fileName)
+    const name = fileName.match(NAME_REG)[1]
+    app.component(`${prefix}${name}`, component.default || component)
+  })
+}
+
+export function getComponents (prefix = 'Ls') {
+  const componentsMap = {}
+
+  componentsMap.RenderSlot = RenderSlot
+
+  const requireComponentsLib = require.context('./src/components/', true, /Base[a-z0-9]+\.(jsx?|vue)$/i)
+  requireComponentsLib.keys().forEach(fileName => {
+    const component = requireComponentsLib(fileName)
+    const name = fileName.match(NAME_REG)[1]
+    componentsMap[`${prefix}${name}`] = component.default || component
+  })
+
+  return componentsMap
+}

package/components.d.ts

@@ -0,0 +1,4 @@
+// @TODO remove when ui-vue is migrated to TS
+
+export function registerComponents (app: any, prefix = 'Ls'): void
+export function getComponents (prefix = 'Ls'): Record<string, any>

package/index.d.ts

@@ -0,0 +1,3 @@
+// @TODO remove when ui-vue is migrated to TS
+
+export function install (app: any): void

package/index.js

@@ -0,0 +1,24 @@
+/**
+ * This entry file is not loaded by livestorm-app
+ * Only useful for the export of the library
+ */
+
+import './style'
+
+import BaseButton from './src/components/BaseButton/BaseButton.vue'
+import BaseCheckbox from './src/components/BaseCheckbox/BaseCheckbox.vue'
+import BaseModal from './src/components/BaseModal/BaseModal.vue'
+import BaseBanner from './src/components/BaseBanner/BaseBanner.vue'
+import BaseAutocomplete from './src/components/BaseAutocomplete/BaseAutocomplete.vue'
+
+import './src/css/tailwind-utilities.postcss'
+
+export * from './plugins'
+
+export {
+  BaseButton as LsButton,
+  BaseCheckbox as LsCheckbox,
+  BaseModal as LsModal,
+  BaseBanner as LsBanner,
+  BaseAutocomplete as LsAutocomplete,
+}

package/package.json

@@ -1,13 +1,10 @@
 {
   "name": "@livestorm/ui-vue",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Livestorm UI components for Vue 3",
   "main": "./dist/ui-vue.umd.js",
   "module": "./dist/ui-vue.mjs",
   "types": "./index.d.ts",
-  "files": [
-    "dist"
-  ],
   "dependencies": {
     "@livestorm/design-tokens": "^2.0.1",
     "@vueuse/core": "^9.0.2",

package/plugins.js

@@ -0,0 +1,17 @@
+import 'floating-vue/dist/style.css'
+
+import FloatingVue from 'floating-vue'
+import VueSafeTeleport from 'vue-safe-teleport'
+import Responsive from './src/utils/responsive'
+import { floatingVueConfig } from './../frontend/src/common/js/floating-vue'
+import { isMobile } from './../frontend/src/common/js/environment'
+
+export function install (app) {
+  // Tooltips and popovers
+  app.use(FloatingVue, floatingVueConfig(isMobile()))
+
+  // Responsive
+  app.use(Responsive)
+
+  app.use(VueSafeTeleport)
+}

package/postcss.config.js

@@ -0,0 +1 @@
+module.exports = require('../frontend/postcss.config.js')