From 237b8ee5a4b5e586ee0b8dac1dd1539e78d0e258 Mon Sep 17 00:00:00 2001 From: Ritesh Hiremath Date: Sun, 27 Oct 2024 14:18:50 +0530 Subject: [PATCH 1/4] Adding all the changes for circularprogress --- src/components/SistentNavigation/content.js | 17 +- .../components/circularprogress/code.js | 9 + .../components/circularprogress/guidance.js | 9 + .../components/circularprogress/index.js | 9 + .../components/circularprogress/code.js | 227 ++++++++++++++++++ .../components/circularprogress/guidance.js | 123 ++++++++++ .../components/circularprogress/index.js | 113 +++++++++ .../Projects/Sistent/components/index.js | 7 + 8 files changed, 513 insertions(+), 1 deletion(-) create mode 100644 src/pages/projects/sistent/components/circularprogress/code.js create mode 100644 src/pages/projects/sistent/components/circularprogress/guidance.js create mode 100644 src/pages/projects/sistent/components/circularprogress/index.js create mode 100644 src/sections/Projects/Sistent/components/circularprogress/code.js create mode 100644 src/sections/Projects/Sistent/components/circularprogress/guidance.js create mode 100644 src/sections/Projects/Sistent/components/circularprogress/index.js diff --git a/src/components/SistentNavigation/content.js b/src/components/SistentNavigation/content.js index 1932e1dc9356..70b8f975231c 100644 --- a/src/components/SistentNavigation/content.js +++ b/src/components/SistentNavigation/content.js @@ -87,5 +87,20 @@ export const content = [ id: 23, link: "/projects/sistent/components/text-field/code", text: "Text Field", - } + }, + { + id: 24, + link: "/projects/sistent/components/circularprogress", + text: "Circular Progress" + }, + { + id: 25, + link: "/projects/sistent/components/circularprogress/guidance", + text: "Circular Progress" + }, + { + id: 26, + link: "/projects/sistent/components/circularprogress/code", + text: "Circular Progress" + }, ]; diff --git a/src/pages/projects/sistent/components/circularprogress/code.js b/src/pages/projects/sistent/components/circularprogress/code.js new file mode 100644 index 000000000000..9bf124f49adc --- /dev/null +++ b/src/pages/projects/sistent/components/circularprogress/code.js @@ -0,0 +1,9 @@ +import React from "react"; +import { CircularprogressCode } from "../../../../../sections/Projects/Sistent/components/circularprogress/code"; + + +const ModalCodePage = () => { + return ; +}; + +export default ModalCodePage; \ No newline at end of file diff --git a/src/pages/projects/sistent/components/circularprogress/guidance.js b/src/pages/projects/sistent/components/circularprogress/guidance.js new file mode 100644 index 000000000000..ea6730ba0126 --- /dev/null +++ b/src/pages/projects/sistent/components/circularprogress/guidance.js @@ -0,0 +1,9 @@ +import React from "react"; +import { CircularprogressGuidance } from "../../../../../sections/Projects/Sistent/components/circularprogress/guidance"; + + +const ModalGuidancePage = () => { + return ; +}; + +export default ModalGuidancePage; \ No newline at end of file diff --git a/src/pages/projects/sistent/components/circularprogress/index.js b/src/pages/projects/sistent/components/circularprogress/index.js new file mode 100644 index 000000000000..ea684f23aea0 --- /dev/null +++ b/src/pages/projects/sistent/components/circularprogress/index.js @@ -0,0 +1,9 @@ +import React from "react"; +import { SistentCircularprogress } from "../../../../../sections/Projects/Sistent/components/circularprogress"; + + +const SistentModalPage = () => { + return ; +}; + +export default SistentModalPage; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/circularprogress/code.js b/src/sections/Projects/Sistent/components/circularprogress/code.js new file mode 100644 index 000000000000..5d2e319d4774 --- /dev/null +++ b/src/sections/Projects/Sistent/components/circularprogress/code.js @@ -0,0 +1,227 @@ +import React, { useState } from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { + SistentThemeProvider, + CircularProgress, +} from "@layer5/sistent"; +import { Row } from "../../../../../reusecore/Layout"; +import { SistentLayout } from "../../sistent-layout"; +import { CodeBlock } from "../button/code-block"; +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +const codes = [ + ` + + `, + `const [progress, setProgress] = React.useState(0); + + React.useEffect(() => { + const timer = setInterval(() => { + setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10)); + }, 800); + + return () => { + clearInterval(timer); + }; + }, []); + + + `, + ` + + + + `, + ` + + + + `, + ` + + + + `, + +]; + +export const CircularprogressCode = () => { + const { isDark } = useStyledDarkMode(); + const location = useLocation(); + + const [progress, setProgress] = useState(0); + + React.useEffect(() => { + const timer = setInterval(() => { + setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10)); + }, 800); + + return () => { + clearInterval(timer); + }; + }, []); + + return ( + +
+ +

Circular Progress

+ +

+ The Circular Progress component displays a circular loading indicator that represents + either determinate or indeterminate progress in your application. It's commonly used + to show loading states, progress of operations, or completion percentages. +

+
+ navigate("/projects/sistent/components/circularprogress")} + title="Overview" + /> + + navigate("/projects/sistent/components/circularprogress/guidance") + } + title="Guidance" + /> + navigate("/projects/sistent/components/circularprogress/code")} + title="Code" + /> +
+
+ + +

Basic CircularProgress

+ +

+ This example shows a basic circular progress indicator using the default settings. No props are needed to render this simple loader, ideal for processes with unknown durations. +

+

+ + + + + +

+
+ +
+ + +

Determinate Example

+ +

+ The determinate progress indicator is controlled by the variant and value props, allowing you to display a specific percentage of progress. Set variant="determinate" and value between 0 and 100 to indicate completion. +

+ +

+ + + + + +
+ +
+ + +

Size Variation Examples

+ +

+ These examples adjust the size of the circular progress indicator using the size prop. Set size to change the diameter of the circle, accommodating different layout requirements. +

+ + +

+ + +
+ +
+
+ +
+
+ +
+ + +
+ +
+ + +

Thickness Variation Examples

+ +

+ This variant modifies the width of the progress arc with the thickness prop. Use thickness to increase or decrease the line width, adding emphasis or subtlety to the indicator's appearance. +

+ + +

+ + +
+ +
+
+ +
+
+ +
+ + +
+ +
+ + +

Circular Color Examples

+ +

+ Various color options are applied to the circular progress using the color prop. Customize the appearance by setting color to values like "secondary," "success," or "inherit" to align with theme requirements. +

+ + +

+ + +
+ +
+
+ +
+
+ +
+ + +
+ +
+ +
+
+ + ); +}; diff --git a/src/sections/Projects/Sistent/components/circularprogress/guidance.js b/src/sections/Projects/Sistent/components/circularprogress/guidance.js new file mode 100644 index 000000000000..7759295f18e8 --- /dev/null +++ b/src/sections/Projects/Sistent/components/circularprogress/guidance.js @@ -0,0 +1,123 @@ +import React, { useState } from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { SistentLayout } from "../../sistent-layout"; +import { SistentThemeProvider, Button, CircularProgress } from "@layer5/sistent"; +import { Row } from "../../../../../reusecore/Layout"; +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +export const CircularprogressGuidance = () => { + const { isDark } = useStyledDarkMode(); + const location = useLocation(); + + const [size, setSize] = useState(40); // default size + const [thickness, setThickness] = useState(4); // default thickness + + return ( + +
+ +

Circular Progress

+ +

+ The Circular Progress component displays a circular loading indicator that represents + either determinate or indeterminate progress in your application. It's commonly used + to show loading states, progress of operations, or completion percentages. +

+
+ navigate("/projects/sistent/components/circularprogress")} + title="Overview" + /> + + navigate("/projects/sistent/components/circularprogress/guidance") + } + title="Guidance" + /> + navigate("/projects/sistent/components/circularprogress/code")} + title="Code" + /> +
+
+

+ Proper usage of the Circular Progress component can enhance user experience by visually indicating progress status. Below are some guidelines to ensure effective implementation. +

+ + +

Usage

+ +

+ To use the Circular Progress component, include it in your layout with the desired variant prop to specify whether it should be determinate or indeterminate. For example: +

+
    +
  • variant="indeterminate" for continuous loading.
    • +
  • variant="determinate" for specific progress indication.
    • +
+

+ The value prop is required for determinate progress to indicate how far along the task is, ranging from 0 to 100. +

+

+ +

Sizing

+ +

+ Adjust the size of the Circular Progress component using the size prop. For example, set size={60} to increase the diameter of the circular loader. +

+ + + +
+
+ + ); +}; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/circularprogress/index.js b/src/sections/Projects/Sistent/components/circularprogress/index.js new file mode 100644 index 000000000000..a9ecb591f6b2 --- /dev/null +++ b/src/sections/Projects/Sistent/components/circularprogress/index.js @@ -0,0 +1,113 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { SistentThemeProvider, CircularProgress } from "@layer5/sistent"; +import TabButton from "../../../../../reusecore/Button"; +import { SistentLayout } from "../../sistent-layout"; +import { Row } from "../../../../../reusecore/Layout"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +export const SistentCircularprogress = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
+ +

Circular Progress

+ +

+ The Circular Progress component displays a circular loading indicator that represents + either determinate or indeterminate progress in your application. It's commonly used + to show loading states, progress of operations, or completion percentages. +

+
+ navigate("/projects/sistent/components/circularprogress")} + title="Overview" + /> + + navigate("/projects/sistent/components/circularprogress/guidance") + } + title="Guidance" + /> + navigate("/projects/sistent/components/circularprogress/code")} + title="Code" + /> +
+
+

+ Circular Progress indicators inform users about the status of ongoing processes, + such as loading an application, submitting a form, or updating data. They help + maintain user engagement by providing visual feedback about the progress of operations. +

+ +

Usage

+ +

+ The component can be used in two main variants: +

+
    +

  • Determinate: Shows definite progress with a specific percentage value

    • +

  • Indeterminate: Shows an animation indicating an unspecified wait time

    • + +
+ +

Basic Example

+ +

+ Below is a simple example of how to use the CircularProgress component. +

+

+ + + + + + + +

+ +

Key Features

+ +

+ You can customize the appearance of the Circular Progress using + the `props` to define how the component + renders relative to its container element. +

+

Variants

+
    +

  • Determinate: Displays specific progress percentage

    • +

  • Indeterminate: Shows continuous animation for unknown duration processes

    • +
+

Customization Options

+
    +

  • Size: Adjustable diameter of the progress circle

    • +

  • Thickness: Controllable width of the progress arc

    • +

  • Color: Customizable colors for both track and progress

    • +

  • Value: Percentage complete (0-100) for determinate variant

    • +
+
+
+ + ); +}; diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index fa716d565a50..f44df1c19a0d 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -50,6 +50,13 @@ const componentsData = [ description: "The TextField component is a versatile input field used to capture user input in forms and user interfaces.", url: "/projects/sistent/components/text-field", + }, + { + id: 7, + name: "Circular Progress", + description: + "This is a Circular Progress element", + url: "/projects/sistent/components/circularprogress", } ]; From 3d335094372abe368f67d7143d01a9f1abc461d6 Mon Sep 17 00:00:00 2001 From: Ritesh Hiremath Date: Sun, 27 Oct 2024 14:32:40 +0530 Subject: [PATCH 2/4] Added the sign with some changes Signed-off-by: Ritesh Hiremath --- .../Projects/Sistent/components/circularprogress/code.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sections/Projects/Sistent/components/circularprogress/code.js b/src/sections/Projects/Sistent/components/circularprogress/code.js index 5d2e319d4774..4abbe7c78fec 100644 --- a/src/sections/Projects/Sistent/components/circularprogress/code.js +++ b/src/sections/Projects/Sistent/components/circularprogress/code.js @@ -112,7 +112,7 @@ export const CircularprogressCode = () => {

Basic CircularProgress

- This example shows a basic circular progress indicator using the default settings. No props are needed to render this simple loader, ideal for processes with unknown durations. + This example shows a basic circular progress indicator with the default settings. No props are needed to render this simple loader, ideal for processes with unknown durations.



From 9ef8c589092d68701b69cbd9db0d7479c9c1ec96 Mon Sep 17 00:00:00 2001 From: Ritesh Hiremath Date: Mon, 28 Oct 2024 20:04:55 +0530 Subject: [PATCH 3/4] Added some changes to code and guidance page Signed-off-by: Ritesh Hiremath --- .../components/circularprogress/code.js | 69 ++++++++++++++++++- .../components/circularprogress/guidance.js | 16 ++++- 2 files changed, 81 insertions(+), 4 deletions(-) diff --git a/src/sections/Projects/Sistent/components/circularprogress/code.js b/src/sections/Projects/Sistent/components/circularprogress/code.js index 4abbe7c78fec..3abd7d211c4d 100644 --- a/src/sections/Projects/Sistent/components/circularprogress/code.js +++ b/src/sections/Projects/Sistent/components/circularprogress/code.js @@ -4,13 +4,15 @@ import { useLocation } from "@reach/router"; import { SistentThemeProvider, CircularProgress, + Box, } from "@layer5/sistent"; import { Row } from "../../../../../reusecore/Layout"; import { SistentLayout } from "../../sistent-layout"; import { CodeBlock } from "../button/code-block"; import TabButton from "../../../../../reusecore/Button"; import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - +import WarningIcon from "@mui/icons-material/Warning"; +import ReportIcon from "@mui/icons-material/Report"; const codes = [ ` @@ -44,6 +46,18 @@ const codes = [ `, + ` + import ReportIcon from "@mui/icons-material/Report"; + import WarningIcon from "@mui/icons-material/Warning"; + + + + + + + + + ` ]; @@ -219,6 +233,59 @@ export const CircularprogressCode = () => {
+ + + +

Circular Progress with Centered Icon Overlay Examples

+ +

+ By default, any children nested inside the Circular Progress will be centered, allowing icons or text to overlay seamlessly. +

+ + +

+ + + + + + + + + + + + + + + + + + + + + +
+ +
diff --git a/src/sections/Projects/Sistent/components/circularprogress/guidance.js b/src/sections/Projects/Sistent/components/circularprogress/guidance.js index 7759295f18e8..485612d2ac4f 100644 --- a/src/sections/Projects/Sistent/components/circularprogress/guidance.js +++ b/src/sections/Projects/Sistent/components/circularprogress/guidance.js @@ -7,13 +7,15 @@ import { Row } from "../../../../../reusecore/Layout"; import TabButton from "../../../../../reusecore/Button"; import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + export const CircularprogressGuidance = () => { const { isDark } = useStyledDarkMode(); const location = useLocation(); const [size, setSize] = useState(40); // default size const [thickness, setThickness] = useState(4); // default thickness - + const maxSize = 80; + const maxThickness = 10; return (
@@ -90,7 +92,11 @@ export const CircularprogressGuidance = () => { label="Increase Size" size="medium" style={{ marginLeft: "20px" }} - onClick={() => setSize(size + 10)} // Increase size on click + onClick={() => { + if (size < maxSize) { + setSize(size + 10); + } + }} /> @@ -111,7 +117,11 @@ export const CircularprogressGuidance = () => { label="Increase Thickness" size="medium" style={{ marginLeft: "20px" }} - onClick={() => setThickness(thickness + 2)} + onClick={() => { + if (thickness < maxThickness) { + setThickness(thickness + 2); + } + }} /> From 1286dd4ed6dd235b9f48682bc52cdd58ffddbc39 Mon Sep 17 00:00:00 2001 From: Ritesh Hiremath Date: Wed, 30 Oct 2024 20:35:01 +0530 Subject: [PATCH 4/4] Changed the title of the component Signed-off-by: Ritesh Hiremath --- src/sections/Projects/Sistent/components/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index 54fe625d5e9b..1feadbd9ba75 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -55,7 +55,7 @@ const componentsData = [ id: 7, name: "Circular Progress", description: - "This is a Circular Progress element", + "The Circular Progress component displays a circular loading indicator that represents the progress in your application", url: "/projects/sistent/components/circularprogress", }, {