Skip to content

Commit fc1eedf

Browse files
Merge pull request #34 from code4rena-dev/samus/various-changes
Various changes
2 parents 878f461 + ccd9853 commit fc1eedf

File tree

16 files changed

+184
-202
lines changed

16 files changed

+184
-202
lines changed

.storybook/preview.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React from "react";
1+
import React, { CSSProperties } from "react";
22
import type { Preview } from "@storybook/react";
33
import "../src/styles/base/typography.scss";
44

5-
const wrapperStyle = {
5+
const wrapperStyle: CSSProperties = {
66
display: "flex",
77
gap: "10px",
88
flexWrap: "wrap",
@@ -15,7 +15,6 @@ const wrapperStyle = {
1515
const preview: Preview = {
1616
decorators: [
1717
(Story) => (
18-
/* @ts-ignore */
1918
<div style={wrapperStyle}>
2019
<Story />
2120
</div>

src/lib/Alert/Alert.tsx

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,13 @@ import "./Alert.scss";
2525
* @param id - HTML element identifier
2626
*/
2727
export const Alert: React.FC<AlertProps> = ({
28-
title,
28+
title = "",
2929
message,
30-
redirectLabel,
31-
redirectUrl,
32-
variant,
33-
className,
34-
id,
30+
redirectLabel = "",
31+
redirectUrl = "",
32+
variant = AlertVariant.INFO,
33+
className = "",
34+
id = "",
3535
}) => {
3636
const styling = clsx({
3737
c4alert: true,
@@ -73,13 +73,3 @@ export const Alert: React.FC<AlertProps> = ({
7373
</div>
7474
);
7575
};
76-
77-
Alert.defaultProps = {
78-
title: "",
79-
redirectLabel: "",
80-
redirectUrl: "",
81-
/* @ts-ignore value in Enum */
82-
variant: "INFO",
83-
className: "",
84-
id: "",
85-
};

src/lib/Button/Button.stories.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React from "react";
1+
import React, { CSSProperties } from "react";
22
import { Button } from "./Button";
33
import { Meta, StoryObj } from "@storybook/react";
44
import { ButtonSize, ButtonType, ButtonVariant } from "./Button.types";
55

6-
const wrapperStyle = {
6+
const wrapperStyle: CSSProperties = {
77
display: "flex",
88
gap: "10px",
99
flexWrap: "wrap",
@@ -69,7 +69,6 @@ export const Links: Story = {
6969
render: (args) => (
7070
<>
7171
{/* Primary */}
72-
{/* @ts-ignore */}
7372
<div style={wrapperStyle}>
7473
<Button
7574
variant={ButtonVariant.PRIMARY}
@@ -91,7 +90,6 @@ export const Links: Story = {
9190
/>
9291
</div>
9392
{/* Secondary */}
94-
{/* @ts-ignore */}
9593
<div style={wrapperStyle}>
9694
<Button
9795
variant={ButtonVariant.SECONDARY}
@@ -134,7 +132,6 @@ export const Buttons: Story = {
134132
render: (args) => (
135133
<>
136134
{/* Primary */}
137-
{/* @ts-ignore */}
138135
<div style={wrapperStyle}>
139136
<Button
140137
variant={ButtonVariant.PRIMARY}
@@ -150,7 +147,6 @@ export const Buttons: Story = {
150147
/>
151148
</div>
152149
{/* Secondary */}
153-
{/* @ts-ignore */}
154150
<div style={wrapperStyle}>
155151
<Button
156152
variant={ButtonVariant.SECONDARY}

src/lib/Button/Button.tsx

Lines changed: 11 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22
import clsx from "clsx";
3-
import { ButtonProps, ButtonSize, ButtonVariant } from "./Button.types";
3+
import { ButtonProps, ButtonSize, ButtonType, ButtonVariant } from "./Button.types";
44
import "./Button.scss";
55

66
/**
@@ -26,17 +26,17 @@ import "./Button.scss";
2626
*/
2727
export const Button: React.FC<ButtonProps> = ({
2828
label,
29-
type,
30-
variant,
31-
external,
32-
disabled,
33-
iconLeft,
34-
iconRight,
35-
size,
36-
href,
29+
type = ButtonType.BUTTON,
30+
variant = ButtonVariant.PRIMARY,
31+
external = false,
32+
disabled = false,
33+
iconLeft = "",
34+
iconRight = "",
35+
size = ButtonSize.NARROW,
36+
href = "",
3737
onClick,
38-
className,
39-
id,
38+
className = "",
39+
id = "",
4040
}) => {
4141
const styling = clsx({
4242
c4button: true,
@@ -80,20 +80,3 @@ export const Button: React.FC<ButtonProps> = ({
8080
</button>
8181
);
8282
};
83-
84-
Button.defaultProps = {
85-
/* @ts-ignore value in Enum */
86-
type: "button",
87-
/* @ts-ignore value in Enum */
88-
variant: "PRIMARY",
89-
disabled: false,
90-
iconLeft: "",
91-
iconRight: "",
92-
/* @ts-ignore value in Enum */
93-
size: "NARROW",
94-
href: "",
95-
external: false,
96-
onClick: undefined,
97-
className: "",
98-
id: "",
99-
};

src/lib/ContestStatus/ContestStatus.tsx

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ import "./ContestStatus.scss";
1616
*/
1717
export const ContestStatus: React.FC<ContestStatusProps> = ({
1818
status,
19-
className,
20-
id,
19+
className = "",
20+
id = "",
2121
}) => {
2222
const styling = clsx({
2323
statusindicator: true,
@@ -38,8 +38,3 @@ export const ContestStatus: React.FC<ContestStatusProps> = ({
3838
)
3939
);
4040
};
41-
42-
ContestStatus.defaultProps = {
43-
className: "",
44-
id: "",
45-
};

src/lib/ContestTile/CompactTemplate.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,11 @@ const IsContest = ({title, contestData, sponsorUrl, sponsorImage}: {
9393
</div>
9494
)}
9595
</span>}
96-
<p className="type">{contestType}</p>
96+
<p className="type">
97+
{contestType === "Audit + mitigation review"
98+
? "Audit"
99+
: contestType}
100+
</p>
97101
</div>
98102
</header>
99103
<div className="content--wrapper">

src/lib/ContestTile/ContestTile.stories.tsx

Lines changed: 89 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const meta: Meta<typeof ContestTile> = {
2323
export default meta;
2424

2525
type Story = StoryObj<typeof ContestTile>;
26+
2627
const parameters = {
2728
layout: "fullscreen",
2829
docs: {
@@ -31,8 +32,66 @@ const parameters = {
3132
},
3233
};
3334

35+
const defaultArgs = {
36+
htmlId: "",
37+
contestData: {
38+
codeAccess: "public",
39+
contestType: "Open Audit",
40+
isUserCertified: false,
41+
contestId: 321,
42+
contestUrl: "https://code4rena.com/audits/2023-07-axelar-network#top",
43+
contestRepo: "https://github.com/code-423n4/2023-07-axelar",
44+
findingsRepo: "https://github.com/code-423n4/2023-07-axelar",
45+
amount: "$80,000 USDC",
46+
startDate: "2030-07-12T18:00:00Z",
47+
endDate: "2030-07-21T18:00:00.000Z",
48+
},
49+
variant: ContestTileVariant.DARK,
50+
sponsorImage: "/logos/apple-touch-icon.png",
51+
sponsorUrl: "https://twitter.com/axelarcore",
52+
title: "Axelar Network",
53+
description: "Decentralized interoperability network.",
54+
};
55+
56+
export const ContestTileUpcoming: Story = (args) => {
57+
const isDark = args.variant === ContestTileVariant.DARK || args.variant === ContestTileVariant.COMPACT_DARK;
58+
59+
return <Fragment>
60+
<ContestTile
61+
{...args}
62+
variant={isDark ? ContestTileVariant.DARK : ContestTileVariant.LIGHT}
63+
startDate={new Date(args.contestData.startDate).toISOString()}
64+
endDate={new Date(args.contestData.endDate).toISOString()}
65+
/>
66+
<ContestTile
67+
{...args}
68+
variant={isDark ? ContestTileVariant.COMPACT_DARK : ContestTileVariant.COMPACT_LIGHT }
69+
startDate={new Date(args.contestData.startDate).toISOString()}
70+
endDate={new Date(args.contestData.endDate).toISOString()}
71+
/>
72+
</Fragment>
73+
};
74+
75+
export const ContestTileLive: Story = (args) => {
76+
const isDark = args.variant === ContestTileVariant.DARK || args.variant === ContestTileVariant.COMPACT_DARK;
77+
78+
return <Fragment>
79+
<ContestTile
80+
{...args}
81+
variant={isDark ? ContestTileVariant.DARK : ContestTileVariant.LIGHT}
82+
startDate={new Date(args.contestData.startDate).toISOString()}
83+
endDate={new Date(args.contestData.endDate).toISOString()}
84+
/>
85+
<ContestTile
86+
{...args}
87+
variant={isDark ? ContestTileVariant.COMPACT_DARK : ContestTileVariant.COMPACT_LIGHT }
88+
startDate={new Date(args.contestData.startDate).toISOString()}
89+
endDate={new Date(args.contestData.endDate).toISOString()}
90+
/>
91+
</Fragment>
92+
};
3493

35-
export const ContestTileComponent: Story = (args) => {
94+
export const ContestTileEnded: Story = (args) => {
3695
const isDark = args.variant === ContestTileVariant.DARK || args.variant === ContestTileVariant.COMPACT_DARK;
3796

3897
return <Fragment>
@@ -51,7 +110,7 @@ export const ContestTileComponent: Story = (args) => {
51110
</Fragment>
52111
};
53112

54-
export const BountyTileComponent: Story = (args) => {
113+
export const BountyTile: Story = (args) => {
55114
const isDark = args.variant === ContestTileVariant.DARK || args.variant === ContestTileVariant.COMPACT_DARK;
56115

57116
return <Fragment>
@@ -64,42 +123,47 @@ export const BountyTileComponent: Story = (args) => {
64123
</Fragment>
65124
}
66125

67-
ContestTileComponent.parameters = parameters;
68-
BountyTileComponent.parameters = parameters;
126+
ContestTileUpcoming.parameters = parameters;
127+
ContestTileLive.parameters = parameters;
128+
ContestTileEnded.parameters = parameters;
129+
BountyTile.parameters = parameters;
69130

131+
ContestTileUpcoming.args = {
132+
...defaultArgs,
133+
contestData: {
134+
...defaultArgs.contestData,
135+
startDate: "2030-07-12T18:00:00Z",
136+
endDate: "2030-07-21T18:00:00.000Z"
137+
}
138+
};
70139

71-
ContestTileComponent.args = {
72-
htmlId: "",
140+
ContestTileLive.args = {
141+
...defaultArgs,
73142
contestData: {
74-
codeAccess: "public",
75-
contestType: "Open Audit",
76-
isUserCertified: false,
77-
contestId: 321,
78-
contestUrl: "https://code4rena.com/audits/2023-07-axelar-network#top",
79-
contestRepo: "https://github.com/code-423n4/2023-07-axelar",
80-
findingsRepo: "https://github.com/code-423n4/2023-07-axelar",
81-
amount: "$80,000 USDC",
143+
...defaultArgs.contestData,
82144
startDate: "2023-07-12T18:00:00Z",
83-
endDate: "2023-07-21T18:00:00Z",
84-
},
85-
/** @ts-ignore */
86-
variant: "DARK",
87-
sponsorImage: "/logos/apple-touch-icon.png",
88-
sponsorUrl: "https://twitter.com/axelarcore",
89-
title: "Axelar Network",
90-
description: "Decentralized interoperability network.",
145+
endDate: "2030-07-21T18:00:00.000Z"
146+
}
147+
};
148+
149+
ContestTileEnded.args = {
150+
...defaultArgs,
151+
contestData: {
152+
...defaultArgs.contestData,
153+
startDate: "2023-07-12T18:00:00Z",
154+
endDate: "2023-07-21T18:00:00Z"
155+
}
91156
};
92157

93-
BountyTileComponent.args = {
158+
BountyTile.args = {
94159
htmlId: "",
95160
bountyData: {
96161
amount: "$80,000 USDC",
97162
startDate: "2023-07-12T18:00:00Z",
98163
repoUrl: "https://github.com/code-423n4/2023-07-axelar",
99164
bountyUrl: "https://code4rena.com/audits/2023-07-axelar-network#top",
100165
},
101-
/** @ts-ignore */
102-
variant: "LIGHT",
166+
variant: ContestTileVariant.LIGHT,
103167
sponsorImage: "/logos/apple-touch-icon.png",
104168
sponsorUrl: "https://twitter.com/axelarcore",
105169
title: "Axelar Network",

0 commit comments

Comments
 (0)