@yourdash/uikit 1.0.2 → 1.0.3

package/components/contextMenu/contextMenuRoot.tsx

@@ -1,83 +1,83 @@
-/*
- * 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 from "react";
-import { FC, useEffect, useRef } from "react";
-import Button from "../button/button.tsx";
-import ContextMenuRootContext from "./contextMenuRootContext.tsx";
-import styles from "./contextMenuRoot.module.scss";
-
-const ContextMenuRoot: FC<{ children: React.ReactNode | React.ReactNode[] }> = ({ children }) => {
-  const [position, setPosition] = React.useState({ x: 0, y: 0 });
-  const [visible, setVisible] = React.useState(false);
-  const [items, setItems] = React.useState([] as { label: string; onClick: () => void }[]);
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    window.addEventListener("resize", () => {
-      setVisible(false);
-    });
-  }, []);
-
-  return (
-    <ContextMenuRootContext.Provider
-      value={{
-        createMenu: ({ x, y, width, height, items: i }) => {
-          const screenWidth = window.innerWidth;
-          const screenHeight = window.innerHeight;
-
-          const MENU_WIDTH = ref.current?.getBoundingClientRect().width || 200;
-          const MENU_HEIGHT = ref.current?.getBoundingClientRect().height || 200;
-
-          let resultX = x;
-          let resultY = y;
-
-          if (x + MENU_WIDTH >= screenWidth) {
-            resultX = screenWidth - MENU_WIDTH;
-          }
-
-          if (y + MENU_HEIGHT >= screenHeight) {
-            resultY = screenHeight - MENU_HEIGHT;
-          }
-
-          setPosition({
-            x: resultX,
-            y: resultY,
-          });
-
-          setItems(i);
-          setVisible(true);
-        },
-        destroyMenu: () => {
-          setVisible(false);
-        },
-      }}
-    >
-      <div
-        ref={ref}
-        style={{
-          display: visible ? "flex" : "none",
-          left: position.x,
-          top: position.y,
-        }}
-        className={styles.component}
-      >
-        {items.map((item) => {
-          return (
-            <Button
-              className={styles.button}
-              text={item.label}
-              onClick={item.onClick}
-              key={item.label}
-            />
-          );
-        })}
-      </div>
-      {children}
-    </ContextMenuRootContext.Provider>
-  );
-};
-
-export default ContextMenuRoot;
+/*
+ * 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 from "react";
+import { FC, useEffect, useRef } from "react";
+import Button from "../button/button.tsx";
+import ContextMenuRootContext from "./contextMenuRootContext.tsx";
+import styles from "./contextMenuRoot.module.scss";
+
+const ContextMenuRoot: FC<{ children: React.ReactNode | React.ReactNode[] }> = ({ children }) => {
+  const [position, setPosition] = React.useState({ x: 0, y: 0 });
+  const [visible, setVisible] = React.useState(false);
+  const [items, setItems] = React.useState([] as { label: string; onClick: () => void }[]);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    window.addEventListener("resize", () => {
+      setVisible(false);
+    });
+  }, []);
+
+  return (
+    <ContextMenuRootContext.Provider
+      value={{
+        createMenu: ({ x, y, width, height, items: i }) => {
+          const screenWidth = window.innerWidth;
+          const screenHeight = window.innerHeight;
+
+          const MENU_WIDTH = ref.current?.getBoundingClientRect().width || 200;
+          const MENU_HEIGHT = ref.current?.getBoundingClientRect().height || 200;
+
+          let resultX = x;
+          let resultY = y;
+
+          if (x + MENU_WIDTH >= screenWidth) {
+            resultX = screenWidth - MENU_WIDTH;
+          }
+
+          if (y + MENU_HEIGHT >= screenHeight) {
+            resultY = screenHeight - MENU_HEIGHT;
+          }
+
+          setPosition({
+            x: resultX,
+            y: resultY,
+          });
+
+          setItems(i);
+          setVisible(true);
+        },
+        destroyMenu: () => {
+          setVisible(false);
+        },
+      }}
+    >
+      <div
+        ref={ref}
+        style={{
+          display: visible ? "flex" : "none",
+          left: position.x,
+          top: position.y,
+        }}
+        className={styles.component}
+      >
+        {items.map((item) => {
+          return (
+            <Button
+              className={styles.button}
+              text={item.label}
+              onClick={item.onClick}
+              key={item.label}
+            />
+          );
+        })}
+      </div>
+      {children}
+    </ContextMenuRootContext.Provider>
+  );
+};
+
+export default ContextMenuRoot;

package/components/contextMenu/contextMenuRootContext.tsx

@@ -1,22 +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 { createContext } from "react";
-
-export default createContext({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  createMenu: (data: {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    items: { label: string; onClick: () => void }[];
-  }) => {
-    /* empty function */
-  },
-  destroyMenu: () => {
-    /* empty function */
-  },
-});
+/*
+ * 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";
+
+export default createContext({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  createMenu: (data: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    items: { label: string; onClick: () => void }[];
+  }) => {
+    /* empty function */
+  },
+  destroyMenu: () => {
+    /* empty function */
+  },
+});

package/components/flex/flex.module.scss

@@ -1,31 +1,31 @@
-/*!
- * 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 "../../theme/themeValues";
-
-.component {
-  display: flex;
-  gap: var(#{$theme}#{$gap});
-}
-
-.row {
-  flex-direction: row;
-}
-
-.column {
-  flex-direction: column;
-}
-
-.centerHorizontally {
-  justify-content: center;
-}
-
-.centerVertically {
-  align-items: center;
-}
-
-.padding {
-  padding: var(#{$theme+$padding});
-}
+/*!
+ * 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)
+ */
+
+@use "@yourdash/uikit/theme/themeValues" as *;
+
+.component {
+  display: flex;
+  gap: var(#{$theme}#{$gap});
+}
+
+.row {
+  flex-direction: row;
+}
+
+.column {
+  flex-direction: column;
+}
+
+.centerHorizontally {
+  align-items: center;
+}
+
+.centerVertically {
+  justify-content: center;
+}
+
+.padding {
+  padding: var(#{$theme+$padding});
+}

package/components/flex/flex.tsx

@@ -1,34 +1,34 @@
-/*
- * 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 styles from "./flex.module.scss";
-import { FC, ReactNode } from "react";
-
-const Flex: FC<{
-  direction: "row" | "column";
-  className?: string;
-  children: ReactNode | ReactNode[];
-  centerHorizontally?: boolean;
-  centerVertically?: boolean;
-  padding?: boolean;
-}> = (props) => {
-  return (
-    <div
-      className={clippy(
-        styles.component,
-        styles[props.direction],
-        props.className,
-        props.centerHorizontally && styles.centerHorizontally,
-        props.centerVertically && styles.centerVertically,
-        props.padding && styles.padding,
-      )}
-    >
-      {props.children}
-    </div>
-  );
-};
-
-export default Flex;
+/*
+ * 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 styles from "./flex.module.scss";
+import { FC, ReactNode } from "react";
+
+const Flex: FC<{
+  direction: "row" | "column";
+  className?: string;
+  children: ReactNode | ReactNode[];
+  centerHorizontally?: boolean;
+  centerVertically?: boolean;
+  padding?: boolean;
+}> = (props) => {
+  return (
+    <div
+      className={clippy(
+        styles.component,
+        styles[props.direction],
+        props.className,
+        props.centerHorizontally && styles.centerHorizontally,
+        props.centerVertically && styles.centerVertically,
+        props.padding && styles.padding,
+      )}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+export default Flex;

package/components/heading/heading.module.scss

@@ -1,41 +1,41 @@
-/*!
- * 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 "../../theme/themeValues";
-
-.component {
-  display: inline-block;
-  text-align: center;
-}
-
-.h1component {
-  font-size: var(#{$theme}#{$heading}#{$h1}#{$size});
-  font-weight: var(#{$theme}#{$heading}#{$h1}#{$weight});
-}
-
-.h2component {
-  font-size: var(#{$theme}#{$heading}#{$h2}#{$size});
-  font-weight: var(#{$theme}#{$heading}#{$h2}#{$weight});
-}
-
-.h3component {
-  font-size: var(#{$theme}#{$heading}#{$h3}#{$size});
-  font-weight: var(#{$theme}#{$heading}#{$h3}#{$weight});
-}
-
-.h4component {
-  font-size: var(#{$theme}#{$heading}#{$h4}#{$size});
-  font-weight: var(#{$theme}#{$heading}#{$h4}#{$weight});
-}
-
-.h5component {
-  font-size: var(#{$theme}#{$heading}#{$h5}#{$size});
-  font-weight: var(#{$theme}#{$heading}#{$h5}#{$weight});
-}
-
-.h6component {
-  font-size: var(#{$theme}#{$heading}#{$h6}#{$size});
-  font-weight: var(#{$theme}#{$heading}#{$h6}#{$weight});
-}
+/*!
+ * 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)
+ */
+
+@use "@yourdash/uikit/theme/themeValues" as *;
+
+.component {
+  display: inline-block;
+  text-align: center;
+}
+
+.h1component {
+  font-size: var(#{$theme}#{$heading}#{$h1}#{$size});
+  font-weight: var(#{$theme}#{$heading}#{$h1}#{$weight});
+}
+
+.h2component {
+  font-size: var(#{$theme}#{$heading}#{$h2}#{$size});
+  font-weight: var(#{$theme}#{$heading}#{$h2}#{$weight});
+}
+
+.h3component {
+  font-size: var(#{$theme}#{$heading}#{$h3}#{$size});
+  font-weight: var(#{$theme}#{$heading}#{$h3}#{$weight});
+}
+
+.h4component {
+  font-size: var(#{$theme}#{$heading}#{$h4}#{$size});
+  font-weight: var(#{$theme}#{$heading}#{$h4}#{$weight});
+}
+
+.h5component {
+  font-size: var(#{$theme}#{$heading}#{$h5}#{$size});
+  font-weight: var(#{$theme}#{$heading}#{$h5}#{$weight});
+}
+
+.h6component {
+  font-size: var(#{$theme}#{$heading}#{$h6}#{$size});
+  font-weight: var(#{$theme}#{$heading}#{$h6}#{$weight});
+}

package/components/heading/heading.tsx

@@ -1,27 +1,27 @@
-/*
- * 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 styles from "./heading.module.scss";
-import clippy from "@yourdash/shared/web/helpers/clippy.ts";
-import { FC } from "react";
-
-const Heading: FC<{ text: string; level?: 1 | 2 | 3 | 4 | 5 | 6; className?: string }> = (props) => {
-  switch (props.level || 1) {
-    case 1:
-      return <h1 className={clippy(styles.component, styles.h1component, props.className)}>{props.text}</h1>;
-    case 2:
-      return <h2 className={clippy(styles.component, styles.h2component, props.className)}>{props.text}</h2>;
-    case 3:
-      return <h3 className={clippy(styles.component, styles.h3component, props.className)}>{props.text}</h3>;
-    case 4:
-      return <h4 className={clippy(styles.component, styles.h4component, props.className)}>{props.text}</h4>;
-    case 5:
-      return <h5 className={clippy(styles.component, styles.h5component, props.className)}>{props.text}</h5>;
-    case 6:
-      return <h6 className={clippy(styles.component, styles.h6component, props.className)}>{props.text}</h6>;
-  }
-};
-
-export default Heading;
+/*
+ * 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 styles from "./heading.module.scss";
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+import { FC } from "react";
+
+const Heading: FC<{ text: string; level?: 1 | 2 | 3 | 4 | 5 | 6; className?: string }> = (props) => {
+  switch (props.level || 1) {
+    case 1:
+      return <h1 className={clippy(styles.component, styles.h1component, props.className)}>{props.text}</h1>;
+    case 2:
+      return <h2 className={clippy(styles.component, styles.h2component, props.className)}>{props.text}</h2>;
+    case 3:
+      return <h3 className={clippy(styles.component, styles.h3component, props.className)}>{props.text}</h3>;
+    case 4:
+      return <h4 className={clippy(styles.component, styles.h4component, props.className)}>{props.text}</h4>;
+    case 5:
+      return <h5 className={clippy(styles.component, styles.h5component, props.className)}>{props.text}</h5>;
+    case 6:
+      return <h6 className={clippy(styles.component, styles.h6component, props.className)}>{props.text}</h6>;
+  }
+};
+
+export default Heading;

package/components/icon/icon.module.scss

@@ -1,26 +1,26 @@
-/*!
- * 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)
- */
-
-.component {
-  aspect-ratio: 1 / 1;
-  width: var(--size);
-
-  background-color: var(--color, currentColor);
-  -webkit-mask-image: var(--icon);
-  -webkit-mask-position: center;
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-size: cover;
-  mask-image: var(--icon);
-  mask-position: center;
-  mask-repeat: no-repeat;
-  mask-size: cover;
-}
-
-.preserveColor {
-  background-image: var(--icon);
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
+/*!
+ * 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)
+ */
+
+.component {
+  aspect-ratio: 1 / 1;
+  width: var(--size);
+
+  background-color: var(--color, currentColor);
+  -webkit-mask-image: var(--icon);
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: cover;
+  mask-image: var(--icon);
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: cover;
+}
+
+.preserveColor {
+  background-image: var(--icon);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}

package/components/icon/icon.tsx

@@ -1,30 +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 { UKIcon } from "./iconDictionary.ts";
-import styles from "./icon.module.scss";
-import { FC } from "react";
-
-const Icon: FC<{
-  icon: UKIcon;
-  size?: string;
-  color?: string;
-  preserveColor?: boolean;
-  className?: string;
-}> = (props) => {
-  return (
-    <div
-      className={`${styles.component} ${props.className} ${props.preserveColor ? styles.preserveColor : ""}`}
-      style={{
-        "--icon": `url(${props.icon})`,
-        ...(!props.preserveColor ? { "--color": props.color } : {}),
-        // @ts-ignore
-        "--size": props.size,
-      }}
-    />
-  );
-};
-
-export default Icon;
+/*
+ * 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 { UKIcon } from "./iconDictionary.ts";
+import styles from "./icon.module.scss";
+import { FC } from "react";
+
+const Icon: FC<{
+  icon: UKIcon;
+  size?: string;
+  color?: string;
+  preserveColor?: boolean;
+  className?: string;
+}> = (props) => {
+  return (
+    <div
+      className={`${styles.component} ${props.className} ${props.preserveColor ? styles.preserveColor : ""}`}
+      style={{
+        "--icon": `url(${props.icon})`,
+        ...(!props.preserveColor ? { "--color": props.color } : {}),
+        // @ts-ignore
+        "--size": props.size,
+      }}
+    />
+  );
+};
+
+export default Icon;