Skip to content

Commit 47dd1ea

Browse files
hussedevhussedev
authored
feat(ui): add spinner component (#34)
* feat: implemented Spinner * chore: release
1 parent e4fae5f commit 47dd1ea

18 files changed

+91
-5
lines changed

‎.changeset/cuddly-pumas-watch.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@gitcoin/ui": patch
3+
---
4+
5+
implemented Spinner component

‎.changeset/pre.json

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"@gitcoin/utils": "0.0.0"
1111
},
1212
"changesets": [
13+
"cuddly-pumas-watch",
1314
"dirty-donkeys-live",
1415
"forty-planets-collect",
1516
"grumpy-flies-smell",

‎packages/config/CHANGELOG.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# @gitcoin/config
22

3+
## 0.0.0-beta.18
4+
35
## 0.0.0-beta.17
46

57
## 0.0.0-beta.16

‎packages/config/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@gitcoin/config",
3-
"version": "0.0.0-beta.17",
3+
"version": "0.0.0-beta.18",
44
"repository": {
55
"type": "git",
66
"url": "https://github.com/gitcoinco/core",

‎packages/themes/CHANGELOG.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# @gitcoin/themes
22

3+
## 0.0.0-beta.18
4+
35
## 0.0.0-beta.17
46

57
## 0.0.0-beta.16

‎packages/themes/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@gitcoin/themes",
3-
"version": "0.0.0-beta.17",
3+
"version": "0.0.0-beta.18",
44
"repository": {
55
"type": "git",
66
"url": "https://github.com/gitcoinco/core",

‎packages/types/CHANGELOG.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# @gitcoin/types
22

3+
## 0.0.0-beta.18
4+
35
## 0.0.0-beta.17
46

57
## 0.0.0-beta.16

‎packages/types/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@gitcoin/types",
3-
"version": "0.0.0-beta.17",
3+
"version": "0.0.0-beta.18",
44
"repository": {
55
"type": "git",
66
"url": "https://github.com/gitcoinco/core",

‎packages/ui/CHANGELOG.md

+6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# @gitcoin/ui
22

3+
## 0.0.0-beta.18
4+
5+
### Patch Changes
6+
7+
- implemented Spinner component
8+
39
## 0.0.0-beta.17
410

511
### Patch Changes

‎packages/ui/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@gitcoin/ui",
3-
"version": "0.0.0-beta.17",
3+
"version": "0.0.0-beta.18",
44
"repository": {
55
"type": "git",
66
"url": "https://github.com/gitcoinco/core",

‎packages/ui/src/assets/icons/custom/index.ts

+4
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import HeadingIcon from "./heading.svg?react";
55
import ItalicIcon from "./italic.svg?react";
66
import RetrofundingIcon from "./retrofunding.svg?react";
77
import ShineIcon from "./shine.svg?react";
8+
import SpinnerIcon from "./spinner.svg?react";
89
import UserIcon from "./user.svg?react";
910
import VerifiedBadgeIcon from "./verifiedBadge.svg?react";
1011
import VoteIcon from "./vote.svg?react";
@@ -18,6 +19,7 @@ enum CustomIconType {
1819
HEADING = "heading",
1920
BOLD = "bold",
2021
ITALIC = "italic",
22+
SPINNER = "spinner",
2123
}
2224

2325
const customIconComponents: Record<CustomIconType, React.FC<React.SVGProps<SVGSVGElement>>> = {
@@ -29,6 +31,7 @@ const customIconComponents: Record<CustomIconType, React.FC<React.SVGProps<SVGSV
2931
heading: HeadingIcon,
3032
bold: BoldIcon,
3133
italic: ItalicIcon,
34+
spinner: SpinnerIcon,
3235
};
3336

3437
const customIcons = Object.keys(customIconComponents).sort((a, b) =>
@@ -38,6 +41,7 @@ const customIcons = Object.keys(customIconComponents).sort((a, b) =>
3841
export {
3942
CheckerIcon,
4043
ExplorerIcon,
44+
SpinnerIcon,
4145
ShineIcon,
4246
UserIcon,
4347
VerifiedBadgeIcon,

‎packages/ui/src/assets/icons/custom/spinner.svg

+4
Loading

‎packages/ui/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export * from "./primitives/Toast";
2222
export * from "./primitives/Typography";
2323
export * from "./primitives/VerticalTabs";
2424
export * from "./primitives/Switch";
25+
export * from "./primitives/Spinner";
2526
export * from "./primitives/Checkbox";
2627
export * from "./primitives/Table";
2728
export * from "./primitives/Dialog";

‎packages/ui/src/primitives/Spinner/Spinner.stories.tsx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
3+
import { Spinner } from "./Spinner";
4+
5+
const meta = {
6+
title: "Primitives/Spinner",
7+
component: Spinner,
8+
args: {
9+
size: "sm",
10+
},
11+
} satisfies Meta<typeof Spinner>;
12+
13+
export default meta;
14+
15+
type Story = StoryObj<typeof Spinner>;
16+
17+
export const Default: Story = {};
18+
19+
export const Big: Story = {
20+
args: {
21+
size: "md",
22+
},
23+
};
24+
25+
export const CustomColor: Story = {
26+
args: {
27+
size: "md",
28+
className: "fill-red-500",
29+
},
30+
};

‎packages/ui/src/primitives/Spinner/Spinner.tsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { tv, VariantProps } from "tailwind-variants";
2+
3+
import { SpinnerIcon } from "@/assets";
4+
import { cn } from "@/lib";
5+
6+
const variants = tv({
7+
base: "shrink-0 animate-spin fill-black dark:fill-white",
8+
variants: {
9+
size: {
10+
sm: "size-4",
11+
md: "size-8",
12+
},
13+
},
14+
defaultVariants: {
15+
size: "sm",
16+
},
17+
});
18+
19+
export interface SpinnerProps extends VariantProps<typeof variants> {
20+
className?: string;
21+
}
22+
23+
export const Spinner = ({ className, size = "sm" }: SpinnerProps) => {
24+
const classes = variants({ size });
25+
return <SpinnerIcon className={cn(classes, className)} />;
26+
};

‎packages/ui/src/primitives/Spinner/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { Spinner } from "./Spinner";

‎packages/utils/CHANGELOG.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# @gitcoin/utils
22

3+
## 0.0.0-beta.18
4+
35
## 0.0.0-beta.17
46

57
## 0.0.0-beta.16

‎packages/utils/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@gitcoin/utils",
3-
"version": "0.0.0-beta.17",
3+
"version": "0.0.0-beta.18",
44
"repository": {
55
"type": "git",
66
"url": "https://github.com/gitcoinco/core",

0 commit comments

Comments
 (0)