Serverkit ide library

Installation

You can install this package via npm:

npm install serverkit-ide-lib

Summary

• Installation: Instructions for installing serverkit-ide-lib.
• Usage: How to use Theme in an app, wrapping the entire application.
• Component Examples in the example folder, each with a brief description, making it easier to locate and understand how to use each component.

Dialog Component

A Dialog component based on Radix UI's Dialog system, providing customizable content, layout, and controls.

Usage

Here's how to use the Dialog component, including examples of common props like isOpen, onClose, and title:

interface DialogProps {
    isOpen: boolean;
    onClose: () => void;
    title?: string | React.ReactNode;
    children: React.ReactNode;
    footer?: React.ReactNode;
    header?: React.ReactNode;
    body?: React.ReactNode;
    size?: 1 | 2 | 3 | 4 | 5;
    showCloseIcon?: boolean;
}

      <Button variant="classic" onClick={() => setDialogOpen(true)}>
        Open Dialog
      </Button>

      <Dialog
        isOpen={isDialogOpen}
        onClose={() => setDialogOpen(false)}
        title="Sample Dialog"
        footer={
          <Button variant="classic" onClick={() => setDialogOpen(false)}>
            Close
          </Button>
        }
        size={2}
        showCloseIcon={true}
      >
        <p>This is the dialog content.</p>
      </Dialog>

Button Component

A Button component based on Radix UI's Button system, supporting all Radix UI Button props.

Usage

Import and use the Button component in your app:

<Flex gap={"3"}>
  <Button variant="classic" onClick={() => setDialogOpen(true)}>
    Button
  </Button>
  <Button variant="surface" onClick={() => setDialogOpen(true)}>
    Button
  </Button>
</Flex>

Badge Component

A Badge component based on Radix UI's Badge system, supporting all Radix UI Badge props.

Usage

<Badge size={"3"} color="orange" variant="soft" children="Badge" />

Toast Component

A Toast component based on react-toastify

Usage

Props {
  content: string,
  type: "info" | "success" | "warning" | "error" = "info"
}

<Button onPress={()=> showToast('Toast conent','success')}>Show toast</Button>