Clickui styled import fix ssr (#474)

* Add styled component import fix * Add jsx runtime to external to reduce package size * Optimise code
ClickHouse · Sep 16, 2024 · 0467d69 · 0467d69
1 parent 32d6a1e
commit 0467d69
Show file tree

Hide file tree

Showing 79 changed files with 122 additions and 170 deletions.
diff --git a/index.html b/index.html
@@ -1,17 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link
-      href="https://fonts.googleapis.com/css?family=Inter&display=swap"
-      rel="stylesheet"
-    />
-    <title>Vite + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/logo.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css?family=Inter&display=swap" rel="stylesheet" />
+  <title>Vite + React + TS</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
 </html>
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -49,7 +49,7 @@ import { ConfirmationDialog } from "@/components/ConfirmationDialog/Confirmation
 import { ProgressBar } from "./components/ProgressBar/ProgressBar";
 import GridExample from "./examples/GridExample";
 import MultiAccordionDemo from "./components/MultiAccordion/MultiAccordionDemo";
-import styled from "styled-components";
+import { styled } from "styled-components";
 
 const BackgroundWrapper = styled.div`
   background: ${({ theme }) => theme.global.color.background.default};

diff --git a/src/Introduction.mdx b/src/Introduction.mdx
@@ -20,7 +20,8 @@ Click UI has been tested in NextJS, Gatsby, and Vite. If you run into problems u
    `npm i @clickhouse/click-ui`
    or
    `yarn add @clickhouse/click-ui`
-2. Make sure to wrap your application in the Click UI `ClickUIProvider`, without doing this, you may run into issues with styled-components. Once thats done, you'll be able to import the individual components that you want to use on each page. Here's an example an `App.tsx` in NextJS.
+2. Add styled-components and @types/react and @types/react-dom to package.json
+3. Make sure to wrap your application in the Click UI `ClickUIProvider`, without doing this, you may run into issues with styled-components. Once thats done, you'll be able to import the individual components that you want to use on each page. Here's an example an `App.tsx` in NextJS.
 
 ```
 import { Switch, Text, ThemeName, ClickUIProvider, Title } from '@clickhouse/click-ui'

diff --git a/src/assets/RightArrow/RightArrow.tsx b/src/assets/RightArrow/RightArrow.tsx
diff --git a/src/assets/S3Logo/S3Logo.tsx b/src/assets/S3Logo/S3Logo.tsx
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
@@ -1,5 +1,5 @@
 import * as RadixAccordion from "@radix-ui/react-accordion";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { IconSize } from "@/components/Icon/types";
 import { Icon, IconName, Spacer, Text } from "@/components";
 import { ReactNode } from "react";

diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
@@ -1,7 +1,7 @@
 import { Icon } from "@/components";
 import { IconName } from "@/components/Icon/types";
 import { useState, ReactNode } from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 
 type AlertType = "default" | "banner";
 type AlertSize = "small" | "medium";

diff --git a/src/components/AutoComplete/AutoComplete.tsx b/src/components/AutoComplete/AutoComplete.tsx
@@ -22,7 +22,7 @@ import {
   SearchField,
   Separator,
 } from "@/components";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { GenericMenuItem } from "../GenericMenu";
 import { useOption, useSearch } from "./useOption";
 import IconWrapper from "../IconWrapper/IconWrapper";

diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
@@ -4,7 +4,7 @@ import {
   Image,
   Root,
 } from "@radix-ui/react-avatar";
-import styled from "styled-components";
+import { styled } from "styled-components";
 
 type TextSize = "md" | "sm";
 

diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { HorizontalDirection } from "@/components";
 import { HTMLAttributes, MouseEvent, ReactNode } from "react";
 import { ImageName } from "@/components/Icon/types";

diff --git a/src/components/BigStat/BigStat.tsx b/src/components/BigStat/BigStat.tsx
@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 export type bigStatOrder = "titleTop" | "titleBottom";
 export type bigStatSize = "sm" | "lg";
 export type bigStatSpacing = "sm" | "lg";

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -1,5 +1,5 @@
 import { Icon, IconName } from "@/components";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { BaseButton } from "../commonElement";
 import React from "react";
 
@@ -41,25 +41,25 @@ export const Button = ({
     {...delegated}
   >
     {!loading && (
-        <>
-    {iconLeft && (
-      <ButtonIcon
-        name={iconLeft}
-        aria-hidden
-        size="sm"
-      />
-    )}
+      <>
+        {iconLeft && (
+          <ButtonIcon
+            name={iconLeft}
+            aria-hidden
+            size="sm"
+          />
+        )}
 
-    {label ?? children}
+        {label ?? children}
 
-    {iconRight && (
-      <ButtonIcon
-        name={iconRight}
-        aria-hidden
-        size="sm"
-      />
-    )}
-        </>
+        {iconRight && (
+          <ButtonIcon
+            name={iconRight}
+            aria-hidden
+            size="sm"
+          />
+        )}
+      </>
     )}
     {loading && (
       <LoadingIconWrapper data-testid="click-ui-loading-icon-wrapper">
@@ -68,7 +68,7 @@ export const Button = ({
           data-testid="click-ui-loading-icon"
           aria-label="loading"
         ></Icon>
-        {showLabelWithLoading? label ?? children : ""}
+        {showLabelWithLoading ? label ?? children : ""}
       </LoadingIconWrapper>
     )}
   </StyledButton>

diff --git a/src/components/ButtonGroup/ButtonGroup.tsx b/src/components/ButtonGroup/ButtonGroup.tsx
@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from "react";
-import styled, { DefaultTheme } from "styled-components";
+import { DefaultTheme, styled } from "styled-components";
 
 type ButtonGroupType = "default" | "borderless";
 

diff --git a/src/components/CardHorizontal/CardHorizontal.tsx b/src/components/CardHorizontal/CardHorizontal.tsx
@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { Icon, IconName } from "@/components";
 
 type CardColor = "default" | "muted";

diff --git a/src/components/CardPrimary/CardPrimary.tsx b/src/components/CardPrimary/CardPrimary.tsx
@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { Button, Icon, Spacer, IconName } from "@/components";
 import { Title } from "@/components/Typography/Title/Title";
 import { Text, TextAlignment } from "@/components/Typography/Text/Text";

diff --git a/src/components/CardPrimary/CardPrimaryTopBadge.tsx b/src/components/CardPrimary/CardPrimaryTopBadge.tsx
@@ -1,6 +1,6 @@
 import { Badge } from "@/components/Badge/Badge";
 import { Container } from "@/components/Container/Container";
-import styled from "styled-components";
+import { styled } from "styled-components";
 
 export const TopBadgeWrapper = styled(Container)`
   position: relative;

diff --git a/src/components/CardPromotion/CardPromotion.tsx b/src/components/CardPromotion/CardPromotion.tsx
@@ -1,5 +1,5 @@
 import { HTMLAttributes, useState } from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { Icon, IconName, Text } from "@/components";
 
 export interface CardPromotionProps extends HTMLAttributes<HTMLDivElement> {
@@ -31,12 +31,12 @@ const Wrapper = styled.div<{
 
   ${({ theme }) => `
     background: ${theme.click.card.promotion.color.background.default};
-    color: ${theme.click.card.promotion.color.text.default}; 
+    color: ${theme.click.card.promotion.color.text.default};
     border-radius: ${theme.click.card.promotion.radii.all};
     padding: ${theme.click.card.promotion.space.y} ${theme.click.card.promotion.space.x};
     gap: ${theme.click.card.promotion.space.gap};
     transition: .2s ease-in-out all;
-  
+
     &:hover {
       background: ${theme.click.card.promotion.color.background.hover};
       color: ${theme.click.card.promotion.color.text.hover};

diff --git a/src/components/CardSecondary/CardSecondary.tsx b/src/components/CardSecondary/CardSecondary.tsx
@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { Badge, Icon, IconName } from "@/components";
 import { Title } from "@/components/Typography/Title/Title";
 import { Text } from "@/components/Typography/Text/Text";
@@ -177,7 +177,10 @@ export const CardSecondary = ({
           as={disabled || !infoUrl || infoUrl.length === 0 ? "div" : "a"}
         >
           <LinkText>{infoText}</LinkText>
-          <LinkIcon size={infoIconSize} name={infoIcon} />
+          <LinkIcon
+            size={infoIconSize}
+            name={infoIcon}
+          />
         </InfoLink>
       )}
     </Wrapper>

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -1,7 +1,7 @@
 import { GenericLabel, Icon } from "@/components";
 import * as RadixCheckbox from "@radix-ui/react-checkbox";
 import { ReactNode, useId } from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { FormRoot } from "../commonElement";
 
 export interface CheckboxProps extends RadixCheckbox.CheckboxProps {

diff --git a/src/components/CodeBlock/CodeBlock.tsx b/src/components/CodeBlock/CodeBlock.tsx
@@ -1,7 +1,7 @@
 import { HTMLAttributes, useState } from "react";
 import { Light as SyntaxHighlighter, createElement } from "react-syntax-highlighter";
 import { IconButton } from "@/components";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import useColorStyle from "./useColorStyle";
 import { EmptyButton } from "../commonElement";
 import sql from "react-syntax-highlighter/dist/cjs/languages/hljs/sql";

diff --git a/src/components/CodeBlock/InlineCodeBlock.tsx b/src/components/CodeBlock/InlineCodeBlock.tsx
@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 
 const InlineContainer = styled.span`
   ${({ theme }) => `

diff --git a/src/components/Collapsible/Collapsible.tsx b/src/components/Collapsible/Collapsible.tsx
@@ -7,7 +7,7 @@ import {
   useEffect,
   forwardRef,
 } from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { Icon, HorizontalDirection, IconName } from "@/components";
 import { EmptyButton } from "../commonElement";
 import { IconWrapper } from "./IconWrapper";

diff --git a/src/components/Collapsible/IconWrapper.tsx b/src/components/Collapsible/IconWrapper.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { Icon, HorizontalDirection, IconName } from "@/components";
 
 const LabelContainer = styled.span`

diff --git a/src/components/ConfirmationDialog/ConfirmationDialog.tsx b/src/components/ConfirmationDialog/ConfirmationDialog.tsx
@@ -1,6 +1,6 @@
 import { Container, Dialog, Separator, Text } from "@/components";
 import { ReactElement, ReactNode } from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 
 type DialogPrimaryAction = "primary" | "danger";
 

diff --git a/src/components/Container/Container.stories.tsx b/src/components/Container/Container.stories.tsx
@@ -1,6 +1,6 @@
 import { Container } from "./Container";
 import { Text } from "..";
-import styled from "styled-components";
+import { styled } from "styled-components";
 
 const GridCenter = styled.div`
   display: grid;

diff --git a/src/components/Container/Container.tsx b/src/components/Container/Container.tsx
@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import {
   ComponentProps,
   ComponentPropsWithRef,

diff --git a/src/components/ContextMenu/ContextMenu.stories.tsx b/src/components/ContextMenu/ContextMenu.stories.tsx
@@ -1,6 +1,6 @@
 import { ContextMenuProps } from "@radix-ui/react-context-menu";
 import { ContextMenu } from "./ContextMenu";
-import styled from "styled-components";
+import { styled } from "styled-components";
 
 interface Props extends ContextMenuProps {
   disabled?: boolean;

diff --git a/src/components/ContextMenu/ContextMenu.tsx b/src/components/ContextMenu/ContextMenu.tsx
@@ -1,5 +1,5 @@
 import * as RightMenu from "@radix-ui/react-context-menu";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { HorizontalDirection, Icon, IconName } from "@/components";
 import { Arrow, GenericMenuItem, GenericMenuPanel } from "../GenericMenu";
 import PopoverArrow from "../icons/PopoverArrow";

diff --git a/src/components/Dialog/Dialog.stories.tsx b/src/components/Dialog/Dialog.stories.tsx
@@ -4,7 +4,7 @@ import { Dialog } from "./Dialog";
 import Separator from "../Separator/Separator";
 import { Spacer } from "../Spacer/Spacer";
 import { Button } from "../Button/Button";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { Link } from "../Link/Link";
 
 const DialogComponent = ({

diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import * as RadixDialog from "@radix-ui/react-dialog";
-import styled, { keyframes } from "styled-components";
+import { keyframes, styled } from "styled-components";
 import { Button, Icon, Spacer } from "@/components";
 import { CrossButton } from "../commonElement";
 import { ButtonProps } from "@/components/Button/Button";

diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
@@ -1,5 +1,5 @@
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { HorizontalDirection, Icon, IconName } from "@/components";
 import { Arrow, GenericMenuItem, GenericMenuPanel } from "../GenericMenu";
 import PopoverArrow from "../icons/PopoverArrow";

diff --git a/src/components/EllipsisContent/EllipsisContent.tsx b/src/components/EllipsisContent/EllipsisContent.tsx
@@ -6,7 +6,7 @@ import {
   forwardRef,
 } from "react";
 import { mergeRefs } from "@/utils/mergeRefs";
-import styled from "styled-components";
+import { styled } from "styled-components";
 
 const EllipsisContainer = styled.div`
   display: inline-block;

diff --git a/src/components/FileTabs/FileTabs.tsx b/src/components/FileTabs/FileTabs.tsx
@@ -11,7 +11,7 @@ import {
   WheelEvent,
   useRef,
 } from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { Icon, IconButton } from "@/components";
 import { IconName } from "../Icon/types";
 import {

diff --git a/src/components/Flyout/Flyout.tsx b/src/components/Flyout/Flyout.tsx
@@ -22,7 +22,7 @@ import {
   Separator,
   Spacer,
 } from "@/components";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { CrossButton } from "../commonElement";
 import { keyframes } from "styled-components";
 

diff --git a/src/components/GenericLabel/GenericLabel.tsx b/src/components/GenericLabel/GenericLabel.tsx
@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 
 export interface GenericLabelProps extends HTMLAttributes<HTMLLabelElement> {
   disabled?: boolean;

diff --git a/src/components/GenericMenu.tsx b/src/components/GenericMenu.tsx
@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 
 export const GenericMenuPanel = styled.div<{
   $type: "popover" | "dropdown-menu" | "context-menu";
@@ -112,7 +112,7 @@ export const GenericMenuItem = styled.div`
     &:visited {
       color: ${theme.click.genericMenu.item.color.text.default};
       a {
-        color: ${theme.click.genericMenu.item.color.text.default}; 
+        color: ${theme.click.genericMenu.item.color.text.default};
       }
     }
   `};