@xyd-js/components 0.1.0-xyd.0 → 0.1.0-xyd.10

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

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

package/src/writer/Steps/Steps.tsx

@@ -1,16 +1,15 @@
 import React from "react"
 
-import {$steps} from "./Steps.styles";
+import * as cn from "./Steps.styles";
 
 export interface StepsProps {
     children: React.ReactNode;
 }
 
 export function Steps({children}: StepsProps) {
-    return <ol className={$steps.host}>
+    return <ol className={cn.StepsHost}>
         {children}
     </ol>
-
 }
 
 export interface StepsItemProps {
@@ -18,7 +17,7 @@ export interface StepsItemProps {
 }
 
 Steps.Item = function StepsItem({children}: StepsItemProps) {
-    return <li className={$steps.li}>
+    return <li className={cn.StepsLi}>
         {children}
     </li>
 }

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

@@ -4,36 +4,37 @@ const colors = {
     primary: "#D1D5DB"
 }
 
-export const $table = {
-    host: css`
-        display: block;
-        overflow-x: scroll;
-
-        border-collapse: collapse;
-        border-radius: 3px;
-    `,
-    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);
-    `,
-    tr: css`
-        padding: 0;
-        margin: 0;
-        border-top-width: 1px;
-        border-color: ${colors.primary};
-    `,
-    td: css`
-        padding: 0.5rem 1rem;
-        margin: 0;
-
-        border-width: 1px;
-        border-color: ${colors.primary};
-    `
-}
+export const TableHost = css`
+    display: block;
+    overflow-x: scroll;
+
+    border-collapse: collapse;
+    border-radius: 3px;
+`;
+
+export const TableTh = css`
+    padding: 0.5rem 1rem;
+    margin: 0;
+
+    font-weight: 600;
+    border-width: 1px;
+    border-color: ${colors.primary};
+    background: rgba(234, 238, 242, 0.5);
+`;
+
+export const TableTr = css`
+    padding: 0;
+    margin: 0;
+    border-top-width: 1px;
+    border-color: ${colors.primary};
+`;
+
+export const TableTd = css`
+    padding: 0.5rem 1rem;
+    margin: 0;
+
+    border-width: 1px;
+    border-color: ${colors.primary};
+`;
 
 

package/src/writer/Table/Table.tsx

@@ -1,13 +1,13 @@
 import React from "react"
 
-import {$table} from "./Table.styles";
+import * as cn from "./Table.styles";
 
 export interface TableProps {
     children: React.ReactNode;
 }
 
 export function Table({children}: TableProps) {
-    return <table className={$table.host}>
+    return <table className={cn.TableHost}>
         {children}
     </table>
 }
@@ -17,7 +17,7 @@ export interface TableThProps {
 }
 
 Table.Th = function TableTh({children}: TableThProps) {
-    return <th className={$table.th}>
+    return <th className={cn.TableTh}>
         {children}
     </th>
 }
@@ -27,7 +27,7 @@ export interface TableTrProps {
 }
 
 Table.Tr = function TableTr({children}: TableTrProps) {
-    return <tr className={$table.tr}>
+    return <tr className={cn.TableTr}>
         {children}
     </tr>
 
@@ -38,7 +38,7 @@ export interface TableTdProps {
 }
 
 Table.Td = function TableTd({children}: TableTdProps) {
-    return <td className={$table.td}>
+    return <td className={cn.TableTd}>
         {children}
     </td>
 

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

@@ -0,0 +1,117 @@
+import {css} from "@linaria/core";
+
+const colors = {
+    primary: "#D1D5DB",
+    gray: {
+        50: "#F7F7F8",
+        100: "#ECECF1",
+        600: "#6E6E80",
+        800: "#353740",
+        900: "#202123"
+    }
+}
+
+const TableV2 = {
+    Host: css`
+        width: 100%;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    `,
+    Table: css`
+        display: table;
+        width: 100%;
+        min-width: 640px; // Ensures table doesn't get too squished
+        border-collapse: separate;
+        border-spacing: 0;
+        border: 1px solid ${colors.gray[100]};
+        border-radius: 8px;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        margin-top: 1rem;
+        overflow: hidden;
+    `,
+    Thead: css`
+        background: ${colors.gray[50]};
+    `,
+    Th: css`
+        text-align: left;
+        font-weight: 500;
+        padding: 0.5rem 1rem;
+        color: ${colors.gray[800]};
+        vertical-align: middle;
+        border-bottom: 1px solid ${colors.gray[100]};
+        white-space: nowrap;
+
+        &:first-child {
+            width: 24rem;
+            max-width: 40%;
+            border-right: 1px solid ${colors.gray[100]};
+
+            @media (max-width: 768px) {
+                width: auto;
+                min-width: 12rem;
+            }
+        }
+
+        &.numeric {
+            text-align: right;
+            font-weight: 400;
+            min-width: 5rem;
+            
+            @media (max-width: 768px) {
+                min-width: 4rem;
+            }
+        }
+    `,
+    Tr: css`
+        &:not(:last-child) {
+            border-bottom: 1px solid ${colors.gray[100]};
+        }
+    `,
+    Td: css`
+        padding: 0.5rem 1rem;
+        vertical-align: middle;
+        border-top: 1px solid ${colors.gray[100]};
+
+        &:first-child {
+            border-right: 1px solid ${colors.gray[100]};
+        }
+
+        &.numeric {
+            text-align: right;
+        }
+
+        &.muted {
+            color: ${colors.gray[600]};
+        }
+
+        @media (max-width: 768px) {
+            padding: 0.5rem;
+        }
+    `,
+    Cell: css`
+        display: flex;
+        align-items: baseline;
+        width: 100%;
+        gap: 0.5rem;
+    `,
+    CellContent: css`
+        flex: 1;
+        text-align: right;
+    `,
+    ModelCell: css`
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        white-space: nowrap;
+        color: ${colors.gray[900]};
+        
+        @media (max-width: 768px) {
+            font-size: 0.8125rem;
+        }
+    `
+} 
+
+export default {
+    TableV2
+}

package/src/writer/Table/TableV2.tsx

@@ -0,0 +1,83 @@
+import React from "react"
+
+import cn from "./TableV2.styles";
+
+export interface TableV2Props {
+    children: React.ReactNode;
+    className?: string;
+}
+
+export function TableV2({children, className}: TableV2Props) {
+    return (
+        <div className={cn.TableV2.Host}>
+            <table className={`${cn.TableV2.Table} ${className || ''}`}>
+                {children}
+            </table>
+        </div>
+    );
+}
+
+export interface TableHeadProps {
+    children: React.ReactNode;
+}
+
+TableV2.Head = function TableHead({children}: TableHeadProps) {
+    return <thead className={cn.TableV2.Thead}>
+        {children}
+    </thead>
+}
+
+export interface TableThProps {
+    children: React.ReactNode;
+    numeric?: boolean;
+}
+
+TableV2.Th = function TableTh({children, numeric}: TableThProps) {
+    return <th className={`${cn.TableV2.Th} ${numeric ? 'numeric' : ''}`}>
+        {children}
+    </th>
+}
+
+export interface TableTrProps {
+    children: React.ReactNode;
+}
+
+TableV2.Tr = function TableTr({children}: TableTrProps) {
+    return <tr className={cn.TableV2.Tr}>
+        {children}
+    </tr>
+}
+
+export interface TableTdProps {
+    children: React.ReactNode;
+    numeric?: boolean;
+    muted?: boolean;
+}
+
+TableV2.Td = function TableTd({children, numeric, muted}: TableTdProps) {
+    return <td className={`${cn.TableV2.Td} ${numeric ? 'numeric' : ''} ${muted ? 'muted' : ''}`}>
+        {children}
+    </td>
+}
+
+export interface TableCellProps {
+    children: React.ReactNode;
+}
+
+TableV2.Cell = function TableCell({children}: TableCellProps) {
+    return <div className={cn.TableV2.Cell}>
+        <div className={cn.TableV2.CellContent}>
+            {children}
+        </div>
+    </div>
+}
+
+export interface TableModelCellProps {
+    children: React.ReactNode;
+}
+
+TableV2.ModelCell = function TableModelCell({children}: TableModelCellProps) {
+    return <div className={cn.TableV2.ModelCell}>
+        {children}
+    </div>
+} 

package/src/writer/Table/index.ts

@@ -8,3 +8,7 @@ export type {
     TableTrProps,
     TableTdProps
 } from "./Table"
+
+export {
+    TableV2
+} from "./TableV2"

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

@@ -1,77 +1,74 @@
 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 TabsSampleHost = css`
+    position: relative;
+    max-width: 100%;
+`;
 
-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 TabsSampleButtons = css`
+    display: flex;
+    align-items: center;
+`;
+
+export const TabsSampleContent = css`
+    margin-top: 16px;
+`;
+
+export const TabsArrowHost = css`
+    padding: 8px;
+    background-color: #ffffff;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+`;
 
-export const $scroller = {
-    host: css`
-        overflow-x: auto;
-        flex-grow: 1;
-    `,
-    container: css`
-        display: inline-flex;
-        gap: 4px;
+export const TabsArrowIcon = css`
+    width: 16px;
+    height: 16px;
+`;
 
-        border-radius: 8px;
-        background-color: #F3F4F6;
-        
-        padding: 4px;
-        margin-left: 4px;
-    `
-}
+export const TabsScrollerHost = css`
+    overflow-x: auto;
+    flex-grow: 1;
+`;
 
-export const $button = {
-    host: css`
-        padding: 0.5rem 1rem;
+export const TabsScrollerContainer = css`
+    display: inline-flex;
+    gap: 4px;
 
-        border-radius: 0.375rem;
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-        font-weight: 500;
-        white-space: nowrap;
+    border-radius: 8px;
+    background-color: #F3F4F6;
+    
+    padding: 4px;
+    margin-left: 4px;
+`;
 
-        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;
+export const TabsButtonHost = css`
+    padding: 0.5rem 1rem;
 
-        color: #6B7280;
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+    white-space: nowrap;
 
-        &:hover {
-            color: #111827;
-        }
+    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;
 
-        &[data-state="active"] {
-            color: #111827;
-            background-color: #ffffff;
-            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-        }
-    `,
-    $$active: css`
+    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);
-    `
-}
+    }
+`;
+
+export const TabsButtonActive = css`
+    color: #111827;
+    background-color: #ffffff;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+`;

package/src/writer/Tabs/Tabs.tsx

@@ -2,12 +2,7 @@ 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";
+import * as cn from "./Tabs.styles";
 
 export interface TabsProps {
     children: React.ReactNode;
@@ -45,23 +40,23 @@ export function Tabs({children, items, tabIndex}: TabsProps) {
 
     return (
         <RadixTabs.Root asChild value={value} onValueChange={setActiveTab}>
-            <div className={$sample.host}>
-                <div className={$sample.buttons}>
+            <div className={cn.TabsSampleHost}>
+                <div className={cn.TabsSampleButtons}>
                     {showLeftArrow && (
                         <button
                             onClick={() => scroll('left')}
-                            className={$arrow.host}
+                            className={cn.TabsArrowHost}
                         >
-                            <ChevronLeft className={$arrow.icon}/>
+                            <ChevronLeft className={cn.TabsArrowIcon}/>
                         </button>
                     )}
 
                     <div
                         ref={scrollContainerRef}
                         onScroll={handleScroll}
-                        className={$scroller.host}
+                        className={cn.TabsScrollerHost}
                     >
-                        <div className={$scroller.container}>
+                        <div className={cn.TabsScrollerContainer}>
                             <RadixTabs.List>
                                 {items.map((item, index) => <TabsItem key={index} value={item}>
                                         {item}
@@ -74,14 +69,14 @@ export function Tabs({children, items, tabIndex}: TabsProps) {
                     {showRightArrow && (
                         <button
                             onClick={() => scroll('right')}
-                            className={$arrow.host}
+                            className={cn.TabsArrowHost}
                         >
-                            <ChevronRight className={$arrow.icon}/>
+                            <ChevronRight className={cn.TabsArrowIcon}/>
                         </button>
                     )}
                 </div>
 
-                <div className={$sample.content}>
+                <div className={cn.TabsSampleContent}>
                     {children}
                 </div>
             </div>
@@ -91,7 +86,7 @@ export function Tabs({children, items, tabIndex}: TabsProps) {
 
 function TabsItem({children, value}) {
     return <RadixTabs.Trigger asChild value={value}>
-        <button className={`${$button.host}`}>
+        <button className={`${cn.TabsButtonHost}`}>
             {children}
         </button>
     </RadixTabs.Trigger>