spoko-design-system 1.3.7 → 1.4.1

package/.github/workflows/code-quality.yml

@@ -1,4 +1,4 @@
-name: Code Quality
+name: Code Quality & Analysis
 
 on:
   push:
@@ -36,4 +36,37 @@ jobs:
         run: pnpm run lint
 
       - name: Type check
-        run: pnpm run check
+        run: pnpm run check
+
+  sonarcloud:
+    name: SonarCloud Analysis
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v5
+        with:
+          fetch-depth: 0  # Shallow clones should be disabled for better analysis
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10.17.1
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v5
+        with:
+          node-version: '22'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build project
+        run: pnpm run build
+
+      - name: SonarCloud Scan
+        uses: SonarSource/sonarcloud-github-action@master
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}  # Needed to get PR information, if any
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [1.4.1](https://github.com/polo-blue/sds/compare/v1.4.0...v1.4.1) (2025-10-20)
+
+## [1.4.0](https://github.com/polo-blue/sds/compare/v1.3.7...v1.4.0) (2025-10-20)
+
+### Features
+
+* enhance components with flexible layouts and click-to-copy functionality ([3dfa718](https://github.com/polo-blue/sds/commit/3dfa718f7f4355c0beed4032e84d01a2c2c4a547))
+
 ## [1.3.7](https://github.com/polo-blue/sds/compare/v1.3.6...v1.3.7) (2025-10-08)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "1.3.7",
+  "version": "1.4.1",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",
@@ -51,33 +51,33 @@
     "spoko design system"
   ],
   "dependencies": {
-    "@algolia/client-search": "^5.40.0",
-    "@astrojs/mdx": "^4.3.6",
-    "@astrojs/node": "^9.4.4",
+    "@algolia/client-search": "^5.40.1",
+    "@astrojs/mdx": "^4.3.7",
+    "@astrojs/node": "^9.5.0",
     "@astrojs/sitemap": "^3.6.0",
-    "@astrojs/ts-plugin": "^1.10.4",
+    "@astrojs/ts-plugin": "^1.10.5",
     "@astrojs/vue": "^5.1.1",
-    "@docsearch/css": "^4.1.0",
+    "@docsearch/css": "^4.2.0",
     "@iconify-json/ant-design": "^1.2.5",
     "@iconify-json/bi": "^1.2.6",
     "@iconify-json/bx": "^1.2.2",
-    "@iconify-json/carbon": "^1.2.13",
-    "@iconify-json/circle-flags": "^1.2.8",
+    "@iconify-json/carbon": "^1.2.14",
+    "@iconify-json/circle-flags": "^1.2.10",
     "@iconify-json/ei": "^1.2.2",
     "@iconify-json/el": "^1.2.2",
     "@iconify-json/eos-icons": "^1.2.4",
     "@iconify-json/et": "^1.2.1",
     "@iconify-json/flowbite": "^1.2.7",
-    "@iconify-json/fluent": "^1.2.32",
+    "@iconify-json/fluent": "^1.2.33",
     "@iconify-json/fluent-emoji": "1.2.6",
     "@iconify-json/ic": "^1.2.4",
     "@iconify-json/icon-park-outline": "^1.2.4",
     "@iconify-json/la": "^1.2.1",
-    "@iconify-json/lucide": "^1.2.68",
-    "@iconify-json/material-symbols-light": "^1.2.40",
+    "@iconify-json/lucide": "^1.2.70",
+    "@iconify-json/material-symbols-light": "^1.2.42",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/noto-v1": "^1.2.5",
-    "@iconify-json/octicon": "^1.2.14",
+    "@iconify-json/octicon": "^1.2.16",
     "@iconify-json/ph": "^1.2.2",
     "@iconify-json/simple-icons": "^1.2.54",
     "@iconify-json/streamline": "^1.2.5",
@@ -85,19 +85,19 @@
     "@iconify-json/streamline-freehand-color": "^1.2.2",
     "@iconify-json/system-uicons": "^1.2.4",
     "@iconify-json/uil": "^1.2.3",
-    "@iconify-json/vscode-icons": "^1.2.30",
-    "@iconify/json": "^2.2.392",
+    "@iconify-json/vscode-icons": "^1.2.32",
+    "@iconify/json": "^2.2.397",
     "@iconify/vue": "^5.0.0",
     "@playform/compress": "^0.2.0",
     "@playform/inline": "^0.1.2",
-    "@unocss/astro": "66.5.2",
-    "@unocss/preset-attributify": "66.5.2",
-    "@unocss/preset-typography": "66.5.2",
-    "@unocss/preset-uno": "66.5.2",
-    "@unocss/preset-web-fonts": "66.5.2",
-    "@unocss/preset-wind": "66.5.2",
-    "@unocss/reset": "66.5.2",
-    "@vite-pwa/astro": "^1.1.0",
+    "@unocss/astro": "66.5.4",
+    "@unocss/preset-attributify": "66.5.4",
+    "@unocss/preset-typography": "66.5.4",
+    "@unocss/preset-uno": "66.5.4",
+    "@unocss/preset-web-fonts": "66.5.4",
+    "@unocss/preset-wind": "66.5.4",
+    "@unocss/reset": "66.5.4",
+    "@vite-pwa/astro": "^1.1.1",
     "@vueuse/core": "^13.9.0",
     "astro-icon": "^1.1.5",
     "astro-meta-tags": "^0.4.0",
@@ -106,30 +106,30 @@
     "astro-remote": "^0.3.4",
     "dotenv": "^17.2.3",
     "swiper": "^12.0.2",
-    "unocss": "66.5.2",
+    "unocss": "66.5.4",
     "vue": "^3.5.22"
   },
   "devDependencies": {
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@types/gtag.js": "^0.0.20",
-    "@types/node": "^24.7.0",
-    "@typescript-eslint/eslint-plugin": "^8.46.0",
-    "@typescript-eslint/parser": "^8.46.0",
-    "@unocss/transformer-variant-group": "66.5.2",
+    "@types/node": "^24.8.1",
+    "@typescript-eslint/eslint-plugin": "^8.46.1",
+    "@typescript-eslint/parser": "^8.46.1",
+    "@unocss/transformer-variant-group": "66.5.4",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/compiler-sfc": "^3.5.22",
     "@vue/eslint-config-typescript": "^14.6.0",
-    "astro": "^5.14.1",
+    "astro": "^5.14.6",
     "conventional-changelog-conventionalcommits": "^9.1.0",
-    "eslint": "^9.37.0",
+    "eslint": "^9.38.0",
     "eslint-plugin-astro": "^1.3.1",
-    "eslint-plugin-vue": "^10.5.0",
+    "eslint-plugin-vue": "^10.5.1",
     "prettier": "^3.6.2",
     "prettier-plugin-astro": "^0.14.1",
-    "semantic-release": "^24.2.9",
+    "semantic-release": "^25.0.1",
     "unocss": "^0.65.0",
-    "vite": "^7.1.9"
+    "vite": "^7.1.11"
   },
   "packageManager": "pnpm@10.17.1",
   "pnpm": {

package/src/components/MainColors.vue

@@ -1,8 +1,30 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import { colors } from './../../uno-config/theme/colors';
 
 // Get color categories
 const colorCategories = Object.entries(colors);
+
+// Track copied state for visual feedback
+const copiedItem = ref<string | null>(null);
+
+const copyToClipboard = async (text: string, id: string) => {
+  try {
+    await navigator.clipboard.writeText(text);
+    copiedItem.value = id;
+    setTimeout(() => {
+      copiedItem.value = null;
+    }, 2000);
+  } catch (err) {
+    console.error('Failed to copy:', err);
+  }
+};
+
+const getColorClass = (category: string, name: string) => {
+  // Generate Tailwind/UnoCSS class name
+  const colorName = name === 'default' ? category : `${category}-${name}`;
+  return colorName;
+};
 </script>
 
 <template>
@@ -11,22 +33,82 @@ const colorCategories = Object.entries(colors);
       v-for="[category, shades] in colorCategories"
       :key="category"
     >
-      <h3 class="capitalize">
+      <h3 class="capitalize text-xl font-bold mb-4">
         {{ category }}
       </h3>
-      <div class="grid grid-cols-3 md:grid-cols-9">
+      <div class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-5 gap-x-6 gap-y-10">
         <div
           v-for="(value, name) in shades"
           :key="name"
-          class="mb-6"
+          class="group relative"
         >
-          <div
-            class="h-12 transition-all"
+          <!-- Color Swatch -->
+          <button
+            class="w-full h-10 rounded-lg shadow-md transition-all duration-200 hover:shadow-xl hover:scale-105 cursor-pointer relative overflow-hidden"
             :style="`background: ${value}`"
-          />
-          <div class="text-sm flex flex-col text-center font-mono text-slate-500">
-            <span>{{ name }}</span>
-            <span class="uppercase text-xs">{{ value }}</span>
+            :title="`Click to copy hex: ${value}`"
+            @click="copyToClipboard(value, `${category}-${name}-hex`)"
+          >
+            <!-- Copied indicator -->
+            <div
+              v-if="copiedItem === `${category}-${name}-hex`"
+              class="absolute inset-0 bg-black/50 flex items-center justify-center text-white font-bold text-sm"
+            >
+              ✓ Copied!
+            </div>
+          </button>
+
+          <!-- Color Info -->
+          <div class="mt-2 space-y-1">
+            <!-- Color Name -->
+            <div class="text-sm font-medium text-gray-700 text-center">
+              {{ name }}
+            </div>
+
+            <!-- Copy Buttons -->
+            <div class="flex gap-1 text-xs font-mono">
+              <!-- Copy Hex -->
+              <button
+                class="flex-1 px-2 py-1 bg-gray-100 hover:bg-gray-200 rounded transition-colors text-gray-600 hover:text-gray-900 relative"
+                :title="`Copy hex: ${value}`"
+                @click="copyToClipboard(value, `${category}-${name}-hex`)"
+              >
+                <span
+                  v-if="copiedItem === `${category}-${name}-hex`"
+                  class="text-green-600"
+                >✓</span>
+                <span
+                  v-else
+                  class="uppercase text-xs"
+                >{{ value }}</span>
+              </button>
+
+              <!-- Copy Class Name (text-*) -->
+              <button
+                class="flex-1 px-2 py-1 bg-blue-100 hover:bg-blue-200 rounded transition-colors text-blue-700 hover:text-blue-900 relative"
+                :title="`Copy class: text-${getColorClass(category, name)}`"
+                @click="copyToClipboard(`text-${getColorClass(category, name)}`, `${category}-${name}-class`)"
+              >
+                <span
+                  v-if="copiedItem === `${category}-${name}-class`"
+                  class="text-green-600"
+                >✓</span>
+                <span v-else>text-</span>
+              </button>
+
+              <!-- Copy Class Name (bg-*) -->
+              <button
+                class="flex-1 px-2 py-1 bg-purple-100 hover:bg-purple-200 rounded transition-colors text-purple-700 hover:text-purple-900 relative"
+                :title="`Copy class: bg-${getColorClass(category, name)}`"
+                @click="copyToClipboard(`bg-${getColorClass(category, name)}`, `${category}-${name}-bg`)"
+              >
+                <span
+                  v-if="copiedItem === `${category}-${name}-bg`"
+                  class="text-green-600"
+                >✓</span>
+                <span v-else>bg-</span>
+              </button>
+            </div>
           </div>
         </div>
       </div>

package/src/components/Modal.astro

@@ -1,11 +1,40 @@
 ---
-const { id, open } = Astro.props;
 import Button from '../components/Button.vue';
+
+interface Props {
+  id: string;
+  open?: string;
+  title?: string;
+  maxWidth?: string;
+  showXButton?: boolean;
+  showTrigger?: boolean;
+
+  // Action buttons
+  showActions?: boolean;
+  cancelText?: string;
+  confirmText?: string;
+  confirmPrimary?: boolean;
+}
+
+const {
+  id,
+  open = 'Open modal',
+  title,
+  maxWidth = '600px',
+  showXButton = true,
+  showTrigger = true,
+  showActions = false,
+  cancelText = 'Cancel',
+  confirmText = 'Confirm',
+  confirmPrimary = true,
+} = Astro.props;
 ---
 
-<style>
+<style define:vars={{ maxWidth }}>
   dialog {
-    @apply fixed top-0 left-0 right-0 bottom-0;
+    @apply fixed top-0 left-0 right-0 bottom-0 rounded-lg shadow-xl;
+    max-width: var(--maxWidth);
+    width: calc(100% - 2rem);
 
     &::backdrop {
       @apply bg-slate-medium/50 fixed;
@@ -15,20 +44,111 @@ import Button from '../components/Button.vue';
       left: 0px;
     }
   }
+
+  .modal-header {
+    @apply relative pb-4 mb-4 border-b border-gray-300;
+  }
+
+  .modal-close-x {
+    @apply absolute top-0 right-0 w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-200 transition-colors cursor-pointer border-0 bg-transparent;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      width: 16px;
+      height: 2px;
+      background-color: #666;
+    }
+
+    &::before {
+      transform: rotate(45deg);
+    }
+
+    &::after {
+      transform: rotate(-45deg);
+    }
+
+    &:hover::before,
+    &:hover::after {
+      background-color: #000;
+    }
+  }
+
+  .modal-content {
+    @apply mb-4;
+  }
+
+  .modal-actions {
+    @apply flex gap-3 justify-end pt-4 border-t border-gray-300;
+  }
 </style>
 
-<Button
-  primary
-  onclick={`window.${id}.showModal()`}
-  >{open}</Button
->
+{showTrigger && (
+  <Button
+    primary
+    onclick={`window.${id}.showModal()`}
+    >{open}</Button
+  >
+)}
 
 <dialog
   id={id}
   class="p-6"
 >
-  <slot name="main" />
-  <form method="dialog">
-    <slot name="close" />
-  </form>
+  <div class="modal-header">
+    {title && <h2 class="text-2xl font-bold pr-8">{title}</h2>}
+    <slot name="header" />
+
+    {showXButton && (
+      <form method="dialog" class="inline">
+        <button
+          class="modal-close-x"
+          aria-label="Close"
+          type="submit"
+        />
+      </form>
+    )}
+  </div>
+
+  <div class="modal-content">
+    <slot name="main" />
+    <slot />
+  </div>
+
+  {showActions && (
+    <div class="modal-actions">
+      <slot name="actions">
+        <form method="dialog" class="contents">
+          <Button>{cancelText}</Button>
+        </form>
+        <Button primary={confirmPrimary} onclick={`document.getElementById('${id}').dispatchEvent(new CustomEvent('confirm', { detail: { id: '${id}' } }))`}>
+          {confirmText}
+        </Button>
+      </slot>
+    </div>
+  )}
+
+  {!showActions && (
+    <form method="dialog">
+      <slot name="close" />
+    </form>
+  )}
 </dialog>
+
+<script define:vars={{ id }}>
+  // Close on backdrop click
+  const dialog = document.getElementById(id);
+  dialog?.addEventListener('click', (e) => {
+    if (e.target === dialog) {
+      dialog.close();
+    }
+  });
+
+  // Close on Escape key
+  dialog?.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      dialog.close();
+    }
+  });
+</script>