@meistrari/tela-build 1.64.0 → 1.65.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/tela/chat/chat.mdx +4 -0
- package/components/tela/logo/logo.mdx +110 -0
- package/components/tela/logo/logo.vue +108 -0
- package/components/tela/range-calendar/range-calendar.mdx +4 -0
- package/lib/__tests__/doc-generator.test.ts +330 -2
- package/lib/doc-generator.ts +396 -112
- package/nuxt.config.ts +2 -0
- package/package.json +87 -83
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
import { Meta } from '@storybook/blocks';
|
|
2
|
+
|
|
3
|
+
<Meta title="Layouts/Chat" tags={['new']} />
|
|
4
|
+
|
|
1
5
|
# TelaChat
|
|
2
6
|
|
|
3
7
|
Composable, logic-free building blocks for chat UIs. The primitives render structure and styling only. Messages, streaming, sending, and attachments state all live in the host application. Compose them into a full-page chat, a floating widget, or a docked sidepanel.
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
import { Meta } from '@storybook/blocks';
|
|
2
|
+
|
|
3
|
+
<Meta title="Brand/Logo" tags={['new']} />
|
|
4
|
+
|
|
5
|
+
# TelaLogo
|
|
6
|
+
|
|
7
|
+
The Tela logo, logomark and product lockups. Pick one with `name`, and `black` or `white` with `variant`. Use it instead of pasting the SVG paths into pages.
|
|
8
|
+
|
|
9
|
+
## Props
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
type LogoProps = {
|
|
13
|
+
name?: 'tela' | 'tela-logomark' | 'antifraude' | 'calculo' // default: 'tela'
|
|
14
|
+
variant?: 'black' | 'white' // default: 'black'
|
|
15
|
+
}
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Basic Usage
|
|
19
|
+
|
|
20
|
+
Renders the full Tela wordmark (`tela`), 64px wide by default (`viewBox 0 0 152 48`).
|
|
21
|
+
|
|
22
|
+
```vue
|
|
23
|
+
<TelaLogo />
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Variants
|
|
27
|
+
|
|
28
|
+
### Tela logomark
|
|
29
|
+
|
|
30
|
+
Square mark only, 24×24 by default. Use it where the wordmark doesn't fit — collapsed sidebars, favicons, avatars, compact headers.
|
|
31
|
+
|
|
32
|
+
```vue
|
|
33
|
+
<TelaLogo name="tela-logomark" />
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
| variant | color |
|
|
37
|
+
|---|---|
|
|
38
|
+
| `black` | `text-neutral-950` |
|
|
39
|
+
| `white` | `text-white` |
|
|
40
|
+
|
|
41
|
+
### Antifraude
|
|
42
|
+
|
|
43
|
+
Tela Antifraude product lockup, 104×16. Two-tone: the mark and the wordmark are colored independently.
|
|
44
|
+
|
|
45
|
+
```vue
|
|
46
|
+
<TelaLogo name="antifraude" />
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
| variant | mark | wordmark |
|
|
50
|
+
|---|---|---|
|
|
51
|
+
| `black` | `text-neutral-500` | `text-neutral-700` |
|
|
52
|
+
| `white` | `text-neutral-400` | `text-neutral-200` |
|
|
53
|
+
|
|
54
|
+
### Cálculo
|
|
55
|
+
|
|
56
|
+
Tela Cálculo product lockup, 78×16. Same two-tone treatment as Antifraude.
|
|
57
|
+
|
|
58
|
+
```vue
|
|
59
|
+
<TelaLogo name="calculo" />
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
| variant | mark | wordmark |
|
|
63
|
+
|---|---|---|
|
|
64
|
+
| `black` | `text-neutral-500` | `text-neutral-700` |
|
|
65
|
+
| `white` | `text-neutral-400` | `text-neutral-200` |
|
|
66
|
+
|
|
67
|
+
## Examples
|
|
68
|
+
|
|
69
|
+
### Switching variants
|
|
70
|
+
|
|
71
|
+
```vue
|
|
72
|
+
<script setup>
|
|
73
|
+
import { ref } from 'vue'
|
|
74
|
+
|
|
75
|
+
const white = ref(false)
|
|
76
|
+
</script>
|
|
77
|
+
|
|
78
|
+
<template>
|
|
79
|
+
<div class="flex flex-col gap-16px">
|
|
80
|
+
<div class="flex items-center gap-8px">
|
|
81
|
+
<TelaSwitch id="logo-variant" v-model="white" size="sm" />
|
|
82
|
+
<TelaLabel for="logo-variant">White variant</TelaLabel>
|
|
83
|
+
</div>
|
|
84
|
+
<div
|
|
85
|
+
class="flex items-center gap-24px p-24px rounded-8px transition-colors duration-150"
|
|
86
|
+
:class="white ? 'bg-neutral-950' : 'bg-neutral-50'"
|
|
87
|
+
>
|
|
88
|
+
<TelaLogo :variant="white ? 'white' : 'black'" />
|
|
89
|
+
<TelaLogo name="tela-logomark" :variant="white ? 'white' : 'black'" />
|
|
90
|
+
<TelaLogo name="antifraude" :variant="white ? 'white' : 'black'" />
|
|
91
|
+
<TelaLogo name="calculo" :variant="white ? 'white' : 'black'" />
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
</template>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### Custom size
|
|
98
|
+
|
|
99
|
+
Width is a plain attribute, so a utility class overrides it:
|
|
100
|
+
|
|
101
|
+
```vue
|
|
102
|
+
<TelaLogo class="w-96px" />
|
|
103
|
+
<TelaLogo name="tela-logomark" class="w-32px h-32px" />
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
### Theme-aware header
|
|
107
|
+
|
|
108
|
+
```vue
|
|
109
|
+
<TelaLogo :variant="isLightThemePage ? 'black' : 'white'" />
|
|
110
|
+
```
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
export type LogoName = 'tela' | 'tela-logomark' | 'antifraude' | 'calculo'
|
|
3
|
+
export type LogoVariant = 'black' | 'white'
|
|
4
|
+
|
|
5
|
+
const props = withDefaults(defineProps<{
|
|
6
|
+
/** Which asset to render: the Tela wordmark, the square logomark, or a product lockup (Antifraude, Cálculo). */
|
|
7
|
+
name?: LogoName
|
|
8
|
+
/** Color treatment. `black` for light surfaces, `white` for dark surfaces. */
|
|
9
|
+
variant?: LogoVariant
|
|
10
|
+
}>(), {
|
|
11
|
+
name: 'tela',
|
|
12
|
+
variant: 'black',
|
|
13
|
+
})
|
|
14
|
+
|
|
15
|
+
const variantClasses = computed(() => (({
|
|
16
|
+
black: 'text-neutral-950',
|
|
17
|
+
white: 'text-white',
|
|
18
|
+
}) as Record<LogoVariant, string>)[props.variant])
|
|
19
|
+
|
|
20
|
+
const productLogomarkClasses = computed(() => (({
|
|
21
|
+
black: 'text-neutral-500',
|
|
22
|
+
white: 'text-neutral-400',
|
|
23
|
+
}) as Record<LogoVariant, string>)[props.variant])
|
|
24
|
+
|
|
25
|
+
const productWordmarkClasses = computed(() => (({
|
|
26
|
+
black: 'text-neutral-700',
|
|
27
|
+
white: 'text-neutral-200',
|
|
28
|
+
}) as Record<LogoVariant, string>)[props.variant])
|
|
29
|
+
</script>
|
|
30
|
+
|
|
31
|
+
<template>
|
|
32
|
+
<svg
|
|
33
|
+
v-if="name === 'tela-logomark'"
|
|
34
|
+
width="24"
|
|
35
|
+
height="24"
|
|
36
|
+
viewBox="0 0 24 24"
|
|
37
|
+
fill="none"
|
|
38
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
39
|
+
:class="cn('shrink-0', variantClasses)"
|
|
40
|
+
aria-label="Tela"
|
|
41
|
+
role="img"
|
|
42
|
+
>
|
|
43
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 0H0V24H24V0ZM20.5024 3.49878H3.50244V20.4988H20.5024V3.49878Z" fill="currentColor" />
|
|
44
|
+
</svg>
|
|
45
|
+
<svg
|
|
46
|
+
v-else-if="name === 'antifraude'"
|
|
47
|
+
width="104"
|
|
48
|
+
height="16"
|
|
49
|
+
viewBox="0 0 104 16"
|
|
50
|
+
fill="none"
|
|
51
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
52
|
+
class="shrink-0"
|
|
53
|
+
aria-label="Tela Antifraude"
|
|
54
|
+
role="img"
|
|
55
|
+
>
|
|
56
|
+
<path :class="productLogomarkClasses" d="M15.959 15.9797H0V0.020752H15.959V15.9797ZM2.3291 2.34692V13.6516H13.6328V2.34692H2.3291Z" fill="currentColor" />
|
|
57
|
+
<g :class="productWordmarkClasses" fill="currentColor">
|
|
58
|
+
<path d="M23.7773 15.0304C23.1236 15.0304 22.5347 14.9114 22.0108 14.6735C21.4869 14.4356 21.0727 14.0854 20.7683 13.623C20.4638 13.1561 20.3115 12.5837 20.3115 11.9058C20.3115 11.3222 20.4212 10.8396 20.6406 10.458C20.8601 10.0764 21.1578 9.77338 21.534 9.54892C21.9101 9.32445 22.331 9.1561 22.7967 9.04386C23.2669 8.92714 23.7482 8.8396 24.2408 8.78124C24.8542 8.7139 25.349 8.65554 25.7252 8.60615C26.1058 8.55677 26.3834 8.47821 26.558 8.37046C26.7327 8.25823 26.82 8.08539 26.82 7.85195V7.80481C26.82 7.26609 26.6633 6.84858 26.3498 6.55228C26.0409 6.25599 25.5864 6.10784 24.9863 6.10784C24.3595 6.10784 23.8624 6.24701 23.4952 6.52535C23.1325 6.7992 22.8863 7.11569 22.7564 7.47484L20.6406 7.10447C20.8377 6.47596 21.1444 5.95744 21.5608 5.54892C21.9817 5.14039 22.4833 4.83735 23.0654 4.63982C23.652 4.4378 24.2856 4.33679 24.9662 4.33679C25.4274 4.33679 25.8976 4.39067 26.3767 4.49841C26.8603 4.60615 27.3058 4.79246 27.7133 5.05733C28.1208 5.3222 28.4499 5.68808 28.7007 6.15498C28.9559 6.61738 29.0835 7.20324 29.0835 7.91255V14.8149H26.8939V13.394H26.8133C26.6745 13.6724 26.473 13.9372 26.2088 14.1886C25.9446 14.4356 25.611 14.6376 25.208 14.7947C24.805 14.9518 24.3281 15.0304 23.7773 15.0304ZM24.3281 13.3132C24.8431 13.3132 25.2864 13.21 25.658 13.0035C26.0341 12.797 26.323 12.5276 26.5245 12.1954C26.726 11.8587 26.8267 11.4928 26.8267 11.0977V9.83174C26.7506 9.89908 26.6163 9.96193 26.4237 10.0203C26.2356 10.0742 26.023 10.1236 25.7856 10.1684C25.5483 10.2088 25.3132 10.2448 25.0804 10.2762C24.8475 10.3076 24.6505 10.3345 24.4893 10.357C24.1176 10.4064 23.7818 10.4894 23.4818 10.6062C23.1818 10.7184 22.9445 10.8778 22.7698 11.0843C22.5952 11.2908 22.5079 11.5601 22.5079 11.8923C22.5079 12.3592 22.678 12.7139 23.0184 12.9563C23.3631 13.1943 23.7997 13.3132 24.3281 13.3132Z" />
|
|
59
|
+
<path d="M32.9369 8.72063V14.8149H30.6734V4.47147H32.8361V6.20211H32.9638C33.2011 5.63197 33.5772 5.17854 34.0922 4.84184C34.6071 4.50514 35.2519 4.33679 36.0266 4.33679C36.7341 4.33679 37.352 4.48719 37.8804 4.78797C38.4088 5.08876 38.8185 5.52871 39.1095 6.10784C39.4051 6.68696 39.5528 7.39628 39.5528 8.23578V14.8149H37.2893V8.55902C37.2893 7.84072 37.1035 7.2818 36.7318 6.88225C36.3646 6.47821 35.8564 6.27619 35.2071 6.27619C34.7638 6.27619 34.372 6.37271 34.0317 6.56575C33.6914 6.7543 33.4227 7.03264 33.2257 7.40077C33.0332 7.7644 32.9369 8.20436 32.9369 8.72063Z" />
|
|
60
|
+
<path d="M46.1785 4.47147V6.24925H40.3686V4.47147H46.1785ZM41.8462 1.99336H44.1165V11.7375C44.1165 12.0876 44.168 12.3548 44.271 12.5388C44.3784 12.7184 44.5195 12.8418 44.6941 12.9092C44.8688 12.972 45.0613 13.0035 45.2718 13.0035C45.424 13.0035 45.5606 12.9922 45.6815 12.9698C45.8069 12.9473 45.9054 12.9294 45.977 12.9159L46.3666 14.7206C46.2412 14.7655 46.0643 14.8127 45.836 14.862C45.6076 14.9159 45.3255 14.9473 44.9897 14.9563C44.412 14.9698 43.8836 14.8755 43.4045 14.6735C42.9299 14.4715 42.5515 14.1595 42.2694 13.7375C41.9873 13.3155 41.8462 12.7835 41.8462 12.1415V1.99336Z" />
|
|
61
|
+
<path d="M47.3452 14.8149V4.47147H49.6087V14.8149H47.3452ZM48.487 2.95632C48.1154 2.95632 47.7952 2.83062 47.5266 2.57922C47.2624 2.32781 47.1303 2.02703 47.1303 1.67686C47.1303 1.32669 47.2624 1.02815 47.5266 0.781239C47.7952 0.529836 48.1154 0.404134 48.487 0.404134C48.8587 0.404134 49.1766 0.529836 49.4408 0.781239C49.705 1.02815 49.8371 1.32669 49.8371 1.67686C49.8371 2.02703 49.705 2.32781 49.4408 2.57922C49.1766 2.83062 48.8587 2.95632 48.487 2.95632Z" />
|
|
62
|
+
<path d="M56.3368 4.47147V6.24925H50.3455V4.47147H56.3368ZM51.9038 14.8149V3.4075C51.9038 2.72961 52.0449 2.16844 52.327 1.724C52.6136 1.27507 52.9964 0.938365 53.4755 0.713898C53.9547 0.489431 54.483 0.377197 55.0607 0.377197C55.4771 0.377197 55.8398 0.410868 56.1488 0.478208C56.4577 0.541059 56.6883 0.59942 56.8406 0.653292L56.357 2.44454C56.2585 2.41311 56.1331 2.37944 55.9809 2.34353C55.8286 2.30761 55.654 2.28966 55.457 2.28966C54.9868 2.28966 54.6532 2.40413 54.4562 2.63309C54.2636 2.85756 54.1673 3.18303 54.1673 3.60952V14.8149H51.9038Z" />
|
|
63
|
+
<path d="M57.3675 14.8149V4.47147H59.5572V6.16171H59.6646C59.8527 5.58259 60.1796 5.13141 60.6453 4.80817C61.111 4.48045 61.6438 4.31659 62.2438 4.31659C62.3737 4.31659 62.5237 4.32333 62.6939 4.33679C62.864 4.34577 63.0028 4.36148 63.1103 4.38393V6.49841C63.0118 6.46698 62.8551 6.4378 62.6401 6.41087C62.4252 6.37944 62.217 6.36373 62.0155 6.36373C61.5543 6.36373 61.1445 6.46025 60.7863 6.65329C60.4281 6.84633 60.146 7.11569 59.94 7.46137C59.734 7.80256 59.631 8.19538 59.631 8.63982V14.8149H57.3675Z" />
|
|
64
|
+
<path d="M66.6631 15.0304C66.0093 15.0304 65.4205 14.9114 64.8966 14.6735C64.3727 14.4356 63.9585 14.0854 63.654 13.623C63.3495 13.1561 63.1973 12.5837 63.1973 11.9058C63.1973 11.3222 63.307 10.8396 63.5264 10.458C63.7458 10.0764 64.0436 9.77338 64.4197 9.54892C64.7958 9.32445 65.2168 9.1561 65.6824 9.04386C66.1526 8.92714 66.634 8.8396 67.1265 8.78124C67.74 8.7139 68.2348 8.65554 68.6109 8.60615C68.9915 8.55677 69.2692 8.47821 69.4438 8.37046C69.6184 8.25823 69.7057 8.08539 69.7057 7.85195V7.80481C69.7057 7.26609 69.549 6.84858 69.2356 6.55228C68.9266 6.25599 68.4721 6.10784 67.8721 6.10784C67.2452 6.10784 66.7482 6.24701 66.381 6.52535C66.0183 6.7992 65.772 7.11569 65.6421 7.47484L63.5264 7.10447C63.7234 6.47596 64.0301 5.95744 64.4466 5.54892C64.8675 5.14039 65.369 4.83735 65.9511 4.63982C66.5377 4.4378 67.1713 4.33679 67.8519 4.33679C68.3131 4.33679 68.7833 4.39067 69.2624 4.49841C69.746 4.60615 70.1916 4.79246 70.5991 5.05733C71.0065 5.3222 71.3357 5.68808 71.5864 6.15498C71.8417 6.61738 71.9693 7.20324 71.9693 7.91255V14.8149H69.7796V13.394H69.699C69.5602 13.6724 69.3587 13.9372 69.0945 14.1886C68.8303 14.4356 68.4967 14.6376 68.0937 14.7947C67.6907 14.9518 67.2139 15.0304 66.6631 15.0304ZM67.2139 13.3132C67.7288 13.3132 68.1721 13.21 68.5438 13.0035C68.9199 12.797 69.2087 12.5276 69.4102 12.1954C69.6117 11.8587 69.7125 11.4928 69.7125 11.0977V9.83174C69.6363 9.89908 69.502 9.96193 69.3095 10.0203C69.1214 10.0742 68.9087 10.1236 68.6714 10.1684C68.434 10.2088 68.199 10.2448 67.9661 10.2762C67.7333 10.3076 67.5363 10.3345 67.3751 10.357C67.0034 10.4064 66.6676 10.4894 66.3675 10.6062C66.0675 10.7184 65.8302 10.8778 65.6556 11.0843C65.4809 11.2908 65.3936 11.5601 65.3936 11.8923C65.3936 12.3592 65.5638 12.7139 65.9041 12.9563C66.2489 13.1943 66.6855 13.3132 67.2139 13.3132Z" />
|
|
65
|
+
<path d="M80.1213 10.4917V4.47147H82.3848V14.8149H80.1818V12.9967H80.0743C79.837 13.5624 79.4541 14.0293 78.9257 14.3974C78.4018 14.7655 77.7503 14.9496 76.9712 14.9496C76.304 14.9496 75.7129 14.7992 75.198 14.4984C74.6875 14.1976 74.2868 13.7577 73.9957 13.1785C73.7046 12.5994 73.5591 11.8901 73.5591 11.0506V4.47147H75.8226V10.7274C75.8226 11.4053 76.0062 11.944 76.3734 12.3435C76.7451 12.7431 77.2309 12.9429 77.8309 12.9429C78.1981 12.9429 78.5563 12.8531 78.9056 12.6735C79.2549 12.4939 79.5437 12.2223 79.7721 11.8587C80.0049 11.495 80.1213 11.0394 80.1213 10.4917Z" />
|
|
66
|
+
<path d="M87.8519 15.0035C87.0325 15.0035 86.3003 14.7947 85.6555 14.3772C85.0107 13.9552 84.5025 13.3469 84.1308 12.5523C83.7592 11.7532 83.5734 10.7902 83.5734 9.66339C83.5734 8.5231 83.7614 7.55789 84.1376 6.76777C84.5182 5.97316 85.0309 5.36934 85.6757 4.95632C86.325 4.5433 87.0526 4.33679 87.8586 4.33679C88.481 4.33679 88.987 4.44229 89.3766 4.65329C89.7662 4.8598 90.0729 5.10672 90.2968 5.39403C90.5207 5.67686 90.6953 5.935 90.8207 6.16844H90.9281V1.02366H93.1917V14.8149H90.9684V13.192H90.8207C90.6953 13.4299 90.5162 13.6903 90.2833 13.9732C90.0505 14.256 89.737 14.4984 89.343 14.7004C88.9534 14.9025 88.4564 15.0035 87.8519 15.0035ZM88.4362 13.1179C88.9781 13.1179 89.437 12.9743 89.8132 12.687C90.1893 12.3952 90.4759 11.9889 90.6729 11.4681C90.8699 10.9429 90.9684 10.3345 90.9684 9.64319C90.9684 8.95632 90.8699 8.357 90.6729 7.84521C90.4804 7.32894 90.196 6.92939 89.8199 6.64656C89.4437 6.36373 88.9825 6.22232 88.4362 6.22232C87.872 6.22232 87.3996 6.37046 87.019 6.66676C86.6384 6.96306 86.3518 7.36934 86.1593 7.88562C85.9712 8.3974 85.8772 8.98326 85.8772 9.64319C85.8772 10.3076 85.9735 10.9025 86.166 11.4277C86.363 11.953 86.6496 12.366 87.0257 12.6668C87.4064 12.9675 87.8765 13.1179 88.4362 13.1179Z" />
|
|
67
|
+
<path d="M99.4798 15.0237C98.4499 15.0237 97.5633 14.8059 96.82 14.3705C96.0812 13.9305 95.5103 13.3132 95.1073 12.5186C94.7087 11.7195 94.5095 10.7812 94.5095 9.7038C94.5095 8.64431 94.7087 7.71053 95.1073 6.90245C95.5103 6.09437 96.0722 5.46586 96.7932 5.01693C97.5186 4.56351 98.3693 4.33679 99.3455 4.33679C99.959 4.33679 100.546 4.4378 101.105 4.63982C101.665 4.83735 102.162 5.14712 102.596 5.56912C103.031 5.98663 103.373 6.52535 103.624 7.18528C103.875 7.84521 104 8.63309 104 9.54892V10.2829H95.6446V8.6937H101.811C101.811 8.20436 101.708 7.76889 101.502 7.3873C101.3 7.00122 101.016 6.69819 100.649 6.47821C100.286 6.25374 99.8604 6.14151 99.3724 6.14151C98.844 6.14151 98.3828 6.26945 97.9887 6.52535C97.5992 6.77675 97.2969 7.10896 97.082 7.52198C96.867 7.93051 96.7573 8.3772 96.7529 8.86205V10.1886C96.7529 10.8261 96.867 11.3716 97.0954 11.825C97.3238 12.2739 97.6439 12.6174 98.0559 12.8553C98.4678 13.0932 98.9514 13.2122 99.5067 13.2122C99.8694 13.2122 100.201 13.1606 100.501 13.0573C100.801 12.9541 101.058 12.7992 101.273 12.5927C101.488 12.3862 101.654 12.1303 101.77 11.825L103.893 12.1146C103.745 12.6982 103.472 13.2077 103.073 13.6432C102.675 14.0787 102.171 14.4176 101.562 14.66C100.953 14.9025 100.259 15.0237 99.4798 15.0237Z" />
|
|
68
|
+
</g>
|
|
69
|
+
</svg>
|
|
70
|
+
<svg
|
|
71
|
+
v-else-if="name === 'calculo'"
|
|
72
|
+
width="78"
|
|
73
|
+
height="16"
|
|
74
|
+
viewBox="0 0 78 16"
|
|
75
|
+
fill="none"
|
|
76
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
77
|
+
class="shrink-0"
|
|
78
|
+
aria-label="Tela Cálculo"
|
|
79
|
+
role="img"
|
|
80
|
+
>
|
|
81
|
+
<path :class="productLogomarkClasses" d="M15.9443 15.9725H0V0.0281982H15.9443V15.9725ZM2.32715 2.35242V13.6464H13.6211V2.35242H2.32715Z" fill="currentColor" />
|
|
82
|
+
<g :class="productWordmarkClasses" fill="currentColor">
|
|
83
|
+
<path d="M25.2115 15.0235C24.1959 15.0235 23.3236 14.7968 22.5943 14.3434C21.8651 13.8855 21.3037 13.257 20.91 12.4579C20.5208 11.6543 20.3262 10.7317 20.3262 9.6902C20.3262 8.6352 20.5253 7.70591 20.9234 6.90232C21.3216 6.09873 21.8853 5.47022 22.6145 5.01679C23.3437 4.56337 24.2026 4.33666 25.1913 4.33666C26.01 4.33666 26.7348 4.48705 27.3656 4.78784C27.9964 5.08862 28.5019 5.51062 28.8822 6.05383C29.2669 6.59704 29.4906 7.23228 29.5532 7.95956H27.379C27.2806 7.46124 27.0479 7.04373 26.6811 6.70703C26.3187 6.36584 25.8333 6.19525 25.2249 6.19525C24.7015 6.19525 24.2429 6.33442 23.8492 6.61275C23.46 6.89109 23.1558 7.2884 22.9366 7.80467C22.7218 8.31646 22.6145 8.92925 22.6145 9.64306C22.6145 10.3658 22.7218 10.9899 22.9366 11.5151C23.1513 12.0359 23.4533 12.4377 23.8425 12.7205C24.2362 13.0033 24.697 13.1447 25.2249 13.1447C25.5917 13.1447 25.9228 13.0752 26.2181 12.936C26.5178 12.7968 26.7661 12.597 26.9629 12.3367C27.1642 12.0718 27.3029 11.7553 27.379 11.3872H29.5532C29.4906 12.092 29.2736 12.7183 28.9023 13.266C28.5354 13.8137 28.0389 14.2446 27.4125 14.5589C26.7862 14.8686 26.0525 15.0235 25.2115 15.0235Z" />
|
|
84
|
+
<path d="M33.6614 15.0303C33.0083 15.0303 32.42 14.9113 31.8965 14.6734C31.3731 14.4354 30.9593 14.0853 30.6551 13.6229C30.3509 13.156 30.1988 12.5836 30.1988 11.9057C30.1988 11.3221 30.3084 10.8395 30.5276 10.4579C30.7468 10.0763 31.0443 9.77325 31.4201 9.54878C31.7959 9.32431 32.2164 9.15596 32.6817 9.04373C33.1514 8.92701 33.6323 8.83947 34.1245 8.78111C34.7374 8.71377 35.2317 8.6554 35.6075 8.60602C35.9878 8.55664 36.2651 8.47807 36.4396 8.37033C36.6141 8.2581 36.7013 8.08526 36.7013 7.85181V7.80467C36.7013 7.26595 36.5447 6.84845 36.2316 6.55215C35.9229 6.25585 35.4688 6.1077 34.8693 6.1077C34.243 6.1077 33.7464 6.24687 33.3796 6.52521C33.0172 6.79906 32.7712 7.11556 32.6414 7.47471L30.5276 7.10434C30.7244 6.47583 31.0309 5.95731 31.4469 5.54878C31.8675 5.14025 32.3685 4.83722 32.9501 4.63969C33.5362 4.43767 34.1692 4.33666 34.8492 4.33666C35.31 4.33666 35.7797 4.39053 36.2584 4.49828C36.7416 4.60602 37.1867 4.79233 37.5938 5.0572C38.0009 5.32207 38.3297 5.68795 38.5803 6.15484C38.8353 6.61724 38.9628 7.2031 38.9628 7.91242V14.8148H36.7751V13.3939H36.6946C36.5559 13.6722 36.3546 13.9371 36.0907 14.1885C35.8267 14.4354 35.4934 14.6374 35.0908 14.7946C34.6881 14.9517 34.2117 15.0303 33.6614 15.0303ZM34.2117 13.3131C34.7262 13.3131 35.1691 13.2098 35.5404 13.0033C35.9162 12.7968 36.2047 12.5275 36.406 12.1952C36.6074 11.8585 36.708 11.4927 36.708 11.0976V9.83161C36.632 9.89895 36.4978 9.9618 36.3054 10.0202C36.1175 10.074 35.905 10.1234 35.6679 10.1683C35.4308 10.2087 35.1959 10.2446 34.9633 10.2761C34.7306 10.3075 34.5338 10.3344 34.3727 10.3569C34.0014 10.4062 33.6659 10.4893 33.3662 10.606C33.0664 10.7183 32.8293 10.8776 32.6548 11.0841C32.4804 11.2906 32.3931 11.56 32.3931 11.8922C32.3931 12.3591 32.5631 12.7138 32.9031 12.9562C33.2476 13.1941 33.6838 13.3131 34.2117 13.3131ZM34.0708 3.10434L35.5941 0.0134277H37.869L35.8021 3.10434H34.0708Z" />
|
|
85
|
+
<path d="M42.8126 1.02353V14.8148H40.5512V1.02353H42.8126Z" />
|
|
86
|
+
<path d="M48.877 15.0235C47.8614 15.0235 46.9891 14.7968 46.2599 14.3434C45.5306 13.8855 44.9692 13.257 44.5755 12.4579C44.1863 11.6543 43.9917 10.7317 43.9917 9.6902C43.9917 8.6352 44.1908 7.70591 44.5889 6.90232C44.9871 6.09873 45.5508 5.47022 46.28 5.01679C47.0092 4.56337 47.8682 4.33666 48.8568 4.33666C49.6755 4.33666 50.4003 4.48705 51.0311 4.78784C51.6619 5.08862 52.1674 5.51062 52.5477 6.05383C52.9324 6.59704 53.1561 7.23228 53.2187 7.95956H51.0445C50.9461 7.46124 50.7134 7.04373 50.3466 6.70703C49.9842 6.36584 49.4988 6.19525 48.8904 6.19525C48.367 6.19525 47.9084 6.33442 47.5147 6.61275C47.1255 6.89109 46.8213 7.2884 46.6021 7.80467C46.3874 8.31646 46.28 8.92925 46.28 9.64306C46.28 10.3658 46.3874 10.9899 46.6021 11.5151C46.8168 12.0359 47.1188 12.4377 47.508 12.7205C47.9017 13.0033 48.3625 13.1447 48.8904 13.1447C49.2572 13.1447 49.5883 13.0752 49.8836 12.936C50.1833 12.7968 50.4316 12.597 50.6284 12.3367C50.8298 12.0718 50.9684 11.7553 51.0445 11.3872H53.2187C53.1561 12.092 52.9391 12.7183 52.5678 13.266C52.2009 13.8137 51.7044 14.2446 51.078 14.5589C50.4517 14.8686 49.718 15.0235 48.877 15.0235Z" />
|
|
87
|
+
<path d="M60.9037 10.4915V4.47134H63.1651V14.8148H60.9641V12.9966H60.8567C60.6196 13.5623 60.2371 14.0291 59.7092 14.3973C59.1858 14.7654 58.5348 14.9495 57.7564 14.9495C57.0898 14.9495 56.4993 14.7991 55.9848 14.4983C55.4748 14.1975 55.0744 13.7575 54.7836 13.1784C54.4928 12.5993 54.3474 11.89 54.3474 11.0505V4.47134H56.6089V10.7272C56.6089 11.4051 56.7923 11.9438 57.1592 12.3434C57.5305 12.7429 58.0159 12.9427 58.6154 12.9427C58.9822 12.9427 59.3401 12.8529 59.6891 12.6734C60.038 12.4938 60.3266 12.2222 60.5547 11.8585C60.7873 11.4949 60.9037 11.0392 60.9037 10.4915Z" />
|
|
88
|
+
<path d="M67.0502 1.02353V14.8148H64.7888V1.02353H67.0502Z" />
|
|
89
|
+
<path d="M73.1146 15.0235C72.1214 15.0235 71.2602 14.8013 70.531 14.3569C69.8018 13.9079 69.2359 13.2839 68.8332 12.4848C68.4306 11.6857 68.2293 10.7542 68.2293 9.6902C68.2293 8.61724 68.4306 7.67897 68.8332 6.87538C69.2359 6.07179 69.8018 5.44777 70.531 5.00333C71.2602 4.55888 72.1214 4.33666 73.1146 4.33666C74.1033 4.33666 74.9622 4.55888 75.6914 5.00333C76.4251 5.44777 76.9933 6.07179 77.3959 6.87538C77.7985 7.67897 77.9999 8.61724 77.9999 9.6902C77.9999 10.7542 77.7985 11.6857 77.3959 12.4848C76.9933 13.2839 76.4251 13.9079 75.6914 14.3569C74.9622 14.8013 74.1033 15.0235 73.1146 15.0235ZM73.1213 13.1717C73.7029 13.1717 74.1838 13.0146 74.564 12.7003C74.9488 12.386 75.2351 11.9663 75.423 11.441C75.6154 10.9113 75.7116 10.3232 75.7116 9.67673C75.7116 9.03475 75.6154 8.44889 75.423 7.91915C75.2351 7.38941 74.9488 6.96517 74.564 6.64643C74.1838 6.32768 73.7029 6.16831 73.1213 6.16831C72.5352 6.16831 72.0476 6.32768 71.6584 6.64643C71.2736 6.96517 70.9873 7.38941 70.7994 7.91915C70.6115 8.44889 70.5176 9.03475 70.5176 9.67673C70.5176 10.3232 70.6115 10.9113 70.7994 11.441C70.9873 11.9663 71.2736 12.386 71.6584 12.7003C72.0476 13.0146 72.5352 13.1717 73.1213 13.1717Z" />
|
|
90
|
+
</g>
|
|
91
|
+
</svg>
|
|
92
|
+
<svg
|
|
93
|
+
v-else
|
|
94
|
+
width="64"
|
|
95
|
+
viewBox="0 0 152 48"
|
|
96
|
+
fill="none"
|
|
97
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
98
|
+
:class="cn('shrink-0', variantClasses)"
|
|
99
|
+
aria-label="Tela"
|
|
100
|
+
role="img"
|
|
101
|
+
>
|
|
102
|
+
<path d="M145.513 25.6253C145.513 21.877 142.906 19.5796 138.905 19.5796C135.207 19.5796 132.6 21.7561 132.176 25.3835L126.235 24.2952C127.205 18.31 132.418 14.3804 138.905 14.3804C146.665 14.3804 152 18.7332 152 26.3508V45.3341H145.513V40.679C143.755 43.7622 139.996 45.8178 135.934 45.8178C129.872 45.8178 125.689 42.009 125.689 36.8097C125.689 30.8245 130.357 27.6204 139.754 26.653L145.513 26.0485V25.6253ZM132.176 36.6284C132.176 39.0466 134.176 40.7394 137.268 40.7394C142.421 40.7394 145.453 37.1725 145.513 32.215V30.9455L139.693 31.6105C134.722 32.1546 132.176 33.9683 132.176 36.6284Z" fill="currentColor" />
|
|
103
|
+
<path d="M114.335 45.333V2.52979H120.943V45.333H114.335Z" fill="currentColor" />
|
|
104
|
+
<path d="M80.7344 30.0976C80.7344 21.8755 85.8086 14.3789 95.2491 14.3789C104.808 14.3789 109.882 21.5128 109.882 28.9489C109.882 29.8558 109.823 31.1254 109.764 31.6695H87.0477C87.6377 36.9292 90.9419 40.1938 95.6621 40.1938C99.5563 40.1938 102.329 38.3197 103.096 34.9946L109.174 36.5665C107.581 42.4307 102.506 45.8163 95.5441 45.8163C86.1036 45.8163 80.7344 38.3197 80.7344 30.0976ZM87.3427 26.6516H103.037C102.624 22.5405 99.9693 19.5782 95.2491 19.5782C91.1779 19.5782 88.2867 22.1173 87.3427 26.6516Z" fill="currentColor" />
|
|
105
|
+
<path d="M78.9634 45.0912C77.5084 45.5748 75.8109 45.8167 74.1135 45.8167C68.3541 45.8167 64.0498 42.6729 64.0498 35.7204V20.4854H58.7148V14.8629H64.0498V5.79443H70.6579V14.8629H78.539V20.4854H70.6579V35.3577C70.6579 38.3805 72.3553 39.9524 74.8409 39.9524C75.9928 39.9524 77.3872 39.771 78.539 39.2269L78.9634 45.0912Z" fill="currentColor" />
|
|
106
|
+
<path d="M48.1338 48H0V0H48.1338V48ZM7.02441 6.99805V40.998H41.1191V6.99805H7.02441Z" fill="currentColor" />
|
|
107
|
+
</svg>
|
|
108
|
+
</template>
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
import { Meta } from '@storybook/blocks';
|
|
2
|
+
|
|
3
|
+
<Meta title="Components/RangeCalendar" tags={['new']} />
|
|
4
|
+
|
|
1
5
|
# TelaRangeCalendar
|
|
2
6
|
|
|
3
7
|
A two-handle calendar for picking a start and end date, with an optional time row for narrowing the range down to the minute. Built on `reka-ui`'s `RangeCalendarRoot` primitives and `@internationalized/date`, so values are `DateValue` objects — not JavaScript `Date` — and stay calendar- and timezone-correct.
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs'
|
|
1
|
+
import { existsSync, mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs'
|
|
2
2
|
import { tmpdir } from 'node:os'
|
|
3
3
|
import { fileURLToPath } from 'node:url'
|
|
4
4
|
import { dirname, join, resolve } from 'pathe'
|
|
5
5
|
import matter from 'gray-matter'
|
|
6
6
|
import { afterEach, describe, expect, it } from 'vitest'
|
|
7
|
-
import { canonicalizeTypeString, compareCanonical, generateDocsToDirectory, resolveSiblingMdx } from '../doc-generator'
|
|
7
|
+
import { canonicalizeTypeString, compareCanonical, generateDocsToDirectory, generateGroupSlug, generateTagName, parseMdxFile, resolveSiblingMdx } from '../doc-generator'
|
|
8
8
|
import type { ComponentDoc } from '../doc-generator'
|
|
9
9
|
import { TypeResolver } from '../type-resolver'
|
|
10
10
|
|
|
@@ -82,6 +82,73 @@ describe('generateDocsToDirectory', () => {
|
|
|
82
82
|
|
|
83
83
|
expect(packageJson.files).toContain('docs')
|
|
84
84
|
})
|
|
85
|
+
|
|
86
|
+
it('groups nested components by their source family', () => {
|
|
87
|
+
const outDir = mkdtempSync(join(tmpdir(), 'tela-build-docs-'))
|
|
88
|
+
tempDirs.push(outDir)
|
|
89
|
+
|
|
90
|
+
const makeComponent = (tagName: string, directory: string, path: string): ComponentDoc => ({
|
|
91
|
+
name: tagName,
|
|
92
|
+
tagName,
|
|
93
|
+
path,
|
|
94
|
+
directory,
|
|
95
|
+
description: '',
|
|
96
|
+
props: [],
|
|
97
|
+
events: [],
|
|
98
|
+
slots: [],
|
|
99
|
+
})
|
|
100
|
+
const components = [
|
|
101
|
+
makeComponent('TelaComplexTable', 'tela/complex-table', 'components/tela/complex-table/complex-table.vue'),
|
|
102
|
+
makeComponent('TelaComplexTableHeader', 'tela/complex-table/header', 'components/tela/complex-table/header/header.vue'),
|
|
103
|
+
makeComponent('TelaComplexBadge', 'tela/badge', 'components/tela/badge/complex-badge.vue'),
|
|
104
|
+
]
|
|
105
|
+
|
|
106
|
+
generateDocsToDirectory(components.reverse(), new TypeResolver(outDir), outDir)
|
|
107
|
+
|
|
108
|
+
const skillMd = readFileSync(join(outDir, 'tela-build', 'SKILL.md'), 'utf-8')
|
|
109
|
+
const componentPage = readFileSync(join(outDir, 'tela-build', 'components', 'tela-complex-table.md'), 'utf-8')
|
|
110
|
+
const badgePage = readFileSync(join(outDir, 'tela-build', 'components', 'tela-badge.md'), 'utf-8')
|
|
111
|
+
|
|
112
|
+
expect(skillMd).toContain('[TelaComplexTable](components/tela-complex-table.md)')
|
|
113
|
+
expect(componentPage).toContain('## TelaComplexTable')
|
|
114
|
+
expect(componentPage).toContain('## TelaComplexTableHeader')
|
|
115
|
+
expect(badgePage).toContain('## TelaComplexBadge')
|
|
116
|
+
expect(existsSync(join(outDir, 'tela-build', 'components', 'tela-complex.md'))).toBe(false)
|
|
117
|
+
})
|
|
118
|
+
})
|
|
119
|
+
|
|
120
|
+
describe('nuxt-compatible component names', () => {
|
|
121
|
+
it.each([
|
|
122
|
+
['metrics-card', 'tela/home', 'TelaHomeMetricsCard'],
|
|
123
|
+
['hero-metrics-card', 'tela/details/hero', 'TelaDetailsHeroMetricsCard'],
|
|
124
|
+
['index', 'tela/chat', 'TelaChat'],
|
|
125
|
+
['index', 'tela/chat/command/mention', 'TelaChatCommandMention'],
|
|
126
|
+
['sheet.client', 'tela/sheet', 'TelaSheet'],
|
|
127
|
+
['sheet.server', 'tela/sheet', 'TelaSheet'],
|
|
128
|
+
['avatar.global', 'tela/avatar', 'TelaAvatar'],
|
|
129
|
+
['index.client', 'tela/chat', 'TelaChat'],
|
|
130
|
+
['Item', 'tela/item/item', 'TelaItem'],
|
|
131
|
+
['DropdownMenuSeparator', 'tela/dropdown-menu', 'TelaDropdownMenuSeparator'],
|
|
132
|
+
['button', '', 'Button'],
|
|
133
|
+
])('resolves %s in %s as %s', (fileName, directory, expected) => {
|
|
134
|
+
expect(generateTagName(fileName, directory)).toBe(expected)
|
|
135
|
+
})
|
|
136
|
+
|
|
137
|
+
it.each([
|
|
138
|
+
['tela/DropdownMenu', 'tela-dropdown-menu'],
|
|
139
|
+
['tela\\DropdownMenu', 'tela-dropdown-menu'],
|
|
140
|
+
])('normalizes source family %s as %s', (directory, expected) => {
|
|
141
|
+
expect(generateGroupSlug({
|
|
142
|
+
name: 'TelaDropdownMenu',
|
|
143
|
+
tagName: 'TelaDropdownMenu',
|
|
144
|
+
path: 'components/tela/dropdown-menu/dropdown-menu.vue',
|
|
145
|
+
directory,
|
|
146
|
+
description: '',
|
|
147
|
+
props: [],
|
|
148
|
+
events: [],
|
|
149
|
+
slots: [],
|
|
150
|
+
})).toBe(expected)
|
|
151
|
+
})
|
|
85
152
|
})
|
|
86
153
|
|
|
87
154
|
// The extractors emit members in type-resolution order, which differs between
|
|
@@ -114,6 +181,35 @@ describe('resolveSiblingMdx', () => {
|
|
|
114
181
|
expect(resolveSiblingMdx(join(dir, 'Collapsible.vue'))).toBe(join(dir, 'collapsible.mdx'))
|
|
115
182
|
})
|
|
116
183
|
|
|
184
|
+
it('resolves an index component to its family MDX', () => {
|
|
185
|
+
const root = mkdtempSync(join(tmpdir(), 'tela-build-mdx-'))
|
|
186
|
+
const dir = join(root, 'chat')
|
|
187
|
+
tempDirs.push(root)
|
|
188
|
+
mkdirSync(dir)
|
|
189
|
+
writeFileSync(join(dir, 'index.vue'), '')
|
|
190
|
+
writeFileSync(join(dir, 'chat.mdx'), '')
|
|
191
|
+
|
|
192
|
+
expect(resolveSiblingMdx(join(dir, 'index.vue'))).toBe(join(dir, 'chat.mdx'))
|
|
193
|
+
})
|
|
194
|
+
|
|
195
|
+
it('resolves PascalCase component files to kebab-case MDX', () => {
|
|
196
|
+
const dir = makeComponentDir(['DropdownMenu.vue', 'dropdown-menu.mdx'])
|
|
197
|
+
|
|
198
|
+
expect(resolveSiblingMdx(join(dir, 'DropdownMenu.vue'))).toBe(join(dir, 'dropdown-menu.mdx'))
|
|
199
|
+
})
|
|
200
|
+
|
|
201
|
+
it('resolves Nuxt mode-suffixed components to unsuffixed MDX', () => {
|
|
202
|
+
const dir = makeComponentDir(['sheet.client.vue', 'sheet.mdx'])
|
|
203
|
+
|
|
204
|
+
expect(resolveSiblingMdx(join(dir, 'sheet.client.vue'))).toBe(join(dir, 'sheet.mdx'))
|
|
205
|
+
})
|
|
206
|
+
|
|
207
|
+
it('prefers an exact component MDX over normalized candidates', () => {
|
|
208
|
+
const dir = makeComponentDir(['DropdownMenu.vue', 'DropdownMenu.mdx', 'dropdown-menu.mdx'])
|
|
209
|
+
|
|
210
|
+
expect(resolveSiblingMdx(join(dir, 'DropdownMenu.vue'))).toBe(join(dir, 'DropdownMenu.mdx'))
|
|
211
|
+
})
|
|
212
|
+
|
|
117
213
|
it('returns undefined when the component has no mdx', () => {
|
|
118
214
|
const dir = makeComponentDir(['CollapsibleTrigger.vue', 'collapsible.mdx'])
|
|
119
215
|
|
|
@@ -125,6 +221,238 @@ describe('resolveSiblingMdx', () => {
|
|
|
125
221
|
})
|
|
126
222
|
})
|
|
127
223
|
|
|
224
|
+
describe('authored MDX guidance', () => {
|
|
225
|
+
it('uses the MDX structure to preserve guidance and remove Storybook controls and authored API', async () => {
|
|
226
|
+
const mdxDir = mkdtempSync(join(tmpdir(), 'tela-build-mdx-'))
|
|
227
|
+
const outDir = mkdtempSync(join(tmpdir(), 'tela-build-docs-'))
|
|
228
|
+
tempDirs.push(mdxDir, outDir)
|
|
229
|
+
|
|
230
|
+
const mdxPath = join(mdxDir, 'sample.mdx')
|
|
231
|
+
const mdx = [
|
|
232
|
+
'import { Meta, Canvas as Preview, ArgTypes, Controls } from \'@storybook/blocks\'',
|
|
233
|
+
'import * as Blocks from \'@storybook/blocks\'',
|
|
234
|
+
'import Storybook from \'@storybook/blocks\'',
|
|
235
|
+
'import Note from \'./note.vue\'',
|
|
236
|
+
'export const Template = () => <TelaBadge />',
|
|
237
|
+
'',
|
|
238
|
+
'# TelaSample',
|
|
239
|
+
'',
|
|
240
|
+
'Content after a JSX export remains.',
|
|
241
|
+
'',
|
|
242
|
+
'<Meta title="Sample" />',
|
|
243
|
+
'',
|
|
244
|
+
'## Rules',
|
|
245
|
+
'',
|
|
246
|
+
'- Prefer the canonical component.',
|
|
247
|
+
'',
|
|
248
|
+
'<Note>Keep non-Storybook JSX.</Note>',
|
|
249
|
+
'',
|
|
250
|
+
'### Interactive preview',
|
|
251
|
+
'',
|
|
252
|
+
'<Preview',
|
|
253
|
+
' parameters={{ format: value => value > 0 ? \'/>\' : \'>\' }}',
|
|
254
|
+
'>',
|
|
255
|
+
'```vue',
|
|
256
|
+
'<TelaStorybookOnly />',
|
|
257
|
+
'```',
|
|
258
|
+
'</Preview>',
|
|
259
|
+
'',
|
|
260
|
+
'Before <Controls /> after.',
|
|
261
|
+
'<Blocks.Source />',
|
|
262
|
+
'<Storybook.Primary />',
|
|
263
|
+
'<Storybook />',
|
|
264
|
+
'',
|
|
265
|
+
'### Basic usage',
|
|
266
|
+
'',
|
|
267
|
+
'```vue',
|
|
268
|
+
'<TelaSample />',
|
|
269
|
+
'```',
|
|
270
|
+
'',
|
|
271
|
+
'### Literal Storybook syntax',
|
|
272
|
+
'',
|
|
273
|
+
'~~~mdx',
|
|
274
|
+
'<Meta title="literal" />',
|
|
275
|
+
'~~~',
|
|
276
|
+
'',
|
|
277
|
+
'| Purpose | Component |',
|
|
278
|
+
'| --- | --- |',
|
|
279
|
+
'| Sample | TelaSample |',
|
|
280
|
+
'',
|
|
281
|
+
'## Props',
|
|
282
|
+
'',
|
|
283
|
+
'Stale authored props.',
|
|
284
|
+
'',
|
|
285
|
+
'### Nested prop notes',
|
|
286
|
+
'',
|
|
287
|
+
'These must be removed with Props.',
|
|
288
|
+
'',
|
|
289
|
+
'## Slots',
|
|
290
|
+
'',
|
|
291
|
+
'The leading slot receives row context.',
|
|
292
|
+
'',
|
|
293
|
+
'## Events',
|
|
294
|
+
'',
|
|
295
|
+
'The update event fires after validation.',
|
|
296
|
+
'',
|
|
297
|
+
'## Emits',
|
|
298
|
+
'',
|
|
299
|
+
'Catch errors from async parent handlers.',
|
|
300
|
+
'',
|
|
301
|
+
'## API',
|
|
302
|
+
'',
|
|
303
|
+
'<ArgTypes of={SampleStories} />',
|
|
304
|
+
'',
|
|
305
|
+
'## Virtualization Props',
|
|
306
|
+
'',
|
|
307
|
+
'Keep semantic prop guidance.',
|
|
308
|
+
'',
|
|
309
|
+
'## Size Prop',
|
|
310
|
+
'',
|
|
311
|
+
'Keep focused size guidance.',
|
|
312
|
+
'',
|
|
313
|
+
].join('\n')
|
|
314
|
+
writeFileSync(mdxPath, mdx, 'utf-8')
|
|
315
|
+
|
|
316
|
+
const stories = await parseMdxFile(mdxPath)
|
|
317
|
+
const component: ComponentDoc = {
|
|
318
|
+
name: 'TelaSample',
|
|
319
|
+
tagName: 'TelaSample',
|
|
320
|
+
path: 'components/tela/sample.vue',
|
|
321
|
+
directory: 'tela',
|
|
322
|
+
description: '',
|
|
323
|
+
props: [{ name: 'variant', required: false, type: 'string' }],
|
|
324
|
+
events: [{ name: 'update', type: 'string' }],
|
|
325
|
+
slots: [{ name: 'default', description: 'Sample content' }],
|
|
326
|
+
stories,
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
generateDocsToDirectory([component], new TypeResolver(outDir), outDir)
|
|
330
|
+
const page = readFileSync(join(outDir, 'tela-build', 'components', 'tela-sample.md'), 'utf-8')
|
|
331
|
+
|
|
332
|
+
expect(stories?.examples).toEqual([{ name: 'Basic usage', code: '<TelaSample />' }])
|
|
333
|
+
expect(page).toContain('### Usage guidance')
|
|
334
|
+
expect(page).toContain('Content after a JSX export remains.')
|
|
335
|
+
expect(page).toContain('#### Rules')
|
|
336
|
+
expect(page).toContain('- Prefer the canonical component.')
|
|
337
|
+
expect(page).toContain('<Note>Keep non-Storybook JSX.</Note>')
|
|
338
|
+
expect(page).toContain('<Meta title="literal" />')
|
|
339
|
+
expect(page).toMatch(/\| Purpose\s+\| Component\s+\|/)
|
|
340
|
+
expect(page).toContain('#### Virtualization Props')
|
|
341
|
+
expect(page).toContain('Keep semantic prop guidance.')
|
|
342
|
+
expect(page).toContain('#### Size Prop')
|
|
343
|
+
expect(page).toContain('Keep focused size guidance.')
|
|
344
|
+
expect(page.match(/<TelaSample \/>/g)).toHaveLength(1)
|
|
345
|
+
expect(page.match(/^### Props$/gm)).toHaveLength(1)
|
|
346
|
+
expect(page.match(/^### Events$/gm)).toHaveLength(1)
|
|
347
|
+
expect(page.match(/^### Event guidance$/gm)).toHaveLength(1)
|
|
348
|
+
expect(page).toContain('The update event fires after validation.')
|
|
349
|
+
expect(page).toContain('Catch errors from async parent handlers.')
|
|
350
|
+
expect(page.match(/^### Slots$/gm)).toHaveLength(1)
|
|
351
|
+
expect(page.match(/^### Slot guidance$/gm)).toHaveLength(1)
|
|
352
|
+
expect(page).toContain('The leading slot receives row context.')
|
|
353
|
+
expect(page).not.toContain('@storybook/blocks')
|
|
354
|
+
expect(page).not.toContain('<TelaStorybookOnly />')
|
|
355
|
+
expect(page).not.toContain('<Preview')
|
|
356
|
+
expect(page).not.toContain('<Controls')
|
|
357
|
+
expect(page).not.toContain('<Blocks.Source')
|
|
358
|
+
expect(page).not.toContain('<Storybook')
|
|
359
|
+
expect(page).toMatch(/Before\s+after\./)
|
|
360
|
+
expect(page).not.toContain('Stale authored props.')
|
|
361
|
+
expect(page).not.toContain('Nested prop notes')
|
|
362
|
+
expect(page).not.toContain('<ArgTypes')
|
|
363
|
+
expect(page.match(/^# TelaSample$/gm)).toHaveLength(1)
|
|
364
|
+
})
|
|
365
|
+
|
|
366
|
+
it('preserves authored event and slot semantics when extracted metadata is incomplete', async () => {
|
|
367
|
+
const mdxDir = mkdtempSync(join(tmpdir(), 'tela-build-mdx-'))
|
|
368
|
+
const outDir = mkdtempSync(join(tmpdir(), 'tela-build-docs-'))
|
|
369
|
+
tempDirs.push(mdxDir, outDir)
|
|
370
|
+
const mdxPath = join(mdxDir, 'sample.mdx')
|
|
371
|
+
writeFileSync(mdxPath, [
|
|
372
|
+
'# TelaSample',
|
|
373
|
+
'',
|
|
374
|
+
'## Events',
|
|
375
|
+
'',
|
|
376
|
+
'`loadMore` requires errors from async parent handlers to be caught.',
|
|
377
|
+
'',
|
|
378
|
+
'## Slots',
|
|
379
|
+
'',
|
|
380
|
+
'`leading` receives row data and loading state.',
|
|
381
|
+
'',
|
|
382
|
+
'```vue',
|
|
383
|
+
'<TelaSample />',
|
|
384
|
+
'```',
|
|
385
|
+
].join('\n'))
|
|
386
|
+
|
|
387
|
+
const stories = await parseMdxFile(mdxPath)
|
|
388
|
+
const component: ComponentDoc = {
|
|
389
|
+
name: 'TelaSample',
|
|
390
|
+
tagName: 'TelaSample',
|
|
391
|
+
path: 'components/tela/sample.vue',
|
|
392
|
+
directory: 'tela',
|
|
393
|
+
description: '',
|
|
394
|
+
props: [],
|
|
395
|
+
events: [],
|
|
396
|
+
slots: [{ name: 'leading', description: '' }],
|
|
397
|
+
stories,
|
|
398
|
+
}
|
|
399
|
+
generateDocsToDirectory([component], new TypeResolver(outDir), outDir)
|
|
400
|
+
const page = readFileSync(join(outDir, 'tela-build', 'components', 'tela-sample.md'), 'utf-8')
|
|
401
|
+
|
|
402
|
+
expect(page).not.toContain('### Events\n')
|
|
403
|
+
expect(page).toContain('### Event guidance')
|
|
404
|
+
expect(page).toContain('requires errors from async parent handlers to be caught')
|
|
405
|
+
expect(page).toContain('### Slots')
|
|
406
|
+
expect(page).toContain('| `leading` | — | |')
|
|
407
|
+
expect(page).toContain('### Slot guidance')
|
|
408
|
+
expect(page).toContain('receives row data and loading state')
|
|
409
|
+
expect(page.match(/<TelaSample \/>/g)).toHaveLength(1)
|
|
410
|
+
expect(page).not.toContain('### Examples')
|
|
411
|
+
expect(stories?.examples).toEqual([{ name: 'Slots', code: '<TelaSample />' }])
|
|
412
|
+
})
|
|
413
|
+
|
|
414
|
+
it('does not restore fenced examples removed with a Storybook subtree', async () => {
|
|
415
|
+
const dir = mkdtempSync(join(tmpdir(), 'tela-build-mdx-'))
|
|
416
|
+
tempDirs.push(dir)
|
|
417
|
+
const mdxPath = join(dir, 'sample.mdx')
|
|
418
|
+
writeFileSync(mdxPath, [
|
|
419
|
+
'import { Canvas } from \'@storybook/blocks\'',
|
|
420
|
+
'',
|
|
421
|
+
'# TelaSample',
|
|
422
|
+
'',
|
|
423
|
+
'## Interactive preview',
|
|
424
|
+
'',
|
|
425
|
+
'<Canvas>',
|
|
426
|
+
'```vue',
|
|
427
|
+
'<TelaStorybookOnly />',
|
|
428
|
+
'```',
|
|
429
|
+
'</Canvas>',
|
|
430
|
+
].join('\n'))
|
|
431
|
+
|
|
432
|
+
const stories = await parseMdxFile(mdxPath)
|
|
433
|
+
|
|
434
|
+
expect(stories?.content).toBe('')
|
|
435
|
+
expect(stories?.examples).toEqual([])
|
|
436
|
+
})
|
|
437
|
+
|
|
438
|
+
it('preserves similarly named JSX not imported from Storybook', async () => {
|
|
439
|
+
const dir = mkdtempSync(join(tmpdir(), 'tela-build-mdx-'))
|
|
440
|
+
tempDirs.push(dir)
|
|
441
|
+
const mdxPath = join(dir, 'sample.mdx')
|
|
442
|
+
writeFileSync(mdxPath, [
|
|
443
|
+
'import Canvas from \'./canvas.vue\'',
|
|
444
|
+
'',
|
|
445
|
+
'# TelaSample',
|
|
446
|
+
'',
|
|
447
|
+
'<Canvas>Keep this content.</Canvas>',
|
|
448
|
+
].join('\n'))
|
|
449
|
+
|
|
450
|
+
const stories = await parseMdxFile(mdxPath)
|
|
451
|
+
|
|
452
|
+
expect(stories?.content).toContain('<Canvas>Keep this content.</Canvas>')
|
|
453
|
+
})
|
|
454
|
+
})
|
|
455
|
+
|
|
128
456
|
describe('canonical ordering', () => {
|
|
129
457
|
function makeDoc(overrides: Partial<ComponentDoc> = {}): ComponentDoc {
|
|
130
458
|
return {
|