@yourdash/uikit 1.0.1 → 1.0.3

package/components/box/box.module.scss

@@ -3,7 +3,7 @@
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
  */
 
-@import "../../theme/themeValues";
+@use "@yourdash/uikit/theme/themeValues" as *;
 
 .component {
   box-sizing: border-box;

package/components/box/box.tsx

@@ -3,10 +3,10 @@
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
  */
 
-import clippy from "@yourdash/shared/web/helpers/clippy.js";
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
 import { FC, ReactNode } from "react";
-import IncrementLevel from "../../core/incrementLevel.js";
-import { useLevel, useLevelClass } from "../../core/level.js";
+import IncrementLevel from "../../core/incrementLevel.tsx";
+import { useLevel, useLevelClass } from "../../core/level.tsx";
 import styles from "./box.module.scss";
 
 const Box: FC<{ className?: string; level?: 0 | 1 | 2 | 3; children: ReactNode | ReactNode[] }> = (props) => {

package/components/button/button.module.scss

@@ -3,12 +3,10 @@
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
  */
 
-@import "../../theme/themeValues";
+@use "@yourdash/uikit/theme/themeValues" as *;
 
 .component {
   font-family: var(#{$theme}#{$font}#{$family});
-  text-align: center;
-  min-width: 6rem;
   padding: 0 var(#{$theme}#{$button}#{$padding}#{$horizontal});
   color: var(#{$theme}#{$button}#{$color});
   border: var(#{$theme}#{$button}#{$border});
@@ -18,6 +16,8 @@
   height: var(#{$theme+$input+$height});
   width: max-content;
   cursor: pointer;
+  padding-left: var(#{$theme+$padding});
+  padding-right: var(#{$theme+$padding});
 
   &:hover {
     color: var(#{$theme}#{$button}#{$hover}#{$color});

package/components/button/button.tsx

@@ -3,7 +3,7 @@
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
  */
 
-import clippy from "@yourdash/shared/web/helpers/clippy.js";
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
 import styles from "./button.module.scss";
 import { FC } from "react";
 
@@ -14,6 +14,7 @@ const Button: FC<{ onClick: () => void; text: string; className?: string; disabl
       onClick={props.onClick}
       aria-label={props.text}
       disabled={props.disabled}
+      type={"button"}
     >
       {props.text}
     </button>

package/components/buttonLink/buttonLink.module.scss

@@ -3,7 +3,7 @@
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
  */
 
-@import "../../theme/themeValues";
+@use "@yourdash/uikit/theme/themeValues" as *;
 
 .component {
   font-family: var(#{$theme}#{$font}#{$family});
@@ -45,3 +45,7 @@
     cursor: not-allowed;
   }
 }
+
+.link {
+  display: inline;
+}

package/components/buttonLink/buttonLink.tsx

@@ -3,23 +3,24 @@
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
  */
 
-import clippy from "@yourdash/shared/web/helpers/clippy.js";
-import Button from "../button/button.js";
-import { Link } from "react-router-dom";
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+import Button from "../button/button.tsx";
+import { useNavigate } from "react-router-dom";
 import styles from "./buttonLink.module.scss";
 import { FC } from "react";
 
 const ButtonLink: FC<{ text: string; to: string; className?: string }> = (props) => {
+  const navigate = useNavigate();
+
   return (
-    <Link to={props.to}>
-      <Button
-        onClick={() => {
-          return 0;
-        }}
-        text={props.text}
-        className={clippy(styles.component, props.className)}
-      />
-    </Link>
+    <Button
+      onClick={() => {
+        navigate(props.to);
+        return 0;
+      }}
+      text={props.text}
+      className={clippy(styles.component, props.className)}
+    />
   );
 };
 

package/components/buttonWithIcon/buttonWithIcon.module.scss

@@ -0,0 +1,56 @@
+/*!
+ * 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;
+  align-items: center;
+  justify-content: center;
+  font-family: var(#{$theme}#{$font}#{$family});
+  text-align: center;
+  min-width: 6rem;
+  padding: 0 var(#{$theme}#{$button}#{$padding}#{$horizontal}) 0 0;
+  color: var(#{$theme}#{$button}#{$color});
+  border: var(#{$theme}#{$button}#{$border});
+  border-radius: var(#{$theme}#{$button}#{$radius});
+  background: var(#{$theme}#{$button}#{$background});
+  transition: var(#{$theme}#{$button}#{$transition});
+  height: var(#{$theme+$input+$height});
+  width: max-content;
+  gap: var(#{$theme+$input+$padding+$horizontal});
+  cursor: pointer;
+
+  &:hover {
+    color: var(#{$theme}#{$button}#{$hover}#{$color});
+    border: var(#{$theme}#{$button}#{$hover}#{$border});
+    border-radius: var(#{$theme}#{$button}#{$hover}#{$radius});
+    background: var(#{$theme}#{$button}#{$hover}#{$background});
+    transition: var(#{$theme}#{$button}#{$hover}#{$transition});
+  }
+
+  &:active {
+    color: var(#{$theme}#{$button}#{$active}#{$color});
+    border: var(#{$theme}#{$button}#{$active}#{$border});
+    border-radius: var(#{$theme}#{$button}#{$active}#{$radius});
+    background: var(#{$theme}#{$button}#{$active}#{$background});
+    transition: var(#{$theme}#{$button}#{$active}#{$transition});
+  }
+
+  &:disabled {
+    opacity: 0.8;
+
+    color: var(#{$theme}#{$button}#{$color});
+    border: var(#{$theme}#{$button}#{$border});
+    border-radius: var(#{$theme}#{$button}#{$radius});
+    background: var(#{$theme}#{$button}#{$background});
+    cursor: not-allowed;
+  }
+}
+
+.icon {
+  margin-left: calc(var(#{$theme}#{$button}#{$padding}#{$horizontal}) / 2);
+  margin-right: calc(var(#{$theme}#{$button}#{$padding}#{$horizontal}) / 4);
+}

package/components/buttonWithIcon/buttonWithIcon.tsx

@@ -0,0 +1,36 @@
+/*
+ * 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 Icon from "../icon/icon.tsx";
+import { UKIcon } from "../icon/iconDictionary.ts";
+import styles from "./buttonWithIcon.module.scss";
+import { FC } from "react";
+
+const ButtonWithIcon: FC<{
+  icon: UKIcon;
+  onClick: () => void;
+  text: string;
+  className?: string;
+  disabled?: boolean;
+}> = (props) => {
+  return (
+    <button
+      className={clippy(styles.component, props.className)}
+      onClick={props.onClick}
+      aria-label={props.text}
+      disabled={props.disabled}
+    >
+      <Icon
+        size={"1.25rem"}
+        className={styles.icon}
+        icon={props.icon}
+      />
+      {props.text}
+    </button>
+  );
+};
+
+export default ButtonWithIcon;

package/components/card/card.module.scss

@@ -3,7 +3,7 @@
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
  */
 
-@import "../../theme/themeValues";
+@use "@yourdash/uikit/theme/themeValues" as *;
 
 .component {
   box-sizing: border-box;
@@ -58,12 +58,11 @@
 }
 
 .actions {
-  border-left: none;
-  border-right: none;
-  border-bottom: none;
+  border: none;
   display: flex;
   align-items: flex-end;
   width: 100%;
+  background: transparent;
 }
 
 .content {
@@ -71,8 +70,9 @@
   flex-direction: column;
   gap: var(#{$theme+$gap});
   padding: var(#{$theme+$padding});
-  padding-top: var(#{$theme+$gap});
-  padding-bottom: var(#{$theme+$gap});
+  // dont remember why this was here but it might be needed again
+  //padding-top: var(#{$theme+$gap});
+  //padding-bottom: var(#{$theme+$gap});
   height: 100%;
   width: 100%;
 }

package/components/card/card.tsx

@@ -3,12 +3,13 @@
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
  */
 
-import clippy from "@yourdash/shared/web/helpers/clippy.js";
-import IncrementLevel from "../../core/incrementLevel.js";
-import { useLevel, useLevelClass } from "../../core/level.js";
-import Box from "../box/box.js";
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+import IncrementLevel from "../../core/incrementLevel.tsx";
+import { useLevel, useLevelClass } from "../../core/level.tsx";
+import Box from "../box/box.tsx";
 import styles from "./card.module.scss";
 import { FC, Ref } from "react";
+import DecrementLevel from "../../core/decrementLevel.tsx";
 
 const Card: FC<{
   level?: 0 | 1 | 2 | 3;
@@ -27,33 +28,35 @@ const Card: FC<{
   if (props.onClick) {
     return (
       <>
-        <button
-          style={props.style}
-          className={clippy(styles.component, useLevelClass(level), props.containerClassName, styles.clickable)}
-          onClick={props.onClick}
-        >
-          <IncrementLevel>
+        <IncrementLevel>
+          <button
+            style={props.style}
+            className={clippy(styles.component, useLevelClass(level), props.containerClassName, styles.clickable)}
+            onClick={props.onClick}
+          >
             {props.header && <Box className={clippy(styles.header, props.headerClassName)}>{props.header}</Box>}
             <div className={clippy(styles.content, props.className)}>{props.children}</div>
             {props.actions && <Box className={clippy(styles.actions, props.actionsClassName)}>{props.actions}</Box>}
-          </IncrementLevel>
-        </button>
+          </button>
+        </IncrementLevel>
       </>
     );
   }
 
   return (
     <>
-      <div
-        style={props.style}
-        className={clippy(styles.component, useLevelClass(level), props.containerClassName)}
-      >
-        <IncrementLevel>
+      <IncrementLevel>
+        <div
+          style={props.style}
+          className={clippy(styles.component, useLevelClass(level), props.containerClassName)}
+        >
           {props.header && <Box className={clippy(styles.header, props.headerClassName)}>{props.header}</Box>}
           <div className={clippy(styles.content, props.className)}>{props.children}</div>
-          {props.actions && <Box className={clippy(styles.actions, props.actionsClassName)}>{props.actions}</Box>}
-        </IncrementLevel>
-      </div>
+          <DecrementLevel>
+            {props.actions && <Box className={clippy(styles.actions, props.actionsClassName)}>{props.actions}</Box>}
+          </DecrementLevel>
+        </div>
+      </IncrementLevel>
     </>
   );
 };

package/components/container/container.module.scss

@@ -0,0 +1,20 @@
+/*!
+ * 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 {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  font-weight: var(#{$theme}#{$font}#{$weight});
+  font-size: var(#{$theme}#{$font}#{$size});
+  font-family: var(#{$theme}#{$font}#{$family});
+  background: var(#{$theme}#{$background});
+  padding: var(#{$theme}#{$padding});
+  border-radius: 0;
+  gap: var(#{$theme}#{$gap});
+}

package/components/container/container.tsx

@@ -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 clippy from "@yourdash/shared/web/helpers/clippy.ts";
+import { FC, ReactNode } from "react";
+import IncrementLevel from "../../core/incrementLevel.tsx";
+import { useLevel, useLevelClass } from "../../core/level.tsx";
+import styles from "./container.module.scss";
+
+const Container: FC<{ className?: string; level?: 0 | 1 | 2 | 3; children: ReactNode | ReactNode[] }> = (props) => {
+  const level = props.level || useLevel();
+
+  return (
+    <div className={clippy(styles.component, props.className, useLevelClass(level))}>
+      <IncrementLevel>{props.children}</IncrementLevel>
+    </div>
+  );
+};
+
+export default Container;

package/components/contextMenu/contextMenu.tsx

@@ -4,7 +4,7 @@
  */
 
 import { FC } from "react";
-import contextMenuRootContext from "./contextMenuRootContext.js";
+import contextMenuRootContext from "./contextMenuRootContext.tsx";
 
 const ContextMenu: FC<{
   items: { label: string; onClick: () => void }[];

package/components/contextMenu/contextMenuRoot.module.scss

@@ -3,7 +3,7 @@
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
  */
 
-@import "../../theme/themeValues";
+@use "@yourdash/uikit/theme/themeValues" as *;
 
 .component {
   position: fixed;

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, { ReactNode } from "react";
-import { FC, useEffect, useRef } from "react";
-import Button from "../button/button.js";
-import ContextMenuRootContext from "./contextMenuRootContext.js";
-import styles from "./contextMenuRoot.module.scss";
-
-const ContextMenuRoot: FC<{ children: ReactNode | 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/flex/flex.module.scss

@@ -1,19 +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;
-}
+/*!
+ * 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

@@ -3,11 +3,32 @@
  * 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[] }> = (props) => {
-  return <div className={`${styles.component} ${styles[props.direction]} ${props.className}`}>{props.children}</div>;
+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

@@ -3,7 +3,7 @@
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
  */
 
-@import "../../theme/themeValues";
+@use "@yourdash/uikit/theme/themeValues" as *;
 
 .component {
   display: inline-block;

package/components/heading/heading.tsx

@@ -4,7 +4,7 @@
  */
 
 import styles from "./heading.module.scss";
-import clippy from "@yourdash/shared/web/helpers/clippy";
+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) => {