@pezeshk-book/modules 0.2.5 → 0.2.6

package/slider/slider.tsx

@@ -0,0 +1,290 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,204 @@
+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

@@ -0,0 +1,22 @@
+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',
+  },
+};