@vrobots/storybook 0.1.35 → 0.1.38

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vrobots/storybook",
     "private": false,
-    "version": "0.1.35",
+    "version": "0.1.38",
     "type": "module",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",

package/dist/src/components/Accordion.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { AccordionRootProps } from "@chakra-ui/react";
+export interface IAccordionItem {
+    title: React.ReactNode;
+    component: React.ReactNode;
+}
+export interface IAccordionProps extends AccordionRootProps {
+    items?: IAccordionItem[];
+}
+export declare const Accordion: React.ForwardRefExoticComponent<IAccordionProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/Accordion.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Accordion as ChakraAccordion, Span } from "@chakra-ui/react";
+const createAccordionItem = (item, index) => (_jsxs(ChakraAccordion.Item, { value: index.toString(), children: [_jsxs(ChakraAccordion.ItemTrigger, { children: [_jsx(Span, { flex: "1", children: item.title }), _jsx(ChakraAccordion.ItemIndicator, {})] }), _jsx(ChakraAccordion.ItemContent, { children: _jsx(ChakraAccordion.ItemBody, { children: item.component }) })] }, index));
+export const Accordion = React.forwardRef(({ items = [], ...props }, ref) => {
+    return (_jsx(ChakraAccordion.Root, { ref: ref, ...props, children: items.map(createAccordionItem) }));
+});
+Accordion.displayName = "Accordion";

package/dist/src/components/Timeline.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { TimelineRootProps } from "@chakra-ui/react";
+import * as Icons from "react-icons/md";
+export interface ITimelineItem {
+    date: string;
+    icon: keyof typeof Icons;
+    title?: string;
+    component?: React.ReactNode;
+}
+export interface ITimelineProps extends TimelineRootProps {
+    items?: ITimelineItem[];
+}
+export declare const Timeline: React.ForwardRefExoticComponent<ITimelineProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/Timeline.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Timeline as ChakraTimeline } from "@chakra-ui/react";
+import * as Icons from "react-icons/md";
+const createTimelineItem = (item, index) => (_jsxs(ChakraTimeline.Item, { children: [_jsxs(ChakraTimeline.Connector, { children: [_jsx(ChakraTimeline.Separator, {}), _jsx(ChakraTimeline.Indicator, { children: Icons[item.icon] ? React.createElement(Icons[item.icon]) : null })] }), _jsxs(ChakraTimeline.Content, { children: [_jsx(ChakraTimeline.Description, { pt: 1, children: item.date }), !!item.title && _jsx(ChakraTimeline.Title, { textStyle: "sm", children: item.title }), item.component || null] })] }, item.date + index));
+export const Timeline = React.forwardRef(({ items = [], ...props }, ref) => {
+    return (_jsx(ChakraTimeline.Root, { ref: ref, ...props, children: items.map(createTimelineItem) }));
+});
+Timeline.displayName = "Timeline";

package/dist/src/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from './ui/color-mode';
+export * from './Accordion';
 export * from './AvatarIconMenu';
 export * from './Breadcrumbs';
 export * from './Display';
@@ -9,3 +10,4 @@ export * from './Menu';
 export * from './Page';
 export * from './Section';
 export * from './Sidebar';
+export * from './Timeline';

package/dist/src/components/index.js

@@ -1,4 +1,5 @@
 export * from './ui/color-mode';
+export * from './Accordion';
 export * from './AvatarIconMenu';
 export * from './Breadcrumbs';
 export * from './Display';
@@ -9,3 +10,4 @@ export * from './Menu';
 export * from './Page';
 export * from './Section';
 export * from './Sidebar';
+export * from './Timeline';

package/dist/src/stories/Accordion.stories.d.ts

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { IAccordionItem } from '../components/Accordion';
+export declare const EXAMPLE_TIMELINE_ITEMS: IAccordionItem[];
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("../components").IAccordionProps & import("react").RefAttributes<HTMLDivElement>>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Component: Story;

package/dist/src/stories/Accordion.stories.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Accordion } from '../components/Accordion';
+import { Heading } from '@chakra-ui/react';
+export const EXAMPLE_TIMELINE_ITEMS = [
+    {
+        title: _jsx(Heading, { size: "md", children: "Accordion Item 1" }),
+        component: _jsx("div", { children: "This is the content of Accordion Item 1" }),
+    },
+];
+const meta = {
+    title: 'Data/Accordion',
+    component: Accordion,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const Component = {
+    args: {
+        items: EXAMPLE_TIMELINE_ITEMS
+    }
+};

package/dist/src/stories/Timeline.stories.d.ts

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { ITimelineItem } from '../components/Timeline';
+export declare const EXAMPLE_TIMELINE_ITEMS: ITimelineItem[];
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("../components").ITimelineProps & import("react").RefAttributes<HTMLDivElement>>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Component: Story;

package/dist/src/stories/Timeline.stories.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Timeline } from '../components/Timeline';
+export const EXAMPLE_TIMELINE_ITEMS = [
+    {
+        date: "18th May 2021",
+        title: "Order Confirmed",
+        component: _jsx("div", { children: "Order confirmed and processing" }),
+        icon: 'MdAddBusiness'
+    },
+];
+const meta = {
+    title: 'Data/Timeline',
+    component: Timeline,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const Component = {
+    args: {
+        items: EXAMPLE_TIMELINE_ITEMS
+    }
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vrobots/storybook",
   "private": false,
-  "version": "0.1.35",
+  "version": "0.1.38",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",