Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

API Reference: UI: Explore Component API #6444

Merged
merged 109 commits into from
Nov 8, 2022
Merged

API Reference: UI: Explore Component API #6444

merged 109 commits into from
Nov 8, 2022

Conversation

luvkapur
Copy link
Member

@luvkapur luvkapur commented Sep 12, 2022

Proposed Changes

  • APIReferenceUIRuntime: UI Runtime that extends the Component UI to add a new API Reference Tab, and allows users to override default renderers for each API node
  • APIReferencePage: Component UI Tab that renders the entire API for a given component version
  • APIExplorer: An API file tree, grouped by Type (Classes, Enums, Functions, Interfaces, Variables, etc). Allows users to explore and navigate to a specific API node
  • Default API Node Renderers: Render a specific API Node
    • classRenderer
    • typeRenderer
    • interfaceRenderer
    • variableRenderer
    • functionRenderer
    • enumRenderer
    • unresolvedRenderer
    • typeRefRenderer
    • typeIntersectionRenderer
    • typeUnionRenderer
    • parameterRenderer
    • typeLiteralRenderer
    • inferenceTypeRenderer
    • typeArrayRenderer

Screen Shot 2022-11-07 at 1 52 01 PM

Screen Shot 2022-11-07 at 1 52 42 PM

Screen Shot 2022-11-07 at 1 53 03 PM

@luvkapur luvkapur changed the title schema ui - add components structure API Reference: UI: Explore Component API Sep 12, 2022
workspace.jsonc Outdated Show resolved Hide resolved
davidfirst
davidfirst previously approved these changes Nov 1, 2022
@@ -0,0 +1 @@
export * from './table-row';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please dont *

flex-direction: column;
overflow: auto;
height: 100%;
font-size: 14px;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use css vars

export function useUpdatedUrlFromQuery(queryParams: APIRefQueryParams): string {
const query = useQuery();
const location = useLocation() || { pathname: '/' };
// @ts-ignore
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

try to remove

width: 100%;
}
.apiNodeDetailsComment {
font-size: var(--bit-p-xs);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fallback

}
.apiNodeDetailsLocationContainer {
display: flex;
flex-direction: row;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

row by default

@@ -0,0 +1,145 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

?

@@ -0,0 +1,49 @@
@import '~@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

seems to be copy pasted from split pane.
can we reuse the original component? or even its shared css?

import { ConstructorSchema, SchemaNode } from '@teambit/semantics.entities.semantic-schema';

export function transformSignature({ __schema, signature }: SchemaNode): string | undefined {
let displaySignature: string | undefined;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we just return the value instead of mutating displaySignature?

@@ -10,6 +10,7 @@ export const BasicButton = () => {
/**
* example of passing a JSX Element as a parameter
*/
// eslint-disable-next-line react/prop-types
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

?

@@ -12,6 +12,7 @@
line-height: 1.2em;
padding-right: 8px;
font-size: var(--bit-p-xs);
line-height: 16px;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you already have line height. please remove this

@luvkapur luvkapur enabled auto-merge (squash) November 8, 2022 20:43
@luvkapur luvkapur merged commit 1a39ce7 into master Nov 8, 2022
@luvkapur luvkapur deleted the ui/api-reference branch November 8, 2022 21:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants