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>
+);

src/components/Breadcrumbs/index.ts

@@ -0,0 +1 @@
+declare module "*.md";

src/components/FieldTemplate.tsx

@@ -0,0 +1,26 @@
+import { FieldType, TypedField } from 'react-declarative';
+
+import { FieldTemplate } from '../../components/FieldTemplate';
+
+export const Checkbox = FieldTemplate.bind({});
+
+const checkbox: TypedField = {
+  type: FieldType.Checkbox,
+  title: 'Checkbox',
+  name: 'checkbox',
+};
+
+Checkbox.argTypes = {
+  field: {
+    name: 'field',
+    defaultValue: checkbox,
+    readonly: true,
+    control: {
+      type: 'object',
+    },
+  }
+};
+
+export default {
+  title: 'One/Fields',
+};

src/components/LayoutTemplate.tsx

@@ -0,0 +1,26 @@
+import { FieldType, TypedField } from 'react-declarative';
+
+import { FieldTemplate } from '../../components/FieldTemplate';
+
+export const Combo = FieldTemplate.bind({});
+
+const combo: TypedField = {
+  type: FieldType.Combo,
+  title: 'Combo',
+  name: 'combo',
+};
+
+Combo.argTypes = {
+  field: {
+    name: 'field',
+    defaultValue: combo,
+    readonly: true,
+    control: {
+      type: 'object',
+    },
+  }
+};
+
+export default {
+  title: 'One/Fields',
+};

src/components/List/index.ts

@@ -0,0 +1,26 @@
+import { FieldType, TypedField } from 'react-declarative';
+
+import { FieldTemplate } from '../../components/FieldTemplate';
+
+export const Items = FieldTemplate.bind({});
+
+const items: TypedField = {
+  type: FieldType.Items,
+  title: 'Items',
+  name: 'items',
+};
+
+Items.argTypes = {
+  field: {
+    name: 'field',
+    defaultValue: items,
+    readonly: true,
+    control: {
+      type: 'object',
+    },
+  }
+};
+
+export default {
+  title: 'One/Fields',
+};

src/components/One/index.ts

@@ -0,0 +1,26 @@
+import { FieldType, TypedField } from 'react-declarative';
+
+import { FieldTemplate } from '../../components/FieldTemplate';
+
+export const Line = FieldTemplate.bind({});
+
+const line: TypedField = {
+  type: FieldType.Line,
+  title: 'Line',
+  name: 'line',
+};
+
+Line.argTypes = {
+  field: {
+    name: 'field',
+    defaultValue: line,
+    readonly: true,
+    control: {
+      type: 'object',
+    },
+  }
+};
+
+export default {
+  title: 'One/Fields',
+};

src/components/index.ts

@@ -0,0 +1,25 @@
+import { FieldType, TypedField } from 'react-declarative';
+
+import { FieldTemplate } from '../../components/FieldTemplate';
+
+export const Progress = FieldTemplate.bind({});
+
+const progress: TypedField = {
+  type: FieldType.Progress,
+  name: 'progress',
+};
+
+Progress.argTypes = {
+  field: {
+    name: 'field',
+    defaultValue: progress,
+    readonly: true,
+    control: {
+      type: 'object',
+    },
+  }
+};
+
+export default {
+  title: 'One/Fields',
+};

src/globals.d.ts

@@ -0,0 +1,27 @@
+import { FieldType, TypedField } from 'react-declarative';
+
+import { FieldTemplate } from '../../components/FieldTemplate';
+
+export const Radio = FieldTemplate.bind({});
+
+const radio: TypedField = {
+  type: FieldType.Radio,
+  title: 'Radio',
+  name: 'radio',
+  radioValue: 'first-radio',
+};
+
+Radio.argTypes = {
+  field: {
+    name: 'field',
+    defaultValue: radio,
+    readonly: true,
+    control: {
+      type: 'object',
+    },
+  }
+};
+
+export default {
+  title: 'One/Fields',
+};

src/stories/Fields/Checkbox.stories.tsx

@@ -0,0 +1,25 @@
+import { FieldType, TypedField } from 'react-declarative';
+
+import { FieldTemplate } from '../../components/FieldTemplate';
+
+export const Rating = FieldTemplate.bind({});
+
+const rating: TypedField = {
+  type: FieldType.Rating,
+  name: 'rating',
+};
+
+Rating.argTypes = {
+  field: {
+    name: 'field',
+    defaultValue: rating,
+    readonly: true,
+    control: {
+      type: 'object',
+    },
+  }
+};
+
+export default {
+  title: 'One/Fields',
+};

src/stories/Fields/Combo.stories.tsx

@@ -0,0 +1,25 @@
+import { FieldType, TypedField } from 'react-declarative';
+
+import { FieldTemplate } from '../../components/FieldTemplate';
+
+export const Slider = FieldTemplate.bind({});
+
+const slider: TypedField = {
+  type: FieldType.Slider,
+  name: 'slider',
+};
+
+Slider.argTypes = {
+  field: {
+    name: 'field',
+    defaultValue: slider,
+    readonly: true,
+    control: {
+      type: 'object',
+    },
+  }
+};
+
+export default {
+  title: 'One/Fields',
+};

src/stories/Fields/Items.stories.tsx

@@ -0,0 +1,26 @@
+import { FieldType, TypedField } from 'react-declarative';
+
+import { FieldTemplate } from '../../components/FieldTemplate';
+
+export const Switch = FieldTemplate.bind({});
+
+const switchField: TypedField = {
+  type: FieldType.Switch,
+  title: 'Switch',
+  name: 'switchField',
+};
+
+Switch.argTypes = {
+  field: {
+    name: 'field',
+    defaultValue: switchField,
+    readonly: true,
+    control: {
+      type: 'object',
+    },
+  }
+};
+
+export default {
+  title: 'One/Fields',
+};

src/stories/Fields/Line.stories.tsx

@@ -0,0 +1,26 @@
+import { FieldType, TypedField } from 'react-declarative';
+
+import { FieldTemplate } from '../../components/FieldTemplate';
+
+export const Textfield = FieldTemplate.bind({});
+
+const textfield: TypedField = {
+  type: FieldType.Text,
+  title: 'Textfield',
+  name: 'textfield',
+};
+
+Textfield.argTypes = {
+  field: {
+    name: 'field',
+    defaultValue: textfield,
+    readonly: true,
+    control: {
+      type: 'object',
+    },
+  }
+};
+
+export default {
+  title: 'One/Fields',
+};

src/stories/Fields/Progress.stories.tsx

@@ -0,0 +1,26 @@
+import { FieldType, TypedField } from 'react-declarative';
+
+import { FieldTemplate } from '../../components/FieldTemplate';
+
+export const Typography = FieldTemplate.bind({});
+
+const typography: TypedField = {
+  type: FieldType.Typography,
+  placeholder: 'Typography',
+  name: 'typography',
+};
+
+Typography.argTypes = {
+  field: {
+    name: 'field',
+    defaultValue: typography,
+    readonly: true,
+    control: {
+      type: 'object',
+    },
+  }
+};
+
+export default {
+  title: 'One/Fields',
+};