Skip to content

Commit 4211246

Browse files
Corb3nikCorb3nik
authored
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
1 parent 422d056 commit 4211246

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+3469
-79
lines changed

‎.github/workflows/validate.yml

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
name: Validate
2+
3+
on:
4+
pull_request:
5+
types:
6+
- review_requested
7+
8+
push:
9+
branches:
10+
- 'main'
11+
12+
concurrency:
13+
group: validate-${{ github.ref_name }}
14+
cancel-in-progress: true
15+
16+
env:
17+
CAIDO_NODE_VERSION: 20
18+
CAIDO_PNPM_VERSION: 9
19+
20+
jobs:
21+
typecheck:
22+
name: 'Typecheck'
23+
runs-on: ubuntu-latest
24+
if: ${{ !github.event.pull_request.draft }}
25+
timeout-minutes: 10
26+
27+
steps:
28+
- name: Checkout repository
29+
uses: actions/checkout@v3
30+
31+
- name: Setup Node.js
32+
uses: actions/setup-node@v4
33+
with:
34+
node-version: ${{ env.CAIDO_NODE_VERSION }}
35+
36+
- name: Setup pnpm
37+
uses: pnpm/[email protected]
38+
with:
39+
version: ${{ env.CAIDO_PNPM_VERSION }}
40+
41+
- name: Install dependencies
42+
run: pnpm install --frozen-lockfile
43+
44+
- name: Run typechecker
45+
run: pnpm typecheck

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "ui-kit",
33
"private": true,
44
"scripts": {
5-
"test": "echo \"Error: no test specified\" && exit 1"
5+
"typecheck": "pnpm -r typecheck"
66
},
77
"keywords": [],
88
"author": "Caido Labs Inc.",

‎packages/primevue/env.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="@histoire/plugin-vue/components" />

‎packages/primevue/histoire.config.ts

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { defineConfig } from 'histoire'
2+
import { HstVue } from '@histoire/plugin-vue'
3+
import Vue from '@vitejs/plugin-vue'
4+
5+
export default defineConfig({
6+
setupFile: './src/stories/setup/index.ts',
7+
storyMatch: [
8+
"./src/stories/**/*.story.vue",
9+
],
10+
plugins: [
11+
HstVue(),
12+
],
13+
vite: {
14+
plugins: [
15+
Vue(),
16+
],
17+
server: {
18+
fs: {
19+
allow: ['../../node_modules'],
20+
},
21+
},
22+
},
23+
})

‎packages/primevue/package.json

+14-2
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,12 @@
44
"description": "Primevue themes for Caido",
55
"main": "dist/primevue.mjs",
66
"types": "dist/types/index.d.ts",
7+
"type": "module",
78
"scripts": {
9+
"dev": "histoire dev",
810
"prepublish": "pnpm build",
9-
"build": "vite build && tsc --emitDeclarationOnly",
11+
"typecheck": "vue-tsc --noEmit -p tsconfig.dev.json",
12+
"build": "vite build && vue-tsc --emitDeclarationOnly -p tsconfig.build.json",
1013
"test": "echo \"Error: no test specified\" && exit 1"
1114
},
1215
"files": [
@@ -16,8 +19,17 @@
1619
"author": "Caido Labs Inc.",
1720
"license": "MIT",
1821
"devDependencies": {
22+
"@fortawesome/fontawesome-free": "6.5.1",
23+
"@caido/tailwindcss": "0.0.1",
24+
"@histoire/plugin-vue": "0.17.17",
25+
"@vitejs/plugin-vue": "5.1.0",
26+
"histoire": "0.17.17",
27+
"tailwindcss": "3.4.13",
28+
"tailwindcss-primeui": "0.3.4",
1929
"typescript": "5.5.4",
20-
"vite": "5.4.0"
30+
"vite": "5.4.0",
31+
"vue": "3.4.33",
32+
"vue-tsc": "2.1.10"
2133
},
2234
"peerDependencies": {
2335
"primevue": "4.1.0"

‎packages/primevue/postcss.config.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import tailwindcss from "tailwindcss";
2+
3+
export default {
4+
plugins: [
5+
tailwindcss(),
6+
],
7+
}

‎packages/primevue/src/stories/Accordion.story.vue

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<script setup lang="ts">
2+
import Accordion from 'primevue/accordion'
3+
import AccordionTab from 'primevue/accordiontab'
4+
import { ref } from 'vue'
5+
6+
const activeIndex = ref(0)
7+
</script>
8+
9+
<template>
10+
<Story title="Accordion">
11+
<Variant title="Default">
12+
<Accordion :activeIndex="activeIndex">
13+
<AccordionTab header="Header I">
14+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
15+
</AccordionTab>
16+
<AccordionTab header="Header II">
17+
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
18+
</AccordionTab>
19+
<AccordionTab header="Header III">
20+
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
21+
</AccordionTab>
22+
</Accordion>
23+
</Variant>
24+
25+
<Variant title="Multiple">
26+
<Accordion :multiple="true">
27+
<AccordionTab header="Header I">
28+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
29+
</AccordionTab>
30+
<AccordionTab header="Header II">
31+
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
32+
</AccordionTab>
33+
<AccordionTab header="Header III">
34+
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
35+
</AccordionTab>
36+
</Accordion>
37+
</Variant>
38+
39+
<Variant title="Disabled">
40+
<Accordion>
41+
<AccordionTab header="Header I">
42+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
43+
</AccordionTab>
44+
<AccordionTab header="Header II" :disabled="true">
45+
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
46+
</AccordionTab>
47+
<AccordionTab header="Header III">
48+
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
49+
</AccordionTab>
50+
</Accordion>
51+
</Variant>
52+
</Story>
53+
</template>

‎packages/primevue/src/stories/Avatar.story.vue

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<script setup lang="ts">
2+
import Avatar from 'primevue/avatar'
3+
import AvatarGroup from 'primevue/avatargroup'
4+
</script>
5+
6+
<template>
7+
<Story title="Avatar">
8+
<Variant title="Label">
9+
<div class="flex gap-2">
10+
<Avatar label="P" />
11+
<Avatar label="V" style="background-color: #2196F3; color: #ffffff" />
12+
<Avatar label="U" style="background-color: #9c27b0; color: #ffffff" />
13+
</div>
14+
</Variant>
15+
16+
<Variant title="Icon">
17+
<div class="flex gap-2">
18+
<Avatar icon="fa-solid fa-user" />
19+
<Avatar icon="fa-solid fa-user" style="background-color: #2196F3; color: #ffffff" />
20+
<Avatar icon="fa-solid fa-user" style="background-color: #9c27b0; color: #ffffff" />
21+
</div>
22+
</Variant>
23+
24+
<Variant title="Image">
25+
<div class="flex gap-2">
26+
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
27+
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" />
28+
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" />
29+
</div>
30+
</Variant>
31+
32+
<Variant title="Group">
33+
<AvatarGroup class="mb-3">
34+
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" />
35+
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" size="large" />
36+
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" size="large" />
37+
<Avatar label="+2" size="large" style="background-color: #9c27b0; color: #ffffff" />
38+
</AvatarGroup>
39+
</Variant>
40+
41+
<Variant title="Sizes">
42+
<div class="flex gap-2 items-center">
43+
<Avatar label="P" size="large" />
44+
<Avatar label="P" />
45+
<Avatar label="P" size="xlarge" />
46+
</div>
47+
</Variant>
48+
49+
<Variant title="Shapes">
50+
<div class="flex gap-2">
51+
<Avatar label="P" />
52+
<Avatar label="P" shape="circle" />
53+
</div>
54+
</Variant>
55+
</Story>
56+
</template>

‎packages/primevue/src/stories/Badge.story.vue

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<script setup lang="ts">
2+
import Badge from 'primevue/badge'
3+
import Button from 'primevue/button'
4+
</script>
5+
6+
<template>
7+
<Story title="Badge">
8+
<Variant title="Numbers">
9+
<div class="flex gap-4">
10+
<Badge value="2" />
11+
<Badge value="8" severity="success" />
12+
<Badge value="4" severity="info" />
13+
<Badge value="12" severity="warn" />
14+
<Badge value="3" severity="danger" />
15+
</div>
16+
</Variant>
17+
18+
<Variant title="Sizes">
19+
<div class="flex gap-4">
20+
<Badge value="2" size="small" />
21+
<Badge value="4" />
22+
<Badge value="6" size="large" />
23+
<Badge value="8" size="xlarge" />
24+
</div>
25+
</Variant>
26+
27+
<Variant title="Button Badges">
28+
<div class="flex gap-4">
29+
<Button label="Emails" badge="8" />
30+
<Button label="Messages" badge="12" severity="danger" />
31+
<Button label="Notifications" badge="4" severity="info" />
32+
</div>
33+
</Variant>
34+
</Story>
35+
</template>

‎packages/primevue/src/stories/BlockUI.story.vue

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<script setup lang="ts">
2+
import BlockUI from 'primevue/blockui'
3+
import Button from 'primevue/button'
4+
import { ref } from 'vue'
5+
6+
const blocked = ref(false)
7+
8+
const toggle = () => {
9+
blocked.value = !blocked.value
10+
}
11+
</script>
12+
13+
<template>
14+
<Story title="BlockUI">
15+
<Variant title="Default">
16+
<div class="flex flex-col gap-4">
17+
18+
<div>
19+
<Button @click="toggle" :label="blocked ? 'Unblock' : 'Block'" />
20+
</div>
21+
22+
<BlockUI :blocked="blocked">
23+
<div class="w-full surface-card p-4 border-round shadow-2">
24+
<p class="mt-0 mb-4 text-lg">
25+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
26+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
27+
</p>
28+
29+
<Button label="Button" />
30+
</div>
31+
</BlockUI>
32+
</div>
33+
</Variant>
34+
35+
<Variant title="Full Screen">
36+
<Button @click="toggle" :label="blocked ? 'Unblock' : 'Block'" />
37+
<BlockUI :blocked="blocked" fullScreen>
38+
<p class="mt-0 mb-4 text-lg text-gray-300">Full screen is blocked</p>
39+
</BlockUI>
40+
</Variant>
41+
</Story>
42+
</template>

‎packages/primevue/src/stories/Breadcrumb.story.vue

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script setup lang="ts">
2+
import Breadcrumb from 'primevue/breadcrumb'
3+
4+
const items = [
5+
{ label: 'Computer', to: '/' },
6+
{ label: 'Notebook', to: '/' },
7+
{ label: 'Gaming', to: '/' },
8+
{ label: 'ROG', to: '/' }
9+
]
10+
11+
const home = { icon: 'fas fa-home', to: '/' }
12+
</script>
13+
14+
<template>
15+
<Story title="Breadcrumb">
16+
<Variant title="Default">
17+
<Breadcrumb :model="items" :home="home" />
18+
</Variant>
19+
</Story>
20+
</template>

0 commit comments

Comments
 (0)