picker-stories

Author: tripolskypetr

package-lock.json

@@ -19,7 +19,7 @@
     "expose-loader": "^3.1.0",
     "jquery": "^3.6.0",
     "react": "^17.0.1",
-    "react-declarative": "^1.6.7",
+    "react-declarative": "^1.6.8",
     "react-dom": "^17.0.1"
   },
   "scripts": {

package.json

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { ModalProvider } from 'react-declarative';
+
+interface IPickerWrapperProps {
+  children: React.ReactChild;
+}
+
+export const PickerWrapper = ({
+  children,
+}: IPickerWrapperProps) => (
+  <ModalProvider>
+    {children}
+  </ModalProvider>
+);

src/components/PickerWrapper.tsx

@@ -0,0 +1,32 @@
+import { useConfirm } from 'react-declarative';
+
+import { action } from '@storybook/addon-actions';
+
+import { Button } from '@mui/material';
+
+import { PickerWrapper } from '../../../components/PickerWrapper';
+
+const Picker = () => {
+  const pickConfirm = useConfirm({
+    title: 'Example Confirm',
+    msg: 'Some text',
+  });
+  const handleClick = () => pickConfirm().then(action('picker'));
+  return (
+    <Button onClick={handleClick}>
+      Click me
+    </Button>
+  );
+};
+
+const View = () => (
+  <PickerWrapper>
+    <Picker />
+  </PickerWrapper>
+);
+
+export const Confirm = View.bind({});
+
+export default {
+  title: 'One/Pickers',
+};

src/stories/One/Pickers/Confirm.stories.tsx

@@ -0,0 +1,29 @@
+import { useDate } from 'react-declarative';
+
+import { action } from '@storybook/addon-actions';
+
+import { Button } from '@mui/material';
+
+import { PickerWrapper } from '../../../components/PickerWrapper';
+
+const Picker = () => {
+  const pickConfirm = useDate();
+  const handleClick = () => pickConfirm().then(action('picker'));
+  return (
+    <Button onClick={handleClick}>
+      Click me
+    </Button>
+  );
+};
+
+const View = () => (
+  <PickerWrapper>
+    <Picker />
+  </PickerWrapper>
+);
+
+export const Date = View.bind({});
+
+export default {
+  title: 'One/Pickers',
+};

src/stories/One/Pickers/Date.stories.tsx

@@ -0,0 +1,89 @@
+import { FieldType, IField, useOne } from 'react-declarative';
+
+import { action } from '@storybook/addon-actions';
+
+import { Button } from '@mui/material';
+
+import { PickerWrapper } from '../../../components/PickerWrapper';
+
+import { rnd } from '../../../utils/rnd';
+
+const fields: IField[] = [
+  {
+    type: FieldType.Hero,
+    minWidth: '360px',
+    minHeight: ({ reason }) => reason === 'moderation-request' ? '250px' : '140px',
+    child: {
+      type: FieldType.Group,
+      fields: [
+        {
+          type: FieldType.Text,
+          name: 'dropperUserId',
+          fieldBottomMargin: '1',
+          fieldRightMargin: '0',
+          title: 'Dropper',
+          outlined: false,
+          readonly: true,
+          disabled: true,
+        },
+        {
+          type: FieldType.Radio,
+          name: 'reason',
+          fieldBottomMargin: '0',
+          fieldRightMargin: '0',
+          title: 'I lost the competition',
+          radioValue: 'competition-lose',
+          defaultValue: 'competition-lose',
+        },
+        {
+          type: FieldType.Radio,
+          name: 'reason',
+          fieldBottomMargin: '1',
+          fieldRightMargin: '0',
+          title: 'Moderation required',
+          radioValue: 'moderation-request',
+        },
+        {
+          type: FieldType.Text,
+          name: 'comment',
+          title: 'Comment',
+          placeholder: 'A few words about competition',
+          autoFocus: true,
+          fieldBottomMargin: '0',
+          fieldRightMargin: '0',
+          isVisible: ({ reason }) => reason === 'moderation-request',
+          inputRows: 3,
+          outlined: true,
+        }
+      ]
+    }
+  },
+];
+
+const Picker = () => {
+  const pickConfirm = useOne({
+    title: 'Finish competition',
+    handler: {
+      dropperUserId: rnd(),
+    },
+    fields,
+  });
+  const handleClick = () => pickConfirm().then(action('picker'));
+  return (
+    <Button onClick={handleClick}>
+      Click me
+    </Button>
+  );
+};
+
+const View = () => (
+  <PickerWrapper>
+    <Picker />
+  </PickerWrapper>
+);
+
+export const One = View.bind({});
+
+export default {
+  title: 'One/Pickers',
+};

src/stories/One/Pickers/One.stories.tsx

@@ -0,0 +1,29 @@
+import { useTime } from 'react-declarative';
+
+import { action } from '@storybook/addon-actions';
+
+import { Button } from '@mui/material';
+
+import { PickerWrapper } from '../../../components/PickerWrapper';
+
+const Picker = () => {
+  const pickConfirm = useTime();
+  const handleClick = () => pickConfirm().then(action('picker'));
+  return (
+    <Button onClick={handleClick}>
+      Click me
+    </Button>
+  );
+};
+
+const View = () => (
+  <PickerWrapper>
+    <Picker />
+  </PickerWrapper>
+);
+
+export const Time = View.bind({});
+
+export default {
+  title: 'One/Pickers',
+};

src/stories/One/Pickers/Time.stories.tsx

@@ -0,0 +1 @@
+export const rnd = () => (Math.random() + 1).toString(36).substring(7);