@xwadex/fesd-next 0.1.0

package/src/fesd/components/Articles/ArticleBasic.module.scss

@@ -0,0 +1,62 @@
+@import "@/styles/mixins";
+
+.root {
+  width: 100%;
+  display: flex;
+  gap: 50px;
+
+  //   &[article-direction="left"] {
+  //     flex-direction: row-reverse;
+  //   }
+
+  figure {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    flex: 0 0 30%;
+    &:hover {
+      figcaption {
+        font-size: px(14);
+        opacity: 1;
+      }
+    }
+    figcaption {
+      font-size: px(14);
+      opacity: 0.5;
+      transition: 0.5s;
+      opacity: 0.5;
+    }
+  }
+
+  section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+
+    &.phptos {
+    }
+  }
+
+  hgroup {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    h3 {
+      font-size: px(24);
+      font-weight: 500;
+      line-height: 1.3;
+    }
+    p {
+      font-size: px(16);
+    }
+  }
+  button {
+    font-size: px(14);
+    font-weight: 400;
+    text-transform: uppercase;
+    color: #fff;
+    padding: 12px 35px;
+    background-color: #5b5b5b;
+  }
+}

package/src/fesd/components/Articles/ArticleFigure.module.scss

@@ -0,0 +1,82 @@
+@import "@/styles/mixins";
+
+.root {
+  width: 100%;
+  max-width: 900px;
+  display: flex;
+  flex-direction: column;
+  gap: 50px;
+
+  &[article-width="full"] {
+    max-width: max-content;
+  }
+
+  //   &[article-direction="left"] {
+  //     flex-direction: row-reverse;
+  //   }
+
+  .content {
+    flex: 1;
+    display: flex;
+    gap: 30px;
+  }
+
+  .photos {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 50px;
+  }
+
+  figure {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    flex: 1;
+    &:hover {
+      figcaption {
+        font-size: px(14);
+        opacity: 1;
+      }
+    }
+    figcaption {
+      font-size: px(14);
+      opacity: 0.5;
+      transition: 0.5s;
+      opacity: 0.5;
+    }
+  }
+
+  hgroup {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    h3 {
+      font-size: px(24);
+      font-weight: 500;
+      line-height: 1.3;
+    }
+    h6 {
+      font-size: px(18);
+      font-weight: 500;
+      line-height: 1.3;
+    }
+    h3 + p,
+    h6 + p {
+      margin-top: 10px;
+    }
+    p {
+      font-size: px(16);
+    }
+  }
+  button {
+    font-size: px(14);
+    font-weight: 400;
+    text-transform: uppercase;
+    white-space: nowrap;
+    color: #fff;
+    padding: 12px 35px;
+    background-color: #5b5b5b;
+  }
+}

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

@@ -0,0 +1,2 @@
+export { default as ArticleBasic } from "./Article.Basic"
+export { default as ArticleFigure } from "./Article.Figure"

package/src/fesd/components/Collapse/Collapse.Body.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+interface PropsType extends
+    React.HTMLAttributes<HTMLDivElement> {
+    as?: React.ElementType
+    children: React.ReactNode
+    name?: string
+}
+
+const CollapseBody: React.FC<PropsType> = (props) => {
+    const {
+        children,
+        name,
+        as: RootComponent = "div",
+        ...others
+    } = props
+
+    return (
+        <RootComponent {...others} data-collapse-content={name ?? ""}>
+            {children}
+        </RootComponent>
+    )
+};
+
+CollapseBody.displayName = "CollapseBody"
+
+export default CollapseBody

package/src/fesd/components/Collapse/Collapse.Container.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import { useEffect, useMemo, useRef, useState } from "react"
+import styles from "./Collapse.module.scss"
+import { useCollapseWrapperContext, ContainerContext } from "./CollapseContext"
+
+interface PropsType extends
+    React.HTMLAttributes<HTMLDivElement> {
+    as?: React.ElementType
+    children: React.ReactNode
+    name?: string
+    open?: boolean
+}
+
+const CollapseContainer: React.FC<PropsType> = (props) => {
+    const {
+        children,
+        name,
+        as: RootComponent = "div",
+        className,
+        open = false,
+        ...others
+    } = props
+
+
+    const [active, setActive] = useState(false)
+
+    const contextValue = useMemo(() => ({
+        active,
+        setActive,
+    }), [active])
+
+
+
+    useEffect(() => {
+        setActive(open ?? false)
+    }, [open])
+
+    return (
+        <ContainerContext.Provider value={contextValue}>
+            <RootComponent
+                {...others}
+                className={styles.root + " " + styles.easeInOutExpo + " " + className}
+                data-collapse-active={active ? "open" : ""}
+                data-collapse-container={name ?? ""}
+            >
+                {children}, {JSON.stringify(active)}
+            </RootComponent>
+        </ContainerContext.Provider>
+
+    )
+};
+
+CollapseContainer.displayName = "CollapseContainer"
+
+export default CollapseContainer

package/src/fesd/components/Collapse/Collapse.Head.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import { useCollapseContainerContext } from "./CollapseContext";
+
+interface PropsType extends
+    React.HTMLAttributes<HTMLDivElement> {
+    as?: React.ElementType
+    children: React.ReactNode
+    name?: string
+}
+
+const CollapseHead: React.FC<PropsType> = (props) => {
+    const {
+        children,
+        name,
+        as: RootComponent = "div",
+        ...others
+    } = props
+
+
+    const {
+        active,
+        setActive
+    } = useCollapseContainerContext()
+
+    return (
+        <RootComponent
+            {...others}
+            data-collapse-head={name ?? ""}
+            onClick={() => setActive && setActive(prev => !prev)}
+        >
+            {children}
+        </RootComponent>
+    )
+};
+
+CollapseHead.displayName = "CollapseHead"
+
+export default CollapseHead

package/src/fesd/components/Collapse/Collapse.Wrapper.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import { useEffect, useMemo, useState } from "react";
+import { WrapperContext } from "./CollapseContext";
+
+interface PropsType extends
+    React.HTMLAttributes<HTMLDivElement> {
+    as?: React.ElementType
+    children: React.ReactNode
+    name?: string
+    openAll?: boolean
+}
+
+const CollapseWrapper: React.FC<PropsType> = (props) => {
+    const {
+        children,
+        name,
+        as: RootComponent = "div",
+        openAll = false,
+        ...others
+    } = props
+
+    const [activeAll, setActiveAll] = useState(false)
+
+    const contextValue = useMemo(() => ({
+        setActiveAll,
+        activeAll,
+    }), [activeAll])
+
+    useEffect(() => {
+        setActiveAll(openAll)
+    }, [openAll])
+
+    return (
+        <WrapperContext.Provider value={contextValue}>
+            <div onClick={() => setActiveAll(prev => !prev)}>open all</div>
+            <RootComponent {...others} data-collapse-wrapper={name ?? ""}>
+                {children}
+            </RootComponent>
+        </WrapperContext.Provider>
+    )
+};
+
+CollapseWrapper.displayName = "CollapseWrapper"
+
+export default CollapseWrapper

package/src/fesd/components/Collapse/Collapse.module.scss

@@ -0,0 +1,23 @@
+.root {
+  display: grid;
+  grid-template-rows: auto 0fr;
+  transition-duration: 0.5s;
+  transition-property: grid-template-rows;
+
+  &[data-collapse-active="open"] {
+    grid-template-rows: auto 1fr;
+  }
+
+  &[data-direction="columns"] {
+    grid-template-columns: auto 0fr;
+    transition-property: grid-template-columns;
+
+    &[data-collapse-active="open"] {
+      grid-template-columns: auto 1fr;
+    }
+  }
+
+  &.easeInOutExpo {
+    transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
+  }
+}

package/src/fesd/components/Collapse/Collapse.tsx

@@ -0,0 +1,11 @@
+import CollapseWrapper from "./Collapse.Wrapper"
+import CollapseBody from "./Collapse.Body"
+import CollapseContainer from "./Collapse.Container"
+import CollapseHead from "./Collapse.Head"
+
+export const Collapse = Object.assign({}, {
+    Head: CollapseHead,
+    Body: CollapseBody,
+    Container: CollapseContainer,
+    Wrapper: CollapseWrapper,
+})

package/src/fesd/components/Collapse/CollapseContext.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { createContext, use } from "react"
+
+
+export interface WrapperContextType {
+    activeAll?: boolean
+    setActiveAll?: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+export interface ContainerContextType {
+    active?: boolean
+    setActive?: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+export const WrapperContext = createContext<WrapperContextType>({})
+export const ContainerContext = createContext<ContainerContextType>({})
+
+export const useCollapseWrapperContext = () => use(WrapperContext)
+export const useCollapseContainerContext = () => use(ContainerContext)
+

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

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

package/src/fesd/components/Modals/Modals.module.scss

@@ -0,0 +1,84 @@
+.root {
+  width: 100dvw;
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2;
+
+  &.upperLeft {
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+  &.upper {
+    justify-content: center;
+    align-items: flex-start;
+  }
+  &.upperRight {
+    justify-content: flex-end;
+    align-items: flex-start;
+  }
+  &.left {
+    justify-content: flex-start;
+    align-items: center;
+  }
+  &.center {
+    justify-content: center;
+    align-items: center;
+  }
+  &.right {
+    justify-content: flex-end;
+    align-items: center;
+  }
+  &.lowerLeft {
+    justify-content: flex-start;
+    align-items: flex-end;
+  }
+  &.lower {
+    justify-content: center;
+    align-items: flex-end;
+  }
+  &.lowerRight {
+    justify-content: flex-end;
+    align-items: flex-end;
+  }
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+  max-width: 990px;
+  max-height: 750px;
+  background-color: var(--base-bg-color);
+  border-radius: 3px;
+  display: flex;
+  flex-direction: column;
+  transition: 0.5s;
+
+  &.fade {
+    opacity: 0;
+    transform: translateY(2.5%);
+  }
+  &.scale {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  .active & {
+    &.fade {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    &.scale {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+}

package/src/fesd/components/Modals/Modals.tsx

@@ -0,0 +1,103 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+"use client"
+
+import * as React from "react"
+import { createPortal } from 'react-dom'
+import { Overlay } from "@/fesd/components"
+import { mergeClassName, delay } from "@/fesd/tools"
+import { ModalsTypes } from "./Modals.types"
+import styles from "./Modals.module.scss"
+
+const Modals: React.FC<ModalsTypes> = (props) => {
+
+    const {
+        open = false,
+        openInBody = false,
+        transitionMode = "fade",
+        position = "center",
+        backdropClose = false,
+        ref,
+        children,
+        slots = {},
+        setClose,
+        onTransitionEnter,
+        onTransitionExit,
+        ...others
+    } = props
+
+    const containerRef = React.useRef(null)
+
+    const [active, setActive] = React.useState(false)
+    const [display, setDisplay] = React.useState(false)
+
+    const Root = slots.root ?? "div"
+    const Backdrop = slots.backdrop ?? "div"
+
+    const transitionEvent = (event: string) => {
+        event == "enter" && onTransitionEnter?.()
+        event == "exit" && onTransitionExit?.()
+    }
+
+    const setActiveHandler = async () => {
+        if (active || display) return
+        setDisplay(true)
+        await delay(100)
+        setActive(true)
+        await delay(500)
+        transitionEvent("enter")
+    }
+    const setCloseHandler = async () => {
+        if (!active || !display) return
+        setActive(false)
+        await delay(600)
+        setDisplay(false)
+        transitionEvent("exit")
+    }
+
+    const setBackdropClose = () => {
+        if (!backdropClose) return
+        setClose()
+    }
+
+    const rootClass = mergeClassName(
+        styles.root,
+        styles[position],
+        active ? styles.active : ""
+    )
+
+    const containerClass = mergeClassName(
+        styles.container,
+        styles[transitionMode],
+        styles.active
+    )
+
+    const RootComponent = (
+        <Root {...others} ref={ref} className={rootClass}>
+            <Backdrop className={styles.backdrop} onClick={setBackdropClose}>
+                <Overlay open={open} />
+            </Backdrop>
+            <div ref={containerRef} className={containerClass}>
+                {children}
+                <button onClick={setClose}>Close</button>
+            </div>
+        </Root>
+    )
+
+    React.useEffect(() => {
+        open ? setActiveHandler() : setCloseHandler()
+    }, [open])
+
+    return (
+        <React.Fragment>
+            {display && openInBody
+                ? createPortal(RootComponent, document.body) as React.ReactPortal
+                : display ? RootComponent : null
+            }
+        </React.Fragment>
+    )
+
+}
+
+Modals.displayName = "Modals"
+
+export default Modals

package/src/fesd/components/Modals/Modals.types.ts

@@ -0,0 +1,52 @@
+export interface ModalsSlots {
+    root?: React.ElementType
+    backdrop?: React.ElementType
+}
+
+export interface ModalsTypes {
+
+    ref: React.MutableRefObject<HTMLElement | null>
+
+    //A singal chil content element.
+    children: React.ReactElement
+
+    //A function called, when a transition enters
+    onTransitionEnter?: () => void
+
+    //A function called, when a transition has exited.
+    onTransitionExit?: () => void
+
+    //If "true", the component is shown.
+    //Default:"false"
+    open?: boolean
+
+    //A function called when close the component.
+    setClose: () => void
+
+    //Container position
+    //Default:"center"
+    position?: "upperLeft"
+    | "upper"
+    | "upperRight"
+    | "left"
+    | "center"
+    | "right"
+    | "lowerLeft"
+    | "lower"
+    | "lowerRight"
+
+    //Transition Mode
+    //Default:"Fade"
+    transitionMode?: "fade"
+    | "scale"
+
+    //Append Modals in Body
+    //Default: false
+    openInBody?: boolean
+
+    //A function called when click in backdrop.
+    //Default:false
+    backdropClose?: boolean
+
+    slots?: ModalsSlots
+}

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

@@ -0,0 +1,2 @@
+export { default as Modals } from "./Modals"
+export * from "./Modals.types"

package/src/fesd/components/Overlay/Overlay.module.scss

@@ -0,0 +1,14 @@
+.root {
+  width: 100dvw;
+  height: 100dvh;
+  background-color: rgba(0, 0, 0, 0.5);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  opacity: 0;
+  transition: var(--trans-time);
+  &.active {
+    opacity: 1;
+  }
+}

package/src/fesd/components/Overlay/Overlay.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import { delay, mergeClassName } from "@/fesd/tools"
+import { OverlayType } from "@/fesd/components"
+import styles from "./Overlay.module.scss"
+
+const Overlay: React.FC<OverlayType> = ({
+    open = false,
+    time = 500,
+    ...props
+}) => {
+
+    const [display, setDisplay] = React.useState(false)
+    const [active, setActive] = React.useState(false)
+
+    const setActiveHandler = async () => {
+        setDisplay(true)
+        await delay(100)
+        setActive(true)
+    }
+    const setCloseHandler = async () => {
+        setActive(false)
+        await delay(600)
+        setDisplay(false)
+    }
+
+    const rootClass = mergeClassName(
+        styles.root,
+        active ? styles.active : ""
+    )
+
+    const rootStyle = {
+        "--trans-time": String(time / 1000) + "s"
+    } as React.CSSProperties
+
+    React.useEffect(() => {
+        open ? setActiveHandler() : setCloseHandler()
+    }, [open])
+
+    return (
+        <>
+            {display && <div {...props} className={rootClass} style={rootStyle} />}
+        </>
+    )
+
+};
+
+Overlay.displayName = "Overlay"
+export default Overlay

package/src/fesd/components/Overlay/Overlay.types.ts

@@ -0,0 +1,5 @@
+export interface OverlayType extends
+    Omit<React.HTMLAttributes<HTMLElement>, "style"> {
+    open?: boolean
+    time?: number
+}

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

@@ -0,0 +1,2 @@
+export { default as Overlay } from "./Overlay"
+export * from "./Overlay.types"