WIP

storybook/src/docs/components/FinalFormRangeInput/FinalFormRangeInput.stories.mdx → storybook/src/docs/components/FinalFormRangeInput/FinalFormRangeInput.mdx

@@ -1,22 +1,24 @@
 import { Meta, Story, Canvas } from "@storybook/addon-docs";
 
-<Meta title="Docs/Components/FinalFormRangeInput" />
+import * as FinalFormRangeInputStories from "./FinalFormRangeInput.stories";
+
+<Meta of={FinalFormRangeInputStories} />
 
 # Final Form Range Input
 
 The Final Form Range Input Component lets you set a Range Value (min/max) either by dragging a slider or setting the value in the associated input fields.
 **This Component can only operate inside a Final Form Component.**
 
 <Canvas>
-    <Story id="stories-components-final-form-range-input-default--default" />
+    <Story of={FinalFormRangeInputStories.Default} />
 </Canvas>
 
 ## Examples
 
 ### With Initial Values
 
 <Canvas>
-    <Story id="stories-components-final-form-range-input-with-initial-values--with-initial-values" />
+    <Story of={FinalFormRangeInputStories.WithInitialValues} />
 </Canvas>
 
 ### With StartAdornment Prop

storybook/src/docs/components/FinalFormRangeInput/FinalFormRangeInput.stories.tsx

@@ -0,0 +1,52 @@
+import { Field, FinalFormRangeInput } from "@comet/admin";
+import { Button } from "@mui/material";
+import * as React from "react";
+import { Form } from "react-final-form";
+
+export default {
+    title: "Docs/Components/FinalFormRangeInput",
+};
+
+export const Default = {
+    render: () => {
+        return (
+            <Form
+                onSubmit={(values) => {
+                    // values
+                }}
+                render={({ handleSubmit, values, form, initialValues }) => (
+                    <div style={{ display: "flex", alignItems: "center" }}>
+                        <Field component={FinalFormRangeInput} name="price" min={0} max={100} />
+                        <div style={{ marginLeft: "40px", minHeight: "220px" }}>
+                            <h3 style={{ marginTop: 0 }}>Value</h3>
+                            <pre>{JSON.stringify(values, undefined, 2)}</pre>
+                            <Button
+                                variant="contained"
+                                color="primary"
+                                onClick={() => {
+                                    form.reset();
+                                }}
+                            >
+                                Reset
+                            </Button>
+                        </div>
+                    </div>
+                )}
+            />
+        );
+    },
+};
+
+export const WithInitialValues = {
+    render: () => {
+        return (
+            <Form
+                onSubmit={(values) => {
+                    // values
+                }}
+                initialValues={{ price: { min: 0, max: 100 } }}
+                render={({ handleSubmit, values, form, initialValues }) => <Field component={FinalFormRangeInput} name="price" min={0} max={100} />}
+            />
+        );
+    },
+};