More progress with docs

theatre/studio/src/TheatreStudio.ts

@@ -23,7 +23,9 @@ export interface ITransactionAPI {
   set<V>(pointer: Pointer<V>, value: V): void
   unset<V>(pointer: Pointer<V>): void
 }
-
+/**
+ *
+ */
 export interface PaneClassDefinition<
   DataType extends PropTypeConfig_Compound<{}>,
 > {
@@ -34,11 +36,28 @@ export interface PaneClassDefinition<
   }>
 }
 
-export type IExtension = {
+/**
+ * A Theatre.js Studio extension. You can define one either
+ * in a separate package, or within your project.
+ */
+export interface IExtension {
+  /**
+   * Pick a unique ID for your extension. Ideally the name would be unique if
+   * the extension was to be published to the npm repository.
+   */
   id: string
+  /**
+   * Set this if you'd like to add a component to the global toolbar (on the top)
+   */
   globalToolbar?: {
+    /**
+     * A basic react component.
+     */
     component: React.ComponentType<{}>
   }
+  /**
+   * Introduces new pane types.
+   */
   panes?: Array<PaneClassDefinition<$FixMe>>
 }
 
@@ -47,7 +66,25 @@ export type PaneInstance<ClassName extends string> = {
   instanceId: string
   definition: PaneClassDefinition<$FixMe>
 }
-
+/**
+ * This is the public api of Theatre's studio. It is exposed through:
+ *
+ * Basic usage:
+ * ```ts
+ * import studio from '@theatre/studio'
+ *
+ * studio.initialize()
+ * ```
+ *
+ * Usage with **tree-shaking**:
+ * ```ts
+ * import studio from '@theatre/studio'
+ *
+ * if (process.env.NODE_ENV !== 'production') {
+ *   studio.initialize()
+ * }
+ * ```
+ */
 export interface IStudio {
   readonly ui: {
     /**
@@ -65,17 +102,8 @@ export interface IStudio {
   }
 
   /**
-   * Initializes the studio. Call this in your index.js/index.ts module.
-   *
-   * Usage with **tree-shaking**:
-   * ```ts
-   * import studio from '@theratre/studio'
-   *
-   * // Add this check if you wish to not include the studio in your production bundle
-   * if (process.env.NODE_ENV === "development") {
-   *   studio.initialize()
-   * }
-   * ```
+   * Initializes the studio. Call it once in your index.js/index.ts module.
+   * It silently ignores subsequent calls.
    */
   initialize(): void
 
@@ -105,10 +133,23 @@ export interface IStudio {
 
   /**
    * The current selection, consisting of Sheets and Sheet Objects
+   *
+   * Example:
+   * ```ts
+   * console.log(studio.selection) // => [ISheetObject, ISheet]
+   * ```
    */
   readonly selection: Array<ISheetObject | ISheet>
 
-  extend(extension: IExtension): void
+  /**
+   * Registers an extension
+   */
+  extend(
+    /**
+     * The extension's definition
+     */
+    extension: IExtension,
+  ): void
 
   getPanesOfType<PaneClass extends string>(
     paneClass: PaneClass,
@@ -118,6 +159,12 @@ export interface IStudio {
     paneClass: PaneClass,
   ): PaneInstance<PaneClass>
 
+  /**
+   * Returns the Theatre.js project that contains the studio's sheets and objects.
+   *
+   * It is useful if you'd like to have sheets/objects that are present only when
+   * studio is present.
+   */
   getStudioProject(): IProject
 }
 

theatre/studio/src/index.ts

@@ -1,18 +1,23 @@
+/**
+ * @module @theatre/studio
+ */
 import {setStudio} from '@theatre/studio/getStudio'
 import {Studio} from '@theatre/studio/Studio'
-export type {IScrub} from '@theatre/studio/Scrub'
-export type {IStudio} from '@theatre/studio/TheatreStudio'
+
 import * as globalVariableNames from '@theatre/shared/globalVariableNames'
 import type {$FixMe} from '@theatre/shared/utils/types'
 import StudioBundle from './StudioBundle'
 import type CoreBundle from '@theatre/core/CoreBundle'
-export {default as ToolbarSwitchSelect} from './uiComponents/toolbar/ToolbarSwitchSelect'
-export {default as ToolbarIconButton} from './uiComponents/toolbar/ToolbarIconButton'
-export {default as ToolbarDropdownSelect} from './uiComponents/toolbar/ToolbarDropdownSelect'
+import type {IStudio} from '@theatre/studio/TheatreStudio'
 
 const studioPrivateAPI = new Studio()
 setStudio(studioPrivateAPI)
-export const studio = studioPrivateAPI.publicApi
+
+/**
+ * The main instance of Studio. Read more at {@link IStudio}
+ */
+const studio: IStudio = studioPrivateAPI.publicApi
+
 export default studio
 
 registerStudioBundle()
@@ -60,3 +65,9 @@ function registerStudioBundle() {
     studioBundle.registerCoreBundle(possibleCoreBundle)
   }
 }
+
+export {default as ToolbarSwitchSelect} from './uiComponents/toolbar/ToolbarSwitchSelect'
+export {default as ToolbarIconButton} from './uiComponents/toolbar/ToolbarIconButton'
+export {default as ToolbarDropdownSelect} from './uiComponents/toolbar/ToolbarDropdownSelect'
+export type {IScrub} from '@theatre/studio/Scrub'
+export type {IStudio, IExtension} from '@theatre/studio/TheatreStudio'

theatre/studio/src/panels/DetailPanel/propEditors/DeterminePropEditor.tsx

@@ -68,7 +68,7 @@ const propEditorByPropType: {
   enum: () => <></>,
   boolean: BooleanPropEditor,
   stringLiteral: StringLiteralPropEditor,
-  cssrgba: () => <></>,
+  // cssrgba: () => <></>,
 }
 
 const DeterminePropEditor: React.FC<{