start adding ProgressBar component

src/core/builtins/dashboard/pages/Test.jsx

@@ -1,7 +1,7 @@
 // const { Table } = require('@vizality/components');
-import React, { memo, useState, useEffect } from 'react';
+import React, { memo, useState, useEffect, useRef } from 'react';
 
-import { UserProfile, UserPopout, Icon, SearchBar, KeyboardShortcut, KeybindRecorder, Avatar, Text, HeaderBarContainer, CarouselWithPreview, ApplicationCommandDiscoverySectionList, ApplicationStoreListingCarousel, FormNotice, Notice, NumberBadge, TextBadge, IconBadge, AsyncComponent } from '@vizality/components';
+import { UserProfile, UserPopout, Icon, SearchBar, KeyboardShortcut, KeybindRecorder, Avatar, Text, HeaderBarContainer, CarouselWithPreview, ApplicationCommandDiscoverySectionList, ApplicationStoreListingCarousel, FormNotice, Notice, NumberBadge, TextBadge, IconBadge, AsyncComponent, ProgressBar } from '@vizality/components';
 import { getModuleByDisplayName, getModule } from '@vizality/webpack';
 
 const TransitionGroup = getModuleByDisplayName('TransitionGroup');
@@ -29,6 +29,12 @@ const KeybindEntry = (() => {
 })();
 const { usePaymentModalAnimationScene } = getModule('usePaymentModalAnimationScene');
 export default memo(() => {
+  const [ completed, setCompleted ] = useState(0);
+
+  useEffect(() => {
+    setInterval(() => setCompleted(Math.floor(Math.random() * 100) + 1), 2000);
+  }, []);
+
   return (
     <>
     {/* e.WAITING = "WAITING",
@@ -49,6 +55,7 @@ export default memo(() => {
         onScenePlay={PremiumPaymentGuildAnimation.getNextScene}
         pauseWhileUnfocused={false}
       />
+      <ProgressBar completed={completed} />
       <SearchBar query='bob' size={SearchBar.Sizes.SMALL} />
       <SearchBar query='bob' size={SearchBar.Sizes.MEDIUM} />
       <SearchBar query='bob' size={SearchBar.Sizes.LARGE} />

src/core/modules/components/ProgressBar.jsx

@@ -0,0 +1,49 @@
+import React, { memo } from 'react';
+
+export default memo(({
+  completed,
+  labelAlignment,
+  transitionDuration,
+  transitionTimingFunction,
+  className,
+  dir,
+  ariaValuemin,
+  ariaValuemax,
+  ariaValuetext
+}) => {
+  const fillerStyles = {
+    width: Number(completed) > 100 ? `100%` : `${Number(completed)}%`,
+    transition: `width ${transitionDuration || '1s'} ${
+      transitionTimingFunction || 'ease-in-out'
+    }`,
+    display: 'flex',
+    alignItems: 'center'
+  };
+
+  const completedStr = typeof completed === 'number' ? `${completed}%` : `${completed}`;
+
+  return (
+    <div
+      className={className}
+      dir={dir}
+      role="progressbar"
+      aria-valuenow={parseFloat(completedStr)}
+      aria-valuemin={ariaValuemin}
+      aria-valuemax={ariaValuemax}
+      aria-valuetext={`${
+        ariaValuetext === null ? completedStr : ariaValuetext
+      }`}
+    >
+      <div>
+        <div style={fillerStyles}>
+          {labelAlignment !== 'outside' && (
+            <span>{completedStr}</span>
+          )}
+        </div>
+      </div>
+      {labelAlignment === 'outside' && (
+        <span>{completedStr}</span>
+      )}
+    </div>
+  );
+});

src/core/modules/components/index.js

@@ -72,6 +72,7 @@ export const Card = AsyncComponent.fromDisplayName('Card');
 export const Text = AsyncComponent.fromDisplayName('Text');
 export const Flex = AsyncComponent.fromDisplayName('Flex');
 
+export { default as ProgressBar } from './ProgressBar';
 export { default as ComponentPreview } from './ComponentPreview';
 export { default as OverflowTooltip } from './OverflowTooltip';
 export { default as AsyncComponent } from './AsyncComponent';