@pezeshk-book/modules 0.2.7 → 0.2.9

package/pagination/pagination.tsx

@@ -1,135 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { Button, Div, Text, Select } from '@pezeshk-book/ui-kit';
-import { ArrowLeft, ArrowRight } from './icons';
-import { PaginationProps } from './pagination.props';
-import usePagination from './use-pagination';
-
-const Limits = [
-  {
-    id: '10',
-    count: 10,
-  },
-  {
-    id: '25',
-    count: 25,
-  },
-  {
-    id: '50',
-    count: 50,
-  },
-  {
-    id: '75',
-    count: 75,
-  },
-  {
-    id: '100',
-    count: 100,
-  },
-];
-export const Pagination = ({ isLoading, currentPage = 1, lastPage, getCurrentPage, previousPage, nextPage, perPage = 10, total = 0, getLimit, hasLimit = true, showTotal = true, color = 'control', variant = 'outlined', rounded = 'medium', type = 'default' }: PaginationProps) => {
-  const pageNumbers = usePagination(currentPage, lastPage, type);
-  const [limit, setLimit] = useState(perPage.toString());
-
-  useEffect(() => {
-    const position = Limits.find((value) => {
-      return perPage <= value.count;
-    });
-    setLimit(prevState => position?.id ? position?.id : prevState);
-  }, [perPage]);
-
-  const limitHandler = (event: string) => {
-    setLimit(event);
-    if (getLimit && hasLimit) {
-      getLimit(event);
-    }
-  };
-
-  return (
-    <Div className={'flex-col-reverse sm:flex-row w-full justify-between items-center gap-y-2 px-4'}>
-      <Div className={'flex justify-start items-center'}>
-        <Div className={'items-center gap-6 justify-start md:absolute'}>
-          {showTotal ? (
-            <Text color={'grey.500'} className={'text-ellipsis whitespace-nowrap'}>
-              {`نمایش ${(currentPage - 1) * parseInt(limit) + 1} تا ${lastPage === currentPage ? total : parseInt(limit) * currentPage} از ${total}`}
-            </Text>
-          ) : null}
-          {hasLimit ? (
-            <Div className={'w-20'}>
-              <Select
-                disabled={isLoading}
-                id={'id'}
-                size={'small'}
-                value={limit}
-                onChange={limitHandler}
-                text={'count'}
-                optionsList={Limits}
-                variant={'outlined'}
-                color={'control'}
-              />
-            </Div>
-          ) : null}
-        </Div>
-      </Div>
-      <ul dir={'ltr'} className={'flex flex-row gap-x-0.5 md:gap-x-2 items-center md:justify-start justify-center'}>
-        <li>
-          <Button
-            disabled={currentPage === 1 || isLoading}
-            variant={variant}
-            shape={'square'}
-            size={'small'}
-            onClick={previousPage}
-            ariaLabel={'previousPage'}
-            loading={isLoading}
-            color={color}
-            rounded={rounded}
-            className={'!px-0'}>
-            <ArrowLeft/>
-          </Button>
-        </li>
-        { type === 'default' ? pageNumbers.map((number) => {
-          return (
-            <li key={`pagination_${number}`}>
-              <Button
-                disabled={number === currentPage || number === '...' || isLoading}
-                variant={variant}
-                shape={'square'}
-                rounded={rounded}
-                size={'small'}
-                color={color}
-                className={'!px-0'}
-                ariaLabel={number.toString()}
-                onClick={() => getCurrentPage(+number)}>
-                {number}
-              </Button>
-            </li>
-          );
-        }) : null}
-        <li>
-          <Button
-            disabled={lastPage === currentPage || isLoading}
-            variant={variant}
-            shape={'square'}
-            size={'small'}
-            rounded={rounded}
-            onClick={nextPage}
-            ariaLabel={'nextPage'}
-            loading={isLoading}
-            color={color}
-            className={'!px-0'}>
-            <ArrowRight/>
-          </Button>
-        </li>
-        {type === 'simple' ? (
-          <Div className={'gap-2'}>
-            <Text typography={'sm'}>{currentPage} / {lastPage}</Text>
-            <Text typography={'sm'}>صفحه</Text>
-          </Div>
-        ) : null}
-      </ul>
-    </Div>
-  );
-};
-
-export default Pagination;

package/pagination/use-pagination.ts

@@ -1,49 +0,0 @@
-const usePagination = (currentPage: number, lastPage: number, type: 'simple' | 'default') => {
-  if (type === 'simple') {
-    return [];
-  }
-  let situation = 'NONE';
-  if (lastPage > 7) {
-    if ((currentPage <= 4)) {
-      situation = 'BEGINNING';
-    } else if (lastPage - currentPage <= 3) {
-      situation = 'END';
-    } else if (currentPage > 4 || lastPage - currentPage > 3) {
-      situation = 'MIDDLE';
-    }
-  }
-
-  const temp: Array<number | string> = [];
-
-  switch (situation) {
-    case 'BEGINNING': {
-      for (let i = 1; i <= 5; i++) {
-        temp.push(i);
-      }
-      temp.push('...', lastPage);
-      return temp;
-    }
-
-    case 'MIDDLE': {
-      temp.push(1, '...', currentPage - 1, currentPage, currentPage + 1, '...', lastPage);
-      return temp;
-    }
-
-    case 'END': {
-      for (let i = lastPage; i > (lastPage - 5); i--) {
-        temp.push(i);
-      }
-      temp.push('...', 1);
-      return temp.reverse();
-    }
-
-    default : {
-      for (let i = 1; i <= lastPage; i++) {
-        temp.push(i);
-      }
-      return temp;
-    }
-  }
-};
-
-export default usePagination;

package/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

package/slider/index.ts

@@ -1,3 +0,0 @@
-import Slider from './slider';
-
-export default Slider;

package/slider/slider.props.ts

@@ -1,39 +0,0 @@
-import { Colors } from '@pezeshk-book/ui-kit/types';
-
-export interface SliderProps {
-  children: any
-
-  delay?: number
-
-  spaceBetween?: number
-
-  slides?: number
-
-  tabletSlides?: number
-
-  mobileSlides?: number
-
-  infiniteLoop?: boolean
-
-  pauseOnMouseOver?: boolean
-
-  autoMove?: boolean
-
-  indicator?: boolean
-
-  indicatorActiveColor?: Colors
-
-  navigation?: boolean
-
-  nextNavigation?: (onClick: any) => any
-
-  prevNavigation?: (onClick: any) => any
-
-  direction?: 'ltr' | 'rtl'
-
-  rows?: number
-
-  navigationColor?: Colors
-
-  indicatorClassName?: string
-}

package/slider/slider.tsx

@@ -1,292 +0,0 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-import { SliderProps } from './slider.props';
-import { Div, Button } from '@pezeshk-book/ui-kit';
-import classNames from '../utils/class-names';
-
-const Slider = (
-  {
-    children,
-    delay = 2500,
-    spaceBetween = 0,
-    slides = 1,
-    infiniteLoop = false,
-    pauseOnMouseOver = false,
-    autoMove = true,
-    indicatorActiveColor = 'primary',
-    indicator = true,
-    navigation = true,
-    prevNavigation,
-    nextNavigation,
-    direction = 'rtl',
-    rows = 1,
-    navigationColor = 'primary',
-    tabletSlides = 1,
-    mobileSlides = 1,
-    indicatorClassName,
-  }: SliderProps) => {
-  const [showSlides, setShowSlides] = useState<number>(1);
-  const [currentIndex, setCurrentIndex] = React.useState(0);
-  const [length, setLength] = useState(Math.round(children.length / rows));
-  const [transitionEnabled, setTransitionEnabled] = useState(true);
-  const [touchPosition, setTouchPosition] = useState(null);
-  const [pause, setPause] = useState(false);
-  const [sliders, setSliders] = useState<any>([]);
-
-  const timeoutRef = React.useRef<any>(null);
-  const ref = React.useRef<any>(null);
-
-  const dir = React.useMemo(() => {
-    if (direction === 'rtl') {
-      return '+';
-    }
-    return '-';
-  }, [direction]);
-  const limit = React.useMemo(() => {
-    if (rows !== 1) {
-      return showSlides * rows >= children.length + 1;
-    }
-    return showSlides >= children.length;
-  }, [showSlides, rows, children]);
-
-  useEffect(() => {
-    if (window && window.screen) {
-      if (window.screen.width > 1024) {
-        setShowSlides(slides);
-      } else if (window.screen.width < 640) {
-        setShowSlides(mobileSlides);
-      } else { setShowSlides(tabletSlides); }
-    }
-  }, [slides, tabletSlides, mobileSlides]);
-
-  useEffect(() => {
-    let final = [];
-    for (let i = 0; i < length; i++) {
-      let output = [];
-      for (let index = i * rows; index < rows * (i + 1); index++) {
-        output.push(children[index]);
-      }
-      final.push(output);
-    }
-    setSliders(final);
-  }, [children, length, rows]);
-
-  useEffect(() => {
-    setLength(Math.round(children.length / rows));
-  }, [children, infiniteLoop, showSlides]);
-
-  useEffect(() => {
-    if (currentIndex === length - 1 || currentIndex === 0) {
-      setTransitionEnabled(true);
-    }
-  }, [currentIndex, showSlides, length]);
-  // @ts-ignore
-  useEffect(() => {
-    if (!pause && autoMove) {
-      resetTimeout();
-      timeoutRef.current = setTimeout(
-        () => next(), delay,
-      );
-
-      return () => {
-        resetTimeout();
-      };
-    }
-  }, [currentIndex, delay, pause]);
-
-  useEffect(() => {
-    if (ref.current) {
-      for (const arg of ref.current.children) {
-        arg.style.width = `calc((100% / ${showSlides}) - (${spaceBetween}px))`;
-        arg.style.gap = `${spaceBetween}px`;
-        arg.style.marginLeft = `${spaceBetween / 2}px`;
-        arg.style.marginRight = `${spaceBetween / 2}px`;
-        arg.style.flexShrink = 0;
-        arg.style.flexGrow = 1;
-      }
-    }
-  }, [showSlides, spaceBetween]);
-
-  const resetTimeout = () => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-  };
-
-  const next = () => {
-    if ((currentIndex < (length - showSlides) + 1) && currentIndex !== length) {
-      setCurrentIndex(prevState => prevState + 1);
-    }
-  };
-
-  const prev = () => {
-    if ((currentIndex > 0) && currentIndex !== showSlides) {
-      setCurrentIndex(prevState => prevState - 1);
-    }
-  };
-
-  const handleTouchStart = (e: any) => {
-    const touchDown = e.touches[0].clientX;
-    setTouchPosition(touchDown);
-  };
-
-  const handleTouchMove = (e: any) => {
-    const touchDown = touchPosition;
-
-    if (touchDown === null) {
-      return;
-    }
-
-    const currentTouch = e.touches[0].clientX;
-    const diff = touchDown - currentTouch;
-
-    if (diff > 5) {
-      next();
-    }
-
-    if (diff < -5) {
-      prev();
-    }
-
-    setTouchPosition(null);
-  };
-
-  const handleTransitionEnd = () => {
-    if (currentIndex === length - showSlides) {
-      setTimeout(
-        () => {
-          setTransitionEnabled(false);
-          setCurrentIndex(0);
-        }, delay / 2,
-      );
-    }
-  };
-
-  const handlePauseAutoMove = (state: boolean) => {
-    if (pauseOnMouseOver) {
-      setPause(state);
-    }
-  };
-
-  return (
-    <Div dir={direction} className={'w-full flex-col'} onMouseOver={() => handlePauseAutoMove(true)} onMouseLeave={() => handlePauseAutoMove(false)}>
-      <Div className={'w-full relative'}>
-        {navigation && !limit ? (
-          <Button ariaLabel={'previousNavigation'} startAdornment={<ArrowIcon className={'rotate-180'}/>} disabled={direction === 'rtl' ? currentIndex === length - showSlides : currentIndex === 0} onClick={direction === 'rtl' ? next : prev} color={navigationColor} rounded={'full'} shape={'square'} className={'absolute flex self-center items-center justify-center z-10 left-2'}/>
-        ) : null}
-        {prevNavigation && currentIndex > 0 ? (
-          <>
-            {prevNavigation(prev)}
-          </>
-        ) : null}
-        {limit ? (
-          <div ref={ref} className={'flex shrink-0 grow w-full'}>
-            {sliders.map((item: any, itemIndex: number) => (
-              <Div className={'flex-col w-1/2'} key={itemIndex}>
-                {item}
-              </Div>
-            ))}
-          </div>
-        ) : (
-          <div className={'overflow-hidden w-full h-full'}
-            onTouchStart={handleTouchStart}
-            onTouchMove={handleTouchMove}
-          >
-            <div className={`flex transition ease-linear duration-300 shrink-0 grow w-full`}
-              style={{
-                transform: `translateX(${dir}${currentIndex * (100 / showSlides)}%)`,
-                transition: !transitionEnabled ? 'none' : undefined,
-              }}
-              onTransitionEnd={handleTransitionEnd}
-              ref={ref}
-            >
-              {sliders.map((item: any, itemIndex: number) => (
-                <Div className={'flex-col w-full shrink-0'} key={itemIndex}>
-                  {item}
-                </Div>
-              ))}
-            </div>
-          </div>
-        )}
-        {navigation && !limit ? (
-          <Button ariaLabel={'nextNavigation'} startAdornment={<ArrowIcon/>} color={navigationColor} disabled={direction === 'rtl' ? currentIndex === 0 : currentIndex === length - showSlides} onClick={direction === 'rtl' ? prev : next} rounded={'full'} shape={'square'} className={'absolute flex self-center items-center justify-center right-2'}/>
-        ) : null}
-        {nextNavigation && currentIndex < length ? (
-          <>
-            {nextNavigation(next)}
-          </>
-        ) : null}
-      </Div>
-      {indicator && !limit ? (
-        <Div className={'self-center items-center justify-center'}>
-          {children.length > 1 ? (
-            <div className={`flex w-[96px] justify-start gap-x-1 mt-20 pr-11 overflow-hidden ${indicatorClassName}`}>
-              {[...new Array(length - showSlides + 1)].map((_: any, idx: number) => {
-                return (
-                  <Div
-                    style={{
-                      transform: `translateX(${dir}${currentIndex * (130)}%)`,
-                      transition: !transitionEnabled ? 'none' : undefined,
-                    }}
-                    key={idx}
-                    className={classNames(
-                      'w-4 h-4 min-h-4 min-w-4 rounded-full mb-0 transition-all duration-500 justify-center items-center',
-                      currentIndex === idx ? `bg-${indicatorActiveColor}` : 'bg-transparent',
-                    )}
-                    onClick={() => {
-                      setCurrentIndex(idx);
-                    }}
-                  >
-                    <Div className={classNames(
-                      currentIndex === idx ? `bg-${indicatorActiveColor}` : 'bg-grey-100',
-                      `rounded-full transition-all duration-500 justify-center items-center`,
-                      BulletWidth(Math.abs(4 - Math.abs(currentIndex - idx))),
-                    )}
-                    />
-                  </Div>
-                );
-              })}
-            </div>
-          ) : null}
-        </Div>
-      ) : null}
-    </Div>
-  );
-};
-
-const ArrowIcon = ({ className }: { className?: string }) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="256"
-      height="256"
-      viewBox="0 0 256 256"
-      fill={'currentColor'}
-      className={`h-3 w-3 ${className}`}
-    >
-      <path
-        fill={'currentColor'}
-        strokeMiterlimit="10"
-        strokeWidth="0"
-        d="M24.64 90L20.36 85.72 61.08 45 20.36 4.28 24.64 0 69.64 45z"
-        transform="matrix(2.81 0 0 2.81 1.407 1.407)"
-      />
-    </svg>
-  );
-};
-
-export default Slider;
-
-const BulletWidth = (w: any) => {
-  switch (w) {
-    case 4:
-      return '!w-4 !h-4 !min-w-4 !min-h-4';
-    case 3:
-      return '!w-3 !h-3 !min-w-3 !min-h-3';
-    case 2:
-      return '!w-2 !h-2 !min-w-2 !min-h-2';
-    default:
-      return 'w-0 h-0';
-  }
-};

package/stories/calendar/calendar.stories.tsx

@@ -1,25 +0,0 @@
-import { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import { Calendar } from './calendar';
-
-const meta: Meta<typeof Calendar> = {
-  title: 'Calendar',
-  component: Calendar,
-  argTypes: {
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Calendar>;
-
-export const Default: Story = {
-  render: (args) => {
-    const [selectedDate, setSelectedDate] = useState<string>('');
-
-    const handleChange = (e: any) => {
-      setSelectedDate(e.jalaliDate);
-    };
-
-    return <Calendar {...args} selected={selectedDate} onChange={handleChange} />;
-  },
-};

package/stories/calendar/calendar.tsx

@@ -1,11 +0,0 @@
-import CustomCalendar from '../../calendar';
-import { CalendarProps } from '../../calendar/calendar.props';
-
-/**
- * Primary UI component for user interaction
- */
-export const Calendar = ({ ...props }: CalendarProps) => {
-  return (
-    <CustomCalendar {...props}/>
-  );
-};

package/stories/count-down/count-down.stories.tsx

@@ -1,19 +0,0 @@
-import { CountDown } from './count-down';
-import { Meta, StoryObj } from '@storybook/react';
-
-const meta: Meta<typeof CountDown> = {
-  title: 'CountDownTimer',
-  component: CountDown,
-  argTypes: {
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof CountDown>;
-
-export const Default: Story = {
-  render: (args) => {
-    return <CountDown {...args} />;
-  },
-};
-

package/stories/count-down/count-down.tsx

@@ -1,11 +0,0 @@
-import CustomCountDown from '../../countdown-timer';
-import { CountdownProps } from '../../countdown-timer/countdown.props';
-
-/**
- * Primary UI component for user interaction
- */
-export const CountDown = ({ ...props }: CountdownProps) => {
-  return (
-    <CustomCountDown {...props} />
-  );
-};

package/stories/data-table/data-table-columns.tsx

@@ -1,70 +0,0 @@
-import { ColumnDef } from '@tanstack/react-table';
-import { Chip, Text } from '@pezeshk-book/ui-kit';
-
-export const header = {
-  id: 'ID',
-  category_id: 'categoryId',
-  title: 'Title',
-  code: 'Code',
-  environment: 'Environment',
-  type: 'Type',
-  status: 'Status',
-  created_at: 'CreatedAt',
-};
-
-export const columns: ColumnDef<any>[] = [
-  {
-    id: 'id',
-    accessorKey: 'id',
-    header: header.id,
-    cell: info => <Text typography={'sm'}>{info.row.original.id || '-'}</Text>,
-  },
-  {
-    id: 'category_id',
-    accessorKey: 'category_id',
-    header: header.category_id,
-    cell: info => <Text typography={'sm'}>{info.row.original.category_id || '-'}</Text>,
-  },
-  {
-    id: 'title',
-    accessorKey: 'title',
-    header: header.title,
-    cell: info => <Text typography={'sm'}>{info.row.original.title || '-'}</Text>,
-  },
-  {
-    id: 'code',
-    accessorKey: 'code',
-    header: header.code,
-    cell: info => <Text typography={'sm'}>{info.row.original.code || '-'}</Text>,
-  },
-  {
-    id: 'environment',
-    accessorKey: 'environment',
-    header: header.environment,
-    cell: info => {
-      return <Text typography={'sm'} >{info.row.original.environment || '-'}</Text>;
-    },
-  },
-  {
-    id: 'type',
-    accessorKey: 'type',
-    header: header.type,
-    cell: info => {
-      return <Chip size={'small'} variant={'reverse'} color={info.row.original.type === 'Hardware' ? 'info' : 'secondary'} value={info.row.original.type}/>;
-    },
-  },
-  {
-    id: 'status',
-    accessorKey: 'status',
-    header: header.status,
-    cell: info => {
-      return <Chip size={'small'} variant={'reverse'} color={info.row.original.status === 'Active' ? 'green' : 'red'} value={info.row.original.status}/>;
-    },
-  },
-  {
-    id: 'created_at',
-    accessorKey: 'created_at',
-    header: header.created_at,
-    cell: info => <Text typography={'sm'}>{info.row.original.created_at}</Text>,
-  },
-];

package/stories/data-table/default-data-table.stories.tsx

@@ -1,22 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { DefaultDataTableProps } from '../../data-table/default/default-data-table.props';
-import { DefaultDataTable } from './default-data-table';
-
-const meta: Meta<typeof DefaultDataTable> = {
-  title: 'DataTable',
-  component: DefaultDataTable,
-  argTypes: {
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof DefaultDataTable>;
-
-export const Default: Story = {
-  render: (args : { variant: 'default' } & DefaultDataTableProps) => {
-    return <DefaultDataTable {...args} />;
-  },
-  args: {
-    variant: 'default',
-  },
-};