@xyd-js/framework 0.1.0-xyd.2 → 0.1.0-xyd.21

package/packages/react/components/sidebar/sidebar-group.tsx

@@ -1,240 +0,0 @@
-import React, {createContext, useContext, useEffect, useState} from "react";
-import {useLocation, useNavigation, useNavigate} from "react-router";
-
-import {FwSidebarGroupProps, FwSidebarItemProps} from "./sidebar";
-import {UIContext} from "../../contexts/ui";
-import {useSidebarGroups} from "../../contexts";
-
-
-export interface FwGroupContext {
-    active: (item: FwSidebarItemProps) => [boolean, () => void],
-    onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>, item: FwSidebarItemProps) => void,
-}
-
-type GroupBehaviour = (item: FwSidebarItemProps) => [boolean, () => void]
-
-const groupContext = createContext<FwGroupContext>({
-    active: () => [false, () => {
-    }],
-    onClick: () => null // TODO: should be deprecated?
-})
-
-export function FwSidebarGroupContext({
-                                          children,
-                                          onePathBehaviour,
-                                          clientSideRouting,
-                                          initialActiveItems,
-                                      }:
-                                      {
-                                          children: React.ReactNode,
-                                          onePathBehaviour?: boolean,
-                                          clientSideRouting?: boolean // TODO: scrollRouting?,
-                                          initialActiveItems: any[]
-                                      }) {
-
-    let groupBehaviour: GroupBehaviour
-
-    if (onePathBehaviour) {
-        groupBehaviour = useOnePathBehaviour(initialActiveItems)
-    } else {
-        groupBehaviour = useDefaultBehaviour(initialActiveItems)
-    }
-    const location = useLocation()
-
-    const [href, setHref] = useState(location.pathname)
-
-    return <UIContext.Provider value={{
-        href: href,
-        setHref: (value) => {
-            setHref(value)
-        }
-    }}>
-        <groupContext.Provider value={{
-            active: groupBehaviour,
-            onClick: clientSideRouting ? (event, item) => {
-                setHref(item.href)
-                scrollToDataSlug(event, item)
-                // navigate(item.href)
-            } : undefined
-        }}>
-            {children}
-        </groupContext.Provider>
-    </UIContext.Provider>
-}
-
-export function useGroup() {
-    return useContext(groupContext)
-}
-
-
-// TODO: !!! better algorithm (JSON.stringify is not good) !!!!!
-// TODO: !!!! use array structure instad! !!!
-
-function getLastValue(set) {
-    let value;
-    for (value of set) ;
-    return value;
-}
-
-function stringify(item: FwSidebarItemProps) {
-    return JSON.stringify({
-        title: item.title,
-        href: item.href,
-        items: item.items?.map((item) => stringify(item)),
-    })
-}
-
-function recursiveSearch(items: FwSidebarItemProps[], href: string, levels: any[] = []) {
-    for (let i = 0; i < items.length; i++) {
-        const item = items[i]
-
-        if (item.href === href) {
-            return [...levels, i]
-        }
-
-        if (item.items) {
-            const result = recursiveSearch(item.items, href, [...levels, i])
-            if (result) {
-                return result
-            }
-        }
-    }
-    return null
-}
-
-function calcActive(groups: FwSidebarGroupProps[], url: any) {
-    const initialActiveItems: any[] = []
-
-    groups.forEach(group => {
-        const activeLevels = recursiveSearch(group.items, url) || []
-
-        activeLevels.reduce((acc, index) => {
-            initialActiveItems.push({
-                ...acc[index],
-                active: true
-            })
-            return acc[index].items
-        }, group.items)
-
-        return group
-    })
-
-    return initialActiveItems
-}
-
-function useDefaultBehaviour(initialActiveItems: any[]) {
-    const groups = useSidebarGroups()
-    const [weakSet] = useState(() => new Set<string>(initialActiveItems.map((item) => stringify(item))));
-    const [, setForceUpdate] = useState(0);
-
-    useEffect(() => {
-        window.addEventListener('xyd.history.pushState', (event: CustomEvent) => {
-            const url = event.detail?.url
-
-            if (!url) {
-                return
-            }
-            // TODO: better data structures
-            const active = calcActive(groups, url)
-            weakSet.clear()
-            active.forEach((item) => {
-                addItem(item)
-            })
-        });
-    }, [])
-
-    const forceUpdate = () => setForceUpdate((prev) => prev + 1);
-
-    const addItem = (item: FwSidebarItemProps) => {
-        weakSet.add(stringify(item));
-        forceUpdate();
-    };
-
-    const deleteItem = (item: FwSidebarItemProps) => {
-        weakSet.delete(stringify(item));
-        forceUpdate();
-    };
-
-    const hasItem = (item: FwSidebarItemProps) => {
-        return weakSet.has(stringify(item));
-    };
-
-    return (item: FwSidebarItemProps): [boolean, () => void] => [
-        hasItem(item) || false,
-        () => {
-            if (hasItem(item)) {
-                deleteItem(item);
-            } else {
-                addItem(item);
-            }
-        }
-    ]
-}
-
-function useOnePathBehaviour(initialActiveItems: any[]) {
-    const [weakSet] = useState(() => new Set<string>(initialActiveItems.map((item) => stringify(item))));
-    const [lastLevel, setLastLevel] = useState<false | number | undefined>(false);
-    const [, setForceUpdate] = useState(0);
-
-    const forceUpdate = () => setForceUpdate((prev) => prev + 1);
-
-    const addItem = (item: FwSidebarItemProps) => {
-        weakSet.add(stringify(item));
-        forceUpdate();
-    };
-
-    const deleteItem = (item: FwSidebarItemProps) => {
-        weakSet.delete(stringify(item));
-        forceUpdate();
-    };
-
-    const hasItem = (item: FwSidebarItemProps) => {
-        return weakSet.has(stringify(item));
-    };
-
-    const clear = () => {
-        weakSet.clear();
-        forceUpdate();
-    };
-
-    return (item: FwSidebarItemProps): [boolean, () => void] => [
-        hasItem(item),
-        () => {
-            setLastLevel(item.level)
-            if (hasItem(item) && item.level == 0) {
-                setLastLevel(false)
-                clear()
-                return
-            }
-
-            if (hasItem(item)) {
-                setLastLevel(false)
-                deleteItem(item);
-                return
-            }
-
-
-            if (((item.level || 0) > (lastLevel || 0)) || lastLevel == false) {
-                addItem(item)
-            } else {
-                const v = getLastValue(weakSet)
-                deleteItem(JSON.parse(v))
-                addItem(item)
-            }
-        }
-    ]
-}
-
-function scrollToDataSlug(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>, item: FwSidebarItemProps) {
-    event.preventDefault()
-
-    // TODO: find another solution because data-slug is added by 'atlas'
-
-    const dataSlug = document.querySelector(`[data-slug="${item.href}"]`)
-
-    if (dataSlug) {
-        dataSlug.scrollIntoView({block: "start", inline: "nearest"})
-    }
-}
-
-

package/packages/react/components/sidebar/sidebar.tsx

@@ -1,127 +0,0 @@
-import React, {} from "react"
-
-import {Badge} from "@xyd-js/components/writer"
-import {UISidebar} from "@xyd-js/ui";
-
-import {useGroup} from "./sidebar-group";
-
-// TODO: custom hooks for active onclick handler etc?
-
-export interface FwSidebarGroupProps {
-    group: string
-
-    items: FwSidebarItemProps[]
-}
-
-export function FwSidebarItemGroup(props: FwSidebarGroupProps) {
-    return <>
-        <UISidebar.ItemHeader>
-            {props.group}
-        </UISidebar.ItemHeader>
-
-        {props.items.map((item, index) => <FwSidebarItem
-            key={index + item.href}
-            title={item.title}
-            href={item.href}
-            items={item.items}
-            active={item.active}
-            level={0}
-        />)}
-    </>
-}
-
-export interface FwSidebarItemProps {
-    title: string | {
-        code: string
-    }
-
-    href: string
-
-    items?: FwSidebarItemProps[]
-
-    active?: boolean
-
-    // internal
-    readonly level?: number
-    // internal
-}
-
-// TODO: move to @xyd-js/components/content
-const components = {
-    Frontmatter: {
-        // TODO: css
-        Title: ({children}) => <div style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            width: "100%",
-            gap: "10px",
-        }}>
-            {children}
-        </div>,
-    },
-    Badge: ({children}) => <Badge>
-        {children}
-    </Badge>
-}
-
-function mdxExport(code: string, components: any) {
-    const scope = {
-        Fragment: React.Fragment,
-        jsxs: React.createElement,
-        jsx: React.createElement,
-        jsxDEV: React.createElement,
-        _jsxs: React.createElement,
-        _jsx: React.createElement,
-        ...components
-    }
-    const fn = new Function(...Object.keys(scope), `return ${code}`)
-    return fn(...Object.values(scope))
-}
-
-function FwSidebarItem(props: FwSidebarItemProps) {
-    const {active, onClick} = useGroup()
-    const [isActive, setActive] = active(props)
-
-    let Title: any
-
-    if (typeof props.title === "object" && "code" in props.title) {
-        const code = props.title.code
-
-        Title = () => mdxExport(
-            // TODO: in the future better mechanism + support props + better components (provider?) - similar to codehik
-            code.replace("() => ", ""),
-            components
-        )
-    } else {
-        Title = () => props.title
-    }
-
-    return <UISidebar.Item
-        button={!!props.items?.length}
-        href={props.href}
-        active={isActive}
-        onClick={() => {
-            setActive()
-        }}
-    >
-        <Title/>
-
-        {
-            props.items?.length && <UISidebar.SubTree isOpen={isActive}>
-                <>
-                    {
-                        props.items?.map((item, index) => <FwSidebarItem
-                            key={index + item.href}
-                            title={item.title}
-                            href={item.href}
-                            items={item.items}
-                            active={active(item)[0]}
-                            level={(props.level || 0) + 1}
-                        />)
-                    }
-                </>
-            </UISidebar.SubTree>
-        }
-    </UISidebar.Item>
-}

package/packages/react/contexts/framework.tsx

@@ -1,78 +0,0 @@
-import React, {createContext, useContext} from "react";
-
-import {Settings} from "@xyd-js/core";
-import type {ITOC, IBreadcrumb, INavLinks} from "@xyd-js/ui";
-
-import {FwSidebarGroupProps} from "../components/sidebar";
-
-export interface IFramework {
-    settings: Settings
-
-    sidebarGroups: FwSidebarGroupProps[]
-
-    toc?: ITOC[]
-
-    breadcrumbs?: IBreadcrumb[]
-
-    navlinks?: INavLinks
-}
-
-// TODO: page context + app context?
-const framework: IFramework = {
-    settings: {},
-    sidebarGroups: []
-}
-const FrameworkContext = createContext<IFramework>(framework)
-
-export interface FrameworkProps {
-    children: React.ReactNode
-
-    settings: Settings,
-    sidebarGroups: FwSidebarGroupProps[],
-    toc?: ITOC[],
-    breadcrumbs?: IBreadcrumb[],
-    navlinks?: INavLinks
-}
-
-export function Framework(props: FrameworkProps) {
-    return <FrameworkContext.Provider value={{
-        settings: props.settings,
-        sidebarGroups: props.sidebarGroups,
-        toc: props.toc,
-        breadcrumbs: props.breadcrumbs,
-        navlinks: props.navlinks,
-    }}>
-        {props.children}
-    </FrameworkContext.Provider>
-}
-
-
-export function useSidebarGroups() {
-    const ctx = useContext(FrameworkContext)
-
-    return ctx.sidebarGroups
-}
-
-export function useSettings() {
-    const ctx = useContext(FrameworkContext)
-
-    return ctx.settings
-}
-
-export function useToC() {
-    const ctx = useContext(FrameworkContext)
-
-    return ctx.toc
-}
-
-export function useBreadcrumbs() {
-    const ctx = useContext(FrameworkContext)
-
-    return ctx.breadcrumbs
-}
-
-export function useNavLinks() {
-    const ctx = useContext(FrameworkContext)
-
-    return ctx.navlinks
-}

package/packages/react/contexts/index.ts

@@ -1,2 +0,0 @@
-export * from "./framework"
-

package/packages/react/contexts/ui.tsx

@@ -1,6 +0,0 @@
-import {createContext} from 'react';
-
-export const UIContext = createContext({
-    href: '',
-    setHref: (v: any) => {}
-});

package/packages/react/hooks/index.ts

@@ -1,3 +0,0 @@
-export {
-    useMatchedSubNav
-} from "./useMatchedNav";

package/packages/react/hooks/useMatchedNav.tsx

@@ -1,29 +0,0 @@
-import {useLocation} from "react-router";
-
-import {useSettings} from "../contexts";
-
-import {manualHydration} from "../utils/manualHydration";
-
-function normalizeHref(href: string) {
-    if (href.startsWith("/")) {
-        return href
-    }
-
-    return `/${href}`
-}
-
-// TODO: better data structures
-export function useMatchedSubNav() {
-    const settings = useSettings()
-    const location = useLocation()
-
-    const matchedSubnav = settings.structure?.header
-        ?.filter(item => item.sub)
-        ?.find(item => normalizeHref(location.pathname).startsWith(normalizeHref(item.sub?.match || "")))
-
-    if (!matchedSubnav) {
-        return null
-    }
-
-    return matchedSubnav.sub || null
-}

package/packages/react/index.ts

@@ -1,12 +0,0 @@
-export * from "./components"
-
-export {Framework} from "./contexts"
-export type {FrameworkProps} from "./contexts"
-
-export {
-    useMatchedSubNav
-} from "./hooks"
-
-export type {
-    FwSidebarGroupProps
-} from "./components/sidebar/sidebar"

package/packages/react/utils/manualHydration.ts

@@ -1,25 +0,0 @@
-import React, {ReactElement} from "react";
-
-export function manualHydration(obj: any, key = 0): ReactElement<any, string | React.JSXElementConstructor<any>> {
-    if (typeof obj !== 'object' || obj === null) {
-        return React.createElement(React.Fragment, {key});
-    }
-
-    const {type, props} = obj || {};
-    if (typeof type !== 'string' && typeof type !== 'function') {
-        return React.createElement(React.Fragment, {key});
-    }
-
-    let children: ReactElement<any, string | React.JSXElementConstructor<any>>[] = [];
-    if (props?.children) {
-        if (Array.isArray(props.children)) {
-            children = props.children.map((child: any, i) => manualHydration(child, key + i)) || [];
-        } else {
-            children = [manualHydration(props.children, key)];
-        }
-    }
-
-    const elementProps = {...props, children, key};
-
-    return React.createElement(type, elementProps);
-}

package/packages/theme/context.tsx

@@ -1,19 +0,0 @@
-import {createContext, useContext} from "react";
-
-import type {ITheme} from "@xyd-js/framework";
-
-const theme = createContext<ITheme<any> | null>(null)
-
-const Provider = theme.Provider
-
-// TODO: finish theme context
-
-export function withTheme(Component) {
-    return <Provider value={null}>
-        <Component/>
-    </Provider>
-}
-
-export function useTheme<T>(): ITheme<any> | null {
-    return useContext(theme)
-}

package/postcss.config.cjs

@@ -1,5 +0,0 @@
-module.exports = {
-    plugins: {
-        autoprefixer: {},
-    },
-}

package/src/index.ts

@@ -1 +0,0 @@
-export type * from "./types";

package/src/types.ts

@@ -1,5 +0,0 @@
-export interface ITheme<T> {
-    children: JSX.Element | JSX.Element[]
-
-    themeSettings?: T
-}

package/tsconfig.json

@@ -1,45 +0,0 @@
-{
-  "compilerOptions": {
-    "module": "esnext",
-    "esModuleInterop": true,
-    "moduleResolution": "bundler",
-    "target": "ES6",
-    "compilerOptions": {
-      "baseUrl": ".",
-      "paths": {
-        "@/components/*": ["@/components/*"],
-        "@/lib/utils/*": ["@/lib/utils/*"],
-        "@/components/ui/*": ["@/components/ui/*"],
-        "@/components/magicui/*": ["@/components/magicui/*"]
-      }
-    },
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": false,
-    "noEmit": true,
-    "incremental": false,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "strictNullChecks": true
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
-}

package/tsup.config.ts

@@ -1,28 +0,0 @@
-import {defineConfig} from 'tsup';
-
-export default defineConfig({
-    entry: {
-        index: 'src/index.ts',
-        react: 'packages/react/index.ts',
-        hydration: 'packages/hydration/index.ts',
-    },
-    format: ['esm', 'cjs'], // Output both ESM and CJS formats
-    target: 'node16', // Ensure compatibility with Node.js 16
-    dts: {
-        entry: {
-            index: 'src/index.ts',
-            react: 'packages/react/index.ts',
-            hydration: 'packages/hydration/index.ts',
-        },
-        resolve: true, // Resolve external types
-    },
-    splitting: false, // Disable code splitting
-    sourcemap: true, // Generate source maps
-    clean: true, // Clean the output directory before each build
-    esbuildOptions: (options) => {
-        options.platform = 'node'; // Ensure the platform is set to Node.js
-        options.external = ['node:fs/promises', 'react-router']; // Mark 'node:fs/promises' as external
-        options.loader = {'.js': 'jsx'}; // Ensure proper handling of .js files
-    },
-    ignoreWatch: ['node_modules', 'dist', '.git', 'build'] // Exclude unnecessary directories
-});