@yourdash/uikit 0.1.14 → 0.1.16

package/lib/views/carousel/UKCarousel.tsx

@@ -1,147 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import UKCard from "../../components/card/UKCard.tsx";
-import UKContainer from "../../components/container/UKContainer.tsx";
-import clippy from "../../core/clippy.js";
-import { UKIcons } from "../../core/iconDictionary.ts";
-import UKIconButton from "../../components/iconButton/UKIconButton.tsx";
-import styles from "./carousel.module.scss";
-
-const UKCarousel: React.FC<{
-  items: { element: React.ReactElement; id: string }[]; loopAround?: boolean; className?: string; height?: string;
-}> = ({ items, className, loopAround, height }) => {
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const [ currentPage, setCurrentPage ] = useState<number>(0);
-
-  useEffect(() => {
-    const scrollElement = scrollRef.current;
-
-    if (!scrollElement) return;
-
-    let listener = () => {
-      const scrollRect = scrollElement.getBoundingClientRect();
-      let maxOverlap = 0;
-      let currentPageIndex = -1;
-
-      Array.from(scrollElement.children).forEach((ele: Element, index: number) => {
-        const elementRect = ele.getBoundingClientRect();
-
-        // Calculate the overlap between the element and the scroll element
-        const overlap = Math.max(
-          0, Math.min(elementRect.right, scrollRect.right) - Math.max(elementRect.left, scrollRect.left));
-
-        // Check if this overlap is greater than the current maximum overlap
-        if (overlap > maxOverlap) {
-          maxOverlap = overlap;
-          currentPageIndex = index;
-        }
-      });
-
-      // If an element has some overlap, set it as the current page
-      if (currentPageIndex !== -1) {
-        setCurrentPage(currentPageIndex);
-      }
-    };
-
-    scrollElement.addEventListener("scroll", listener);
-
-    return () => {
-      scrollElement.removeEventListener("scroll", listener);
-    };
-  }, []);
-
-  return (<UKContainer className={clippy(styles.containerComponent, className)} style={{
-    // @ts-ignore
-    "--carousel-height": height
-  }}>
-    <div
-      className={styles.component}
-      data-pages={true}
-      ref={scrollRef}
-    >
-      {items.map((child, index) => {
-        return (<div
-          key={child.id}
-          className={clippy(styles.page, index === currentPage && styles.activePage)}
-        >
-          {child.element}
-        </div>);
-      })}
-    </div>
-    <div className={styles.controls}>
-      <UKIconButton
-        accessibleLabel={"previous page"}
-        icon={UKIcons.ChevronLeft}
-        className={styles.pageControl}
-        onClick={() => {
-          const scrollElement = scrollRef.current;
-
-          if (!scrollElement) {
-            return;
-          }
-
-          const carouselTargetPage = scrollElement.children[currentPage - 1] as HTMLDivElement;
-
-          if (!carouselTargetPage) {
-            if (loopAround) {
-              const carouselTargetPage = scrollElement.children[scrollElement.children.length - 1] as HTMLDivElement;
-              carouselTargetPage.scrollIntoView({ behavior: "smooth", inline: "center", block: "center" });
-              setCurrentPage(scrollElement.children.length - 1);
-            }
-            return;
-          }
-
-          carouselTargetPage.scrollIntoView({ behavior: "smooth", inline: "center", block: "center" });
-          setCurrentPage(currentPage - 1);
-        }}
-      />
-      <UKCard className={styles.indicator} containerClassName={styles.indicatorContainer}>
-        {items.map((page, index) => {
-          return (<button
-            key={page.id}
-            className={clippy(styles.pageIndicator, index === currentPage && styles.selected)}
-            onClick={() => {
-              const scrollElement = scrollRef.current;
-
-              if (!scrollElement) {
-                return;
-              }
-
-              const carouselTargetPage = scrollElement.children[index] as HTMLDivElement;
-
-              setCurrentPage(index);
-              carouselTargetPage.scrollIntoView({ behavior: "smooth", inline: "center", block: "center" });
-            }}
-          />);
-        })}
-      </UKCard>
-      <UKIconButton
-        accessibleLabel={"next page"}
-        icon={UKIcons.ChevronRight}
-        className={styles.pageControl}
-        onClick={() => {
-          const scrollElement = scrollRef.current;
-
-          if (!scrollElement) {
-            return;
-          }
-
-          const carouselTargetPage = scrollElement.children[currentPage + 1] as HTMLDivElement;
-
-          if (!carouselTargetPage) {
-            if (loopAround) {
-              const carouselTargetPage = scrollElement.children[0] as HTMLDivElement;
-              carouselTargetPage.scrollIntoView({ behavior: "smooth", inline: "center", block: "center" });
-              setCurrentPage(0);
-            }
-            return;
-          }
-
-          carouselTargetPage.scrollIntoView({ behavior: "smooth", inline: "center", block: "center" });
-          setCurrentPage(currentPage + 1);
-        }}
-      />
-    </div>
-  </UKContainer>);
-};
-
-export default UKCarousel;

package/lib/views/carousel/carousel.module.css

@@ -1,77 +0,0 @@
-@charset "UTF-8";
-/*!
- * Copyright ©2025 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
- * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
- */
-.containerComponent {
-  display: flex;
-  flex-direction: row;
-  max-width: 100%;
-  height: 24rem;
-  position: relative;
-  padding: 0;
-  overflow: hidden;
-}
-
-.component {
-  display: flex;
-  align-items: center;
-  max-width: 100%;
-  height: 24rem;
-  gap: 0.5rem;
-  padding: var(--utpdn);
-  flex-direction: row;
-  overflow-x: auto;
-  scroll-snap-type: x mandatory;
-  scroll-snap-stop: always;
-  scrollbar-width: none;
-  padding-bottom: 2.5rem;
-}
-.component::-webkit-scrollbar {
-  display: none;
-}
-
-.page {
-  display: flex;
-  width: 80%;
-  height: 100%;
-  flex-shrink: 0;
-  scroll-snap-align: center;
-}
-.page:first-of-type {
-  margin-left: calc(20% + var(--utgap));
-}
-.page:last-of-type {
-  margin-right: calc(20% + var(--utgap));
-}
-
-.controls {
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  flex-direction: row;
-  gap: var(--utgap);
-}
-
-.indicator {
-  display: flex;
-  flex-direction: row;
-  gap: var(--utgap);
-  padding: calc(var(--utpdn) / 2);
-  border-radius: var(--utrad);
-}
-.indicator .pageIndicator {
-  background-color: var(--utcol);
-  padding: 0.5rem;
-  border-radius: var(--utrad);
-  transition: var(--uttrans);
-  position: relative;
-}
-.indicator .pageIndicator.selected {
-  padding-right: 1.5rem;
-  padding-left: 1.5rem;
-}
-
-/*# sourceMappingURL=carousel.module.css.map */

package/lib/views/carousel/carousel.module.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../theme/themeValues.scss","carousel.module.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;ACEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA","file":"carousel.module.css"}

package/lib/views/carousel/carousel.module.scss

@@ -1,94 +0,0 @@
-@use "../../theme/themeValues.scss" as *;
-
-.containerComponent {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  height: var(--carousel-height, 24rem);
-  position: relative;
-  padding: 0;
-  overflow: hidden;
-  border-radius: 0;
-}
-
-.component {
-  display: flex;
-  align-items: center;
-  max-width: 100%;
-  height: 100%;
-  gap: 10rem;
-  flex-direction: row;
-  overflow-x: auto;
-  scroll-snap-type: x mandatory;
-  scroll-snap-stop: always;
-  scrollbar-width: none;
-  padding-bottom: 2.5rem;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-.page {
-  display: flex;
-  width: max-content;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  scroll-snap-align: center;
-  opacity: 0.5;
-  transition: $UKTransition;
-
-  &:first-of-type {
-    margin-left: 100%;
-  }
-
-  &:last-of-type {
-    margin-right: 100%;
-  }
-}
-
-.activePage {
-  opacity: 1;
-}
-
-.controls {
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  flex-direction: row;
-  gap: $UKGap;
-  width: max-content;
-}
-
-.indicatorContainer {
-  width: max-content;
-  overflow: unset;
-}
-
-.indicator {
-  display: flex;
-  flex-direction: row;
-  gap: var(#{$theme+$gap});
-  padding: calc(calc(var(#{$theme+$padding}) / 4) * 3);
-  border-radius: var(#{$theme+$radius});
-  min-width: max-content;
-
-  .pageIndicator {
-    background-color: rgb(var(#{$theme+$color}));
-    height: calc($UKPadding + calc($UKPadding / 4));
-    border-radius: calc(var(#{$theme+$radius}) * 0.5);
-    transition: $UKTransition;
-    aspect-ratio: 1 / 1;
-    opacity: 0.8;
-    display: flex;
-
-    &.selected {
-      aspect-ratio: 3 / 1;
-      opacity: 1;
-    }
-  }
-}

package/lib/views/dialog/UKDialog.tsx

@@ -1,34 +0,0 @@
-/*
- * Copyright ©2025 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
- * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
- */
-
-import React from "react";
-import UKCard from "../../components/card/UKCard.tsx";
-import styles from "./dialog.module.scss";
-
-const UKDialog: React.FC<{
-  children: React.ReactNode | React.ReactNode[];
-  className?: string;
-  actionsClassName?: string;
-  headerClassName?: string;
-  actions?: React.ReactNode | React.ReactNode[];
-  header?: React.ReactNode | React.ReactNode[];
-}> = ({ children, className, actionsClassName, headerClassName, actions, header }) => {
-  return (
-    <div className={styles.background}>
-      <UKCard
-        containerClassName={styles.view}
-        actionsClassName={actionsClassName}
-        headerClassName={headerClassName}
-        actions={actions}
-        header={header}
-        className={className}
-      >
-        {children}
-      </UKCard>
-    </div>
-  );
-};
-
-export default UKDialog;

package/lib/views/dialog/dialog.module.css

@@ -1,44 +0,0 @@
-@charset "UTF-8";
-/*!
- * Copyright ©2025 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
- * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
- */
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    margin-top: 1rem;
-  }
-  to {
-    opacity: 1;
-    margin-top: 0;
-  }
-}
-@keyframes backgroundFadeIn {
-  from {
-    background: rgba(0, 0, 0, 0);
-    backdrop-filter: blur(0rem);
-  }
-  to {
-    background: rgba(0, 0, 0, 0.3333333333);
-    backdrop-filter: blur(0.25rem);
-  }
-}
-.background {
-  width: 100%;
-  height: 100%;
-  animation: forwards backgroundFadeIn 250ms ease-out;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 100;
-}
-
-.view {
-  display: flex;
-  animation: forwards fadeIn 500ms ease-out;
-}
-
-/*# sourceMappingURL=dialog.module.css.map */

package/lib/views/dialog/dialog.module.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["dialog.module.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAKA;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA","file":"dialog.module.css"}

package/lib/views/dialog/dialog.module.scss

@@ -1,44 +0,0 @@
-/*!
- * Copyright ©2025 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
- * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
- */
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    margin-top: 1rem;
-  }
-  to {
-    opacity: 1;
-    margin-top: 0;
-  }
-}
-
-@keyframes backgroundFadeIn {
-  from {
-    background: #00000000;
-    backdrop-filter: blur(0rem);
-  }
-  to {
-    background: #00000055;
-    backdrop-filter: blur(0.25rem);
-  }
-}
-
-.background {
-  width: 100%;
-  height: 100%;
-  animation: forwards backgroundFadeIn 250ms ease-out;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 100;
-}
-
-.view {
-  display: flex;
-  animation: forwards fadeIn 500ms ease-out;
-}

package/lib/views/infiniteScroll/UKInfiniteScroll.tsx

@@ -1,90 +0,0 @@
-/*
- *    Copyright ©2025 Ewsgit<https://ewsgit.uk> and YourDash<https://yourdash.ewsgit.uk> contributors.
- *    YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
- */
-
-import React, { useEffect, useState } from "react";
-import UKHeading from "../../components/heading/UKHeading.tsx";
-import UKSeparator from "../../components/separator/UKSeparator.tsx";
-import UKText from "../../components/text/UKText.tsx";
-import styles from "./infiniteScroll.module.scss";
-import clippy from "../../core/clippy.ts";
-
-const UKInfiniteScroll: React.FC<{
-  children: React.ReactNode | React.ReactNode[];
-  fetchNextPage: (nextPageNumber: number) => Promise<{ hasAnotherPage?: boolean }>;
-  containerClassName?: string;
-  className?: string;
-  resetState?: string;
-}> = ({ children, fetchNextPage, containerClassName, className, resetState }) => {
-  const endOfItemsRef = React.useRef<HTMLDivElement>(null);
-  const lastFetchedPage = React.useRef<number>(-1);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [isLastPage, setIsLastPage] = useState<boolean>(false);
-
-  useEffect(() => {
-    lastFetchedPage.current = -1;
-    setIsLoading(false);
-    setIsLastPage(false);
-    fetchNextPageWrapper();
-  }, [resetState]);
-
-  async function fetchNextPageWrapper() {
-    if (isLoading) return;
-    setIsLoading(true);
-    const { hasAnotherPage } = await fetchNextPage(lastFetchedPage.current + 1);
-    lastFetchedPage.current++;
-    setIsLoading(false);
-    setIsLastPage(hasAnotherPage || false);
-  }
-
-  useEffect(() => {
-    if (!endOfItemsRef.current) return;
-
-    const element: HTMLDivElement = endOfItemsRef.current;
-
-    const observer = new IntersectionObserver((elem) => {
-      console.log("observer update");
-      const isVisible = elem[0].isIntersecting;
-
-      if (isVisible) fetchNextPageWrapper();
-    });
-
-    observer.observe(element);
-  }, []);
-
-  // TODO: Use interaction observer to detect when the last item is shown on the screen and fetch the next page
-
-  return (
-    <div className={clippy(containerClassName, styles.component)}>
-      {/* @ts-ignore */}
-      {children?.length > 0 ? (
-        <div className={clippy(className, styles.items)}>{children}</div>
-      ) : (
-        <div className={"text-center"}>
-          <UKHeading
-            level={1}
-            text={"Whoops."}
-          />
-          <UKSeparator direction={"column"} />
-          <UKText text={"It looks like nothing could be found..."} />
-        </div>
-      )}
-      <div
-        ref={endOfItemsRef}
-        className={styles.endOfItems}
-      >
-        {isLoading && <UKText text={"Loading more content"} />}
-        <UKSeparator direction={"column"} />
-        {isLastPage && (
-          <UKText
-            text={"No more items to load"}
-            className={styles.endOfItems}
-          />
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default UKInfiniteScroll;

package/lib/views/infiniteScroll/infiniteScroll.module.css

@@ -1,30 +0,0 @@
-@charset "UTF-8";
-/*!
- * Copyright ©2025 Ewsgit<https://ewsgit.uk> and YourDash<https://yourdash.ewsgit.uk> contributors.
- * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
- */
-/*!
- * Copyright ©2025 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
- * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
- */
-.component {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  gap: 1rem;
-  align-items: center;
-}
-
-.items {
-  height: 100%;
-}
-
-.endOfItems {
-  text-align: center;
-  padding: var(--utpdn);
-  gap: var(--utgap);
-  width: calc(100% - var(--utpdn) * 2);
-}
-
-/*# sourceMappingURL=infiniteScroll.module.css.map */

package/lib/views/infiniteScroll/infiniteScroll.module.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["infiniteScroll.module.scss","../../theme/themeValues.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;ADOA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA","file":"infiniteScroll.module.css"}

package/lib/views/infiniteScroll/infiniteScroll.module.scss

@@ -1,26 +0,0 @@
-/*!
- * Copyright ©2025 Ewsgit<https://ewsgit.uk> and YourDash<https://yourdash.ewsgit.uk> contributors.
- * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
- */
-
-@use "../../theme/themeValues.scss" as *;
-
-.component {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  gap: 1rem;
-  align-items: center;
-}
-
-.items {
-  height: 100%;
-}
-
-.endOfItems {
-  text-align: center;
-  padding: var(#{$theme+$padding});
-  gap: var(#{$theme+$gap});
-  width: calc(100% - calc(var(#{$theme+$padding}) * 2));
-}

package/lib/views/layout/UKLayout.module.scss

@@ -1,24 +0,0 @@
-.layout {
-  display: grid;
-  grid-template: auto 1fr auto / auto 1fr auto;
-}
-
-.header {
-  grid-column: 1 / 4;
-}
-
-.footer {
-  grid-column: 1 / 4;
-}
-
-.children {
-  grid-column: 2 / 3;
-}
-
-.primarySidebar {
-  grid-column: 1 / 2;
-}
-
-.secondarySidebar {
-  grid-column: 3 / 4;
-}

package/lib/views/layout/UKLayout.tsx

@@ -1,30 +0,0 @@
-import React from "react";
-import styles from "./UKLayout.module.scss";
-
-interface IUKLayoutProps {
-  primarySidebar?: React.ReactNode,
-  secondarySidebar?: React.ReactNode,
-  header?: React.ReactNode,
-  footer?: React.ReactNode,
-}
-
-const UKLayout: React.FC<React.PropsWithChildren<IUKLayoutProps>> = ({
-                                                                       primarySidebar,
-                                                                       secondarySidebar,
-                                                                       footer,
-                                                                       header,
-                                                                       children
-                                                                     }) => {
-  return <div className={styles.layout}>
-    {header && <div className={styles.header}>{header}</div>}
-    {primarySidebar && <div className={styles.primarySidebar}>{primarySidebar}</div>}
-    <div className={styles.children}>
-      {children}
-    </div>
-    {secondarySidebar && <div className={styles.secondarySidebar}>{secondarySidebar}</div>}
-    {footer && <div className={styles.footer}>{footer}</div>}
-  </div>;
-};
-
-export default UKLayout;
-

package/lib/views/navBar/UKNavBar.tsx

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