@yourdash/uikit 1.0.0 → 1.0.2

package/views/navBar/components/navTitle/navTitle.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import Heading from "../../../../components/heading/heading.tsx";
+
+const NavTitle: React.FC<{ title: string }> = ({ title }) => {
+  return (
+    <Heading
+      text={title}
+      level={2}
+    />
+  );
+};
+
+export default NavTitle;

package/views/navBar/navBar.module.scss

@@ -0,0 +1,22 @@
+@import "@yourdash/uikit/theme/themeValues";
+
+.component {
+    --nav-height: calc(2rem + var(#{$theme+$padding}));
+
+    width: 100%;
+    height: calc(var(--nav-height) + calc(var(#{$theme+$padding}) * 2));
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+    padding: var(#{$theme+$padding});
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    justify-content: center;
+    align-items: center;
+}
+
+.segment {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

package/views/navBar/navBar.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import Box from "../../components/box/box.tsx";
+import styles from "./navBar.module.scss";
+import Flex from "../../components/flex/flex.tsx";
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+
+const NavBar: React.FC<{
+  leftSection?: React.ReactElement | React.ReactElement[];
+  centerSection?: React.ReactElement | React.ReactElement[];
+  rightSection?: React.ReactElement | React.ReactElement[];
+  className?: string;
+}> = ({ leftSection, centerSection, rightSection, className }) => {
+  return (
+    <Box className={clippy(styles.component, className)}>
+      <Flex
+        className={styles.segment}
+        direction="row"
+      >
+        {leftSection}
+      </Flex>
+      <Flex
+        className={styles.segment}
+        direction="row"
+      >
+        {centerSection}
+      </Flex>
+      <Flex
+        className={styles.segment}
+        direction="row"
+      >
+        {rightSection}
+      </Flex>
+    </Box>
+  );
+};
+
+export default NavBar;

package/views/onBoarding/onBoarding.module.scss

@@ -0,0 +1,79 @@
+@import "../../theme/themeValues";
+
+.page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  animation: fadeIn 1s 0s cubic-bezier(0.215, 0.610, 0.355, 1);
+
+  &::before {
+    content: "";
+    //noinspection CssUnknownTarget
+    background-image: url("/assets/productLogos/yourdash.svg");
+    background-size: 20rem;
+    background-repeat: repeat;
+    width: 1000rem;
+    height: 1000rem;
+    position: absolute;
+    filter: blur(0.25rem) grayscale(1);
+    opacity: 0.1;
+    transform: rotate(-45deg);
+    z-index: -1;
+  }
+
+  @keyframes fadeIn {
+    from {
+      transform: translateY(2.5rem);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+}
+
+.card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: calc(var(#{$theme+$gap}) * 2);
+  padding: 2rem;
+}
+
+.cardContainer {
+  box-shadow: #00000088 0 0 4rem;
+}
+
+.goBackButton {
+}
+
+.headerImage {
+  height: 16rem;
+}
+
+.header {
+  line-height: 1;
+  text-align: center;
+}
+
+.body {
+  text-align: center;
+}
+
+.actions {
+}
+
+.action {
+}
+
+.actionWithoutIcon {
+}
+
+.actionWithIcon {
+}

package/views/onBoarding/onBoarding.tsx

@@ -0,0 +1,138 @@
+import * as React from "react";
+import Card from "../../components/card/card.tsx";
+import { UKIcon } from "../../components/icon/iconDictionary.ts";
+import IconButton from "../../components/iconButton/iconButton.tsx";
+import Image from "../../components/image/image.tsx";
+import Heading from "../../components/heading/heading.tsx";
+import Text from "../../components/text/text.tsx";
+import ButtonWithIcon from "../../components/buttonWithIcon/buttonWithIcon.tsx";
+import Button from "../../components/button/button.tsx";
+import { Outlet } from "react-router";
+import styles from "./onBoarding.module.scss";
+import Flex from "../../components/flex/flex.tsx";
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+
+const OnBoarding: React.FC<{
+  meta: { id: string };
+  pages: {
+    headerImage: string;
+    header: string;
+    body: string;
+    actions: { label: string; icon?: UKIcon; onClick: () => void; changeTo?: "next" | "previous" | "remain" | "completed" }[];
+    allowGoBack?: boolean;
+  }[];
+}> = ({ pages, meta }) => {
+  const [currentPage, setCurrentPage] = React.useState<number>(0);
+  const page = pages[currentPage];
+
+  if (localStorage.getItem(`yourdash-application-visited-${meta.id}`) || currentPage > pages.length - 1) {
+    localStorage.setItem(`yourdash-application-visited-${meta.id}`, "true");
+
+    return <Outlet />;
+  }
+
+  return (
+    <div className={styles.page}>
+      <Card
+        className={styles.card}
+        containerClassName={styles.cardContainer}
+      >
+        {page.allowGoBack && (
+          <IconButton
+            className={styles.goBackButton}
+            accessibleLabel="Go back to the last page"
+            icon={UKIcon.ChevronLeft}
+            onClick={() => {
+              setCurrentPage(currentPage - 1);
+            }}
+          />
+        )}
+        <Image
+          className={styles.headerImage}
+          src={page.headerImage}
+          accessibleLabel=""
+        />
+        <Heading
+          className={styles.header}
+          text={page.header}
+        />
+        <Text
+          className={styles.body}
+          text={page.body}
+        />
+        <Flex
+          className={styles.actions}
+          direction="row"
+        >
+          {page.actions.map((action) => {
+            if (action.icon) {
+              return (
+                <>
+                  <ButtonWithIcon
+                    key={action.label}
+                    className={clippy(styles.action, styles.actionWithIcon)}
+                    text={action.label}
+                    icon={action.icon}
+                    onClick={() => {
+                      action.onClick();
+                      if (action.changeTo) {
+                        switch (action.changeTo) {
+                          case "next":
+                            setCurrentPage(currentPage + 1);
+                            break;
+                          case "previous":
+                            if (currentPage > 0) setCurrentPage(currentPage - 1);
+                            break;
+                          case "remain":
+                            break;
+                          case "completed":
+                            setCurrentPage(pages.length + 1);
+                            break;
+                          default:
+                            break;
+                        }
+                      }
+                    }}
+                  />
+                </>
+              );
+            }
+
+            return (
+              <>
+                <Button
+                  key={action.icon}
+                  className={clippy(styles.action, styles.actionWithoutIcon)}
+                  text={action.label}
+                  onClick={() => {
+                    action.onClick();
+
+                    if (action.changeTo) {
+                      switch (action.changeTo) {
+                        case "next":
+                          setCurrentPage(currentPage + 1);
+                          break;
+                        case "previous":
+                          if (currentPage > 0) setCurrentPage(currentPage - 1);
+                          break;
+                        case "remain":
+                          break;
+                        case "completed":
+                          setCurrentPage(pages.length + 1);
+                          break;
+                        default:
+                          break;
+                      }
+                    }
+                  }}
+                />
+              </>
+            );
+          })}
+        </Flex>
+      </Card>
+    </div>
+  );
+};
+
+export default OnBoarding;

package/views/panAndZoom/panAndZoom.tsx

@@ -3,18 +3,25 @@
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
  */
 
-import React, { FC, useRef, useState } from "react";
+import React, { FC, useEffect, useRef, useState } from "react";
 
-const PanAndZoom: FC<{ children: React.ReactNode; minZoom?: number; maxZoom?: number }> = ({
+const PanAndZoom: FC<{ children: React.ReactNode; minZoom?: number; maxZoom?: number; onScaleChange?: (scale: number) => void }> = ({
   children,
   minZoom,
   maxZoom,
+  onScaleChange,
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [translateX, setTranslateX] = useState(0);
   const [translateY, setTranslateY] = useState(0);
   const [scale, setScale] = useState(1);
 
+  if (onScaleChange) {
+    useEffect(() => {
+      onScaleChange(scale);
+    }, [scale]);
+  }
+
   const handleWheel = (event: WheelEvent) => {
     event.stopPropagation();
     const delta = event.deltaY;

package/views/sidebar/Sidebar.module.scss

@@ -0,0 +1,49 @@
+/*!
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+@import "@yourdash/uikit/theme/themeValues";
+
+.component {
+  height: 100%;
+  background: var(#{$theme+$background});
+  pointer-events: none;
+  opacity: 0;
+  border: var(#{$theme+$border});
+  border-top: 0;
+  border-bottom: 0;
+  border-left: 0;
+  flex-direction: column;
+  max-height: 100%;
+  max-width: 0;
+  transition: transform var(#{$theme+$transition+$transition}), max-height var(#{$theme+$transition+$transition});
+  transform: translateX(-100%);
+  visibility: hidden;
+  padding: 0;
+
+  @media (max-width: $sizeTablet) {
+    max-width: 100%;
+    max-height: 0;
+    height: max-content;
+    border-right: 0;
+    border-bottom: unset;
+  }
+
+  >*[type="button"] {
+    min-width: 100%;
+  }
+}
+
+.open {
+  pointer-events: all;
+  opacity: 1;
+  transform: translateX(0);
+  visibility: visible;
+  max-width: 32rem;
+  padding: var(#{$theme+$padding});
+
+  @media (max-width: $sizeTablet) {
+    height: max-content;
+  }
+}

package/views/sidebar/Sidebar.tsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+import Flex from "../../components/flex/flex.tsx";
+import IncrementLevel from "../../core/incrementLevel.tsx";
+import { useLevel, useLevelClass } from "../../core/level.tsx";
+import styles from "./Sidebar.module.scss";
+import SidebarContext from "./SidebarContext.tsx";
+import { FC, useContext } from "react";
+
+const Sidebar: FC<{ children: React.ReactNode | React.ReactNode[] }> = ({ children }) => {
+  const sidebarContext = useContext(SidebarContext);
+  const level = useLevel();
+
+  return (
+    <IncrementLevel>
+      <Flex
+        direction={"column"}
+        className={clippy(styles.component, sidebarContext.isOpen && styles.open, useLevelClass(level + 1))}
+      >
+        {children}
+      </Flex>
+    </IncrementLevel>
+  );
+};
+
+export default Sidebar;

package/views/sidebar/SidebarContainer.module.scss

@@ -0,0 +1,22 @@
+/*!
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+@import '@yourdash/uikit/theme/themeValues';
+
+.component {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  &[dir=rtl] {
+    flex-direction: row-reverse;
+  }
+
+  @media (max-width: $sizeTablet) {
+    flex-direction: column;
+  }
+}

package/views/sidebar/SidebarContainer.tsx

@@ -0,0 +1,38 @@
+/*
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import React, { FC, useState } from "react";
+import SidebarContext from "./SidebarContext.tsx";
+import styles from "./SidebarContainer.module.scss";
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+
+const SidebarContainer: FC<{ children: React.ReactNode | React.ReactNode[]; showSidebarByDefault?: boolean; className?: string }> = ({
+  children,
+  showSidebarByDefault,
+  className,
+}) => {
+  const [showSidebar, setShowSidebar] = useState<boolean>(showSidebarByDefault || true);
+
+  return (
+    <SidebarContext.Provider
+      value={{
+        closeSidebar: () => {
+          setShowSidebar(false);
+        },
+        toggleSidebar: () => {
+          setShowSidebar(!showSidebar);
+        },
+        openSidebar: () => {
+          setShowSidebar(true);
+        },
+        isOpen: showSidebar,
+      }}
+    >
+      <div className={clippy(styles.component, className)}>{children}</div>
+    </SidebarContext.Provider>
+  );
+};
+
+export default SidebarContainer;

package/views/sidebar/SidebarContext.tsx

@@ -0,0 +1,15 @@
+/*
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import { createContext } from "react";
+
+const SidebarContext = createContext({
+  openSidebar: () => {},
+  closeSidebar: () => {},
+  toggleSidebar: () => {},
+  isOpen: true,
+});
+
+export default SidebarContext;

package/views/sidebar/SidebarToggleButton.tsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import { FC, useContext } from "react";
+import { UKIcon } from "../../components/icon/iconDictionary.ts";
+import SidebarContext from "./SidebarContext.tsx";
+import IconButton from "../../components/iconButton/iconButton.tsx";
+
+const SidebarToggleButton: FC = () => {
+  const sidebarContext = useContext(SidebarContext);
+
+  return (
+    <IconButton
+      accessibleLabel={sidebarContext.isOpen ? "Collapse Sidebar" : "Expand Sidebar"}
+      icon={sidebarContext.isOpen ? UKIcon.SidebarCollapse : UKIcon.SidebarExpand}
+      onClick={() => {
+        sidebarContext.toggleSidebar();
+      }}
+    />
+  );
+};
+
+export default SidebarToggleButton;

package/components/toast/toast.tsx

@@ -1,65 +0,0 @@
-/*
- * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
- * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
- */
-
-import clippy from "@yourdash/shared/web/helpers/clippy.js";
-import { FC, useState } from "react";
-import Card from "../card/card.js";
-import { UKIcon } from "../icon/iconDictionary.js";
-import IconButton from "../iconButton/iconButton.js";
-import Text from "../text/text.js";
-import ToastContext from "./toastContext.js";
-import React from "react";
-import styles from "./toast.module.scss";
-
-const Toast: FC<{ children: React.ReactNode | React.ReactNode[] }> = ({ children }) => {
-  const [toasts, setToasts] = useState<
-    { type: "success" | "error" | "warning" | "info"; content: string; persist?: boolean; timestamp: number }[]
-  >([]);
-
-  return (
-    <>
-      <ToastContext.Provider
-        value={{
-          showToast: (data: { type: "success" | "error" | "warning" | "info"; content: string; persist?: boolean }) => {
-            const timestamp = Date.now();
-
-            setToasts([...toasts, { ...data, timestamp: timestamp }]);
-
-            if (!data.persist) {
-              setTimeout(() => {
-                setToasts(toasts.filter((t) => t.timestamp !== timestamp));
-              }, 5000);
-            }
-          },
-        }}
-      >
-        <div className={styles.container}>
-          {toasts.map((t) => {
-            return (
-              <Card
-                key={t.timestamp}
-                actions={
-                  t.persist ? (
-                    <IconButton
-                      accessibleLabel={"Close toast"}
-                      icon={UKIcon.X}
-                      onClick={() => setToasts(toasts.filter((x) => x.timestamp !== t.timestamp))}
-                    />
-                  ) : null
-                }
-                containerClassName={clippy(styles.component, t.type && styles[t.type])}
-              >
-                <Text text={t.content} />
-              </Card>
-            );
-          })}
-        </div>
-        {children}
-      </ToastContext.Provider>
-    </>
-  );
-};
-
-export default Toast;