ar-design 0.1.2 → 0.1.4

package/dist/components/layout/Aside.js

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

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 @@
+const Section = ({ children }) => children;
+Section.displayName = "Layout.Section";
+export default Section;

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

@@ -0,0 +1,14 @@
+import { MenuProps } from "../menu/Types";
+export type LayoutProps = {
+    children: React.ReactNode;
+};
+export type HeaderProps = {
+    logo: string | React.JSX.Element;
+    menu: MenuProps[];
+};
+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,10 @@
+import React from "react";
+import { AsideProps, HeaderProps, LayoutProps, SectionProps } from "./Types";
+import "../../assest/css/layout/layout.css";
+declare const Layout: React.FC<LayoutProps> & {
+    Header: React.FC<HeaderProps>;
+    Aside: React.FC<AsideProps>;
+    Section: React.FC<SectionProps>;
+    Footer: React.FC;
+};
+export default Layout;

package/dist/components/layout/index.js

@@ -0,0 +1,49 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import Footer from "./Footer";
+import "../../assest/css/layout/layout.css";
+import Header from "./Header";
+import Aside from "./Aside";
+import Section from "./Section";
+import { LayoutProvider } from "../../libs/core/application/contexts/Layout";
+const Layout = ({ children }) => {
+    // states
+    const [layout, setLayout] = useState();
+    // effects
+    useEffect(() => {
+        React.Children.forEach(children, (child) => {
+            if (!React.isValidElement(child))
+                return;
+            const _type = child.type;
+            switch (_type.displayName) {
+                case "Layout.Header":
+                    setLayout((layout) => ({ ...layout, header: child }));
+                    break;
+                case "Layout.Aside":
+                    setLayout((layout) => ({ ...layout, main: { ...layout?.main, aside: child } }));
+                    break;
+                case "Layout.Section":
+                    setLayout((layout) => ({ ...layout, main: { ...layout?.main, section: child } }));
+                    break;
+                case "Layout.Footer":
+                    setLayout((layout) => ({ ...layout, footer: child }));
+                    break;
+                default:
+                    break;
+            }
+        });
+    }, [children]);
+    return (React.createElement("div", { className: "ar-layout" },
+        React.createElement(LayoutProvider, null,
+            React.createElement("header", null, layout?.header),
+            React.createElement("main", null,
+                layout?.main?.aside,
+                React.createElement("section", null, layout?.main?.section)),
+            React.createElement("footer", null, layout?.footer))));
+};
+Layout.Header = Header;
+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.4",
   "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);
-}

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

@@ -1,55 +0,0 @@
-.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;
-  align-items: center;
-  gap: 1rem;
-  background-color: var(--white);
-  padding: 1rem;
-}
-
-.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-200);
-}
-
-.ar-syntax > .pre {
-  margin: 0;
-  padding: 1rem;
-  border: dashed 1px transparent;
-  border-top-color: var(--gray-200);
-  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;
-}

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

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

package/dist/assest/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);
-}

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

@@ -1,55 +0,0 @@
-.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;
-  align-items: center;
-  gap: 1rem;
-  background-color: var(--white);
-  padding: 1rem;
-}
-
-.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-200);
-}
-
-.ar-syntax > .pre {
-  margin: 0;
-  padding: 1rem;
-  border: dashed 1px transparent;
-  border-top-color: var(--gray-200);
-  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;
-}