Tweakd dark mode of PaginationItem component

Added dark mode storybook component
mahyarkarimi · Dec 27, 2023 · de73dcf · de73dcf
1 parent 88fe269
commit de73dcf
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chakra-pagination",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -19,6 +19,10 @@
     "paginator",
     "pagination"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mahyarkarimi/chakra-pagination.git"
+  },
   "author": "Mahyar Karimi",
   "license": "MIT",
   "peerDependencies": {

diff --git a/src/components/Pagination.stories.tsx b/src/components/Pagination.stories.tsx
@@ -1,12 +1,24 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Pagination as PaginationComponent } from './Pagination';
 import { useState } from 'react';
-import { ChakraProvider } from '@chakra-ui/react';
+import { Box, ChakraProvider, ColorModeScript, DarkMode, useColorMode } from '@chakra-ui/react';
+import { extendTheme } from '@chakra-ui/react'
+
+const decorators = [
+  (Story, context) => {
+    return (
+      <ChakraProvider>
+        <Story />
+      </ChakraProvider>
+    );
+  }
+];
 
 const meta = {
   component: PaginationComponent,
+  decorators
 } satisfies Meta<typeof PaginationComponent>;
 
 export default meta;
@@ -17,12 +29,39 @@ export const Pagination: Story = {
     colorScheme: 'teal',
     total: 100
   },
-  render: ({ colorScheme, total, ...props}) => {
+  parameters: {
+    backgrounds: { default: 'light' },
+  },
+  render: ({ colorScheme, total, ...props }) => {
     const [page, setPage] = useState(1);
+    const { setColorMode } = useColorMode();
+
+    useEffect(() => {
+      setColorMode('light')
+    }, []);
+    return (
+      <PaginationComponent {...props} currentPage={page} onPageChange={setPage} total={total} colorScheme={colorScheme} />
+    )
+  }
+};
+
+export const DarkPagination: Story = {
+  args: {
+    colorScheme: 'teal',
+    total: 55
+  },
+  parameters: {
+    backgrounds: { default: 'dark' },
+  },
+  render: ({ colorScheme, total, ...props }) => {
+    const { setColorMode } = useColorMode();
+    const [page, setPage] = useState(1);
+
+    useEffect(() => {
+      setColorMode('dark')
+    }, []);
     return (
-        <ChakraProvider>
-            <PaginationComponent currentPage={page} onPageChange={setPage} total={total} colorScheme={colorScheme} />
-        </ChakraProvider>
+      <PaginationComponent  {...props} currentPage={page} onPageChange={setPage} total={total} colorScheme={colorScheme} />
     )
   }
 };
diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Stack, Button, Text, ThemeTypings } from '@chakra-ui/react';
+import { Stack, Button, Text, ThemeTypings, useColorModeValue } from '@chakra-ui/react';
 import { usePagination } from './usePagination';
 
 type PaginationItemProps = {
@@ -19,6 +19,8 @@ type PaginationProps = {
 };
 
 function PaginationItem({ isCurrent = false, page, onPageChange, colorScheme }: PaginationItemProps) {
+    const value = useColorModeValue(`${colorScheme}.100`, `${colorScheme}.800`)
+
     if (isCurrent) {
         return (
             <Button
@@ -42,10 +44,9 @@ function PaginationItem({ isCurrent = false, page, onPageChange, colorScheme }:
             size='sm'
             fontSize='xs'
             width='4'
-            bg='gray.200'
             textColor={colorScheme}
             _hover={{
-                bg: `${colorScheme}.100`,
+                bg: value,
             }}
             onClick={() => onPageChange(page)}
         >