Skip to content

Commit ec2cd59

Browse files
fblettnerfblettner
committed
Document all styled elements
1 parent 8381d66 commit ec2cd59

122 files changed

Lines changed: 87910 additions & 14 deletions

File tree

Some content is hidden

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

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

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
# Styled Card Components
2+
3+
## Description
4+
The `Card` component in Liberty Core provides a customizable UI container with support for elevation, transitions, and interactions. The framework also includes multiple predefined `Card` components designed for specific use cases.
5+
6+
## Props
7+
| Prop | Type | Default | Description |
8+
|-----------------|-------------------|----------|-----------------------------------------------|
9+
| `variant` | `"outlined", "elevated"` | `"outlined"` | Defines the card's border and elevation. |
10+
| `isSelected` | `boolean` | `false` | Highlights the card when selected. |
11+
| `elevation` | `number` | `1` | Applies Material-like shadow elevation. |
12+
| `onClick` | `() => void` | `undefined` | Callback function triggered when clicked. |
13+
14+
## Example Usage
15+
16+
### Basic Styled Card
17+
```tsx
18+
import { Card } from '@nomana-it/liberty-core';
19+
20+
export const StyledCardExample = () => {
21+
return (
22+
<Card elevation={2}>
23+
<CardContent>
24+
This is a styled card with elevation.
25+
</CardContent>
26+
</Card>
27+
);
28+
};
29+
```
30+
31+
---
32+
33+
# Predefined Styled Cards
34+
35+
Liberty Core provides a collection of predefined styled `Card` components to simplify UI development.
36+
37+
### **General Styled Cards**
38+
- `Card_AppsLogin`
39+
- `Card_Dashboard`
40+
- `CardActionArea_FormsTools`
41+
42+
### **Detailed Predefined Cards**
43+
44+
#### **Card_AppsLogin**
45+
A login card with a hover effect and primary color selection.
46+
47+
```tsx
48+
import { Card_AppsLogin } from '@nomana-it/liberty-core';
49+
50+
<Card_AppsLogin isSelected={true}>
51+
<CardContent>Login Card</CardContent>
52+
</Card_AppsLogin>
53+
```
54+
55+
#### **Card_Dashboard**
56+
A styled dashboard card with a border and flex support.
57+
58+
```tsx
59+
import { Card_Dashboard } from '@nomana-it/liberty-core';
60+
61+
<Card_Dashboard>
62+
<CardContent>Dashboard Content</CardContent>
63+
</Card_Dashboard>
64+
```
65+
66+
#### **CardActionArea_FormsTools**
67+
An interactive card action area for form tools.
68+
69+
```tsx
70+
import { CardActionArea_FormsTools } from '@nomana-it/liberty-core';
71+
72+
<CardActionArea_FormsTools>
73+
<CardContent>Click Me</CardContent>
74+
</CardActionArea_FormsTools>
75+
```
76+
77+
## Useful Links
78+
🔗 **GitHub Repository (Core):** [Liberty Core](https://github.com/fblettner/liberty-core/)
79+
🔗 **GitHub Repository (Test Project):** [Liberty Test](https://github.com/fblettner/liberty-test/)
80+
📖 **Live Documentation:** [Liberty Core Docs](https://docs.nomana-it.fr/liberty-core/)
81+
💖 **Sponsor & Support:** [Sponsor Liberty Core](https://github.com/sponsors/fblettner)

‎docs/liberty/core/components/styled-elements/dialog.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
# Styled Dialog Components
2+
3+
## Description
4+
The `Dialog` components provide structured elements for building modal dialogs with proper styling, responsiveness, and accessibility.
5+
6+
## Props
7+
| Prop | Type | Default | Description |
8+
|-----------------|-------------------|----------|-----------------------------------------------|
9+
| `variant` | `"primary", "secondary"` | `"primary"` | Defines the typography variant for the title. |
10+
| `fontSize` | `string, number` | `18px` | Defines the font size of the title. |
11+
| `fontWeight` | `string, number` | `bold` | Sets the font weight of the title. |
12+
| `background` | `string` | `theme.background.default` | Background color of the dialog content or actions. |
13+
| `padding` | `string, number` | `theme.spacing(2)` | Defines padding for dialog components. |
14+
| `borderTop` | `string` | `theme.palette.divider` | Adds a separator on top of the actions container. |
15+
| `overflowY` | `string` | `auto` | Enables vertical scrolling for long content. |
16+
17+
## Example Usage
18+
19+
### Basic Dialog Title
20+
```tsx
21+
import { Dialog_Title } from '@nomana-it/liberty-core';
22+
23+
export const DialogTitleExample = () => {
24+
return (
25+
<Dialog_Title>
26+
Dialog Header
27+
</Dialog_Title>
28+
);
29+
};
30+
```
31+
32+
---
33+
34+
# Predefined Styled Dialog Components
35+
36+
Liberty Core provides a collection of predefined styled `Dialog` components to simplify modal UI development.
37+
38+
### **General Styled Dialog Components**
39+
- `Dialog_Title`
40+
- `Dialog_Content`
41+
- `Dialog_Actions`
42+
43+
### **Detailed Predefined Components**
44+
45+
#### **Dialog_Title**
46+
A styled typography component for dialog headers.
47+
48+
```tsx
49+
import { Dialog_Title } from '@nomana-it/liberty-core';
50+
51+
<Dialog_Title>
52+
Dialog Header
53+
</Dialog_Title>
54+
```
55+
56+
#### **Dialog_Content**
57+
A scrollable container for dialog content.
58+
59+
```tsx
60+
import { Dialog_Content } from '@nomana-it/liberty-core';
61+
62+
<Dialog_Content>
63+
This is the content inside a dialog.
64+
</Dialog_Content>
65+
```
66+
67+
#### **Dialog_Actions**
68+
A flex container for dialog action buttons.
69+
70+
```tsx
71+
import { Dialog_Actions } from '@nomana-it/liberty-core';
72+
import { Button } from '@nomana-it/liberty-core';
73+
74+
<Dialog_Actions>
75+
<Button variant="outlined">Cancel</Button>
76+
<Button variant="contained">Confirm</Button>
77+
</Dialog_Actions>
78+
```
79+
80+
## Useful Links
81+
🔗 **GitHub Repository (Core):** [Liberty Core](https://github.com/fblettner/liberty-core/)
82+
🔗 **GitHub Repository (Test Project):** [Liberty Test](https://github.com/fblettner/liberty-test/)
83+
📖 **Live Documentation:** [Liberty Core Docs](https://docs.nomana-it.fr/liberty-core/)
84+
💖 **Sponsor & Support:** [Sponsor Liberty Core](https://github.com/sponsors/fblettner)

‎docs/liberty/core/components/styled-elements/div.md‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,4 +127,11 @@ Liberty Core provides a collection of predefined styled `Div` components to simp
127127
- `Div_AppsLayout`
128128
- `Div_AppsTabsHeader`
129129
- `Div_AppsDialogTabPanel`
130-
```
130+
```
131+
132+
133+
## Useful Links
134+
🔗 **GitHub Repository (Core):** [Liberty Core](https://github.com/fblettner/liberty-core/)
135+
🔗 **GitHub Repository (Test Project):** [Liberty Test](https://github.com/fblettner/liberty-test/)
136+
📖 **Live Documentation:** [Liberty Core Docs](https://docs.nomana-it.fr/liberty-core/)
137+
💖 **Sponsor & Support:** [Sponsor Liberty Core](https://github.com/sponsors/fblettner)

‎docs/liberty/core/components/styled-elements/form.md‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
# Styled Form Components
2+
3+
## Description
4+
The `Form` components provide styled wrappers for HTML forms, ensuring consistent spacing and layout in authentication pages and user input sections.
5+
6+
## Props
7+
| Prop | Type | Default | Description |
8+
|-----------------|-------------------|----------|-----------------------------------------------|
9+
| `width` | `string | number` | `100%` | Defines the form width to ensure proper responsiveness. |
10+
| `marginTop` | `string | number` | `theme.spacing(1)` | Sets the top margin for spacing and alignment. |
11+
12+
## Example Usage
13+
14+
### Basic Login Form
15+
```tsx
16+
import { Form_Login } from '@nomana-it/liberty-core';
17+
18+
export const LoginFormExample = () => {
19+
return (
20+
<Form_Login>
21+
<Div_AppsLogin>
22+
<Input_White
23+
variant="standard"
24+
required
25+
fullWidth
26+
id="userid"
27+
label={t("login.userid")}
28+
name="user"
29+
autoComplete="user"
30+
autoFocus
31+
/>
32+
</Div_AppsLogin>
33+
<Div_AppsLogin>
34+
<Input_White
35+
variant="standard"
36+
required
37+
fullWidth
38+
name="password"
39+
label={t("login.password")}
40+
type="password"
41+
id="password"
42+
autoComplete="off"
43+
/>
44+
</Div_AppsLogin>
45+
<Button_Login type="submit" fullWidth variant="contained">
46+
{t("login.loginButton")}
47+
</Button_Login>
48+
</Form_Login>
49+
);
50+
};
51+
```
52+
53+
---
54+
55+
# Predefined Styled Form Components
56+
57+
Liberty Core provides predefined styled `form` components to simplify UI development.
58+
59+
### **General Styled Forms**
60+
- `Form_Login`
61+
62+
```
63+
64+
## Useful Links
65+
🔗 **GitHub Repository (Core):** [Liberty Core](https://github.com/fblettner/liberty-core/)
66+
🔗 **GitHub Repository (Test Project):** [Liberty Test](https://github.com/fblettner/liberty-test/)
67+
📖 **Live Documentation:** [Liberty Core Docs](https://docs.nomana-it.fr/liberty-core/)
68+
💖 **Sponsor & Support:** [Sponsor Liberty Core](https://github.com/sponsors/fblettner)

‎docs/liberty/core/components/styled-elements/global-styles.md‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
# Global Styles
2+
3+
## Description
4+
The `GlobalStyles` component applies system-wide styles using `@emotion/react`'s `Global` API. These styles ensure consistent typography, spacing, and UI appearance across the application.
5+
6+
## Features
7+
- **Box-Sizing Normalization:** Ensures that all elements respect the `border-box` model.
8+
- **Scrollbar Customization:** Modifies the appearance of scrollbars for a more modern look.
9+
- **Typography and Layout:** Applies a consistent font, line-height, and color scheme.
10+
- **Global Reset:** Removes default margin, padding, and styles from common HTML elements.
11+
- **Accessibility Improvements:** Ensures proper text contrast and smooth font rendering.
12+
13+
---
14+
15+
## Applied Styles
16+
17+
### **Box-Sizing**
18+
All elements, including `::before` and `::after`, inherit the `border-box` model for better layout consistency.
19+
20+
### **Scrollbar Customization**
21+
- Width and height adjustments for both vertical and horizontal scrollbars.
22+
- Styled scrollbar track, thumb, and corner to match the theme.
23+
- Firefox-specific styles using `scrollbar-width` and `scrollbar-color`.
24+
25+
### **Typography & Layout**
26+
- Applies a default font stack: `Roboto, Helvetica, Arial, sans-serif`.
27+
- Uses a dynamic color scheme based on the theme (light/dark mode).
28+
- Enhances font rendering for better readability.
29+
30+
### **Element Reset**
31+
- Removes default padding and margin from key HTML elements.
32+
- Normalizes list styles, anchor tags, tables, and headers.
33+
34+
---
35+
36+
## Example Usage
37+
38+
### Applying Global Styles in the Application
39+
```tsx
40+
import GlobalStyles from "@nomana-it/liberty-core/styles/GlobalStyles";
41+
42+
export const App = () => {
43+
return (
44+
<>
45+
<GlobalStyles />
46+
<div>
47+
<h1>Welcome to Liberty Core</h1>
48+
<p>This app uses global styles for consistency.</p>
49+
</div>
50+
</>
51+
);
52+
};
53+
```
54+
55+
---
56+
57+
## **Styling Details**
58+
59+
| CSS Property | Purpose |
60+
|------------------------------|---------|
61+
| `box-sizing: border-box;` | Ensures consistent sizing across all elements. |
62+
| `scrollbar-width: thin;` | Reduces scrollbar thickness for better UX. |
63+
| `font-family: Roboto, Helvetica, Arial;` | Standardizes typography. |
64+
| `color-scheme: dark, light;` | Adjusts color contrast for accessibility. |
65+
| `th, td border-bottom` | Improves table appearance. |
66+
| `html, body { overflow-x: hidden; }` | Prevents unwanted horizontal scrolling. |
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/styled-elements/icon-button.md‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
# Styled Icon Button Components
2+
3+
## Description
4+
The `IconButton` components are predefined styled buttons built on top of the `IconButton` from Liberty Core. These buttons are customized for various use cases in UI interactions.
5+
6+
## Props
7+
The following `IconButton` variants are available:
8+
9+
| Component Name | Description |
10+
|----------------------------|--------------------------------------------------|
11+
| `IconButton_Contrast` | A high-contrast icon button that scales on hover. |
12+
| `IconButton_Menus` | Positioned for menu interactions with hover effects. |
13+
| `IconButton_ListBottom` | A floating button at the bottom-right of the page. |
14+
| `IconButton_TabClose` | A circular button for closing tabs with hover effects. |
15+
| `IconButton_Alert` | A minimal button for alerts with centered alignment. |
16+
17+
---
18+
19+
## Example Usage
20+
21+
### **Basic Styled Icon Buttons**
22+
```tsx
23+
import { IconButton_Contrast, IconButton_Menus, IconButton_ListBottom } from '@nomana-it/liberty-core';
24+
25+
export const IconButtonExample = () => {
26+
return (
27+
<>
28+
<IconButton_Contrast>🔍</IconButton_Contrast>
29+
<IconButton_Menus>📋</IconButton_Menus>
30+
<IconButton_ListBottom>⬇️</IconButton_ListBottom>
31+
</>
32+
);
33+
};
34+
```
35+
36+
---
37+
38+
## **Styled Icon Button Components**
39+
- `IconButton_Contrast`
40+
- `IconButton_Menus`
41+
- `IconButton_ListBottom`
42+
- `IconButton_TabClose`
43+
- `IconButton_Alert`
44+
45+
---
46+
47+
## Notes
48+
- These components ensure **consistent styling** for icon buttons across the UI.
49+
- They inherit all behaviors from the standard `IconButton` component.
50+
- The hover effects **enhance usability** with scaling and color transitions.
51+
52+
53+
## Useful Links
54+
🔗 **GitHub Repository (Core):** [Liberty Core](https://github.com/fblettner/liberty-core/)
55+
🔗 **GitHub Repository (Test Project):** [Liberty Test](https://github.com/fblettner/liberty-test/)
56+
📖 **Live Documentation:** [Liberty Core Docs](https://docs.nomana-it.fr/liberty-core/)
57+
💖 **Sponsor & Support:** [Sponsor Liberty Core](https://github.com/sponsors/fblettner)

0 commit comments

Comments
 (0)