tinybase 5.0.0-beta.19 → 5.0.0-beta.20

package/@types/ui-react-inspector/index.d.cts

@@ -0,0 +1,77 @@
+/**
+ * The ui-react-dom module of the TinyBase project provides components to make
+ * it easy to create web-based reactive apps with Store objects.
+ *
+ * The components in this module use the react-dom module and so are not
+ * appropriate for environments like React Native (although those in the
+ * lower-level ui-react module are).
+ * @see UI Components demos
+ * @packageDocumentation
+ * @module ui-react-dom
+ * @since v4.1.0
+ */
+
+import type {ComponentReturnType} from '../ui-react/index.d.cts';
+
+/**
+ * InspectorProps props are used to configure the Inspector component.
+ * @category Props
+ * @since v4.1.0
+ */
+export type InspectorProps = {
+  /**
+   * An optional string to indicate where you want the inspector to first
+   * appear.
+   */
+  readonly position?: 'top' | 'right' | 'bottom' | 'left' | 'full';
+  /**
+   * An optional boolean to indicate whether the inspector should start in the
+   * opened state.
+   */
+  readonly open?: boolean;
+};
+
+/**
+ * The Inspector component renders a tool which allows you to view and edit the
+ * content of a Store in a debug web environment.
+ *
+ * See the <Inspector /> demo for this component in action.
+ *
+ * The component displays a nub in the corner of the screen which you may then
+ * click to interact with all the Store objects in the Provider component
+ * context.
+ *
+ * The component's props identify the nub's initial location and panel state,
+ * though subsequent user changes to that will be preserved on each reload.
+ * @param props The props for this component.
+ * @returns The rendering of the inspector tool.
+ * @example
+ * This example creates a Provider context into which a default Store is
+ * provided. The Inspector component within it then renders the inspector
+ * tool.
+ *
+ * ```jsx
+ * import {Inspector} from 'tinybase/ui-react-inspector';
+ * import {Provider} from 'tinybase/ui-react';
+ * import React from 'react';
+ * import {createRoot} from 'react-dom/client';
+ * import {createStore} from 'tinybase';
+ *
+ * const App = ({store}) => (
+ *   <Provider store={store}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => <Inspector />;
+ *
+ * const store = createStore().setTables({pets: {fido: {species: 'dog'}}});
+ * const app = document.createElement('div');
+ * createRoot(app).render(<App store={store} />); // !act
+ * // ... // !act
+ * console.log(app.innerHTML.substring(0, 30));
+ * // -> '<aside id="tinybaseInspector">'
+ * ```
+ * @category Development components
+ * @since v4.1.0
+ */
+export function Inspector(props: InspectorProps): ComponentReturnType;