Skip to content

Commit a610439

Browse files
fblettnerfblettner
committed
Add documentation for all react components
1 parent 218ee04 commit a610439

File tree

127 files changed

+185381
-142
lines changed

Some content is hidden

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

127 files changed

+185381
-142
lines changed

‎docs/liberty/core/components/charts/bar.md

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
# BarChart Component
2+
3+
## Description
4+
The `BarChart` component is a customizable bar chart using Chart.js. It supports:
5+
- **Dynamic datasets**
6+
- **Custom colors**
7+
- **Grid configuration**
8+
- **X and Y axis customization**
9+
- **Multiple series support**
10+
11+
## Props
12+
| Prop | Type | Default | Description |
13+
|------------|------------------------------|---------|-------------|
14+
| `dataset` | `Record<string, any>[]` | - | Data source for the chart. |
15+
| `colors` | `string[]` | - | Colors for each data series. |
16+
| `grid` | `{ horizontal: boolean; vertical: boolean }` | `{ horizontal: true, vertical: true }` | Toggles grid lines. |
17+
| `xAxis` | `{ scaleType: string; data: string[]; label: string }[]` | - | X-axis configuration. |
18+
| `yAxis` | `{ label: string }[]` | - | Y-axis configuration. |
19+
| `series` | `{ dataKey: string; label: string }[]` | - | Defines the data series to be plotted. |
20+
21+
## Example Usage
22+
```tsx
23+
import { BarChart } from "liberty-core";
24+
25+
const dataset = [
26+
{ month: "Jan", revenue: 10000, profit: 3000 },
27+
{ month: "Feb", revenue: 12000, profit: 4000 },
28+
{ month: "Mar", revenue: 15000, profit: 5000 },
29+
];
30+
31+
export const BarChartExample = () => {
32+
return (
33+
<BarChart
34+
dataset={dataset}
35+
colors={["#1976d2", "#ff9800"]}
36+
grid={{ horizontal: true, vertical: false }}
37+
xAxis={[{ scaleType: "category", data: ["Jan", "Feb", "Mar"], label: "Month" }]}
38+
yAxis={[{ label: "Amount ($)" }]}
39+
series={[
40+
{ dataKey: "revenue", label: "Revenue" },
41+
{ dataKey: "profit", label: "Profit" },
42+
]}
43+
/>
44+
);
45+
};
46+
```
47+
48+
## Useful Links
49+
🔗 **GitHub Repository (Core):** [Liberty Core](https://github.com/fblettner/liberty-core/)
50+
🔗 **GitHub Repository (Test Project):** [Liberty Test](https://github.com/fblettner/liberty-test/)
51+
📖 **Live Documentation:** [Liberty Core Docs](https://docs.nomana-it.fr/liberty-core/)
52+
💖 **Sponsor & Support:** [Sponsor Liberty Core](https://github.com/sponsors/fblettner)

‎docs/liberty/core/components/charts/line.md

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
# LineChart Component
2+
3+
## Description
4+
The `LineChart` component provides a customizable line chart using Chart.js. It supports:
5+
- **Multiple datasets**
6+
- **Custom colors and grid configuration**
7+
- **Smooth line interpolation**
8+
- **Dual Y-axis support**
9+
- **Tooltip and legend customization**
10+
11+
## Props
12+
| Prop | Type | Default | Description |
13+
|------------|------------------------------|---------|-------------|
14+
| `dataset` | `Record<string, any>[]` | - | Data source for the chart. |
15+
| `colors` | `string[]` | - | Colors for each data series. |
16+
| `grid` | `{ horizontal: boolean; vertical: boolean }` | `{ horizontal: true, vertical: true }` | Toggles grid lines. |
17+
| `xAxis` | `{ scaleType: string; data: string[]; label: string }[]` | - | X-axis configuration. |
18+
| `yAxis` | `{ id: string; label: string }[]` | - | Y-axis configuration. |
19+
| `series` | `{ dataKey: string; label: string; yAxisKey?: string }[]` | - | Defines the data series to be plotted. |
20+
21+
## Example Usage
22+
```tsx
23+
import { LineChart } from "liberty-core";
24+
25+
const dataset = [
26+
{ month: "Jan", sales: 100, revenue: 200 },
27+
{ month: "Feb", sales: 150, revenue: 250 },
28+
{ month: "Mar", sales: 200, revenue: 300 },
29+
];
30+
31+
export const LineChartExample = () => {
32+
return (
33+
<LineChart
34+
dataset={dataset}
35+
colors={["#1976d2", "#ff9800"]}
36+
grid={{ horizontal: true, vertical: false }}
37+
xAxis={[{ scaleType: "category", data: ["Jan", "Feb", "Mar"], label: "Month" }]}
38+
yAxis={[{ id: "salesAxis", label: "Sales" }, { id: "revenueAxis", label: "Revenue" }]}
39+
series={[
40+
{ dataKey: "sales", label: "Sales", yAxisKey: "salesAxis" },
41+
{ dataKey: "revenue", label: "Revenue", yAxisKey: "revenueAxis" },
42+
]}
43+
/>
44+
);
45+
};
46+
```
47+
48+
## Useful Links
49+
🔗 **GitHub Repository (Core):** [Liberty Core](https://github.com/fblettner/liberty-core/)
50+
🔗 **GitHub Repository (Test Project):** [Liberty Test](https://github.com/fblettner/liberty-test/)
51+
📖 **Live Documentation:** [Liberty Core Docs](https://docs.nomana-it.fr/liberty-core/)
52+
💖 **Sponsor & Support:** [Sponsor Liberty Core](https://github.com/sponsors/fblettner)

‎docs/liberty/core/components/charts/pie.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# PieChart Component
2+
3+
## Description
4+
The `PieChart` component provides a customizable **Doughnut/Pie Chart** using Chart.js. It supports:
5+
- **Custom colors**
6+
- **Tooltip with percentage display**
7+
- **Legend positioning**
8+
- **Adaptive theming for light/dark modes**
9+
10+
## Props
11+
| Prop | Type | Default | Description |
12+
|------------|-----------------------|---------|-------------|
13+
| `data` | `{ value: number; label: string }[]` | - | The data to be displayed. |
14+
| `colors` | `string[]` | Default colors | Custom colors for segments. |
15+
16+
## Example Usage
17+
```tsx
18+
import { PieChart } from "liberty-core";
19+
20+
const chartData = [
21+
{ value: 40, label: "Product A" },
22+
{ value: 25, label: "Product B" },
23+
{ value: 20, label: "Product C" },
24+
{ value: 15, label: "Product D" },
25+
];
26+
27+
export const PieChartExample = () => {
28+
return (
29+
<PieChart
30+
data={chartData}
31+
colors={["#1976d2", "#ff9800", "#4CAF50", "#E91E63"]}
32+
/>
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/dialogs-overlays/confirmation.md

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# ConfirmationDialog Component
2+
3+
## Description
4+
The `ConfirmationDialog` component provides a standard confirmation popup with customizable actions.
5+
6+
## Props
7+
| Prop | Type | Default | Description |
8+
|------------|-------------|----------|--------------------------------------------------|
9+
| `open` | `boolean` | `false` | Controls whether the dialog is visible. |
10+
| `title` | `string` | `""` | The title of the confirmation dialog. |
11+
| `content` | `string` | `""` | The content message of the dialog. |
12+
| `onClose` | `() => void` | `undefined` | Callback function when the dialog is closed. |
13+
| `onAccept` | `() => void` | `undefined` | Callback function when the "Yes" button is clicked. |
14+
| `onDecline` | `() => void` | `undefined` | Callback function when the "No" button is clicked. |
15+
16+
## Example Usage
17+
```tsx
18+
import { ConfirmationDialog, Button } from "liberty-core";
19+
import { useState } from "react";
20+
21+
export const ConfirmationDialogExample = () => {
22+
const [open, setOpen] = useState(false);
23+
24+
return (
25+
<div>
26+
<Button onClick={() => setOpen(true)}>Open Confirmation Dialog</Button>
27+
<ConfirmationDialog
28+
open={open}
29+
title="Confirm Action"
30+
content="Are you sure you want to proceed?"
31+
onClose={() => setOpen(false)}
32+
onAccept={() => {
33+
alert("Accepted");
34+
setOpen(false);
35+
}}
36+
onDecline={() => {
37+
alert("Declined");
38+
setOpen(false);
39+
}}
40+
/>
41+
</div>
42+
);
43+
};
44+
```
45+
46+
## Useful Links
47+
🔗 **GitHub Repository (Core):** [Liberty Core](https://github.com/fblettner/liberty-core/)
48+
🔗 **GitHub Repository (Test Project):** [Liberty Test](https://github.com/fblettner/liberty-test/)
49+
📖 **Live Documentation:** [Liberty Core Docs](https://docs.nomana-it.fr/liberty-core/)
50+
💖 **Sponsor & Support:** [Sponsor Liberty Core](https://github.com/sponsors/fblettner)

‎docs/liberty/core/components/dialogs-overlays/dialog.md

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# Dialog Component
2+
3+
## Description
4+
The `Dialog` component is a modal dialog that appears over the main content. It supports customizable backdrop behavior, ESC key closing, and scroll options.
5+
6+
### Styled Subcomponents
7+
| Component | Description |
8+
|------------------|------------------------------------------------------|
9+
| `Dialog_Title` | The title of the dialog. |
10+
| `Dialog_Content` | The main content area of the dialog. |
11+
| `Dialog_Actions` | A section for placing action buttons. |
12+
13+
## Props
14+
| Prop | Type | Default | Description |
15+
|----------------------|-------------------------|------------|---------------------------------------------------|
16+
| `open` | `boolean` | `false` | Controls whether the dialog is visible. |
17+
| `onClose` | `() => void` | `undefined` | Callback function when the dialog is closed. |
18+
| `maxWidth` | `string` | `"600px"` | The maximum width of the dialog. |
19+
| `disableBackdropClick` | `boolean` | `false` | Prevents closing when clicking the backdrop. |
20+
| `closeOnEsc` | `boolean` | `true` | Allows closing the dialog by pressing ESC. |
21+
| `scroll` | `"paper" , "body"` | `"paper"` | Controls the scrolling behavior inside the dialog. |
22+
23+
## Example Usage
24+
```tsx
25+
import { Dialog, Button, Dialog_Title, Dialog_Content, Dialog_Actions } from "liberty-core";
26+
import { useState } from "react";
27+
import { t } from "i18next";
28+
import { LYCancelIcon } from "@ly_styles/icons";
29+
30+
export const DialogExample = () => {
31+
const [open, setOpen] = useState(false);
32+
33+
const handleClose = () => {
34+
setOpen(false);
35+
};
36+
37+
return (
38+
<div>
39+
<Button onClick={() => setOpen(true)}>Open Dialog</Button>
40+
<Dialog open={open} onClose={handleClose} maxWidth="500px" closeOnEsc>
41+
<Paper_Popup>
42+
<Dialog_Title>Dialog Title</Dialog_Title>
43+
<Dialog_Content>
44+
This is a simple dialog content area.
45+
</Dialog_Content>
46+
<Dialog_Actions>
47+
<Button variant="outlined" onClick={handleClose} startIcon={LYCancelIcon}>
48+
{t('button.close')}
49+
</Button>
50+
</Dialog_Actions>
51+
</Paper_Popup>
52+
</Dialog>
53+
</div>
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)

‎docs/liberty/core/components/dialogs-overlays/export.md

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
# Dialog Export Component
2+
3+
## Description
4+
The `DialogExport` component provides a modal dialog to select export options before exporting data. It allows users to configure:
5+
- **Headers**: Column name vs. column ID
6+
- **Columns**: Export all or only visible columns
7+
- **Rows**: Export all, visible, or selected rows
8+
9+
### Styled Subcomponents
10+
| Component | Description |
11+
|-------------------|--------------------------------------------------|
12+
| `ExportContent` | Provides the UI for export configuration. |
13+
| `Dialog_Title` | Displays the export dialog title. |
14+
| `Dialog_Content` | Holds the export configuration options. |
15+
| `Dialog_Actions` | Contains the accept and decline buttons. |
16+
17+
## Props
18+
| Prop | Type | Default | Description |
19+
|---------------|-------------------------------------|-----------|--------------------------------------------------|
20+
| `open` | `boolean` | `false` | Controls whether the dialog is visible. |
21+
| `exportType` | `EExportType` | `""` | Type of export (e.g., CSV, Excel, etc.). |
22+
| `onClose` | `() => void` | `undefined` | Callback for closing the dialog. |
23+
| `onAccept` | `() => void` | `undefined` | Callback for accepting export settings. |
24+
| `onDecline` | `() => void` | `undefined` | Callback for canceling export. |
25+
| `exportOptions` | `IExportOptions` | `{}` | Object containing export preferences. |
26+
| `setExportOptions` | `React.Dispatch<SetStateAction<IExportOptions>>` | `undefined` | Function to update export preferences. |
27+
28+
## Example Usage
29+
```tsx
30+
import { DialogExport, Button } from "liberty-core";
31+
import { useState } from "react";
32+
import { EExportType, IExportOptions } from "@ly_utils/commonUtils";
33+
34+
export const DialogExportExample = () => {
35+
const [open, setOpen] = useState(false);
36+
const [exportOptions, setExportOptions] = useState<IExportOptions>({
37+
header: "columnName",
38+
columns: "allColumns",
39+
rows: "allRows",
40+
});
41+
42+
const handleOpen = () => setOpen(true);
43+
const handleClose = () => setOpen(false);
44+
const handleAccept = () => {
45+
alert("Export confirmed!");
46+
setOpen(false);
47+
};
48+
const handleDecline = () => {
49+
alert("Export canceled!");
50+
setOpen(false);
51+
};
52+
53+
return (
54+
<div>
55+
<Button onClick={handleOpen}>Open Export Dialog</Button>
56+
<DialogExport
57+
open={open}
58+
exportType={EExportType.EXCEL}
59+
onClose={handleClose}
60+
onAccept={handleAccept}
61+
onDecline={handleDecline}
62+
exportOptions={exportOptions}
63+
setExportOptions={setExportOptions}
64+
/>
65+
</div>
66+
);
67+
};
68+
```
69+
70+
## Useful Links
71+
🔗 **GitHub Repository (Core):** [Liberty Core](https://github.com/fblettner/liberty-core/)
72+
🔗 **GitHub Repository (Test Project):** [Liberty Test](https://github.com/fblettner/liberty-test/)
73+
📖 **Live Documentation:** [Liberty Core Docs](https://docs.nomana-it.fr/liberty-core/)
74+
💖 **Sponsor & Support:** [Sponsor Liberty Core](https://github.com/sponsors/fblettner)

‎docs/liberty/core/components/dialogs-overlays/popper.md

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
# Popper Component
2+
3+
## Description
4+
The `Popper` component provides a floating UI container that appears next to an anchor element. It supports various placements and can be configured as a modal.
5+
6+
## Props
7+
8+
| Prop | Type | Default | Description |
9+
|--------------|------------------------------------------|----------------|-------------|
10+
| `open` | `boolean` | `false` | Controls the visibility of the popper. |
11+
| `anchorEl` | `HTMLElement | null | undefined` | `undefined` | The element that the popper is anchored to. |
12+
| `placement` | `"top" | "bottom" | "left" | "right" | "bottom-start" | "bottom-end"` | `"bottom-start"` | The position of the popper relative to the anchor. |
13+
| `disablePortal` | `boolean` | `false` | If true, the popper will not be rendered inside a portal. |
14+
| `modal` | `boolean` | `false` | If true, a backdrop is shown behind the popper, making it act like a modal. |
15+
| `onClose` | `() => void` | `undefined` | Callback triggered when the popper is closed. |
16+
17+
## Example Usage
18+
```tsx
19+
import { useState } from "react";
20+
import { Popper, Button } from "liberty-core";
21+
22+
export const PopperExample = () => {
23+
const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
24+
const [open, setOpen] = useState(false);
25+
26+
const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
27+
setAnchorEl(event.currentTarget);
28+
setOpen(true);
29+
};
30+
31+
const handleClose = () => {
32+
setOpen(false);
33+
};
34+
35+
return (
36+
<div>
37+
<Button onClick={handleOpen}>Open Popper</Button>
38+
39+
<Popper open={open} anchorEl={anchorEl} onClose={handleClose} placement="bottom-start">
40+
<div style={{ padding: "10px", background: "#fff", boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)", borderRadius: "8px" }}>
41+
This is a popper content.
42+
<Button onClick={handleClose}>Close</Button>
43+
</div>
44+
</Popper>
45+
</div>
46+
);
47+
};
48+
```
49+
50+
## Useful Links
51+
🔗 **GitHub Repository (Core):** [Liberty Core](https://github.com/fblettner/liberty-core/)
52+
🔗 **GitHub Repository (Test Project):** [Liberty Test](https://github.com/fblettner/liberty-test/)
53+
📖 **Live Documentation:** [Liberty Core Docs](https://docs.nomana-it.fr/liberty-core/)
54+
💖 **Sponsor & Support:** [Sponsor Liberty Core](https://github.com/sponsors/fblettner)

0 commit comments

Comments
 (0)