breadcrumbs-stories

Author: tripolskypetr

src/components/ComponentWrapper.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { ModalProvider } from 'react-declarative';
 
 interface IComponentWrapperrProps {
-  children: React.ReactChild;
+  children: React.ReactNode;
 }
 
 export const ComponentWrapper = ({

src/components/PickerWrapper.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { ModalProvider } from 'react-declarative';
 
 interface IPickerWrapperProps {
-  children: React.ReactChild;
+  children: React.ReactNode;
 }
 
 export const PickerWrapper = ({

src/stories/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,63 @@
+import { Breadcrumbs, IOption, One, IField, FieldType } from 'react-declarative';
+
+import { action } from '@storybook/addon-actions';
+
+import { ComponentWrapper } from '../../components/ComponentWrapper';
+
+const actions: IOption[] = [
+    {
+        label: 'Sample action',
+        action: 'sample-action',
+    }
+];
+
+const fields: IField[] = [
+    {
+        type: FieldType.Line,
+        title: 'Content',
+    },
+    {
+        type: FieldType.Text,
+        name: 'text',
+        defaultValue: 'Default value',
+        title: 'Title',
+        description: 'Description',
+    },
+];
+
+const View = () => (
+    <ComponentWrapper>
+        <Breadcrumbs
+            onSave={action('save')}
+            onAction={action('action')}
+            actions={actions}
+        />
+        <One fields={fields} />
+    </ComponentWrapper>
+);
+
+export const BreadcrumbsView = View.bind({});
+
+BreadcrumbsView.argTypes = {
+    actions: {
+        name: 'actions',
+        defaultValue: actions,
+        readonly: true,
+        control: {
+            type: 'object',
+        },
+    },
+    fields: {
+        name: 'fields',
+        defaultValue: fields,
+        readonly: true,
+        control: {
+            type: 'object',
+        },
+    },
+};
+
+
+export default {
+    title: 'Breadcrumbs/View',
+};