@lumx/vue 3.20.1-alpha.4 → 3.20.1-alpha.6

package/.storybook/main.ts

@@ -0,0 +1,28 @@
+import type { StorybookConfig } from '@storybook/vue3-vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import vueJsx from '@vitejs/plugin-vue-jsx'
+
+import { mergeConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [],
+  framework: '@storybook/vue3-vite',
+  docs: {autodocs: false},
+  async viteFinal(config) {
+    return mergeConfig(config, {
+                  optimizeDeps: { include: ['@lumx/icons'] },
+      plugins: [vue(), vueJsx({
+        // 1. Tell the Vue JSX compiler what function to use (h)
+        // 2. Tell it to import 'h' from the 'vue' module
+        // The default setup in modern Vue JSX handles this, but explicitly
+        // ensuring the right runtime is used is key.
+        babelPlugins: [
+          ['@babel/plugin-transform-react-jsx', { runtime: 'automatic', importSource: 'vue' }]
+        ]
+      }), tsconfigPaths()]
+    });
+  },
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/vue3-vite'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/package.json

@@ -1,121 +1,32 @@
 {
-  "author": {
-    "name": "LumApps"
+  "license": "MIT",
+  "name": "@lumx/vue",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lumapps/design-system.git"
   },
-  "bugs": {
-    "url": "https://github.com/lumapps/design-system/issues"
+  "scripts": {
+    "start:storybook": "storybook dev -p 9000",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "vite build"
   },
-  "dependencies": {
-    "@lumx/core": "^3.20.1-alpha.4",
-    "@lumx/icons": "^3.20.1-alpha.4",
-    "vue-demi": "^0.14.10"
+  "module": "index.js",
+  "main": "index.js",
+  "installConfig": {
+    "hoistingLimits": "workspaces"
   },
+  "sideEffects": false,
+  "version": "3.20.1-alpha.6",
   "devDependencies": {
-    "@babel/core": "^7.26.10",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-export-default-from": "^7.25.9",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
-    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/plugin-proposal-private-methods": "^7.18.6",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/plugin-syntax-jsx": "^7.27.1",
     "@babel/plugin-transform-react-jsx": "^7.27.1",
-    "@babel/preset-env": "^7.26.9",
-    "@babel/preset-typescript": "^7.26.0",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^19.0.2",
-    "@rollup/plugin-node-resolve": "16.0.0",
-    "@rollup/plugin-typescript": "^12.3.0",
-    "@rollup/pluginutils": "5.2.0",
-    "@storybook/addon-a11y": "^9.1.4",
-    "@storybook/addon-docs": "^9.1.4",
-    "@storybook/vue3-vite": "9.1.16",
-    "@testing-library/dom": "^9.3.4",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/user-event": "^14.4.3",
-    "@testing-library/vue": "^8.1.0",
-    "@types/body-scroll-lock": "^2.6.1",
-    "@types/classnames": "^2.2.9",
-    "@types/dom-view-transitions": "^1.0.5",
-    "@types/jest": "^29.2.1",
-    "@types/lodash": "^4.14.149",
+    "@storybook/vue3-vite": "^9.1.4",
     "@vitejs/plugin-vue": "^6.0.2",
-    "@vitejs/plugin-vue-jsx": "^5.1.2",
-    "@vitejs/plugin-vue2-jsx": "^1.1.1",
-    "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
-    "@vue/babel-plugin-jsx": "^2.0.1",
-    "@vue/babel-preset-jsx": "^1.4.0",
-    "@vue/composition-api": "1.7.2",
-    "autoprefixer": "^9.7.4",
-    "babel-jest": "29.1.2",
-    "babel-loader": "^8.0.6",
-    "eslint-plugin-storybook": "9.1.16",
-    "eslint-plugin-vue": "^10.5.0",
-    "focus-visible": "^5.0.2",
-    "glob": "^7.1.6",
-    "install-peers-cli": "^2.2.0",
-    "is-ci": "^2.0.0",
-    "jest": "29.1.2",
-    "jest-environment-jsdom": "29.1.2",
-    "node-notifier": "^10.0.1",
-    "rollup": "3.29.5",
-    "rollup-plugin-analyzer": "^4.0.0",
-    "rollup-plugin-cleaner": "^1.0.0",
-    "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-dts": "^6.1.1",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-ts-paths-resolve": "^1.7.1",
-    "rollup-plugin-vue": "^6.0.0",
+    "@vitejs/plugin-vue-jsx": "^5.1.1",
     "storybook": "^9.1.4",
     "typescript": "^5.4.3",
     "vite": "^6.3.5",
-    "vite-plugin-dts": "^4.5.4",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^4.0.10",
-    "vue": "^3.4.27",
-    "vue2": "npm:vue@2.6",
-    "yargs": "^15.4.1"
-  },
-  "peerDependencies": {
-    "@vue/composition-api": "^1.1.2",
-    "lodash": "4.17.21",
-    "vue": "^2.6.0 || ^3.3.0"
-  },
-  "peerDependenciesMeta": {
-    "@vue/composition-api": {
-      "optional": true
-    }
-  },
-  "description": "The official LumApps Design System (LumX) for Vue applications",
-  "homepage": "https://github.com/lumapps/design-system",
-  "keywords": [
-    "Design System",
-    "LumApps",
-    "LumX",
-    "Vue"
-  ],
-  "license": "MIT",
-  "module": "index.js",
-  "main": "index.js",
-  "types": "index.d.ts",
-  "name": "@lumx/vue",
-  "publishConfig": {
-    "directory": "dist",
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/lumapps/design-system.git"
-  },
-  "scripts": {
-    "start:storybook": "storybook dev -p 6007",
-    "build:storybook": "storybook build",
-    "test": "vue-demi-switch 3 && vitest",
-    "build": "vite build",
-    "storybook:vue3": "vue-demi-switch 3 && yarn start:storybook",
-    "storybook:vue2": "vue-demi-switch 2 vue2 && yarn start:storybook"
-  },
-  "sideEffects": false,
-  "version": "3.20.1-alpha.4"
+    "vue": "^3.5.25"
+  }
 }

package/src/components/icon/Icon.stories.js

@@ -0,0 +1,27 @@
+import { mdiAbTesting } from 'lumx-icons/dist';
+import Icon from './Icon.vue';
+
+export default {
+  title: 'LumX/Icon',
+  component: Icon,
+  argTypes: {
+    theme: { control: 'text' },
+    // Add other props here as needed
+  },
+};
+
+const Template = (args) => ({
+  components: { Icon },
+  setup() {
+    return { args };
+  },
+  template: '<Icon v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  // Provide default props here, e.g.:
+  theme: 'light',
+  icon: mdiAbTesting,
+  // name: 'star', // Example if Icon expects a name prop
+};

package/src/components/icon/Icon.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { inject, useAttrs } from 'vue';
+import { Icon as UI } from '@lumx/core/js/components/Icon';
+// import type { IconProps, IconSizes } from '@lumx/core/js/components/Icon';
+
+// Define props (replace 'any' with actual IconProps type if available)
+const props = defineProps();
+const attrs = useAttrs();
+// Inject theme if provided by parent
+const defaultTheme = inject('theme', undefined);
+console.log(props);
+</script>
+
+<template>
+  <UI v-bind="{ ...attrs, ...props, theme: props.theme || defaultTheme }" />
+</template>

package/src/components/icon/index.ts

@@ -1,6 +1,2 @@
-import { IconProps } from '@lumx/core/js/components/Icon';
-
-import Icon from './Icon';
-
+import Icon from './Icon.vue';
 export { Icon };
-export type { IconProps };

package/src/components/input-helper/InputHelper.stories.js

@@ -0,0 +1,27 @@
+import { mdiAbTesting } from 'lumx-icons/dist';
+import InputHelper from './InputHelper.vue';
+
+export default {
+  title: 'LumX/InputHelper',
+  component: InputHelper,
+  argTypes: {
+    theme: { control: 'text' },
+    // Add other props here as needed
+  },
+};
+
+const Template = (args) => ({
+  components: { InputHelper },
+  setup() {
+    return { args };
+  },
+  template: '<InputHelper>Text</InputHelper>',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  // Provide default props here, e.g.:
+  theme: 'light',
+  icon: mdiAbTesting,
+  // name: 'star', // Example if Icon expects a name prop
+};

package/src/components/input-helper/InputHelper.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { inject, useAttrs } from 'vue';
+import { InputHelper as UI } from '@lumx/core/js/components/InputHelper';
+
+// Define props (replace 'any' with actual IconProps type if available)
+const props = defineProps();
+const attrs = useAttrs();
+// Inject theme if provided by parent
+const defaultTheme = inject('theme', undefined);
+</script>
+
+<template>
+  <UI v-bind="{ ...attrs, ...props, theme: props.theme || defaultTheme }">
+    <slot />
+  </UI>
+</template>

package/src/components/input-helper/index.ts

@@ -0,0 +1,2 @@
+import InputHelper from './InputHelper.vue';
+export { InputHelper };

package/src/index.ts

@@ -1,6 +1,9 @@
-import { IconProps } from '@lumx/core/js/components/Icon';
+/**
+ * Components listed here will be exposed to NPM in '@lumx/react'.
+ */
 
-import Icon from './Icon';
+export * from '@lumx/core/js/constants';
+export * from '@lumx/core/js/types';
 
-export { Icon };
-export type { IconProps };
+export * from './components/icon';
+export * from './components/input-helper';

package/vite.config.ts

@@ -0,0 +1,35 @@
+import { defineConfig, mergeConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+export default defineConfig((config) =>
+  mergeConfig(config, {
+    plugins: [
+      vue(),
+      vueJsx({
+        babelPlugins: [
+          ['@babel/plugin-transform-react-jsx', { runtime: 'automatic', importSource: 'vue' }],
+        ],
+      }),
+      tsconfigPaths(),
+    ],
+    optimizeDeps: { include: ['@lumx/icons'] },
+    build: {
+      lib: {
+        entry: './src/index.ts',
+        name: 'LumxVue',
+        fileName: 'index',
+        formats: ['es', 'cjs'],
+      },
+      rollupOptions: {
+        external: ['vue', '@lumx/icons', '@lumx/core'],
+        output: {
+          globals: {
+            vue: 'Vue',
+          },
+        },
+      },
+    },
+  })
+);