@xyd-js/components 0.1.0-build.168

package/src/writer/Text/Text.tsx

@@ -0,0 +1,79 @@
+import React from "react"
+
+import * as cn from "./Text.styles";
+
+/**
+ * Available font sizes for the Text component
+ */
+export type TextFontSizes = "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+
+/**
+ * Available text styles/kinds for the Text component
+ */
+export type TextKindTypes = "default" | "ghost" | "success" | "warn" | "error" | "primary" | "secondary";
+
+/**
+ * Available font weights for the Text component
+ */
+export type TextFontWeights = "normal" | "bold" | "extra-bold";
+
+/**
+ * Props for the Text component
+ */
+export interface TextProps {
+    /** Font size of the text */
+    size?: TextFontSizes
+
+    /** Visual style/kind of the text */
+    kind?: TextKindTypes
+
+    /** Font weight of the text */
+    weight?: TextFontWeights
+
+    /** Content to be rendered inside the text component */
+    children?: React.ReactNode
+
+    /** Additional CSS class name */
+    className?: string
+
+    /** HTML id attribute */
+    id?: string
+    
+    /** Click event handler */
+    onClick?: () => void
+    
+    /** HTML tag to render the text as */
+    as?: "span" | "p"
+}
+
+/**
+ * A flexible text component that supports different sizes, styles, and weights.
+ * 
+ * @category Component
+ */
+export function Text({
+    size = "medium",
+    kind = "default",
+    weight = "normal",
+    children,
+    className,
+    id,
+    onClick,
+    as = "p"
+}: TextProps) {
+    const Tag = as || "p";
+
+    return (
+        <Tag
+            className={`${cn.TextHost} ${className || ''}`}
+            data-size={size}
+            data-kind={kind}
+            data-weight={weight}
+            onClick={onClick}
+            id={id}
+        >
+            {children}
+        </Tag>
+    )
+}
+

package/src/writer/Text/index.ts

@@ -0,0 +1,3 @@
+export {
+    Text
+} from "./Text";

package/src/writer/TocCard/TocCard.module.css

@@ -0,0 +1,44 @@
+@layer defaults {
+    .TocCardHost {
+        display: block;
+        max-width: 250px;
+    
+        [part="container"] {
+        }
+    
+        [part="description"] {
+            color: var(--xyd-toccard-color);
+            letter-spacing: 0;
+        }
+    
+        [part="link"] {
+            display: block;
+            border: 1px solid var(--xyd-toccard-border-color);
+            border-radius: 6px;
+            padding: 8px 16px 12px;
+            text-decoration: none;
+    
+            &:hover {
+                border-color: var(--xyd-toccard-border-color--active);
+            }
+        }
+    
+        [part="title-container"] {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+    
+        [part="title"] {
+            color: var(--xyd-toccard-title-color);
+            margin-bottom: 2px;
+        }
+    
+        [part="link-icon"] {
+            width: 1em;
+            height: 1em;
+            object-fit: contain;
+            color: var(--xyd-toccard-icon-color);
+        }
+    }
+}

package/src/writer/TocCard/TocCard.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+import cn from "./TocCard.module.css";
+import { Icon } from "../../../writer";
+
+interface TocCardProps {
+    title: string;
+    description: string;
+    href: string;
+    className?: string;
+    icon?: string;
+    as?: React.ElementType;
+}
+
+export function TocCard({ title, description, href, className, icon, as }: TocCardProps) {
+    const Link = as || $Link;
+
+    return <xyd-toccard
+        className={`${cn.TocCardHost} ${className || ""}`}
+    >
+        <div part="container">
+            <Link
+                part="link"
+                href={href}
+                target="_blank"
+                rel="noreferrer"
+            >
+                <div part="title-container">
+                    <div part="title">{title}</div>
+                    {icon && <Icon name={icon} size={16} />}
+                </div>
+                <div part="description">
+                    {description}
+                </div>
+            </Link>
+        </div>
+    </xyd-toccard>
+}
+
+function $Link({ children, href, ...props }: React.ComponentProps<'a'>) {
+    return <a href={href} {...props}>{children}</a>
+}

package/src/writer/TocCard/index.ts

@@ -0,0 +1,3 @@
+export {
+    TocCard
+} from "./TocCard";

package/src/writer/Update/Update.styles.tsx

@@ -0,0 +1,33 @@
+import { css } from "@linaria/core"
+
+export const UpdateHost = css`
+    @layer defaults {
+        gap: 24px;
+        flex-direction: row;
+        padding-top: 32px;
+        padding-bottom: 32px;
+        align-items: flex-start;
+        width: 100%;
+        display: flex;
+        position: relative;
+
+        [part="meta"] {
+            width: 160px;
+            position: sticky;
+            justify-content: flex-start;
+            align-items: flex-start;
+            flex-direction: column;
+            flex-shrink: 0;
+            display: flex;
+            gap: 10px;
+        }
+
+        [part="content-container"] {
+            padding-left: 2px;
+            padding-right: 2px;
+            overflow: hidden;
+            flex: 1 1 0%;
+            max-width: 100%;
+        }
+    }
+`;

package/src/writer/Update/Update.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { Badge } from '../Badge';
+import { Text } from '../Text';
+
+import * as cn from "./Update.styles"
+
+interface UpdateProps {
+    children: React.ReactNode
+
+    version: string
+
+    date?: string
+}
+
+export function Update(props: UpdateProps) {
+    const { date, version, children } = props;
+    return (
+        <xyd-update className={cn.UpdateHost}>
+            <div part="meta">
+                {date && <div part="date">
+                    <Badge>
+                        {date}
+                    </Badge>
+                </div>}
+                <div part="version">
+                    <Text size="small">
+                        {version}
+                    </Text>
+                </div>
+            </div>
+            <div part="content-container">
+                <div part="content">{children}</div>
+            </div>
+        </xyd-update>
+    );
+}

package/src/writer/Update/index.ts

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

package/src/writer/VideoGuide/VideoGuide.module.css

@@ -0,0 +1,105 @@
+@layer defaults {
+    .VideoPlayerHost {
+        z-index: var(--xyd-videoguide-miniature-z-index);
+        width: var(--xyd-videoguide-miniature-mini-width);
+        height: var(--xyd-videoguide-miniature-mini-height);
+        overflow: visible;
+
+        [part="shape"] {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: visible;
+            box-shadow: var(--xyd-videoguide-miniature-shadow);
+            border-radius: var(--xyd-videoguide-miniature-radius);
+            box-sizing: border-box;
+            background-color: var(--xyd-videoguide-miniature-bgcolor);
+        }
+
+        [part="frame"] {
+            position: relative;
+            width: 100%;
+            height: var(--xyd-videoguide-miniature-mini-height);
+
+            background-color: var(--xyd-videoguide-miniature-bgcolor);
+            overflow: hidden;
+            border-radius: var(--xyd-videoguide-miniature-radius);
+            box-sizing: border-box;
+        }
+
+        [part="thumbnail"] {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image: url(https://xyd-land.netlify.app/docs-hero.png);
+            background-size: cover;
+            background-position: center;
+        }
+
+        [part="cover"] {
+            background-color: transparent;
+            backdrop-filter: brightness(60%) blur(10px);
+            -webkit-backdrop-filter: brightness(60%) blur(10px);
+
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            transition: backdrop-filter .1s ease-in-out, -webkit-backdrop-filter .1s ease-in-out, opacity .1s ease-in-out, background-color .1s ease-in-out;
+
+            overflow: hidden;
+
+            border-radius: var(--xyd-videoguide-miniature-radius);
+            box-sizing: border-box;
+        }
+
+        [part="controls"] {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            box-sizing: border-box;
+        }
+
+        [part="button"] {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+        }
+
+        [part="icon"] {
+            color: var(--xyd-videoguide-miniature-color);
+            display: flex;
+            box-sizing: border-box;
+
+            svg {
+                fill: currentColor;
+            }
+        }
+
+        [part="description"] {
+            box-sizing: border-box;
+            margin-top: 8px;
+        }
+
+        [part="description-container"] {
+            box-sizing: border-box;
+            margin-top: 8px;
+        }
+
+        [part="description"] {
+            text-align: center;
+            color: var(--xyd-videoguide-miniature-color);
+            display: block;
+            white-space: normal;
+        }
+    }
+}

package/src/writer/VideoGuide/VideoGuide.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+
+import cn from "./VideoGuide.module.css";
+
+export function VideoGuide() {
+    return null
+};
+
+interface VideoGuideMiniatureProps {
+    videoSrc?: string;
+    description?: string;
+    className?: string;
+}
+
+VideoGuide.Miniature = function VideoGuideMiniature(props: VideoGuideMiniatureProps) {
+    const {
+        videoSrc,
+        description = "Watch the video guide"
+    } = props;
+
+    return <xyd-videoguide-miniature
+        className={`${cn.VideoPlayerHost} ${props.className || ""}`}
+    >
+        <div part="shape" >
+            <div part="frame" >
+                <iframe
+                    width="100%"
+                    height="100%"
+                    allow="autoplay; fullscreen"
+                    src={videoSrc}
+                />
+                <div part="thumbnail" />
+            </div>
+
+            <div part="cover">
+                <div part="controls">
+                    <button part="button" type="button">
+                        <div
+                            aria-hidden="true"
+                            part="icon"
+                        >
+                            <$PlayIcon />
+                        </div>
+
+                        <div part="description-container" >
+                            <span part="description" >
+                                {description}
+                            </span>
+                        </div>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </xyd-videoguide-miniature>
+};
+
+
+function $PlayIcon() {
+    return <svg
+        aria-hidden="true"
+        height={32}
+        width={32}
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M8 14.25A6.25 6.25 0 0 0 14.25 8 6.242 6.242 0 0 0 8 1.75 6.25 6.25 0 0 0 1.75 8 6.25 6.25 0 0 0 8 14.25ZM8 16a8 8 0 0 0 8-8c0-4.419-3.57-8-8-8a8 8 0 0 0-8 8 8 8 0 0 0 8 8Z"
+        />
+        <path
+            d="M10.817 7.659A.415.415 0 0 1 11 8a.415.415 0 0 1-.183.341L7.242 10.91c-.305.218-.742.02-.742-.34V5.431c0-.36.437-.56.742-.341l3.575 2.568Z" />
+    </svg>
+}

package/src/writer/VideoGuide/index.ts

@@ -0,0 +1 @@
+export {VideoGuide} from './VideoGuide'; 

package/src/writer/index.ts

@@ -0,0 +1,53 @@
+export * from "./Anchor"
+
+export * from "./Badge"
+
+export * from "./Banner"
+
+export * from "./Blockquote"
+
+export * from "./Breadcrumbs"
+
+export * from "./Button"
+
+export * from "./Callout"
+
+export * from "./Card"
+
+export * from "./Code"
+
+export * from "./ColorSchemeButton"
+
+export * from "./Details"
+
+export * from "./GuideCard"
+
+export * from "./Heading"
+
+export * from "./Hr"
+
+export * from "./Icon"
+
+export * from "./IconSocial"
+
+export * from "./Image"
+
+export * from "./List"
+
+export * from "./NavLinks"
+
+export * from "./Pre"
+
+export * from "./Steps"
+
+export * from "./Table"
+
+export * from "./Tabs"
+
+export * from "./Text"
+
+export * from "./TocCard"
+
+export * from "./Update"
+
+export * from "./VideoGuide"

package/system.ts

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

package/tsconfig.json

@@ -0,0 +1,46 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "esModuleInterop": true,
+    "moduleResolution": "bundler",
+    "target": "ES6",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": false,
+    "incremental": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true,
+    "baseUrl": ".",
+    "paths": {
+      "@xyd-js/core": [
+        "../xyd-core/index.ts"
+      ],
+    },
+    "typeRoots": [
+      "./types.d.ts"
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "types.d.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/types.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react'
+
+declare global {
+  namespace React {
+    namespace JSX {
+      interface IntrinsicElements {
+        // Code
+        'xyd-code-bg': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'xyd-code-mark-inline': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'xyd-code-linenumber': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'xyd-code-mark': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'xyd-code-pre': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'xyd-code-loader': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'xyd-code-copy': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'xyd-codetabs': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'xyd-codetabs-languages': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+
+        // Layout
+        'xyd-layout-primary': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+
+        // Components
+        'xyd-badge': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'xyd-banner': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'xyd-callout': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'xyd-card': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'xyd-breadcrumbs': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'xyd-guidecard': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'xyd-guidecard-list': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'xyd-navlinks': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'xyd-steps': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'xyd-steps-item': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'xyd-table-cell': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'xyd-tabs': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'xyd-toccard': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'xyd-videoguide-miniature': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'xyd-content-decorator': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'xyd-grid-decorator': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+
+        // Kit
+        'xyd-loader': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+
+        // System
+        'xyd-search-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+
+        // Pages
+        'page-home': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'page-first-slide': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'page-blog-home': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+      }
+    }
+  }
+}

package/uxsdk.ts

@@ -0,0 +1 @@
+export * from "./src/uxsdk";

package/views.ts

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

package/writer.ts

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