re built docs

teslamotors · Feb 22, 2024 · 5ee6138 · 5ee6138
1 parent b23f9aa
commit 5ee6138
Show file tree

Hide file tree

Showing 11 changed files with 292 additions and 175 deletions.
diff --git a/docs/assets/base-80a1f760-34c3ba63.js → docs/assets/base-80a1f760-60514562.js b/docs/assets/base-80a1f760-34c3ba63.js → docs/assets/base-80a1f760-60514562.js
diff --git a/docs/assets/consoleHook-cdbe54ab-24edac1e.js → docs/assets/consoleHook-cdbe54ab-d171750f.js b/docs/assets/consoleHook-cdbe54ab-24edac1e.js → docs/assets/consoleHook-cdbe54ab-d171750f.js
diff --git a/docs/assets/index-292de3b8-26ed70bb.js → docs/assets/index-292de3b8-182ab13b.js b/docs/assets/index-292de3b8-26ed70bb.js → docs/assets/index-292de3b8-182ab13b.js
diff --git a/docs/assets/index-352e959f.js → docs/assets/index-6988ba53.js b/docs/assets/index-352e959f.js → docs/assets/index-6988ba53.js
diff --git a/docs/assets/index-3d62c709.js → docs/assets/index-dd00e335.js b/docs/assets/index-3d62c709.js → docs/assets/index-dd00e335.js
diff --git a/docs/assets/index-89293308.js → docs/assets/index-e6f78d76.js b/docs/assets/index-89293308.js → docs/assets/index-e6f78d76.js
diff --git a/docs/index.html b/docs/index.html
@@ -42,7 +42,7 @@
         }(window.location))
       </script>
       <!-- End Single Page Apps for GitHub Pages -->
-    <script type="module" crossorigin src="/informed/assets/index-352e959f.js"></script>
+    <script type="module" crossorigin src="/informed/assets/index-6988ba53.js"></script>
     <link rel="stylesheet" href="/informed/assets/index-1b94b374.css">
   </head>
   <body>

diff --git a/docs/olddocs/project.json b/docs/olddocs/project.json
@@ -1 +1 @@
-{"generatedAt":1707931104347,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"8.19.3"},"storybookVersion":"6.5.16","language":"javascript","storybookPackages":{"@storybook/addon-options":{"version":"5.3.21"},"@storybook/addons":{"version":"6.5.16"},"@storybook/react":{"version":"6.5.16"},"@storybook/theming":{"version":"6.5.16"}},"framework":{"name":"react"},"addons":{"storybook-readme":{"version":"5.0.9"},"storybook-dark-mode":{"version":"1.1.2"}}}
+{"generatedAt":1708619726836,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"8.19.3"},"storybookVersion":"6.5.16","language":"javascript","storybookPackages":{"@storybook/addon-options":{"version":"5.3.21"},"@storybook/addons":{"version":"6.5.16"},"@storybook/react":{"version":"6.5.16"},"@storybook/theming":{"version":"6.5.16"}},"framework":{"name":"react"},"addons":{"storybook-readme":{"version":"5.0.9"},"storybook-dark-mode":{"version":"1.1.2"}}}
diff --git a/vitedocs/Pages/ApiReference/UseFieldState.jsx b/vitedocs/Pages/ApiReference/UseFieldState.jsx
@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import CarColor from '../GettingStarted/CarColor/CarColor';
+import ScopedFieldState from './UseFieldState/ScopedFieldState/ScopedFieldState';
 
 export default function Intro() {
   useEffect(() => {
@@ -10,6 +11,8 @@ export default function Intro() {
       <CarColor />
       <br />
       <br />
+      <hr />
+      <ScopedFieldState />
     </>
   );
 }
diff --git a/vitedocs/Pages/ApiReference/UseFieldState/ScopedFieldState/Example.jsx b/vitedocs/Pages/ApiReference/UseFieldState/ScopedFieldState/Example.jsx
@@ -0,0 +1,40 @@
+import { Scope, useFieldState, Debug } from 'informed';
+import { Form, Input } from 'YourComponents';
+
+const ScopedFieldState = ({ name }) => {
+  const { value } = useFieldState(name);
+  return (
+    <pre className="language-js">
+      <code>{JSON.stringify(value, null, 2)}</code>
+    </pre>
+  );
+};
+
+const UnScopedFieldState = ({ name }) => {
+  const { value } = useFieldState(name, false); // << Note the false here
+  return (
+    <pre className="language-js">
+      <code>{JSON.stringify(value, null, 2)}</code>
+    </pre>
+  );
+};
+
+const Example = () => (
+  <div>
+    <Form>
+      <Scope scope="favorite">
+        <Input field="color" />
+        <h5>favorite.color: ( scoped )</h5>
+        <ScopedFieldState name="favorite.color" />
+        <h5>color: ( scoped )</h5>
+        <ScopedFieldState name="color" />
+        <h5>favorite.color: ( un-scoped )</h5>
+        <UnScopedFieldState name="favorite.color" />
+      </Scope>
+      <h5>Form State</h5>
+      <Debug values />
+    </Form>
+  </div>
+);
+
+export default Example;
diff --git a/vitedocs/Pages/ApiReference/UseFieldState/ScopedFieldState/ScopedFieldState.jsx b/vitedocs/Pages/ApiReference/UseFieldState/ScopedFieldState/ScopedFieldState.jsx
@@ -0,0 +1,34 @@
+import Code from '../../../../YourComponents/Code';
+import { SideBySide } from '../../../../SideBySide';
+import Example from './Example';
+import exampleCode from './Example.jsx?raw';
+import { Info } from '../../../../Info';
+
+export default function ScopedFieldState() {
+  return (
+    <>
+      <h1>
+        Scoped <code>useFieldState</code>
+      </h1>
+      <Info>
+        Scope is a very useful tool for simplifying your code but you can easily
+        make mistakes when using it.
+        <br />
+        <br />
+        Below is an example where you could misuse the useFieldState. Type into
+        the field and Note how the text below to color: gets updated while
+        nothing changes next to favorite.color:
+      </Info>
+      <Info type="notice">
+        Note how passing <code>false</code> as a second parameter to
+        <code>useFieldState</code> will un scope the hook.
+      </Info>
+      <SideBySide
+        leftHeader={<h3>Example: </h3>}
+        rightHeader={<h3>Code:</h3>}
+        left={<Example />}
+        right={<Code links input1={exampleCode} />}
+      />
+    </>
+  );
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"generatedAt":1707931104347,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"8.19.3"},"storybookVersion":"6.5.16","language":"javascript","storybookPackages":{"@storybook/addon-options":{"version":"5.3.21"},"@storybook/addons":{"version":"6.5.16"},"@storybook/react":{"version":"6.5.16"},"@storybook/theming":{"version":"6.5.16"}},"framework":{"name":"react"},"addons":{"storybook-readme":{"version":"5.0.9"},"storybook-dark-mode":{"version":"1.1.2"}}}
		{"generatedAt":1708619726836,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"8.19.3"},"storybookVersion":"6.5.16","language":"javascript","storybookPackages":{"@storybook/addon-options":{"version":"5.3.21"},"@storybook/addons":{"version":"6.5.16"},"@storybook/react":{"version":"6.5.16"},"@storybook/theming":{"version":"6.5.16"}},"framework":{"name":"react"},"addons":{"storybook-readme":{"version":"5.0.9"},"storybook-dark-mode":{"version":"1.1.2"}}}