@yourdash/uikit 1.0.0 → 1.0.2

package/README.md

@@ -1,2 +1,2 @@
-# YourDash UIKit
-@yourdash/uikit is a reactjs ui library with element level hirearchy support, custom theme scss support and mobile adaptability
+# YourDash UIKit
+@yourdash/uikit is a reactjs ui library with element level hirearchy support, custom theme scss support and mobile adaptability

package/components/box/box.module.scss

@@ -1,21 +1,21 @@
-/*!
- * 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 {
-  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});
-  border: var(#{$theme}#{$border});
-  padding: var(#{$theme}#{$padding});
-  border-radius: 0;
-  gap: var(#{$theme}#{$gap});
-}
+/*!
+ * 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 {
+  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});
+  border: var(#{$theme}#{$border});
+  padding: var(#{$theme}#{$padding});
+  border-radius: 0;
+  gap: var(#{$theme}#{$gap});
+}

package/components/box/box.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 clippy from "@yourdash/shared/web/helpers/clippy.js";
-import { FC, ReactNode } from "react";
-import IncrementLevel from "../../core/incrementLevel.js";
-import { useLevel, useLevelClass } from "../../core/level.js";
-import styles from "./box.module.scss";
-
-const Box: 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 Box;
+/*
+ * 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 "./box.module.scss";
+
+const Box: 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 Box;

package/components/button/button.module.scss

@@ -1,47 +1,46 @@
-/*!
- * 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 {
-  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});
-  border-radius: var(#{$theme}#{$button}#{$radius});
-  background: var(#{$theme}#{$button}#{$background});
-  transition: var(#{$theme}#{$button}#{$transition});
-  height: var(#{$theme+$input+$height});
-  width: max-content;
-  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;
-  }
-}
+/*!
+ * 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 {
+  font-family: var(#{$theme}#{$font}#{$family});
+  min-width: 6rem;
+  padding: 0 var(#{$theme}#{$button}#{$padding}#{$horizontal});
+  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;
+  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;
+  }
+}

package/components/button/button.tsx

@@ -1,23 +1,24 @@
-/*
- * 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 styles from "./button.module.scss";
-import { FC } from "react";
-
-const Button: FC<{ 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}
-    >
-      {props.text}
-    </button>
-  );
-};
-
-export default Button;
+/*
+ * 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 "./button.module.scss";
+import { FC } from "react";
+
+const Button: FC<{ 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}
+      type={"button"}
+    >
+      {props.text}
+    </button>
+  );
+};
+
+export default Button;

package/components/buttonLink/buttonLink.module.scss

@@ -1,47 +1,51 @@
-/*!
- * 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 {
-  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});
-  border-radius: var(#{$theme}#{$button}#{$radius});
-  background: var(#{$theme}#{$button}#{$background});
-  transition: var(#{$theme}#{$button}#{$transition});
-  height: var(#{$theme+$input+$height});
-  width: max-content;
-  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;
-  }
-}
+/*!
+ * 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 {
+  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});
+  border-radius: var(#{$theme}#{$button}#{$radius});
+  background: var(#{$theme}#{$button}#{$background});
+  transition: var(#{$theme}#{$button}#{$transition});
+  height: var(#{$theme+$input+$height});
+  width: max-content;
+  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;
+  }
+}
+
+.link {
+  display: inline;
+}

package/components/buttonLink/buttonLink.tsx

@@ -1,26 +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 clippy from "@yourdash/shared/web/helpers/clippy.js";
-import Button from "../button/button.js";
-import { Link } from "react-router-dom";
-import styles from "./buttonLink.module.scss";
-import { FC } from "react";
-
-const ButtonLink: FC<{ text: string; to: string; className?: string }> = (props) => {
-  return (
-    <Link to={props.to}>
-      <Button
-        onClick={() => {
-          return 0;
-        }}
-        text={props.text}
-        className={clippy(styles.component, props.className)}
-      />
-    </Link>
-  );
-};
-
-export default ButtonLink;
+/*
+ * 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 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 (
+    <Button
+      onClick={() => {
+        navigate(props.to);
+        return 0;
+      }}
+      text={props.text}
+      className={clippy(styles.component, props.className)}
+    />
+  );
+};
+
+export default ButtonLink;

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)
+ */
+
+@import "../../theme/themeValues";
+
+.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

@@ -1,78 +1,78 @@
-/*!
- * 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 {
-  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});
-  color: var(#{$theme+$color});
-  border: var(#{$theme+$border});
-  padding: 0;
-  border-radius: var(#{$theme+$radius});
-  overflow: hidden;
-}
-
-.clickable {
-  display: flex;
-  width: 100%;
-  cursor: pointer;
-
-  color: var(#{$theme+$button+$color});
-  background: var(#{$theme+$button+$background});
-  border: var(#{$theme+$button+$border});
-  font-size: var(#{$theme+$button+$font+$size});
-  font-weight: var(#{$theme+$button+$font+$weight});
-  border-radius: var(#{$theme+$button+$radius});
-  transition:  var(#{$theme+$button+$transition});
-
-  &:hover {
-    color: var(#{$theme+$button+$hover+$color});
-    background: var(#{$theme+$button+$hover+$background});
-    border: var(#{$theme+$button+$hover+$border});
-    border-radius: var(#{$theme+$button+$hover+$radius});
-    transition: var(#{$theme+$button+$hover+$transition});
-  }
-
-  &:active {
-    color: var(#{$theme+$button+$active+$color});
-    background: var(#{$theme+$button+$active+$background});
-    border: var(#{$theme+$button+$active+$border});
-    border-radius: var(#{$theme+$button+$active+$radius});
-    transition: var(#{$theme+$button+$active+$transition});
-  }
-}
-
-.header {
-  border-left: none;
-  border-right: none;
-  border-top: none;
-  width: 100%;
-}
-
-.actions {
-  border-left: none;
-  border-right: none;
-  border-bottom: none;
-  display: flex;
-  align-items: flex-end;
-  width: 100%;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  gap: var(#{$theme+$gap});
-  padding: var(#{$theme+$padding});
-  padding-top: var(#{$theme+$gap});
-  padding-bottom: var(#{$theme+$gap});
-  height: 100%;
-  width: 100%;
-}
+/*!
+ * 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 {
+  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});
+  color: var(#{$theme+$color});
+  border: var(#{$theme+$border});
+  padding: 0;
+  border-radius: var(#{$theme+$radius});
+  overflow: hidden;
+}
+
+.clickable {
+  display: flex;
+  width: 100%;
+  cursor: pointer;
+
+  color: var(#{$theme+$button+$color});
+  background: var(#{$theme+$button+$background});
+  border: var(#{$theme+$button+$border});
+  font-size: var(#{$theme+$button+$font+$size});
+  font-weight: var(#{$theme+$button+$font+$weight});
+  border-radius: var(#{$theme+$button+$radius});
+  transition:  var(#{$theme+$button+$transition});
+
+  &:hover {
+    color: var(#{$theme+$button+$hover+$color});
+    background: var(#{$theme+$button+$hover+$background});
+    border: var(#{$theme+$button+$hover+$border});
+    border-radius: var(#{$theme+$button+$hover+$radius});
+    transition: var(#{$theme+$button+$hover+$transition});
+  }
+
+  &:active {
+    color: var(#{$theme+$button+$active+$color});
+    background: var(#{$theme+$button+$active+$background});
+    border: var(#{$theme+$button+$active+$border});
+    border-radius: var(#{$theme+$button+$active+$radius});
+    transition: var(#{$theme+$button+$active+$transition});
+  }
+}
+
+.header {
+  border-left: none;
+  border-right: none;
+  border-top: none;
+  width: 100%;
+}
+
+.actions {
+  border: none;
+  display: flex;
+  align-items: flex-end;
+  width: 100%;
+  background: transparent;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(#{$theme+$gap});
+  padding: var(#{$theme+$padding});
+  // 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%;
+}