@xyd-js/components 0.1.0-xyd.0

package/src/pages/HomePage/types.ts

@@ -0,0 +1,41 @@
+import React from "react"
+
+export interface IHomePageHero {
+    // The main text for the hero section. This will be defined
+    // as `h1` tag.
+    text: string
+
+    // Whether to apply text effect on `text`. Defaults to `false`.
+    textEffect?: boolean
+
+    // Subtitle displayed below `text`.
+    subtitle?: string | React.ReactNode
+
+    // Action buttons to display in home hero section.
+    actions?: IHomePageHeroAction[]
+}
+
+export interface IHomePageHeroAction {
+    // Label of the button.
+    text: string
+
+    // Color theme of the button. Defaults to `brand`.
+    kind?: 'secondary'
+
+    // Link href attribute.
+    href?: string
+}
+
+export interface IHomePageFeature {
+    // Title of the feature.
+    title: string
+
+    // Details of the feature.
+    description: string | React.ReactNode
+
+    // Show icon on each feature box.
+    icon?: React.ReactNode
+
+    // Link href attribute
+    href?: string
+}

package/src/pages/index.ts

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

package/src/views/HomeView/HomeView.tsx

@@ -0,0 +1,74 @@
+import React from "react"
+import {css} from "@linaria/core";
+
+const $homeView = {
+    host: css`
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+    `,
+}
+
+export interface HomeViewProps {
+    header: React.ReactNode
+    body: React.ReactNode
+    footer: React.ReactNode
+}
+
+export function HomeView({header, body, footer}: HomeViewProps) {
+    return <div className={$homeView.host}>
+        {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"
+}
+
+HomeView.Body = function HomeViewBody({children, kind}: HomeViewBodyProps) {
+    return <div className={`
+        ${$body.host}
+        ${kind === "secondary" ? $body.host$$secondary : ""}
+    `}>
+        <div className={`
+            ${$body.body}
+        `}>
+            {children}
+        </div>
+    </div>
+}
+
+

package/src/views/HomeView/index.ts

@@ -0,0 +1,3 @@
+export type {HomeViewProps, HomeViewBodyProps} from "./HomeView";
+
+export {HomeView} from "./HomeView";

package/src/views/index.ts

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

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

@@ -0,0 +1,29 @@
+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;
+    `,
+
+    item: css`
+        position: relative;
+    `
+}

package/src/writer/Badge/Badge.tsx

@@ -0,0 +1,28 @@
+import React from "react"
+
+import {$badge} from "./Badge.styles";
+
+export interface BadgeProps {
+    children: React.ReactNode;
+
+    size?: "sm"
+    kind?: "warning"
+}
+
+export function Badge({
+                          children,
+                          size = "sm",
+                          kind = "warning"
+                      }: BadgeProps) {
+    return <div className={`
+        ${$badge.host}
+        
+        ${size === "sm" && $badge.host$$sm}
+        
+        ${kind === "warning" && $badge.host$$warning}
+    `}>
+        <span className={$badge.item}>
+            {children}
+        </span>
+    </div>
+}

package/src/writer/Badge/index.ts

@@ -0,0 +1,7 @@
+export {
+    Badge,
+} from "./Badge";
+
+export type {
+    BadgeProps,
+} from "./Badge";

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

@@ -0,0 +1,10 @@
+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;
+    `
+}

package/src/writer/Blockquote/Blockquote.tsx

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

package/src/writer/Blockquote/index.ts

@@ -0,0 +1,7 @@
+export {
+    Blockquote,
+} from "./Blockquote";
+
+export type {
+    BlockquoteProps,
+} from "./Blockquote";

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

@@ -0,0 +1,28 @@
+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;
+    `
+};

package/src/writer/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,46 @@
+import React, {Fragment} from 'react'
+import type {ReactElement} from 'react'
+import {ArrowRightIcon} from '@radix-ui/react-icons'
+
+import {$breadcrumbs} from './Breadcrumbs.styles'
+
+function Anchor({children, ...rest}) {
+    return <a {...rest}>
+        {children}
+    </a>
+}
+
+export interface BreadcrumbsProps {
+    items: {
+        title: string
+        href?: string
+    }[]
+}
+
+export function Breadcrumbs(props: BreadcrumbsProps): ReactElement {
+    return (
+        <div className={$breadcrumbs.host}>
+            {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}/>}
+                        <div className={`
+                            ${$breadcrumbs.item}
+                            ${lastActive && $breadcrumbs.item$$active}
+                        `}
+                             title={item.title}
+                        >
+                            {item.href && !lastActive ? (
+                                <Anchor href={item.href}>{item.title}</Anchor>
+                            ) : (
+                                item.title
+                            )}
+                        </div>
+                    </Fragment>
+                )
+            })}
+        </div>
+    )
+}

package/src/writer/Breadcrumbs/index.ts

@@ -0,0 +1,7 @@
+export {
+    Breadcrumbs
+} from "./Breadcrumbs"
+
+export type {
+    BreadcrumbsProps,
+} from "./Breadcrumbs";

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

@@ -0,0 +1,50 @@
+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;
+    `
+}

package/src/writer/Callout/Callout.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+
+import {$callout, $icon, $message} from "./Callout.styles";
+
+export interface CalloutProps {
+    children: React.ReactNode;
+}
+
+function InfoIcon() {
+    return <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="1em"
+        height="1em"
+        fill="currentColor"
+        viewBox="0 0 24 24"
+    >
+        <path d="M13 12a1 1 0 1 0-2 0v4a1 1 0 1 0 2 0v-4Zm-1-2.5A1.25 1.25 0 1 0 12 7a1.25 1.25 0 0 0 0 2.5Z"/>
+        <path
+            fillRule="evenodd"
+            d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0Z"
+            clipRule="evenodd"
+        />
+    </svg>
+}
+
+export function Callout({children}: CalloutProps) {
+    return <div className={`${$callout.host} ${$callout.$$neutral}`}>
+        <div className={$icon.host}>
+            <InfoIcon/>
+        </div>
+        <div className={$message.host}>
+            <div className={$message.body}>
+                {children}
+            </div>
+        </div>
+    </div>
+}

package/src/writer/Callout/index.tsx

@@ -0,0 +1,3 @@
+export {Callout} from "./Callout"
+
+export type {CalloutProps} from "./Callout"

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

@@ -0,0 +1,17 @@
+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;
+
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 1.6em;
+
+        background: linear-gradient(45deg, #f7f7f8 0%, rgba(247, 247, 248, 1) 100%);
+    `
+}

package/src/writer/Code/Code.tsx

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

package/src/writer/Code/index.ts

@@ -0,0 +1,3 @@
+export {Code} from "./Code"
+
+export type {CodeProps} from "./Code"

package/src/writer/Details/Details.styles.tsx

@@ -0,0 +1,76 @@
+import {css} from "@linaria/core";
+
+export const $details = {
+    host: css`
+        border-top: 1px solid #ececf1;
+
+        &[open] summary svg[data-icon="true"] { // TODO: bad solution
+            transform: rotate(90deg);
+        }
+    `,
+    host$$secondary: css`
+        background-color: #f7f7f8;
+        border: 1px solid #ececf1;
+        border-radius: 8px;
+    `,
+    summary: css`
+        padding: 16px 14px 16px 0;
+        font-size: 18px;
+        cursor: pointer;
+        font-weight: 500;
+        font-variant-numeric: tabular-nums;
+        line-height: 1.4;
+        transition: color 0.3s;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        list-style: none;
+
+        &:hover {
+            color: #565869;
+        }
+    `,
+    summary$$secondary: css`
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        cursor: pointer;
+        padding: 20px 24px;
+    `,
+    summaryDeep: css`
+        display: flex;
+        align-items: center;
+        margin-bottom: 8px;
+    `,
+    summaryDeep$text: css`
+        color: #6e6e80;
+        text-transform: uppercase;
+        font-size: 12px;
+        line-height: 16px;
+        letter-spacing: .08em;
+        margin-left: 8px;
+        font-weight: 700;
+    `,
+    label: css`
+        flex: 1 1 auto;
+    `,
+    icon: css`
+        flex: 0 0 auto;
+        font-size: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding-right: 6px;
+    `,
+    content: css`
+        padding: 0 24px 20px;
+    `,
+    content$$secondary: css`
+        // TODO: also bad
+
+        code {
+            background: white;
+        }
+    `
+}

package/src/writer/Details/Details.tsx

@@ -0,0 +1,122 @@
+import React from "react"
+
+import {$details} from "./Details.styles";
+
+interface BaseDetailsProps {
+    children: React.ReactNode;
+    label: string;
+}
+
+interface SecondaryDetailsProps extends BaseDetailsProps {
+    kind: "secondary";
+    title: string;
+}
+
+interface PrimaryDetailsProps extends BaseDetailsProps {
+    kind?: "primary";
+}
+
+export type DetailsProps = PrimaryDetailsProps | SecondaryDetailsProps;
+
+export function Details(props: DetailsProps) {
+    let title = "";
+    const {children, label} = props;
+
+    if (props.kind === "secondary") {
+        title = props.title;
+    }
+
+    const kind = props.kind || "primary";
+
+    return <details className={`
+        ${$details.host} 
+        ${kind === "secondary" && $details.host$$secondary}
+   `}>
+        <summary className={`
+        ${$details.summary} 
+        ${kind === "secondary" && $details.summary$$secondary}
+   `}>
+            {kind === "primary" && <>
+                <$Icon/>
+                <$Label>
+                    {label}
+                </$Label>
+            </>}
+            {kind === "secondary" && <>
+                <div>
+                    <div className={$details.summaryDeep}>
+                        <$IconDeep/>
+                        <div className={$details.summaryDeep$text}>
+                            {title}
+                        </div>
+                    </div>
+                    <$Label>
+                        {label}
+                    </$Label>
+                </div>
+                <$Icon/>
+            </>}
+        </summary>
+
+        <div className={`
+            ${$details.content}
+            ${kind === "secondary" && $details.content$$secondary}
+        `}>
+            {children}
+        </div>
+    </details>
+}
+
+function $Icon() {
+    return <div className={$details.icon}>
+        <svg
+            // TODO: bad solution
+            data-icon="true"
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+        >
+            <path
+                fillRule="evenodd"
+                d="M8.293 4.293a1 1 0 0 1 1.414 0l7 7a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414-1.414L14.586 12 8.293 5.707a1 1 0 0 1 0-1.414Z"
+                clipRule="evenodd"
+            />
+        </svg>
+    </div>
+}
+
+function $IconDeep() {
+    return <svg
+        width="1em"
+        height="1em"
+        viewBox="0 0 24 24"
+        stroke="none"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <g clipPath="url(#clip0_1689_2180)">
+            <path
+                d="M4.3 4.3L7.1 7.1M10.6 5.7V1.5M14.8 7.8L17.6 5M5.7 11.3H1.5M7.1 14.8L4.3 17.6M15.5 22.5L9.9 9.9L22.5 14.8L16.9 16.2L15.5 22.5Z"
+                stroke="black"
+                strokeWidth={2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </g>
+        <defs>
+            <clipPath id="clip0_1689_2180">
+                <rect width={24} height={24} fill="white"/>
+            </clipPath>
+        </defs>
+    </svg>
+}
+
+function $Label({children}: {
+    children?: React.ReactNode
+}) {
+    return <div className={$details.label}>
+        {children}
+    </div>
+}

package/src/writer/Details/index.ts

@@ -0,0 +1,3 @@
+export {Details} from "./Details";
+
+export type {DetailsProps} from "./Details";