Skip to content

Commit 677a545

Browse files
BinaryLeoBinaryLeo
committed
FEAT: TextColor props
1 parent 7d82341 commit 677a545

38 files changed

+11535
-2014
lines changed

‎.DS_Store

0 Bytes
Binary file not shown.

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
node_modules
2+
*storybook.log

‎README.md

Lines changed: 101 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -58,45 +58,115 @@ The `CircularTracker` component accepts the following props:
5858
| `background` | `string` | `#eef2f5` | The background color of the progress arc. |
5959
| `hideBall` | `boolean` | `false` | Whether to hide the ball at the end of the progress arc. |
6060
| `inverted` | `boolean` | `false` | Whether to invert the progress direction (anti-clockwise). |
61+
| `textColor` | `string` | `#309E3A` | The color of the progress value text. |
6162

6263
## Example
6364

6465
Here's a more detailed example demonstrating various props:
6566

67+
### Default Example
68+
6669
```tsx
67-
import React from 'react';
68-
import { CircularTracker } from 'react-circular-tracker';
70+
<CircularTracker
71+
progress={93}
72+
isPercentage={true}
73+
ballStrokeWidth={14}
74+
fontSize="36"
75+
fontWeight={"bold"}
76+
className="default-tracker"
77+
gradient={[
78+
{ stop: 0, color: "#059669" }, // Emerald-600
79+
{ stop: 1, color: "#047857" }, // Emerald-700
80+
]}
81+
centerBackground="rgba(16, 185, 129, 0.1)"
82+
textColor="#059669"
83+
/>
84+
```
6985

70-
const App = () => (
71-
<div>
72-
<CircularTracker
73-
progress={75}
74-
total={100}
75-
isPercentage={true}
76-
strokeWidth={6}
77-
ballStrokeWidth={10}
78-
transitionDuration={1}
79-
transitionTimingFunction="ease-in-out"
80-
hideValue={false}
81-
gradient={[
82-
{ stop: 0, color: '#ff0000' },
83-
{ stop: 1, color: '#00ff00' },
84-
]}
85-
subtitle="Loading..."
86-
style={{ margin: '20px' }}
87-
className="custom-progress"
88-
suffix="%"
89-
centerBackground="#ffffff"
90-
fontWeight="normal"
91-
fontSize="20px"
92-
background="#cccccc"
93-
hideBall={false}
94-
inverted={true}
95-
/>
96-
</div>
97-
);
86+
### Inverted Example
9887

99-
export default App;
88+
```tsx
89+
<CircularTracker
90+
progress={-60}
91+
total={100}
92+
isPercentage={true}
93+
strokeWidth={4}
94+
ballStrokeWidth={12}
95+
transitionDuration={0.5}
96+
transitionTimingFunction="ease"
97+
background="rgba(255, 87, 51, 0.2)"
98+
hideBall={false}
99+
hideValue={false}
100+
gradient={[
101+
{ stop: 0, color: "#E11D48" }, // Rose-600
102+
{ stop: 1, color: "#BE123C" }, // Rose-700
103+
]}
104+
subtitle=""
105+
className="inverted-tracker"
106+
suffix="pts"
107+
centerBackground="transparent"
108+
fontWeight="bold"
109+
fontSize="24px"
110+
inverted={true}
111+
textColor="#FF5733"
112+
/>
113+
```
114+
115+
### Loading Example
116+
117+
```tsx
118+
<CircularTracker
119+
progress={60}
120+
total={100}
121+
isPercentage={true}
122+
strokeWidth={4}
123+
ballStrokeWidth={12}
124+
transitionDuration={0.5}
125+
transitionTimingFunction="ease"
126+
background="#eef2f5"
127+
hideBall={false}
128+
hideValue={false}
129+
gradient={[
130+
{ stop: 0, color: "#FBBF24" }, // Amber-400
131+
{ stop: 1, color: "#F59E0B" }, // Amber-500
132+
]}
133+
subtitle="Loading..."
134+
className="loading-tracker"
135+
suffix="%"
136+
centerBackground="transparent"
137+
fontWeight="bold"
138+
fontSize="24px"
139+
textColor="#FFC300"
140+
/>
141+
```
142+
143+
### Steps Example
144+
145+
```tsx
146+
<CircularTracker
147+
progress={3}
148+
total={5}
149+
isPercentage={false}
150+
strokeWidth={4}
151+
ballStrokeWidth={12}
152+
transitionDuration={0.5}
153+
transitionTimingFunction="ease"
154+
background="#eef2f5"
155+
hideBall={false}
156+
hideValue={false}
157+
gradient={[
158+
{ stop: 0, color: "#7C3AED" }, // Violet-600
159+
{ stop: 1, color: "#6D28D9" }, // Violet-700
160+
]}
161+
subtitle="STEPS"
162+
style={{}}
163+
className="steps-tracker"
164+
suffix=""
165+
centerBackground="transparent"
166+
fontWeight="bold"
167+
fontSize="24px"
168+
textColor="#8E44AD"
169+
/>
100170
```
101171

102172
## Storybook

‎assets/demo.png

199 KB
Loading

‎circular-tracker-demo/.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎circular-tracker-demo/README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Circular Tracker Demo
2+
3+
This project demonstrates the usage of the `CircularTracker` component, a customizable and reusable circular progress tracker component for React.JS.

‎circular-tracker-demo/eslint.config.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
import tseslint from 'typescript-eslint'
6+
7+
export default tseslint.config(
8+
{ ignores: ['dist'] },
9+
{
10+
extends: [js.configs.recommended, ...tseslint.configs.recommended],
11+
files: ['**/*.{ts,tsx}'],
12+
languageOptions: {
13+
ecmaVersion: 2020,
14+
globals: globals.browser,
15+
},
16+
plugins: {
17+
'react-hooks': reactHooks,
18+
'react-refresh': reactRefresh,
19+
},
20+
rules: {
21+
...reactHooks.configs.recommended.rules,
22+
'react-refresh/only-export-components': [
23+
'warn',
24+
{ allowConstantExport: true },
25+
],
26+
},
27+
},
28+
)

‎circular-tracker-demo/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React + TS</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)