Use styled components

vocdoni · Aug 20, 2024 · 01968e2 · 01968e2
1 parent e0eafd2
commit 01968e2
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 18 deletions.
diff --git a/packages/chakra-components/src/components/Pagination.tsx b/packages/chakra-components/src/components/Pagination.tsx
@@ -1,9 +1,10 @@
 import { Button, ButtonGroup, ButtonGroupProps, ButtonProps, Input, InputProps, Text } from '@chakra-ui/react'
 import { ReactElement, useMemo, useState } from 'react'
 import { generatePath, Link as RouterLink, useLocation, useNavigate, useParams } from 'react-router-dom'
-import { usePagination, useRoutedPagination } from '@vocdoni/react-providers'
+import { useLocalize, usePagination, useRoutedPagination } from '@vocdoni/react-providers'
 import { PaginationResponse } from '@vocdoni/sdk'
-import { Trans } from 'react-i18next'
+import { useMultiStyleConfig } from '@chakra-ui/system'
+import { formatDistance } from 'date-fns'
 
 export type PaginationProps = ButtonGroupProps & {
   maxButtons?: number | false
@@ -16,17 +17,23 @@ type PaginatorButtonProps = {
   currentPage: number
 } & ButtonProps
 
-const PageButton = ({ page, currentPage, ...rest }: PaginatorButtonProps) => (
-  <Button isActive={currentPage === page} {...rest}>
-    {page + 1}
-  </Button>
-)
+const PageButton = ({ page, currentPage, ...rest }: PaginatorButtonProps) => {
+  const styles = useMultiStyleConfig('Pagination')
+  return (
+    <Button sx={styles.button} isActive={currentPage === page} {...rest}>
+      {page + 1}
+    </Button>
+  )
+}
 
-const RoutedPageButton = ({ page, currentPage, to, ...rest }: PaginatorButtonProps & { to: string }) => (
-  <Button as={RouterLink} to={to} isActive={currentPage === page} {...rest}>
-    {page + 1}
-  </Button>
-)
+const RoutedPageButton = ({ page, currentPage, to, ...rest }: PaginatorButtonProps & { to: string }) => {
+  const styles = useMultiStyleConfig('Pagination')
+  return (
+    <Button sx={styles.button} as={RouterLink} to={to} isActive={currentPage === page} {...rest}>
+      {page + 1}
+    </Button>
+  )
+}
 
 type EllipsisButtonProps = ButtonProps & {
   gotoPage: (page: number) => void
@@ -35,12 +42,14 @@ type EllipsisButtonProps = ButtonProps & {
 
 const EllipsisButton = ({ gotoPage, inputProps, ...rest }: EllipsisButtonProps) => {
   const [ellipsisInput, setEllipsisInput] = useState(false)
+  const styles = useMultiStyleConfig('Pagination')
 
   if (ellipsisInput) {
     return (
       <Input
         placeholder='Page #'
         width='50px'
+        sx={{ ...styles.button, ...styles.ellipsis }}
         {...inputProps}
         onKeyDown={(e) => {
           if (e.target instanceof HTMLInputElement && e.key === 'Enter') {
@@ -59,6 +68,7 @@ const EllipsisButton = ({ gotoPage, inputProps, ...rest }: EllipsisButtonProps)
     <Button
       as='a'
       href='#goto-page'
+      sx={{ ...styles.button, ...styles.ellipsis }}
       {...rest}
       onClick={(e) => {
         e.preventDefault()
@@ -139,6 +149,9 @@ const PaginationButtons = ({
   goToPage: GotoPageType
 } & ButtonGroupProps &
   Pick<PaginationProps, 'maxButtons' | 'buttonProps'>) => {
+  const styles = useMultiStyleConfig('Pagination')
+  const t = useLocalize()
+
   const pages = usePaginationPages(
     currentPage,
     totalPages,
@@ -153,18 +166,19 @@ const PaginationButtons = ({
 
   return (
     <>
-      <ButtonGroup flexWrap={'wrap'} rowGap={2} {...rest}>
+      <ButtonGroup sx={styles.wrapper} {...rest}>
         {totalPages === undefined ? (
           <>
             <Button
               key='previous'
               onClick={() => goToPage(currentPage - 1)}
               isDisabled={currentPage === 0}
+              sx={styles.button}
               {...buttonProps}
             >
               Previous
             </Button>
-            <Button key='next' onClick={() => goToPage(currentPage + 1)} {...buttonProps}>
+            <Button key='next' onClick={() => goToPage(currentPage + 1)} sx={styles.button} {...buttonProps}>
               Next
             </Button>
           </>
@@ -173,10 +187,10 @@ const PaginationButtons = ({
         )}
       </ButtonGroup>
       {totalItems && (
-        <Text color={'lighterText'}>
-          <Trans i18nKey={'filters.total_results'} count={totalItems}>
-            Showing a total of {{ count: totalItems }} results
-          </Trans>
+        <Text sx={styles.totalResults}>
+          {t('pagination.total_results', {
+            count: totalItems,
+          })}
         </Text>
       )}
     </>

diff --git a/packages/chakra-components/src/i18n/locales.ts b/packages/chakra-components/src/i18n/locales.ts
@@ -38,6 +38,9 @@ export const locales = {
     not_voted_in_ended_election: "You did not vote in this election and it's already finished",
   },
   loading: 'Loading...',
+  pagination: {
+    total_results: 'Showing a total of {{ count }} results',
+  },
   question_types: {
     approval_tooltip:
       "Approval voting lets you vote for as many options as you like. The one with the most votes wins. It's a simple way to show your support for all the choices you approve of.",

diff --git a/packages/chakra-components/src/theme/index.ts b/packages/chakra-components/src/theme/index.ts
@@ -9,6 +9,7 @@ import {
   QuestionsTypeBadgeTheme,
 } from './questions'
 import { ResultsTheme as ElectionResults } from './results'
+import { PaginationTheme as Pagination } from './pagination'
 import { VoteWeightTheme } from './vote'
 
 export const theme = {
@@ -19,6 +20,7 @@ export const theme = {
     ElectionSchedule,
     ElectionTitle,
     HorizontalRuler: HorizontalRulerTheme,
+    Pagination,
     ConfirmModal: ConfirmModalTheme,
     QuestionsConfirmation: QuestionsConfirmationTheme,
     QuestionsTip: QuestionsTipTheme,

diff --git a/packages/chakra-components/src/theme/pagination.ts b/packages/chakra-components/src/theme/pagination.ts
@@ -0,0 +1,27 @@
+import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system'
+
+export const PaginationAnatomy = [
+  // wrapper for buttons
+  'buttonGroup',
+  // paginator button
+  'button',
+  // total results text
+  'totalResults',
+  // Elipsis button
+  'ellipsis',
+]
+
+const { defineMultiStyleConfig: defineVoteWeightTipStyle, definePartsStyle: defineVoteWeightParts } =
+  createMultiStyleConfigHelpers(PaginationAnatomy)
+
+export const PaginationTheme = defineVoteWeightTipStyle({
+  baseStyle: defineVoteWeightParts({
+    buttonGroup: {
+      flexWrap: 'wrap',
+      rowGap: '2',
+    },
+    button: {},
+    totalResults: {},
+    elipsis: {},
+  }),
+})