essential-stories

Author: tripolskypetr

config/main.js

@@ -5,7 +5,6 @@ module.exports = {
   ],
   addons: [
     "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
+    "@storybook/addon-essentials"
   ],
 };

config/preview.js

@@ -0,0 +1,9 @@
+module.exports = {
+    parameters: {
+        previewTabs: {
+            'storybook/docs/panel': {
+                hidden: true,
+            },
+        },
+    },
+};

dist/.gitkeep

@@ -13,7 +13,10 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
+    "@emotion/css": "^11.7.1",
+    "@mui/material": "^5.2.8",
     "react": "^17.0.1",
+    "react-declarative": "^1.6.6",
     "react-dom": "^17.0.1"
   },
   "scripts": {

package-lock.json

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { action } from '@storybook/addon-actions';
+import { Container, CssBaseline, Box } from '@mui/material';
+
+import { OneTyped, TypedField } from 'react-declarative';
+
+interface IFieldTemplateProps {
+  field: TypedField;
+}
+
+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>
+);

package.json

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { action } from '@storybook/addon-actions';
+import { Container, CssBaseline, Box } from '@mui/material';
+
+import { OneTyped, TypedField } from 'react-declarative';
+
+interface ILayoutTemplateProps {
+    fields: TypedField[];
+}
+
+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>
+);