@xyd-js/components 0.1.0-build.168

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

@@ -0,0 +1,100 @@
+import {css} from "@linaria/core";
+
+export default {
+    Host: css`
+        @layer defaults {
+            display: table;
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 0;
+            border: 1px solid var(--xyd-table-border-color);
+            border-radius: 8px;
+            margin-top: 16px;
+            //overflow: hidden;
+            
+            &[data-kind="secondary"] {
+                border: none;
+                
+                th, td {
+                    border: none;
+                    border-bottom: 1px solid var(--xyd-table-border-color);
+                }
+            }
+            
+            @media (min-width: 1400px) {
+                min-width: 640px;
+            }
+            
+            @media (max-width: 1024px) {
+                overflow: auto;
+                display: block;
+            }
+        }
+    `,
+    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);
+            font-weight: bold;
+            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`
+        @layer defaults {
+            &:not(:last-child) {
+                border-bottom: 1px solid var(--xyd-table-border-color);
+            }
+        }
+    `,
+    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);
+            max-width: 300px;
+            overflow: auto;
+
+            @media (max-width: 768px) {
+                padding: 0.5rem;
+            }
+
+            code {
+                &.json {
+                    width: 100%;
+                    font-family: unset; // TODO: BETTER - cuz issues with displaying json on mobile
+                }
+                text-align: left;
+            }
+        }
+    `,
+    Cell: css`
+        @layer defaults {
+            display: flex;
+            align-items: baseline;
+            width: 100%;
+            gap: 0.5rem;
+
+            [part="child"] {
+                flex: 1;
+                //text-align: right;
+            }
+        }
+    `
+} 
+

package/src/writer/Table/Table.tsx

@@ -0,0 +1,158 @@
+import React from "react"
+
+import cn from "./Table.styles";
+
+/**
+ * Props for the Table component
+ */
+export interface TableProps {
+    /** The content to be rendered inside the table */
+    children: React.ReactNode;
+
+    /** Optional kind of the table, can be used for styling purposes */
+    kind?: "secondary"
+
+    /** Optional CSS class name to be applied to the table */
+    className?: string;
+}
+
+/**
+ * A table component that provides a structured way to display tabular data.
+ * It supports custom styling through className prop and can contain various table elements.
+ * 
+ * @category Component
+ */
+export function Table({ children, kind, className }: TableProps) {
+    return (
+        <table data-kind={kind || undefined} className={`${cn.Host} ${className || ''}`}>
+            {children}
+        </table>
+    );
+}
+
+/**
+ * Props for the TableHead component
+ */
+export interface TableHeadProps {
+    /** The content to be rendered inside the table header */
+    children: React.ReactNode;
+}
+
+/**
+ * Represents the header section of a table.
+ * Use this component to group header content at the top of the table.
+ */
+Table.Head = function TableHead({ children }: TableHeadProps) {
+    return <thead className={cn.Thead}>
+        {children}
+    </thead>
+}
+
+/**
+ * Props for the TableTh component
+ */
+export interface TableThProps {
+    /** The content to be rendered inside the table header cell */
+    children: React.ReactNode;
+    
+    /** Whether the cell content should be right-aligned (for numeric values) */
+    numeric?: boolean;
+}
+
+/**
+ * Represents a header cell in the table.
+ * Use this component for column headers in the table.
+ */
+Table.Th = function TableTh({ children, numeric }: TableThProps) {
+    return <th className={`${cn.Th} ${numeric ? 'numeric' : ''}`}>
+        {children}
+    </th>
+}
+
+/**
+ * Props for the TableTr component
+ */
+export interface TableTrProps {
+    /** The content to be rendered inside the table row */
+    children: React.ReactNode;
+}
+
+/**
+ * Represents a row in the table.
+ * Use this component to create rows in the table body or header.
+ */
+Table.Tr = function TableTr({ children }: TableTrProps) {
+    return <tr className={cn.Tr}>
+        {children}
+    </tr>
+}
+
+/**
+ * Props for the TableBody component
+ */
+export interface TableBodyProps {
+    /** The content to be rendered inside the table body */
+    children: React.ReactNode;
+}
+
+/**
+ * Represents the main content area of the table.
+ * Use this component to group the main content rows of the table.
+ */
+Table.Body = function TableBody({ children }: TableBodyProps) {
+    return <tbody className={cn.Tbody}>
+        {children}
+    </tbody>
+}
+
+/**
+ * Props for the TableTd component
+ */
+export interface TableTdProps {
+    /** The content to be rendered inside the table cell */
+    children: React.ReactNode;
+
+    /** Whether the cell content should be right-aligned (for numeric values) */
+    numeric?: boolean;
+    
+    /** Whether the cell should have a muted appearance */
+    muted?: boolean;
+}
+
+/**
+ * Represents a data cell in the table.
+ * Use this component for regular data cells in the table body.
+ */
+Table.Td = function TableTd({ children, numeric, muted }: TableTdProps) {
+    return <td className={`${cn.Td} ${numeric ? 'numeric' : ''} ${muted ? 'muted' : ''}`}>
+        {children}
+    </td>
+}
+
+/**
+ * Props for the TableCell component
+ */
+export interface TableCellProps {
+    /** The content to be rendered inside the table cell */
+    children: React.ReactNode;
+}
+
+/**
+ * A custom table cell component that wraps content in a div with specific styling.
+ * Use this component when you need a custom-styled cell with additional structure.
+ */
+Table.Cell = function TableCell({ children }: TableCellProps) {
+    return <xyd-table-cell className={cn.Cell}>
+        <div part="child">
+            {children}
+        </div>
+    </xyd-table-cell>
+}
+
+/**
+ * Props for the TableModelCell component
+ */
+export interface TableModelCellProps {
+    /** The content to be rendered inside the model cell */
+    children: React.ReactNode;
+}

package/src/writer/Table/index.ts

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

package/src/writer/Tabs/Tabs.tsx

@@ -0,0 +1,67 @@
+import React, {createContext, useContext, useState, useRef} from "react"
+
+import {TabsPrimary, TabsPrimaryProps} from "./TabsPrimary"
+import {TabsSecondary, TabsSecondaryProps} from "./TabsSecondary";
+import {TabsAnalytics} from "./TabsAnalytics";
+
+export interface TabsPropsCommon {
+    /** The kind of tabs to render. If not provided, the component will render the primary tabs. */
+    kind?: 'secondary' | null
+}
+
+// // TODO: in the future unify the TabsPrimary and TabsSecondary components?
+type TabsProps<T> = T & TabsPropsCommon
+
+const TabsContext = createContext<{
+    kind: string | null
+}>({
+    kind: null,
+})
+
+/**
+ * A component that renders a tabs component.
+ *
+ * @category Component
+ */
+export function Tabs(props: TabsProps<TabsSecondaryProps | TabsPrimaryProps>) {
+    let tabs: React.ReactNode
+
+    if (props.kind === 'secondary') {
+        tabs = <TabsContext.Provider value={{kind: 'secondary'}}>
+            <TabsSecondary {...props} />
+        </TabsContext.Provider>
+
+    } else {
+        tabs = <TabsContext.Provider value={{kind: null}}>
+            <TabsPrimary {...props} />
+        </TabsContext.Provider>
+    }
+
+    return <TabsAnalytics>
+        {tabs}
+    </TabsAnalytics>
+}
+
+Tabs.Item = function TabsItem(props: any) {
+    const {kind} = useContext(TabsContext)
+
+    if (kind === 'secondary') {
+        return <TabsSecondary.Item {...props} />
+    }
+
+    return <TabsPrimary.Item {...props} />
+}
+//@ts-ignore TODO: fix ts
+Tabs.Item.displayName = "Tabs.Item"
+
+Tabs.Content = function TabsContent(props: any) {
+    const {kind} = useContext(TabsContext)
+
+    if (kind === 'secondary') {
+        return <TabsSecondary.Content {...props} />
+    }
+
+    return <TabsPrimary.Content {...props} />
+}
+//@ts-ignore TODO: fix ts
+Tabs.Content.displayName = "Tabs.Content"

package/src/writer/Tabs/TabsAnalytics.tsx

@@ -0,0 +1,25 @@
+import React, {createContext, useContext, useRef, useState} from "react";
+
+const TabsAnalyticsContext = createContext<{
+    value: string
+    setValue: (value: string) => void
+    tabsRef: React.RefObject<HTMLElement | null>
+}>({
+    value: "",
+    setValue: () => {
+    },
+    tabsRef: {current: null}
+})
+
+export function TabsAnalytics({children}: { children: React.ReactNode }) {
+    const [value, setValue] = useState("")
+    const tabsRef = useRef<HTMLElement | null>(null)
+
+    return <TabsAnalyticsContext value={{value, setValue, tabsRef}}>
+        {children}
+    </TabsAnalyticsContext>
+}
+
+export function useTabsAnalytics() {
+    return useContext(TabsAnalyticsContext)
+}

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

@@ -0,0 +1,187 @@
+import { css } from "@linaria/core"
+
+export const TabsPrimaryHost = css`
+    @layer defaults {
+        display: block;
+        
+        [part="nav"] {
+            align-items: center;
+            display: flex;
+            height: 42px;
+            background-color: var(--xyd-tabs-primary-bgcolor);
+            border-bottom: 1px solid var(--xyd-tabs-primary-border-color);
+            z-index: 99;
+            overflow-x: auto;
+
+            &[data-kind="secondary"] {
+                border-bottom: none;
+                border-radius: 8px;
+                padding: 4px;
+                background-color: var(--xyd-tabs-bgcolor);
+            }
+        }
+
+        [part="list"] {
+            display: flex;
+            gap: 10px;
+            height: 100%;
+            color: var(--xyd-tabs-primary-list-color);
+            list-style: none;
+            padding: 0;
+            white-space: nowrap;
+
+            [data-kind="secondary"] & {
+                gap: 4px;
+            }
+        }
+
+        [part="item"] {
+            height: 100%;
+            position: relative;
+
+            a, button {
+                height: 100%;
+            }
+
+            &[data-state="active"] {
+                a {
+                    border-bottom-color: var(--xyd-tabs-primary-color--active);
+                }
+
+                [data-kind="secondary"] & a {
+                    border-bottom-color: transparent;
+                    color: var(--xyd-tabs-color--active);
+                    background-color: var(--xyd-tabs-bgcolor--active);
+                    box-shadow: 0 1px 2px 0 var(--xyd-tabs-shadow-color--active);
+                }
+            }
+
+            &[data-state="inactive"] {
+                a, button {
+                    color: unset;
+                }
+            }
+        }
+
+        [part="link"] {
+            display: inline-flex;
+            border-bottom: 3px solid transparent;
+            text-decoration: none;
+            height: 100%;
+            padding: 10px;
+            transition: all 0.3s ease;
+            cursor: pointer;
+
+            &:hover {
+                color: var(--xyd-tabs-primary-color--active);
+            }
+
+            [data-kind="secondary"] & {
+                border-bottom: none;
+                padding: 5px 16px;
+                border-radius: 0.375rem;
+                color: var(--xyd-tabs-color);
+
+                &:hover {
+                    color: var(--xyd-tabs-color--active);
+                }
+            }
+        }
+
+        [part="content"] {
+            position: relative;
+            overflow: hidden;
+
+            [data-kind="secondary"] & {
+                margin-top: 16px;
+            }
+        }
+    }
+`;
+
+export const TabsPrimaryContent = css`
+    @keyframes fadeInFromRight {
+        from {
+            opacity: 0;
+            transform: translateX(75px);
+        }
+        to {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
+    @keyframes fadeOutToLeft {
+        from {
+            opacity: 1;
+            transform: translateX(0);
+        }
+        to {
+            opacity: 0;
+            transform: translateX(-75px);
+        }
+    }
+
+    @keyframes fadeInFromLeft {
+        from {
+            opacity: 0;
+            transform: translateX(-75px);
+        }
+        to {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
+    @keyframes fadeOutToRight {
+        from {
+            opacity: 1;
+            transform: translateX(0);
+        }
+        to {
+            opacity: 0;
+            transform: translateX(75px);
+        }
+    }
+
+    @layer defaults {
+        position: relative;
+        width: 100%;
+
+        &[data-state="inactive"] {
+            display: none;
+        }
+
+        /* Only apply animations when parent has data-slide="true" */
+        [data-slide="true"] & {
+            /* Forward direction (left to right) */
+
+            &[data-direction="forward"][data-state="active"] {
+                position: relative;
+                animation: fadeInFromRight 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+            }
+
+            &[data-direction="forward"][data-state="inactive"] {
+                position: absolute;
+                animation: fadeOutToLeft 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+            }
+
+            /* Backward direction (right to left) */
+
+            &[data-direction="backward"][data-state="active"] {
+                position: relative;
+                animation: fadeInFromLeft 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+            }
+
+            &[data-direction="backward"][data-state="inactive"] {
+                position: absolute;
+                animation: fadeOutToRight 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+            }
+        }
+
+        [part="child"] {
+            padding: 20px;
+            transition: all 0.3s ease;
+        }
+    }
+`;