feat(examples): add package @oruga-ui/examples

.github/workflows/publish-pre-release.yml

@@ -24,7 +24,7 @@ jobs:
       - name: Install dependencies 📦
         run: npm install
       - name: Build lib
-        run: npm run publish:lib
+        run: npm run publish
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
       - run: npm i extract-changelog-release

.github/workflows/publish-release.yml

@@ -24,7 +24,7 @@ jobs:
       - name: Install dependencies 📦
         run: npm install
       - name: Build lib
-        run: npm run publish:lib
+        run: npm run publish
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
       - run: npm i extract-changelog-release

.scripts/sync-version.js

@@ -3,26 +3,29 @@ const replace = require('replace-in-file')
 const jsonPaths = [
   'package-lock.json',
   'packages/docs/package.json',
-  'packages/docs/package-lock.json',
   'packages/oruga/package.json',
-  'packages/oruga/package-lock.json',
+  'packages/examples/package.json',
 ]
 const version = require('../package.json').version
 
-const configJsonOptions = {
+const configJsonOptions = [{
   files: jsonPaths,
-  from: /"name": "@oruga-ui\/(.*)-next",([^"]*)"version": .+/ig,
-  to: (match) => 
-    match.replace(/"version": .+/i, `"version": "${version}",`),
-}
+  from: /"name": "@oruga-ui\/(.*)",([^"]*)"version": .+/ig, 
+  to: (match) => match.replace(/"version": .+/i, `"version": "${version}",`),
+},
+{
+  files: jsonPaths,
+  from: /"@oruga-ui\/oruga-next": "(.*)",/ig,
+  to: (match) => match.replace(/oruga-next": "(.*)",/i, `oruga-next": "${version}",`),
+}]
 
 const replaceInFile = (config) => 
    replace.sync(config).map((el) => el.file);
 
 try {
-  const changedFiles = replaceInFile(configJsonOptions)
-  console.info('Modified files:', changedFiles.join(', '))
+  configJsonOptions.forEach(options => replaceInFile(options));
+  console.info('Modified files:', jsonPaths.join(', '));
 } catch (error) {
-  console.error(e)
-  process.exit(1)
+  console.error(e);
+  process.exit(1);
 }

package.json

@@ -7,6 +7,7 @@
   "license": "MIT",
   "workspaces": [
     "packages/oruga",
+    "packages/examples",
     "packages/docs"
   ],
   "scripts": {
@@ -23,7 +24,9 @@
     "gen:volar": "node .scripts/gen-volar-dts.mjs --bundle --platform=node",
     "gen:types": "node .scripts/gen-comp-types.mjs --bundle --platform=node",
     "gen:docs": "npm run docs:gen --workspace @oruga-ui/docs-next",
-    "publish:lib": "npm run publish:lib --workspace @oruga-ui/oruga-next",
+    "publish": "concurrently \"npm run publish:lib\" \"npm run publish:examples\"",
+    "publish:lib": "npm run publish --workspace @oruga-ui/oruga-next",
+    "publish:examples": "npm run publish --workspace @oruga-ui/examples",
     "release": "npm run version && npm run changelog",
     "version": "node .scripts/sync-version.js && git add .",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s && node .scripts/wait-confirm && git add CHANGELOG.md",

packages/docs/.vitepress/config.ts

@@ -130,8 +130,8 @@ export default defineConfig({
         // Vite config options
         resolve: {
             alias: {
-                // add '@/oruga' alias to strict oruga package
-                "@/oruga": fileURLToPath(
+                // add '@oruga-ui/oruga-next' alias to strict oruga package
+                "@oruga-ui/oruga-next": fileURLToPath(
                     new URL("./../../oruga/src/index.ts", import.meta.url),
                 ),
                 // add '@' alias to oruga package

packages/docs/.vitepress/theme/index.ts

@@ -11,7 +11,7 @@ import Inspector from "./components/Inspector.vue";
 import ExampleViewer from "./components/ExampleViewer.vue";
 import Expo from "./components/Expo.vue";
 
-import Oruga, { useOruga } from "@/oruga";
+import Oruga, { useOruga } from "@oruga-ui/oruga-next";
 
 import { bulmaConfig } from "@oruga-ui/theme-bulma";
 import * as bootstrapTheme from "@oruga-ui/theme-bootstrap";
@@ -54,10 +54,11 @@ export default {
     ...DefaultTheme,
     Layout,
     enhanceApp({ app }: { app: App }) {
+        // add fortawesome icons
         library.add(fas);
-
         app.component("VueFontawesome", FontAwesomeIcon);
 
+        // add documentation components
         app.component("InspectorWrapper", InspectorWrapper);
         app.component("Inspector", Inspector);
         app.component("ExampleViewer", ExampleViewer);

packages/docs/tsconfig.json

@@ -9,7 +9,7 @@
     "baseUrl": ".",
     "types": ["node", "vite/client", "vitepress/client"],
     "paths": {
-      "@/oruga": ["../oruga/src"],
+      "@oruga-ui/oruga-next": ["../oruga/src"],
     },
   },
   "include": [

packages/examples/.eslintrc.cjs

@@ -0,0 +1,27 @@
+/* eslint-env node */
+module.exports = {
+  root: true,
+  extends: [
+    "prettier",
+    "eslint:recommended",
+    "plugin:prettier/recommended",
+    "plugin:vue/vue3-recommended",
+    "@vue/eslint-config-typescript/recommended",
+    "@vue/eslint-config-prettier",
+  ],
+  plugins: ["prettier"],
+  rules: {
+    "@typescript-eslint/no-explicit-any": ["warn"],
+    "vue/padding-line-between-blocks": ["error", "always"],
+    "vue/multi-word-component-names": ["off"],
+    "comma-dangle": ["error", "always-multiline"],
+    "prettier/prettier": [
+      "error",
+      {
+        trailingComma: "all",
+        endOfLine: "auto",
+        bracketSameLine: true,
+      },
+    ],
+  },
+};

packages/examples/.gitignore

@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+

packages/examples/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@oruga-ui/examples",
+  "version": "0.0.1",
+  "homepage": "https://oruga-ui.com",
+  "description": "Oruga component examples",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/examples.js",
+  "module": "dist/examples.mjs",
+  "unpkg": "dist/examples.js",
+  "typings": "dist/types/examples/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/examples/src/index.d.ts",
+      "import": "./dist/examples.mjs",
+      "require": "./dist/examples.js"
+    },
+    "./*": "./*"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/oruga-ui/oruga"
+  },
+  "bugs": {
+    "url": "https://github.com/oruga-ui/oruga/issues"
+  },
+  "keywords": [
+    "oruga",
+    "vue",
+    "vuejs",
+    "components",
+    "ux",
+    "ui",
+    "css",
+    "agnostic",
+    "framework"
+  ],
+  "scripts": {
+    "build": "rimraf dist && vite build",
+    "publish": "cp ../../README.md . && npm run build && npm publish",
+    "update": "ncu -u"
+  },
+  "peerDependencies": {
+    "@oruga-ui/oruga-next": "^0.8.12",
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "6.5.2",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/vue-fontawesome": "^3.0.8",
+    "@highlightjs/vue-plugin": "2.1.2",
+    "highlight.js": "11.9.0",
+    "markdown-it": "^14.1.0",
+    "markdown-it-highlightjs": "^4.1.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.5",
+    "npm-check-updates": "^16.14.20",
+    "sass": "^1.77.7",
+    "vite": "^5.3.1",
+    "vite-plugin-dts": "^3.9.1",
+    "vite-tsconfig-paths": "^4.3.2",
+    "vitepress": "^1.2.3"
+  }
+}

packages/examples/src/index.ts

@@ -0,0 +1,67 @@
+import { markRaw } from "vue";
+import type { App, DefineComponent, Plugin } from "vue";
+
+// import icon library
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+// add fontawesome icons
+import "@fortawesome/fontawesome-free/scss/fontawesome.scss";
+import "@fortawesome/fontawesome-free/scss/regular.scss";
+import "@fortawesome/fontawesome-free/scss/solid.scss";
+
+// import code highlight library
+import "highlight.js/styles/github-dark.css";
+import hljs from "highlight.js/lib/core";
+import javascript from "highlight.js/lib/languages/javascript";
+import xml from "highlight.js/lib/languages/xml";
+import scss from "highlight.js/lib/languages/scss";
+import css from "highlight.js/lib/languages/css";
+
+// register highlight languages
+hljs.registerLanguage("xml", xml);
+hljs.registerLanguage("javascript", javascript);
+hljs.registerLanguage("scss", scss);
+hljs.registerLanguage("css", css);
+
+// import example styling
+import "../../../node_modules/vitepress/dist/client/theme-default/styles/vars.css";
+import "../../../node_modules/vitepress/dist/client/theme-default/styles/base.css";
+import "../../../node_modules/vitepress/dist/client/theme-default/styles/components/vp-code-group.css";
+import "../../../node_modules/vitepress/dist/client/theme-default/styles/components/vp-code.css";
+import "../../../node_modules/vitepress/dist/client/theme-default/styles/components/vp-doc.css";
+import "../../../node_modules/vitepress/dist/client/theme-default/styles/components/custom-block.css";
+import "../../docs/.vitepress/theme/styles/vitepress.scss";
+
+// import documentation components
+import ExampleViewer from "../../docs/.vitepress/theme/components/ExampleViewer.vue";
+import { ClientOnly } from "../../../node_modules/vitepress/dist/client/app/components/ClientOnly.js";
+
+// main oruga vue plugin
+const plugin: Plugin = {
+    install(app: App) {
+        // add fortawesome icons
+        library.add(fas);
+        app.component("VueFontawesome", FontAwesomeIcon);
+
+        // add examples components
+        const examples = import.meta.glob<DefineComponent>(
+            "../../oruga/src/components/**/examples/index.vue",
+            { eager: true },
+        );
+        for (const path in examples) {
+            const str = path.split("/")[5];
+            const component =
+                str.charAt(0).toUpperCase() + str.slice(1) + "Examples";
+            app.component(component, markRaw(examples[path].default));
+        }
+
+        // add documentation components
+        app.component("ExampleViewer", ExampleViewer);
+        app.component("ClientOnly", ClientOnly);
+    },
+};
+
+// export example plugins
+export default plugin;

packages/examples/tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "importHelpers": true,
+    "moduleResolution": "Node",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "noImplicitThis": false,
+    "noImplicitAny": false,
+    "strictNullChecks": false,
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "baseUrl": ".",
+    "types": ["node", "vite/client"],
+    "paths": {
+      "@/*": ["../oruga/src/*"],
+      "@oruga-ui/oruga-next": ["../oruga/src/index"],
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.vue",
+    "../oruga/src/**/*.ts",
+    "../oruga/src/**/*.vue",
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}