Skip to content

Commit 6f795f5

Browse files
cagataycivicicagataycivici
committed
updated docs for the new ci pipeline
1 parent 335133d commit 6f795f5

File tree

8 files changed

+125
-63
lines changed

8 files changed

+125
-63
lines changed

‎apps/showcase/assets/menu/menu.json‎

Lines changed: 51 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,11 @@
6565
{
6666
"name": "Unstyled Mode",
6767
"to": "/theming/unstyled"
68+
},
69+
{
70+
"name": "Tailwind CSS",
71+
"icon": "pi pi-star",
72+
"to": "/tailwind"
6873
}
6974
]
7075
},
@@ -497,27 +502,46 @@
497502
}
498503
]
499504
},
505+
{
506+
"name": "Guides",
507+
"icon": "pi pi-book",
508+
"children": [
509+
{
510+
"name": "Accessibility",
511+
"to": "/guides/accessibility"
512+
},
513+
{
514+
"name": "Dynamic Imports",
515+
"to": "/guides/dynamicimports"
516+
},
517+
{
518+
"name": "Migration to V4",
519+
"to": "/guides/migration/v4"
520+
},
521+
{
522+
"name": "Pass Through",
523+
"icon": "pi pi-directions",
524+
"to": "/passthrough"
525+
},
526+
{
527+
"name": "PrimeFlex",
528+
"to": "/guides/primeflex"
529+
},
530+
{
531+
"name": "PrimeTV",
532+
"href": "https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw"
533+
},
534+
{
535+
"name": "RTL",
536+
"to": "/guides/rtl"
537+
}
538+
]
539+
},
500540
{
501541
"name": "Forms",
502542
"icon": "pi pi-check-circle",
503543
"to": "/forms"
504544
},
505-
{
506-
"name": "Pass Through",
507-
"icon": "pi pi-directions",
508-
"to": "/passthrough"
509-
},
510-
{
511-
"name": "Tailwind CSS",
512-
"icon": "pi pi-star",
513-
"to": "/tailwind"
514-
},
515-
{
516-
"name": "Volt UI",
517-
"icon": "pi pi-bolt",
518-
"href": "https://volt.primevue.org",
519-
"badge": "NEW"
520-
},
521545
{
522546
"name": "Icons",
523547
"icon": "pi pi-eye",
@@ -532,6 +556,11 @@
532556
}
533557
]
534558
},
559+
{
560+
"name": "Volt UI",
561+
"icon": "pi pi-bolt",
562+
"href": "https://volt.primevue.org"
563+
},
535564
{
536565
"name": "Figma UI Kit",
537566
"icon": "pi pi-pencil",
@@ -559,7 +588,7 @@
559588
"to": "/designer/guide"
560589
},
561590
{
562-
"name": "Continuous Integration",
591+
"name": "CI Pipeline",
563592
"to": "/designer/ci"
564593
}
565594
]
@@ -572,38 +601,13 @@
572601
{
573602
"name": "PrimeBlocks",
574603
"icon": "pi pi-server",
575-
"href": "https://primeblocks.org",
576-
"badge": "NEW"
604+
"href": "https://primeblocks.org"
577605
},
578606
{
579-
"name": "Guides",
580-
"icon": "pi pi-book",
581-
"children": [
582-
{
583-
"name": "Accessibility",
584-
"to": "/guides/accessibility"
585-
},
586-
{
587-
"name": "Dynamic Imports",
588-
"to": "/guides/dynamicimports"
589-
},
590-
{
591-
"name": "Migration to V4",
592-
"to": "/guides/migration/v4"
593-
},
594-
{
595-
"name": "PrimeFlex",
596-
"to": "/guides/primeflex"
597-
},
598-
{
599-
"name": "PrimeTV",
600-
"href": "https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw"
601-
},
602-
{
603-
"name": "RTL",
604-
"to": "/guides/rtl"
605-
}
606-
]
607+
"name": "Store",
608+
"href": "https://primeui.store",
609+
"icon": "pi pi-shopping-bag",
610+
"badge": "NEW"
607611
},
608612
{
609613
"name": "Support",
@@ -648,10 +652,6 @@
648652
"to": "/contribution",
649653
"icon": "pi pi-users"
650654
},
651-
{
652-
"name": "Store",
653-
"href": "https://primeui.store"
654-
},
655655
{
656656
"name": "Twitter",
657657
"href": "https://twitter.com/primevue"

‎apps/showcase/components/doc/DocPTViewer.vue‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
<template>
22
<DocSectionText v-bind="$attrs">
3-
<p>
4-
Some sections may not be visible due to the availability of the particular feature. Section names that start with the <i>pc</i> prefix indicate that the element is a PrimeVue component not a DOM element. Visit the
5-
<PrimeVueNuxtLink to="/passthrough/#pcprefix">pass-through</PrimeVueNuxtLink> documentation for more information.
6-
</p>
3+
<p>The Pass Through attributes is an API to access the internal DOM Structure of the components. Visit the <NuxtLink to="/passthrough">Pass Through</NuxtLink> documentation for more information.</p>
4+
<p>Some sections may not be visible due to the availability of the particular feature. Section names that start with the <i>pc</i> prefix indicate that the element is a PrimeVue component not a DOM element.</p>
75
</DocSectionText>
86
<div ref="container" class="doc-ptviewerwrapper card">
97
<div id="doc-ptviewer" class="doc-ptviewer">

‎apps/showcase/components/layout/designer/create/DesignCreateTheme.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,28 @@
5656
<button type="button" @click="createThemeFromFigma" class="btn-design">Create</button>
5757
</div>
5858
</div>
59+
60+
<Divider>OR</Divider>
61+
62+
<div class="flex flex-col gap-4 border border-surface-200 dark:border-surface-700 rounded-md p-4">
63+
<div class="flex items-center gap-1">
64+
<svg width="20px" height="20px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
65+
<path
66+
fill="currentColor"
67+
fill-rule="evenodd"
68+
clip-rule="evenodd"
69+
d="M7.00005 2.04999H5.52505C4.71043 2.04999 4.05005 2.71037 4.05005 3.52499C4.05005 4.33961 4.71043 4.99999 5.52505 4.99999H7.00005V2.04999ZM7.00005 1.04999H8.00005H9.47505C10.842 1.04999 11.95 2.15808 11.95 3.52499C11.95 4.33163 11.5642 5.04815 10.9669 5.49999C11.5642 5.95184 11.95 6.66836 11.95 7.475C11.95 8.8419 10.842 9.95 9.47505 9.95C8.92236 9.95 8.41198 9.76884 8.00005 9.46266V9.95L8.00005 11.425C8.00005 12.7919 6.89195 13.9 5.52505 13.9C4.15814 13.9 3.05005 12.7919 3.05005 11.425C3.05005 10.6183 3.43593 9.90184 4.03317 9.44999C3.43593 8.99814 3.05005 8.28163 3.05005 7.475C3.05005 6.66836 3.43594 5.95184 4.03319 5.5C3.43594 5.04815 3.05005 4.33163 3.05005 3.52499C3.05005 2.15808 4.15814 1.04999 5.52505 1.04999H7.00005ZM8.00005 2.04999V4.99999H9.47505C10.2897 4.99999 10.95 4.33961 10.95 3.52499C10.95 2.71037 10.2897 2.04999 9.47505 2.04999H8.00005ZM5.52505 8.94998H7.00005L7.00005 7.4788L7.00005 7.475L7.00005 7.4712V6H5.52505C4.71043 6 4.05005 6.66038 4.05005 7.475C4.05005 8.28767 4.70727 8.94684 5.5192 8.94999L5.52505 8.94998ZM4.05005 11.425C4.05005 10.6123 4.70727 9.95315 5.5192 9.94999L5.52505 9.95H7.00005L7.00005 11.425C7.00005 12.2396 6.33967 12.9 5.52505 12.9C4.71043 12.9 4.05005 12.2396 4.05005 11.425ZM8.00005 7.47206C8.00164 6.65879 8.66141 6 9.47505 6C10.2897 6 10.95 6.66038 10.95 7.475C10.95 8.28962 10.2897 8.95 9.47505 8.95C8.66141 8.95 8.00164 8.29121 8.00005 7.47794V7.47206Z"
70+
/>
71+
</svg>
72+
<span class="font-semibold"> CI Pipeline for Figma to Theme Code </span>
73+
</div>
74+
<span class="text-muted-color leading-6">Automate theme code generation from Figma by setting up a CI pipeline integrated with the Theme Designer API.</span>
75+
<div class="flex justify-end">
76+
<Button asChild v-slot="slotProps">
77+
<RouterLink to="/designer/ci" :class="slotProps.class">Create</RouterLink>
78+
</Button>
79+
</div>
80+
</div>
5981
</div>
6082
</section>
6183
</template>

‎apps/showcase/doc/designer/createtheme/FigmaDoc.vue‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,22 @@
33
<p>
44
The <NuxtLink to="uikit">Figma UI Kit</NuxtLink> and the theming api is fully synchorized, meaning the design tokens in Figma map to the CSS variables in the code. The mapping is created via the
55
<a href="https://tokens.studio/" target="_blank" rel="noopener noreferrer">Token Studio</a> at Figma which allows exporting a single json file. The Designer is able to interpret this file and transform it to an actual theme. In case your
6-
UI Kit version is older, the transformation process marks the missing tokens and recommends an auto migration via the migration assistant. This is an automated workflow and eliminates the manual design to code during the handoff process.
7-
If you have UI designers in your team, the recommended approach is using Figma for the actual design process and utilizing the designer for transformation, preview and download purposes.
6+
UI Kit version is older, the transformation process marks the missing tokens and recommends an auto migration via the migration assistant.
7+
</p>
8+
<p>
9+
This is an automated workflow and eliminates the manual design to code during the handoff process. If you have UI designers in your team, the recommended approach is using Figma for the actual design process and utilizing the designer for
10+
transformation, preview and download purposes.
11+
</p>
12+
<b class="mb-4 block">CI Pipeline</b>
13+
<p>
14+
Recommended approach is setting up the CI Pipeline flow as manually exporting the tokens file from Figma and uploading it to the online designer tool may quickly become tedious in active development cycles. As a solution, theme designer
15+
provides a remote API that can be integrated into your flow. Visit the <NuxtLink to="/designer/ci">CI Pipeline</NuxtLink> documentation for comprehensive information and examples for GitHub, GitLab and BitBucket.
16+
</p>
17+
<b class="mb-4 block">Manual Flow</b>
18+
<p>
19+
Instead of setting a CI pipeline, for quick prototyping purposes, you may also choose to use to manually export a tokens json file and then upload it to the designer. Note that, this flow would get tedious and repetitive in active
20+
development cycles when compared to an automated CI pipeline.
821
</p>
9-
<b class="mb-4 block">Export JSON file</b>
1022
<p>
1123
Open the <NuxtLink to="/uikit">PrimeOne UI Kit</NuxtLink> in which you've modified tokens. In the Tokens Studio plugin, navigate to the <i>Tools</i> menu and select <i>Export to file/folder.</i> When the Export tokens modal appears, make
1224
sure the <i>Single file</i> tab is selected. Check the <i>All tokens sets</i> option, then click <i>Export</i>.
@@ -15,15 +27,15 @@
1527
<div class="pl-8 pr-4 pt-4 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface mb-4" style="max-width: 48rem">
1628
<img alt="Designer Dashboard" src="https://primefaces.org/cdn/designer/tokens-studio.png" class="w-full" />
1729
</div>
18-
<b class="mb-4 block">Import to Designer</b>
19-
<p>Choose the <i>Import Figma Tokens</i> option when creating a new theme at Theme Designer and import the json file.</p>
30+
<p>When creating a new theme at Theme Designer, choose the <i>Import Figma Tokens</i> option and import the json file.</p>
2031
<div class="pl-8 pr-4 pt-4 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface mb-4" style="max-width: 48rem">
2132
<img alt="Designer Dashboard" src="https://primefaces.org/cdn/designer/guide-create.png" class="w-full" />
2233
</div>
23-
<b class="mb-4 block">Video Tutorial</b>
34+
35+
<!-- class="mb-4 block">Video Tutorial</b>
2436
<p>A tutorial is available demonstrating how the handoff process can be automated between the design team and the development team.</p>
2537
<div class="video-container">
2638
<iframe width="560" height="315" src="https://www.youtube.com/embed/Ktocmi2dLLM?si=lG7JwkUfLTQFlfeX" frameborder="0" allowfullscreen></iframe>
27-
</div>
39+
</div>-->
2840
</DocSectionText>
2941
</template>

‎apps/showcase/doc/uikit/workflow/CIPipelineDoc.vue‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<DocSectionText v-bind="$attrs">
3+
<p>
4+
Theme Designer offers an API that can be utilized to implement continuos integration pipelines to automate figma to theme code generation whenever you push updates to the repository from Figma. Visit the
5+
<NuxtLink to="/designer/ci">CI Pipeline</NuxtLink> documentation for comprehensive information.
6+
</p>
7+
</DocSectionText>
8+
</template>

‎apps/showcase/pages/designer/index.vue‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,14 @@
6767
<i class="pi pi-check-circle text-green-600 mr-2"></i>
6868
<span class="font-bold">Eliminate Handoff</span>
6969
</li>
70+
<li class="flex items-center w-6/12 p-4">
71+
<i class="pi pi-check-circle text-green-600 mr-2"></i>
72+
<span class="font-bold">CI Pipeline</span>
73+
</li>
74+
<li class="flex items-center w-6/12 p-4">
75+
<i class="pi pi-check-circle text-green-600 mr-2"></i>
76+
<span class="font-bold">Live Preview</span>
77+
</li>
7078
<li class="flex items-center w-6/12 p-4">
7179
<i class="pi pi-check-circle text-green-600 mr-2"></i>
7280
<span class="font-bold">Maintain Perfect Fidelity</span>

‎apps/showcase/pages/uikit/guide.vue‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import ImportingDoc from '@/doc/uikit/installation/ImportingDoc.vue';
3636
import PublishingDoc from '@/doc/uikit/installation/PublishingDoc.vue';
3737
import DesignChangesDoc from '@/doc/uikit/workflow/DesignChangesDoc.vue';
3838
import TokensStudioSetupDoc from '@/doc/uikit/workflow/TokensStudioSetupDoc.vue';
39+
import CIPipelineDoc from '@/doc/uikit/workflow/CIPipelineDoc.vue';
3940
4041
export default {
4142
data() {
@@ -83,6 +84,11 @@ export default {
8384
label: 'Tokens Studio Setup',
8485
component: TokensStudioSetupDoc
8586
},
87+
{
88+
id: 'ci-pipeline',
89+
label: 'CI Pipeline',
90+
component: CIPipelineDoc
91+
},
8692
{
8793
id: 'designchanges',
8894
label: 'Design Changes',

‎apps/showcase/pages/uikit/index.vue‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@
133133
</div>
134134
<div v-animateonscroll.once="{ enterClass: 'animate-enter fade-in-10 slide-in-from-r-4 animate-duration-1000' }" class="w-full md:w-6/12">
135135
<div class="text-primary font-bold mb-2">AUTOMATED</div>
136-
<div class="text-5xl font-bold mb-4">Figma to Theme</div>
136+
<div class="text-5xl font-bold mb-4">Figma to Theme Code</div>
137137
<p class="mb-4 text-lg">
138138
<i>This feature requires a <NuxtLink to="/designer" class="doc-link">Theme Designer</NuxtLink> subscription.</i>
139139
</p>
@@ -151,6 +151,14 @@
151151
<i class="pi pi-check-circle text-green-600 mr-2"></i>
152152
<span class="font-bold">Eliminate Handoff</span>
153153
</li>
154+
<li class="flex items-center w-6/12 p-4">
155+
<i class="pi pi-check-circle text-green-600 mr-2"></i>
156+
<span class="font-bold">CI Pipeline</span>
157+
</li>
158+
<li class="flex items-center w-6/12 p-4">
159+
<i class="pi pi-check-circle text-green-600 mr-2"></i>
160+
<span class="font-bold">Live Preview</span>
161+
</li>
154162
<li class="flex items-center w-6/12 p-4">
155163
<i class="pi pi-check-circle text-green-600 mr-2"></i>
156164
<span class="font-bold">Maintain Perfect Fidelity</span>

0 commit comments

Comments
 (0)