Skip to content

Commit c0944f0

Browse files
Josem1801Josem1801
authored
feat(react): add ProgressBar component (#51)
1 parent 8b31b20 commit c0944f0

File tree

8 files changed

+125
-0
lines changed

8 files changed

+125
-0
lines changed

‎js/react/lib/components/progress-bar/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./progress-bar.component";

‎js/react/lib/components/progress-bar/progress-bar.component.tsx

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { Ferris } from "@/icons/ferris";
2+
import { cn } from "@/utils/tw-merge";
3+
4+
type ProgressBarProps = {
5+
percentage: number;
6+
};
7+
export const ProgressBar = (props: ProgressBarProps) => {
8+
const percentage = Number(props.percentage ?? 0);
9+
const isZeroProgress = percentage === 0;
10+
const progressIsInLimit = isZeroProgress || percentage === 100;
11+
const isInMinLimit = percentage < 25;
12+
13+
const position = {
14+
right: isInMinLimit ? "auto" : `${100 - percentage}%`,
15+
left: isInMinLimit ? `${percentage}%` : "auto",
16+
};
17+
18+
return (
19+
<div className="rustlanges-progress-bar__container">
20+
<div className="rustlanges-progress-bar">
21+
<span
22+
className={cn([
23+
"text-overline rustlanges-progress-bar__percentage",
24+
isInMinLimit && "rustlanges-progress-bar__percentage--invert",
25+
])}
26+
style={position}
27+
>
28+
{percentage}%
29+
<Ferris width={15} height={15} />
30+
</span>
31+
<div
32+
className={cn([
33+
"rustlanges-progress-bar__fill",
34+
progressIsInLimit && "rustlanges-progress-bar__fill--limit",
35+
])}
36+
style={{ width: `${percentage}%` }}
37+
/>
38+
</div>
39+
</div>
40+
);
41+
};

‎js/react/lib/icons/ferris.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { SVGProps } from "react";
2+
export const Ferris = (props: SVGProps<SVGSVGElement>) => (
3+
<svg
4+
width="1em"
5+
height="1em"
6+
viewBox="0 0 14 13"
7+
fill="none"
8+
xmlns="http://www.w3.org/2000/svg"
9+
{...props}
10+
>
11+
<path
12+
d="M13.2682 6.41193C13.2127 6.1644 13.7349 5.75338 13.651 5.51418C13.5671 5.27498 12.9078 5.28028 12.7984 5.05319C12.689 4.82611 13.1048 4.30381 12.9715 4.09035C12.8381 3.87688 12.1945 4.03055 12.0372 3.83298C11.8799 3.63542 12.1728 3.03364 11.9952 2.85424C11.8177 2.67484 11.2243 2.9693 11.0287 2.81261C10.8332 2.65592 10.983 2.00266 10.774 1.8702C10.565 1.73773 10.0442 2.15405 9.82098 2.04505C9.59771 1.93605 9.59621 1.26615 9.3647 1.18137C9.13319 1.09659 8.71737 1.62419 8.47387 1.56817C8.23037 1.51216 8.08352 0.859662 7.83853 0.830898C7.59353 0.802133 7.30808 1.4077 7.05559 1.4077C6.8031 1.4077 6.51914 0.802134 6.27414 0.829384C6.02915 0.856634 5.8793 1.51064 5.63655 1.56666C5.3938 1.62267 4.98323 1.09886 4.74947 1.18061C4.51571 1.26236 4.51571 1.93378 4.29319 2.0443C4.07067 2.15481 3.55146 1.7347 3.34017 1.86944C3.12889 2.00418 3.28098 2.6544 3.08544 2.81185C2.88989 2.9693 2.29425 2.67635 2.11894 2.85348C1.94362 3.03061 2.23207 3.63466 2.07473 3.83222C1.91739 4.02979 1.27606 3.87613 1.14269 4.08959C1.00933 4.30305 1.42515 4.82308 1.31577 5.05244C1.20638 5.28179 0.544811 5.27347 0.463145 5.51342C0.38148 5.75338 0.899195 6.16365 0.843752 6.41117C0.78831 6.65869 0.142478 6.80176 0.114007 7.05534C0.094527 7.24836 0.669933 7.50421 1.1382 7.69194C1.15468 7.69951 1.17266 7.70556 1.1899 7.71389C1.11671 7.99336 1.10196 8.28517 1.14659 8.57072C1.19123 8.85627 1.29426 9.12929 1.44913 9.37238C1.26773 9.66668 1.19943 10.018 1.25714 10.3597C1.31485 10.7015 1.49458 11.01 1.7623 11.2269L2.52801 11.8537C2.80538 12.0809 3.1578 12.1931 3.51399 12.1678L3.47054 10.7447L4.82964 10.7023C4.82275 10.498 4.77233 10.2976 4.68183 10.1147C4.59132 9.9318 4.46285 9.77078 4.30518 9.64261L3.53572 9.01661C3.37628 8.88637 3.19067 8.79277 2.99181 8.74231C2.79295 8.69186 2.58559 8.68575 2.38416 8.72442C2.3482 8.67068 2.22308 8.45722 2.28077 8.08858C3.58367 8.45116 5.24546 8.66614 7.05334 8.66614C8.86122 8.66614 10.4998 8.45268 11.8019 8.09691C11.8551 8.461 11.7315 8.67219 11.6963 8.72442C11.4947 8.68584 11.2873 8.69199 11.0883 8.74244C10.8894 8.79289 10.7036 8.88644 10.544 9.01661L9.77678 9.64261C9.61921 9.77089 9.49082 9.93192 9.40033 10.1148C9.30983 10.2976 9.25935 10.498 9.25232 10.7023L10.6114 10.7447L10.5672 12.1678C10.9246 12.1938 11.2785 12.0815 11.5569 11.8537L12.3256 11.2277C12.592 11.0098 12.7707 10.7014 12.8283 10.3601C12.886 10.0187 12.8186 9.66791 12.6388 9.37313C12.7929 9.13154 12.8956 8.86026 12.9405 8.57646C12.9854 8.29267 12.9714 8.00255 12.8996 7.72449C12.9258 7.71464 12.9497 7.7048 12.9745 7.69269C13.4435 7.50497 14.0189 7.24912 13.9994 7.05609C13.9702 6.80251 13.3244 6.65945 13.2682 6.41193ZM8.71287 7.87588C8.2034 7.87588 7.79058 7.40884 7.79058 6.83052C7.79058 6.25221 8.2034 5.78592 8.71287 5.78592C9.22235 5.78592 9.63592 6.25297 9.63592 6.83052C9.63592 7.40808 9.2231 7.87588 8.71287 7.87588Z"
13+
fill="#FF6711"
14+
/>
15+
<path
16+
d="M8.71282 5.78589C8.20335 5.78589 7.79053 6.25293 7.79053 6.83049C7.79053 7.40804 8.20335 7.87584 8.71282 7.87584C9.2223 7.87584 9.63587 7.4088 9.63587 6.83049C9.63587 6.25217 9.22305 5.78589 8.71282 5.78589ZM8.61917 6.57312C8.45809 6.73587 8.23482 6.77599 8.11944 6.65942C8.00406 6.54284 8.04451 6.31727 8.20485 6.15453C8.36518 5.99178 8.59145 5.95318 8.70533 6.06748C8.81922 6.18178 8.781 6.40962 8.61917 6.57312Z"
17+
fill="black"
18+
/>
19+
<path
20+
d="M6.32288 6.83049C6.32288 7.4088 5.90856 7.87584 5.39984 7.87584C4.89111 7.87584 4.47754 7.4088 4.47754 6.83049C4.47754 6.25217 4.88961 5.78589 5.39984 5.78589C5.91006 5.78589 6.32288 6.25217 6.32288 6.83049Z"
21+
fill="black"
22+
/>
23+
<path
24+
d="M5.30565 6.57325C5.46745 6.40978 5.50588 6.18356 5.39147 6.06798C5.27707 5.9524 5.05316 5.99122 4.89136 6.15469C4.72956 6.31816 4.69113 6.54438 4.80553 6.65996C4.91994 6.77555 5.14385 6.73673 5.30565 6.57325Z"
25+
fill="white"
26+
/>
27+
<path
28+
d="M8.61922 6.57315C8.45814 6.73589 8.23487 6.77601 8.11949 6.65944C8.00411 6.54287 8.04457 6.3173 8.2049 6.15455C8.36524 5.9918 8.5915 5.9532 8.70538 6.0675C8.81927 6.1818 8.78106 6.40964 8.61922 6.57315Z"
29+
fill="white"
30+
/>
31+
</svg>
32+
);

‎js/react/lib/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,5 @@ export * from "./components/dropdown";
1414
export * from "./components/calendar";
1515
export * from "./components/dropdown-tree";
1616
export * from "./components/input-search";
17+
export * from "./components/progress-bar";
1718
export * from "./icons";

‎js/react/showcase/App.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
Calendar,
1717
CalendarRangeDate,
1818
DropdownTree,
19+
ProgressBar,
1920
InputSearch,
2021
} from "@rustlanges/react";
2122
import { ShowComponent } from "./ShowComponent";
@@ -534,6 +535,17 @@ export function App() {
534535
<InputSearch className="max-w-80" />
535536
</div>
536537
</ShowComponent>
538+
<ShowComponent
539+
title="Progress Bar"
540+
component={ProgressBar}
541+
propsDef={{
542+
percentage: {
543+
type: "string",
544+
default: 50,
545+
optional: false,
546+
},
547+
}}
548+
/>
537549
</div>
538550
);
539551
}

‎styles/components.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,4 @@
1616
@import "./components/dropdown-tree-subtopic.css";
1717
@import "./components/dropdown-tree-end.css";
1818
@import "./components/input-search.css";
19+
@import "./components/progress-bar.css";

‎styles/components/progress-bar.css

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
@layer components {
2+
.rustlanges-progress-bar__container {
3+
@apply h-[33px] w-full;
4+
}
5+
6+
.rustlanges-progress-bar {
7+
@apply relative h-2.5 w-full rounded-xl border border-black;
8+
@apply bg-neutral-100 dark:bg-neutral-900;
9+
}
10+
.rustlanges-progress-bar__fill {
11+
@apply absolute left-0 h-full;
12+
@apply border-r border-r-black;
13+
@apply rounded-l-xl;
14+
@apply transition-all duration-1000;
15+
@apply bg-primary-500;
16+
}
17+
.rustlanges-progress-bar__percentage {
18+
@apply absolute -top-6;
19+
@apply flex items-center gap-1;
20+
@apply h-fit w-fit;
21+
@apply px-1 py-0.5;
22+
@apply text-primary-500;
23+
@apply border border-black;
24+
@apply rounded-l-xs rounded-tr-xs;
25+
@apply transition-all duration-1000;
26+
@apply bg-white dark:bg-neutral-900;
27+
}
28+
29+
.rustlanges-progress-bar__fill--limit {
30+
@apply rounded-r-xl border-none;
31+
}
32+
.rustlanges-progress-bar__percentage--invert {
33+
@apply rounded-r-xs rounded-bl-none;
34+
}
35+
}

‎styles/theme.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,8 @@
124124
--font-monospace-body: monospace;
125125

126126
/* Border radiuses */
127+
128+
--radius-xs: 4px;
127129
--radius-sm: 8px;
128130
--radius-md: 16px;
129131
--radius-DEFAULT: 16px;

0 commit comments

Comments
 (0)