Nuanced Pterodactyl Monk

    @component-controls/components
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    Table of contents

    Overview

    Some of the guiding design goals for this library:

    • Use theme-ui/system-ui as an foundation for a react UI library.
    • As much as possible possible, avoid using components with css dependencies.

    Third-party libraries used in no particular order:

    List of components

    ActionBar

    a strip of actions to be attached to a container the action items contain the labels and click event handler actions can accept an order prop, and can also be superimposed

    ActionBar source code

    properties

    Name Type Description
    actions ActionItems collection of action items

    ActionContainer

    a boxed container with actions.

    ActionContainer source code

    properties

    Name Type Description
    actions ActionItem[] optional actions provided to the component
    paddingTop string | number padding at the top, to account for the absolute position of the ActionBar
    plain boolean if plain, skip the border and spacing around the children

    BlockContainer

    a collapsible block with a title. The title creates also an attribute id and an octicon for github style navigation.

    BlockContainer source code

    properties

    Name Type Description
    title string optional section title for the block.
    id string optional id to be used for the block if no id is provided, one will be calculated automatically from the title.
    collapsible boolean if false, will nothave a collapsible frame.
    sxStyle SystemStyleObject theme-ui styling object for Block Box

    Collapsible

    Animated expand/collapse container component

    Collapsible source code

    properties

    Name Type Description
    isOpen* boolean controlled open state
    animateOpacity boolean
    animationStateClasses AnimationStateClasses
    applyInlineTransitions boolean
    contentClassName string
    delay number
    duration number
    easing string
    height ReactText
    onAnimationEnd (props: { newHeight: number; }) => void
    onAnimationStart (props: { newHeight: number; }) => void

    ExternalLink

    Anchor link to an external url, adds the default target="_blank" rel="noopener noreferrer" props

    ExternalLink source code

    properties

    Name Type Description
    download any specifies that the target will be downloaded when a user clicks on the hyperlink.
    href string specifies the URL of the page the link goes to.
    hrefLang string specifies the language of the linked document.
    media string specifies what media/device the linked document is optimized for.
    ping string specifies a list of URLs to be notified if the user follows the hyperlink.
    type string specifies the media type of the linked document.
    referrerPolicy "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "unsafe-url" specifies which referrer to send.

    Markdown

    Markdown display component to compile and display markdown at run-time. Uses markdown-to-jsx to compile the markdown.

    Markdown source code

    properties

    Name Type Description
    children* string | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)>) | (string & ReactNodeArray) | (string & ReactPortal) the markdown source code is passed as a children pro.
    components { [key: string]: ComponentOverride<any, any>; a?: ComponentOverride<any, any>; br?: ComponentOverride<any, any>; button?: ComponentOverride<any, any>; ... 27 more ...; ul?: ComponentOverride<...>; } components to customize the markdown display.

    Popover

    A Popover container that is triggered by a click/hover event. Used to display enhanced information that could not fit into the main scren.

    Popover source code

    Source

    Syntax highliting source code component. Uses prism for the actual source display.

    Source source code

    properties

    Name Type Description
    actions ActionItem[] optional actions provided to the component
    paddingTop string | number padding at the top, to account for the absolute position of the ActionBar
    plain boolean if plain, skip the border and spacing around the children
    children string | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)>) | (string & ReactNodeArray) | (string & ReactPortal) source code to be displayed.
    theme PrismTheme optional `PrismTheme` theme provided to the component. Themes can be imported from `prism-react-renderer/themes`.
    language Language source lnguage used, by default "jsx".
    renderFn (props: RenderProps, other: { theme: PrismTheme; }) => ReactNode custom function to render the source code.
    dark boolean used to specify a "dark" color theme - applcable only if no custom theme prop is provided. if dark: true, duotoneDark theme is used. if dark: false, duotoneLight theme is used.
    style any css styles for the container.
    as any syntax container as element. Can be used as `div` or `span`.

    Subtitle

    h3 level heading with faded text and font-weight 400.

    Subtitle source code

    properties

    Name Type Description
    children string | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)>) | (string & ReactNodeArray) | (string & ReactPortal) text to be displayed in the component.
    as "h1" | "h2" | "h3" | "h4" | "h5" DOM node type to render as. By default h3.
    ref ((instance: HTMLHeadingElement) => void) | RefObject<HTMLHeadingElement>

    SyntaxHighlighter

    Syntax highlighter component. Uses prism for the actual source display.

    SyntaxHighlighter source code

    properties

    Name Type Description
    children string | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)>) | (string & ReactNodeArray) | (string & ReactPortal) source code to be displayed.
    theme PrismTheme optional `PrismTheme` theme provided to the component. Themes can be imported from `prism-react-renderer/themes`.
    language Language source lnguage used, by default "jsx".
    renderFn (props: RenderProps, other: { theme: PrismTheme; }) => ReactNode custom function to render the source code.
    dark boolean used to specify a "dark" color theme - applcable only if no custom theme prop is provided. if dark: true, duotoneDark theme is used. if dark: false, duotoneLight theme is used.
    style any css styles for the container.
    as any syntax container as element. Can be used as `div` or `span`.

    Table

    Table component. Uses react-table to display the data. Can be grouped, filtered, sorted. Themed with theme-ui for consistency.

    Table source code

    properties

    Name Type Description
    columns* Column<{}>[] the colmns object as an array.
    data any[] array of data rows.
    header boolean show or hide the header element.
    sorting boolean enable.disable sorting.
    filtering boolean enable/disable filtering.
    itemsLabel string string label for 'items' - used in the filter placeholder and grouping header.
    groupBy string[] field to be grouped by.
    hiddenColumns string[] list of columns to hide.
    expanded { [key: string]: boolean; } object listing the initially expanded rows.
    skipPageReset boolean reset state update while update table data

    Tab

    Tab heading - you should specify the title/label string as the children property. To be created inside the <TabList /> component through the children prop.

    Tab source code

    TabList

    Container for <Tab /> headings, to be created inside the <Tabs /> component. The list of <Tab /> components should be passed as the children prop.

    TabList source code

    TabPanel

    Panel body container, to be created inside the <Tabs /> component through the children prop.

    TabPanel source code

    Tabs

    Create tabs and multi-page ui layouts. Uses react-tabs component.

    Tabs source code

    Title

    Title source code

    properties

    Name Type Description
    children string | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)>) | (string & ReactNodeArray) | (string & ReactPortal) text to be displayed in the component.
    ref ((instance: HTMLHeadingElement) => void) | RefObject<HTMLHeadingElement>

    Toggle

    Toggle components can be used to edit boolean values. Uses react-switch component.

    Toggle source code

    properties

    Name Type Description
    label string optional label to be displayed alongside the toggle

    Zoom

    zooming transform component

    Zoom source code

    properties

    Name Type Description
    scale number default scale

    Keywords

    none

    Install

    npm i @component-controls/components@1.0.1

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    127 kB

    Total Files

    60

    Last publish

    Collaborators

    • atanasster