ar-design 0.1.2 → 0.1.3

package/dist/assest/css/menu/core/open-or-close.css

@@ -5,8 +5,13 @@
   transition: max-height 250ms ease-in-out, opacity 250ms cubic-bezier(1, 0, 0, 1);
 }
 .ar-menu .ar-menu-list-item-groups.opened {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem 0;
   opacity: 1;
   max-height: 100rem;
+  padding-top: 0.2rem;
+  padding-bottom: 0.2rem;
 }
 .ar-menu .ar-menu-list-item-group-item-title {
   display: flex;

package/dist/assest/css/menu/core/selected.css

@@ -11,8 +11,7 @@
   border-bottom-left-radius: var(--border-radius-lg);
 }
 .ar-menu .ar-menu-list-item-group-item-title.selected {
-  background-color: rgba(var(--red-rgb), 0.1) !important;
-  border-top-left-radius: var(--border-radius-lg);
-  border-bottom-left-radius: var(--border-radius-lg);
-  color: var(--red);
+  background-color: var(--gray-200) !important;
+  border-radius: var(--border-radius-lg);
+  box-shadow: 0 0 0 1px var(--gray-200);
 }

package/dist/assest/css/menu/menu.css

@@ -1,2 +1,58 @@
-@import url("./core/core.css");
+.ar-menu {
+  padding: 0 0.25rem;
+  font-family: var(--system-fonts);
+}
+.ar-menu ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.ar-menu ul li:last-child {
+  padding-bottom: 0;
+}
+.ar-menu ul li ul {
+  margin-left: 0.5rem;
+  padding-left: 0.5rem;
+}
+.ar-menu > .ar-menu-list {
+  display: flex;
+}
+.ar-menu .ar-menu-list-item-group-item-title {
+  display: flex;
+  align-items: center;
+  height: 2.5rem;
+  user-select: none;
+}
+.ar-menu .ar-menu-list-item-group-item-title a {
+  color: var(--black);
+}
+.ar-menu .ar-menu-list-item-group-item-title:not(.group) > * {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 0 1rem;
+}
+.ar-menu .ar-menu-list-item-group-item-title:not(.group):hover {
+  background-color: var(--gray-200);
+  border-radius: var(--border-radius-lg);
+}
+.ar-menu .ar-menu-list-item-group-item-title.selection-item {
+  background-color: red;
+}
+.ar-menu .ar-menu-list-item-group-item-title.group {
+  display: flex;
+  /* margin-left: 1rem; */
+  padding-left: 0;
+  border-radius: 0;
+  border-bottom: solid 1px var(--gray-100);
+  color: var(--gray-500);
+  font-size: 0.85rem;
+}
+
+/* Core Css */
+@import url("./core/selected.css");
+@import url("./core/open-or-close.css");
+
+/* Variant Css */
 @import url("./variant/vertical.css");

package/dist/assest/css/syntax-highlighter/syntax-highlighter.css

@@ -1,2 +1,58 @@
-@import url("./core/core.css");
+.ar-syntax {
+  display: flex;
+  flex-direction: column;
+  border: solid 1px var(--gray-200);
+  border-radius: var(--border-radius-lg);
+  overflow: hidden;
+}
+.ar-syntax > .preview {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem;
+  background-color: var(--white);
+  padding: 1rem;
+  min-height: 7.5rem;
+}
+
+.ar-syntax > .preview.left {
+  justify-content: left;
+}
+.ar-syntax > .preview.center {
+  justify-content: center;
+}
+.ar-syntax > .preview.right {
+  justify-content: right;
+}
+
+.ar-syntax > .ar-syntax-button-group {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0.5rem 0;
+  border: dashed 1px transparent;
+  border-top-color: var(--gray-300);
+}
+
+.ar-syntax > .pre {
+  background-color: var(--gray-900);
+  margin: 0;
+  padding: 1rem;
+  overflow-x: auto;
+}
+.ar-syntax > .pre.hidden {
+  display: none;
+}
+.ar-syntax > .pre.visible {
+  display: block;
+}
+.ar-syntax > .pre > code {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem 0;
+  font-family: var(--jetBrainsMonoRegular) !important;
+}
+
 @import url("./core/jsx.template.css");

package/dist/assest/css/typography/paragraph/core.css

@@ -1,4 +1,5 @@
 .ar-typography-paragraph {
   margin-bottom: 1rem;
   color: var(--gray-900);
+  font-family: var(--system-fonts);
 }

package/dist/assest/css/typography/title/core.css

@@ -1,4 +1,5 @@
 .ar-typography-title {
   margin-bottom: 1rem;
   color: var(--gray-900);
+  font-family: var(--system-fonts);
 }

package/dist/components/alert/Types.d.ts

@@ -0,0 +1,9 @@
+import { Colors } from "../../libs/types/Colors";
+type message = string | message[];
+export type Props = {
+    message: message;
+    type: Colors | "transparent";
+    border?: boolean;
+    emphasize?: string[];
+};
+export {};

package/dist/components/alert/Types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/alert/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { Props } from "./Types";
+import "../../assest/css/alert/alert.css";
+declare const Alert: React.FC<Props>;
+export default Alert;

package/dist/components/alert/index.js

@@ -0,0 +1,60 @@
+"use client";
+import React, { useRef } from "react";
+import "../../assest/css/alert/alert.css";
+const Alert = ({ message, type, border = true, emphasize }) => {
+    // refs
+    let _className = useRef("ar-alert").current;
+    // methods
+    const className = () => {
+        if (type)
+            _className += ` ${type}`;
+        if (border)
+            _className += ` ${type}-border`;
+        return _className;
+    };
+    const formattedTags = (message) => {
+        // TODO: Şuan için sadece transparent olan alert tiplerinde çalışmakta.
+        // TODO: Bu konu hakkında düşünüp karar verilecek.
+        if (!emphasize || type !== "transparent")
+            return message;
+        let _lowerCaseMessage = message.toLowerCase();
+        return emphasize.reduce((currentMessage, emphasize) => {
+            // TODO: ...
+            // if (['""', " "].includes(emphasize)) return currentMessage;
+            let _lowerCaseEmphasize = emphasize.toLowerCase();
+            let startIndex = _lowerCaseMessage.indexOf(_lowerCaseEmphasize);
+            while (startIndex !== -1) {
+                const endIndex = startIndex + emphasize.length;
+                const firstValue = currentMessage.substring(0, startIndex);
+                const originalTag = currentMessage.substring(startIndex, endIndex);
+                const lastValue = currentMessage.substring(endIndex);
+                currentMessage = `${firstValue} <span class="ar-alert-tag">${originalTag}</span> ${lastValue}`;
+                // Update the lowerCaseMessage to reflect the change
+                _lowerCaseMessage = currentMessage.toLowerCase();
+                // Find the next occurrence of the tag
+                startIndex = _lowerCaseMessage.indexOf(_lowerCaseEmphasize, startIndex + `<span class="ar-alert-tag">${originalTag}</span>`.length);
+            }
+            return currentMessage;
+        }, message);
+    };
+    const createList = (message, isSubMessage) => {
+        let className = "";
+        if (isSubMessage)
+            className += "subMessage";
+        else
+            className += "message";
+        return (React.createElement("ul", null, Array.isArray(message)
+            ? message.map((messageItem, index) => (React.createElement("li", { key: index, className: className }, Array.isArray(messageItem) ? (createList(messageItem, true)) : (React.createElement("div", { dangerouslySetInnerHTML: {
+                    __html: formattedTags(cleanMessage(messageItem)) ?? "",
+                } })))))
+            : message));
+    };
+    /**
+     *
+     * @param message Yalnızca alfanümerik karakterleri (harfler ve sayılar) ve boşlukları tutar.
+     * @returns
+     */
+    const cleanMessage = (message) => message.replace(/<\/?[^>]+>/g, "");
+    return (React.createElement("div", { className: className() }, Array.isArray(message) ? (createList(message)) : (React.createElement("p", { dangerouslySetInnerHTML: { __html: formattedTags(cleanMessage(message)) ?? "" } }))));
+};
+export default Alert;

package/dist/components/button/Types.d.ts

@@ -62,7 +62,7 @@ export type Props = {
      * <Button color="success">Hello, World!</Button>
      * ```
      */
-    color?: Colors;
+    _type?: Colors;
     /**
      * Bileşenine ikon eklemeyi sağlar.
      * İkonun kendisini, yönünü ve pozisyonunu tanımlamak için kullanılır.
@@ -152,6 +152,7 @@ export type Props = {
      * ```
      */
     width?: "max-width" | "auto";
+    size?: "large" | "normal" | "small";
     position?: {
         type: "fixed" | "absolute";
         inset: ("top" | "right" | "bottom" | "left")[];

package/dist/components/button/index.js

@@ -1,12 +1,12 @@
 "use client";
 import React, { useRef } from "react";
 import "../../assest/css/button/button.css";
-const Button = ({ children, variant = "filled", shape, color = "primary", border, width = "auto", position, icon, upperCase, ...attributes }) => {
+const Button = ({ children, variant = "filled", shape, _type = "primary", border, width = "auto", size = "normal", position, icon, upperCase, ...attributes }) => {
     // refs
     const _button = useRef(null);
     // methods
     const handleClassName = () => {
-        let className = `ar-button ${variant} ${color} ${width}`;
+        let className = `ar-button ${variant} ${_type} ${width}`;
         if (shape)
             className += ` ar-button-shape ${shape}`;
         if (border) {
@@ -15,6 +15,8 @@ const Button = ({ children, variant = "filled", shape, color = "primary", border
             if (border.radius)
                 className += ` border-radius-${border?.radius}`;
         }
+        if (size)
+            className += ` ${size}`;
         if (position) {
             className += ` ${position.type}`;
             className += ` ${position.inset.map((_inset) => _inset).join(" ")}`;

package/dist/components/grid-system/column/Column.js

@@ -4,6 +4,8 @@ const Column = ({ children, column, align }) => {
         let className = Object.entries(column ?? {})
             .map(([key, value]) => `col-${key}-${value}`)
             .join(" ");
+        if (!column)
+            className += "col";
         if (align)
             className += ` ${align}`;
         return className;

package/dist/components/layout/Aside.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { AsideProps } from "./Types";
+declare const Aside: React.FC<AsideProps>;
+export default Aside;

package/dist/components/layout/Aside.js

@@ -0,0 +1,11 @@
+"use client";
+import React from "react";
+import Menu from "../menu";
+import useLayout from "../../libs/core/application/hooks/useLayout";
+const Aside = ({ menu }) => {
+    // hooks
+    const { options } = useLayout();
+    return (options?.aside.active && (React.createElement("aside", null,
+        React.createElement(Menu, { menu: menu, variant: "vertical" }))));
+};
+export default Aside;

package/dist/components/layout/Footer.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Footer: React.FC;
+export default Footer;

package/dist/components/layout/Footer.js

@@ -0,0 +1,7 @@
+"use client";
+import React from "react";
+const Footer = () => {
+    // return <footer>Copyright {new Date().getFullYear()} | Powered By AR Design</footer>;
+    return React.createElement("footer", null);
+};
+export default Footer;

package/dist/components/layout/Header.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { HeaderProps } from "./Types";
+declare const Header: React.FC<HeaderProps>;
+export default Header;

package/dist/components/layout/Header.js

@@ -0,0 +1,10 @@
+"use client";
+import React from "react";
+import Menu from "../menu";
+const Header = ({ logo, menu }) => {
+    return (React.createElement("header", { className: "ar-header" },
+        React.createElement("div", { className: "ar-header-with-wrap" },
+            typeof logo === "string" ? React.createElement("h1", null, logo) : logo,
+            React.createElement(Menu, { menu: menu, variant: "horizontal" }))));
+};
+export default Header;

package/dist/components/layout/Main.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { MainProps } from "./Types";
+declare const Main: React.FC<MainProps>;
+export default Main;

package/dist/components/layout/Main.js

@@ -0,0 +1,3 @@
+import React from "react";
+const Main = ({ children }) => React.createElement("main", null, children);
+export default Main;

package/dist/components/layout/Section.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { SectionProps } from "./Types";
+declare const Section: React.FC<SectionProps>;
+export default Section;

package/dist/components/layout/Section.js

@@ -0,0 +1,3 @@
+import React from "react";
+const Section = ({ children }) => React.createElement("section", null, children);
+export default Section;

package/dist/components/layout/Types.d.ts

@@ -0,0 +1,17 @@
+import { MenuProps } from "../menu/Types";
+export type LayoutProps = {
+    children: React.ReactNode;
+};
+export type HeaderProps = {
+    logo: string | React.JSX.Element;
+    menu: MenuProps[];
+};
+export type MainProps = {
+    children: React.ReactNode;
+};
+export type AsideProps = {
+    menu: MenuProps[];
+};
+export type SectionProps = {
+    children: React.ReactNode;
+};

package/dist/components/layout/Types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/layout/index.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { AsideProps, HeaderProps, LayoutProps, MainProps, SectionProps } from "./Types";
+import "../../assest/css/layout/layout.css";
+declare const Layout: React.FC<LayoutProps> & {
+    Header: React.FC<HeaderProps>;
+    Main: React.FC<MainProps>;
+    Aside: React.FC<AsideProps>;
+    Section: React.FC<SectionProps>;
+    Footer: React.FC;
+};
+export default Layout;

package/dist/components/layout/index.js

@@ -0,0 +1,17 @@
+import React from "react";
+import Footer from "./Footer";
+import "../../assest/css/layout/layout.css";
+import Header from "./Header";
+import Aside from "./Aside";
+import Main from "./Main";
+import Section from "./Section";
+import { LayoutProvider } from "../../libs/core/application/contexts/Layout";
+const Layout = ({ children }) => (React.createElement("div", { className: "ar-layout" },
+    React.createElement(LayoutProvider, null, children)));
+Layout.Header = Header;
+Layout.Main = Main;
+Layout.Aside = Aside;
+Layout.Section = Section;
+Layout.Footer = Footer;
+Layout.displayName = "Layout";
+export default Layout;

package/dist/components/menu/index.js

@@ -85,7 +85,10 @@ const Menu = ({ menu, variant = "vertical", ...attributes }) => {
                     _className_groupTitle += " ar-angle-down";
             }
             // Eğer seçili olan menüyse "selected" sınıfını ekler.
-            if (selectedMenu.length > 0 && selectedMenu.includes(item) && item.type !== "group")
+            if (selectedMenu.length > 0 &&
+                selectedMenu.includes(item) &&
+                item.type !== "group" &&
+                variant !== "horizontal")
                 _className_li += " selected";
             return (React.createElement("li", { key: index, className: _className_li, onClick: (event) => handleOnClick(event, item, variant, null, setSelectedMenu) },
                 item.type === "divider" ? (React.createElement(Divider, null)) : (React.createElement("div", { className: _className_groupTitle }, item.render)),

package/dist/components/syntax-highlighter/index.js

@@ -1,3 +1,4 @@
+"use client";
 import React, { useEffect, useRef, useState } from "react";
 import Parser from "./classes/Parser";
 import Compiler from "./classes/Compiler";
@@ -35,7 +36,9 @@ const SyntaxHighlighter = ({ children, position = "left" }) => {
         React.createElement("div", { className: "ar-syntax" },
             React.createElement("div", { ref: _div, className: `preview ${position}` }, children),
             React.createElement("div", { className: "ar-syntax-button-group" },
-                React.createElement(Button, { variant: "outlined", color: "secondary", shape: "square", onClick: () => setCodePanelIsOpen((x) => !x) }, codePanelIsOpen ? "<>" : "</>")),
+                React.createElement(Button, { variant: "outlined", _type: "dark", border: {
+                        style: "solid",
+                    }, size: "small", onClick: () => setCodePanelIsOpen((x) => !x) }, codePanelIsOpen ? "Close Code" : "Open Code")),
             React.createElement("pre", { className: `pre ${!codePanelIsOpen ? "hidden" : "visible"}` },
                 React.createElement("code", { ref: _code })))));
 };

package/dist/components/typography/paragraph/Paragraph.js

@@ -1,3 +1,4 @@
+"use client";
 import React, { useRef } from "react";
 const Paragraph = ({ children, color, align = "left", upperCase = false }) => {
     // refs

package/dist/components/typography/title/Title.js

@@ -1,3 +1,4 @@
+"use client";
 import React, { useRef } from "react";
 const Title = ({ children, Level, align = "left", size, upperCase = false }) => {
     // refs

package/dist/index.d.ts

@@ -1,15 +1,13 @@
 import "./assest/css/ar-core.css";
+import Alert from "./components/alert";
 import Button from "./components/button";
-export { Button };
 import Menu from "./components/menu";
-export { Menu };
 import Grid from "./components/grid-system";
-export { Grid };
 import Typography from "./components/typography";
-export { Typography };
 import SyntaxHighlighter from "./components/syntax-highlighter";
-export { SyntaxHighlighter };
 import Divider from "./components/divider";
-export { Divider };
+import Layout from "./components/layout";
+import useLayout from "./libs/core/application/hooks/useLayout";
 import type { MenuProps } from "./components/menu/Types";
+export { Alert, Button, Menu, Grid, Typography, SyntaxHighlighter, Divider, Layout, useLayout };
 export type { MenuProps };

package/dist/index.js

@@ -1,13 +1,11 @@
 import "./assest/css/ar-core.css";
+import Alert from "./components/alert";
 import Button from "./components/button";
-export { Button };
 import Menu from "./components/menu";
-export { Menu };
 import Grid from "./components/grid-system";
-export { Grid };
 import Typography from "./components/typography";
-export { Typography };
 import SyntaxHighlighter from "./components/syntax-highlighter";
-export { SyntaxHighlighter };
 import Divider from "./components/divider";
-export { Divider };
+import Layout from "./components/layout";
+import useLayout from "./libs/core/application/hooks/useLayout";
+export { Alert, Button, Menu, Grid, Typography, SyntaxHighlighter, Divider, Layout, useLayout };

package/dist/libs/core/application/contexts/Layout.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+type LayoutOptions = {
+    aside: {
+        active: boolean;
+    };
+};
+type LayoutContextProps = {
+    options: LayoutOptions;
+    setOptions: React.Dispatch<React.SetStateAction<LayoutOptions>>;
+};
+type LayoutProviderProps = {
+    children: React.ReactNode;
+};
+declare const LayoutContext: React.Context<Partial<LayoutContextProps>>;
+declare const LayoutProvider: ({ children }: LayoutProviderProps) => React.JSX.Element;
+export { LayoutContext, LayoutProvider };

package/dist/libs/core/application/contexts/Layout.js

@@ -0,0 +1,8 @@
+"use client";
+import React, { createContext, useState } from "react";
+const LayoutContext = createContext({});
+const LayoutProvider = ({ children }) => {
+    const [options, setOptions] = useState({ aside: { active: false } });
+    return (React.createElement(LayoutContext.Provider, { value: { options, setOptions } }, children));
+};
+export { LayoutContext, LayoutProvider };

package/dist/libs/core/application/hooks/useLayout.d.ts

@@ -0,0 +1,13 @@
+declare const useLayout: () => Partial<{
+    options: {
+        aside: {
+            active: boolean;
+        };
+    };
+    setOptions: import("react").Dispatch<import("react").SetStateAction<{
+        aside: {
+            active: boolean;
+        };
+    }>>;
+}>;
+export default useLayout;

package/dist/libs/core/application/hooks/useLayout.js

@@ -0,0 +1,4 @@
+import { useContext } from "react";
+import { LayoutContext } from "../contexts/Layout";
+const useLayout = () => useContext(LayoutContext);
+export default useLayout;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/dist/assest/css/button/core/core.css

@@ -1,17 +0,0 @@
-.ar-button {
-  position: relative;
-  height: 2.5rem;
-  padding: 0 1rem;
-  border: none;
-  border-radius: var(--border-radius-sm);
-  cursor: pointer;
-  transition: background-color 150ms, border 150ms, color 150ms ease-in-out;
-  overflow: hidden;
-}
-.ar-button.disabled {
-  cursor: no-drop;
-}
-
-.ar-button.max-width {
-  width: 100%;
-}

package/dist/assest/css/css/button/core/core.css

@@ -1,17 +0,0 @@
-.ar-button {
-  position: relative;
-  height: 2.5rem;
-  padding: 0 1rem;
-  border: none;
-  border-radius: var(--border-radius-sm);
-  cursor: pointer;
-  transition: background-color 150ms, border 150ms, color 150ms ease-in-out;
-  overflow: hidden;
-}
-.ar-button.disabled {
-  cursor: no-drop;
-}
-
-.ar-button.max-width {
-  width: 100%;
-}

package/dist/assest/css/css/divider/core/core.css

@@ -1,4 +0,0 @@
-.ar-divider {
-  border: none;
-  border-bottom: solid 1px var(--gray-200);
-}

package/dist/assest/css/css/menu/core/core.css

@@ -1,47 +0,0 @@
-@import url("./selected.css");
-@import url("./open-or-close.css");
-
-.ar-menu {
-  background-color: var(--white);
-}
-.ar-menu ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.ar-menu ul li:last-child {
-  padding-bottom: 0;
-}
-.ar-menu ul li ul {
-  margin-left: 0.5rem;
-  padding-left: 0.5rem;
-}
-.ar-menu > .ar-menu-list {
-  display: flex;
-}
-.ar-menu .ar-menu-list-item-group-item-title {
-  display: flex;
-  align-items: center;
-  height: 2.5rem;
-  padding-left: 1rem;
-  user-select: none;
-}
-.ar-menu .ar-menu-list-item-group-item-title:not(.group) > * {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
-.ar-menu .ar-menu-list-item-group-item-title:not(.group):hover {
-  background-color: var(--gray-100);
-}
-.ar-menu .ar-menu-list-item-group-item-title.selection-item {
-  background-color: red;
-}
-.ar-menu .ar-menu-list-item-group-item-title.group {
-  margin-left: 1rem;
-  padding-left: 0;
-  border-radius: 0;
-  border-bottom: solid 1px var(--gray-100);
-  color: var(--gray-500);
-}