datocms-react-ui 0.3.7 → 0.3.11

package/dist/types/Button/index.d.ts

@@ -1,7 +1,7 @@
 import React, { CSSProperties, MouseEventHandler, ReactNode } from 'react';
 export declare type ButtonProps = {
     children?: ReactNode;
-    type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
+    type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
     className?: string;
     disabled?: boolean;
     onClick?: MouseEventHandler;
@@ -12,6 +12,67 @@ export declare type ButtonProps = {
     fullWidth?: boolean;
     style?: CSSProperties;
 };
+/**
+ * @example Button types
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ marginBottom: 'var(--spacing-m)' }}>
+ *     <Button buttonType="muted">Submit</Button>{' '}
+ *     <Button buttonType="primary">Submit</Button>{' '}
+ *     <Button buttonType="negative">Submit</Button>
+ *   </div>
+ *   <div>
+ *     <Button buttonType="muted" disabled>
+ *       Submit
+ *     </Button>{' '}
+ *     <Button buttonType="primary" disabled>
+ *       Submit
+ *     </Button>{' '}
+ *     <Button buttonType="negative" disabled>
+ *       Submit
+ *     </Button>
+ *   </div>
+ * </Canvas>;
+ * ```
+ *
+ * @example Full-width
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Button fullWidth>Submit</Button>
+ * </Canvas>;
+ * ```
+ *
+ * @example Sizing
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Button buttonSize="xxs">Submit</Button>{' '}
+ *   <Button buttonSize="xs">Submit</Button>{' '}
+ *   <Button buttonSize="s">Submit</Button>{' '}
+ *   <Button buttonSize="m">Submit</Button>{' '}
+ *   <Button buttonSize="l">Submit</Button>{' '}
+ *   <Button buttonSize="xl">Submit</Button>{' '}
+ * </Canvas>;
+ * ```
+ *
+ * @example Icons
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ marginBottom: 'var(--spacing-m)' }}>
+ *     <Button leftIcon={<PlusIcon />}>Submit</Button>
+ *   </div>
+ *   <div style={{ marginBottom: 'var(--spacing-m)' }}>
+ *     <Button rightIcon={<ChevronDownIcon />}>Options</Button>
+ *   </div>
+ *   <div>
+ *     <Button leftIcon={<PlusIcon />} />
+ *   </div>
+ * </Canvas>;
+ * ```
+ */
 export declare function Button({ children, className, disabled, buttonType, buttonSize, fullWidth, onClick, style, leftIcon, rightIcon, type, }: ButtonProps): JSX.Element;
 export declare type ButtonLinkProps = {
     children?: ReactNode;

package/dist/types/Canvas/index.d.ts

@@ -5,4 +5,482 @@ export declare type CanvasProps = {
     noAutoResizer?: boolean;
     children: ReactNode;
 };
-export declare function Canvas({ ctx, children, noAutoResizer }: CanvasProps): JSX.Element;
+/**
+ * @example Color variables
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Section title="Text colors">
+ *     <table>
+ *       <tbody>
+ *         <tr>
+ *           <td>
+ *             <code>--base-body-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--base-body-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--light-body-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--light-body-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--placeholder-body-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--placeholder-body-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *       </tbody>
+ *     </table>
+ *   </Section>
+ *   <Section title="UI colors">
+ *     <table>
+ *       <tbody>
+ *         <tr>
+ *           <td>
+ *             <code>--light-bg-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--light-bg-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--lighter-bg-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--lighter-bg-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--disabled-bg-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--disabled-bg-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--border-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--border-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--darker-border-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--darker-border-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--alert-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--alert-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--warning-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--warning-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--notice-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--notice-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--warning-bg-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--warning-bg-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--add-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--add-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--remove-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--remove-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *       </tbody>
+ *     </table>
+ *   </Section>
+ *   <Section title="Project-specific colors">
+ *     <table>
+ *       <tbody>
+ *         <tr>
+ *           <td>
+ *             <code>--accent-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--accent-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--primary-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--primary-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--light-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--light-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--dark-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--dark-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *       </tbody>
+ *     </table>
+ *   </Section>
+ * </Canvas>;
+ * ```
+ *
+ * @example Typography variables
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <table>
+ *     <tbody>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-xxs</code>
+ *         </td>
+ *         <td>
+ *           <div style={{ fontSize: 'var(--font-size-xxs)' }}>
+ *             Size XXS
+ *           </div>
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-xs</code>
+ *         </td>
+ *         <td>
+ *           <div style={{ fontSize: 'var(--font-size-xs)' }}>Size XS</div>
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-s</code>
+ *         </td>
+ *         <td>
+ *           <div style={{ fontSize: 'var(--font-size-s)' }}>Size S</div>
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-m</code>
+ *         </td>
+ *         <td>
+ *           <div style={{ fontSize: 'var(--font-size-m)' }}>Size M</div>
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-l</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               fontSize: 'var(--font-size-l)',
+ *               fontWeight: 'var(--font-weight-bold)',
+ *             }}
+ *           >
+ *             Size L
+ *           </div>
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-xl</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               fontSize: 'var(--font-size-xl)',
+ *               fontWeight: 'var(--font-weight-bold)',
+ *             }}
+ *           >
+ *             Size XL
+ *           </div>
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-xxl</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               fontSize: 'var(--font-size-xxl)',
+ *               fontWeight: 'var(--font-weight-bold)',
+ *             }}
+ *           >
+ *             Size XXL
+ *           </div>
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-xxxl</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               fontSize: 'var(--font-size-xxxl)',
+ *               fontWeight: 'var(--font-weight-bold)',
+ *             }}
+ *           >
+ *             Size XXXL
+ *           </div>
+ *         </td>
+ *       </tr>
+ *     </tbody>
+ *   </table>
+ * </Canvas>;
+ * ```
+ *
+ * @example Spacing variables
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <table>
+ *     <tbody>
+ *       <tr>
+ *         <td>
+ *           <code>--spacing-s</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               background: 'var(--accent-color)',
+ *               width: 'var(--spacing-s)',
+ *               height: 'var(--spacing-s)',
+ *             }}
+ *           />
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--spacing-m</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               background: 'var(--accent-color)',
+ *               width: 'var(--spacing-m)',
+ *               height: 'var(--spacing-m)',
+ *             }}
+ *           />
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--spacing-l</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               background: 'var(--accent-color)',
+ *               width: 'var(--spacing-l)',
+ *               height: 'var(--spacing-l)',
+ *             }}
+ *           />
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--spacing-xl</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               background: 'var(--accent-color)',
+ *               width: 'var(--spacing-xl)',
+ *               height: 'var(--spacing-xl)',
+ *             }}
+ *           />
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--spacing-xxl</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               background: 'var(--accent-color)',
+ *               width: 'var(--spacing-xxl)',
+ *               height: 'var(--spacing-xxl)',
+ *             }}
+ *           />
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--spacing-xxxl</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               background: 'var(--accent-color)',
+ *               width: 'var(--spacing-xxxl)',
+ *               height: 'var(--spacing-xxxl)',
+ *             }}
+ *           />
+ *         </td>
+ *       </tr>
+ *     </tbody>
+ *   </table>
+ * </Canvas>;
+ * ```
+ */
+export declare function Canvas({ ctx, children, noAutoResizer, }: CanvasProps): JSX.Element;

package/dist/types/ContextInspector/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare function ContextInspector({ ctx }: {
+export declare function ContextInspector({ ctx, }: {
     ctx: {
         mode: string;
     };

package/dist/types/Form/index.d.ts

@@ -6,4 +6,76 @@ export interface FormProps {
     className?: string;
     children: ReactNode;
 }
+/**
+ * @example Full example
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Form onSubmit={() => console.log('onSubmit')}>
+ *     <FieldGroup>
+ *       <TextField
+ *         required
+ *         name="name"
+ *         id="name"
+ *         label="Name"
+ *         value="Mark Smith"
+ *         placeholder="Enter full name"
+ *         hint="Provide a full name"
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
+ *       <TextField
+ *         required
+ *         name="email"
+ *         id="email"
+ *         label="Email"
+ *         type="email"
+ *         value=""
+ *         placeholder="your@email.com"
+ *         error="Please enter an email!"
+ *         hint="Enter email address"
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
+ *       <TextField
+ *         required
+ *         name="apiToken"
+ *         id="apiToken"
+ *         label="API Token"
+ *         value="XXXYYY123"
+ *         hint="Enter a valid API token"
+ *         textInputProps={{ monospaced: true }}
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
+ *       <SelectField
+ *         name="option"
+ *         id="option"
+ *         label="Option"
+ *         hint="Select one of the options"
+ *         value={{ label: 'Option 1', value: 'option1' }}
+ *         selectInputProps={{
+ *           options: [
+ *             { label: 'Option 1', value: 'option1' },
+ *             { label: 'Option 2', value: 'option2' },
+ *             { label: 'Option 3', value: 'option3' },
+ *           ],
+ *         }}
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
+ *       <SwitchField
+ *         name="debugMode"
+ *         id="debugMode"
+ *         label="Debug mode active?"
+ *         hint="Logs messages to console"
+ *         value={true}
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
+ *     </FieldGroup>
+ *     <FieldGroup>
+ *       <Button fullWidth buttonType="primary">
+ *         Submit
+ *       </Button>
+ *     </FieldGroup>
+ *   </Form>
+ * </Canvas>;
+ * ```
+ */
 export declare const Form: ({ children, className, onSubmit, spacing, ...otherProps }: FormProps) => JSX.Element;

package/dist/types/Section/index.d.ts

@@ -0,0 +1,63 @@
+import { CSSProperties, ReactNode } from 'react';
+declare type SectionProps = {
+    title: ReactNode;
+    children?: ReactNode;
+    highlighted?: boolean;
+    collapsible?: {
+        isOpen: boolean;
+        onToggle: () => void;
+    };
+    headerClassName?: string;
+    titleClassName?: string;
+    headerStyle?: CSSProperties;
+    titleStyle?: CSSProperties;
+};
+/**
+ * @example Basic usage
+ *
+ * ```jsx
+ * <Canvas ctx={ctx}>
+ *   <Section title="Section title">
+ *     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+ *     eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+ *     ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+ *     aliquip ex ea commodo consequat.
+ *   </Section>
+ * </Canvas>;
+ * ```
+ *
+ * @example Highlighted
+ *
+ * ```jsx
+ * <Canvas ctx={ctx}>
+ *   <Section title="Section title" highlighted>
+ *     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+ *     eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+ *     ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+ *     aliquip ex ea commodo consequat.
+ *   </Section>
+ * </Canvas>;
+ * ```
+ *
+ * @example Collapsible
+ *
+ * ```jsx
+ * <Canvas ctx={ctx}>
+ *   <StateManager initial={true}>
+ *     {(isOpen, setOpen) => (
+ *       <Section
+ *         title="Section title"
+ *         collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
+ *       >
+ *         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+ *         eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+ *         enim ad minim veniam, quis nostrud exercitation ullamco laboris
+ *         nisi ut aliquip ex ea commodo consequat.
+ *       </Section>
+ *     )}
+ *   </StateManager>
+ * </Canvas>;
+ * ```
+ */
+export declare function Section({ title, children, highlighted, collapsible, headerClassName, titleClassName, headerStyle, titleStyle, }: SectionProps): JSX.Element;
+export {};