Skip to content

Commit 96255fa

Browse files
tareq1988tareq1988
committed
docs: added documentation for all components
1 parent 8faf55b commit 96255fa

18 files changed

Lines changed: 28174 additions & 274 deletions

File tree

‎.pnp.cjs‎

Lines changed: 22801 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.pnp.loader.mjs‎

Lines changed: 2076 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Components/Badge/README.md‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
# Badge Component Documentation
2+
3+
The `Badge` component is a lightweight, versatile component for displaying status indicators, labels, or tags in your application. Built with React and Tailwind CSS, it offers various styles and types to match your design needs.
4+
5+
## Usage
6+
7+
Import and use the Badge component in your React components to display short pieces of information, status indicators, or labels.
8+
9+
```jsx
10+
import { Badge } from '@wedevs/tail-react';
11+
12+
function MyComponent() {
13+
return (
14+
<div className="space-x-2">
15+
<Badge label="New" />
16+
<Badge label="Success" type="success" />
17+
<Badge label="Warning" type="warning" />
18+
<Badge label="Error" type="error" />
19+
<Badge label="Info" type="info" />
20+
</div>
21+
);
22+
}
23+
```
24+
25+
## Props
26+
27+
The Badge component accepts the following props:
28+
29+
- `label` (React.ReactNode, required): The content to display inside the badge. Can be text or any valid React node.
30+
31+
- `type` ('success' | 'warning' | 'error' | 'info' | 'neutral', optional, default: 'neutral'): Determines the color scheme and style of the badge.
32+
33+
- `neutral`: Gray color scheme (default)
34+
- `success`: Green color scheme for positive or successful states
35+
- `warning`: Yellow color scheme for warning states
36+
- `error`: Red color scheme for error states
37+
- `info`: Blue color scheme for informational states
38+
39+
- `border` (boolean, optional, default: true): When true, adds a subtle border ring around the badge. Set to false for a flat appearance.
40+
41+
- `className` (string, optional): Additional CSS classes to be applied to the badge. These will be merged with the default styles.
42+
43+
## Examples
44+
45+
### Basic Usage
46+
47+
```jsx
48+
import { Badge } from '@wedevs/tail-react';
49+
50+
function StatusIndicators() {
51+
return (
52+
<div className="space-y-4">
53+
{/* Basic badges with different types */}
54+
<div className="space-x-2">
55+
<Badge label="Default" />
56+
<Badge label="Completed" type="success" />
57+
<Badge label="Pending" type="warning" />
58+
<Badge label="Failed" type="error" />
59+
<Badge label="Note" type="info" />
60+
</div>
61+
62+
{/* Flat badges (no border) */}
63+
<div className="space-x-2">
64+
<Badge label="Default" border={false} />
65+
<Badge label="Completed" type="success" border={false} />
66+
<Badge label="Pending" type="warning" border={false} />
67+
<Badge label="Failed" type="error" border={false} />
68+
<Badge label="Note" type="info" border={false} />
69+
</div>
70+
71+
{/* With custom className */}
72+
<Badge label="Custom" className="px-4 py-2 text-sm" />
73+
74+
{/* With React node as label */}
75+
<Badge
76+
label={
77+
<span className="flex items-center">
78+
<span className="w-2 h-2 rounded-full bg-current mr-1" />
79+
Active
80+
</span>
81+
}
82+
type="success"
83+
/>
84+
</div>
85+
);
86+
}
87+
```
88+
89+
## Style Variations
90+
91+
The Badge component comes with two main style variations:
92+
93+
1. **Bordered** (default, `border={true}`):
94+
95+
- Includes a subtle border ring
96+
- Lighter background color
97+
- Provides more depth and definition
98+
99+
2. **Flat** (`border={false}`):
100+
- No border
101+
- Slightly darker background color
102+
- Clean, minimal appearance
103+
104+
## Color Schemes
105+
106+
Each type has its own color scheme that automatically adjusts based on the `border` prop:
107+
108+
- **Neutral** (`type="neutral"`):
109+
110+
- Border: Gray-50 background with Gray-600 text
111+
- Flat: Gray-100 background with Gray-600 text
112+
113+
- **Success** (`type="success"`):
114+
115+
- Border: Green-50 background with Green-700 text
116+
- Flat: Green-100 background with Green-700 text
117+
118+
- **Warning** (`type="warning"`):
119+
120+
- Border: Yellow-50 background with Yellow-800 text
121+
- Flat: Yellow-100 background with Yellow-800 text
122+
123+
- **Error** (`type="error"`):
124+
125+
- Border: Red-50 background with Red-700 text
126+
- Flat: Red-100 background with Red-700 text
127+
128+
- **Info** (`type="info"`):
129+
- Border: Blue-50 background with Blue-700 text
130+
- Flat: Blue-100 background with Blue-700 text
131+
132+
## Customization
133+
134+
The Badge component can be customized in several ways:
135+
136+
1. **Via Props**: Use the `type` and `border` props to change the appearance
137+
2. **Via className**: Add custom classes to override or extend the default styles
138+
3. **Via Content**: Use React nodes as labels to create more complex badge content
139+
140+
## Accessibility
141+
142+
The Badge component is rendered as a `<span>` element with appropriate text contrast ratios for all color schemes. When using custom content via the `label` prop, ensure that:
143+
144+
1. Color contrast meets WCAG guidelines
145+
2. Any interactive elements are properly focusable
146+
3. Screen reader text is provided where necessary
147+
148+
## Best Practices
149+
150+
1. Keep badge labels short and concise
151+
2. Use appropriate types to convey meaning (e.g., 'error' for error states)
152+
3. Maintain consistent usage patterns throughout your application
153+
4. Consider using the flat style (border={false}) when displaying multiple badges in close proximity
154+
155+
For further customization and integration with your application, refer to the official documentation of React and Tailwind CSS.

‎src/Components/Button/README.md‎

Lines changed: 70 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ The `Button` component accepts the following props:
2222

2323
- `disabled` (boolean, optional, default: false): If true, the button will be disabled and not clickable.
2424

25+
- `loading` (boolean, optional, default: false): If true, displays a spinning loading indicator before the button content.
26+
2527
- `as` (React.ElementType, optional, default: 'button'): The HTML element type or React component to be used as the underlying element. This allows you to render the button as an anchor (`<a>`) or any other valid HTML element.
2628

2729
- `className` (string, optional): Additional CSS classes to be applied to the button.
@@ -34,29 +36,56 @@ The `Button` component accepts the following props:
3436

3537
- `rel` (string, optional): If `href` is provided and `as` is set to 'a', the value of the `rel` attribute for the anchor element.
3638

37-
### Example
39+
### Examples
3840

3941
```jsx
40-
import React from 'react';
42+
import React, { useState } from 'react';
4143
import { Button } from '@wedevs/tail-react';
4244

4345
const MyComponent = () => {
44-
const handleButtonClick = () => {
45-
console.log('Button clicked!');
46+
const [isLoading, setIsLoading] = useState(false);
47+
48+
const handleSubmit = async () => {
49+
setIsLoading(true);
50+
// Simulate API call
51+
await new Promise((resolve) => setTimeout(resolve, 2000));
52+
setIsLoading(false);
4653
};
4754

4855
return (
49-
<div>
50-
<Button onClick={handleButtonClick} variant="primary" style="fill" size="medium">
51-
Click Me
52-
</Button>
53-
54-
<Button variant="secondary" style="outline" size="large">
55-
Learn More
56+
<div className="space-y-4">
57+
{/* Basic Button */}
58+
<Button onClick={() => console.log('Clicked!')}>Click Me</Button>
59+
60+
{/* Different Variants */}
61+
<div className="space-x-2">
62+
<Button variant="primary">Primary</Button>
63+
<Button variant="secondary">Secondary</Button>
64+
<Button variant="danger">Danger</Button>
65+
</div>
66+
67+
{/* Different Styles */}
68+
<div className="space-x-2">
69+
<Button style="fill">Fill</Button>
70+
<Button style="outline">Outline</Button>
71+
<Button style="link">Link</Button>
72+
</div>
73+
74+
{/* Different Sizes */}
75+
<div className="space-x-2">
76+
<Button size="small">Small</Button>
77+
<Button size="medium">Medium</Button>
78+
<Button size="large">Large</Button>
79+
</div>
80+
81+
{/* Loading State */}
82+
<Button loading={isLoading} onClick={handleSubmit}>
83+
{isLoading ? 'Submitting...' : 'Submit Form'}
5684
</Button>
5785

58-
<Button variant="danger" style="link" size="small" disabled>
59-
Disabled Button
86+
{/* Link Button */}
87+
<Button as="a" href="https://example.com" target="_blank" rel="noopener noreferrer">
88+
Visit Website
6089
</Button>
6190
</div>
6291
);
@@ -65,8 +94,6 @@ const MyComponent = () => {
6594
export default MyComponent;
6695
```
6796

68-
In this example, the `Button` component is used with different styles, sizes, and states. When the button is clicked, the `handleButtonClick` function is executed, and the console will log "Button clicked!". The last button is disabled and cannot be clicked due to the `disabled` prop being set to `true`.
69-
7097
## Styles Object
7198

7299
The `Button` component uses a predefined `Styles` object to handle the visual styles based on the provided `variant` and `style` props. The styles are defined using Tailwind CSS classes.
@@ -75,23 +102,40 @@ The `Styles` object includes the following style options:
75102

76103
- Primary Styles:
77104

78-
- `primary:fill`: Primary button with a solid background.
79-
- `primary:outline`: Primary button with a border and transparent background.
80-
- `primary:link`: Primary button styled as a link with no background.
105+
- `primary:fill`: Primary button with a solid background and hover effects
106+
- `primary:outline`: Primary button with a border and transparent background
107+
- `primary:link`: Primary button styled as a link with no background
81108

82109
- Secondary Styles:
83110

84-
- `secondary:fill`: Secondary button with a solid background.
85-
- `secondary:outline`: Secondary button with a border and transparent background.
86-
- `secondary:link`: Secondary button styled as a link with no background.
111+
- `secondary:fill`: Secondary button with a solid background
112+
- `secondary:outline`: Secondary button with a border and transparent background
113+
- `secondary:link`: Secondary button styled as a link with no background
87114

88115
- Danger Styles:
89-
- `danger:fill`: Danger button with a solid background.
90-
- `danger:outline`: Danger button with a border and transparent background.
91-
- `danger:link`: Danger button styled as a link with no background.
116+
- `danger:fill`: Danger button with a solid background
117+
- `danger:outline`: Danger button with a border and transparent background
118+
- `danger:link`: Danger button styled as a link with no background
119+
120+
## Dark Mode Support
121+
122+
The Button component includes built-in dark mode support through Tailwind CSS's dark mode classes. The styles automatically adjust when dark mode is enabled in your application.
123+
124+
## Accessibility
125+
126+
The Button component follows accessibility best practices:
127+
128+
- Uses semantic HTML elements
129+
- Maintains proper focus states
130+
- Disables interaction when the `disabled` prop is true
131+
- Provides visual feedback during loading states
92132

93133
## Customization
94134

95-
You can customize the appearance and behavior of the `Button` component by adjusting the `Styles` object or adding custom CSS classes to the `className` prop.
135+
You can customize the appearance and behavior of the `Button` component by:
136+
137+
1. Using the provided props to configure the button
138+
2. Adding custom CSS classes through the `className` prop
139+
3. Extending the `Styles` object in your theme configuration
96140

97-
Please note that this documentation assumes you have set up your project with React and Tailwind CSS properly. For further customization and integration with your application, refer to the official documentation of React and Tailwind CSS.
141+
For further customization and integration with your application, refer to the official documentation of React and Tailwind CSS.

0 commit comments

Comments
 (0)