Merge branch 'main' of https://github.com/ClickHouse/click-ui into gj…

…-add-digital-ocean
ClickHouse · Dec 16, 2024 · eb1beab · eb1beab
2 parents 6052669 + 7a3b311
commit eb1beab
Show file tree

Hide file tree

Showing 11 changed files with 170 additions and 75 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.177",
+  "version": "0.0.178",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",

diff --git a/src/components/CodeBlock/CodeBlock.tsx b/src/components/CodeBlock/CodeBlock.tsx
@@ -7,7 +7,7 @@ import { EmptyButton } from "../commonElement";
 import sql from "react-syntax-highlighter/dist/cjs/languages/hljs/sql";
 import bash from "react-syntax-highlighter/dist/cjs/languages/hljs/bash";
 import json from "react-syntax-highlighter/dist/cjs/languages/hljs/json";
-import tsx from "react-syntax-highlighter/dist/cjs/languages/prism/typescript";
+import tsx from "react-syntax-highlighter/dist/cjs/languages/hljs/typescript"
 
 SyntaxHighlighter.registerLanguage("sql", sql);
 SyntaxHighlighter.registerLanguage("bash", bash);

diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
@@ -1,10 +1,10 @@
 import { useEffect, useId, useState } from "react";
 import { isSameDate, useCalendar, UseCalendarOptions } from "@h6s/calendar";
+import { styled } from "styled-components";
 import Dropdown from "../Dropdown/Dropdown";
 import { Icon } from "../Icon/Icon";
 import { InputElement, InputWrapper } from "../Input/InputWrapper";
 import { Container } from "../Container/Container";
-import styled from "styled-components";
 import { IconButton } from "../IconButton/IconButton";
 
 const locale = "en-US";

diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
@@ -8,9 +8,7 @@ import {
 } from "react";
 import { Icon, IconName } from "@/components";
 import { styled } from "styled-components";
-
-type TextSize = "xs" | "sm" | "md" | "lg";
-type TextWeight = "normal" | "medium" | "semibold" | "bold";
+import { linkStyles, TextSize, TextWeight } from "./common";
 
 export interface LinkProps<T extends ElementType = "a"> {
   size?: TextSize;
@@ -22,33 +20,7 @@ export interface LinkProps<T extends ElementType = "a"> {
 }
 
 const CuiLink = styled.a<{ $size: TextSize; $weight: TextWeight }>`
-  font: ${({ $size, $weight = "normal", theme }) =>
-    theme.typography.styles.product.text[$weight][$size]};
-  color: ${({ theme }) => theme.click.global.color.text.link.default};
-  margin: 0;
-  text-decoration: none;
-  display: inline-flex;
-  gap: ${({ $size, theme }) =>
-    $size === "xs" || $size === "sm"
-      ? theme.click.link.space.sm.gap
-      : theme.click.link.space.md.gap};
-  margin-right: ${({ $size, theme }) =>
-    $size === "xs" || $size === "sm"
-      ? theme.click.link.space.sm.gap
-      : theme.click.link.space.md.gap};
-  align-items: center;
-
-  &:hover,
-  &:focus {
-    color: ${({ theme }) => theme.click.global.color.text.link.hover};
-    transition: ${({ theme }) => theme.transition.default};
-    text-decoration: underline;
-    cursor: pointer;
-  }
-
-  &:visited {
-    color: ${({ theme }) => theme.click.global.color.text.link.default};
-  }
+  ${linkStyles}
 `;
 
 const IconWrapper = styled.span<{ $size: TextSize }>`

diff --git a/src/components/Link/common.ts b/src/components/Link/common.ts
@@ -0,0 +1,36 @@
+import { css } from "styled-components";
+
+export type TextSize = "xs" | "sm" | "md" | "lg";
+export type TextWeight = "normal" | "medium" | "semibold" | "bold";
+
+export type StyledLinkProps = { $size: TextSize; $weight: TextWeight };
+
+export const linkStyles = css<StyledLinkProps>`
+  font: ${({ $size, $weight = "normal", theme }) =>
+    theme.typography.styles.product.text[$weight][$size]};
+  color: ${({ theme }) => theme.click.global.color.text.link.default};
+  margin: 0;
+  text-decoration: none;
+  display: inline-flex;
+  gap: ${({ $size, theme }) =>
+    $size === "xs" || $size === "sm"
+      ? theme.click.link.space.sm.gap
+      : theme.click.link.space.md.gap};
+  margin-right: ${({ $size, theme }) =>
+    $size === "xs" || $size === "sm"
+      ? theme.click.link.space.sm.gap
+      : theme.click.link.space.md.gap};
+  align-items: center;
+
+  &:hover,
+  &:focus {
+    color: ${({ theme }) => theme.click.global.color.text.link.hover};
+    transition: ${({ theme }) => theme.transition.default};
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  &:visited {
+    color: ${({ theme }) => theme.click.global.color.text.link.default};
+  }
+`;
diff --git a/src/components/Panel/Panel.stories.tsx b/src/components/Panel/Panel.stories.tsx
@@ -7,6 +7,47 @@ export default {
   title: "Display/Panel",
   tags: ["panel", "autodocs"],
   argTypes: {
+    cursor: {
+      control: "select",
+      options: [
+        "auto",
+        "default",
+        "none",
+        "context-menu",
+        "help",
+        "pointer",
+        "progress",
+        "wait",
+        "cell",
+        "crosshair",
+        "text",
+        "vertical-text",
+        "alias",
+        "copy",
+        "move",
+        "no-drop",
+        "not-allowed",
+        "grab",
+        "grabbing",
+        "e-resize",
+        "n-resize",
+        "ne-resize",
+        "nw-resize",
+        "s-resize",
+        "se-resize",
+        "sw-resize",
+        "w-resize",
+        "ew-resize",
+        "ns-resize",
+        "nesw-resize",
+        "nwse-resize",
+        "col-resize",
+        "row-resize",
+        "all-scroll",
+        "zoom-in",
+        "zoom-out",
+      ],
+    },
     padding: {
       options: ["none", "xs", "sm", "md", "lg", "xl"],
       control: { type: "select" },
@@ -20,17 +61,18 @@ export default {
 
 export const Playground = {
   args: {
-    orientation: "vertical",
+    alignItems: "start",
     color: "default",
-    padding: "md",
+    cursor: "auto",
+    fillHeight: false,
+    fillWidth: false,
     hasBorder: true,
-    radii: "sm",
     hasShadow: true,
-    fillWidth: false,
     height: "",
-    fillHeight: false,
+    orientation: "vertical",
+    padding: "md",
+    radii: "sm",
     width: "50%",
-    alignItems: "start",
     children: (
       <>
         <Title type="h3">Example panel title</Title>

diff --git a/src/components/Panel/Panel.tsx b/src/components/Panel/Panel.tsx
@@ -1,4 +1,4 @@
-import { Orientation } from "@/components";
+import { CursorOptions, Orientation } from "@/components";
 import { HTMLAttributes } from "react";
 import { styled } from "styled-components";
 
@@ -8,69 +8,73 @@ export type PanelRadii = "none" | "sm" | "md" | "lg";
 type AlignItemsOption = "start" | "center" | "end";
 
 export interface PanelProps extends HTMLAttributes<HTMLDivElement> {
+  alignItems?: AlignItemsOption;
+  children?: React.ReactNode;
+  color?: PanelColor;
+  cursor?: CursorOptions;
+  fillHeight?: boolean;
+  fillWidth?: boolean;
+  gap?: PanelPadding;
   hasBorder?: boolean;
   hasShadow?: boolean;
-  color?: PanelColor;
+  height?: string;
+  orientation?: Orientation;
   padding?: PanelPadding;
-  gap?: PanelPadding;
-  children?: React.ReactNode;
   radii?: PanelRadii;
-  orientation?: Orientation;
   width?: string;
-  fillWidth?: boolean;
-  height?: string;
-  fillHeight?: boolean;
-  alignItems?: AlignItemsOption;
 }
 
 export const Panel = ({
-  hasBorder,
-  hasShadow,
+  alignItems = "center",
+  children,
   color,
-  padding,
+  cursor,
+  fillHeight,
+  fillWidth,
   gap,
-  children,
+  hasBorder,
+  hasShadow,
+  height,
   orientation = "horizontal",
-  width,
+  padding,
   radii = "sm",
-  fillWidth,
-  height,
-  fillHeight,
-  alignItems = "center",
+  width,
   ...props
 }: PanelProps) => (
   <Wrapper
+    $alignItems={alignItems}
+    $color={color}
+    $cursor={cursor}
+    $fillHeight={fillHeight}
+    $fillWidth={fillWidth}
+    $gap={gap}
     $hasBorder={hasBorder}
     $hasShadow={hasShadow}
-    $color={color}
+    $height={height}
+    $orientation={orientation}
     $padding={padding}
-    $gap={gap}
-    $width={width}
     $radii={radii}
-    $orientation={orientation}
-    $fillWidth={fillWidth}
-    $height={height}
-    $fillHeight={fillHeight}
-    $alignItems={alignItems}
+    $width={width}
     {...props}
   >
     {children}
   </Wrapper>
 );
 
 const Wrapper = styled.div<{
-  $hasBorder?: boolean;
-  $hasShadow?: boolean;
+  $alignItems?: AlignItemsOption;
   $color?: PanelColor;
-  $padding?: PanelPadding;
-  $gap?: PanelPadding;
-  $width?: string;
-  $radii?: PanelRadii;
+  $cursor?: CursorOptions;
+  $fillHeight?: boolean;
   $fillWidth?: boolean;
+  $gap?: PanelPadding;
+  $hasBorder?: boolean;
+  $hasShadow?: boolean;
   $height?: string;
-  $fillHeight?: boolean;
   $orientation?: Orientation;
-  $alignItems?: AlignItemsOption;
+  $padding?: PanelPadding;
+  $radii?: PanelRadii;
+  $width?: string;
 }>`
   display: flex;
   flex-flow: ${({ $orientation = "horizontal" }) =>
@@ -87,4 +91,5 @@ const Wrapper = styled.div<{
     $hasBorder ? `1px solid ${theme.click.global.color.stroke.default}` : "none"};
   box-shadow: ${({ $hasShadow, theme }) => ($hasShadow ? theme.shadow[1] : "none")};
   gap: ${({ $gap = "sm", theme }) => theme.click.panel.space.gap[$gap]};
+  ${({ $cursor }) => $cursor && `cursor: ${$cursor}`};
 `;
diff --git a/src/components/cursorOptions.ts b/src/components/cursorOptions.ts
@@ -0,0 +1,37 @@
+export type CursorOptions =
+  | "auto"
+  | "default"
+  | "none"
+  | "context-menu"
+  | "help"
+  | "pointer"
+  | "progress"
+  | "wait"
+  | "cell"
+  | "crosshair"
+  | "text"
+  | "vertical-text"
+  | "alias"
+  | "copy"
+  | "move"
+  | "no-drop"
+  | "not-allowed"
+  | "grab"
+  | "grabbing"
+  | "e-resize"
+  | "n-resize"
+  | "ne-resize"
+  | "nw-resize"
+  | "s-resize"
+  | "se-resize"
+  | "sw-resize"
+  | "w-resize"
+  | "ew-resize"
+  | "ns-resize"
+  | "nesw-resize"
+  | "nwse-resize"
+  | "col-resize"
+  | "row-resize"
+  | "all-scroll"
+  | "zoom-in"
+  | "zoom-out";
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -34,6 +34,7 @@ export { default as Flags } from "./icons/Flags";
 export { Grid } from "./Grid/Grid";
 export { HoverCard } from "./HoverCard/HoverCard";
 export { Link } from "./Link/Link";
+export { linkStyles } from "./Link/common";
 export { Logo } from "./Logos/Logo";
 export { NumberField } from "./Input/NumberField";
 export { PasswordField } from "./Input/PasswordField";

diff --git a/src/components/types.ts b/src/components/types.ts
@@ -58,6 +58,7 @@ export type {
   GridContextMenuItemProps,
   Rectangle,
 } from "./Grid/types";
+export type { StyledLinkProps } from "./Link/common";
 
 export type States = "default" | "active" | "disabled" | "error" | "hover";
 export type HorizontalDirection = "start" | "end";
@@ -72,6 +73,7 @@ export type { ContextMenuItemProps } from "./ContextMenu/ContextMenu";
 export type { GenericLabelProps } from "./GenericLabel/GenericLabel";
 export type { MultiAccordionProps } from "./MultiAccordion/MultiAccordion";
 export type { CheckboxVariants } from "./Checkbox/Checkbox";
+export type { CursorOptions } from "./cursorOptions";
 
 export type { IconButtonProps };
 export type { AlertProps };