@xwadex/fesd-next 0.1.0

package/README.md

@@ -0,0 +1,35 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+# fesd-test

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@xwadex/fesd-next",
+  "version": "0.1.0",
+  "private": false,
+  "main": "./src/fesd",
+  "type": "module",
+  "scripts": {
+    "dev": "next dev --turbo",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "files": [
+    "src/fesd"
+  ],
+  "dependencies": {
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc",
+    "ag-grid-community": "~31.3.1",
+    "ag-grid-enterprise": "~31.3.1",
+    "ag-grid-react": "~31.3.1",
+    "babel-plugin-react-compiler": "0.0.0-experimental-592953e-20240517",
+    "default-passive-events": "^2.0.0",
+    "eslint": "8.56.0",
+    "eslint-config-next": "14.1.0",
+    "framer-motion": "^11.0.15",
+    "next": "^15.0.0-canary.27",
+    "react": "19.0.0-rc-4c2e457c7c-20240522",
+    "react-dom": "19.0.0-rc-4c2e457c7c-20240522",
+    "react-icons": "^5.2.1",
+    "server-only": "^0.0.1",
+    "swiper": "^10.3.1",
+    "swr": "^2.2.5",
+    "tua-body-scroll-lock": "^1.4",
+    "typescript": "5.3.3",
+    "zustand": "^4.5.2"
+  },
+  "devDependencies": {
+    "@faker-js/faker": "^8.4.1",
+    "@types/body-scroll-lock": "^3.1.2",
+    "@types/node": "20.3.2",
+    "eslint-config-prettier": "^9.1.0",
+    "sass": "^1.70.0"
+  }
+}

package/src/fesd/components/Anchors/Anchor.Controller.tsx

@@ -0,0 +1,101 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* 2024.06.10 */
+"use client"
+
+import { Fragment, useRef } from "react"
+import { useAnchor4, useAnchor4Type } from "@/fesd/hooks"
+import { useRouter } from "next/navigation"
+
+interface PropsType extends
+    useAnchor4Type,
+    React.HTMLAttributes<HTMLElement> {
+    as?: React.ElementType
+    name: string
+}
+
+const AnchorController: React.FC<PropsType> = (props) => {
+
+    const {
+        children,
+        name,
+        as: RootComponent = "a",
+        hash: useHash = false,
+        href,
+        target,
+        scroller,
+        offseter,
+        history: useHistory = false,
+        offset = 0,
+        easing = "easeInOutExpo",
+        duration,
+        onceEvent = false,
+        center = false,
+        direction = "scrollTop",
+        onBeforeScroll,
+        onAfterScroll,
+        onScrolling,
+        debug,
+        delay,
+        ...others
+    } = props
+
+    const options = {
+        hash: useHash,
+        target,
+        scroller,
+        offseter,
+        history: useHistory,
+        offset,
+        easing,
+        duration,
+        onceEvent,
+        center,
+        direction,
+        onBeforeScroll,
+        onAfterScroll,
+        onScrolling,
+        debug,
+        delay,
+    } as useAnchor4Type
+
+    const router = useRouter()
+    const linkRef = useRef<HTMLElement | null>(null)
+
+    const { scrolling, scrollToAnchor } = useAnchor4()
+
+    const targetHash = "#" + (target ?? "")
+    const targetURL = href ? href + targetHash : targetHash
+
+    const hashChangeHandler = (e?: MouseEvent) => {
+        if (history.scrollRestoration == "auto") history.scrollRestoration = "manual"
+        if (useHistory) return router.push(targetHash, { scroll: false })
+        history.replaceState(targetHash, "", targetHash)
+    }
+
+    const onClickHandler = (e: MouseEvent) => {
+        e.preventDefault()
+        if (useHash) hashChangeHandler()
+        scrollToAnchor(options)
+    }
+
+    const rootProps = RootComponent == "a"
+        ? { ...others, href: targetURL }
+        : { ...others }
+
+    return (
+        <Fragment>
+            <RootComponent
+                {...rootProps}
+                ref={linkRef}
+                anchor-controller={name}
+                onClick={(e: MouseEvent) => onClickHandler(e)}
+            >{children}
+            </RootComponent>
+        </Fragment>
+    )
+
+}
+
+AnchorController.displayName = "AnchorController"
+
+export default AnchorController

package/src/fesd/components/Anchors/Anchor.Offseter.tsx

@@ -0,0 +1,36 @@
+/* 2024.06.10 */
+"use client"
+
+import { Fragment } from 'react';
+
+interface PropsType extends
+    React.HTMLAttributes<HTMLElement> {
+    as?: React.ElementType
+    name: string
+}
+
+const AnchorOffseter: React.FC<PropsType> = (props) => {
+
+    const {
+        children,
+        as: RootComponent = "div",
+        name: offsetTarget,
+        ...others
+    } = props
+
+    return (
+        <Fragment>
+            <RootComponent
+                {...others}
+                anchor-offseter={offsetTarget}
+            >{children}
+            </RootComponent>
+        </Fragment>
+
+    )
+
+}
+
+AnchorOffseter.displayName = "AnchorOffseter"
+
+export default AnchorOffseter

package/src/fesd/components/Anchors/Anchor.Target.tsx

@@ -0,0 +1,97 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* 2024.06.10 */
+"use client"
+
+import { useRef, Fragment, useEffect, useCallback } from 'react';
+import { useAnchor4, useAnchor4Type } from '@/fesd/hooks';
+
+interface PropsType extends
+    useAnchor4Type,
+    React.HTMLAttributes<HTMLElement> {
+    name: string
+}
+
+interface RefCurrentType extends React.RefObject<Element> {
+    anchor4: {
+        options?: useAnchor4Type
+        scroll?: () => void
+    }
+}
+
+const AnchorTarget: React.FC<PropsType> = (props) => {
+
+    const {
+        children,
+        as: RootComponent = "div",
+        name: target,
+        hash: useHash = false,
+        href,
+        scroller,
+        offseter,
+        history: useHistory = false,
+        offset = 0,
+        easing = "easeInOutExpo",
+        duration,
+        onceEvent = false,
+        center = false,
+        direction = "scrollTop",
+        onBeforeScroll,
+        onAfterScroll,
+        onScrolling,
+        debug,
+        delay,
+        ...others
+    } = props
+
+    const options = {
+        hash: useHash,
+        href,
+        target,
+        scroller,
+        offseter,
+        history: useHistory,
+        offset,
+        easing,
+        duration,
+        onceEvent,
+        center,
+        direction,
+        onBeforeScroll,
+        onAfterScroll,
+        onScrolling,
+        debug,
+        delay,
+    } as useAnchor4Type
+
+    const targetRef = useRef<RefCurrentType | null>(null)
+
+    const { scrolling, scrollToAnchor } = useAnchor4()
+
+    const scrollToTatget = useCallback(() => {
+        scrollToAnchor(options)
+    }, [])
+
+    const refCurrentFunction = {
+        scroll: scrollToTatget,
+        options: options
+    }
+
+    useEffect(() => {
+        if (targetRef.current) targetRef.current.anchor4 = refCurrentFunction
+    }, [scrolling])
+
+    return (
+        <Fragment>
+            <RootComponent
+                {...others}
+                ref={targetRef}
+                anchor-target={target}
+            >{children}
+            </RootComponent>
+        </Fragment>
+    )
+}
+
+AnchorTarget.displayName = "AnchorTarget"
+
+export default AnchorTarget

package/src/fesd/components/Anchors/Anchor.Wrapper.tsx

@@ -0,0 +1,160 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* 2024.06.10 */
+"use client"
+
+import { useEffect, useRef } from "react"
+import { useAnchor4, useAnchor4Type, useDragScroll4 } from "@/fesd/hooks"
+import { off, on, delay as timeout } from "@/fesd/tools"
+import { usePathname } from "next/navigation"
+
+interface PropsType extends
+    useAnchor4Type,
+    React.HTMLAttributes<HTMLElement> {
+    name: string
+    dragScroller?: boolean,
+    listener?: "width" | "height"
+}
+
+const AnchorWrapper: React.FC<PropsType> = (props) => {
+
+    const {
+        as: RootComponent = "div",
+        hash: useHash = false,
+        history: useHistory = false,
+        name,
+        scroller,
+        children,
+        offseter,
+        listener,
+        offset = 0,
+        easing = "easeInOutExpo",
+        duration,
+        onceEvent = false,
+        center = false,
+        direction = "scrollTop",
+        dragScroller = false,
+        onBeforeScroll,
+        onAfterScroll,
+        onScrolling,
+        debug,
+        delay,
+        ...others
+    } = props
+
+    const options = {
+        hash: useHash,
+        offseter,
+        history: useHistory,
+        offset,
+        easing,
+        duration,
+        onceEvent,
+        center,
+        direction,
+        onBeforeScroll,
+        onAfterScroll,
+        onScrolling,
+        debug,
+        delay,
+    } as useAnchor4Type
+
+    const pathname = usePathname()
+
+    const { scrolling, scrollToAnchor, methods } = useAnchor4()
+
+    const wrapperRef = useRef<HTMLElement | null>(null)
+
+    const isBodyScroller = scroller == "body"
+    const size = listener == "width" ? "clientWidth" : "clientHeight"
+    const padding = listener == "width" ? "paddingLeft" : "paddingTop"
+
+    const onMountedChangeHash = async () => {
+        await timeout(500)
+        hashChangeCallback()
+    }
+
+    const hashChangeCallback = async (e?: MouseEvent) => {
+        console.log("wwwwwwww Wrapper hashChangeCallback");
+        if (e) e.stopPropagation()
+        const locationHash = window.location.hash
+        const target = locationHash ? locationHash.replace(/^#!?/, "") : undefined
+        scrollToAnchor({ ...options, target, scroller })
+    }
+
+    const setScrollerAttr = (element: HTMLElement, offseter: string) => {
+        element.setAttribute("anchor-scroller", scroller)
+    }
+
+    const setScrollerListenerAttr = (element: HTMLElement, offseter: string) => {
+        element.setAttribute("anchor-listener", offseter)
+    }
+
+    const setScrollerPadding = (element: HTMLElement, value: number) =>
+        element.style[padding] = value == 0 ? "" : value + "px"
+
+    const resizeCallback = (entries: ResizeObserverEntry[]) => {
+        if (!entries.length) return
+        if (!wrapperRef.current) return
+
+        const resizeScroller = isBodyScroller
+            ? document.body
+            : wrapperRef.current
+
+        setScrollerPadding(resizeScroller,
+            entries.reduce((value, entry) => value + entry.target?.[size] ?? 0, 0)
+        )
+    }
+
+    // useDragScroll4({
+    //     current: isBodyScroller
+    //         ? document?.body
+    //         : wrapperRef.current,
+    //     active: dragScroller
+    // })
+
+    useEffect(() => {
+        if (!useHash) return
+
+        onMountedChangeHash()
+        on("hashchange", hashChangeCallback);
+        return () => {
+            off("hashchange", hashChangeCallback);
+        }
+    }, [pathname]);
+
+    useEffect(() => {
+        if (!wrapperRef.current) return
+
+        const scrollerElement = isBodyScroller ? document.body : wrapperRef.current
+        setScrollerAttr(scrollerElement, scroller)
+
+        if (!listener || !offseter) return
+
+        const { getOffseter } = methods
+        const resizeObserver = new ResizeObserver(resizeCallback)
+        const offsetElement = [...getOffseter(offseter)]
+
+        if (!offsetElement.length) return
+
+        for (let element of offsetElement) { element && resizeObserver.observe(element) }
+        setScrollerListenerAttr(scrollerElement, offseter)
+
+        return () => {
+            if (isBodyScroller) setScrollerPadding(document.body, 0)
+            if (resizeObserver) resizeObserver?.disconnect()
+        }
+    }, [])
+
+    return (
+        <RootComponent
+            {...others}
+            ref={wrapperRef}
+            anchor-wrapper={name}
+        >{children}
+        </RootComponent>
+    )
+}
+
+AnchorWrapper.displayName = "AnchorWrapper"
+
+export default AnchorWrapper

package/src/fesd/components/Anchors/Anchors.tsx

@@ -0,0 +1,12 @@
+/* 2024.06.10 */
+import AnchorTarget from "./Anchor.Target"
+import AnchorWrapper from "./Anchor.Wrapper"
+import AnchorOffseter from "./Anchor.Offseter"
+import AnchorController from "./Anchor.Controller"
+
+export const Anchors = Object.assign({}, {
+    Target: AnchorTarget,
+    Wrapper: AnchorWrapper,
+    Offseter: AnchorOffseter,
+    Controller: AnchorController
+})

package/src/fesd/components/Anchors/index.ts

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

package/src/fesd/components/Articles/Article.Basic.tsx

@@ -0,0 +1,49 @@
+/* eslint-disable @next/next/no-img-element */
+/* eslint-disable react-hooks/exhaustive-deps */
+/* 2024.05.29 */
+"use client"
+
+import * as React from "react"
+import style from "./ArticleBasic.module.scss"
+
+interface PropsType extends
+    React.HTMLAttributes<HTMLElement> {
+    readonly css?: { [key: string]: string }
+}
+
+const ArticleBasic: React.FC<PropsType> = (props) => {
+
+    const {
+        children,
+        css,
+        ...others
+    } = props
+
+    const styles = css ? css : style
+
+
+    return (
+        <article className={styles.root}>
+            <section>
+                <figure>
+                    <img src="./images/works_detail_06.png" alt="title" />
+                    <figcaption>An elephant at sunset</figcaption>
+                </figure>
+            </section>
+            <section>
+                <hgroup>
+                    <h3>Introducing the Zenith Pro X1</h3>
+                    <p>Discover the future of mobile technology with the Zenith Pro X1, smartphone designed to elevate your digital experience, the Zenith Pro X1 combines cutting-edge.</p>
+                </hgroup>
+                <div>
+                    <button>learn more</button>
+                </div>
+            </section>
+        </article>
+    )
+
+}
+
+ArticleBasic.displayName = "ArticleBasic"
+
+export default ArticleBasic

package/src/fesd/components/Articles/Article.Figure.tsx

@@ -0,0 +1,113 @@
+/* eslint-disable @next/next/no-img-element */
+/* eslint-disable react-hooks/exhaustive-deps */
+/* 2024.05.29 */
+"use client"
+
+import * as React from "react"
+import style from "./ArticleFigure.module.scss"
+
+interface PropsType extends
+    React.HTMLAttributes<HTMLElement> {
+    readonly css?: { [key: string]: string }
+}
+
+const Title4 = ({ style }: any) => {
+    return (
+        <hgroup>
+            <h3>Introducing the Zenith Pro X1</h3>
+            <h6>Introducing the Zenith Pro X1</h6>
+        </hgroup>
+    )
+}
+const Content4 = ({ style }: any) => {
+    return (
+        <section className={style.content}>
+            <hgroup>
+                {/* <h3>Introducing the Zenith Pro X1</h3>
+                <h6>Introducing the Zenith Pro X1</h6> */}
+                <p>Discover the future of mobile technology with the Zenith Pro X1, smartphone designed to elevate your digital experience, the Zenith Pro X1 combines cutting-edge. Discover the future of mobile technology with the Zenith Pro X1, smartphone designed to elevate your digital experience, the Zenith Pro X1 combines cutting-edge.</p>
+            </hgroup>
+            <div>
+                <button>learn more</button>
+            </div>
+        </section>
+    )
+}
+const Photos4 = ({ style }: any) => {
+    return (
+        <section className={style.photos}>
+            {/* <figure>
+                    <img src="./images/works_detail_06.png" alt="title" />
+                    <figcaption>An elephant at sunset</figcaption>
+                </figure>
+                <figure>
+                    <img src="./images/works_detail_05.png" alt="title" />
+                    <figcaption>An elephant at sunset</figcaption>
+                </figure>
+                <figure>
+                    <img src="./images/works_detail_02.png" alt="title" />
+                    <figcaption>An elephant at sunset</figcaption>
+                </figure> */}
+            <figure>
+                <img src="./images/works_detail_02.png" alt="title" />
+                <figcaption>An elephant at sunset</figcaption>
+            </figure>
+            <figure>
+                <img src="./images/works_detail_02.png" alt="title" />
+                <figcaption>An elephant at sunset</figcaption>
+            </figure>
+            <figure>
+                <img src="./images/works_detail_02.png" alt="title" />
+                <figcaption>An elephant at sunset</figcaption>
+            </figure>
+            <figure>
+                <img src="./images/works_detail_07.png" alt="title" />
+                <figcaption>An elephant at sunset</figcaption>
+            </figure>
+        </section>
+    )
+}
+
+
+const ArticleFigure: React.FC<PropsType> = (props) => {
+
+    const {
+        children,
+        css,
+        ...others
+    } = props
+
+    const [data, setData] = React.useState(["Title", "Photos", "Content"])
+
+    const Components = (name: string, key: number) => {
+        if (name == "Title") return <Title4 style={styles} key={key} />
+        if (name == "Photos") return <Photos4 style={styles} key={key} />
+        if (name == "Content") return <Content4 style={styles} key={key} />
+        return null
+    }
+
+    const styles = css ? css : style
+
+    return (
+        <>
+            <article
+                className={styles.root}
+                article-width="full"
+                article-type="normal"
+            >
+                {data && data.map((d: string, k: number) => Components(d, k))}
+            </article>
+            <article
+                className={styles.root}
+                article-type="normal"
+            >
+                {data && data.map((d: string, k: number) => Components(d, k))}
+            </article>
+        </>
+    )
+
+}
+
+ArticleFigure.displayName = "ArticleFigure"
+
+export default ArticleFigure