From 27474ea07aa73545999a4366a042e11d9941c8e1 Mon Sep 17 00:00:00 2001 From: TheMcnafaha <102767512+TheMcnafaha@users.noreply.github.com> Date: Sun, 29 Sep 2024 06:20:20 -0400 Subject: [PATCH 1/4] Custom automatic api (#835) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(automatin/api): makes obj from components * feat(automation/api): parses single line comments * feat(regex): found it * feat(regex): grouped and closed it * feat(regex): and now it respect white space * feat(automation): working regex-to-obj * feat(commentMerger): removes whitespace and * This is achieved by yet another regex™. It fully respects any intentional (or not) whitespace or line breaks after the fact. * feat(automation/regex): adds type extraction to regex * feat(automation api): fix type regex to correctly read from file * refactor(automation): splits file reading from comment regex * refactor(extractType): splits regex from file handle * refactor(automatic api): better file name and ouput * fix(automatic api): removes camel case * refactor(api automation): better fn name * fix(automatic api): prevents deleting comments * fix(automatic api): rm console log * feat(custom api): parses comments from single file * fix(custom api): type extentions correctly handles the second way a type could end * feat(auto api):group comments under type label Adds label prop to comment obj. Label prop is derived from the type that defines the comments but is not changed to match current API naming * feat(auto api): components use comment labels * feat(auto api): dynamically gets component name * feat(auto api): adds fn that returns output path * refactor(auto api): renames and shifts now the plugin is in one file, decluttering the vite.config file, and gives it a better name * refactor(custom api): removes old code new code is placed under a single file, can now be used in vite * refactor(auto api): move fns around Mostly default export being at the top. * fix(auto api): adds proper types * feat(auto-api): write api obj to file * fix(auto-api): removes semicolon from type * feat(auto-api): adds docs component * fix(auto api): removes unused import * feat(auto api): adds periods to sub component names * feat(auto api): adds fn for removing question marks * refactor(auto api): betters namings * fix(auto api): workaround error message Essentially, you can't import across package boundaries. Hacky fix is to duplicate types. * fix(auto api): removes unused import * fix(auto api): removes test code Accidentally commited code used to test the auto API. --- apps/website/auto-api.ts | 118 +++++++++++++++ .../src/components/api-table/api-table.tsx | 4 +- .../src/components/api-table/auto-api.tsx | 134 ++++++++++++++++++ .../src/components/mdx-components/index.tsx | 2 + .../src/routes/docs/headless/select/index.mdx | 1 + apps/website/vite.config.ts | 2 + .../src/components/select/select-root.tsx | 12 +- 7 files changed, 265 insertions(+), 8 deletions(-) create mode 100644 apps/website/auto-api.ts create mode 100644 apps/website/src/components/api-table/auto-api.tsx diff --git a/apps/website/auto-api.ts b/apps/website/auto-api.ts new file mode 100644 index 000000000..d4f2bafe2 --- /dev/null +++ b/apps/website/auto-api.ts @@ -0,0 +1,118 @@ +import * as fs from 'fs'; +import { resolve } from 'path'; +import { inspect } from 'util'; +import { ViteDevServer } from 'vite'; +export default function autoAPI() { + return { + name: 'watch-monorepo-changes', + configureServer(server: ViteDevServer) { + const watchPath = resolve(__dirname, '../../packages/kit-headless'); + server.watcher.on('change', (file: string) => { + if (file.startsWith(watchPath)) { + loopOnAllChildFiles(file); + } + }); + }, + }; +} +// the object should have this general structure, arranged from parent to child +// componentName:[subComponent,subcomponent,...] +// subComponentName:[publicType,publicType,...] +// publicType:[{ comment,prop,type },{ comment,prop,type },...] +// THEY UPPER-MOST KEY IS ALWAYS USED AS A HEADING +export type ComponentParts = Record; +type SubComponents = SubComponent[]; +export type SubComponent = Record; +export type PublicType = Record; +type ParsedProps = { + comment: string; + prop: string; + type: string; +}; +function parseSingleComponentFromDir(path: string, ref: SubComponents) { + const component_name = /\/([\w-]*).tsx/.exec(path); + if (component_name === null || component_name[1] === null) { + // may need better behavior + return; + } + const sourceCode = fs.readFileSync(path, 'utf-8'); + const comments = extractPublicTypes(sourceCode); + const parsed: PublicType[] = []; + for (const comment of comments) { + const api = extractComments(comment.string); + const pair: PublicType = { [comment.label]: api }; + parsed.push(pair); + } + const completeSubComponent: SubComponent = { [component_name[1]]: parsed }; + ref.push(completeSubComponent); + return ref; +} + +function extractPublicTypes(strg: string) { + const getPublicTypes = /type Public([A-Z][\w]*)*[\w\W]*?{([\w|\W]*?)}(;| &)/gm; + const cms = []; + let groups; + while ((groups = getPublicTypes.exec(strg)) !== null) { + const string = groups[2]; + cms.push({ label: groups[1], string }); + } + return cms; +} +function extractComments(strg: string): ParsedProps[] { + const magical_regex = + /^\s*?\/[*]{2}\n?([\w|\W|]*?)\s*[*]{1,2}[/]\n[ ]*([\w|\W]*?): ([\w|\W]*?);?$/gm; + + const cms = []; + let groups; + + while ((groups = magical_regex.exec(strg)) !== null) { + const trimStart = /^ *|(\* *)/g; + const comment = groups[1].replaceAll(trimStart, ''); + const prop = groups[2]; + const type = groups[3]; + cms.push({ comment, prop, type }); + } + return cms; +} +function writeToDocs(fullPath: string, componentName: string, api: ComponentParts) { + if (fullPath.includes('kit-headless')) { + const relDocPath = `../website/src/routes//docs/headless/${componentName}`; + const fullDocPath = resolve(__dirname, relDocPath); + const dirPath = fullDocPath.concat('/auto-api'); + + if (!fs.existsSync(dirPath)) { + fs.mkdirSync(dirPath); + } + const json = JSON.stringify(api, null, 2); + const hacky = `export const api=${json}`; + + try { + fs.writeFileSync(dirPath.concat('/api.ts'), hacky); + console.log('auto-api: succesfully genereated new json!!! :)'); + } catch (err) { + return; + } + } +} +function loopOnAllChildFiles(filePath: string) { + const childComponentRegex = /\/([\w-]*).tsx$/.exec(filePath); + if (childComponentRegex === null) { + return; + } + const parentDir = filePath.replace(childComponentRegex[0], ''); + const componentRegex = /\/(\w*)$/.exec(parentDir); + if (!fs.existsSync(parentDir) || componentRegex == null) { + return; + } + const componentName = componentRegex[1]; + const allParts: SubComponents = []; + const store: ComponentParts = { [componentName]: allParts }; + fs.readdirSync(parentDir).forEach((fileName) => { + if (/tsx$/.test(fileName)) { + const fullPath = parentDir + '/' + fileName; + parseSingleComponentFromDir(fullPath, store[componentName]); + } + }); + + writeToDocs(filePath, componentName, store); +} diff --git a/apps/website/src/components/api-table/api-table.tsx b/apps/website/src/components/api-table/api-table.tsx index d5dbfdd06..65f1fe672 100644 --- a/apps/website/src/components/api-table/api-table.tsx +++ b/apps/website/src/components/api-table/api-table.tsx @@ -1,9 +1,9 @@ import { component$ } from '@builder.io/qwik'; import { InfoPopup } from '../info-popup/info-popup'; -type APITableProps = { +export type APITableProps = { propDescriptors: { name: string; - info: string; + info?: string; type: string; description: string; }[]; diff --git a/apps/website/src/components/api-table/auto-api.tsx b/apps/website/src/components/api-table/auto-api.tsx new file mode 100644 index 000000000..526b6b33c --- /dev/null +++ b/apps/website/src/components/api-table/auto-api.tsx @@ -0,0 +1,134 @@ +import { JSXOutput, component$, $, QRL, useTask$, useSignal } from '@builder.io/qwik'; +import { APITable, type APITableProps } from './api-table'; +import { packages } from '../install-snippet/install-snippet'; + +//This is a workaround for not being able to export across packages due to nx rule: +// https://nx.dev/features/enforce-module-boundaries#enforce-module-boundaries +type ComponentParts = Record; +type SubComponents = SubComponent[]; +type SubComponent = Record; +type PublicType = Record; +type ParsedProps = { + comment: string; + prop: string; + type: string; +}; +type AutoAPIConfig = { + topHeader?: QRL<(text: string) => JSXOutput>; + subHeader?: QRL<(text: string) => JSXOutput>; + props?: QRL<(text: string) => string>; +}; + +type AnatomyTableProps = { + api?: ComponentParts; + config: AutoAPIConfig; +}; + +type SubComponentProps = { + subComponent: SubComponent; + config: AutoAPIConfig; +}; +type ParsedCommentsProps = { + parsedProps: PublicType; + config: AutoAPIConfig; +}; +const currentHeader = $((_: string) => { + //cannot send h2 from here because current TOC can only read md + return null; +}); + +const currentSubHeader = $((text: string) => { + let subHeader = text.replace(/(p|P)rops/, ''); + const hasCapital = /[a-z][A-Z]/.exec(subHeader)?.index; + if (hasCapital != undefined) { + subHeader = + subHeader.slice(0, hasCapital + 1) + '.' + subHeader.slice(hasCapital + 1); + } + return ( + <> +

{subHeader}

+ + ); +}); + +const removeQuestionMarkFromProp = $((text: string) => { + return text.replace('?', ''); +}); +const defaultConfig: AutoAPIConfig = { + topHeader: currentHeader, + subHeader: currentSubHeader, + props: removeQuestionMarkFromProp, +}; +export const AutoAPI = component$( + ({ api, config = defaultConfig }) => { + if (api === undefined) { + return null; + } + const key = Object.keys(api)[0]; + const topHeaderSig = useSignal(key); + const subComponents = api[key].filter((e) => e[Object.keys(e)[0]].length > 0); + useTask$(async () => { + if (config.topHeader) { + topHeaderSig.value = await config.topHeader(key as string); + } + }); + return ( + <> + {topHeaderSig.value} + {subComponents.map((e) => ( + + ))} + + ); + }, +); + +const SubComponent = component$(({ subComponent, config }) => { + const subComponentKey = Object.keys(subComponent)[0]; + const comments = subComponent[subComponentKey]; + return ( + <> + {comments.map((e) => ( + <> + + + ))} + + ); +}); + +const ParsedComments = component$(({ parsedProps, config }) => { + const key = Object.keys(parsedProps)[0]; + const subHeaderSig = useSignal(key); + useTask$(async () => { + if (config.subHeader) { + subHeaderSig.value = await config.subHeader(key as string); + } + }); + const appliedPropsSig = useSignal(null); + useTask$(async () => { + const translation: APITableProps = { + propDescriptors: parsedProps[key].map((e) => { + return { + name: e.prop, + type: e.type, + description: e.comment, + }; + }), + }; + if (config.props) { + for (const props of translation.propDescriptors) { + props.name = await config.props(props.name); + } + } + appliedPropsSig.value = translation; + }); + return ( + <> + {subHeaderSig.value} + {appliedPropsSig.value?.propDescriptors && ( + + )} + + ); +}); diff --git a/apps/website/src/components/mdx-components/index.tsx b/apps/website/src/components/mdx-components/index.tsx index 3a1d9e7ee..603655d39 100644 --- a/apps/website/src/components/mdx-components/index.tsx +++ b/apps/website/src/components/mdx-components/index.tsx @@ -2,6 +2,7 @@ import { Component, PropsOf, Slot, component$ } from '@builder.io/qwik'; import { cn } from '@qwik-ui/utils'; import { AnatomyTable } from '../anatomy-table/anatomy-table'; import { APITable } from '../api-table/api-table'; +import { AutoAPI } from '../api-table/auto-api'; import { CodeCopy } from '../code-copy/code-copy'; import { CodeSnippet } from '../code-snippet/code-snippet'; import { FeatureList } from '../feature-list/feature-list'; @@ -132,4 +133,5 @@ export const components: Record = { Note, StatusBanner, Showcase, + AutoAPI, }; diff --git a/apps/website/src/routes/docs/headless/select/index.mdx b/apps/website/src/routes/docs/headless/select/index.mdx index d42ead181..d92d0c4bc 100644 --- a/apps/website/src/routes/docs/headless/select/index.mdx +++ b/apps/website/src/routes/docs/headless/select/index.mdx @@ -2,6 +2,7 @@ title: Qwik UI | Select --- +import { api } from './auto-api/api'; import { FeatureList } from '~/components/feature-list/feature-list'; import { statusByComponent } from '~/_state/component-statuses'; diff --git a/apps/website/vite.config.ts b/apps/website/vite.config.ts index 702ab3aeb..57617084c 100644 --- a/apps/website/vite.config.ts +++ b/apps/website/vite.config.ts @@ -3,6 +3,7 @@ import { qwikVite } from '@builder.io/qwik/optimizer'; import { defineConfig } from 'vite'; import tsconfigPaths from 'vite-tsconfig-paths'; import { recmaProvideComponents } from './recma-provide-components'; +import autoAPI from './auto-api'; export default defineConfig(async () => { const { default: rehypePrettyCode } = await import('rehype-pretty-code'); @@ -29,6 +30,7 @@ export default defineConfig(async () => { return { plugins: [ + autoAPI(), qwikCity({ mdxPlugins: { rehypeSyntaxHighlight: false, diff --git a/packages/kit-headless/src/components/select/select-root.tsx b/packages/kit-headless/src/components/select/select-root.tsx index d0af4308a..449c9d812 100644 --- a/packages/kit-headless/src/components/select/select-root.tsx +++ b/packages/kit-headless/src/components/select/select-root.tsx @@ -44,13 +44,13 @@ type TMultiValue = type TStringOrArray = | { - multiple?: true; - onChange$?: QRL<(value: string[]) => void>; - } + multiple?: true; + onChange$?: QRL<(value: string[]) => void>; + } | { - multiple?: false; - onChange$?: QRL<(value: string) => void>; - }; + multiple?: false; + onChange$?: QRL<(value: string) => void>; + }; export type SelectProps = Omit< PropsOf<'div'>, From 8545cba335fbc0ca793022d75c433e3071ca446c Mon Sep 17 00:00:00 2001 From: Jack Shelton <104264123+thejackshelton@users.noreply.github.com> Date: Sun, 29 Sep 2024 07:34:48 -0500 Subject: [PATCH 2/4] Site improvements (#973) * feat: carousel now uses auto api * fix: rollup warning to properly export toggle group --- apps/website/auto-api.ts | 1 - .../src/components/api-table/auto-api.tsx | 14 +- .../docs/headless/carousel/auto-api/api.ts | 122 ++++++++++++++++++ .../routes/docs/headless/carousel/index.mdx | 69 +--------- .../src/routes/docs/headless/select/index.mdx | 1 - .../src/components/carousel/inline.tsx | 6 +- .../src/components/carousel/root.tsx | 4 +- .../src/components/toggle-group/index.tsx | 8 +- packages/kit-headless/src/index.ts | 2 +- 9 files changed, 144 insertions(+), 83 deletions(-) create mode 100644 apps/website/src/routes/docs/headless/carousel/auto-api/api.ts diff --git a/apps/website/auto-api.ts b/apps/website/auto-api.ts index d4f2bafe2..0d9442c8d 100644 --- a/apps/website/auto-api.ts +++ b/apps/website/auto-api.ts @@ -1,6 +1,5 @@ import * as fs from 'fs'; import { resolve } from 'path'; -import { inspect } from 'util'; import { ViteDevServer } from 'vite'; export default function autoAPI() { return { diff --git a/apps/website/src/components/api-table/auto-api.tsx b/apps/website/src/components/api-table/auto-api.tsx index 526b6b33c..b216be717 100644 --- a/apps/website/src/components/api-table/auto-api.tsx +++ b/apps/website/src/components/api-table/auto-api.tsx @@ -1,6 +1,5 @@ import { JSXOutput, component$, $, QRL, useTask$, useSignal } from '@builder.io/qwik'; import { APITable, type APITableProps } from './api-table'; -import { packages } from '../install-snippet/install-snippet'; //This is a workaround for not being able to export across packages due to nx rule: // https://nx.dev/features/enforce-module-boundaries#enforce-module-boundaries @@ -32,7 +31,7 @@ type ParsedCommentsProps = { parsedProps: PublicType; config: AutoAPIConfig; }; -const currentHeader = $((_: string) => { +const currentHeader = $(() => { //cannot send h2 from here because current TOC can only read md return null; }); @@ -75,8 +74,8 @@ export const AutoAPI = component$( return ( <> {topHeaderSig.value} - {subComponents.map((e) => ( - + {subComponents.map((e, index) => ( + ))} ); @@ -109,10 +108,15 @@ const ParsedComments = component$(({ parsedProps, config }) useTask$(async () => { const translation: APITableProps = { propDescriptors: parsedProps[key].map((e) => { + const isObject = e.type.includes('{'); + const isUnion = e.type.includes('|'); + const isPopup = isObject || isUnion; + return { name: e.prop, - type: e.type, + type: isObject ? 'object' : isUnion ? 'union' : e.type, description: e.comment, + info: (isPopup && e.type) || undefined, }; }), }; diff --git a/apps/website/src/routes/docs/headless/carousel/auto-api/api.ts b/apps/website/src/routes/docs/headless/carousel/auto-api/api.ts new file mode 100644 index 000000000..473dbd7e0 --- /dev/null +++ b/apps/website/src/routes/docs/headless/carousel/auto-api/api.ts @@ -0,0 +1,122 @@ +export const api = { + carousel: [ + { + bullet: [], + }, + { + inline: [], + }, + { + next: [], + }, + { + pagination: [], + }, + { + player: [], + }, + { + previous: [], + }, + { + root: [ + { + CarouselRootProps: [ + { + comment: 'The gap between slides', + prop: 'gap?', + type: 'number', + }, + { + comment: 'Number of slides to show at once', + prop: 'slidesPerView?', + type: 'number', + }, + { + comment: 'Whether the carousel is draggable', + prop: 'draggable?', + type: 'boolean', + }, + { + comment: 'Alignment of slides within the viewport', + prop: 'align?', + type: "'start' | 'center' | 'end'", + }, + { + comment: 'Whether the carousel should rewind', + prop: 'rewind?', + type: 'boolean', + }, + { + comment: 'Bind the selected index to a signal', + prop: "'bind:selectedIndex'?", + type: 'Signal', + }, + { + comment: 'change the initial index of the carousel on render', + prop: 'startIndex?', + type: 'number', + }, + { + comment: + '@deprecated Use bind:selectedIndex instead\n Bind the current slide index to a signal', + prop: "'bind:currSlideIndex'?", + type: 'Signal', + }, + { + comment: 'Whether the carousel should autoplay', + prop: "'bind:autoplay'?", + type: 'Signal', + }, + { + comment: 'the current progress of the carousel', + prop: "'bind:progress'?", + type: 'Signal', + }, + { + comment: 'Time in milliseconds before the next slide plays during autoplay', + prop: 'autoPlayIntervalMs?', + type: 'number', + }, + { + comment: '@internal Total number of slides', + prop: '_numSlides?', + type: 'number', + }, + { + comment: '@internal Whether this carousel has a title', + prop: '_isTitle?', + type: 'boolean', + }, + { + comment: 'The sensitivity of the carousel dragging', + prop: 'sensitivity?', + type: '{', + }, + ], + }, + ], + }, + { + scroller: [], + }, + { + slide: [], + }, + { + step: [], + }, + { + stepper: [], + }, + { + title: [], + }, + { + 'use-carousel': [], + }, + { + 'use-scroller': [], + }, + ], +}; diff --git a/apps/website/src/routes/docs/headless/carousel/index.mdx b/apps/website/src/routes/docs/headless/carousel/index.mdx index a0e32da50..a0449ce6f 100644 --- a/apps/website/src/routes/docs/headless/carousel/index.mdx +++ b/apps/website/src/routes/docs/headless/carousel/index.mdx @@ -4,6 +4,10 @@ import { FeatureList } from '~/components/feature-list/feature-list'; import { Note } from '~/components/note/note'; +import { AutoAPI } from '~/components/api-table/auto-api'; + +import { api } from './auto-api/api'; + # Carousel @@ -327,67 +331,4 @@ In the above example, we also use the headless progress component to show the pr ## API -### Carousel.Root - -', - description: 'Bind the selected index to a signal.', - }, - { - name: 'startIndex', - type: 'number', - description: 'Change the initial index of the carousel on render.', - }, - { - name: 'bind:autoplay', - type: 'Signal', - description: 'Whether the carousel should autoplay.', - }, - { - name: 'autoPlayIntervalMs', - type: 'number', - description: 'Time in milliseconds before the next slide plays during autoplay.', - }, - { - name: 'direction', - type: 'union', - description: - 'Change the direction of the carousel, for it to be veritical define the maxSlideHeight prop as well.', - info: '"row" | "column"', - }, - { - name: 'maxSlideHeight', - type: 'number', - description: 'Write the height of the longest slide.', - }, - ]} -/> + diff --git a/apps/website/src/routes/docs/headless/select/index.mdx b/apps/website/src/routes/docs/headless/select/index.mdx index d92d0c4bc..d42ead181 100644 --- a/apps/website/src/routes/docs/headless/select/index.mdx +++ b/apps/website/src/routes/docs/headless/select/index.mdx @@ -2,7 +2,6 @@ title: Qwik UI | Select --- -import { api } from './auto-api/api'; import { FeatureList } from '~/components/feature-list/feature-list'; import { statusByComponent } from '~/_state/component-statuses'; diff --git a/packages/kit-headless/src/components/carousel/inline.tsx b/packages/kit-headless/src/components/carousel/inline.tsx index 80a804380..8c2d3bdcf 100644 --- a/packages/kit-headless/src/components/carousel/inline.tsx +++ b/packages/kit-headless/src/components/carousel/inline.tsx @@ -1,5 +1,5 @@ import { Component } from '@builder.io/qwik'; -import { CarouselBase, CarouselRootProps } from './root'; +import { CarouselBase, PublicCarouselRootProps } from './root'; import { Carousel } from '@qwik-ui/headless'; import { findComponent, processChildren } from '../../utils/inline-component'; @@ -20,8 +20,8 @@ type InternalProps = { titleComponent?: typeof Carousel.Title; }; -export const CarouselRoot: Component = ( - props: CarouselRootProps & InternalProps, +export const CarouselRoot: Component = ( + props: PublicCarouselRootProps & InternalProps, ) => { const { children, diff --git a/packages/kit-headless/src/components/carousel/root.tsx b/packages/kit-headless/src/components/carousel/root.tsx index 720060dea..7a9209330 100644 --- a/packages/kit-headless/src/components/carousel/root.tsx +++ b/packages/kit-headless/src/components/carousel/root.tsx @@ -13,7 +13,7 @@ import { CarouselContext, carouselContextId } from './context'; import { useBoundSignal } from '../../utils/bound-signal'; import { useAutoplay } from './use-carousel'; -export type CarouselRootProps = PropsOf<'div'> & { +export type PublicCarouselRootProps = PropsOf<'div'> & { /** The gap between slides */ gap?: number; @@ -72,7 +72,7 @@ export type CarouselRootProps = PropsOf<'div'> & { maxSlideHeight?: number; }; -export const CarouselBase = component$((props: CarouselRootProps) => { +export const CarouselBase = component$((props: PublicCarouselRootProps) => { const { align, 'bind:currSlideIndex': givenOldSlideIndexSig, diff --git a/packages/kit-headless/src/components/toggle-group/index.tsx b/packages/kit-headless/src/components/toggle-group/index.tsx index fc5b18aa7..0f2ad5e4c 100644 --- a/packages/kit-headless/src/components/toggle-group/index.tsx +++ b/packages/kit-headless/src/components/toggle-group/index.tsx @@ -1,6 +1,2 @@ -import { HToggleGroupItem } from './toggle-group-item'; -import { HToggleGroupRoot } from './toggle-group-root'; -export const ToggleGroup = { - Root: HToggleGroupRoot, - Item: HToggleGroupItem, -}; +export { HToggleGroupItem as Item } from './toggle-group-item'; +export { HToggleGroupRoot as Root } from './toggle-group-root'; diff --git a/packages/kit-headless/src/index.ts b/packages/kit-headless/src/index.ts index 77c2e051a..86198fa29 100644 --- a/packages/kit-headless/src/index.ts +++ b/packages/kit-headless/src/index.ts @@ -13,7 +13,7 @@ export * as Progress from './components/progress'; export * from './components/separator'; export * as Tabs from './components/tabs'; export { Toggle } from './components/toggle'; -export { ToggleGroup } from './components/toggle-group'; +export * as ToggleGroup from './components/toggle-group'; export * from './utils/visually-hidden'; export * as Tooltip from './components/tooltip'; export * as Dropdown from './components/dropdown'; From 9cb3c96879e3429bbc78f85fc261fe60a192bbf5 Mon Sep 17 00:00:00 2001 From: Jack Shelton <104264123+thejackshelton@users.noreply.github.com> Date: Sun, 29 Sep 2024 10:59:30 -0500 Subject: [PATCH 3/4] Update component statuses (#975) * feat: carousel now uses auto api * fix: rollup warning to properly export toggle group * update shiki to latest * component status changes + popover styles fix * separator is stable --- apps/website/src/_state/component-statuses.ts | 11 +- .../status-banner/status-banner.tsx | 2 +- apps/website/src/routes/docs/headless/menu.md | 2 +- .../docs/headless/popover/examples/styles.tsx | 8 ++ .../routes/docs/headless/popover/index.mdx | 6 +- .../docs/headless/toggle-group/index.mdx | 2 +- .../routes/docs/headless/tooltip/index.mdx | 2 - package.json | 3 +- pnpm-lock.yaml | 101 ++++++++++++++---- 9 files changed, 101 insertions(+), 36 deletions(-) create mode 100644 apps/website/src/routes/docs/headless/popover/examples/styles.tsx diff --git a/apps/website/src/_state/component-statuses.ts b/apps/website/src/_state/component-statuses.ts index d1fdf99d7..5894906dd 100644 --- a/apps/website/src/_state/component-statuses.ts +++ b/apps/website/src/_state/component-statuses.ts @@ -37,22 +37,17 @@ export const statusByComponent: ComponentKitsStatuses = { Textarea: ComponentStatus.Draft, }, headless: { - Accordion: ComponentStatus.Beta, Carousel: ComponentStatus.Beta, - Collapsible: ComponentStatus.Beta, Combobox: ComponentStatus.Beta, Checkbox: ComponentStatus.Draft, Dropdown: ComponentStatus.Draft, - Label: ComponentStatus.Draft, - Modal: ComponentStatus.Beta, + Label: ComponentStatus.Beta, Pagination: ComponentStatus.Draft, - Popover: ComponentStatus.Beta, Progress: ComponentStatus.Beta, Select: ComponentStatus.Beta, - Separator: ComponentStatus.Beta, Tabs: ComponentStatus.Beta, - Toggle: ComponentStatus.Draft, - ToggleGroup: ComponentStatus.Draft, + Toggle: ComponentStatus.Beta, + 'Toggle Group': ComponentStatus.Beta, Tooltip: ComponentStatus.Beta, }, }; diff --git a/apps/website/src/components/status-banner/status-banner.tsx b/apps/website/src/components/status-banner/status-banner.tsx index bcbb67824..e45c5b744 100644 --- a/apps/website/src/components/status-banner/status-banner.tsx +++ b/apps/website/src/components/status-banner/status-banner.tsx @@ -77,7 +77,7 @@ export const StatusBanner = component$(({ status }: StatusBannerProps) => { <>