@pezeshk-book/modules 0.2.8 → 0.2.10

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',
-  },
-};

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

@@ -1,18 +0,0 @@
-import CustomDataTable from '../../data-table';
-import dummyData from './dummy-data';
-import { columns, header } from './data-table-columns';
-import { DefaultDataTableProps } from '../../data-table/default/default-data-table.props';
-
-/**
- * Primary UI component for user interaction
- */
-export const DefaultDataTable = (props: { variant: 'default' } & DefaultDataTableProps) => {
-  return (
-    <CustomDataTable
-      {...props}
-      data={dummyData}
-      header={header}
-      column={columns}
-    />
-  );
-};

package/stories/data-table/dummy-data.ts

@@ -1,204 +0,0 @@
-const dummyData = [
-  {
-    id: 1,
-    category_id: 101,
-    title: 'Item One',
-    code: 'X123A',
-    environment: 'Production',
-    type: 'Hardware',
-    status: 'Active',
-    created_at: '2024-02-01T10:15:30Z',
-  },
-  {
-    id: 2,
-    category_id: 102,
-    title: 'Item Two',
-    code: 'Y456B',
-    environment: 'Staging',
-    type: 'Software',
-    status: 'Inactive',
-    created_at: '2024-01-25T09:00:00Z',
-  },
-  {
-    id: 3,
-    category_id: 103,
-    title: 'Item Three',
-    code: 'Z789C',
-    environment: 'Development',
-    type: 'Network',
-    status: 'Pending',
-    created_at: '2024-02-10T14:30:15Z',
-  },
-  {
-    id: 4,
-    category_id: 101,
-    title: 'Item Four',
-    code: 'A111D',
-    environment: 'Production',
-    type: 'Hardware',
-    status: 'Active',
-    created_at: '2024-02-12T12:45:00Z',
-  },
-  {
-    id: 5,
-    category_id: 102,
-    title: 'Item Five',
-    code: 'B222E',
-    environment: 'Staging',
-    type: 'Software',
-    status: 'Inactive',
-    created_at: '2024-02-15T08:20:45Z',
-  },
-  {
-    id: 6,
-    category_id: 103,
-    title: 'Item Six',
-    code: 'C333F',
-    environment: 'Development',
-    type: 'Network',
-    status: 'Pending',
-    created_at: '2024-02-18T16:10:30Z',
-  },
-  {
-    id: 7,
-    category_id: 104,
-    title: 'Item Seven',
-    code: 'D444G',
-    environment: 'Production',
-    type: 'Hardware',
-    status: 'Active',
-    created_at: '2024-02-20T11:05:00Z',
-  },
-  {
-    id: 8,
-    category_id: 105,
-    title: 'Item Eight',
-    code: 'E555H',
-    environment: 'Staging',
-    type: 'Software',
-    status: 'Inactive',
-    created_at: '2024-02-22T14:50:25Z',
-  },
-  {
-    id: 9,
-    category_id: 106,
-    title: 'Item Nine',
-    code: 'F666I',
-    environment: 'Development',
-    type: 'Network',
-    status: 'Pending',
-    created_at: '2024-02-24T09:30:15Z',
-  },
-  {
-    id: 10,
-    category_id: 107,
-    title: 'Item Ten',
-    code: 'G777J',
-    environment: 'Production',
-    type: 'Hardware',
-    status: 'Active',
-    created_at: '2024-02-26T13:25:45Z',
-  },
-  {
-    id: 11,
-    category_id: 108,
-    title: 'Item Eleven',
-    code: 'H888K',
-    environment: 'Staging',
-    type: 'Software',
-    status: 'Inactive',
-    created_at: '2024-02-28T10:40:30Z',
-  },
-  {
-    id: 12,
-    category_id: 109,
-    title: 'Item Twelve',
-    code: 'I999L',
-    environment: 'Development',
-    type: 'Network',
-    status: 'Pending',
-    created_at: '2024-03-01T15:55:00Z',
-  },
-  {
-    id: 13,
-    category_id: 110,
-    title: 'Item Thirteen',
-    code: 'J000M',
-    environment: 'Production',
-    type: 'Hardware',
-    status: 'Active',
-    created_at: '2024-03-03T08:10:45Z',
-  },
-  {
-    id: 14,
-    category_id: 111,
-    title: 'Item Fourteen',
-    code: 'K111N',
-    environment: 'Staging',
-    type: 'Software',
-    status: 'Inactive',
-    created_at: '2024-03-05T12:20:30Z',
-  },
-  {
-    id: 15,
-    category_id: 112,
-    title: 'Item Fifteen',
-    code: 'L222O',
-    environment: 'Development',
-    type: 'Network',
-    status: 'Pending',
-    created_at: '2024-03-07T14:45:15Z',
-  },
-  {
-    id: 16,
-    category_id: 113,
-    title: 'Item Sixteen',
-    code: 'M333P',
-    environment: 'Production',
-    type: 'Hardware',
-    status: 'Active',
-    created_at: '2024-03-09T09:30:00Z',
-  },
-  {
-    id: 17,
-    category_id: 114,
-    title: 'Item Seventeen',
-    code: 'N444Q',
-    environment: 'Staging',
-    type: 'Software',
-    status: 'Inactive',
-    created_at: '2024-03-11T11:50:45Z',
-  },
-  {
-    id: 18,
-    category_id: 115,
-    title: 'Item Eighteen',
-    code: 'O555R',
-    environment: 'Development',
-    type: 'Network',
-    status: 'Pending',
-    created_at: '2024-03-13T16:40:30Z',
-  },
-  {
-    id: 19,
-    category_id: 116,
-    title: 'Item Nineteen',
-    code: 'P666S',
-    environment: 'Production',
-    type: 'Hardware',
-    status: 'Active',
-    created_at: '2024-03-15T10:05:15Z',
-  },
-  {
-    id: 20,
-    category_id: 117,
-    title: 'Item Twenty',
-    code: 'Q777T',
-    environment: 'Staging',
-    type: 'Software',
-    status: 'Inactive',
-    created_at: '2024-03-17T14:15:00Z',
-  },
-];
-
-export default dummyData;

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

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