recipes

Author: tripolskypetr

package-lock.json

@@ -15,10 +15,11 @@
   "dependencies": {
     "@emotion/css": "^11.7.1",
     "@mui/material": "^5.2.8",
+    "@mui/styles": "^5.2.3",
     "expose-loader": "^3.1.0",
     "jquery": "^3.6.0",
     "react": "^17.0.1",
-    "react-declarative": "^1.6.6",
+    "react-declarative": "^1.6.7",
     "react-dom": "^17.0.1"
   },
   "scripts": {

package.json

@@ -3,7 +3,7 @@ import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { Container, CssBaseline, Box } from '@mui/material';
 
-import { OneTyped, TypedField } from 'react-declarative';
+import { OneTyped, TypedField, ModalProvider } from 'react-declarative';
 
 interface IFieldTemplateProps {
   field: TypedField;
@@ -12,18 +12,20 @@ interface IFieldTemplateProps {
 export const FieldTemplate = ({
   field,
 }: IFieldTemplateProps) => (
-  <Container>
-    <CssBaseline />
-    <Box p={1}>
-      <OneTyped
-        fields={[field]}
-        focus={action('focus')}
-        blur={action('blur')}
-        change={action('change')}
-        invalidity={action('invalidity')}
-        ready={action('ready')}
-        fallback={action('fallback')}
-      />
-    </Box>
-  </Container>
+  <ModalProvider>
+    <Container>
+      <CssBaseline />
+      <Box p={1}>
+        <OneTyped
+          fields={[field]}
+          focus={action('focus')}
+          blur={action('blur')}
+          change={action('change')}
+          invalidity={action('invalidity')}
+          ready={action('ready')}
+          fallback={action('fallback')}
+        />
+      </Box>
+    </Container>
+  </ModalProvider>
 );

src/components/FieldTemplate.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { Container, CssBaseline, Box } from '@mui/material';
 
-import { OneTyped, TypedField } from 'react-declarative';
+import { OneTyped, TypedField, ModalProvider } from 'react-declarative';
 
 interface ILayoutTemplateProps {
     fields: TypedField[];
@@ -12,18 +12,20 @@ interface ILayoutTemplateProps {
 export const LayoutTemplate = ({
     fields,
 }: ILayoutTemplateProps) => (
-    <Container>
-        <CssBaseline />
-        <Box p={1}>
-            <OneTyped
-                fields={fields}
-                focus={action('focus')}
-                blur={action('blur')}
-                change={action('change')}
-                invalidity={action('invalidity')}
-                ready={action('ready')}
-                fallback={action('fallback')}
-            />
-        </Box>
-    </Container>
+    <ModalProvider>
+        <Container>
+            <CssBaseline />
+            <Box p={1}>
+                <OneTyped
+                    fields={fields}
+                    focus={action('focus')}
+                    blur={action('blur')}
+                    change={action('change')}
+                    invalidity={action('invalidity')}
+                    ready={action('ready')}
+                    fallback={action('fallback')}
+                />
+            </Box>
+        </Container>
+    </ModalProvider>
 );

src/components/LayoutTemplate.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+
+import { makeStyles } from '@mui/styles';
+import { Theme } from '@mui/material';
+
+import Box from "@mui/material/Box";
+import Avatar from "@mui/material/Avatar";
+import Grid from "@mui/material/Grid";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+
+const useStyles = makeStyles((theme: Theme) => ({
+    root: {
+        alignItems: 'center',
+        display: 'flex',
+        paddingBottom: theme.spacing(2),
+    },
+    avatar: {
+        height: 64,
+        marginRight: theme.spacing(2),
+        width: 64
+    },
+    avaterWrapper: {
+        height: '100%',
+    },
+    content: {
+        width: '100%',
+    },
+}));
+
+export const AvatarPicker = () => {
+    const classes = useStyles();
+    return (
+        <Box className={classes.root}>
+            <Box className={classes.avaterWrapper}>
+                <Avatar
+                    className={classes.avatar}
+                    imgProps={{
+                        crossOrigin: 'anonymous'
+                    }}
+                />
+            </Box>
+            <div className={classes.content}>
+                <Grid
+                    container
+                    spacing={1}
+                >
+                    <Grid item>
+                        <Button
+                            color="primary"
+                            size="small"
+                            type="button"
+                            variant="outlined"
+                        >
+                            Upload new picture
+                        </Button>
+                    </Grid>
+                    <Grid item>
+                        <Button
+                            color="primary"
+                            size="small"
+                            type="button"
+                            variant="text"
+                        >
+                            Delete
+                        </Button>
+                    </Grid>
+                    <Grid item xs />
+                    <Grid item>
+                        <Button
+                            color="secondary"
+                            size="small"
+                            type="button"
+                            variant="outlined"
+                        >
+                            Verification
+                        </Button>
+                    </Grid>
+                </Grid>
+                <Typography
+                    color="textSecondary"
+                    variant="caption"
+                >
+                    Recommended dimensions: 200x200, maximum file size: 5MB
+                </Typography>
+            </div>
+        </Box>
+    );
+};
+

src/components/common/AvatarPicker.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+
+import { makeStyles } from '@mui/styles';
+import { Theme } from '@mui/material';
+
+import Button from "@mui/material/Button";
+import Box from "@mui/material/Box";
+
+import { useConfirm } from 'react-declarative';
+
+const useStyles = makeStyles({
+    root: {
+        height: 45,
+    },
+})
+
+export const RemoveAccount = () => {
+    const classes = useStyles();
+
+    const pickConfirm = useConfirm({
+        title: 'Disable account',
+        msg: 'Your accound will be shedule for removal. Are you sure you want to continue?',
+    });
+
+    const handleClick = () => pickConfirm().then((result) => {
+        if (result) {
+            alert('bang!');
+        }
+    });
+
+    return (
+        <Box className={classes.root}>
+            <Button
+                color="primary"
+                size="small"
+                type="button"
+                variant="outlined"
+                onClick={handleClick}
+            >
+                Remove account
+            </Button>
+        </Box>
+    );
+};

src/components/common/RemoveAccount.tsx

@@ -1,6 +1,6 @@
 import { FieldType, TypedField } from 'react-declarative';
 
-import { FieldTemplate } from '../../components/FieldTemplate';
+import { FieldTemplate } from '../../../components/FieldTemplate';
 
 export const Checkbox = FieldTemplate.bind({});
 

src/stories/Fields/Checkbox.stories.tsx renamed to src/stories/One/Fields/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import { FieldType, TypedField } from 'react-declarative';
 
-import { FieldTemplate } from '../../components/FieldTemplate';
+import { FieldTemplate } from '../../../components/FieldTemplate';
 
 export const Combo = FieldTemplate.bind({});
 

src/stories/Fields/Combo.stories.tsx renamed to src/stories/One/Fields/Combo.stories.tsx

@@ -1,6 +1,6 @@
 import { FieldType, TypedField } from 'react-declarative';
 
-import { FieldTemplate } from '../../components/FieldTemplate';
+import { FieldTemplate } from '../../../components/FieldTemplate';
 
 export const Items = FieldTemplate.bind({});
 

src/stories/Fields/Items.stories.tsx renamed to src/stories/One/Fields/Items.stories.tsx

@@ -1,6 +1,6 @@
 import { FieldType, TypedField } from 'react-declarative';
 
-import { FieldTemplate } from '../../components/FieldTemplate';
+import { FieldTemplate } from '../../../components/FieldTemplate';
 
 export const Line = FieldTemplate.bind({});
 

src/stories/Fields/Line.stories.tsx renamed to src/stories/One/Fields/Line.stories.tsx

@@ -1,6 +1,6 @@
 import { FieldType, TypedField } from 'react-declarative';
 
-import { FieldTemplate } from '../../components/FieldTemplate';
+import { FieldTemplate } from '../../../components/FieldTemplate';
 
 export const Progress = FieldTemplate.bind({});
 

src/stories/Fields/Progress.stories.tsx renamed to src/stories/One/Fields/Progress.stories.tsx

@@ -1,6 +1,6 @@
 import { FieldType, TypedField } from 'react-declarative';
 
-import { FieldTemplate } from '../../components/FieldTemplate';
+import { FieldTemplate } from '../../../components/FieldTemplate';
 
 export const Radio = FieldTemplate.bind({});
 

src/stories/Fields/Radio.stories.tsx renamed to src/stories/One/Fields/Radio.stories.tsx

@@ -1,6 +1,6 @@
 import { FieldType, TypedField } from 'react-declarative';
 
-import { FieldTemplate } from '../../components/FieldTemplate';
+import { FieldTemplate } from '../../../components/FieldTemplate';
 
 export const Rating = FieldTemplate.bind({});
 

src/stories/Fields/Rating.stories.tsx renamed to src/stories/One/Fields/Rating.stories.tsx

@@ -1,6 +1,6 @@
 import { FieldType, TypedField } from 'react-declarative';
 
-import { FieldTemplate } from '../../components/FieldTemplate';
+import { FieldTemplate } from '../../../components/FieldTemplate';
 
 export const Slider = FieldTemplate.bind({});
 

src/stories/Fields/Slider.stories.tsx renamed to src/stories/One/Fields/Slider.stories.tsx

@@ -1,6 +1,6 @@
 import { FieldType, TypedField } from 'react-declarative';
 
-import { FieldTemplate } from '../../components/FieldTemplate';
+import { FieldTemplate } from '../../../components/FieldTemplate';
 
 export const Switch = FieldTemplate.bind({});
 

src/stories/Fields/Switch.stories.tsx renamed to src/stories/One/Fields/Switch.stories.tsx

@@ -1,6 +1,6 @@
 import { FieldType, TypedField } from 'react-declarative';
 
-import { FieldTemplate } from '../../components/FieldTemplate';
+import { FieldTemplate } from '../../../components/FieldTemplate';
 
 export const Textfield = FieldTemplate.bind({});
 

src/stories/Fields/Textfield.stories.tsx renamed to src/stories/One/Fields/Textfield.stories.tsx

@@ -1,6 +1,6 @@
 import { FieldType, TypedField } from 'react-declarative';
 
-import { FieldTemplate } from '../../components/FieldTemplate';
+import { FieldTemplate } from '../../../components/FieldTemplate';
 
 export const Typography = FieldTemplate.bind({});