diff --git a/.changeset/two-jeans-share.md b/.changeset/two-jeans-share.md new file mode 100644 index 000000000..615c68da4 --- /dev/null +++ b/.changeset/two-jeans-share.md @@ -0,0 +1,5 @@ +--- +'@qwik-ui/headless': minor +--- + +We are removing the existing popover animations shimming and instead wil now only support native popover animations. This is considered a breaking change but will be more reliable overall. diff --git a/.eslintignore b/.eslintignore index 925698059..7f91a7ca5 100644 --- a/.eslintignore +++ b/.eslintignore @@ -2,4 +2,5 @@ node_modules dist coverage .eslintrc.* -vite.config.ts \ No newline at end of file +vite.config.ts +packages/kit-headless/browsers/** \ No newline at end of file diff --git a/.github/actions/test/action.yml b/.github/actions/test/action.yml index b4d4728f1..89395f703 100644 --- a/.github/actions/test/action.yml +++ b/.github/actions/test/action.yml @@ -28,11 +28,6 @@ runs: env: NODE_OPTIONS: --experimental-vm-modules - - name: Test Headless - uses: cypress-io/github-action@v5 - with: - command: 'pnpm test.headless.ci' - # - name: Build # shell: bash # run: npx nx affected:build --base=last-release --exclude=website diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index e4806d6a8..6c80f20d5 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -7,6 +7,7 @@ on: jobs: test: runs-on: ubuntu-latest + name: Test NodeJS ${{ matrix.node_version }} strategy: matrix: diff --git a/.vscode/settings.json b/.vscode/settings.json index cf055a154..1a269d81d 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -6,5 +6,6 @@ ], "editor.codeActionsOnSave": { "source.removeUnusedImports": "explicit" - } + }, + "vitest.disableWorkspaceWarning": true } diff --git a/apps/component-tests/src/global.css b/apps/component-tests/src/global.css index 62a2111e0..77ef5bc24 100644 --- a/apps/component-tests/src/global.css +++ b/apps/component-tests/src/global.css @@ -1240,11 +1240,19 @@ *::-webkit-scrollbar-thumb { /* Thumb color */ - background-color: var(--qwikui-slate-500); + background-color: hsla(var(--foreground) / 0.25); border-radius: 0.5rem; background-clip: padding-box; - border-left: 0.3rem solid transparent; - border-right: 0.3rem solid transparent; + border-left: 0.15rem solid transparent; + border-right: 0.15rem solid transparent; + } + + .navigation-docs::-webkit-scrollbar-thumb { + background-color: hsla(var(--foreground) / 0.1); + } + + .dark .navigation-docs::-webkit-scrollbar-thumb { + background-color: hsla(var(--foreground) / 0.2); } *::-webkit-scrollbar-corner { @@ -1256,8 +1264,17 @@ border-left: 1px solid var(--qwikui-slate-300); } - .dark *::-webkit-scrollbar-thumb { - background-color: var(--qwikui-slate-500); + .toc-scrollbar::-webkit-scrollbar-track, + .dark .toc-scrollbar::-webkit-scrollbar-track { + border-color: transparent; + } + + .toc-scrollbar::-webkit-scrollbar-thumb { + background-color: transparent; + } + + .toc-scrollbar:hover.toc-scrollbar::-webkit-scrollbar-thumb { + background-color: hsla(var(--foreground) / 0.15); } .dark *::-webkit-scrollbar-track { @@ -1272,7 +1289,7 @@ } .code-example *::-webkit-scrollbar-thumb { - background: var(--qwikui-slate-500); + background-color: var(--qwikui-slate-600); border-radius: 0.5rem; background-clip: padding-box; } @@ -1290,6 +1307,10 @@ .dark .note-link a { border-bottom: 1px solid white !important; } + + .gif-container { + border-radius: var(--border-radius); + } } :root { @@ -1342,7 +1363,7 @@ body { min-height: 100%; } -/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term. +/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term. It would make more sense to supply the user with the animation declaration in the docs. */ @layer utilities { diff --git a/apps/component-tests/src/root.tsx b/apps/component-tests/src/root.tsx index 98c96a8f1..ab07231ce 100644 --- a/apps/component-tests/src/root.tsx +++ b/apps/component-tests/src/root.tsx @@ -1,13 +1,25 @@ -import { component$, useStyles$ } from '@builder.io/qwik'; import { - QwikCityProvider, - RouterOutlet, - ServiceWorkerRegister, -} from '@builder.io/qwik-city'; -import { RouterHead } from './components/router-head/router-head'; + component$, useStyles$, + PrefetchGraph, + PrefetchServiceWorker +} from '@builder.io/qwik'; +import { QwikCityProvider, RouterOutlet } from '@builder.io/qwik-city'; +import { RouterHead } from './components/router-head/router-head'; import globalStyles from './global.css?inline'; +import { ThemeProvider } from '@qwik-ui/themes'; + +import '@fontsource-variable/inter'; +import { + ThemeBaseColors, + ThemeBorderRadiuses, + ThemeFonts, + ThemeModes, + ThemePrimaryColors, + ThemeStyles, +} from '@qwik-ui/utils'; + export default component$(() => { /** * The root of a QwikCity site always start with the component, @@ -17,16 +29,31 @@ export default component$(() => { */ useStyles$(globalStyles); + return ( - + - - + + + + + ); diff --git a/apps/component-tests/vite.config.ts b/apps/component-tests/vite.config.ts index a8894fc35..4ee31b824 100644 --- a/apps/component-tests/vite.config.ts +++ b/apps/component-tests/vite.config.ts @@ -2,12 +2,10 @@ import { qwikVite } from '@builder.io/qwik/optimizer'; import { qwikCity } from '@builder.io/qwik-city/vite'; import { defineConfig } from 'vite'; import tsconfigPaths from 'vite-tsconfig-paths'; -import { qwikNxVite } from 'qwik-nx/plugins'; export default defineConfig({ cacheDir: '../../node_modules/.vite/apps/component-tests', plugins: [ - qwikNxVite(), qwikCity(), qwikVite({ client: { diff --git a/apps/website-e2e/.eslintrc.json b/apps/website-e2e/.eslintrc.json deleted file mode 100644 index 696cb8b12..000000000 --- a/apps/website-e2e/.eslintrc.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": ["plugin:cypress/recommended", "../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], - "rules": {} - } - ] -} diff --git a/apps/website-e2e/cypress.config.ts b/apps/website-e2e/cypress.config.ts deleted file mode 100644 index a45b4fd68..000000000 --- a/apps/website-e2e/cypress.config.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { defineConfig } from 'cypress'; -import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset'; - -export default defineConfig({ - e2e: nxE2EPreset(__dirname, { - bundler: 'vite', - }), -}); diff --git a/apps/website-e2e/project.json b/apps/website-e2e/project.json deleted file mode 100644 index ab3df9ef8..000000000 --- a/apps/website-e2e/project.json +++ /dev/null @@ -1,30 +0,0 @@ -{ - "name": "website-e2e", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "apps/website-e2e/src", - "projectType": "application", - "targets": { - "e2e": { - "executor": "@nx/cypress:cypress", - "options": { - "cypressConfig": "apps/website-e2e/cypress.config.ts", - "devServerTarget": "website:serve", - "testingType": "e2e" - }, - "configurations": { - "production": { - "devServerTarget": "website:serve:production" - } - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": ["apps/website-e2e/**/*.{js,ts}"] - } - } - }, - "tags": [], - "implicitDependencies": ["website"] -} diff --git a/apps/website-e2e/src/e2e/app.cy.ts b/apps/website-e2e/src/e2e/app.cy.ts deleted file mode 100644 index a758d06db..000000000 --- a/apps/website-e2e/src/e2e/app.cy.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { getGreeting } from '../support/app.po'; - -describe('website', () => { - beforeEach(() => cy.visit('/')); - - it('should display welcome message', () => { - // Custom command example, see `../support/commands.ts` file - cy.login('my-email@something.com', 'myPassword'); - - // Function helper example, see `../support/app.po.ts` file - getGreeting().contains('Welcome website'); - }); -}); diff --git a/apps/website-e2e/src/fixtures/example.json b/apps/website-e2e/src/fixtures/example.json deleted file mode 100644 index 294cbed6c..000000000 --- a/apps/website-e2e/src/fixtures/example.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "Using fixtures to represent data", - "email": "hello@cypress.io" -} diff --git a/apps/website-e2e/src/support/app.po.ts b/apps/website-e2e/src/support/app.po.ts deleted file mode 100644 index 329342469..000000000 --- a/apps/website-e2e/src/support/app.po.ts +++ /dev/null @@ -1 +0,0 @@ -export const getGreeting = () => cy.get('h1'); diff --git a/apps/website-e2e/src/support/commands.ts b/apps/website-e2e/src/support/commands.ts deleted file mode 100644 index 310f1fa0e..000000000 --- a/apps/website-e2e/src/support/commands.ts +++ /dev/null @@ -1,33 +0,0 @@ -// *********************************************** -// This example commands.js shows you how to -// create various custom commands and overwrite -// existing commands. -// -// For more comprehensive examples of custom -// commands please read more here: -// https://on.cypress.io/custom-commands -// *********************************************** - -// eslint-disable-next-line @typescript-eslint/no-namespace -declare namespace Cypress { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - interface Chainable { - login(email: string, password: string): void; - } -} -// -// -- This is a parent command -- -Cypress.Commands.add('login', (email, password) => { - console.log('Custom command example: Login', email, password); -}); -// -// -- This is a child command -- -// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) -// -// -// -- This is a dual command -- -// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) -// -// -// -- This will overwrite an existing command -- -// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) diff --git a/apps/website-e2e/src/support/e2e.ts b/apps/website-e2e/src/support/e2e.ts deleted file mode 100644 index 3d469a6b6..000000000 --- a/apps/website-e2e/src/support/e2e.ts +++ /dev/null @@ -1,17 +0,0 @@ -// *********************************************************** -// This example support/index.js is processed and -// loaded automatically before your test files. -// -// This is a great place to put global configuration and -// behavior that modifies Cypress. -// -// You can change the location of this file or turn off -// automatically serving support files with the -// 'supportFile' configuration option. -// -// You can read more here: -// https://on.cypress.io/configuration -// *********************************************************** - -// Import commands.js using ES2015 syntax: -import './commands'; diff --git a/apps/website-e2e/tsconfig.json b/apps/website-e2e/tsconfig.json deleted file mode 100644 index cc509a730..000000000 --- a/apps/website-e2e/tsconfig.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "sourceMap": false, - "outDir": "../../dist/out-tsc", - "allowJs": true, - "types": ["cypress", "node"] - }, - "include": ["src/**/*.ts", "src/**/*.js", "cypress.config.ts"] -} diff --git a/apps/website/auto-api.ts b/apps/website/auto-api.ts new file mode 100644 index 000000000..0da123467 --- /dev/null +++ b/apps/website/auto-api.ts @@ -0,0 +1,158 @@ +import * as fs from 'fs'; +import { resolve } from 'path'; +import { ViteDevServer } from 'vite'; +import { default as Parser, Query } from 'tree-sitter'; +import { default as TS } from 'tree-sitter-typescript'; +const parser = new Parser(); + +/** +TO WHOM IT MAY CONCERN: + +if by some reason you need to refactor the query below and don't know where to starts, below are what I consider to be the must-know parts. + +1) Tree-Sitter query docs: https://tree-sitter.github.io/tree-sitter/using-parsers#query-syntax +1b) Put particular attention to the following sections: capturing nodes, wildcard nodes, and anchors + +2) Have a way of being able to see the tree-sitter AST in realtime. The ideal setup comes included in Neovim. In ex mode, simply run +the command below and you'll have the file's AST viewer open in realtime: InspectTree +**/ + +const query = new Query( + TS.tsx, + `declaration: (type_alias_declaration + name: (type_identifier) @subComponentName + (intersection_type + (object_type + + (comment) @comment + . + (property_signature + name: (_) @prop + type: (type_annotation (_) @type) + ) + ) + ) +) +`, +); +parser.setLanguage(TS.tsx); +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,...] & componentName comes from the dir +// subComponentName/type alias:[publicType,publicType,...] & subcomponent comes from the file under dir +// publicType:[{ comment,prop,type },{ comment,prop,type },...] & publicType comes from type inside file +// 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, +): SubComponents | undefined { + 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 tree = parser.parse(sourceCode); + const parsed: PublicType[] = []; + function topKey(obj: { [x: string]: any } | undefined) { + return obj ? Object.keys(obj)[0] : ''; + } + const matches = query.matches(tree.rootNode); + matches.forEach((match) => { + const last: PublicType = parsed[parsed.length - 1]; + let subComponentName = ''; + const parsedProps: ParsedProps = { comment: '', prop: '', type: '' }; + match.captures.forEach((lol) => { + //statetements are ordered as they appear in capture array + if (lol.name === 'subComponentName' && subComponentName != lol.node.text) { + subComponentName = lol.node.text; + } + if (lol.name === 'comment') { + //this removes the comment syntax + const justText = lol.node.text.replaceAll(/[/*]/g, ''); + parsedProps.comment = justText; + } + + if (lol.name === 'prop') { + parsedProps.prop = lol.node.text; + } + + if (lol.name === 'type') { + parsedProps.type = lol.node.text; + if (subComponentName === topKey(last)) { + last[topKey(last)].push(parsedProps); + } else { + parsed.push({ [subComponentName]: [parsedProps] }); + } + } + }); + }); + + const completeSubComponent: SubComponent = { [component_name[1]]: parsed }; + ref.push(completeSubComponent); + return ref; +} + +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/_state/component-statuses.ts b/apps/website/src/_state/component-statuses.ts index bff04db40..5894906dd 100644 --- a/apps/website/src/_state/component-statuses.ts +++ b/apps/website/src/_state/component-statuses.ts @@ -32,23 +32,22 @@ export const statusByComponent: ComponentKitsStatuses = { Separator: ComponentStatus.Beta, Skeleton: ComponentStatus.Beta, Tabs: ComponentStatus.Beta, + Toggle: ComponentStatus.Draft, + ToggleGroup: ComponentStatus.Draft, Textarea: ComponentStatus.Draft, }, headless: { - Accordion: ComponentStatus.Beta, - Carousel: ComponentStatus.Draft, - Collapsible: ComponentStatus.Beta, + Carousel: 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.Beta, + 'Toggle Group': ComponentStatus.Beta, Tooltip: ComponentStatus.Beta, }, }; diff --git a/apps/website/src/components/animations/caveats.tsx b/apps/website/src/components/animations/caveats.tsx new file mode 100644 index 000000000..e58c54c42 --- /dev/null +++ b/apps/website/src/components/animations/caveats.tsx @@ -0,0 +1,49 @@ +import { component$ } from '@builder.io/qwik'; +import { Note, NoteStatus } from '../note/note'; // Adjust the import path based on your structure + +export const TopLayerAnimationsCaveats = component$(() => { + return ( + + Important Caveats for Animating Discrete Properties + +
    +
  • + + Animating display and overlay: + +

    + The display property must be included in the transitions list to + ensure the element remains visible throughout the animation. The value flips + from none to block at 0% of the animation, ensuring + visibility for the entire duration. The  + overlay ensures the element stays in the top layer until the + animation completes. +

    +
    • +
  • + + Using transition-behavior: allow-discrete: + +

    + This property is essential when animating discrete properties like{' '} + display and overlay, which are not typically + animatable. It ensures smooth transitions for these discrete properties. +

    +
    • +
  • + + Setting Starting Styles with @starting-style: + +

    + CSS transitions are only triggered when a property changes on a visible + element. The  + @starting-style at-rule allows you to set initial styles (e.g.,{' '} + opacity and + transform) when the element first appears, ensuring that the + animation behaves predictably. +

    +
    • +
+ + ); +}); diff --git a/apps/website/src/components/animations/compatability.tsx b/apps/website/src/components/animations/compatability.tsx new file mode 100644 index 000000000..ff15fa2a4 --- /dev/null +++ b/apps/website/src/components/animations/compatability.tsx @@ -0,0 +1,22 @@ +import { component$ } from '@builder.io/qwik'; +import { Note, NoteStatus } from '../note/note'; // Adjust the import path based on your structure + +export const BrowserAnimationsCompatability = component$(() => { + return ( + +
+

+ Browser Compatability +

+

+ + Browser versions that do not support the popover API natively + {' '} + have known issues when trying to use animations or transitions. If you need to + support legacy versions of browsers, please be sure to test this functionality + independently. +

+
+ + ); +}); 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..b216be717 --- /dev/null +++ b/apps/website/src/components/api-table/auto-api.tsx @@ -0,0 +1,138 @@ +import { JSXOutput, component$, $, QRL, useTask$, useSignal } from '@builder.io/qwik'; +import { APITable, type APITableProps } from './api-table'; + +//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 = $(() => { + //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, index) => ( + + ))} + + ); + }, +); + +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) => { + const isObject = e.type.includes('{'); + const isUnion = e.type.includes('|'); + const isPopup = isObject || isUnion; + + return { + name: e.prop, + type: isObject ? 'object' : isUnion ? 'union' : e.type, + description: e.comment, + info: (isPopup && e.type) || undefined, + }; + }), + }; + 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/feature-list/feature-list.tsx b/apps/website/src/components/feature-list/feature-list.tsx index 87bce4830..6e276138c 100644 --- a/apps/website/src/components/feature-list/feature-list.tsx +++ b/apps/website/src/components/feature-list/feature-list.tsx @@ -68,7 +68,7 @@ export const FeatureList = component$((props: FeatureListProps) => { {!props.issues && ( Missing a feature? Check out the{' '} - + contributing guide {' '} and we'd be happy to review any relevant issues or PR's. Feel free to work on diff --git a/apps/website/src/components/mdx-components/index.tsx b/apps/website/src/components/mdx-components/index.tsx index 3a1d9e7ee..0e983b5ab 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'; @@ -10,6 +11,8 @@ import { KeyboardInteractionTable } from '../keyboard-interaction-table/keyboard import { Note } from '../note/note'; import { Showcase } from '../showcase/showcase'; import { StatusBanner } from '../status-banner/status-banner'; +import { TopLayerAnimationsCaveats } from '../animations/caveats'; +import { BrowserAnimationsCompatability } from '../animations/compatability'; export const components: Record = { p: component$>(({ ...props }) => { @@ -132,4 +135,7 @@ export const components: Record = { Note, StatusBanner, Showcase, + AutoAPI, + TopLayerAnimationsCaveats, + BrowserAnimationsCompatability, }; 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) => { <>