@yakad/ui 1.0.0

package/appBar/appBar.module.css

@@ -0,0 +1,15 @@
+.header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    box-sizing: border-box;
+    gap: 1.5rem;
+    width: 100%;
+    height: 5rem;
+    padding: 0 2rem;
+    border-bottom: 0.1rem solid #7d7d7d40;
+    background: var(--headerColor);
+    color: var(--onHeaderColor);
+    fill: var(--onHeaderColor);
+    user-select: none;
+}

package/appBar/appBar.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { joinClassNames, joinStyles } from "library";
+import styles from "./appBar.module.css";
+
+function AppBar(props: React.HTMLAttributes<HTMLElement>) {
+    const joinedClassNames = joinClassNames(styles.header, props.className!);
+
+    return (
+        <header {...props} className={joinedClassNames}>
+            {props.children}
+        </header>
+    );
+}
+
+export default AppBar;

package/button/button.module.css

@@ -0,0 +1,87 @@
+.button {
+    display: flex;
+    align-items: center;
+    line-height: 3rem;
+    border: none;
+    background: none;
+    color: inherit;
+    fill: inherit;
+    user-select: none;
+    cursor: pointer;
+    box-sizing: border-box;
+}
+.small {
+    min-width: 3rem;
+    height: 3rem;
+    padding: 0 1.2rem;
+    gap: 0.4rem;
+    font-size: 1.2rem;
+    --border-radius: 1.5rem;
+}
+.medium {
+    min-width: 4rem;
+    height: 4rem;
+    padding: 0 1.8rem;
+    gap: 0.8rem;
+    font-size: 1.6rem;
+    --border-radius: 2rem;
+}
+.large {
+    min-width: 5rem;
+    height: 5rem;
+    padding: 0 2.6rem;
+    gap: 1.1rem;
+    font-size: 1.8rem;
+    --border-radius: 2.5rem;
+}
+
+.iconButton {
+    padding: 0;
+    justify-content: center;
+}
+
+.none {
+    border-radius: 0;
+}
+.semi {
+    border-radius: 0 var(--border-radius) var(--border-radius) 0;
+}
+[dir="rtl"] .semi {
+    border-radius: var(--border-radius) 0 0 var(--border-radius);
+}
+.rounded {
+    border-radius: var(--border-radius);
+}
+
+@media (pointer: fine) {
+    .button:hover {
+        cursor: pointer;
+        box-shadow: inset 0 0 10rem #7d7d7d20;
+    }
+}
+.button:active {
+    box-shadow: inset 0 0 10rem #7d7d7d30;
+}
+.button:invalid {
+    border: 0.1rem solid var(--errorColor);
+}
+
+.outlined {
+    border: 0.1rem solid #7d7d7d70;
+}
+.filled {
+    background: var(--onBackgroundColor);
+    color: var(--onPrimaryColor);
+    fill: var(--onPrimaryColor);
+}
+.tonal {
+    background: var(--onHeaderColor);
+    color: var(--onSurfaceColor);
+    fill: var(--onSurfaceColor);
+}
+.elevated {
+    background-color: var(--onPrimaryColor);
+    color: var(--onSurfaceColor);
+    fill: var(--onSurfaceColor);
+    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+}

package/button/button.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { joinClassNames } from "library";
+import styles from "./button.module.css";
+import SvgIcon from "ui/svgIcon/svgIcon";
+
+interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    variant?: "text" | "outlined" | "filled" | "tonal" | "elevated";
+    size?: "small" | "medium" | "large";
+    borderStyle?: "none" | "semi" | "rounded";
+    icon?: JSX.Element;
+}
+
+interface svgSizeMap {
+    small: number;
+    medium: number;
+    large: number;
+}
+
+const svgSizeMaps: svgSizeMap = {
+    small: 2,
+    medium: 2.4,
+    large: 3,
+};
+
+function Button(props: ButtonProps) {
+    const joinedClassNames = joinClassNames(
+        styles.button,
+        props.variant ? styles[props.variant] : styles.text,
+        props.size ? styles[props.size] : styles.medium,
+        props.borderStyle ? styles[props.borderStyle] : styles.rounded,
+        props.icon && !props.children ? styles.iconButton : "",
+        props.className!
+    );
+
+    return (
+        <button {...props} className={joinedClassNames}>
+            {props.icon ? (
+                <SvgIcon
+                    size={
+                        props.size
+                            ? svgSizeMaps[props.size]
+                            : svgSizeMaps.medium
+                    }
+                >
+                    {props.icon}
+                </SvgIcon>
+            ) : null}
+            {props.children}
+        </button>
+    );
+}
+
+export default Button;

package/card/card.module.css

@@ -0,0 +1,12 @@
+.card {
+    width: 100%;
+    padding: 3rem;
+    box-sizing: border-box;
+    border-radius: 2rem;
+    background: var(--surfaceColor);
+    color: var(--onSurfaceColor);
+    fill: var(--onSurfaceColor);
+    box-shadow: 0px 6px 10px 0px hsla(0, 0%, 0%, 0.14),
+        0px 1px 18px 0px hsla(0, 0%, 0%, 0.12),
+        0px 3px 5px -1px hsla(0, 0%, 0%, 0.2);
+}

package/card/card.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { joinClassNames } from "library";
+import styles from "./card.module.css";
+
+function Card(props: React.HTMLAttributes<HTMLElement>) {
+    const joinedClassNames = joinClassNames(styles.card, props.className!);
+
+    return (
+        <div {...props} className={joinedClassNames}>
+            {props.children}
+        </div>
+    );
+}
+
+export default Card;

package/clickAwayListener/clickAwayListener.tsx

@@ -0,0 +1,27 @@
+import React, { useEffect, useRef } from "react";
+
+interface ClickAwayListenerProps extends React.HTMLAttributes<HTMLDivElement> {
+    onClickAway: React.MouseEventHandler<HTMLDivElement>;
+}
+
+function ClickAwayListener(props: ClickAwayListenerProps) {
+    const ref = useRef(null);
+
+    useEffect(() => {
+        const handleOutSideClick = (event: MouseEvent) => {
+            if (ref.current && !(ref.current as any).contains(event.target)) {
+                props.onClickAway && props.onClickAway(event as any);
+            }
+        };
+
+        document.addEventListener("click", handleOutSideClick, true);
+
+        // CleanUp When element unmount
+        return () =>
+            document.removeEventListener("click", handleOutSideClick, true);
+    }, [props.onClickAway]);
+
+    return <div ref={ref}>{props.children}</div>;
+}
+
+export default ClickAwayListener;

package/container/container.module.css

@@ -0,0 +1,23 @@
+div.container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin: auto;
+    box-sizing: border-box;
+}
+
+div.container.xs {
+    max-width: 44.4rem;
+}
+div.container.sm {
+    max-width: 60rem;
+}
+div.container.md {
+    max-width: 90rem;
+}
+div.container.lg {
+    max-width: 120rem;
+}
+div.container.xl {
+    max-width: 150rem;
+}

package/container/container.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { joinClassNames, joinStyles } from "library";
+import styles from "./container.module.css";
+
+type ScreenSize = "xs" | "sm" | "md" | "lg" | "xl";
+
+interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    maxWidth?: ScreenSize;
+}
+
+function Container(props: ContainerProps) {
+    const joinedClassNames = joinClassNames(
+        props.maxWidth ? styles[props.maxWidth] : "",
+        styles.container,
+        props.className!
+    );
+
+    return (
+        <div {...props} className={joinedClassNames}>
+            {props.children}
+        </div>
+    );
+}
+
+export default Container;

package/footer/footer.module.css

@@ -0,0 +1,6 @@
+.footer {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    box-sizing: border-box;
+}

package/footer/footer.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { joinClassNames, joinStyles } from "library";
+import styles from "./footer.module.css";
+
+function Footer(props: React.HTMLAttributes<HTMLElement>) {
+    const joinedClassNames = joinClassNames(styles.footer, props.className!);
+
+    return (
+        <footer {...props} className={joinedClassNames}>
+            {props.children}
+        </footer>
+    );
+}
+
+export default Footer;

package/form/form.module.css

@@ -0,0 +1,6 @@
+.form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    width: 100%;
+}

package/form/form.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { joinClassNames, joinStyles } from "library";
+import styles from "./form.module.css";
+
+function Form(props: React.HTMLAttributes<HTMLFormElement>) {
+    const joinedClassNames = joinClassNames(styles.form, props.className!);
+
+    return (
+        <form
+            {...props}
+            className={joinedClassNames}
+            onSubmit={(e) => {
+                e.preventDefault();
+
+                props.onSubmit!(null as any);
+            }}
+        >
+            {props.children}
+        </form>
+    );
+}
+
+export default Form;

package/gridContainer/gridContainer.module.css

@@ -0,0 +1,4 @@
+.gridcontainer {
+    display: grid;
+    box-sizing: border-box;
+}

package/gridContainer/gridContainer.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { joinClassNames, joinStyles } from "library";
+import styles from "./gridContainer.module.css";
+
+interface GridContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    rowGap?: number;
+    columnGap?: number;
+}
+
+// Custom Button Element
+function GridContainer(props: GridContainerProps) {
+    const joinedClassNames = joinClassNames(
+        styles.gridcontainer,
+        props.className!
+    );
+    const joinedStyles = joinStyles(
+        props.xl ? { gridTemplateColumns: " 1fr".repeat(props.xl) } : {},
+        { columnGap: props.columnGap ? props.columnGap + "rem" : "1.5rem" },
+        { rowGap: props.rowGap ? props.rowGap + "rem" : "1.5rem" },
+        props.style!
+    );
+    return (
+        <div {...props} className={joinedClassNames} style={joinedStyles}>
+            {props.children}
+        </div>
+    );
+}
+
+export default GridContainer;

package/gridItem/gridItem.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { joinClassNames, joinStyles } from "library";
+import styles from "./gridItem.module.css";
+
+interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+}
+
+// Custom Button Element
+function GridItem(props: GridItemProps) {
+    const joinedStyles = joinStyles(
+        props.xl ? { gridColumn: "span " + props.xl } : {},
+        props.style!
+    );
+
+    return (
+        <div {...props} style={joinedStyles}>
+            {props.children}
+        </div>
+    );
+}
+
+export default GridItem;

package/historyBack/historyBack.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+function HistoryBack(props: React.HTMLAttributes<HTMLDivElement>) {
+    const navigate = useNavigate();
+
+    return (
+        <div
+            {...props}
+            onClick={() => {
+                navigate(-1);
+                props.onClick!(null as any);
+            }}
+        >
+            {props.children}
+        </div>
+    );
+}
+
+export default HistoryBack;

package/hr/hr.module.css

@@ -0,0 +1,18 @@
+.hr {
+    width: calc(100% - 1rem);
+    height: 0;
+    padding: 0;
+    margin: 0.5rem auto;
+    background: none;
+    border-top: 0.1rem solid var(--secondaryVariantColor);
+}
+.dotted {
+    border-top: 0.4rem dotted var(--secondaryVariantColor);
+}
+.dashed {
+    border-top: 0.2rem dashed var(--secondaryVariantColor);
+}
+.shortLine {
+    width: 30rem;
+    max-width: 80%;
+}

package/hr/hr.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { joinClassNames, joinStyles } from "library";
+import styles from "./hr.module.css";
+
+interface HrProps extends React.HTMLAttributes<HTMLElement> {
+    variant?: "dotted" | "dashed" | "shortLine";
+    height?: number;
+    marginTopBottom?: number;
+}
+
+function Hr(props: HrProps) {
+    const joinedClassNames = joinClassNames(
+        styles.hr,
+        props.variant ? styles[props.variant] : "",
+        props.className!
+    );
+
+    const joinedStyles = joinStyles(
+        props.height ? { borderTopWidth: props.height + "rem" } : {},
+        props.marginTopBottom
+            ? joinStyles(
+                  { marginTop: props.marginTopBottom + "rem" },
+                  { marginBottom: props.marginTopBottom + "rem" }
+              )
+            : {},
+        props.style!
+    );
+
+    return (
+        <hr {...props} className={joinedClassNames} style={joinedStyles}></hr>
+    );
+}
+
+export default Hr;

package/index.tsx

@@ -0,0 +1,43 @@
+import AppBar from "./appBar/appBar";
+import Button from "./button/button";
+import Container from "./container/container";
+import GridContainer from "./gridContainer/gridContainer";
+import GridItem from "./gridItem/gridItem";
+import Stack from "./stack/stack";
+import Navigation from "./navigation/navigation";
+import ClickAwayListener from "./clickAwayListener/clickAwayListener";
+import List from "./list/list";
+import ListItem from "./listItem/listItem";
+import Main from "./main/main";
+import Page from "./page/page";
+import Spacer from "./spacer/spacer";
+import Hr from "./hr/hr";
+import Form from "./form/form";
+import SvgIcon from "./svgIcon/svgIcon";
+import HistoryBack from "./historyBack/historyBack";
+import Row from "./row/row";
+import Footer from "./footer/footer";
+import Card from "./card/card";
+
+export {
+    Container,
+    GridContainer,
+    GridItem,
+    Stack,
+    Navigation,
+    ClickAwayListener,
+    AppBar,
+    Button,
+    List,
+    ListItem,
+    Main,
+    Page,
+    Spacer,
+    Hr,
+    Form,
+    SvgIcon,
+    HistoryBack,
+    Row,
+    Footer,
+    Card,
+};

package/list/list.module.css

@@ -0,0 +1,22 @@
+.list {
+    display: flex;
+    list-style-type: none;
+    max-height: 100rem;
+    padding: 0;
+    transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.row {
+    flex-direction: row;
+}
+.column {
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.collapsed {
+    max-height: 0;
+    overflow: hidden;
+}

package/list/list.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { joinClassNames } from "library";
+import styles from "./list.module.css";
+
+interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
+    direction?: "row" | "column";
+    collapsed?: boolean;
+}
+
+function List(props: ListProps) {
+    const joinedClassNames = joinClassNames(
+        styles.list,
+        props.direction ? styles[props.direction] : styles.row,
+        props.collapsed ? styles.collapsed : "",
+        props.className!
+    );
+
+    return (
+        <ul {...props} className={joinedClassNames}>
+            {props.children}
+        </ul>
+    );
+}
+
+export default List;

package/listItem/listItem.module.css

@@ -0,0 +1,6 @@
+.listItem {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    box-sizing: border-box;
+}

package/listItem/listItem.tsx

@@ -0,0 +1,13 @@
+import { listenerCount } from "process";
+import React from "react";
+import styles from "./listItem.module.css";
+
+function ListItem(props: React.HTMLAttributes<HTMLLIElement>) {
+    return (
+        <li className={styles.listItem} {...props}>
+            {props.children}
+        </li>
+    );
+}
+
+export default ListItem;

package/main/main.module.css

@@ -0,0 +1,19 @@
+.main {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-self: flex-end;
+    box-sizing: border-box;
+    width: 100%;
+    transition: width 0.3s;
+}
+
+.navOpen {
+    width: calc(100% - 22rem);
+}
+
+@media screen and (max-width: 1000px) {
+    .navOpen {
+        width: 100%;
+    }
+}

package/main/main.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { joinClassNames, joinStyles } from "library";
+import styles from "./main.module.css";
+
+interface MainProps extends React.HTMLAttributes<HTMLDivElement> {
+    navOpen?: boolean;
+}
+
+function Main(props: MainProps) {
+    const navOpenClass = props.navOpen ? styles.navOpen : "";
+
+    const joinedClassNames = joinClassNames(
+        styles.main,
+        navOpenClass,
+        props.className!
+    );
+
+    return (
+        <main {...props} className={joinedClassNames}>
+            {props.children}
+        </main>
+    );
+}
+
+export default Main;

package/navigation/navigation.module.css

@@ -0,0 +1,56 @@
+.navigation {
+    position: fixed;
+    max-width: 100%;
+    transition: transform 0.3s;
+    background: var(--backgroundColor);
+    overflow-y: auto;
+}
+
+.auto,
+.left {
+    top: 5.1rem;
+    left: 0;
+    width: 21.9rem;
+    height: calc(100% - 5.1rem);
+    max-height: 100%;
+    border-inline-end: 0.2rem solid #7d7d7d40;
+    transform: translate(-100%, 0);
+}
+[dir="rtl"] .auto,
+.right {
+    right: 0;
+    top: 5.1rem;
+    width: 21.9rem;
+    height: calc(100% - 5.1rem);
+    max-height: 100%;
+    border-inline-end: 0.2rem solid #7d7d7d40;
+    transform: translate(100%, 0);
+}
+
+.top {
+    top: 0;
+    width: 100%;
+    height: auto;
+    border-bottom: 0.2rem solid #7d7d7d40;
+    transform: translate(0, -100%);
+}
+.bottom {
+    bottom: 0;
+    width: 100%;
+    height: auto;
+    border-top: 0.2rem solid #7d7d7d40;
+    transform: translate(0, 100%);
+}
+
+.open {
+    transform: translate(0, 0);
+}
+
+@media screen and (max-width: 1000px) {
+    .auto,
+    .left,
+    .right {
+        top: 0;
+        height: 100%;
+    }
+}

package/navigation/navigation.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { joinClassNames } from "library";
+import styles from "./navigation.module.css";
+
+interface NavigationProps extends React.HTMLAttributes<HTMLElement> {
+    anchor?: "left" | "right" | "top" | "bottom" | "auto";
+    open: boolean;
+}
+
+function Navigation(props: NavigationProps) {
+    const joinedClassNames = joinClassNames(
+        styles.navigation,
+        props.anchor ? styles[props.anchor] : styles.auto,
+        props.open ? styles.open : ""
+    );
+
+    return (
+        <nav {...props} className={joinedClassNames}>
+            {props.children}
+        </nav>
+    );
+}
+
+export default Navigation;

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@yakad/ui",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NatiqQuran/yakad.git"
+  },
+  "keywords": [
+    "ui"
+  ],
+  "author": "natiq",
+  "license": "GPL-3.0",
+  "bugs": {
+    "url": "https://github.com/NatiqQuran/yakad/issues"
+  },
+  "homepage": "https://github.com/NatiqQuran/yakad#readme"
+}

package/page/page.module.css

@@ -0,0 +1,9 @@
+.page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: 100%;
+    background: var(--backgroundColor);
+    color: var(--onBackgroundColor);
+    fill: var(--onBackgroundColor);
+}

package/page/page.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { joinClassNames, joinStyles } from "library";
+import styles from "./page.module.css";
+
+function Page(props: React.HTMLAttributes<HTMLDivElement>) {
+    const joinedClassNames = joinClassNames(styles.page, props.className!);
+
+    return (
+        <div {...props} className={joinedClassNames}>
+            {props.children}
+        </div>
+    );
+}
+
+export default Page;

package/row/row.module.css

@@ -0,0 +1,7 @@
+.row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1.5rem;
+    box-sizing: border-box;
+}

package/row/row.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { joinClassNames, joinStyles } from "library";
+import styles from "./row.module.css";
+
+function Row(props: React.HTMLAttributes<HTMLDivElement>) {
+    const joinedClassNames = joinClassNames(styles.row, props.className!);
+
+    return (
+        <div {...props} className={joinedClassNames}>
+            {props.children}
+        </div>
+    );
+}
+
+export default Row;

package/spacer/spacer.module.css

@@ -0,0 +1,5 @@
+.spacer {
+    width: 0;
+    height: 100%;
+    margin: auto;
+}

package/spacer/spacer.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import styles from "./spacer.module.css";
+
+function Spacer() {
+    return <div className={styles.spacer}></div>;
+}
+
+export default Spacer;

package/stack/stack.module.css

@@ -0,0 +1,6 @@
+.stack {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    box-sizing: border-box;
+}

package/stack/stack.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { joinClassNames, joinStyles } from "library";
+import styles from "./stack.module.css";
+
+function Stack(props: React.HTMLAttributes<HTMLDivElement>) {
+    const joinedClassNames = joinClassNames(styles.stack, props.className!);
+
+    return (
+        <div {...props} className={joinedClassNames}>
+            {props.children}
+        </div>
+    );
+}
+
+export default Stack;

package/svgIcon/svgIcon.module.css

@@ -0,0 +1,5 @@
+.svg svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+}

package/svgIcon/svgIcon.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { joinClassNames, joinStyles } from "library";
+import styles from "./svgIcon.module.css";
+
+interface SvgIconProps extends React.HTMLAttributes<HTMLElement> {
+    size?: number;
+}
+
+function SvgIcon(props: SvgIconProps) {
+    const joinedClassNames = joinClassNames(styles.svg, props.className!);
+
+    const joinedStyles = joinStyles(
+        props.size
+            ? { width: props.size + "rem", height: props.size + "rem" }
+            : { width: "2.4rem", height: "2.4rem" },
+        props.style!
+    );
+
+    return (
+        <div {...props} className={joinedClassNames} style={joinedStyles}>
+            {props.children}
+        </div>
+    );
+}
+
+export default SvgIcon;