@xyd-js/components 0.1.0-dev.0

package/src/writer/Tabs/Tabs.styles.tsx

@@ -0,0 +1,77 @@
+import {css} from "@linaria/core";
+
+export const $sample = {
+    host: css`
+        position: relative;
+        max-width: 100%;
+    `,
+    buttons: css`
+        display: flex;
+        align-items: center;
+    `,
+    content: css`
+        margin-top: 16px;
+    `
+}
+
+export const $arrow = {
+    host: css`
+        padding: 8px;
+        background-color: #ffffff;
+        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    `,
+    icon: css`
+        width: 16px;
+        height: 16px;
+    `
+}
+
+export const $scroller = {
+    host: css`
+        overflow-x: auto;
+        flex-grow: 1;
+    `,
+    container: css`
+        display: inline-flex;
+        gap: 4px;
+
+        border-radius: 8px;
+        background-color: #F3F4F6;
+        
+        padding: 4px;
+        margin-left: 4px;
+    `
+}
+
+export const $button = {
+    host: css`
+        padding: 0.5rem 1rem;
+
+        border-radius: 0.375rem;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        font-weight: 500;
+        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;
+
+        color: #6B7280;
+
+        &:hover {
+            color: #111827;
+        }
+
+        &[data-state="active"] {
+            color: #111827;
+            background-color: #ffffff;
+            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+        }
+    `,
+    $$active: css`
+        color: #111827;
+        background-color: #ffffff;
+        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    `
+}

package/src/writer/Tabs/Tabs.tsx

@@ -0,0 +1,104 @@
+import React, {useState, useRef, useEffect} from 'react'
+import * as RadixTabs from "@radix-ui/react-tabs"
+import {ChevronLeft, ChevronRight} from "lucide-react"
+
+import {
+    $sample,
+    $arrow,
+    $scroller,
+    $button
+} from "./Tabs.styles";
+
+export interface TabsProps {
+    children: React.ReactNode;
+    items: string[];
+    tabIndex?: number;
+}
+
+export function Tabs({children, items, tabIndex}: TabsProps) {
+    const [showLeftArrow, setShowLeftArrow] = useState(false)
+    const [showRightArrow, setShowRightArrow] = useState(false)
+    const scrollContainerRef = useRef<HTMLDivElement>(null)
+
+    const [value, setActiveTab] = useState(items[tabIndex || 0] || "")
+
+    const handleScroll = () => {
+        if (scrollContainerRef.current) {
+            const {scrollLeft, scrollWidth, clientWidth} = scrollContainerRef.current
+            setShowLeftArrow(scrollLeft > 0)
+            setShowRightArrow(scrollLeft < scrollWidth - clientWidth)
+        }
+    }
+
+    useEffect(() => {
+        handleScroll()
+        window.addEventListener('resize', handleScroll)
+        return () => window.removeEventListener('resize', handleScroll)
+    }, [])
+
+    const scroll = (direction: 'left' | 'right') => {
+        if (scrollContainerRef.current) {
+            const scrollAmount = direction === 'left' ? -200 : 200
+            scrollContainerRef.current.scrollBy({left: scrollAmount, behavior: 'smooth'})
+        }
+    }
+
+    return (
+        <RadixTabs.Root asChild value={value} onValueChange={setActiveTab}>
+            <div className={$sample.host}>
+                <div className={$sample.buttons}>
+                    {showLeftArrow && (
+                        <button
+                            onClick={() => scroll('left')}
+                            className={$arrow.host}
+                        >
+                            <ChevronLeft className={$arrow.icon}/>
+                        </button>
+                    )}
+
+                    <div
+                        ref={scrollContainerRef}
+                        onScroll={handleScroll}
+                        className={$scroller.host}
+                    >
+                        <div className={$scroller.container}>
+                            <RadixTabs.List>
+                                {items.map((item, index) => <TabsItem key={index} value={item}>
+                                        {item}
+                                    </TabsItem>
+                                )}
+                            </RadixTabs.List>
+                        </div>
+                    </div>
+
+                    {showRightArrow && (
+                        <button
+                            onClick={() => scroll('right')}
+                            className={$arrow.host}
+                        >
+                            <ChevronRight className={$arrow.icon}/>
+                        </button>
+                    )}
+                </div>
+
+                <div className={$sample.content}>
+                    {children}
+                </div>
+            </div>
+        </RadixTabs.Root>
+    )
+}
+
+function TabsItem({children, value}) {
+    return <RadixTabs.Trigger asChild value={value}>
+        <button className={`${$button.host}`}>
+            {children}
+        </button>
+    </RadixTabs.Trigger>
+}
+
+Tabs.Content = function TabsContent({children, value}) {
+    return <RadixTabs.Content asChild value={value}>
+        {children}
+    </RadixTabs.Content>
+}

package/src/writer/Tabs/index.ts

@@ -0,0 +1,7 @@
+export {
+    Tabs,
+} from "./Tabs"
+
+export type {
+    TabsProps
+} from "./Tabs"

package/src/writer/UnderlineNav/UnderlineNav.styles.tsx

@@ -0,0 +1,45 @@
+import {css} from "@linaria/core"
+
+export const $nav = {
+    host: css`
+        align-items: center;
+        display: flex;
+
+        height: 42px;
+
+        background-color: #fff;
+        border-bottom: 1px solid hsl(212, 15%, calc(96% - 12% * 1));
+
+        z-index: 99;
+    `,
+    ul: css`
+        display: flex;
+        gap: 10px;
+
+        height: 100%;
+        color: hsl(212, 15%, calc(96% - 12% * 4));
+
+        list-style: none;
+        padding: 0;
+        white-space: nowrap;
+    `,
+    item: css`
+        height: 100%;
+
+        &[data-state="active"] { // TODO: in the future it should not be possible
+            a {
+                border-bottom-color: rgb(112, 81, 212);
+            }
+        }
+    `,
+    itemLink: css`
+        display: inline-flex;
+        border-bottom: 3px solid transparent;
+        text-decoration: none;
+
+        height: 100%;
+        padding: 10px;
+    `,
+    itemLink$$active: css`
+    `
+}

package/src/writer/UnderlineNav/UnderlineNav.tsx

@@ -0,0 +1,38 @@
+import React from "react"
+import * as RadixTabs from "@radix-ui/react-tabs";
+
+import {$nav} from "./UnderlineNav.styles"
+
+export interface TabsProps {
+    children: React.ReactNode
+    value: string
+    onChange: (value: string) => void
+}
+
+export function UnderlineNav({children, value, onChange}: TabsProps) {
+    return <RadixTabs.Root asChild value={value} onValueChange={onChange}>
+        <nav className={$nav.host}>
+            <RadixTabs.List asChild>
+                <ul className={$nav.ul}>
+                    {children}
+                </ul>
+            </RadixTabs.List>
+        </nav>
+    </RadixTabs.Root>
+}
+
+export interface UnderlineNavItemProps {
+    children: React.ReactNode
+    value: string
+    href?: string
+}
+
+UnderlineNav.Item = function UnderlineNavItem({children, value, href}: UnderlineNavItemProps) {
+    return <RadixTabs.Trigger asChild value={value}>
+        <li className={$nav.item}>
+            <a href={href} className={`${$nav.itemLink}`}>
+                {children}
+            </a>
+        </li>
+    </RadixTabs.Trigger>
+}

package/src/writer/UnderlineNav/index.ts

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

package/src/writer/index.ts

@@ -0,0 +1,32 @@
+export * from "./Badge"
+
+export * from "./Blockquote"
+
+export * from "./Breadcrumbs"
+
+export * from "./Callout"
+
+export * from "./Code"
+
+export * from "./Details"
+
+export * from "./GuideCard"
+
+export * from "./Heading"
+
+export * from "./Hr"
+
+export * from "./Icon"
+
+export * from "./NavLinks"
+
+export * from "./Pre"
+
+export * from "./Steps"
+
+export * from "./Table"
+
+export * from "./Tabs"
+
+export * from "./UnderlineNav"
+

package/tsconfig.json

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

package/writer.ts

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