From 1c42653eb541b60e537e495350a677fbc630721e Mon Sep 17 00:00:00 2001 From: Mdkaif-123 Date: Sun, 3 Nov 2024 02:27:06 +0530 Subject: [PATCH 1/9] feat : add sistent-box component Signed-off-by: Mdkaif-123 --- .../projects/sistent/components/box/code.js | 8 + .../sistent/components/box/guidance.js | 8 + .../projects/sistent/components/box/index.js | 8 + .../Projects/Sistent/components/box/code.js | 215 ++++++++++++++++++ .../Sistent/components/box/guidance.js | 179 +++++++++++++++ .../Projects/Sistent/components/box/index.js | 133 +++++++++++ .../Projects/Sistent/components/index.js | 7 + 7 files changed, 558 insertions(+) create mode 100644 src/pages/projects/sistent/components/box/code.js create mode 100644 src/pages/projects/sistent/components/box/guidance.js create mode 100644 src/pages/projects/sistent/components/box/index.js create mode 100644 src/sections/Projects/Sistent/components/box/code.js create mode 100644 src/sections/Projects/Sistent/components/box/guidance.js create mode 100644 src/sections/Projects/Sistent/components/box/index.js diff --git a/src/pages/projects/sistent/components/box/code.js b/src/pages/projects/sistent/components/box/code.js new file mode 100644 index 000000000000..f7228ded370a --- /dev/null +++ b/src/pages/projects/sistent/components/box/code.js @@ -0,0 +1,8 @@ +import React from "react"; +import { BoxCode } from "../../../../../sections/Projects/Sistent/components/box/code"; + +const BoxCodePage = () => { + return ; +}; + +export default BoxCodePage; diff --git a/src/pages/projects/sistent/components/box/guidance.js b/src/pages/projects/sistent/components/box/guidance.js new file mode 100644 index 000000000000..7294f7552040 --- /dev/null +++ b/src/pages/projects/sistent/components/box/guidance.js @@ -0,0 +1,8 @@ +import React from "react"; +import { BoxGuidance } from "../../../../../sections/Projects/Sistent/components/box/guidance"; + +const BoxGuidancePage = () => { + return ; +}; + +export default BoxGuidancePage; diff --git a/src/pages/projects/sistent/components/box/index.js b/src/pages/projects/sistent/components/box/index.js new file mode 100644 index 000000000000..6498891a060d --- /dev/null +++ b/src/pages/projects/sistent/components/box/index.js @@ -0,0 +1,8 @@ +import React from "react"; +import SistentBox from "../../../../../sections/Projects/Sistent/components/Box/index"; + +const SistentBoxPage = () => { + return ; +}; + +export default SistentBoxPage; diff --git a/src/sections/Projects/Sistent/components/box/code.js b/src/sections/Projects/Sistent/components/box/code.js new file mode 100644 index 000000000000..e8d854f37598 --- /dev/null +++ b/src/sections/Projects/Sistent/components/box/code.js @@ -0,0 +1,215 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; + +import { SistentThemeProvider, Container, Box } from "@layer5/sistent"; +import { CodeBlock } from "../button/code-block"; +// import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight"; +import { SistentLayout } from "../../sistent-layout"; + +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +const codes = [ + ` + +

+ This is a Box component with custom background and padding. +

+ + `, + ` + +

+ This Box is responsive, changing style based on screen size. +

+ + `, + ` + +

+ This Box is responsive, changing style based on screen size. +

+ + `, + ` + +

Hover over this Box to see the interactive effect.

+ + `, +]; + +export const BoxCode = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
+ +

Box

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

+ The Box component is a flexible and foundational + container in Sistent, designed to structure and style content. It + provides quick access to the theme and CSS utilities, allowing for + easy customization and responsive design. Using the sx prop, + developers can apply CSS styles directly with theme-aware + properties, making Box ideal for layouts, spacing, and other UI + adjustments. It can render as any HTML element using the component + prop, offering high versatility in both structure and styling. +

+ +

Basic Box Example

+ +

+ A simple Box component can be used to contain and structure other + elements. Here, the Box serves as a basic container without any + styling applied. +

+
+
+ + +

This is a basic Box component.

+ + +
+ +
+ +

Styled Box Example

+ +

+ You can add custom styles to a Box component by applying{" "} + sx + properties. In this example, the Box has a background color, + padding, and a defined height. +

+
+
+ + +

+ This is a Box component with custom background and padding. +

+ + +
+ +
+ +

Responsive Box Example

+ +

+ The Box component also supports responsive styling using the{" "} + sx prop. In this example, the Box adjusts its padding + and background color based on screen size. +

+
+
+ + +

+ This Box is responsive, changing style based on screen size. +

+ + +
+ +
+ +

Interactive Box Example

+ +

+ Here’s an example where the Box component includes hover effects to + create a more interactive experience. This is useful for buttons, + cards, and other clickable elements. +

+
+
+ + +

Hover over this Box to see the interactive effect.

+ + +
+ +
+
+
+ + ); +}; diff --git a/src/sections/Projects/Sistent/components/box/guidance.js b/src/sections/Projects/Sistent/components/box/guidance.js new file mode 100644 index 000000000000..3e85249c68b7 --- /dev/null +++ b/src/sections/Projects/Sistent/components/box/guidance.js @@ -0,0 +1,179 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { Row } from "../../../../../reusecore/Layout"; +import { SistentThemeProvider, Box } from "@layer5/sistent"; +import { SistentLayout } from "../../sistent-layout"; + +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +export const BoxGuidance = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
+ +

Box

+ +

+ The Box component is a flexible, theme-aware container that adapts + seamlessly across various layouts. It provides a convenient way to + apply styles, positioning, and responsive adjustments to content, + making it ideal for any layout needs. +

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

+ The Box component is a highly versatile tool that can be used for + layout management, spacing, styling, and more. With full support for + responsive design, Box is an essential part of any well-structured + application, allowing developers to customize and style elements + while keeping the theme consistent. +

+ + +

Function

+ + +

The Box component serves several functions:

+ +

Responsive Styling

+

+ The sx prop makes it easy to apply responsive styles + directly within the component, allowing for adaptive design that + looks great across all screen sizes. +

+ + + +

+ This is a responsive Box component. +

+ + + + +

Flexible Layout Control

+

+ Box can serve as a container for organizing other elements, whether + it's aligning text, images, or interactive components. The + flexibility of the Box component allows it to adapt to a wide range + of layout needs, from card-style containers to more complex nested + structures. +

+ +

Customizable Appearance

+

+ The Box component’s customization options allow you to adjust + colors, borders, shadows, and more through the sx prop, + ensuring that components blend well with your app's overall theme. +

+ + + +

+ Customized Box with shadow and color. +

+ + + + + +

Use Cases

+ + +

Nested Layouts

+

+ Use Box to create nested layouts by embedding one Box within + another, each with distinct styling. This setup enables the creation + of structured and multi-layered designs. +

+ + + + +

Nested Box layout example.

+ + + + + +

Utility for Spacing and Margin

+

+ Leveraging Box for margin and padding adjustments offers + fine-grained control over spacing between components, making it + useful in complex layouts where alignment and spacing are crucial. +

+ +

Event Handling and State Management

+

+ Box can also be used as an interactive element, handling events and + managing state. This makes it ideal for use cases that require + dynamic behavior or user interaction. +

+ +

Responsive Design

+

+ The Box component seamlessly integrates with Sistent’s responsive + design principles, providing a cohesive experience across various + screen sizes by leveraging breakpoints in the sx prop. +

+
+
+ + ); +}; diff --git a/src/sections/Projects/Sistent/components/box/index.js b/src/sections/Projects/Sistent/components/box/index.js new file mode 100644 index 000000000000..bb02738c6122 --- /dev/null +++ b/src/sections/Projects/Sistent/components/box/index.js @@ -0,0 +1,133 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; + +import { SistentThemeProvider, Box } from "@layer5/sistent"; +import TabButton from "../../../../../reusecore/Button"; +import { SistentLayout } from "../../sistent-layout"; +import { Row } from "../../../../../reusecore/Layout"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +const SistentBox = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
+ +

Box

+ +

+ The Box component is a versatile, theme-aware container + in Sistent, ideal for styling and layout customization. It supports + the sx prop for easy, responsive styling and can render as any HTML + element. +

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

+ The Box component is a flexible and foundational + container in Sistent, designed to structure and style content. It + provides quick access to the theme and CSS utilities, allowing for + easy customization and responsive design. Using the sx prop, + developers can apply CSS styles directly with theme-aware + properties, making Box ideal for layouts, spacing, and other UI + adjustments. It can render as any HTML element using the component + prop, offering high versatility in both structure and styling. +

+ +

Usage

+ +

+ The Box component differs from other containers available in Sistent + in that its usage is intended to be multipurpose and open-ended, + just like a `div`. Components like Container, Stack and + Paper, by contrast, feature usage-specific props that make them + ideal for certain use cases: Container for main layout orientation, + Stack for one-dimensional layouts, and Paper for elevated surfaces. +

+

Box component

+

+ The Box component renders as a `div` by default, but + you can swap in any other valid HTML tag or React component using + the component prop. The demo below replaces the `div` + with a `section` element: +

+ + + + This Box renders as an HTML section element. + + + + + +

Customization

+ +

+ The Box component can be styled flexibly with Sistent + sxprop and custom themes. The sx prop allows quick + application of CSS styles that are theme-aware, enabling responsive + and consistent design. +

+ +

Using the sx Prop

+

+ The sx prop supports a wide range of style properties, including + colors, spacing, and responsive adjustments. It directly accesses + theme values, allowing you to apply theme-based styles to a Box with + minimal code. +

+ + + + + +
+
+ + ); +}; + +export default SistentBox; diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index 7814f6ed237a..43a123856e87 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -65,6 +65,13 @@ const componentsData = [ "Containers align and center content, providing responsive layout options for different screen sizes.", url: "/projects/sistent/components/container", }, + { + id: 11, + name: "Box", + description: + "Box is used as a flexible container for layout and styling, allowing quick customization and responsive design adjustments.", + url: "/projects/sistent/components/box", + }, ]; const SistentComponents = () => { From bd907d9ec18c751baf05cc26975352365a8dd24f Mon Sep 17 00:00:00 2001 From: Mdkaif-123 Date: Sun, 3 Nov 2024 02:35:06 +0530 Subject: [PATCH 2/9] chore: removed unwanted and commented code Signed-off-by: Mdkaif-123 --- src/sections/Projects/Sistent/components/box/code.js | 3 +-- src/sections/Projects/Sistent/components/index.js | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/sections/Projects/Sistent/components/box/code.js b/src/sections/Projects/Sistent/components/box/code.js index e8d854f37598..ce90dba3e470 100644 --- a/src/sections/Projects/Sistent/components/box/code.js +++ b/src/sections/Projects/Sistent/components/box/code.js @@ -2,9 +2,8 @@ import React from "react"; import { navigate } from "gatsby"; import { useLocation } from "@reach/router"; -import { SistentThemeProvider, Container, Box } from "@layer5/sistent"; +import { SistentThemeProvider, Box } from "@layer5/sistent"; import { CodeBlock } from "../button/code-block"; -// import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight"; import { SistentLayout } from "../../sistent-layout"; import TabButton from "../../../../../reusecore/Button"; diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index 43a123856e87..c2377980bff9 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -66,7 +66,7 @@ const componentsData = [ url: "/projects/sistent/components/container", }, { - id: 11, + id: 10, name: "Box", description: "Box is used as a flexible container for layout and styling, allowing quick customization and responsive design adjustments.", From bca574ac083c0209ad27f2996bf43b20e544cadc Mon Sep 17 00:00:00 2001 From: Mdkaif-123 Date: Sun, 3 Nov 2024 02:54:33 +0530 Subject: [PATCH 3/9] fix: CI/CD issues Signed-off-by: Mdkaif-123 --- src/pages/projects/sistent/components/box/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/projects/sistent/components/box/index.js b/src/pages/projects/sistent/components/box/index.js index 6498891a060d..31eb7536a5e2 100644 --- a/src/pages/projects/sistent/components/box/index.js +++ b/src/pages/projects/sistent/components/box/index.js @@ -1,5 +1,5 @@ import React from "react"; -import SistentBox from "../../../../../sections/Projects/Sistent/components/Box/index"; +import SistentBox from "../../../../../sections/Projects/Sistent/components/box/index"; const SistentBoxPage = () => { return ; From d204c77c958ed10ae62fd58f9c0156a4c3c6db7e Mon Sep 17 00:00:00 2001 From: Mdkaif-123 Date: Wed, 6 Nov 2024 02:13:36 +0530 Subject: [PATCH 4/9] chore: changed font color of box example Signed-off-by: Mdkaif-123 --- .../Projects/Sistent/components/box/code.js | 16 +++++++++------- .../Projects/Sistent/components/box/guidance.js | 6 +++--- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/sections/Projects/Sistent/components/box/code.js b/src/sections/Projects/Sistent/components/box/code.js index ce90dba3e470..27c3074654f2 100644 --- a/src/sections/Projects/Sistent/components/box/code.js +++ b/src/sections/Projects/Sistent/components/box/code.js @@ -10,14 +10,14 @@ import TabButton from "../../../../../reusecore/Button"; import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; const codes = [ - ` + `

This is a Box component with custom background and padding.

`, - ` + ` `, - ` + ` `, - ` + ` {
-

+

This is a Box component with custom background and padding.

@@ -170,7 +170,7 @@ export const BoxCode = () => { height: "50vh", }} > -

+

This Box is responsive, changing style based on screen size.

@@ -201,7 +201,9 @@ export const BoxCode = () => { }, }} > -

Hover over this Box to see the interactive effect.

+

+ Hover over this Box to see the interactive effect. +

diff --git a/src/sections/Projects/Sistent/components/box/guidance.js b/src/sections/Projects/Sistent/components/box/guidance.js index 3e85249c68b7..9edf1052df65 100644 --- a/src/sections/Projects/Sistent/components/box/guidance.js +++ b/src/sections/Projects/Sistent/components/box/guidance.js @@ -87,7 +87,7 @@ export const BoxGuidance = () => { "&:hover": { bgcolor: "primary.light" }, }} > -

+

This is a responsive Box component.

@@ -119,7 +119,7 @@ export const BoxGuidance = () => { borderRadius: 4, }} > -

+

Customized Box with shadow and color.

@@ -146,7 +146,7 @@ export const BoxGuidance = () => { }} > -

Nested Box layout example.

+

Nested Box layout example.

 From 94db6df193dda3616f48f4d5fbb3bcea02336cae Mon Sep 17 00:00:00 2001 From: Mdkaif-123 Date: Wed, 6 Nov 2024 02:16:20 +0530 Subject: [PATCH 5/9] chore: removed initialMode from theme-provider code example Signed-off-by: Mdkaif-123 --- src/sections/Projects/Sistent/components/box/code.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/sections/Projects/Sistent/components/box/code.js b/src/sections/Projects/Sistent/components/box/code.js index 27c3074654f2..3ec996d50b50 100644 --- a/src/sections/Projects/Sistent/components/box/code.js +++ b/src/sections/Projects/Sistent/components/box/code.js @@ -10,14 +10,14 @@ import TabButton from "../../../../../reusecore/Button"; import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; const codes = [ - ` + `

This is a Box component with custom background and padding.

`, - ` + ` `, - ` + ` `, - ` + ` Date: Wed, 6 Nov 2024 02:24:31 +0530 Subject: [PATCH 6/9] chore: update code example Signed-off-by: Mdkaif-123 --- src/sections/Projects/Sistent/components/box/code.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/sections/Projects/Sistent/components/box/code.js b/src/sections/Projects/Sistent/components/box/code.js index 3ec996d50b50..49f6606ab156 100644 --- a/src/sections/Projects/Sistent/components/box/code.js +++ b/src/sections/Projects/Sistent/components/box/code.js @@ -25,7 +25,7 @@ const codes = [ height: "50vh", }} > -

+

This Box is responsive, changing style based on screen size.

@@ -38,7 +38,7 @@ const codes = [ height: "50vh", }} > -

+

This Box is responsive, changing style based on screen size.

@@ -56,7 +56,7 @@ const codes = [ }, }} > -

Hover over this Box to see the interactive effect.

+

Hover over this Box to see the interactive effect.

`, ]; From 834d9ca23648dd763814fe01769591d8f9bc6c5c Mon Sep 17 00:00:00 2001 From: Mdkaif-123 Date: Thu, 7 Nov 2024 01:17:36 +0530 Subject: [PATCH 7/9] chore: fix code example indendation Signed-off-by: Mdkaif-123 --- .../Projects/Sistent/components/box/code.js | 98 +++++++++---------- 1 file changed, 49 insertions(+), 49 deletions(-) diff --git a/src/sections/Projects/Sistent/components/box/code.js b/src/sections/Projects/Sistent/components/box/code.js index 49f6606ab156..a6ece85cb494 100644 --- a/src/sections/Projects/Sistent/components/box/code.js +++ b/src/sections/Projects/Sistent/components/box/code.js @@ -10,55 +10,55 @@ import TabButton from "../../../../../reusecore/Button"; import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; const codes = [ - ` - -

- This is a Box component with custom background and padding. -

- - `, - ` - -

- This Box is responsive, changing style based on screen size. -

- - `, - ` - -

- This Box is responsive, changing style based on screen size. -

- - `, - ` - -

Hover over this Box to see the interactive effect.

- - `, + ` + +

+ This is a Box component with custom background and padding. +

+ + `, + ` + +

+ This Box is responsive, changing style based on screen size. +

+ + `, + ` + +

+ This Box is responsive, changing style based on screen size. +

+ + `, + ` + +

Hover over this Box to see the interactive effect.

+ + `, ]; export const BoxCode = () => { From 2a93ef126d1bb9420cf4adcd209d222517c0d1cb Mon Sep 17 00:00:00 2001 From: Mdkaif-123 Date: Thu, 7 Nov 2024 01:28:39 +0530 Subject: [PATCH 8/9] chore: fix code example indendation Signed-off-by: Mdkaif-123 --- src/sections/Projects/Sistent/components/box/code.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/sections/Projects/Sistent/components/box/code.js b/src/sections/Projects/Sistent/components/box/code.js index a6ece85cb494..e4efc05a6758 100644 --- a/src/sections/Projects/Sistent/components/box/code.js +++ b/src/sections/Projects/Sistent/components/box/code.js @@ -16,7 +16,7 @@ const codes = [ This is a Box component with custom background and padding.

- `, +`, ` - `, +`, ` - `, +`, `

Hover over this Box to see the interactive effect.

 - `, +`, ]; export const BoxCode = () => { From 100b21e135fa91d873cb243bf82a5b8bc1e207a7 Mon Sep 17 00:00:00 2001 From: Mdkaif-123 Date: Tue, 12 Nov 2024 00:36:58 +0530 Subject: [PATCH 9/9] chore: rmeoved SistentThemeProvider from code example Signed-off-by: Mdkaif-123 --- .../Projects/Sistent/components/box/code.js | 84 +++++++++---------- 1 file changed, 38 insertions(+), 46 deletions(-) diff --git a/src/sections/Projects/Sistent/components/box/code.js b/src/sections/Projects/Sistent/components/box/code.js index e4efc05a6758..e2ef20c0ed79 100644 --- a/src/sections/Projects/Sistent/components/box/code.js +++ b/src/sections/Projects/Sistent/components/box/code.js @@ -10,55 +10,47 @@ import TabButton from "../../../../../reusecore/Button"; import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; const codes = [ - ` - -

- This is a Box component with custom background and padding. -

- -`, - ` - -

- This Box is responsive, changing style based on screen size. -

- -`, - ` - +

+ This is a Box component with custom background and padding. +

+`, + ` +

+ This Box is responsive, changing style based on screen size. +

+`, + ` -

- This Box is responsive, changing style based on screen size. -

- -`, - ` - + This Box is responsive, changing style based on screen size. +

+`, + `

Hover over this Box to see the interactive effect.

- -`, +`, ]; export const BoxCode = () => {