Styled components changes

centrifuge · Aug 21, 2024 · 1d663b2 · 1d663b2
1 parent a2c6a57
commit 1d663b2
Show file tree

Hide file tree

Showing 14 changed files with 81 additions and 71 deletions.
diff --git a/centrifuge-app/src/components/TextLink.tsx b/centrifuge-app/src/components/TextLink.tsx
@@ -31,10 +31,9 @@ export const TextLink = styled.span`
     }
   }
 `
+export const RouterTextLink = (props: any) => <TextLink as={Link} {...props} />
+export const ButtonTextLink = (props: any) => <TextLink as="button" {...props} />
 
-export const RouterTextLink = TextLink.withComponent(Link)
-
-export const ButtonTextLink = TextLink.withComponent('button')
 ButtonTextLink.defaultProps = {
   type: 'button',
 }

diff --git a/fabric/src/components/Accordion/index.tsx b/fabric/src/components/Accordion/index.tsx
@@ -8,6 +8,10 @@ import { Text } from '../Text'
 export type AccordionProps = BoxProps & {
   items: { title: React.ReactNode; body: React.ReactNode }[]
 }
+interface AccordionEntryProps extends Omit<BoxProps, 'title'> {
+  title: React.ReactNode
+  body: React.ReactNode
+}
 
 const Root = styled(Box)`
   list-style: none;
@@ -33,7 +37,6 @@ const Toggle = styled(Shelf)`
 export function Accordion({ items, ...boxProps }: AccordionProps) {
   return (
     <Root
-      as="ul"
       pl={0}
       aria-label="Accordion Control Group Buttons"
       borderRadius="card"
@@ -50,12 +53,12 @@ export function Accordion({ items, ...boxProps }: AccordionProps) {
   )
 }
 
-function AccordionEntry({ title, body, ...boxProps }: AccordionProps['items'][number] & BoxProps) {
+function AccordionEntry({ title, body, ...boxProps }: AccordionEntryProps) {
   const [open, setOpen] = React.useState(false)
   const id = React.useId()
 
   return (
-    <Box as="li" borderStyle="solid" borderWidth={0} borderColor="borderPrimary" {...boxProps}>
+    <Box as="li" borderStyle="solid" borderWidth={0} borderColor="borderPrimary" {...(boxProps as any)}>
       <Toggle
         as="button"
         id={`accordion-control-${id}`}

diff --git a/fabric/src/components/Banner/index.tsx b/fabric/src/components/Banner/index.tsx
@@ -1,6 +1,6 @@
 import { useModal, useOverlay } from '@react-aria/overlays'
 import * as React from 'react'
-import { useTheme } from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 import { IconX } from '../../icon'
 import { Button } from '../Button'
 import { Shelf } from '../Shelf'
@@ -14,6 +14,10 @@ type BannerProps = {
   children?: React.ReactNode
 }
 
+const StyledText = styled(Text)`
+  padding-right: 12px;
+`
+
 export function Banner({ children, title, ...props }: BannerProps) {
   const theme = useTheme()
   const ref = React.useRef<HTMLDivElement>(null)
@@ -54,9 +58,9 @@ export function Banner({ children, title, ...props }: BannerProps) {
             style={{ marginLeft: 'auto' }}
           />
         </Shelf>
-        <Text variant="body1" color={theme.colors.textInverted} style={{ paddingRight: '12px' }}>
+        <StyledText variant="body1" color={theme.colors.textInverted}>
           {children}
-        </Text>
+        </StyledText>
       </Stack>
     </Shelf>
   ) : null

diff --git a/fabric/src/components/Box/index.ts b/fabric/src/components/Box/index.ts
@@ -69,7 +69,6 @@ interface SystemProps
     PositionProps,
     BleedProps,
     AspectProps {}
-
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface StyledBoxProps extends SystemProps {}
 

diff --git a/fabric/src/components/Button/WalletButton.tsx b/fabric/src/components/Button/WalletButton.tsx
@@ -8,6 +8,20 @@ import { Shelf } from '../Shelf'
 import { Text } from '../Text'
 import { VisualButton, VisualButtonProps } from './VisualButton'
 
+const StyledInteractiveText = styled(Text)`
+  overflow: hidden;
+  text-overflow: ellipsis;
+`
+
+const StyledText = styled(Text)`
+  marginleft: auto;
+`
+
+const StyledBodyText = styled(Text)<{ margin?: string | number }>`
+  margin-left: auto;
+  ${({ margin }) => margin && `margin: ${margin};`}
+`
+
 export type WalletButtonProps = Omit<
   VisualButtonProps & React.ComponentPropsWithoutRef<'button'>,
   'variant' | 'iconRight' | 'type' | 'children' | 'icon'
@@ -72,33 +86,20 @@ export function WalletButton({
         {address && alias ? (
           <Box position="relative" flex="1 1 auto">
             <Shelf position="absolute" top="0" bottom="0" left="0" width="100%" m="auto" height="30px">
-              <Text
-                fontSize={small ? 14 : 16}
-                color="textInteractive"
-                fontWeight={500}
-                style={{
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                }}
-              >
+              <StyledInteractiveText fontSize={small ? 14 : 16} color="textInteractive" fontWeight={500}>
                 {alias}
-              </Text>
+              </StyledInteractiveText>
             </Shelf>
           </Box>
         ) : (
-          <Text
-            fontSize={small ? 14 : 16}
-            color="textInteractive"
-            fontWeight={500}
-            style={{ margin: address ? 0 : 'auto' }}
-          >
+          <StyledBodyText fontSize={small ? 14 : 16} color="textInteractive" fontWeight={500}>
             {displayAddress ? truncate(displayAddress) : connectLabel}
-          </Text>
+          </StyledBodyText>
         )}
         {address && balance && (
-          <Text variant="body3" color="textInteractive" style={{ marginLeft: 'auto' }}>
+          <StyledText variant="body3" color="textInteractive">
             {balance}
-          </Text>
+          </StyledText>
         )}
       </VisualButton>
     </StyledButton>

diff --git a/fabric/src/components/CurrencyInput/index.tsx b/fabric/src/components/CurrencyInput/index.tsx
@@ -13,7 +13,7 @@ export type CurrencyInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement
     decimals?: number
   }
 
-const StyledMaxButton = styled(Box)`
+const StyledMaxButton = styled(Box).attrs({ as: 'button' })`
   padding: 0 8px;
   border: 0;
   border-radius: 12px;
@@ -29,7 +29,7 @@ const StyledMaxButton = styled(Box)`
   &:focus-visible {
     box-shadow: ${({ theme }) => theme.shadows.buttonPrimary};
   }
-`.withComponent('button')
+`
 
 StyledMaxButton.defaultProps = {
   type: 'button',

diff --git a/fabric/src/components/Divider/index.tsx b/fabric/src/components/Divider/index.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
-import { Box } from '../Box'
+import { Box, BoxProps } from '../Box'
 
-const Hr = Box.withComponent('hr')
+const Hr = styled(Box).attrs<BoxProps>({ as: 'hr' })``
 
 export const Divider = styled(Hr)`
   margin: 0;

diff --git a/fabric/src/components/ImageUpload/index.tsx b/fabric/src/components/ImageUpload/index.tsx
@@ -70,6 +70,13 @@ const Container = styled(Grid)<{ $disabled?: boolean; $active: boolean }>`
   }
 `
 
+const StyledText = styled(Text)`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  direction: rtl;
+`
+
 export type ImageUploadProps = Omit<FileUploadProps, 'file' | 'height'> & {
   file?: File | null
   requirements?: string
@@ -227,18 +234,9 @@ export function ImageUpload({
             </Stack>
             <Stack p={2} gridArea="unit" justifySelf="stretch" style={{ visibility: fileUrl ? 'visible' : 'hidden' }}>
               <Shelf px={1} pb={1} justifyContent="space-between">
-                <Text
-                  variant="body1"
-                  color={disabled ? 'textDisabled' : 'textPrimary'}
-                  style={{
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
-                    direction: 'rtl',
-                  }}
-                >
+                <StyledText variant="body1" color={disabled ? 'textDisabled' : 'textPrimary'}>
                   {curFile && (typeof curFile === 'string' ? curFile : curFile.name)}
-                </Text>
+                </StyledText>
                 <Flex display="flex" zIndex="3" bleedY={2} bleedX={2}>
                   {!disabled && <Button variant="tertiary" onClick={handleClear} icon={IconX} disabled={disabled} />}
                 </Flex>

diff --git a/fabric/src/components/InputUnit/index.tsx b/fabric/src/components/InputUnit/index.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import styled from 'styled-components'
 import { Stack } from '../Stack'
 import { Text } from '../Text'
 
@@ -24,17 +25,9 @@ export function InputUnit({ id, label, secondaryLabel, errorMessage, inputElemen
     <IdContext.Provider value={id}>
       <Stack gap={1}>
         {label && <InputLabel disabled={disabled}>{label}</InputLabel>}
-        <Text
-          variant="body2"
-          color={disabled ? 'textDisabled' : 'textPrimary'}
-          style={{
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-          }}
-        >
+        <StyledText variant="body2" color={disabled ? 'textDisabled' : 'textPrimary'}>
           {inputElement}
-        </Text>
+        </StyledText>
         {secondaryLabel && (
           <Text variant="body3" color={disabled ? 'textDisabled' : 'textSecondary'}>
             {secondaryLabel}
@@ -48,7 +41,12 @@ export function InputUnit({ id, label, secondaryLabel, errorMessage, inputElemen
 
 export function InputLabel({ children, disabled }: { children: React.ReactNode; disabled?: boolean }) {
   return (
-    <Text variant="label2" color={disabled ? 'textDisabled' : 'textSecondary'} as="label" htmlFor={useContextId()}>
+    <Text
+      variant="label2"
+      color={disabled ? 'textDisabled' : 'textSecondary'}
+      as="label"
+      htmlFor={useContextId() as string}
+    >
       {children}
     </Text>
   )
@@ -61,3 +59,9 @@ export function InputErrorMessage({ children }: { children: React.ReactNode }) {
     </Text>
   )
 }
+
+const StyledText = styled(Text)`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
diff --git a/fabric/src/components/Pagination/Pagination.tsx b/fabric/src/components/Pagination/Pagination.tsx
@@ -8,6 +8,10 @@ import { Text } from '../Text'
 import { usePaginationContext } from './PaginationContainer'
 import { PaginationState } from './usePagination'
 
+const StyledText = styled(Text)`
+  user-select: none;
+`
+
 const StyledButton = styled.button<{
   $active?: boolean
 }>(
@@ -96,11 +100,7 @@ export function Pagination({ pagination }: { pagination?: PaginationState }) {
           <IconChevronLeft />
         </Flex>
       </StyledButton>
-      {firstShown > 1 && (
-        <Text variant="interactive1" style={{ userSelect: 'none' }}>
-          …
-        </Text>
-      )}
+      {firstShown > 1 && <StyledText variant="interactive1">…</StyledText>}
       {pages.map((n) => (
         <StyledButton
           key={`pagr-nr-${n}`}
@@ -113,11 +113,7 @@ export function Pagination({ pagination }: { pagination?: PaginationState }) {
           </Text>
         </StyledButton>
       ))}
-      {lastShown < pageCount && (
-        <Text variant="interactive1" style={{ userSelect: 'none' }}>
-          …
-        </Text>
-      )}
+      {lastShown < pageCount && <StyledText variant="interactive1">…</StyledText>}
       <StyledButton onClick={() => goToNext()} disabled={!canNextPage} aria-label="next page">
         <Flex bleedX={1} bleedY={1}>
           <IconChevronRight />

diff --git a/fabric/src/components/RadioButton/index.tsx b/fabric/src/components/RadioButton/index.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import styled from 'styled-components'
+import { DefaultTheme } from 'styled-components/dist/types'
 import { Flex } from '../Flex'
 import { Shelf } from '../Shelf'
 import { Stack } from '../Stack'
@@ -8,7 +9,7 @@ import { Text } from '../Text'
 export type RadioButtonProps = React.InputHTMLAttributes<HTMLInputElement> & {
   label?: string
   errorMessage?: string
-  textStyle?: string
+  textStyle?: keyof DefaultTheme['typography']
 }
 
 export function RadioButton({ label, errorMessage, textStyle, ...radioProps }: RadioButtonProps) {

diff --git a/fabric/src/components/StatusChip/index.tsx b/fabric/src/components/StatusChip/index.tsx
@@ -27,10 +27,10 @@ const Chip = styled(Text)((props) =>
   css({
     display: 'inline-block',
     px: 1,
-    bg: `${props.backgroundColor}Bg`,
+    bg: `${String(props.backgroundColor)}Bg`,
     borderRadius: 'chip',
     whiteSpace: 'nowrap',
-    color: `${props.color}`,
+    color: `${String(props.color)}`,
   })
 )
 

diff --git a/fabric/src/components/Text/index.tsx b/fabric/src/components/Text/index.tsx
@@ -50,6 +50,7 @@ interface TextProps extends StyledTextProps {
   textOverflow?: 'ellipsis'
   as?: keyof JSX.IntrinsicElements | React.ComponentType<any>
   children?: React.ReactNode
+  htmlFor?: string
 }
 const Text = React.forwardRef<HTMLDivElement | HTMLSpanElement, TextProps>((props, ref) => {
   const isInText = useTextContext()

diff --git a/fabric/src/components/TextWithPlaceholder/TextWithPlaceholder.stories.tsx b/fabric/src/components/TextWithPlaceholder/TextWithPlaceholder.stories.tsx
@@ -1,11 +1,15 @@
 import { Meta, StoryFn } from '@storybook/react'
 import * as React from 'react'
-import { useTheme } from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 import { TextWithPlaceholder } from '.'
 import { TextVariantName } from '../../theme'
 import { Stack } from '../Stack'
 import { Text } from '../Text'
 
+const StyledTextWithPlaceholder = styled(TextWithPlaceholder)`
+  max-width: 70ch;
+`
+
 export default {
   title: 'Components/TextWithPlaceholder',
   component: TextWithPlaceholder,
@@ -19,12 +23,12 @@ const ParagraphTemplate: TextWithPlaceholderStory = (args) => (
       <TextWithPlaceholder variant="heading2" isLoading={args.isLoading}>
         Body 1
       </TextWithPlaceholder>
-      <TextWithPlaceholder variant="body1" as="p" {...args} style={{ maxWidth: '70ch' }}>
+      <StyledTextWithPlaceholder variant="body1" as="p" {...args}>
         Lorem ipsum dolor sit amet <Text variant="emphasized">consectetur adipisicing</Text> elit. Corporis, ex?
         Nesciunt consequatur consectetur magnam delectus distinctio ipsa{' '}
         <Text variant="emphasized">tempore maiores</Text> pariatur ipsum necessitatibus harum ea, labore quas impedit id
         iure perferendis.
-      </TextWithPlaceholder>
+      </StyledTextWithPlaceholder>
     </Stack>
   </Stack>
 )