feat: adds uikit sidebar + adds utilities for scss + moves some files

frontend/src/app/components/uikitBlock/UikitBlock.tsx → frontend/src/app/components/uikit/uikitBlock/UikitBlock.tsx

@@ -7,12 +7,14 @@ import { toast } from "react-toastify";
 import { useTranslation } from "react-i18next";
 
 interface IUikitBlock {
+  id: string;
   title: string;
   codeBlock?: string;
   children: ReactNode;
 }
 
 export default function UikitBlock({
+  id,
   title,
   codeBlock,
   children,
@@ -25,7 +27,7 @@ export default function UikitBlock({
   };
 
   return (
-    <div className="uikit-block">
+    <div className="uikit-block" id={id}>
       <Typography.Heading4>{title}</Typography.Heading4>
       {children}
       {codeBlock && (

frontend/src/app/components/uikit/uikitNav/UikitNav.tsx

@@ -0,0 +1,29 @@
+import Typography from "@components/typography/Typography";
+import "./uikit-nav.scss";
+import Link from "@components/link/Link";
+
+export interface INavItem {
+  text: string;
+  id: string;
+}
+
+interface IUikitNav {
+  items: INavItem[];
+}
+
+function UikitNav({ items }: IUikitNav) {
+  return (
+    <div className="uikit-nav">
+      <Typography.Heading6>Components</Typography.Heading6>
+      <ul className="flex-column gap-xs">
+        {items.map((item) => (
+          <li key={item.id}>
+            <Link href={`#${item.id}`}>{item.text}</Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default UikitNav;

frontend/src/app/components/uikit/uikitNav/uikit-nav.scss

@@ -0,0 +1,14 @@
+.uikit-nav {
+  display: none;
+
+  @include media-min(xs) {
+    display: flex;
+    flex-direction: column;
+    gap: get-spacing(xs);
+    height: 100%;
+    margin-top: get-spacing(md);
+    max-width: rem(250);
+    position: sticky;
+    top: get-spacing(md);
+  }
+}

frontend/src/app/pages/uikit/UiKit.tsx

@@ -5,24 +5,18 @@ import Link from "@components/link/Link";
 import Loading from "@components/loading/Loading";
 import Spinner from "@components/spinner/Spinner";
 import Typography from "@components/typography/Typography";
-import UikitBlock from "@components/uikitBlock/UikitBlock";
-import UikitColor from "@components/uikitColor/UikitColor";
+import UikitBlock from "@components/uikit/uikitBlock/UikitBlock";
+import UikitColor from "@components/uikit/uikitColor/UikitColor";
+import UikitNav, { INavItem } from "@components/uikit/uikitNav/UikitNav";
 import { Grid, TextField } from "@mui/material";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ValidationError } from "yup";
 
 export default function UiKit() {
   const [t] = useTranslation();
   const [showLoading, setShowLoading] = useState(false);
-
-  const onClickShowLoading = useCallback(() => {
-    setShowLoading(true);
-
-    setTimeout(() => {
-      setShowLoading(false);
-    }, 3000);
-  }, []);
+  const [navItems, setNavItems] = useState<INavItem[]>([]);
 
   // this is for mocking, yup will format the error correctly for you
   const formErrors: ValidationError[] = [
@@ -56,106 +50,142 @@ export default function UiKit() {
     },
   ];
 
+  const onClickShowLoading = useCallback(() => {
+    setShowLoading(true);
+
+    setTimeout(() => {
+      setShowLoading(false);
+    }, 3000);
+  }, []);
+
+  useEffect(() => {
+    setNavItems(
+      Array.from(document.querySelectorAll(".uikit-block")).map(
+        (item, index) => {
+          return {
+            text: item.children[0].textContent || `Header ${index + 1}`,
+            id: item.id,
+          };
+        },
+      ),
+    );
+  }, []);
+
   return (
     <Layout.Container className="mb-lg">
-      <Typography.Heading1>UiKit</Typography.Heading1>
-      <Typography.Body1>
-        This is where you can display all your custom components/containers.
-      </Typography.Body1>
-      <Typography.Body1 className="flex gap-xxs">
-        For all the Styled MUI components, please refer to
-        <Link href="https://mui.com/material-ui/all-components/">
-          MUI documentation
-        </Link>
-      </Typography.Body1>
-
-      <div className="flex-column mt-lg gap-md">
-        <UikitBlock title="Typographies">
-          <Typography.Heading1>H1. Heading</Typography.Heading1>
-          <Typography.Heading2>H2. Heading</Typography.Heading2>
-          <Typography.Heading3>H3. Heading</Typography.Heading3>
-          <Typography.Heading4>H4. Heading</Typography.Heading4>
-          <Typography.Heading5>H5. Heading</Typography.Heading5>
-          <Typography.Heading6>H6. Heading</Typography.Heading6>
-          <Typography.Subtitle1>
-            subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-            Quos blanditiis tenetur
-          </Typography.Subtitle1>
-          <Typography.Subtitle2>
-            subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-            Quos blanditiis tenetur
-          </Typography.Subtitle2>
+      <div className="flex gap-lg position-relative">
+        <UikitNav items={navItems} />
+        <div className="flex-column">
+          <Typography.Heading1>UiKit</Typography.Heading1>
           <Typography.Body1>
-            body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-            Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore
-            consectetur, neque doloribus, cupiditate numquam dignissimos laborum
-            fugiat deleniti? Eum quasi quidem quibusdam.
+            This is where you can display all your custom components/containers.
+          </Typography.Body1>
+          <Typography.Body1 className="flex gap-xxs">
+            For all the Styled MUI components, please refer to
+            <Link href="https://mui.com/material-ui/all-components/">
+              MUI documentation
+            </Link>
           </Typography.Body1>
-          <Typography.Body2>
-            body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-            Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore
-            consectetur, neque doloribus, cupiditate numquam dignissimos laborum
-            fugiat deleniti? Eum quasi quidem quibusdam.
-          </Typography.Body2>
-          <Typography.ButtonMedium>button text</Typography.ButtonMedium>
-          <Typography.Caption>caption text</Typography.Caption>
-          <Typography.Overline>overline text</Typography.Overline>
-        </UikitBlock>
 
-        <UikitBlock title="Colors">
-          <Grid container>
-            <UikitColor color="primary" />
-            <UikitColor color="secondary" />
-            <UikitColor color="info" />
-            <UikitColor color="success" />
-            <UikitColor color="warning" />
-            <UikitColor color="error" />
-          </Grid>
-        </UikitBlock>
+          <div className="flex-column mt-lg gap-md">
+            <UikitBlock id="typographies" title="Typographies">
+              <Typography.Heading1>H1. Heading</Typography.Heading1>
+              <Typography.Heading2>H2. Heading</Typography.Heading2>
+              <Typography.Heading3>H3. Heading</Typography.Heading3>
+              <Typography.Heading4>H4. Heading</Typography.Heading4>
+              <Typography.Heading5>H5. Heading</Typography.Heading5>
+              <Typography.Heading6>H6. Heading</Typography.Heading6>
+              <Typography.Subtitle1>
+                subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing
+                elit. Quos blanditiis tenetur
+              </Typography.Subtitle1>
+              <Typography.Subtitle2>
+                subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing
+                elit. Quos blanditiis tenetur
+              </Typography.Subtitle2>
+              <Typography.Body1>
+                body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                Quos blanditiis tenetur unde suscipit, quam beatae rerum
+                inventore consectetur, neque doloribus, cupiditate numquam
+                dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
+              </Typography.Body1>
+              <Typography.Body2>
+                body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                Quos blanditiis tenetur unde suscipit, quam beatae rerum
+                inventore consectetur, neque doloribus, cupiditate numquam
+                dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
+              </Typography.Body2>
+              <Typography.ButtonMedium>button text</Typography.ButtonMedium>
+              <Typography.Caption>caption text</Typography.Caption>
+              <Typography.Overline>overline text</Typography.Overline>
+            </UikitBlock>
 
-        <UikitBlock
-          title="FieldHelperText.tsx"
-          codeBlock={`<TextField label="Username" />
+            <UikitBlock id="colors" title="Colors">
+              <Grid container>
+                <UikitColor color="primary" />
+                <UikitColor color="secondary" />
+                <UikitColor color="info" />
+                <UikitColor color="success" />
+                <UikitColor color="warning" />
+                <UikitColor color="error" />
+              </Grid>
+            </UikitBlock>
+
+            <UikitBlock
+              id="fieldhelpertext"
+              title="FieldHelperText.tsx"
+              codeBlock={`<TextField label="Username" />
 <FieldHelperText
   fieldNames="username"
   helperText="Name must be minimum 1 character"
 />`}
-        >
-          <TextField label={t("login__username")} />
-          <FieldHelperText
-            fieldNames="username"
-            helperText="Name must be minimum 1 character"
-          />
-        </UikitBlock>
+            >
+              <TextField label={t("login__username")} />
+              <FieldHelperText
+                fieldNames="username"
+                helperText="Name must be minimum 1 character"
+              />
+            </UikitBlock>
 
-        <UikitBlock
-          title="FieldHelperText.tsx - with errors"
-          codeBlock={`<TextField label="Username" />
+            <UikitBlock
+              id="fieldhelpertext-error"
+              title="FieldHelperText.tsx - with errors"
+              codeBlock={`<TextField label="Username" />
 <FieldHelperText
   fieldNames="username"
   formErrors={formErrors}
   helperText="Name must be minimum 1 character"
 />`}
-        >
-          <TextField label={t("login__username")} />
-          <FieldHelperText
-            fieldNames="username"
-            formErrors={formErrors}
-            helperText="Name must be minimum 1 character"
-          />
-        </UikitBlock>
+            >
+              <TextField label={t("login__username")} />
+              <FieldHelperText
+                fieldNames="username"
+                formErrors={formErrors}
+                helperText="Name must be minimum 1 character"
+              />
+            </UikitBlock>
 
-        <UikitBlock title="Spinner.tsx" codeBlock="<Spinner />">
-          {/* styling inline like this to prevent the spinner from changing the height of the page while spinning, do not style inline in projects */}
-          <div style={{ height: "64px" }}>
-            <Spinner />
-          </div>
-        </UikitBlock>
+            <UikitBlock
+              id="spinner"
+              title="Spinner.tsx"
+              codeBlock="<Spinner />"
+            >
+              {/* styling inline like this to prevent the spinner from changing the height of the page while spinning, do not style inline in projects */}
+              <div style={{ height: "64px" }}>
+                <Spinner />
+              </div>
+            </UikitBlock>
 
-        <UikitBlock title="Loading.tsx" codeBlock="<Loading />">
-          <Button onClick={onClickShowLoading}>Show Loading</Button>
-          {showLoading && <Loading />}
-        </UikitBlock>
+            <UikitBlock
+              id="loading"
+              title="Loading.tsx"
+              codeBlock="<Loading />"
+            >
+              <Button onClick={onClickShowLoading}>Show Loading</Button>
+              {showLoading && <Loading />}
+            </UikitBlock>
+          </div>
+        </div>
       </div>
     </Layout.Container>
   );

frontend/src/styles/_export.scss

@@ -2,15 +2,16 @@
 =                  Exports                    =
 ============================================ */
 
-$property: (
-  gap: gap,
-);
+$property: (gap);
 
 $property-with-direction: (
   m: margin,
   p: padding,
 );
 
+$position: (top, bottom, left, right);
+
+// Color
 @each $colorKey, $colorValue in $color {
   @each $colorSubkey, $colorSubvalue in $colorValue {
     #body .color-#{$colorKey}-#{$colorSubkey} {
@@ -19,6 +20,7 @@ $property-with-direction: (
   }
 }
 
+// Background-color
 @each $colorKey, $colorValue in $color {
   @each $colorSubkey, $colorSubvalue in $colorValue {
     #body .bg-#{$colorKey}-#{$colorSubkey} {
@@ -27,14 +29,16 @@ $property-with-direction: (
   }
 }
 
-@each $propertyKey, $propertyValue in $property {
+// Property-spacing (eg: gap-xs -> gap: get-spacing(xs))
+@each $propertyKey in $property {
   @each $spacingKey, $spacingValue in $spacing {
     #body .#{$propertyKey}-#{$spacingKey} {
-      #{$propertyValue}: $spacingValue;
+      #{$propertyKey}: $spacingValue;
     }
   }
 }
 
+// Property with direction-spacing (eg: mr-xs -> margin-right: get-spacing(xs))
 @each $propertyKey, $propertyValue in $property-with-direction {
   @each $spacingKey, $spacingValue in $spacing {
     @each $directionKey, $directionValues in $direction {
@@ -50,3 +54,12 @@ $property-with-direction: (
     }
   }
 }
+
+// Position-spacing (eg: top-xs -> top: get-spacing(xs))
+@each $positionKey in $position {
+  @each $spacingKey, $spacingValue in $spacing {
+    #body .#{$positionKey}-#{$spacingKey} {
+      #{$positionKey}: $spacingValue;
+    }
+  }
+}