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

package/src/writer/Icon/Icon.tsx

@@ -0,0 +1,48 @@
+import React, {createContext, ReactElement, SVGProps, use} from "react";
+import parse from 'html-react-parser';
+
+// TODO: html-react-parser is not the best choice, but it works for now
+
+export const IconProvider = createContext({
+    iconSet: {}
+})
+
+interface IconProps {
+    name: string;
+    size?: number;
+    color?: string;
+}
+
+export function Icon(props: IconProps): ReactElement | null {
+    const {name, size = 24, color} = props
+
+    const iconProvider = use(IconProvider)
+    const iconSet = iconProvider?.iconSet
+
+    if (!iconSet) {
+        return null
+    }
+
+    const ico = iconSet[name]
+    if (!ico || !ico.svg) {
+        return null
+    }
+
+    const icon = parse(ico.svg) as ReactElement<SVGProps<SVGSVGElement>>
+    if (React.isValidElement(icon)) {
+        return React.cloneElement(icon, {
+            width: size,
+            height: size,
+            color: color || icon.props.color || 'currentColor',
+            style: {
+                width: size,
+                height: size,
+                color: color || icon.props.color || 'currentColor',
+            }
+        })
+    }
+
+    return null
+}
+
+

package/src/writer/Icon/index.ts

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

package/src/writer/Image/Image.styles.tsx

@@ -0,0 +1,9 @@
+import { css } from "@linaria/core"
+
+export const ImageHost = css`
+    @layer defaults {
+        width: 100%;
+        border-radius: 16px;
+        box-shadow: 0 2px 16px rgba(0,0,0,0.06);
+    }
+`;

package/src/writer/Image/Image.tsx

@@ -0,0 +1,19 @@
+
+
+import React from 'react';
+
+import * as cn from "./Image.styles"
+
+export interface ImageProps {
+    src: string
+    alt: string
+    style?: React.CSSProperties
+}
+
+export function Image(props: ImageProps) {
+    return <img
+        src={props.src}
+        alt={props.alt}
+        className={cn.ImageHost}
+    />
+}

package/src/writer/Image/index.ts

@@ -0,0 +1 @@
+export { Image } from "./Image"

package/src/writer/List/List.styles.tsx

@@ -0,0 +1,47 @@
+import { css } from '@linaria/core'
+
+export default {
+    List: css`
+        @layer defaults {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+
+            ol& {
+                list-style-type: decimal;
+                padding-inline-start: 1.625em;
+            }
+        }
+    `,
+    Item: css`
+        @layer defaults {
+            ul & {
+                margin-bottom: 0.5rem;
+                position: relative;
+                padding-inline-start: .375em;
+                padding-left: 2em !important;
+            }
+
+            /*  TODO: IN THE FUTURE BETTER SOLUTION IS NEEDED */
+            xyd-grid-decorator ul & {
+                padding-left: 0 !important;
+            }
+
+            ul &::before {
+                content: "";
+                width: .375em;
+                height: .375em;
+                position: absolute;
+                top: 0.5em;
+                left: .5em;
+                border-radius: 50%;
+                background-color: var(--xyd-list-item-bgcolor);
+            }
+
+            ol &::marker {
+                padding-inline-start: .375em;
+                color: var(--xyd-list-marker-color);
+            }
+        }
+    `
+}

package/src/writer/List/List.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+
+import cn from "./List.styles";
+
+export interface ListProps {
+    children: React.ReactNode;
+}
+
+export function List({ children }: ListProps) {
+    return <ul className={cn.List}>
+        {children}
+    </ul>
+}
+
+export function ListOl({ children }: ListProps) {
+    return <ol className={cn.List}>
+        {children}
+    </ol>
+}
+
+export interface ListItemProps {
+    children: React.ReactNode;
+}
+
+function ListItem({ children }: ListItemProps) {
+    return <li className={cn.Item}>{children}</li>
+}
+
+List.Item = ListItem;

package/src/writer/List/index.ts

@@ -0,0 +1,4 @@
+export {
+    List,
+    ListOl
+} from "./List";

package/src/writer/NavLinks/NavLinks.styles.ts

@@ -1,7 +1,8 @@
 import {css} from "@linaria/core";
 
-export const $navLinks = {
-    host: css`
+export const NavLinksHost = css`
+    @layer defaults {
+        font-weight: var(--xyd-font-weight-semibold);
         display: flex;
         padding-top: 2rem;
         margin-top: 2rem;
@@ -9,25 +10,23 @@ export const $navLinks = {
         justify-content: space-between;
         align-items: center;
         border-top-width: 1px;
-        border-color: #ececf1;
-    `,
-    link: css`
-        display: flex;
-        padding-top: 1rem;
-        padding-bottom: 1rem;
-        gap: 0.25rem;
-        align-items: center;
-        font-size: 1rem;
-        line-height: 1.5rem;
-        font-weight: 500;
-        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;
-        max-width: 50%;
-    `,
-    icon: css`
-        display: inline;
-        height: 1.25rem;
-        flex-shrink: 0;
-    `,
-};
+        border-color: var(--xyd-navlinks-border-color);
+
+        [part="link"] {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+            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;
+            max-width: 50%;
+        }
+
+        [part="icon"] {
+            display: inline;
+            height: 1.25rem;
+            flex-shrink: 0;
+        }
+    }
+`;
+

package/src/writer/NavLinks/NavLinks.tsx

@@ -1,13 +1,6 @@
 import React from "react"
-import {ArrowLeftIcon, ArrowRightIcon} from '@radix-ui/react-icons'
 
-import {$navLinks} from "./NavLinks.styles";
-
-function Anchor({children, ...rest}) {
-    return <a {...rest}>
-        {children}
-    </a>
-}
+import * as cn from "./NavLinks.styles";
 
 export interface NavLinksProps {
     prev?: {
@@ -18,31 +11,85 @@ export interface NavLinksProps {
         title: string
         href: string
     }
+
+    as?: React.ElementType
+
+    className?: string
 }
 
-export function NavLinks(props: NavLinksProps) {
+export function NavLinks(
+    props: NavLinksProps
+) {
+    const Link = props.as || $Anchor
+
     return (
-        <div className={$navLinks.host}>
+        <xyd-navlinks
+            className={`${cn.NavLinksHost} ${props.className || ""}`}
+        >
             {props.prev ? (
-                <Anchor
+                <Link
                     href={props.prev.href}
                     title={props.prev.title}
-                    className={$navLinks.link}
+                    part="link"
                 >
-                    <ArrowLeftIcon className={$navLinks.icon}/>
+                    <$ArrowLeftIcon part="icon"/>
                     {props.prev.title}
-                </Anchor>
+                </Link>
             ) : <div/>}
             {props.next && (
-                <Anchor
+                <Link
                     href={props.next.href}
                     title={props.next.title}
-                    className={$navLinks.link}
+                    part="link"
                 >
                     {props.next.title}
-                    <ArrowRightIcon className={$navLinks.icon}/>
-                </Anchor>
+                    <$ArrowRightIcon part="icon"/>
+                </Link>
             )}
-        </div>
+        </xyd-navlinks>
     )
 }
+
+
+function $Anchor({children, ...rest}) {
+    return <a {...rest}>
+        {children}
+    </a>
+}
+
+
+function $ArrowRightIcon(props: React.SVGProps<SVGSVGElement>) {
+    return <svg
+        width={15}
+        height={15}
+        viewBox="0 0 15 15"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+        <path
+            d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z"
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+        />
+    </svg>
+}
+
+function $ArrowLeftIcon(props: React.SVGProps<SVGSVGElement>) {
+    return  <svg
+        width={15}
+        height={15}
+        viewBox="0 0 15 15"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+        <path
+            d="M6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355L3.70711 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H3.70711L6.85355 11.1464C7.04882 11.3417 7.04882 11.6583 6.85355 11.8536C6.65829 12.0488 6.34171 12.0488 6.14645 11.8536L2.14645 7.85355C1.95118 7.65829 1.95118 7.34171 2.14645 7.14645L6.14645 3.14645C6.34171 2.95118 6.65829 2.95118 6.85355 3.14645Z"
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+        />
+    </svg>
+}

package/src/writer/Pre/Pre.styles.tsx

@@ -1,13 +1,13 @@
 import {css} from "@linaria/core";
 
-export const $pre = {
-    host: css`
+export const PreHost = css`
+    @layer defaults {
         margin-top: 0;
         border-radius: 6px;
         padding: 16px;
         border: 0;
 
-        background-color: rgb(246, 248, 250);
+        background-color: var(--xyd-pre-bgcolor);
         overflow: auto;
-    `
-}
+    }
+`;

package/src/writer/Pre/Pre.tsx

@@ -1,13 +1,14 @@
 import React from "react"
 
-import {$pre} from "./Pre.styles"
+import * as cn from "./Pre.styles"
 
 export interface PreProps {
     children: React.ReactNode
+    className?: string
 }
 
-export function Pre({children}: PreProps) {
-    return <pre className={$pre.host}>
+export function Pre({ children, className }: PreProps) {
+    return <pre className={`${cn.PreHost} ${className || ""}`}>
         {children}
     </pre>
 }

package/src/writer/Steps/Steps.styles.tsx

@@ -1,7 +1,7 @@
 import {css} from "@linaria/core";
 
-export const $steps = {
-    host: css`
+export const StepsHost = css`
+    @layer defaults {
         padding-left: 0;
         list-style: none;
         counter-reset: ordered-listitem;
@@ -9,11 +9,13 @@ export const $steps = {
         display: flex;
         flex-direction: column;
         gap: 6px;
-    `,
-    li: css`
+    }
+`;
+
+export const StepsLi = css`
+    @layer defaults {
         padding-left: 32px;
         position: relative;
-        line-height: 1.5;
 
         &::after {
             position: absolute;
@@ -22,15 +24,15 @@ export const $steps = {
             counter-increment: ordered-listitem;
             content: counter(ordered-listitem);
 
-            background: #ececf1;
-            color: #353740;
-            font-size: 12px;
-            line-height: 24px;
-            font-weight: 500;
+            background: var(--xyd-steps-marker-bgcolor);
+            color: var(--xyd-steps-marker-color);
+            font-size: var(--xyd-font-size-xsmall);
+            line-height: var(--xyd-line-height-medium);
+            font-weight: var(--xyd-font-weight-medium);
             text-align: center;
             height: 24px;
             width: 24px;
             border-radius: 12px;
         }
-    `,
-}
+    }
+`;

package/src/writer/Steps/Steps.tsx

@@ -1,24 +1,53 @@
 import React from "react"
 
-import {$steps} from "./Steps.styles";
+import * as cn from "./Steps.styles";
 
+/**
+ * Props for the Steps component
+ */
 export interface StepsProps {
+    /** Content to be rendered inside the steps list */
     children: React.ReactNode;
-}
 
-export function Steps({children}: StepsProps) {
-    return <ol className={$steps.host}>
-        {children}
-    </ol>
+    /** Optional CSS class name to be applied to the steps container */
+    className?: string;
+}
 
+/**
+ * Steps component that renders a numbered list of steps or stages.
+ * Use this component to display a sequence of steps in a process or workflow.
+ * 
+ * @category Component
+ */
+export function Steps({ children, className }: StepsProps) {
+    return <xyd-steps>
+        <ol className={`${cn.StepsHost} ${className || ""}`}>
+            {children}
+        </ol>
+    </xyd-steps>
 }
 
+/**
+ * Props for the Steps.Item component
+ */
 export interface StepsItemProps {
+    /** Content to be rendered inside the step item */
     children: React.ReactNode;
+    
+    /** Optional CSS class name to be applied to the step item */
+    className?: string;
 }
 
-Steps.Item = function StepsItem({children}: StepsItemProps) {
-    return <li className={$steps.li}>
-        {children}
-    </li>
+/**
+ * Individual step item component that represents a single step in the sequence.
+ * This component should be used as a child of the Steps component.
+ * 
+ * @category Component
+ */
+Steps.Item = function StepsItem({ children, className }: StepsItemProps) {
+    return <xyd-steps-item>
+        <li className={`${cn.StepsLi} ${className || ""}`}>
+            {children}
+        </li>
+    </xyd-steps-item>
 }

package/src/writer/Table/Table.styles.tsx

@@ -1,39 +1,71 @@
 import {css} from "@linaria/core";
 
-const colors = {
-    primary: "#D1D5DB"
-}
 
-export const $table = {
-    host: css`
-        display: block;
-        overflow-x: scroll;
-
-        border-collapse: collapse;
-        border-radius: 3px;
+export default {
+    Host: css`
+        @layer defaults {
+            display: table;
+            width: 100%;
+            min-width: 640px; // Ensures table doesn't get too squished
+            border-collapse: separate;
+            border-spacing: 0;
+            border: 1px solid var(--xyd-table-border-color);
+            border-radius: 8px;
+            margin-top: 1rem;
+            overflow: hidden;
+        }
     `,
-    th: css`
-        padding: 0.5rem 1rem;
-        margin: 0;
-
-        font-weight: 600;
-        border-width: 1px;
-        border-color: ${colors.primary};
-        background: rgba(234, 238, 242, 0.5);
+    Thead: css`
+        @layer defaults {
+            background: var(--xyd-table-bgcolor);
+        }
+    `,
+    Tbody: css`
+        
+    `,
+    Th: css`
+        @layer defaults {
+            text-align: left;
+            font-weight: var(--xyd-font-weight-medium);
+            padding: 0.5rem 1rem;
+            white-space: nowrap;
+            vertical-align: middle;
+            color: var(--xyd-table-color);
+            border-bottom: 1px solid var(--xyd-table-border-color);
+            border-right: 1px solid var(--xyd-table-border-color);
+        }
     `,
-    tr: css`
-        padding: 0;
-        margin: 0;
-        border-top-width: 1px;
-        border-color: ${colors.primary};
+    Tr: css`
+        @layer defaults {
+            &:not(:last-child) {
+                border-bottom: 1px solid var(--xyd-table-border-color);
+            }
+        }
     `,
-    td: css`
-        padding: 0.5rem 1rem;
-        margin: 0;
+    Td: css`
+        @layer defaults {
+            padding: 0.5rem 1rem;
+            vertical-align: middle;
+            border-top: 1px solid var(--xyd-table-border-color);
+            border-right: 1px solid var(--xyd-table-border-color);
 
-        border-width: 1px;
-        border-color: ${colors.primary};
-    `
-}
+            @media (max-width: 768px) {
+                padding: 0.5rem;
+            }
+        }
+    `,
+    Cell: css`
+        @layer defaults {
+            display: flex;
+            align-items: baseline;
+            width: 100%;
+            gap: 0.5rem;
 
+            [part="child"] {
+                flex: 1;
+                text-align: right;
+            }
+        }
+    `
+}