@xyd-js/components 0.1.0-xyd.7 → 0.1.0-xyd.8

package/src/layouts/LayoutPrimary/LayoutPrimary.tsx

@@ -1,12 +1,12 @@
 import React, {useEffect, useState} from "react"
 
-import {$layout, $page, $article, globalHeaderHeight} from "./LayoutPrimary.styles.tsx"
+import * as cn from "./LayoutPrimary.styles"
 
 export interface LayoutPrimaryProps {
     header: React.ReactNode;
     aside: React.ReactNode;
     content: React.ReactNode;
-    contentNav: React.ReactNode;
+    contentNav?: React.ReactNode;
 
     subheader?: React.ReactNode;
     layoutSize?: "large"
@@ -18,23 +18,26 @@ export function LayoutPrimary(props: LayoutPrimaryProps) {
 
     const {hideMainHeader} = props.subheader ? useSubHeader() : {hideMainHeader: false}
 
-    return <div className={$layout.host}>
+    return <div className={cn.LayoutPrimaryHost}>
         <header className={` 
-            ${$layout.header}
-            ${props.subheader && $layout.header$$sub}
-            ${hideMainHeader && $layout.header$$hideMain}
+            ${cn.LayoutPrimaryHeader}
+            ${props.subheader && cn.LayoutPrimaryHeaderSub}
+            ${hideMainHeader && cn.LayoutPrimaryHeaderHideMain}
         `}>
-            <div className={$layout.primaryHeaderContent}>
+            <div className={cn.LayoutPrimaryHeaderContent}>
                 {props.header}
                 <button
-                    className={$layout.hamburgerButton}
+                    className={cn.LayoutPrimaryHamburgerButton}
                     onClick={() => setIsMobileNavOpen(!isMobileNavOpen)}
                     aria-label="Toggle navigation menu"
                 >
-                    <div className={$layout.hamburgerIcon}>
-                        <span className={`${$layout.hamburgerLine} ${isMobileNavOpen ? $layout.hamburgerLine$$open : ''}`}/>
-                        <span className={`${$layout.hamburgerLine} ${isMobileNavOpen ? $layout.hamburgerLine$$open : ''}`}/>
-                        <span className={`${$layout.hamburgerLine} ${isMobileNavOpen ? $layout.hamburgerLine$$open : ''}`}/>
+                    <div className={cn.LayoutPrimaryHamburgerIcon}>
+                        <span
+                            className={`${cn.LayoutPrimaryHamburgerLine} ${isMobileNavOpen ? cn.LayoutPrimaryHamburgerLineOpen : ''}`}/>
+                        <span
+                            className={`${cn.LayoutPrimaryHamburgerLine} ${isMobileNavOpen ? cn.LayoutPrimaryHamburgerLineOpen : ''}`}/>
+                        <span
+                            className={`${cn.LayoutPrimaryHamburgerLine} ${isMobileNavOpen ? cn.LayoutPrimaryHamburgerLineOpen : ''}`}/>
                     </div>
                 </button>
             </div>
@@ -43,55 +46,49 @@ export function LayoutPrimary(props: LayoutPrimaryProps) {
 
         {/* Mobile Drawer Sidebar */}
         <div
-            className={`${$layout.overlay} ${isMobileNavOpen ? $layout.overlay$$visible : ''}`}
+            className={`${cn.LayoutPrimaryOverlay} ${isMobileNavOpen ? cn.LayoutPrimaryOverlayVisible : ''}`}
             onClick={() => setIsMobileNavOpen(false)}
         />
         <aside className={`
-            ${$layout.mobileSidebar}
-            ${isMobileNavOpen ? $layout.mobileSidebar$$open : ''}
+            ${cn.LayoutPrimaryMobileSidebar}
+            ${isMobileNavOpen ? cn.LayoutPrimaryMobileSidebarOpen : ''}
         `}>
-            <div className={$layout.sidebarContent}>
+            <div className={cn.LayoutPrimarySidebarContent}>
                 {props.aside}
             </div>
             <button
-                className={$layout.closeButton}
+                className={cn.LayoutPrimaryCloseButton}
                 onClick={() => setIsMobileNavOpen(false)}
                 aria-label="Close navigation menu"
             >
-                <div className={$layout.closeIcon}/>
+                <div className={cn.LayoutPrimaryCloseIcon}/>
             </button>
         </aside>
 
         <main className={`
-            ${$layout.main}
-            ${!hideMainHeader && props.subheader && $layout.main$$sub}
+            ${cn.LayoutPrimaryMain}
+            ${!hideMainHeader && props.subheader && cn.LayoutPrimaryMainSub}
         `}>
             {/* Desktop Static Sidebar */}
-            <aside className={$layout.staticSidebar}>
+            <aside className={cn.LayoutPrimaryStaticSidebar}>
                 {props.aside}
             </aside>
 
-            <div className={$page.host}>
-                <div className={$page.scroll}>
+            <div className={cn.LayoutPrimaryPageHost}>
+                <div className={cn.LayoutPrimaryPageScroll}>
                     <div className={`
-                        ${$page.container}
-                        ${props.layoutSize == "large" && $page.container$$large}
+                        ${cn.LayoutPrimaryPageContainer}
+                        ${props.layoutSize == "large" && cn.LayoutPrimaryPageContainerLarge}
                     `}>
-                        <div className={`
-                            ${$page.articleContainer}
-                        `}>
-                            <article className={$article.host}>
-                                <section className={$article.content}>
+                        <div className={cn.LayoutPrimaryPageArticleContainer}>
+                            <article className={cn.LayoutPrimaryArticleHost}>
+                                <section className={cn.LayoutPrimaryArticleContent}>
                                     {props.content}
                                 </section>
-                                {
-                                    props.contentNav && <nav className={`
-                                    ${$article.nav}
-                                `}>
-                                        {props.contentNav}
-                                    </nav>
-                                }
                             </article>
+                            {props.contentNav && <nav className={cn.LayoutPrimaryArticleNav}>
+                                {props.contentNav}
+                            </nav>}
                         </div>
                     </div>
                 </div>
@@ -111,7 +108,7 @@ function useSubHeader() {
             return
         }
 
-        const checkpoint = parseInt(globalHeaderHeight, 10) / 2
+        const checkpoint = parseInt(cn.globalHeaderHeight, 10) / 2
         const diff = scrollTop - controlScrollPos
         const reversePosDiff = Math.abs(scrollTop - controlScrollPos)
 
@@ -145,12 +142,12 @@ function useSubHeader() {
     // TODO: by ref?
     // TODO: MOVE SOMEWHERE ELSE BECAUSE IT DECREASE PERFORMANCE (RERENDER)
     useEffect(() => {
-        document.querySelector(`.${$page.scroll}`)?.addEventListener("scroll", onScroll)
-        document.querySelector(`.${$page.scroll}`)?.addEventListener("scrollend", onScrollFinish)
+        document.querySelector(`.${cn.LayoutPrimaryPageScroll}`)?.addEventListener("scroll", onScroll)
+        document.querySelector(`.${cn.LayoutPrimaryPageScroll}`)?.addEventListener("scrollend", onScrollFinish)
 
         return () => {
-            document.querySelector(`.${$page.scroll}`)?.removeEventListener("scroll", onScroll)
-            document.querySelector(`.${$page.scroll}`)?.removeEventListener("scrollend", onScrollFinish)
+            document.querySelector(`.${cn.LayoutPrimaryPageScroll}`)?.removeEventListener("scroll", onScroll)
+            document.querySelector(`.${cn.LayoutPrimaryPageScroll}`)?.removeEventListener("scrollend", onScrollFinish)
         }
     }, []);
 

package/src/pages/HomePage/HomePage.styles.tsx

@@ -0,0 +1,16 @@
+import {css} from "@linaria/core";
+
+export const HomePageCardsHost = css`
+    display: grid;
+    grid-template-columns: repeat(2, 500px);
+    justify-content: center;
+    gap: 30px;
+
+    @media (max-width: 1200px) {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (max-width: 768px) {
+        grid-template-columns: 1fr;
+    }
+`; 

package/src/pages/HomePage/HomePage.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {css} from "@linaria/core";
+import * as cn from "./HomePage.styles";
 
 import {
     GuideCard,
@@ -9,23 +9,6 @@ import {HomeView} from "../../views"
 
 import {IHomePageHero, IHomePageFeature} from "./types";
 
-const $cards = {
-    host: css`
-        display: grid;
-        grid-template-columns: repeat(2, 500px);
-        justify-content: center;
-        gap: 30px;
-
-        @media (max-width: 1200px) {
-            grid-template-columns: repeat(2, 1fr);
-        }
-
-        @media (max-width: 768px) {
-            grid-template-columns: 1fr;
-        }
-    `,
-}
-
 export interface HomePageProps {
     header: React.ReactNode
 
@@ -50,11 +33,14 @@ export function HomePage(props: HomePageProps) {
 }
 
 function $Hero(props: HomePageProps) {
+    const subtitle = typeof props.hero?.subtitle === 'string' 
+        ? props.hero.subtitle 
+        : props.hero?.subtitle?.toString() || "";
+
     return <CTABanner>
         <CTABanner.Heading
             title={props.hero?.text || ""}
-            headingEffect={props.hero?.textEffect}
-            subtitle={props.hero?.subtitle}
+            subtitle={subtitle}
         />
         {props?.hero?.actions && <CTABanner.ButtonGroup>
             {props?.hero?.actions.map((action, index) => (
@@ -72,7 +58,7 @@ function $Cards(props: HomePageProps) {
     // TODO: cards gridTemplateColumns based on elements
     return <div
         className={`
-            ${$cards.host}
+            ${cn.HomePageCardsHost}
             xyd_page-comp-homepage-cards
         `}>
         {props.features?.map((feat, index) => (

package/src/pages/TODO.md

@@ -0,0 +1 @@
+move to `@xyd-js/pages` ?

package/src/ui/Loader/Loader.styles.tsx

@@ -1,52 +1,54 @@
 import {css} from "@linaria/core";
 
-export const $loader = {
-    host: css`
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-    `,
-    dots: css`
-        display: flex;
-        gap: 4px;
-    `,
-    dot: css`
-        width: 8px;
-        height: 8px;
-        background-color: currentColor;
-        border-radius: 50%;
-        animation: pulse 1.4s infinite ease-in-out;
-        opacity: 0.6;
-
-        &:nth-of-type(2) {
-            animation-delay: 0.2s;
-        }
+export const LoaderHost = css`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+`;
 
-        &:nth-of-type(3) {
-            animation-delay: 0.4s;
-        }
+export const LoaderDots = css`
+    display: flex;
+    gap: 4px;
+`;
 
-        @keyframes pulse {
-            0%, 80%, 100% { 
-                transform: scale(0.6);
-                opacity: 0.4;
-            }
-            40% { 
-                transform: scale(1);
-                opacity: 1;
-            }
-        }
-    `,
-    $$small: css`
-        .${$loader.dot} {
-            width: 6px;
-            height: 6px;
+export const LoaderDot = css`
+    width: 8px;
+    height: 8px;
+    background-color: currentColor;
+    border-radius: 50%;
+    animation: pulse 1.4s infinite ease-in-out;
+    opacity: 0.6;
+
+    &:nth-of-type(2) {
+        animation-delay: 0.2s;
+    }
+
+    &:nth-of-type(3) {
+        animation-delay: 0.4s;
+    }
+
+    @keyframes pulse {
+        0%, 80%, 100% { 
+            transform: scale(0.6);
+            opacity: 0.4;
         }
-    `,
-    $$large: css`
-        .${$loader.dot} {
-            width: 12px;
-            height: 12px;
+        40% { 
+            transform: scale(1);
+            opacity: 1;
         }
-    `
-} 
+    }
+`;
+
+export const LoaderSmall = css`
+    .${LoaderDot} {
+        width: 6px;
+        height: 6px;
+    }
+`;
+
+export const LoaderLarge = css`
+    .${LoaderDot} {
+        width: 12px;
+        height: 12px;
+    }
+`; 

package/src/ui/Loader/Loader.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import {$loader} from "./Loader.styles.tsx";
+import * as cn from "./Loader.styles";
 
 export interface LoaderProps {
   size?: "small" | "medium" | "large";
@@ -10,16 +10,16 @@ export function Loader({ size = "medium", className }: LoaderProps) {
   return (
     <div 
       className={`
-        ${$loader.host}
-        ${size === "small" && $loader.$$small}
-        ${size === "large" && $loader.$$large}
+        ${cn.LoaderHost}
+        ${size === "small" && cn.LoaderSmall}
+        ${size === "large" && cn.LoaderLarge}
         ${className}
       `}
     >
-      <div className={$loader.dots}>
-        <div className={$loader.dot} />
-        <div className={$loader.dot} />
-        <div className={$loader.dot} />
+      <div className={cn.LoaderDots}>
+        <div className={cn.LoaderDot} />
+        <div className={cn.LoaderDot} />
+        <div className={cn.LoaderDot} />
       </div>
     </div>
   );

package/src/ui/TODO.md

@@ -0,0 +1,2 @@
+rename to `@xyd-js/components/kit` /  `@xyd-js/components/ui-kit` ?
+

package/src/utils/useStyle.ts

@@ -0,0 +1,19 @@
+import {css} from '@linaria/core';
+
+type StyleObject = Record<string, string>;
+type StyleFunction = (strings: TemplateStringsArray, ...values: any[]) => string;
+
+export function useStyle<T extends StyleObject>(component: { styles: T }) {
+    const styled = {} as Record<keyof T, StyleFunction>;
+
+    for (const key of Object.keys(component.styles)) {
+        styled[key as keyof T] = (strings: TemplateStringsArray, ...values: any[]) => {
+            const customStyles = css`
+                ${strings.reduce((result, str, i) => result + str + (values[i] || ''), '')}
+            `;
+            return `${component.styles[key]} ${customStyles}`;
+        };
+    }
+
+    return styled;
+} 

package/src/views/HomeView/HomeView.styles.tsx

@@ -0,0 +1,37 @@
+import {css} from "@linaria/core";
+
+export const HomeViewHost = css`
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+`;
+
+export const HomeViewBodyHost = css`
+    background: radial-gradient(circle, hsl(0 0% 9% / .3) 1px, transparent 1px);
+    backdrop-filter: sepia(10%);
+    background-size: 30px 30px;
+    padding: 60px;
+    flex: 1;
+`;
+
+export const HomeViewBodyHostSecondary = css`
+    background: repeating-linear-gradient(to right, hsl(0 0% 9% / .1), hsl(0 0% 9% / .1) 1px, transparent 1px, transparent 50px), repeating-linear-gradient(to bottom, hsl(0 0% 9% / .1), hsl(0 0% 9% / .1) 1px, transparent 1px, transparent 50px);
+`;
+
+export const HomeViewBodyContent = css`
+    width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 80px;
+
+    @media (max-width: 1200px) {
+        width: 100%;
+        padding: 0 20px;
+    }
+
+    @media (max-width: 768px) {
+        width: 100%;
+        padding: 0 10px;
+    }
+`; 

package/src/views/HomeView/HomeView.tsx

@@ -1,13 +1,5 @@
 import React from "react"
-import {css} from "@linaria/core";
-
-const $homeView = {
-    host: css`
-        display: flex;
-        flex-direction: column;
-        min-height: 100vh;
-    `,
-}
+import * as cn from "./HomeView.styles";
 
 export interface HomeViewProps {
     header: React.ReactNode
@@ -16,43 +8,13 @@ export interface HomeViewProps {
 }
 
 export function HomeView({header, body, footer}: HomeViewProps) {
-    return <div className={$homeView.host}>
+    return <div className={cn.HomeViewHost}>
         {header}
         {body}
         {footer}
     </div>
 }
 
-const $body = {
-    host: css`
-        background: radial-gradient(circle, hsl(0 0% 9% / .3) 1px, transparent 1px);
-        backdrop-filter: sepia(10%);
-        background-size: 30px 30px;
-        padding: 60px;
-        flex: 1;
-    `,
-    host$$secondary: css`
-        background: repeating-linear-gradient(to right, hsl(0 0% 9% / .1), hsl(0 0% 9% / .1) 1px, transparent 1px, transparent 50px), repeating-linear-gradient(to bottom, hsl(0 0% 9% / .1), hsl(0 0% 9% / .1) 1px, transparent 1px, transparent 50px);
-    `,
-    body: css`
-        width: 1200px;
-        margin: 0 auto;
-        display: flex;
-        flex-direction: column;
-        gap: 80px;
-
-        @media (max-width: 1200px) {
-            width: 100%;
-            padding: 0 20px;
-        }
-
-        @media (max-width: 768px) {
-            width: 100%;
-            padding: 0 10px;
-        }
-    `
-}
-
 export interface HomeViewBodyProps {
     children: React.ReactNode
     kind?: "secondary"
@@ -60,12 +22,10 @@ export interface HomeViewBodyProps {
 
 HomeView.Body = function HomeViewBody({children, kind}: HomeViewBodyProps) {
     return <div className={`
-        ${$body.host}
-        ${kind === "secondary" ? $body.host$$secondary : ""}
+        ${cn.HomeViewBodyHost}
+        ${kind === "secondary" ? cn.HomeViewBodyHostSecondary : ""}
     `}>
-        <div className={`
-            ${$body.body}
-        `}>
+        <div className={cn.HomeViewBodyContent}>
             {children}
         </div>
     </div>

package/src/views/TODO.md

@@ -0,0 +1 @@
+move to `@xyd-js/pages` ?

package/src/writer/Badge/Badge.styles.tsx

@@ -1,33 +1,34 @@
 import {css} from "@linaria/core";
 
-export const $badge = {
-    host: css`
-        display: inline-flex;
-        align-items: center;
-        line-height: 1rem;
-        font-style: normal;
-        font-weight: 500;
-        letter-spacing: normal;
-        white-space: nowrap;
-        text-transform: none;
-    `,
-    host$$warning: css`
-        color: #434e4e;
-        background-color: #ffffe1
-    `,
-    host$$info: css`
-        color: #fff;
-        background-color: #1971a8;
-    `,
-    host$$sm: css`
-        font-size: 12px;
-        height: 18px;
-        padding: 0 6px;
-        gap: 3px;
-        border-radius: 6px;
-    `,
+export const BadgeHost = css`
+    display: inline-flex;
+    align-items: center;
+    line-height: 1rem;
+    font-style: normal;
+    font-weight: 500;
+    letter-spacing: normal;
+    white-space: nowrap;
+    text-transform: none;
+`;
 
-    item: css`
-        position: relative;
-    `
-}
+export const BadgeHostWarning = css`
+    color: #434e4e;
+    background-color: #ffffe1
+`;
+
+export const BadgeHostInfo = css`
+    color: #fff;
+    background-color: #1971a8;
+`;
+
+export const BadgeHostSm = css`
+    font-size: 12px;
+    height: 18px;
+    padding: 0 6px;
+    gap: 3px;
+    border-radius: 6px;
+`;
+
+export const BadgeItem = css`
+    position: relative;
+`;

package/src/writer/Badge/Badge.tsx

@@ -1,30 +1,61 @@
 import React from "react"
-
-import {$badge} from "./Badge.styles";
+import * as cn from "./Badge.styles";
 
 export interface BadgeProps {
-    children: React.ReactNode;
+    className?: string;
+    children?: React.ReactNode;
 
     size?: "sm"
     kind?: "warning" | "info"
 }
 
 export function Badge({
+                          className,
                           children,
                           size = "sm",
                           kind = "warning"
                       }: BadgeProps) {
     return <div className={`
-        ${$badge.host}
+        ${cn.BadgeHost}
+        
+        ${size === "sm" && cn.BadgeHostSm}
         
-        ${size === "sm" && $badge.host$$sm}
+        ${kind === "warning" && cn.BadgeHostWarning}
         
-        ${kind === "warning" && $badge.host$$warning}
+        ${kind === "info" && cn.BadgeHostInfo}
         
-        ${kind === "info" && $badge.host$$info}
+        ${className || ''}
     `}>
-        <span className={$badge.item}>
+        <span className={cn.BadgeItem}>
             {children}
         </span>
     </div>
-}
+}
+
+// TODO: below is a concept only
+// Export styles for useStyle hook
+// Badge.styles = cn;
+// export type BadgeStyles = typeof cn;
+
+// Example usage:
+/*
+import { useStyle } from '@xyd/components/utils';
+import { Badge, BadgeStyles } from '@xyd/components/writer';
+
+const styled = useStyle<BadgeStyles>(Badge);
+
+styled.BadgeHost`
+    background-color: red;
+`;
+*/
+
+// usage
+
+// import {Content} from "@xyd-js/components/writer"
+// const styled = useStyle(Badge)
+
+// styled.BadgeHostInfo`
+//     background-color: red;
+// `
+
+// export default styled

package/src/writer/Blockquote/Blockquote.styles.tsx

@@ -1,10 +1,8 @@
 import {css} from "@linaria/core";
 
-export const $blockquote = {
-    host: css`
-        color: rgb(55 65 81 / 1);
-        font-style: italic;
-        border-color: rgb(209 213 219 / 1);
-        margin: 0;
-    `
-}
+export const BlockquoteHost = css`
+    color: rgb(55 65 81 / 1);
+    font-style: italic;
+    border-color: rgb(209 213 219 / 1);
+    margin: 0;
+`;

package/src/writer/Blockquote/Blockquote.tsx

@@ -1,13 +1,13 @@
 import React from "react"
 
-import {$blockquote} from "./Blockquote.styles";
+import * as cn from "./Blockquote.styles";
 
 export interface BlockquoteProps {
     children: React.ReactNode;
 }
 
 export function Blockquote({children}: BlockquoteProps) {
-    return <blockquote className={$blockquote.host}>
+    return <blockquote className={cn.BlockquoteHost}>
         {children}
     </blockquote>
 }