Skip to content

Commit 218ee04

Browse files
fblettnerfblettner
committed
Add more documentation for liberty core
1 parent a9547be commit 218ee04

File tree

53 files changed

+16853
-7
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+16853
-7
lines changed

‎docs/liberty/core/components/ui-elements/alert-message.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# AlertMessage Component
2+
3+
## Description
4+
The `AlertMessage` component is a wrapper around the `Alert` component that provides automatic dismissal for non-error messages.
5+
6+
## Props
7+
| Prop | Type | Default | Description |
8+
|-------------|-------------------|----------|-----------------------------------------------|
9+
| `open` | `boolean` | `false` | Controls whether the alert is visible. |
10+
| `severity` | `"success" , "info" , "warning" , "error"` | `"info"` | Defines the severity of the alert. |
11+
| `message` | `string` | `""` | The text displayed inside the alert. |
12+
| `onClose` | `() => void` | `undefined` | Callback function triggered when the alert is closed. |
13+
14+
## Behavior
15+
- If the `severity` is not **error**, the alert will **automatically close** after **3 seconds**.
16+
- Clicking the close button will manually dismiss the alert.
17+
18+
## Example Usage
19+
```tsx
20+
import { AlertMessage } from "liberty-core";
21+
import { useState } from "react";
22+
23+
export const AlertMessageExample = () => {
24+
const [open, setOpen] = useState(true);
25+
26+
return (
27+
<div>
28+
<AlertMessage open={open} severity={ESeverity.success} message="This is a success alert!" onClose={() => setOpen(false)} />
29+
<AlertMessage open={true} severity={ESeverity.info} message="This is an info alert!" onClose={() => console.log("Closed")} />
30+
<AlertMessage open={true} severity={ESeverity.warning} message="This is a warning alert!" onClose={() => console.log("Closed")} />
31+
<AlertMessage open={true} severity={ESeverity.error} message="This is an error alert!" onClose={() => console.log("Closed")} />
32+
</div>
33+
);
34+
};
35+
```
36+
37+
## Useful Links
38+
🔗 **GitHub Repository (Core):** [Liberty Core](https://github.com/fblettner/liberty-core/)
39+
🔗 **GitHub Repository (Test Project):** [Liberty Test](https://github.com/fblettner/liberty-test/)
40+
📖 **Live Documentation:** [Liberty Core Docs](https://docs.nomana-it.fr/liberty-core/)
41+
💖 **Sponsor & Support:** [Sponsor Liberty Core](https://github.com/sponsors/fblettner)

‎docs/liberty/core/components/ui-elements/alert.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# Alert Component
2+
3+
## Description
4+
The `Alert` component provides a styled alert message with various severity levels. It can also be dismissible.
5+
6+
## Props
7+
| Prop | Type | Default | Description |
8+
|-------------|-------------------|----------|-----------------------------------------------|
9+
| `variant` | `"success" , "info" , "warning" , "error"` | `"info"` | Defines the style and icon of the alert. |
10+
| `dismissible` | `boolean` | `false` | Allows the alert to be dismissed. |
11+
| `onClose` | `() => void` | `undefined` | Callback function when the alert is closed. |
12+
13+
## Example Usage
14+
```tsx
15+
import { Alert } from "liberty-core";
16+
17+
export const AlertExample = () => {
18+
return (
19+
<div>
20+
<Alert variant="success">This is a success alert!</Alert>
21+
<Alert variant="info">This is an info alert.</Alert>
22+
<Alert variant="warning" dismissible onClose={() => alert("Alert closed!")}>
23+
This is a dismissible warning alert.
24+
</Alert>
25+
<Alert variant="error">This is an error alert.</Alert>
26+
</div>
27+
);
28+
};
29+
```
30+
31+
## Useful Links
32+
🔗 **GitHub Repository (Core):** [Liberty Core](https://github.com/fblettner/liberty-core/)
33+
🔗 **GitHub Repository (Test Project):** [Liberty Test](https://github.com/fblettner/liberty-test/)
34+
📖 **Live Documentation:** [Liberty Core Docs](https://docs.nomana-it.fr/liberty-core/)
35+
💖 **Sponsor & Support:** [Sponsor Liberty Core](https://github.com/sponsors/fblettner)

‎docs/liberty/core/components/ui-elements/button.md

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# Button Component
2+
3+
## Description
4+
The `Button` component provides a customizable button with multiple variants and props.
5+
It supports different styles, icons, full-width mode, and disabled states.
6+
7+
## Props
8+
| Prop | Type | Description |
9+
|--------------|------------------------------|--------------------------------------------------|
10+
| `variant` | `"contained", "outlined", "text"` | Defines the button style |
11+
| `fullWidth` | `boolean` | If true, the button spans the full container width |
12+
| `disabled` | `boolean` | If true, the button is disabled |
13+
| `startIcon` | `ReactNode, React.ElementType` | Icon displayed before button text |
14+
| `endIcon` | `ReactNode, React.ElementType` | Icon displayed after button text |
15+
| `color` | `string` | Custom color for the button text |
16+
| `href` | `string` | If provided, renders the button as a link |
17+
| `target` | `"_blank", "_self", "_parent", "_top"` | Defines link target behavior |
18+
| `rel` | `string` | Specifies the relationship between the link and target |
19+
| `badgeContent` | `ReactNode` | Adds a small badge (for notifications, counts, etc.) |
20+
| `badgeColor` | `string` | Defines badge background color |
21+
22+
## Example Usage
23+
```tsx
24+
import { Button } from "liberty-core";
25+
import { FaCheck } from "react-icons/fa";
26+
27+
export const ButtonExample = () => {
28+
return (
29+
<>
30+
{/* Default Contained Button */}
31+
<Button variant="contained" onClick={() => alert("Contained Button Clicked")}>
32+
Contained Button
33+
</Button>
34+
35+
{/* Outlined Button */}
36+
<Button variant="outlined" color="secondary" onClick={() => alert("Outlined Button Clicked")}>
37+
Outlined Button
38+
</Button>
39+
40+
{/* Button with Icon */}
41+
<Button startIcon={<FaCheck />} variant="contained">
42+
With Icon
43+
</Button>
44+
45+
{/* Disabled Button */}
46+
<Button disabled>Disabled Button</Button>
47+
48+
{/* Full Width Button */}
49+
<Button fullWidth variant="contained">Full Width Button</Button>
50+
</>
51+
);
52+
};
53+
```
54+
55+
## Useful Links
56+
🔗 **GitHub Repository (Core):** [Liberty Core](https://github.com/fblettner/liberty-core/)
57+
🔗 **GitHub Repository (Test Project):** [Liberty Test](https://github.com/fblettner/liberty-test/)
58+
📖 **Live Documentation:** [Liberty Core Docs](https://docs.nomana-it.fr/liberty-core/)
59+
💖 **Sponsor & Support:** [Sponsor Liberty Core](https://github.com/sponsors/fblettner)

‎docs/liberty/core/components/ui-elements/card.md

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# Card Component
2+
3+
## Description
4+
The `Card` component is a versatile container that can display structured content, such as headers, actions, and clickable areas.
5+
6+
## Props
7+
### `Card`
8+
| Prop | Type | Default | Description |
9+
|------------|-------------------|----------|--------------------------------------------------|
10+
| `isSelected` | `boolean` | `false` | Adds a selected state style to the card. |
11+
12+
### `CardHeader`
13+
| Prop | Type | Default | Description |
14+
|------------|-------------------|----------|--------------------------------------------------|
15+
| `title` | `string` | `""` | The title displayed at the top of the card. |
16+
| `action` | `ReactNode` | `null` | Additional action elements (e.g., buttons). |
17+
18+
### `CardContent`
19+
| Prop | Type | Default | Description |
20+
|------------|-------------------|----------|--------------------------------------------------|
21+
| `children` | `ReactNode` | `null` | Content inside the card body. |
22+
23+
### `CardActionArea`
24+
| Prop | Type | Default | Description |
25+
|------------|-------------------|----------|--------------------------------------------------|
26+
| `onClick` | `() => void` | `undefined` | Callback when the area is clicked. |
27+
| `disabled` | `boolean` | `false` | Disables the action area. |
28+
| `href` | `string` | `""` | Optional link instead of a button. |
29+
| `target` | `"_blank" , "_self" , "_parent" , "_top"` | `undefined` | Specifies how the link opens. |
30+
31+
### `CardActions`
32+
| Prop | Type | Default | Description |
33+
|------------|-------------------|----------|--------------------------------------------------|
34+
| `justifyContent` | `"flex-start" , "center" , "flex-end" , "space-between"` | `"flex-end"` | Controls the alignment of action buttons. |
35+
36+
## Example Usage
37+
```tsx
38+
import { Card, CardHeader, CardContent, CardActionArea, CardActions, Button } from "liberty-core";
39+
40+
export const CardExample = () => {
41+
return (
42+
<Card isSelected={true}>
43+
<CardHeader title="Card Title" action={<Button variant="text">Edit</Button>} />
44+
<CardContent>
45+
This is the content inside the card. You can add text, images, or other elements here.
46+
</CardContent>
47+
<CardActionArea onClick={() => alert("Card Clicked!")}>
48+
Clickable Area
49+
</CardActionArea>
50+
<CardActions>
51+
<Button variant="contained" onClick={() => alert("Action Clicked!")}>Action</Button>
52+
</CardActions>
53+
</Card>
54+
);
55+
};
56+
```
57+
58+
## Useful Links
59+
🔗 **GitHub Repository (Core):** [Liberty Core](https://github.com/fblettner/liberty-core/)
60+
🔗 **GitHub Repository (Test Project):** [Liberty Test](https://github.com/fblettner/liberty-test/)
61+
📖 **Live Documentation:** [Liberty Core Docs](https://docs.nomana-it.fr/liberty-core/)
62+
💖 **Sponsor & Support:** [Sponsor Liberty Core](https://github.com/sponsors/fblettner)

‎mkdocs.yml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,12 @@ nav:
6060
- Themes: liberty/core/services/themes.md
6161
- Error Boundary: liberty/core/services/error-boundary.md
6262
- Translations: liberty/core/services/translations.md
63+
- Core Components:
64+
- UI Elements:
65+
- Alert: liberty/core/components/ui-elements/alert.md
66+
- AlertMessage: liberty/core/components/ui-elements/alert-message.md
67+
- Button: liberty/core/components/ui-elements/button.md
68+
- Card: liberty/core/components/ui-elements/card.md
6369
- API Documentation: liberty/api/liberty-api.md
6470
- Release Notes: liberty/release-notes.md
6571
- Issues: liberty/issues.md

0 commit comments

Comments
 (0)