serverkit-ide-lib v1.0.32
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>
10 months ago
10 months ago
10 months ago
10 months ago
8 months ago
8 months ago
9 months ago
9 months ago
10 months ago
8 months ago
8 months ago
9 months ago
9 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
6 months ago
7 months ago
7 months ago
9 months ago
10 months ago
9 months ago
10 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago