feat: remove honorable from RepositoryCard

pluralsh · Oct 11, 2024 · 4cd9b0a · 4cd9b0a
1 parent 60da505
commit 4cd9b0a
Show file tree

Hide file tree

Showing 2 changed files with 134 additions and 76 deletions.
diff --git a/src/components/Flex.tsx b/src/components/Flex.tsx
@@ -7,7 +7,7 @@ import {
   forwardRef,
   memo,
 } from 'react'
-import { useTheme } from 'styled-components'
+import styled, { type DefaultTheme } from 'styled-components'
 
 type FlexBaseProps = {
   /**
@@ -45,15 +45,15 @@ type FlexBaseProps = {
     | 'space-around'
     | 'space-evenly'
 
-  gap?: string
-
+  gap?: keyof DefaultTheme['spacing']
+  padding?: keyof DefaultTheme['spacing']
   children?: ReactNode
 }
 
 type FlexProps = Omit<CSSProperties, keyof FlexBaseProps> & FlexBaseProps
 
-function FlexRef(props: FlexProps, ref: Ref<any>) {
-  const {
+function FlexRef(
+  {
     direction,
     wrap,
     basis,
@@ -62,32 +62,69 @@ function FlexRef(props: FlexProps, ref: Ref<any>) {
     align,
     justify,
     gap,
+    padding,
     children,
     ...otherProps
-  } = props
-  const theme = useTheme()
-
+  }: FlexProps,
+  ref: Ref<any>
+) {
   return (
-    <div
+    <FlexSC
       ref={ref}
-      style={{
-        display: 'flex',
-        flexDirection: direction,
-        flexWrap: typeof wrap === 'boolean' ? 'wrap' : wrap,
-        flexBasis: basis,
-        flexGrow: typeof grow === 'boolean' ? 1 : grow,
-        flexShrink: typeof shrink === 'boolean' ? 1 : shrink,
-        alignItems: align,
-        justifyContent: justify,
-        gap: (theme.spacing as any)[gap] || 0,
-        ...otherProps,
+      {...{
+        $direction: direction,
+        $wrap: wrap,
+        $basis: basis,
+        $grow: grow,
+        $shrink: shrink,
+        $align: align,
+        $justify: justify,
+        $gap: gap,
+        $padding: padding,
       }}
+      style={{ ...otherProps }}
     >
       {children}
-    </div>
+    </FlexSC>
   )
 }
 
+const FlexSC = styled.div<{
+  $direction?: FlexProps['direction']
+  $wrap?: FlexProps['wrap']
+  $basis?: FlexProps['basis']
+  $grow?: FlexProps['grow']
+  $shrink?: FlexProps['shrink']
+  $align?: FlexProps['align']
+  $justify?: FlexProps['justify']
+  $gap?: FlexProps['gap']
+  $padding?: FlexProps['padding']
+}>(
+  ({
+    theme,
+    $direction,
+    $wrap,
+    $basis,
+    $grow,
+    $shrink,
+    $align,
+    $justify,
+    $gap,
+    $padding,
+  }) => ({
+    display: 'flex',
+    flexDirection: $direction,
+    flexWrap: typeof $wrap === 'boolean' ? 'wrap' : $wrap,
+    flexBasis: $basis,
+    flexGrow: typeof $grow === 'boolean' ? 1 : $grow,
+    flexShrink: typeof $shrink === 'boolean' ? 1 : $shrink,
+    alignItems: $align,
+    justifyContent: $justify,
+    gap: theme.spacing[$gap] || 0,
+    padding: theme.spacing[$padding] || 0,
+  })
+)
+
 const BaseFlex = forwardRef(FlexRef)
 
 const Flex = memo(BaseFlex)

diff --git a/src/components/RepositoryCard.tsx b/src/components/RepositoryCard.tsx
@@ -1,4 +1,3 @@
-import { Div, type DivProps, Flex, H1, H3, P, Span } from 'honorable'
 import {
   type ComponentProps,
   type ReactNode,
@@ -11,12 +10,13 @@ import styled, { useTheme } from 'styled-components'
 import Chip from './Chip'
 import PadlockLockedIcon from './icons/PadlockLockedIcon'
 import VerifiedIcon from './icons/VerifiedIcon'
-import Card from './Card'
+import Card, { type CardProps } from './Card'
 import RocketIcon from './icons/RocketIcon'
 
 import AppIcon from './AppIcon'
+import Flex from './Flex'
 
-type RepositoryCardProps = DivProps & {
+type RepositoryCardProps = CardProps & {
   title?: string
   publisher?: string
   priv?: boolean
@@ -107,15 +107,17 @@ function RepositoryCardRef(
     <Card
       ref={ref}
       clickable
-      flexDirection="column"
-      paddingTop={
-        featuredLabel ? theme.spacing.large + theme.spacing.medium : 'large'
-      }
-      paddingRight="large"
-      paddingBottom="large"
-      paddingLeft="large"
-      width="100%"
-      position="relative"
+      style={{
+        flexDirection: 'column',
+        paddingTop: featuredLabel
+          ? theme.spacing.large + theme.spacing.medium
+          : theme.spacing.large,
+        paddingRight: theme.spacing.large,
+        paddingBottom: theme.spacing.large,
+        paddingLeft: theme.spacing.large,
+        width: '100%',
+        position: 'relative',
+      }}
       {...props}
     >
       {featuredLabel && <FeaturedBorder>{featuredLabel}</FeaturedBorder>}
@@ -144,21 +146,16 @@ function RepositoryCardRef(
             )}
             <Flex
               direction="row"
-              marginLeft={size === 'small' ? 'small' : 0}
+              marginLeft={size === 'small' ? theme.spacing.small : 0}
               width="100%"
               align="flex-start"
               justify="space-between"
             >
               <Flex direction="column">
-                <H1
-                  color="text"
-                  {...(variant === 'marketing'
-                    ? featuredLabel
-                      ? { title2: true }
-                      : { subtitle1: true }
-                    : size === 'large'
-                    ? { title1: true }
-                    : { title2: true })}
+                <HeaderSC
+                  $variant={variant}
+                  $featuredLabel={!!featuredLabel}
+                  $size={size}
                 >
                   {title}
                   {!!verified && (
@@ -170,22 +167,19 @@ function RepositoryCardRef(
                       left={4}
                     />
                   )}
-                </H1>
-                <H3
-                  body2
-                  {...(variant === 'marketing' && !featuredLabel
-                    ? { caption: true }
-                    : { body2: true })}
-                  color="text-xlight"
-                  marginBottom={size === 'large' ? 'small' : 0}
+                </HeaderSC>
+                <SubheaderSC
+                  $variant={variant}
+                  $featuredLabel={!!featuredLabel}
+                  $size={size}
                 >
                   {publisher}
-                </H3>
+                </SubheaderSC>
               </Flex>
               <Flex
                 justifyContent="end"
                 flexGrow={1}
-                marginLeft="medium"
+                marginLeft={theme.spacing.medium}
                 gap="small"
                 alignItems="center"
               >
@@ -209,25 +203,11 @@ function RepositoryCardRef(
               </Flex>
             </Flex>
           </Flex>
-          {description && (
-            <P
-              body2
-              marginTop="xsmall"
-              color="text-light"
-              style={{
-                display: '-webkit-box',
-                WebkitLineClamp: '2',
-                WebkitBoxOrient: 'vertical',
-                overflow: 'hidden',
-              }}
-            >
-              {description}
-            </P>
-          )}
-          <Div flexGrow={1} />
+          {description && <DescriptionSC>{description}</DescriptionSC>}
+          <div style={{ flexGrow: 1 }} />
           {(trending || tags?.length > 0) && (
             <Flex
-              marginTop="medium"
+              marginTop={theme.spacing.medium}
               gap="xsmall"
               flexWrap="wrap"
             >
@@ -237,12 +217,7 @@ function RepositoryCardRef(
                   hue="lighter"
                 >
                   <RocketIcon color="action-link-inline" />
-                  <Span
-                    color="action-link-inline"
-                    marginLeft="xxsmall"
-                  >
-                    Trending
-                  </Span>
+                  <SpanSC>Trending</SpanSC>
                 </Chip>
               )}
               {tags
@@ -265,6 +240,52 @@ function RepositoryCardRef(
   )
 }
 
+const HeaderSC = styled.h1<{
+  $variant?: RepositoryCardProps['variant']
+  $featuredLabel?: boolean
+  $size?: RepositoryCardProps['size']
+}>(({ theme, $variant, $featuredLabel, $size }) => ({
+  margin: 0,
+  color: theme.colors.text,
+  ...($variant === 'marketing'
+    ? $featuredLabel
+      ? { ...theme.partials.text.title2 }
+      : { ...theme.partials.text.subtitle1 }
+    : $size === 'large'
+    ? { ...theme.partials.text.title1 }
+    : { ...theme.partials.text.title2 }),
+}))
+
+const SubheaderSC = styled.h3<{
+  $variant?: RepositoryCardProps['variant']
+  $featuredLabel?: boolean
+  $size?: RepositoryCardProps['size']
+}>(({ theme, $variant, $featuredLabel, $size }) => ({
+  margin: 0,
+  ...theme.partials.text.body2,
+  color: theme.colors['text-xlight'],
+  marginBottom: $size === 'large' ? theme.spacing.small : 0,
+  ...($variant === 'marketing' && !$featuredLabel
+    ? { ...theme.partials.text.caption }
+    : {}),
+}))
+
+const SpanSC = styled.span(({ theme }) => ({
+  color: theme.colors['action-link-inline'],
+  marginLeft: theme.spacing.xxsmall,
+}))
+
+const DescriptionSC = styled.p(({ theme }) => ({
+  ...theme.partials.text.body2,
+  margin: 0,
+  marginTop: theme.spacing.xsmall,
+  color: theme.colors['text-light'],
+  display: '-webkit-box',
+  WebkitLineClamp: '2',
+  WebkitBoxOrient: 'vertical',
+  overflow: 'hidden',
+}))
+
 const RepositoryCard = forwardRef(RepositoryCardRef)
 
 export default RepositoryCard