pixelize-design-library 0.1.0

package/src/Components/Skeletons/Skeleton.stories.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import Skeletons from './Skeletons'; // adjust the import path as necessary
+import { ChakraProvider } from '@chakra-ui/react';
+import { SkeletonProps } from './SkeletonProps'; // adjust the import path as necessary
+
+export default {
+  title: 'Components/Skeletons/Skeletons',
+  component: Skeletons,
+  argTypes: {
+    startColor: { control: 'color' },
+    endColor: { control: 'color' },
+    height: { control: 'text' },
+    isLoaded: { control: 'boolean' },
+    bg: { control: 'color' },
+    color: { control: 'color' },
+    fadeDuration: { control: 'number' },
+    children: { control: 'text' },
+    type: { control: { type: 'select', options: ['skeleton', 'circle', 'text'] } },
+    speed: { control: 'number' },
+    size: { control: 'text' },
+    mt: { control: 'text' },
+    noOfLines: { control: 'number' },
+    spacing: { control: 'text' },
+    skeletonHeight: { control: 'text' },
+  },
+} as Meta;
+
+const Template: StoryFn<SkeletonProps> = (args) => (
+  <ChakraProvider>
+    <Skeletons {...args} />
+  </ChakraProvider>
+);
+
+export const DefaultSkeleton = Template.bind({});
+DefaultSkeleton.args = {
+  type: 'skeleton',
+  isLoaded: false,
+  height: '20px',
+  startColor: 'gray.200',
+  endColor: 'gray.400',
+  speed: 1.2,
+  fadeDuration: 0.4,
+  children: 'Loading...',
+};
+
+export const SkeletonCircle = Template.bind({});
+SkeletonCircle.args = {
+  type: 'circle',
+  isLoaded: false,
+  size: '40px',
+  speed: 1.2,
+};
+
+export const SkeletonText = Template.bind({});
+SkeletonText.args = {
+  type: 'text',
+  isLoaded: false,
+  mt: '4',
+  noOfLines: 4,
+  spacing: '4',
+  skeletonHeight: '20px',
+};

package/src/Components/Skeletons/SkeletonProps.tsx

@@ -0,0 +1,23 @@
+import {
+    SkeletonProps as ChakraSkeleton,
+    SkeletonTextProps,
+} from "@chakra-ui/react";
+
+export type SkeletonProps = Pick<
+    ChakraSkeleton,
+    | "startColor"
+    | "endColor"
+    | "height"
+    | "isLoaded"
+    | "bg"
+    | "color"
+    | "fadeDuration"
+    | "children"
+    | "speed"
+    | "size"
+    | "mt"
+    | "noOfLines"
+    | "width"
+> & {
+    type: "skeleton" | "circle" | "text";
+} & Partial<Pick<SkeletonTextProps, "spacing" | "skeletonHeight">>;

package/src/Components/Skeletons/Skeletons.tsx

@@ -0,0 +1,51 @@
+import { ChakraProvider } from "@chakra-ui/react";
+import { Skeleton, SkeletonCircle, SkeletonText } from "@chakra-ui/react";
+import { SkeletonProps } from "./SkeletonProps";
+
+export default function Skeletons({
+    startColor,
+    endColor,
+    height = "20px",
+    isLoaded,
+    bg,
+    color,
+    fadeDuration,
+    children,
+    type,
+    speed,
+    size,
+    mt,
+    noOfLines,
+    spacing,
+    skeletonHeight,
+    width
+}: SkeletonProps) {
+    return (
+        <ChakraProvider>
+            {type === "skeleton" && (
+                <Skeleton
+                    height={height}
+                    isLoaded={isLoaded}
+                    bg={bg}
+                    color={color}
+                    fadeDuration={fadeDuration}
+                    startColor={startColor}
+                    endColor={endColor}
+                    speed={speed}
+                    width={width}
+                >
+                    {children}
+                </Skeleton>
+            )}
+            {type === "circle" && <SkeletonCircle size={size} speed={speed} />}
+            {type === "text" && (
+                <SkeletonText
+                    mt={mt}
+                    noOfLines={noOfLines}
+                    spacing={spacing}
+                    skeletonHeight={skeletonHeight}
+                />
+            )}
+        </ChakraProvider>
+    );
+}

package/src/Components/Table/Table.stories.tsx

@@ -0,0 +1,47 @@
+// Import React and the Table component
+import React from 'react';
+import Table from './Table';
+import { TableProps } from './TableProps';
+// Import Storybook's required modules
+import { StoryFn, Meta } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+// Define default export with component metadata
+export default {
+    title: 'Components/Table/Table',
+    component: Table,
+} as Meta;
+
+const Template: StoryFn<TableProps> = (args) => <Table {...args} />;
+
+
+export const Default = Template.bind({});
+Default.args = {
+    headers: [
+        { label: 'name', accessor_key: "name", sort: false, search: false, columnFreeze: true },
+        { label: 'email', accessor_key: "email", sort: true, search: true, columnFreeze: true },
+        { label: 'role', accessor_key: "role", sort: true, search: true },
+        { label: 'age', accessor_key: "age", sort: true, search: true },
+        { label: 'age1', accessor_key: "age1", sort: true, search: true },
+        { label: 'age2', accessor_key: "age2", sort: true, search: true },
+        { label: 'age3', accessor_key: "age3", sort: true, search: true },
+        { label: 'age4', accessor_key: "age4", sort: true, search: true },
+        { label: 'age5', accessor_key: "age5", sort: true, search: true },
+        { label: 'age6', accessor_key: "age6", sort: true, search: true },
+        { label: 'age7', accessor_key: "age7", sort: true, search: true },
+    ],
+    data: [{
+        id: 1,
+        name: `User 1`,
+        email: `user1@example.com`,
+        role: 'Developer',
+        age: 20,
+        age1: 34,
+        age2: 56,
+        age3: 66,
+        age4: 68,
+        age5: 70,
+        age6: 35,
+        age7: 24,
+    }],
+};