Ib primevue histoire (#7)

* Working histoire installation * Add button story * Add Select story * Add InputText story * Add ProgressBar.story.vue * Add Card story * Add more component stories * Convert script tags to typescript * add more stories * Rename wrapper.vue
caido · Nov 19, 2024 · 4211246 · 4211246
1 parent 422d056
commit 4211246
Show file tree

Hide file tree

Showing 47 changed files with 3,469 additions and 79 deletions.
diff --git a/.github/workflows/validate.yml b/.github/workflows/validate.yml
@@ -0,0 +1,45 @@
+name: Validate
+
+on:
+  pull_request:
+    types:
+      - review_requested
+
+  push:
+    branches:
+      - 'main'
+
+concurrency:
+  group: validate-${{ github.ref_name }}
+  cancel-in-progress: true
+
+env:
+  CAIDO_NODE_VERSION: 20
+  CAIDO_PNPM_VERSION: 9
+
+jobs:
+  typecheck:
+    name: 'Typecheck'
+    runs-on: ubuntu-latest
+    if: ${{ !github.event.pull_request.draft }}
+    timeout-minutes: 10
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.CAIDO_NODE_VERSION }}
+
+      - name: Setup pnpm
+        uses: pnpm/[email protected]
+        with:
+          version: ${{ env.CAIDO_PNPM_VERSION }}
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run typechecker
+        run: pnpm typecheck
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "ui-kit",
   "private": true,
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "typecheck": "pnpm -r typecheck"
   },
   "keywords": [],
   "author": "Caido Labs Inc.",

diff --git a/packages/primevue/env.d.ts b/packages/primevue/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="@histoire/plugin-vue/components" />
diff --git a/packages/primevue/histoire.config.ts b/packages/primevue/histoire.config.ts
@@ -0,0 +1,23 @@
+import { defineConfig } from 'histoire'
+import { HstVue } from '@histoire/plugin-vue'
+import Vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  setupFile: './src/stories/setup/index.ts',
+  storyMatch: [
+    "./src/stories/**/*.story.vue",
+  ],
+  plugins: [
+    HstVue(),
+  ],
+  vite: {
+    plugins: [
+      Vue(),
+    ],
+    server: {
+      fs: {
+        allow: ['../../node_modules'],
+      },
+    },
+  },
+})
diff --git a/packages/primevue/package.json b/packages/primevue/package.json
@@ -4,9 +4,12 @@
   "description": "Primevue themes for Caido",
   "main": "dist/primevue.mjs",
   "types": "dist/types/index.d.ts",
+  "type": "module",
   "scripts": {
+    "dev": "histoire dev",
     "prepublish": "pnpm build",
-    "build": "vite build && tsc --emitDeclarationOnly",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.dev.json",
+    "build": "vite build && vue-tsc --emitDeclarationOnly -p tsconfig.build.json",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "files": [
@@ -16,8 +19,17 @@
   "author": "Caido Labs Inc.",
   "license": "MIT",
   "devDependencies": {
+    "@fortawesome/fontawesome-free": "6.5.1",
+    "@caido/tailwindcss": "0.0.1",
+    "@histoire/plugin-vue": "0.17.17",
+    "@vitejs/plugin-vue": "5.1.0",
+    "histoire": "0.17.17",
+    "tailwindcss": "3.4.13",
+    "tailwindcss-primeui": "0.3.4",
     "typescript": "5.5.4",
-    "vite": "5.4.0"
+    "vite": "5.4.0",
+    "vue": "3.4.33",
+    "vue-tsc": "2.1.10"
   },
   "peerDependencies": {
     "primevue": "4.1.0"

diff --git a/packages/primevue/postcss.config.js b/packages/primevue/postcss.config.js
@@ -0,0 +1,7 @@
+import tailwindcss from "tailwindcss";
+
+export default {
+  plugins: [
+    tailwindcss(),
+  ],
+}
diff --git a/packages/primevue/src/stories/Accordion.story.vue b/packages/primevue/src/stories/Accordion.story.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import Accordion from 'primevue/accordion'
+import AccordionTab from 'primevue/accordiontab'
+import { ref } from 'vue'
+
+const activeIndex = ref(0)
+</script>
+
+<template>
+    <Story title="Accordion">
+        <Variant title="Default">
+            <Accordion :activeIndex="activeIndex">
+                <AccordionTab header="Header I">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                </AccordionTab>
+                <AccordionTab header="Header II">
+                    <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                </AccordionTab>
+                <AccordionTab header="Header III">
+                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
+                </AccordionTab>
+            </Accordion>
+        </Variant>
+
+        <Variant title="Multiple">
+            <Accordion :multiple="true">
+                <AccordionTab header="Header I">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                </AccordionTab>
+                <AccordionTab header="Header II">
+                    <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                </AccordionTab>
+                <AccordionTab header="Header III">
+                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
+                </AccordionTab>
+            </Accordion>
+        </Variant>
+
+        <Variant title="Disabled">
+            <Accordion>
+                <AccordionTab header="Header I">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                </AccordionTab>
+                <AccordionTab header="Header II" :disabled="true">
+                    <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                </AccordionTab>
+                <AccordionTab header="Header III">
+                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
+                </AccordionTab>
+            </Accordion>
+        </Variant>
+    </Story>
+</template> 
diff --git a/packages/primevue/src/stories/Avatar.story.vue b/packages/primevue/src/stories/Avatar.story.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import Avatar from 'primevue/avatar'
+import AvatarGroup from 'primevue/avatargroup'
+</script>
+
+<template>
+    <Story title="Avatar">
+        <Variant title="Label">
+            <div class="flex gap-2">
+                <Avatar label="P" />
+                <Avatar label="V" style="background-color: #2196F3; color: #ffffff" />
+                <Avatar label="U" style="background-color: #9c27b0; color: #ffffff" />
+            </div>
+        </Variant>
+
+        <Variant title="Icon">
+            <div class="flex gap-2">
+                <Avatar icon="fa-solid fa-user" />
+                <Avatar icon="fa-solid fa-user" style="background-color: #2196F3; color: #ffffff" />
+                <Avatar icon="fa-solid fa-user" style="background-color: #9c27b0; color: #ffffff" />
+            </div>
+        </Variant>
+
+        <Variant title="Image">
+            <div class="flex gap-2">
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" />
+            </div>
+        </Variant>
+
+        <Variant title="Group">
+            <AvatarGroup class="mb-3">
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" size="large" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" size="large" />
+                <Avatar label="+2" size="large" style="background-color: #9c27b0; color: #ffffff" />
+            </AvatarGroup>
+        </Variant>
+
+        <Variant title="Sizes">
+            <div class="flex gap-2 items-center">
+                <Avatar label="P" size="large" />
+                <Avatar label="P" />
+                <Avatar label="P" size="xlarge" />
+            </div>
+        </Variant>
+
+        <Variant title="Shapes">
+            <div class="flex gap-2">
+                <Avatar label="P" />
+                <Avatar label="P" shape="circle" />
+            </div>
+        </Variant>
+    </Story>
+</template> 
diff --git a/packages/primevue/src/stories/Badge.story.vue b/packages/primevue/src/stories/Badge.story.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import Badge from 'primevue/badge'
+import Button from 'primevue/button'
+</script>
+
+<template>
+    <Story title="Badge">
+        <Variant title="Numbers">
+            <div class="flex gap-4">
+                <Badge value="2" />
+                <Badge value="8" severity="success" />
+                <Badge value="4" severity="info" />
+                <Badge value="12" severity="warn" />
+                <Badge value="3" severity="danger" />
+            </div>
+        </Variant>
+
+        <Variant title="Sizes">
+            <div class="flex gap-4">
+                <Badge value="2" size="small" />
+                <Badge value="4" />
+                <Badge value="6" size="large" />
+                <Badge value="8" size="xlarge" />
+            </div>
+        </Variant>
+
+        <Variant title="Button Badges">
+            <div class="flex gap-4">
+                <Button label="Emails" badge="8" />
+                <Button label="Messages" badge="12" severity="danger" />
+                <Button label="Notifications" badge="4" severity="info" />
+            </div>
+        </Variant>
+    </Story>
+</template> 
diff --git a/packages/primevue/src/stories/BlockUI.story.vue b/packages/primevue/src/stories/BlockUI.story.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import BlockUI from 'primevue/blockui'
+import Button from 'primevue/button'
+import { ref } from 'vue'
+
+const blocked = ref(false)
+
+const toggle = () => {
+    blocked.value = !blocked.value
+}
+</script>
+
+<template>
+    <Story title="BlockUI">
+        <Variant title="Default">
+            <div class="flex flex-col gap-4">
+
+                <div>
+                    <Button @click="toggle" :label="blocked ? 'Unblock' : 'Block'" />
+                </div>
+
+                <BlockUI :blocked="blocked">
+                    <div class="w-full surface-card p-4 border-round shadow-2">
+                        <p class="mt-0 mb-4 text-lg">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                        </p>
+
+                        <Button label="Button" />
+                    </div>
+                </BlockUI>
+            </div>
+        </Variant>
+
+        <Variant title="Full Screen">
+            <Button @click="toggle" :label="blocked ? 'Unblock' : 'Block'" />
+            <BlockUI :blocked="blocked" fullScreen>
+                <p class="mt-0 mb-4 text-lg text-gray-300">Full screen is blocked</p>
+            </BlockUI>
+        </Variant>
+    </Story>
+</template> 
diff --git a/packages/primevue/src/stories/Breadcrumb.story.vue b/packages/primevue/src/stories/Breadcrumb.story.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import Breadcrumb from 'primevue/breadcrumb'
+
+const items = [
+    { label: 'Computer', to: '/' },
+    { label: 'Notebook', to: '/' },
+    { label: 'Gaming', to: '/' },
+    { label: 'ROG', to: '/' }
+]
+
+const home = { icon: 'fas fa-home', to: '/' }
+</script>
+
+<template>
+    <Story title="Breadcrumb">
+        <Variant title="Default">
+            <Breadcrumb :model="items" :home="home" />
+        </Variant>
+    </Story>
+</template>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		/// <reference types="@histoire/plugin-vue/components" />