Skip to content

Commit 8545cba

Browse files
thejacksheltonthejackshelton
authored
Site improvements (#973)
* feat: carousel now uses auto api * fix: rollup warning to properly export toggle group
1 parent 27474ea commit 8545cba

File tree

9 files changed

+144
-83
lines changed

9 files changed

+144
-83
lines changed

‎apps/website/auto-api.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import * as fs from 'fs';
22
import { resolve } from 'path';
3-
import { inspect } from 'util';
43
import { ViteDevServer } from 'vite';
54
export default function autoAPI() {
65
return {

‎apps/website/src/components/api-table/auto-api.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { JSXOutput, component$, $, QRL, useTask$, useSignal } from '@builder.io/qwik';
22
import { APITable, type APITableProps } from './api-table';
3-
import { packages } from '../install-snippet/install-snippet';
43

54
//This is a workaround for not being able to export across packages due to nx rule:
65
// https://nx.dev/features/enforce-module-boundaries#enforce-module-boundaries
@@ -32,7 +31,7 @@ type ParsedCommentsProps = {
3231
parsedProps: PublicType;
3332
config: AutoAPIConfig;
3433
};
35-
const currentHeader = $((_: string) => {
34+
const currentHeader = $(() => {
3635
//cannot send h2 from here because current TOC can only read md
3736
return null;
3837
});
@@ -75,8 +74,8 @@ export const AutoAPI = component$<AnatomyTableProps>(
7574
return (
7675
<>
7776
{topHeaderSig.value}
78-
{subComponents.map((e) => (
79-
<SubComponent subComponent={e} config={config} />
77+
{subComponents.map((e, index) => (
78+
<SubComponent key={index} subComponent={e} config={config} />
8079
))}
8180
</>
8281
);
@@ -109,10 +108,15 @@ const ParsedComments = component$<ParsedCommentsProps>(({ parsedProps, config })
109108
useTask$(async () => {
110109
const translation: APITableProps = {
111110
propDescriptors: parsedProps[key].map((e) => {
111+
const isObject = e.type.includes('{');
112+
const isUnion = e.type.includes('|');
113+
const isPopup = isObject || isUnion;
114+
112115
return {
113116
name: e.prop,
114-
type: e.type,
117+
type: isObject ? 'object' : isUnion ? 'union' : e.type,
115118
description: e.comment,
119+
info: (isPopup && e.type) || undefined,
116120
};
117121
}),
118122
};

‎apps/website/src/routes/docs/headless/carousel/auto-api/api.ts‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
export const api = {
2+
carousel: [
3+
{
4+
bullet: [],
5+
},
6+
{
7+
inline: [],
8+
},
9+
{
10+
next: [],
11+
},
12+
{
13+
pagination: [],
14+
},
15+
{
16+
player: [],
17+
},
18+
{
19+
previous: [],
20+
},
21+
{
22+
root: [
23+
{
24+
CarouselRootProps: [
25+
{
26+
comment: 'The gap between slides',
27+
prop: 'gap?',
28+
type: 'number',
29+
},
30+
{
31+
comment: 'Number of slides to show at once',
32+
prop: 'slidesPerView?',
33+
type: 'number',
34+
},
35+
{
36+
comment: 'Whether the carousel is draggable',
37+
prop: 'draggable?',
38+
type: 'boolean',
39+
},
40+
{
41+
comment: 'Alignment of slides within the viewport',
42+
prop: 'align?',
43+
type: "'start' | 'center' | 'end'",
44+
},
45+
{
46+
comment: 'Whether the carousel should rewind',
47+
prop: 'rewind?',
48+
type: 'boolean',
49+
},
50+
{
51+
comment: 'Bind the selected index to a signal',
52+
prop: "'bind:selectedIndex'?",
53+
type: 'Signal<number>',
54+
},
55+
{
56+
comment: 'change the initial index of the carousel on render',
57+
prop: 'startIndex?',
58+
type: 'number',
59+
},
60+
{
61+
comment:
62+
'@deprecated Use bind:selectedIndex instead\n Bind the current slide index to a signal',
63+
prop: "'bind:currSlideIndex'?",
64+
type: 'Signal<number>',
65+
},
66+
{
67+
comment: 'Whether the carousel should autoplay',
68+
prop: "'bind:autoplay'?",
69+
type: 'Signal<boolean>',
70+
},
71+
{
72+
comment: 'the current progress of the carousel',
73+
prop: "'bind:progress'?",
74+
type: 'Signal<number>',
75+
},
76+
{
77+
comment: 'Time in milliseconds before the next slide plays during autoplay',
78+
prop: 'autoPlayIntervalMs?',
79+
type: 'number',
80+
},
81+
{
82+
comment: '@internal Total number of slides',
83+
prop: '_numSlides?',
84+
type: 'number',
85+
},
86+
{
87+
comment: '@internal Whether this carousel has a title',
88+
prop: '_isTitle?',
89+
type: 'boolean',
90+
},
91+
{
92+
comment: 'The sensitivity of the carousel dragging',
93+
prop: 'sensitivity?',
94+
type: '{',
95+
},
96+
],
97+
},
98+
],
99+
},
100+
{
101+
scroller: [],
102+
},
103+
{
104+
slide: [],
105+
},
106+
{
107+
step: [],
108+
},
109+
{
110+
stepper: [],
111+
},
112+
{
113+
title: [],
114+
},
115+
{
116+
'use-carousel': [],
117+
},
118+
{
119+
'use-scroller': [],
120+
},
121+
],
122+
};

‎apps/website/src/routes/docs/headless/carousel/index.mdx‎

Lines changed: 5 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ import { FeatureList } from '~/components/feature-list/feature-list';
44

55
import { Note } from '~/components/note/note';
66

7+
import { AutoAPI } from '~/components/api-table/auto-api';
8+
9+
import { api } from './auto-api/api';
10+
711
<StatusBanner status={statusByComponent.headless.Carousel} />
812

913
# Carousel
@@ -327,67 +331,4 @@ In the above example, we also use the headless progress component to show the pr
327331

328332
## API
329333

330-
### Carousel.Root
331-
332-
<APITable
333-
propDescriptors={[
334-
{
335-
name: 'gap',
336-
type: 'number',
337-
description: 'The gap between slides.',
338-
},
339-
{
340-
name: 'slidesPerView',
341-
type: 'number',
342-
description: 'Number of slides to show at once.',
343-
},
344-
{
345-
name: 'draggable',
346-
type: 'boolean',
347-
description: 'Whether the carousel is draggable.',
348-
},
349-
{
350-
name: 'align',
351-
type: 'union',
352-
description: 'Alignment of slides within the viewport.',
353-
info: '"start" | "center" | "end"',
354-
},
355-
{
356-
name: 'rewind',
357-
type: 'boolean',
358-
description: 'Whether the carousel should rewind.',
359-
},
360-
{
361-
name: 'bind:selectedIndex',
362-
type: 'Signal<number>',
363-
description: 'Bind the selected index to a signal.',
364-
},
365-
{
366-
name: 'startIndex',
367-
type: 'number',
368-
description: 'Change the initial index of the carousel on render.',
369-
},
370-
{
371-
name: 'bind:autoplay',
372-
type: 'Signal<boolean>',
373-
description: 'Whether the carousel should autoplay.',
374-
},
375-
{
376-
name: 'autoPlayIntervalMs',
377-
type: 'number',
378-
description: 'Time in milliseconds before the next slide plays during autoplay.',
379-
},
380-
{
381-
name: 'direction',
382-
type: 'union',
383-
description:
384-
'Change the direction of the carousel, for it to be veritical define the maxSlideHeight prop as well.',
385-
info: '"row" | "column"',
386-
},
387-
{
388-
name: 'maxSlideHeight',
389-
type: 'number',
390-
description: 'Write the height of the longest slide.',
391-
},
392-
]}
393-
/>
334+
<AutoAPI api={api} />

‎apps/website/src/routes/docs/headless/select/index.mdx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
title: Qwik UI | Select
33
---
44

5-
import { api } from './auto-api/api';
65
import { FeatureList } from '~/components/feature-list/feature-list';
76
import { statusByComponent } from '~/_state/component-statuses';
87

‎packages/kit-headless/src/components/carousel/inline.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component } from '@builder.io/qwik';
2-
import { CarouselBase, CarouselRootProps } from './root';
2+
import { CarouselBase, PublicCarouselRootProps } from './root';
33
import { Carousel } from '@qwik-ui/headless';
44
import { findComponent, processChildren } from '../../utils/inline-component';
55

@@ -20,8 +20,8 @@ type InternalProps = {
2020
titleComponent?: typeof Carousel.Title;
2121
};
2222

23-
export const CarouselRoot: Component<CarouselRootProps & InternalProps> = (
24-
props: CarouselRootProps & InternalProps,
23+
export const CarouselRoot: Component<PublicCarouselRootProps & InternalProps> = (
24+
props: PublicCarouselRootProps & InternalProps,
2525
) => {
2626
const {
2727
children,

‎packages/kit-headless/src/components/carousel/root.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { CarouselContext, carouselContextId } from './context';
1313
import { useBoundSignal } from '../../utils/bound-signal';
1414
import { useAutoplay } from './use-carousel';
1515

16-
export type CarouselRootProps = PropsOf<'div'> & {
16+
export type PublicCarouselRootProps = PropsOf<'div'> & {
1717
/** The gap between slides */
1818
gap?: number;
1919

@@ -72,7 +72,7 @@ export type CarouselRootProps = PropsOf<'div'> & {
7272
maxSlideHeight?: number;
7373
};
7474

75-
export const CarouselBase = component$((props: CarouselRootProps) => {
75+
export const CarouselBase = component$((props: PublicCarouselRootProps) => {
7676
const {
7777
align,
7878
'bind:currSlideIndex': givenOldSlideIndexSig,

‎packages/kit-headless/src/components/toggle-group/index.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,2 @@
1-
import { HToggleGroupItem } from './toggle-group-item';
2-
import { HToggleGroupRoot } from './toggle-group-root';
3-
export const ToggleGroup = {
4-
Root: HToggleGroupRoot,
5-
Item: HToggleGroupItem,
6-
};
1+
export { HToggleGroupItem as Item } from './toggle-group-item';
2+
export { HToggleGroupRoot as Root } from './toggle-group-root';

‎packages/kit-headless/src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export * as Progress from './components/progress';
1313
export * from './components/separator';
1414
export * as Tabs from './components/tabs';
1515
export { Toggle } from './components/toggle';
16-
export { ToggleGroup } from './components/toggle-group';
16+
export * as ToggleGroup from './components/toggle-group';
1717
export * from './utils/visually-hidden';
1818
export * as Tooltip from './components/tooltip';
1919
export * as Dropdown from './components/dropdown';

0 commit comments

Comments
 (0)