From 42e9fda3ba7f3c3cc1d4792c2ca48d0ee8290993 Mon Sep 17 00:00:00 2001 From: Wilbur Zhang Date: Sun, 19 Feb 2023 18:37:34 -0500 Subject: [PATCH 1/5] wip --- package-lock.json | 9 ++ package.json | 1 + src/components/CircularProgress.tsx | 22 +++++ .../InstanceLoadingCard.stories.tsx | 6 -- src/components/InstanceLoadingCard.tsx | 88 ++++++------------- 5 files changed, 61 insertions(+), 65 deletions(-) create mode 100644 src/components/CircularProgress.tsx diff --git a/package-lock.json b/package-lock.json index 17e8e3c86..30a62c9dc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,6 +40,7 @@ "rc-tooltip": "^5.2.2", "react": "^18.2.0", "react-chartjs-2": "^4.3.1", + "react-circular-progressbar": "^2.1.0", "react-device-detect": "^2.2.2", "react-dom": "^18.2.0", "react-draggable": "^4.4.5", @@ -24921,6 +24922,14 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-circular-progressbar": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/react-circular-progressbar/-/react-circular-progressbar-2.1.0.tgz", + "integrity": "sha512-xp4THTrod4aLpGy68FX/k1Q3nzrfHUjUe5v6FsdwXBl3YVMwgeXYQKDrku7n/D6qsJA9CuunarAboC2xCiKs1g==", + "peerDependencies": { + "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-device-detect": { "version": "2.2.2", "resolved": "https://registry.npmjs.org/react-device-detect/-/react-device-detect-2.2.2.tgz", diff --git a/package.json b/package.json index 6c923b23d..500a79afa 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "rc-tooltip": "^5.2.2", "react": "^18.2.0", "react-chartjs-2": "^4.3.1", + "react-circular-progressbar": "^2.1.0", "react-device-detect": "^2.2.2", "react-dom": "^18.2.0", "react-draggable": "^4.4.5", diff --git a/src/components/CircularProgress.tsx b/src/components/CircularProgress.tsx new file mode 100644 index 000000000..2dcffeab6 --- /dev/null +++ b/src/components/CircularProgress.tsx @@ -0,0 +1,22 @@ +import { + CircularProgressbar, + CircularProgressbarWithChildren, + buildStyles, +} from 'react-circular-progressbar'; +import 'react-circular-progressbar/dist/styles.css'; + +export default function CircularProgress({ + progress_percent = 0, +}: { + progress_percent?: number; +}) { + return ( + + ); +} diff --git a/src/components/InstanceLoadingCard.stories.tsx b/src/components/InstanceLoadingCard.stories.tsx index 01f08d62b..e8e31042c 100644 --- a/src/components/InstanceLoadingCard.stories.tsx +++ b/src/components/InstanceLoadingCard.stories.tsx @@ -14,12 +14,6 @@ const Template: ComponentStory = (args) => ( export const Default = Template.bind({}); Default.args = { - uuid: 'bruh moment', - name: 'My Minecraft Server', - port: 25565, - flavour: 'vanilla', - game_type: 'minecraft', focus: false, progress_percent: 0.5, - progress_title: 'Setting up...', }; diff --git a/src/components/InstanceLoadingCard.tsx b/src/components/InstanceLoadingCard.tsx index b0c94c083..0c8b5e8b6 100644 --- a/src/components/InstanceLoadingCard.tsx +++ b/src/components/InstanceLoadingCard.tsx @@ -5,6 +5,11 @@ import LoadingStatusIcon from './Atoms/LoadingStatusIcon'; import { EventLevel } from 'bindings/EventLevel'; import { OngoingState } from 'data/NotificationContext'; import ProgressBar from './Atoms/ProgressBar'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import clsx from 'clsx'; +import { faCircle } from '@fortawesome/free-solid-svg-icons'; +import { stateToColor } from 'utils/util'; +import CircularProgress from './CircularProgress'; const NotificationLevelToBgColorClass = ( level: EventLevel, @@ -29,77 +34,42 @@ const NotificationLevelToBgColorClass = ( }; export default function InstanceLoadingCard({ - uuid, - name, - port, - flavour, - game_type, - focus = false, progress_percent = 0, - progress_title = '', - level, - state, }: { level: EventLevel; state: OngoingState; - uuid: string; - name: string; - port: number; - flavour: string; - game_type: string; focus?: boolean; progress_percent?: number; - progress_title: string; }) { - const stateColor = 'gray'; - const borderClass = 'outline-gray-300 ring-gray-500'; - const actionMessage = 'Start'; + const stateColor = stateToColor['Starting']; return ( -
-
- {' '} -
- -

{progress_title}

-
- + -
-
-

{name}

-
-

00/20

- -
+ >
-
-
-
+

Setting up...

+ + ); } From 1a02aa9fe9a5790f9642c151a18b28b564badaa8 Mon Sep 17 00:00:00 2001 From: Ynng <44907675+Ynng@users.noreply.github.com> Date: Sun, 19 Feb 2023 19:07:49 -0500 Subject: [PATCH 2/5] re-organized files --- .../{ => Atoms}/CircularProgress.tsx | 0 .../DashboardLayout/InstanceList.tsx | 2 +- .../InstanceLoadingCard.stories.tsx | 6 ++ src/components/InstanceLoadingCard.tsx | 88 +++++++++++++------ .../InstanceLoadingPill.stories.tsx | 19 ++++ src/components/InstanceLoadingPill.tsx | 75 ++++++++++++++++ 6 files changed, 160 insertions(+), 30 deletions(-) rename src/components/{ => Atoms}/CircularProgress.tsx (100%) create mode 100644 src/components/InstanceLoadingPill.stories.tsx create mode 100644 src/components/InstanceLoadingPill.tsx diff --git a/src/components/CircularProgress.tsx b/src/components/Atoms/CircularProgress.tsx similarity index 100% rename from src/components/CircularProgress.tsx rename to src/components/Atoms/CircularProgress.tsx diff --git a/src/components/DashboardLayout/InstanceList.tsx b/src/components/DashboardLayout/InstanceList.tsx index 4091d7df5..822462ad4 100644 --- a/src/components/DashboardLayout/InstanceList.tsx +++ b/src/components/DashboardLayout/InstanceList.tsx @@ -1,7 +1,7 @@ import { faServer } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { RadioGroup } from '@headlessui/react'; -import InstanceLoadingCard from 'components/InstanceLoadingCard'; +import InstanceLoadingCard from 'components/InstanceLoadingPill'; import InstancePill from 'components/InstancePill'; import { InstanceContext } from 'data/InstanceContext'; import { NotificationContext } from 'data/NotificationContext'; diff --git a/src/components/InstanceLoadingCard.stories.tsx b/src/components/InstanceLoadingCard.stories.tsx index e8e31042c..01f08d62b 100644 --- a/src/components/InstanceLoadingCard.stories.tsx +++ b/src/components/InstanceLoadingCard.stories.tsx @@ -14,6 +14,12 @@ const Template: ComponentStory = (args) => ( export const Default = Template.bind({}); Default.args = { + uuid: 'bruh moment', + name: 'My Minecraft Server', + port: 25565, + flavour: 'vanilla', + game_type: 'minecraft', focus: false, progress_percent: 0.5, + progress_title: 'Setting up...', }; diff --git a/src/components/InstanceLoadingCard.tsx b/src/components/InstanceLoadingCard.tsx index 0c8b5e8b6..b0c94c083 100644 --- a/src/components/InstanceLoadingCard.tsx +++ b/src/components/InstanceLoadingCard.tsx @@ -5,11 +5,6 @@ import LoadingStatusIcon from './Atoms/LoadingStatusIcon'; import { EventLevel } from 'bindings/EventLevel'; import { OngoingState } from 'data/NotificationContext'; import ProgressBar from './Atoms/ProgressBar'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import clsx from 'clsx'; -import { faCircle } from '@fortawesome/free-solid-svg-icons'; -import { stateToColor } from 'utils/util'; -import CircularProgress from './CircularProgress'; const NotificationLevelToBgColorClass = ( level: EventLevel, @@ -34,42 +29,77 @@ const NotificationLevelToBgColorClass = ( }; export default function InstanceLoadingCard({ + uuid, + name, + port, + flavour, + game_type, + focus = false, progress_percent = 0, + progress_title = '', + level, + state, }: { level: EventLevel; state: OngoingState; + uuid: string; + name: string; + port: number; + flavour: string; + game_type: string; focus?: boolean; progress_percent?: number; + progress_title: string; }) { - const stateColor = stateToColor['Starting']; + const stateColor = 'gray'; + const borderClass = 'outline-gray-300 ring-gray-500'; + const actionMessage = 'Start'; return ( - // TODO - // - increase stroke width - // - change hardcoded 14px to rem (note: circluar progress bar fills the container it's in, read docs) - // - test it more - - +
+
+ ); } diff --git a/src/components/InstanceLoadingPill.stories.tsx b/src/components/InstanceLoadingPill.stories.tsx new file mode 100644 index 000000000..395c2c8cd --- /dev/null +++ b/src/components/InstanceLoadingPill.stories.tsx @@ -0,0 +1,19 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import InstanceLoadingCard from './InstanceLoadingPill'; + +export default { + title: 'library/InstanceLoadingCard', + component: InstanceLoadingCard, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( +
+ +
+); + +export const Default = Template.bind({}); +Default.args = { + focus: false, + progress_percent: 0.5, +}; diff --git a/src/components/InstanceLoadingPill.tsx b/src/components/InstanceLoadingPill.tsx new file mode 100644 index 000000000..2c316410d --- /dev/null +++ b/src/components/InstanceLoadingPill.tsx @@ -0,0 +1,75 @@ +import Button from './Atoms/Button'; +import Label from './Atoms/Label'; +import GameIcon from './Atoms/GameIcon'; +import LoadingStatusIcon from './Atoms/LoadingStatusIcon'; +import { EventLevel } from 'bindings/EventLevel'; +import { OngoingState } from 'data/NotificationContext'; +import ProgressBar from './Atoms/ProgressBar'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import clsx from 'clsx'; +import { faCircle } from '@fortawesome/free-solid-svg-icons'; +import { stateToColor } from 'utils/util'; +import CircularProgress from './Atoms/CircularProgress'; + +const NotificationLevelToBgColorClass = ( + level: EventLevel, + state?: OngoingState +) => { + switch (level) { + case 'Warning': + return 'bg-yellow'; + case 'Error': + return 'bg-red'; + default: + switch (state) { + case 'done': + return 'bg-green'; + case 'error': + return 'bg-red'; + case 'ongoing': + default: + return 'bg-blue-200/50'; + } + } +}; + +export default function InstanceLoadingCard({ + progress_percent = 0, +}: { + level: EventLevel; + state: OngoingState; + focus?: boolean; + progress_percent?: number; +}) { + const stateColor = stateToColor['Starting']; + + return ( + // TODO + // - increase stroke width + // - change hardcoded 14px to rem (note: circluar progress bar fills the container it's in, read docs) + // - test it more + + + ); +} From 665e245de868dcc83f4bee1358b3542b833a0c01 Mon Sep 17 00:00:00 2001 From: Ynng <44907675+Ynng@users.noreply.github.com> Date: Sun, 19 Feb 2023 19:13:36 -0500 Subject: [PATCH 3/5] Finished TODO --- src/components/Atoms/CircularProgress.tsx | 1 + src/components/InstanceLoadingPill.stories.tsx | 12 ++++++------ src/components/InstanceLoadingPill.tsx | 18 +++++------------- 3 files changed, 12 insertions(+), 19 deletions(-) diff --git a/src/components/Atoms/CircularProgress.tsx b/src/components/Atoms/CircularProgress.tsx index 2dcffeab6..1171d5b48 100644 --- a/src/components/Atoms/CircularProgress.tsx +++ b/src/components/Atoms/CircularProgress.tsx @@ -17,6 +17,7 @@ export default function CircularProgress({ pathColor: '#59B2F3', trailColor: 'rgba(209, 209, 218, 0.1)', })} + strokeWidth={15} /> ); } diff --git a/src/components/InstanceLoadingPill.stories.tsx b/src/components/InstanceLoadingPill.stories.tsx index 395c2c8cd..22ccbce10 100644 --- a/src/components/InstanceLoadingPill.stories.tsx +++ b/src/components/InstanceLoadingPill.stories.tsx @@ -1,14 +1,14 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'; -import InstanceLoadingCard from './InstanceLoadingPill'; +import InstanceLoadingPill from './InstanceLoadingPill'; export default { - title: 'library/InstanceLoadingCard', - component: InstanceLoadingCard, -} as ComponentMeta; + title: 'library/InstanceLoadingPill', + component: InstanceLoadingPill, +} as ComponentMeta; -const Template: ComponentStory = (args) => ( +const Template: ComponentStory = (args) => (
- +
); diff --git a/src/components/InstanceLoadingPill.tsx b/src/components/InstanceLoadingPill.tsx index 2c316410d..30c4d4da6 100644 --- a/src/components/InstanceLoadingPill.tsx +++ b/src/components/InstanceLoadingPill.tsx @@ -1,10 +1,5 @@ -import Button from './Atoms/Button'; -import Label from './Atoms/Label'; -import GameIcon from './Atoms/GameIcon'; -import LoadingStatusIcon from './Atoms/LoadingStatusIcon'; import { EventLevel } from 'bindings/EventLevel'; import { OngoingState } from 'data/NotificationContext'; -import ProgressBar from './Atoms/ProgressBar'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import clsx from 'clsx'; import { faCircle } from '@fortawesome/free-solid-svg-icons'; @@ -44,28 +39,25 @@ export default function InstanceLoadingCard({ const stateColor = stateToColor['Starting']; return ( - // TODO - // - increase stroke width - // - change hardcoded 14px to rem (note: circluar progress bar fills the container it's in, read docs) - // - test it more -