@xyd-js/components 0.1.0-xyd.0 → 0.1.0-xyd.10

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/views/index.ts

@@ -1 +1,2 @@
+// TODO: rename to @xyd-js/components/pages
 export * from "./HomeView";

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

@@ -1,29 +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: #000;
-        background-color: #f8d047;
-    `,
-    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,28 +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"
+    kind?: "warning" | "info"
 }
 
 export function Badge({
+                          className,
                           children,
                           size = "sm",
                           kind = "warning"
                       }: BadgeProps) {
     return <div className={`
-        ${$badge.host}
+        ${cn.BadgeHost}
+        
+        ${size === "sm" && cn.BadgeHostSm}
+        
+        ${kind === "warning" && cn.BadgeHostWarning}
         
-        ${size === "sm" && $badge.host$$sm}
+        ${kind === "info" && cn.BadgeHostInfo}
         
-        ${kind === "warning" && $badge.host$$warning}
+        ${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>
 }

package/src/writer/Breadcrumbs/Breadcrumbs.styles.ts

@@ -1,28 +1,29 @@
 import {css} from "@linaria/core";
 
-export const $breadcrumbs = {
-    host: css`
-        display: flex;
-        overflow: hidden;
-        margin-top: 0.375rem;
-        gap: 0.25rem;
-        align-items: center;
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-        color: #6B7280;
-    `,
-    icon: css`
-        shrink: 0;
-        width: 0.875rem;
-    `,
-    item: css`
-        white-space: nowrap;
-        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 300ms;
-    `,
-    item$$active: css`
-        color: #000;
-        font-weight: bold;
-    `
-};
+export const BreadcrumbsHost = css`
+    display: flex;
+    overflow: hidden;
+    margin-top: 0.375rem;
+    gap: 0.25rem;
+    align-items: center;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    color: #6B7280;
+`;
+
+export const BreadcrumbsIcon = css`
+    shrink: 0;
+    width: 0.875rem;
+`;
+
+export const BreadcrumbsItem = css`
+    white-space: nowrap;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
+`;
+
+export const BreadcrumbsItemActive = css`
+    color: #000;
+    font-weight: bold;
+`;

package/src/writer/Breadcrumbs/Breadcrumbs.tsx

@@ -2,7 +2,7 @@ import React, {Fragment} from 'react'
 import type {ReactElement} from 'react'
 import {ArrowRightIcon} from '@radix-ui/react-icons'
 
-import {$breadcrumbs} from './Breadcrumbs.styles'
+import * as cn from './Breadcrumbs.styles'
 
 function Anchor({children, ...rest}) {
     return <a {...rest}>
@@ -19,16 +19,16 @@ export interface BreadcrumbsProps {
 
 export function Breadcrumbs(props: BreadcrumbsProps): ReactElement {
     return (
-        <div className={$breadcrumbs.host}>
+        <div className={cn.BreadcrumbsHost}>
             {props.items.map((item, index) => {
                 const lastActive = index === props.items.length - 1
 
                 return (
                     <Fragment key={item.href + item.title}>
-                        {index > 0 && <ArrowRightIcon className={$breadcrumbs.icon}/>}
+                        {index > 0 && <ArrowRightIcon className={cn.BreadcrumbsIcon}/>}
                         <div className={`
-                            ${$breadcrumbs.item}
-                            ${lastActive && $breadcrumbs.item$$active}
+                            ${cn.BreadcrumbsItem}
+                            ${lastActive && cn.BreadcrumbsItemActive}
                         `}
                              title={item.title}
                         >

package/src/writer/Callout/Callout.styles.tsx

@@ -1,50 +1,46 @@
 import {css} from "@linaria/core";
 
-export const $callout = {
-    host: css`
-        display: inline-flex;
-        align-items: center;
-
-        position: relative;
-        width: 100%;
-        min-width: 275px;
-        padding: 8px 12px;
-
-        border-radius: 8px;
-
-        text-align: center;
-
-        border: 1px solid #ececf1;
-    `,
-    $$neutral: css`
-        background-color: #f7f7f8;
-
-        border-color: #ececf1;
-    `
-}
-
-export const $icon = {
-    host: css`
-        display: inline-flex;
-        margin-right: 14px;
-        flex: 0 0 auto;
-        align-self: flex-start;
-
-        color: #6e6e80;
-        font-size: 20px;
-        margin-top: 2px;
-    `
-}
-
-export const $message = {
-    host: css`
-        color: #353740;
-        text-align: left;
-
-        flex: 1 1 auto;
-    `,
-    body: css`
-        font-size: 14px;
-        line-height: 20px;
-    `
-}
+export const CalloutHost = css`
+    display: inline-flex;
+    align-items: center;
+
+    position: relative;
+    width: 100%;
+    min-width: 275px;
+    padding: 8px 12px;
+
+    border-radius: 8px;
+
+    text-align: center;
+
+    border: 1px solid #ececf1;
+`;
+
+export const CalloutNeutral = css`
+    background-color: #f7f7f8;
+
+    border-color: #ececf1;
+`;
+
+export const CalloutIcon = css`
+    display: inline-flex;
+    margin-right: 14px;
+    flex: 0 0 auto;
+    align-self: flex-start;
+
+    color: #6e6e80;
+    font-size: 20px;
+    margin-top: 2px;
+`;
+
+export const CalloutMessage = css`
+    color: #353740;
+    text-align: left;
+
+    flex: 1 1 auto;
+`;
+
+export const CalloutMessageBody = css`
+    font-size: 14px;
+    line-height: 20px;
+`;

package/src/writer/Callout/Callout.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 
-import {$callout, $icon, $message} from "./Callout.styles";
+import * as cn from "./Callout.styles";
 
 export interface CalloutProps {
     children: React.ReactNode;
@@ -24,12 +24,12 @@ function InfoIcon() {
 }
 
 export function Callout({children}: CalloutProps) {
-    return <div className={`${$callout.host} ${$callout.$$neutral}`}>
-        <div className={$icon.host}>
+    return <div className={`${cn.CalloutHost} ${cn.CalloutNeutral}`}>
+        <div className={cn.CalloutIcon}>
             <InfoIcon/>
         </div>
-        <div className={$message.host}>
-            <div className={$message.body}>
+        <div className={cn.CalloutMessage}>
+            <div className={cn.CalloutMessageBody}>
                 {children}
             </div>
         </div>

package/src/writer/Code/Code.styles.tsx

@@ -1,17 +1,15 @@
 import {css} from "@linaria/core";
 
-export const $code = {
-    host: css`
-        display: inline-block;
-        padding: 0 .3em;
-        border-radius: 6px;
-        margin: 0 3px;
-        border: .5px solid #ececf1;
+export const CodeHost = css`
+    display: inline-block;
+    padding: 0 .3em;
+    border-radius: 6px;
+    margin: 0 3px;
+    border: .5px solid #ececf1;
 
-        font-size: 14px;
-        font-weight: 500;
-        line-height: 1.6em;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.6em;
 
-        background: linear-gradient(45deg, #f7f7f8 0%, rgba(247, 247, 248, 1) 100%);
-    `
-}
+    background: linear-gradient(45deg, #f7f7f8 0%, rgba(247, 247, 248, 1) 100%);
+`;

package/src/writer/Code/Code.tsx

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