feat(components): try to add components

packages/components/.eslintrc.cjs

@@ -0,0 +1,26 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+    es2022: true,
+  },
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/typescript/recommended',
+    '@vue/prettier',
+    '@vue/eslint-config-typescript',
+  ],
+  parserOptions: {
+    ecmaVersion: 2022,
+  },
+  ignorePatterns: ['node_modules'],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-empty-function': 'off',
+    '@typescript-eslint/no-empty-function': [1],
+    '@typescript-eslint/no-explicit-any': 'off',
+    'vue/multi-word-component-names': 'off',
+  },
+}

packages/components/hooks/useStreamingAuth.ts

@@ -0,0 +1,83 @@
+import { StreamOperation, StreamPermission, StreamResourceType } from '@emqx/shared-ui-constants'
+import { useLocale } from '@emqx/shared-ui-utils'
+import { computed } from 'vue'
+
+export default (lang: string) => {
+  const { t } = useLocale(lang)
+
+  const permissionOptions = computed(() => {
+    return [
+      {
+        label: t('streaming.allow'),
+        value: StreamPermission.Allow,
+      },
+      {
+        label: t('streaming.deny'),
+        value: StreamPermission.Deny,
+      },
+    ]
+  })
+  const resourceTypeOptions = computed(() => {
+    return [
+      {
+        label: t('acl.topic'),
+        value: StreamResourceType.Topic,
+      },
+      {
+        label: t('streaming.consumerGroupType'),
+        value: StreamResourceType.Group,
+      },
+      {
+        label: t('streaming.clusterType'),
+        value: StreamResourceType.Cluster,
+      },
+    ]
+  })
+  const operationOptions = computed(() => {
+    return Object.values(StreamOperation).map((value) => {
+      return {
+        label: t(`streaming.aclOperationLabelDic.${value}`),
+        value,
+      }
+    })
+  })
+
+  const validOperationMap: Record<StreamResourceType, Array<StreamOperation>> = {
+    [StreamResourceType.Topic]: [
+      StreamOperation.All,
+      StreamOperation.Read,
+      StreamOperation.Write,
+      StreamOperation.Describe,
+      StreamOperation.Create,
+      StreamOperation.Delete,
+    ],
+    [StreamResourceType.Group]: [
+      StreamOperation.All,
+      StreamOperation.Read,
+      StreamOperation.Describe,
+      StreamOperation.Delete,
+    ],
+    [StreamResourceType.Cluster]: [
+      StreamOperation.All,
+      StreamOperation.Read,
+      StreamOperation.Describe,
+      StreamOperation.Alter,
+    ],
+  }
+  const getValidOperations = (resourceType: StreamResourceType) => {
+    const list = validOperationMap[resourceType]
+    return list.map((value) => {
+      return {
+        label: t(`streaming.aclOperationLabelDic.${value}`),
+        value,
+      }
+    })
+  }
+
+  return {
+    permissionOptions,
+    resourceTypeOptions,
+    operationOptions,
+    getValidOperations,
+  }
+}

packages/components/index.ts

@@ -0,0 +1,3 @@
+export { default as StreamForm } from './streaming/StreamForm.vue'
+export { default as StreamingACLForm } from './streaming/StreamingACLForm.vue'
+export { default as StreamingAuthForm } from './streaming/StreamingAuthForm.vue'

packages/components/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@emqx/shared-ui-components",
+  "version": "0.0.1",
+  "homepage": "https://emqx.io",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/emqx/shared-ui"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "main": "./dist/index.umd.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview",
+    "test": "vitest run --coverage",
+    "version:patch": "npm version patch",
+    "version:minor": "npm version minor",
+    "version:major": "npm version major",
+    "release": "npm publish"
+  },
+  "dependencies": {
+    "@emqx/shared-ui-constants": "link:../constants"
+  },
+  "devDependencies": {
+    "@emqx/shared-ui-utils": "link:../utils",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "element-plus": "^2.3.0",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "vue": "^3.2.0",
+    "vue-tsc": "^2.1.10"
+  },
+  "peerDependencies": {
+    "@emqx/shared-ui-utils": "link:../utils",
+    "element-plus": "^2.3.0",
+    "vue": "^3.2.0"
+  }
+}

packages/components/streaming/StreamForm.vue

@@ -0,0 +1,98 @@
+<template>
+  <el-form ref="form" :model="record" label-position="top">
+    <el-form-item prop="stream_name">
+      <template #label>
+        {{ t('streaming.streamName') }}
+        {{ t('Base.username') }}
+        <component v-if="tipComponent" :is="tipComponent" :content="t('streaming.streamNameTip')" />
+      </template>
+      <el-input v-model="record.stream_name" />
+    </el-form-item>
+    <el-form-item prop="stream_type">
+      <template #label>
+        {{ t('streaming.streamType') }}
+        <component v-if="tipComponent" :is="tipComponent" :content="t('streaming.streamTypeTip')" />
+      </template>
+      <el-select v-model="record.stream_type" @change="handleStreamTypeChange">
+        <el-option
+          v-for="item in allStreamTypes"
+          :key="item"
+          :value="item"
+          :label="$t(`streaming.streamTypeLabel.${item}`)"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item v-if="record.stream_type === StreamType.Default" prop="mqtt_topic_filter">
+      <template #label>
+        {{ t('streaming.mqttTopic') }}
+        <component v-if="tipComponent" :is="tipComponent" :content="t('streaming.mqttTopicTip')" />
+      </template>
+      <el-input v-model="record.mqtt_topic_filter" />
+    </el-form-item>
+    <el-form-item v-else prop="partition_number" :label="t('streaming.partitionNum')">
+      <el-input-number
+        v-model="record.partition_number"
+        :min="1"
+        :max="64"
+        :precision="0"
+        controls-position="right"
+      />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import { StreamType } from '@emqx/shared-ui-constants'
+import { useLocale } from '@emqx/shared-ui-utils'
+import { Component, computed, defineEmits, defineProps } from 'vue'
+
+interface StreamRecord {
+  stream_name: string
+  stream_type: StreamType
+  mqtt_topic_filter?: string
+  partition_number: number
+  retention_time: string
+}
+
+const props = defineProps<{
+  tipComponent?: Component
+  modelValue: StreamRecord
+  // TODO: try to optimize
+  lang: 'en' | 'zh' | 'ja'
+}>()
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: StreamRecord): void
+}>()
+
+const { t } = useLocale(props.lang)
+
+const record = computed({
+  get() {
+    return props.modelValue
+  },
+  set(val) {
+    emit('update:modelValue', val)
+  },
+})
+
+const allStreamTypes = Object.values(StreamType)
+
+const handleStreamTypeChange = (val: StreamType) => {
+  const { stream_name, stream_type } = record.value
+  if (val === StreamType.Default) {
+    record.value = {
+      stream_name,
+      stream_type,
+      mqtt_topic_filter: '',
+    } as StreamRecord
+  } else {
+    record.value = {
+      stream_name,
+      stream_type,
+      partition_number: 16,
+    } as StreamRecord
+  }
+}
+</script>
+
+<style lang="scss"></style>