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

package/src/coder/CodeTabs/CodeTabs.tsx

@@ -7,10 +7,7 @@ import {
 import {
     CodeCopy,
 } from "../CodeCopy";
-import {
-    $sample,
-    $languages,
-} from "./CodeTabs.styles.tsx"; // TODO: style by highlighted?
+import * as cn from "./CodeTabs.styles"; // TODO: style by highlighted?
 
 export interface CodeTabsProps {
     description: string;
@@ -24,7 +21,7 @@ export function withCodeTabs(PreComponent) {
 
         return (
             <TabsPrimitive.Root
-                className={$sample.host}
+                className={cn.CodeTabsHost}
                 style={props.highlighted[0]?.style}
                 defaultValue={props.highlighted[0]?.meta}
             >
@@ -39,7 +36,7 @@ export function withCodeTabs(PreComponent) {
                             style={codeblock?.style || codeblock?.style}
                             codeblock={codeblock}
                             className={`
-                                ${isSingle && $sample.pre$$single}
+                                ${isSingle && cn.CodeTabsPreSingle}
                             `}
                         />
                     </TabsPrimitive.Content>
@@ -58,25 +55,25 @@ function $LanguageTabSwitcher(props: LanguageTabSwitcherProps) {
     const isSingle = props.highlighted.length === 1 && !props.description
 
     return <div className={`
-        ${$languages.host}
-        ${isSingle && $languages.host$$single}
+        ${cn.CodeTabsLanguagesHost}
+        ${isSingle && cn.CodeTabsLanguagesHostSingle}
     `}>
         <$Description description={props.description}/>
 
-        <TabsPrimitive.List className={$languages.list}>
+        <TabsPrimitive.List className={cn.CodeTabsLanguagesList}>
             {props.highlighted?.map(({meta}, i) => {
                 if (isSingle) {
                     return null
                 }
-                return <TabsPrimitive.Trigger value={meta!} key={i} className={$languages.button}>
+                return <TabsPrimitive.Trigger value={meta!} key={i} className={cn.CodeTabsLanguagesButton}>
                     {meta}
                 </TabsPrimitive.Trigger>
             })}
         </TabsPrimitive.List>
 
         <div className={`
-            ${$languages.copy}
-            ${isSingle && $languages.copy$$single}
+            ${cn.CodeTabsLanguagesCopy}
+            ${isSingle && cn.CodeTabsLanguagesCopySingle}
         `}>
             {props.highlighted?.map((codeblock, i) => (
                 <TabsPrimitive.Content value={codeblock.meta!} asChild key={i}>
@@ -88,8 +85,8 @@ function $LanguageTabSwitcher(props: LanguageTabSwitcherProps) {
 }
 
 function $Description(props: { description: string }) {
-    return <div className={$languages.description}>
-        <div className={$languages.description$item}>
+    return <div className={cn.CodeTabsLanguagesDescription}>
+        <div className={cn.CodeTabsLanguagesDescriptionItem}>
             {props.description}
         </div>
     </div>

package/src/content/Anchor/Anchor.styles.tsx

@@ -0,0 +1,5 @@
+import {css} from "@linaria/core";
+
+export const AnchorHost = css`
+    color: #7051d4;
+`; 

package/src/content/Anchor/Anchor.tsx

@@ -1,13 +1,6 @@
 import React, {forwardRef} from 'react'
 import type {ComponentProps, ReactElement} from 'react'
-
-import {css} from "@linaria/core";
-
-const $anchor = {
-    host: css`
-        color: #7051d4;
-    `,
-};
+import * as cn from "./Anchor.styles";
 
 export type AnchorProps = Omit<ComponentProps<'a'>, 'ref'> & {
     newWindow?: boolean
@@ -24,11 +17,10 @@ export const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(function (
         return (
             <a
                 ref={forwardedRef}
-                to={href}
                 href={href}
                 target="_blank"
                 rel="noreferrer"
-                className={$anchor.host}
+                className={cn.AnchorHost}
             >
                 {children}
             </a>
@@ -39,9 +31,8 @@ export const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(function (
         return (
             <a
                 ref={forwardedRef}
-                to={href}
                 href={href}
-                className={$anchor.host}
+                className={cn.AnchorHost}
             >
                 {children}
             </a>
@@ -51,9 +42,8 @@ export const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(function (
     return (
         <a
             ref={forwardedRef}
-            to={href}
             href={href}
-            className={$anchor.host}
+            className={cn.AnchorHost}
         >
             {children}
         </a>

package/src/content/Content/Content.styles.tsx

@@ -0,0 +1,9 @@
+import {css} from "@linaria/core";
+
+export const ContentHost = css`
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    font-size: 16px;
+    line-height: 1.5;
+`; 

package/src/content/Content/Content.tsx

@@ -1,21 +1,13 @@
 import React from "react"
-import {css} from "@linaria/core";
-
-const $content = {
-    host: css`
-        display: flex;
-        flex-direction: column;
-        //align-items: center;
-        gap: 24px;
-    `
-}
+import * as cn from "./Content.styles";
 
 export interface ContentProps {
     children: React.ReactNode
 }
 
 export function Content({children}: ContentProps) {
-    return <div className={$content.host}>
+    return <div className={cn.ContentHost}>
         {children}
     </div>
-}
+}
+

package/src/content/Content.tsx

@@ -88,8 +88,7 @@ export function stdContent() {
         table: TableV2,
         tr: TableV2.Tr,
         th: TableV2.Th,
-        td: TableV2.Td,
-        td: (props) => <TableV2.Td {...props} >
+        td: (props) => <TableV2.Td {...props}>
             <TableV2.Cell>
                 {props.children}
             </TableV2.Cell>

package/src/content/Subtitle/Subtitle.styles.ts

@@ -0,0 +1,8 @@
+import {css} from "@linaria/core";
+
+export const Host = css`
+    margin-top: -18px;
+    font-size: 18px;
+    color: #6e6e80;
+    font-weight: 300;
+`; 

package/src/content/Subtitle/Subtitle.tsx

@@ -1,14 +1,5 @@
 import React from "react"
-import {css} from "@linaria/core";
-
-const cn = {
-    Host: css`
-        margin-top: -18px;
-        font-size: 18px;
-        color: #6e6e80;
-        font-weight: 300;
-    `
-}
+import * as cn from "./Subtitle.styles";
 
 export interface SubtitleProps {
     children: React.ReactNode

package/src/layouts/Layout.styles.tsx

@@ -1,11 +1,11 @@
 import {css} from "@linaria/core";
 
 const globalPageGutter = '8px';
-export const globalHeaderHeight = '46px';
+export const globalHeaderHeight = '40px';
 const globalHeaderWarningHeight = "0px";
 const contentTopSpace = "12px";
 
-const globalHeaderHeightWithSub = '90px';
+const globalHeaderHeightWithSub = '94px';
 
 const cubicMove = "cubic-bezier(.65, 0, .35, 1)";
 const sidebarWidth = "210px";
@@ -20,132 +20,136 @@ export const globals = css`
     }
 `;
 
-export const $layout = {
-    host: css`
-        width: 100%;
-    `,
-    header: css`
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        position: fixed;
-        top: ${globalHeaderWarningHeight};
-        right: ${globalPageGutter};
-        left: ${globalPageGutter};
-
-        height: ${globalHeaderHeight};
-    `,
-    header$$sub: css`
-        flex-direction: column;
-        height: ${globalHeaderHeightWithSub};
-        transition: transform 200ms;
-    `,
-    header$$hideMain: css`
-        transform: translateY(calc(-${globalHeaderHeight} + 3px));
-    `,
-    main: css`
-        position: fixed;
-        top: calc(${globalHeaderHeight} + ${globalHeaderWarningHeight});
-        bottom: ${globalPageGutter};
-        left: ${globalPageGutter};
-        right: ${globalPageGutter};
-    }`,
-    main$$sub: css`
-        top: calc(${globalHeaderHeightWithSub} + ${globalHeaderWarningHeight});
-        transition: top 200ms;
-    `,
-    sidebar: css`
-        flex-direction: column;
-        position: absolute;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
-        z-index: 101;
-        width: ${sidebarWidth};
-        border: 0;
-        padding: ${contentTopSpace} 0 0;
-        overflow: visible;
-        background: none;
-        border-radius: 0;
-        opacity: 1;
-        visibility: visible;
-        transition: opacity .3s ${cubicMove};
-    `,
-}
-
-export const $page = {
-    host: css`
-        position: absolute;
-        top: ${contentTopSpace};
-        right: 0;
-        bottom: 0;
-        z-index: 201;
-        background: #fff;
-
-        //border-radius: 8px;
-        //border: 1px solid #ececf1;
-
-        overflow: hidden;
-        transition: opacity .3s ${cubicMove};
-
-        left: ${sidebarWidth};
-    `,
-    scroll: css`
-        //position: absolute;
-        //top: 0;
-        //right: 0;
-        //bottom: 0;
-        //left: 0;
-        //overflow: auto;
-
-        overflow: scroll;
-        height: 100%;
-        
-    `,
-    container: css`
-        padding: 0;
-        width: 100%;
-        //position: relative; TODO: unset if during client render?
-        min-height: 100%;
-
-        max-width: 100%;
-        margin: 0 auto;
-        font-size: 15px;
-        line-height: 24px;
-    `,
-    articleContainer: css`
-        width: 980px;
-        padding: 40px 56px;
-        padding-top: 20px;
-        max-width: 100%;
-        margin: 0 auto;
-    `,
-    articleContainer$$fullWidth: css`
-        width: 1200px;
-    `,
-
-}
-
-export const $article = {
-    host: css`
-        display: flex;
-        gap: 30px;
-        width: 100%;
-        align-items: flex-start;;
-    `,
-    content: css`
-        flex: 1 1 0;
-        overflow: hidden;
-    `,
-    nav: css`
-        position: sticky;
-        top: 30px;
-        width: 180px;
-        margin-top: 0;
-        margin-left: 50px;
-        padding-left: 16px;
-        flex: none;
-    `
-}
+export const LayoutHost = css`
+    width: 100%;
+`;
+
+export const LayoutHeader = css`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    position: fixed;
+    top: ${globalHeaderWarningHeight};
+    right: ${globalPageGutter};
+    left: ${globalPageGutter};
+
+    height: ${globalHeaderHeight};
+`;
+
+export const LayoutHeaderSub = css`
+    flex-direction: column;
+    height: ${globalHeaderHeightWithSub};
+    transition: transform 200ms;
+`;
+
+export const LayoutHeaderHideMain = css`
+    transform: translateY(calc(-${globalHeaderHeight} + 3px));
+`;
+
+export const LayoutMain = css`
+    position: fixed;
+    top: calc(${globalHeaderHeight} + ${globalHeaderWarningHeight});
+    bottom: ${globalPageGutter};
+    left: ${globalPageGutter};
+    right: ${globalPageGutter};
+}`;
+
+export const LayoutMainSub = css`
+    top: calc(${globalHeaderHeightWithSub} + ${globalHeaderWarningHeight});
+    transition: top 200ms;
+`;
+
+export const LayoutSidebar = css`
+    flex-direction: column;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 101;
+    width: ${sidebarWidth};
+    border: 0;
+    padding: ${contentTopSpace} 0 0;
+    overflow: visible;
+    background: none;
+    border-radius: 0;
+    opacity: 1;
+    visibility: visible;
+    transition: opacity .3s ${cubicMove};
+`;
+
+export const PageHost = css`
+    position: absolute;
+    top: ${contentTopSpace};
+    right: 0;
+    bottom: 0;
+    z-index: 201;
+    background: #fff;
+
+    //border-radius: 8px;
+    //border: 1px solid #ececf1;
+
+    overflow: hidden;
+    transition: opacity .3s ${cubicMove};
+
+    left: ${sidebarWidth};
+`;
+
+export const PageScroll = css`
+    //position: absolute;
+    //top: 0;
+    //right: 0;
+    //bottom: 0;
+    //left: 0;
+    //overflow: auto;
+
+    overflow: scroll;
+    height: 100%;
+`;
+
+export const PageContainer = css`
+    padding: 0;
+    width: 100%;
+    //position: relative; TODO: unset if during client render?
+    min-height: 100%;
+
+    max-width: 100%;
+    margin: 0 auto;
+    font-size: 15px;
+    line-height: 24px;
+`;
+
+export const PageArticleContainer = css`
+    width: 980px;
+    padding: 40px 56px;
+    padding-top: 20px;
+    max-width: 100%;
+    margin: 0 auto;
+`;
+
+export const PageArticleContainerFullWidth = css`
+    width: 1200px;
+`;
+
+export const ArticleHost = css`
+    display: flex;
+    gap: 30px;
+    width: 100%;
+    align-items: flex-start;;
+`;
+
+export const ArticleContent = css`
+    flex: 1 1 0;
+    overflow: hidden;
+`;
+
+export const ArticleNav = css`
+    position: sticky;
+    top: 30px;
+    width: 180px;
+    margin-top: 0;
+    margin-left: 50px;
+    padding-left: 16px;
+    flex: none;
+`;

package/src/layouts/Layout.tsx

@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from "react"
 
-import {$layout, $page, $article, globalHeaderHeight} from "./Layout.styles"
+import * as cn from "./Layout.styles"
 
 export interface LayoutProps {
     header: React.ReactNode;
@@ -21,7 +21,7 @@ export function Layout(props: LayoutProps) {
             return
         }
 
-        const checkpoint = parseInt(globalHeaderHeight, 10) / 2
+        const checkpoint = parseInt(cn.globalHeaderHeight, 10) / 2
         const diff = scrollTop - controlScrollPos
         const reversePosDiff = Math.abs(scrollTop - controlScrollPos)
 
@@ -61,44 +61,42 @@ export function Layout(props: LayoutProps) {
             return
         }
 
-        document.querySelector(`.${$page.scroll}`)?.addEventListener("scroll", onScroll)
-        document.querySelector(`.${$page.scroll}`)?.addEventListener("scrollend", onScrollFinish)
+        document.querySelector(`.${cn.PageScroll}`)?.addEventListener("scroll", onScroll)
+        document.querySelector(`.${cn.PageScroll}`)?.addEventListener("scrollend", onScrollFinish)
 
         return () => {
-            document.querySelector(`.${$page.scroll}`)?.removeEventListener("scroll", onScroll)
-            document.querySelector(`.${$page.scroll}`)?.removeEventListener("scrollend", onScrollFinish)
+            document.querySelector(`.${cn.PageScroll}`)?.removeEventListener("scroll", onScroll)
+            document.querySelector(`.${cn.PageScroll}`)?.removeEventListener("scrollend", onScrollFinish)
         }
     }, []);
 
-    return <div className={$layout.host}>
+    return <div className={cn.LayoutHost}>
         <Layout.Header className={`
-            ${props.subheader && $layout.header$$sub}
-            ${hideMainHeader && $layout.header$$hideMain}
+            ${props.subheader && cn.LayoutHeaderSub}
+            ${hideMainHeader && cn.LayoutHeaderHideMain}
         `}>
             {props.header}
         </Layout.Header>
         <main className={`
-            ${$layout.main}
-            ${!hideMainHeader && props.subheader && $layout.main$$sub}
+            ${cn.LayoutMain}
+            ${!hideMainHeader && props.subheader && cn.LayoutMainSub}
         `}>
-            <aside className={$layout.sidebar}>
+            <aside className={cn.LayoutSidebar}>
                 {props.aside}
             </aside>
-            <div className={$page.host}>
-                <div className={$page.scroll}>
-                    <div className={$page.container}>
+            <div className={cn.PageHost}>
+                <div className={cn.PageScroll}>
+                    <div className={cn.PageContainer}>
                         <div className={`
-                            ${$page.articleContainer}
-                            ${props.kind == "fullwidth" && $page.articleContainer$$fullWidth}
+                            ${cn.PageArticleContainer}
+                            ${props.kind == "fullwidth" && cn.PageArticleContainerFullWidth}
                         `}>
-                            <article className={$article.host}>
-                                <section className={$article.content}>
+                            <article className={cn.ArticleHost}>
+                                <section className={cn.ArticleContent}>
                                     {props.content}
                                 </section>
                                 {
-                                    props.contentNav && <nav className={`
-                                    ${$article.nav}
-                                `}>
+                                    props.contentNav && <nav className={cn.ArticleNav}>
                                         {props.contentNav}
                                     </nav>
                                 }
@@ -113,7 +111,7 @@ export function Layout(props: LayoutProps) {
 
 Layout.Header = function LayoutHeader({className, children}: { className?: string, children: React.ReactNode }) {
     return <header className={`
-            ${$layout.header}
+            ${cn.LayoutHeader}
             ${className}
         `}>
         {children}