[ivette] move LabView API in ivette

ivette/src/ivette/index.tsx

+// --------------------------------------------------------------------------
+// ---  Lab View Component
+// --------------------------------------------------------------------------
+
+/**
+   @packageDocumentation
+   @module ivette
+ */
+
+import React from 'react';
+import { Label } from 'dome/controls/labels';
+import { DefineElement } from 'dome/layout/dispatch';
+import {
+  Rankify,
+  useGroupContext,
+  useLibraryItem,
+  useTitleContext,
+} from 'ivette@lab';
+
+/* --------------------------------------------------------------------------*/
+/* --- Fragments                                                          ---*/
+/* --------------------------------------------------------------------------*/
+
+export interface FragmentProps {
+  group?: string;
+  rank?: number;
+  children?: React.ReactNode;
+}
+
+/**
+   Ordered collection of LabView Components.
+   Otherwise, elements are ordered by `rank` and `id`.
+ */
+export function Fragment(props: FragmentProps) {
+  const { group, rank, children } = props;
+  const context = useGroupContext();
+  const base = context.order ?? [];
+  return (
+    <Rankify
+      group={group ?? context.group}
+      order={rank === undefined ? base : [...base, rank]}
+    >
+      {children}
+    </Rankify>
+  );
+}
+
+/* --------------------------------------------------------------------------*/
+/* --- Groups                                                             ---*/
+/* --------------------------------------------------------------------------*/
+
+export interface ItemProps {
+  /** Identifier. */
+  id: string;
+  /** Displayed name. */
+  label: string;
+  /** Tooltip description. */
+  title?: string;
+  /** Contents. */
+  children?: React.ReactNode;
+}
+
+/**
+   Defines a group of components. The components rendered
+   _inside_ its content are implicitely affected to this group,
+   unless specified. The group content are also rendered
+   in their specified order. For nested collections of components,
+   use `<Fragment/>` instead of `<React.Fragment/>` to specify order.
+ */
+export function Group(props: ItemProps) {
+  const { children, ...group } = props;
+  const context = useLibraryItem('groups', group);
+  return (
+    <Rankify
+      group={props.id}
+      order={context.order ?? []}
+    >
+      {children}
+    </Rankify>
+  );
+}
+
+// --------------------------------------------------------------------------
+// --- Views
+// --------------------------------------------------------------------------
+
+export interface ViewProps extends ItemProps {
+  /** Use this view by default. */
+  defaultView?: boolean;
+}
+
+/**
+   Layout of LabView Components.
+   Defines a predefined layout of components. The view is organized
+   into a GridContent, which must _only_ consists of:
+   - `<GridHbox>…</GridHbox>` an horizontal grid of `GridContent` elements;
+   - `<GridVbox>…</GridVbox>` a vertical grid of `GridContent` elements;
+   - `<GridItem id=…>` a single component.
+
+   These grid content components must be imported from the `dome/layout/grids`
+   module:
+   ```
+   import { GridItem, GridHbox, GridVbox } from 'dome/layout/grids';
+   ```
+ */
+export function View(props: ViewProps) {
+  useLibraryItem('views', props);
+  return null;
+}
+
+// --------------------------------------------------------------------------
+// --- Components
+// --------------------------------------------------------------------------
+
+export interface ComponentProps extends ItemProps {
+  /** Group attachment (defaults to group context) */
+  group?: string;
+  /** Ordering index (defaults to fragment context). */
+  rank?: number;
+}
+
+/**
+   LabView Component.
+   Defines a component and its content when incorporated inside a view.
+   Unless specified, the component will be implicitely attached
+   to the current enclosing group. The `rank` property can be used
+   for adjusting component ordering (see also `<Fragment/>` and `<Group/>`).
+ */
+export function Component(props: ComponentProps) {
+  useLibraryItem('components', props);
+  return null;
+}
+
+export interface TitleBarProps {
+  /*
+     @property {string} [icon] - displayed icon
+     @property {string} [label] - displayed name
+     @property {string} [title] - description tooltip
+     @property {React.Children} children - additional components to render
+   */
+  /** Displayed icon. */
+  icon?: string;
+  /** Displayed name (when mounted). */
+  label?: string;
+  /** Tooltip description (when mounted). */
+  title?: string;
+  /** TitleBar additional components (stacked to right). */
+  children?: React.ReactNode;
+}
+
+/**
+   LabView Component's title bar.
+   Defines an alternative component title bar in current context.
+   Default values are taken from the associated component.
+ */
+export function TitleBar(props: TitleBarProps) {
+  const { icon, label, title, children } = props;
+  const context = useTitleContext();
+  if (!context.id) return null;
+  return (
+    <DefineElement id={`labview.title.${context.id}`}>
+      <Label
+        className="labview-handle"
+        icon={icon}
+        label={label || context.label}
+        title={title || context.title}
+      />
+      {children}
+    </DefineElement>
+  );
+}
+
+// --------------------------------------------------------------------------

ivette/src/renderer/Application.tsx

@@ -15,7 +15,8 @@ import { GridHbox, GridItem } from 'dome/layout/grids';
 
 // --- Frama-C Plugins
 
-import { LabView, View, Group } from 'ivette';
+import { LabView } from 'ivette@lab';
+import { View, Group } from 'ivette';
 import Values from 'frama-c/eva/Values';
 import Dive from 'frama-c/dive/Dive';
 

ivette/src/renderer/LabView.tsx

@@ -2,11 +2,6 @@
 // ---  Lab View Component
 // --------------------------------------------------------------------------
 
-/**
-   @packageDocumentation
-   @module ivette
-*/
-
 import _ from 'lodash';
 import React from 'react';
 import * as Dome from 'dome';
@@ -21,7 +16,7 @@ import { Hbox, Hfill, Vfill } from 'dome/layout/boxes';
 import { IconButton, Field } from 'dome/controls/buttons';
 import { Label } from 'dome/controls/labels';
 import { Icon } from 'dome/controls/icons';
-import { DefineElement, RenderElement } from 'dome/layout/dispatch';
+import { RenderElement } from 'dome/layout/dispatch';
 
 import './style-labview.css';
 
@@ -125,7 +120,14 @@ interface GroupContext {
 
 const GROUP = React.createContext<GroupContext>({});
 
-function useLibraryItem(fd: string, { id, ...props }: any): GroupContext {
+export function useGroupContext() {
+  return React.useContext(GROUP);
+}
+
+export function useLibraryItem(
+  fd: string,
+  { id, ...props }: any,
+): GroupContext {
   const context = React.useContext(GROUP);
   React.useEffect(() => {
     const { group, order } = context;
@@ -140,13 +142,13 @@ function useLibraryItem(fd: string, { id, ...props }: any): GroupContext {
 /* --- Rankifyier                                                         ---*/
 /* --------------------------------------------------------------------------*/
 
-interface RankifyProps {
+export interface RankifyProps {
   group: string | undefined;
   order: number[] | undefined;
   children: React.ReactNode | undefined;
 }
 
-function Rankify(props: RankifyProps) {
+export function Rankify(props: RankifyProps) {
   const { group, order = [], children } = props;
   let rank = 0;
   const rankify = (elt: any) => {
@@ -174,170 +176,22 @@ function UseLibrary(props: { children?: React.ReactNode }) {
   );
 }
 
-/* --------------------------------------------------------------------------*/
-/* --- Fragments                                                          ---*/
-/* --------------------------------------------------------------------------*/
-
-export interface FragmentProps {
-  group?: string;
-  rank?: number;
-  children?: React.ReactNode;
-}
-
-/**
-   Ordered collection of LabView Components.
-   Otherwise, elements are ordered by `rank` and `id`.
- */
-export function Fragment(props: FragmentProps) {
-  const { group, rank, children } = props;
-  const context = React.useContext(GROUP);
-  const base = context.order ?? [];
-  return (
-    <Rankify
-      group={group ?? context.group}
-      order={rank === undefined ? base : [...base, rank]}
-    >
-      {children}
-    </Rankify>
-  );
-}
-
-/* --------------------------------------------------------------------------*/
-/* --- Groups                                                             ---*/
-/* --------------------------------------------------------------------------*/
-
-export interface ItemProps {
-  /** Identifier. */
-  id: string;
-  /** Displayed name. */
-  label: string;
-  /** Tooltip description. */
-  title?: string;
-  /** Contents. */
-  children?: React.ReactNode;
-}
-
-/**
-   Defines a group of components. The components rendered
-   _inside_ its content are implicitely affected to this group,
-   unless specified. The group content are also rendered
-   in their specified order. For nested collections of components,
-   use `<Fragment/>` instead of `<React.Fragment/>` to specify order.
- */
-export function Group(props: ItemProps) {
-  const { children, ...group } = props;
-  const context = useLibraryItem('groups', group);
-  return (
-    <Rankify
-      group={props.id}
-      order={context.order ?? []}
-    >
-      {children}
-    </Rankify>
-  );
-}
-
 // --------------------------------------------------------------------------
-// --- Views
-// --------------------------------------------------------------------------
-
-export interface ViewProps extends ItemProps {
-  /** Use this view by default. */
-  defaultView?: boolean;
-}
-
-/**
-   Layout of LabView Components.
-   Defines a predefined layout of components. The view is organized
-   into a GridContent, which must _only_ consists of:
-   - `<GridHbox>…</GridHbox>` an horizontal grid of `GridContent` elements;
-   - `<GridVbox>…</GridVbox>` a vertical grid of `GridContent` elements;
-   - `<GridItem id=…>` a single component.
-
-   These grid content components must be imported from the `dome/layout/grids`
-   module:
-   ```
-   import { GridItem, GridHbox, GridVbox } from 'dome/layout/grids';
-   ```
- */
-export function View(props: ViewProps) {
-  useLibraryItem('views', props);
-  return null;
-}
-
-// --------------------------------------------------------------------------
-// --- Components
+// --- Grid Item
 // --------------------------------------------------------------------------
 
-export interface ComponentProps extends ItemProps {
-  /** Group attachment (defaults to group context) */
-  group?: string;
-  /** Ordering index (defaults to fragment context). */
-  rank?: number;
-}
-
-/**
-   LabView Component.
-   Defines a component and its content when incorporated inside a view.
-   Unless specified, the component will be implicitely attached
-   to the current enclosing group. The `rank` property can be used
-   for adjusting component ordering (see also `<Fragment/>` and `<Group/>`).
- */
-export function Component(props: ComponentProps) {
-  useLibraryItem('components', props);
-  return null;
-}
-
 interface TitleContext {
   id?: string;
   label?: string;
   title?: string;
 }
+
 const TITLE = React.createContext<TitleContext>({});
 
-export interface TitleBarProps {
-  /*
-     @property {string} [icon] - displayed icon
-     @property {string} [label] - displayed name
-     @property {string} [title] - description tooltip
-     @property {React.Children} children - additional components to render
-   */
-  /** Displayed icon. */
-  icon?: string;
-  /** Displayed name (when mounted). */
-  label?: string;
-  /** Tooltip description (when mounted). */
-  title?: string;
-  /** TitleBar additional components (stacked to right). */
-  children?: React.ReactNode;
+export function useTitleContext() {
+  return React.useContext(TITLE);
 }
 
-/**
-   LabView Component's title bar.
-   Defines an alternative component title bar in current context.
-   Default values are taken from the associated component.
- */
-export const TitleBar = ({ icon, label, title, children }: any) => {
-  const context = React.useContext(TITLE);
-  const { id } = context;
-  if (!id) return null;
-  return (
-    <DefineElement id={`labview.title.${id}`}>
-      <Label
-        className="labview-handle"
-        icon={icon}
-        label={label || context.label}
-        title={title || context.title}
-      />
-      {children}
-    </DefineElement>
-  );
-};
-
-// --------------------------------------------------------------------------
-// --- Grid Item
-// --------------------------------------------------------------------------
-
 const GRIDITEM = {
   className: 'dome-container dome-xBoxes-vbox dome-xBoxes-box',
   handle: '.labview-handle',

ivette/tsconfig.json

@@ -43,7 +43,8 @@
     "resolveJsonModule": true,                /* Allow to load JSON files as module. */
     "baseUrl": ".",                           /* Base directory to resolve non-absolute module names. */
     "paths": {                                /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-      "ivette": [ "src/renderer/LabView.tsx" ],
+      "ivette@lab": [ "src/renderer/LabView.tsx" ],
+      "ivette": [ "src/ivette" ],
       "frama-c/api/*": [ "api/generated/*" ],
       "frama-c/*": [ "src/frama-c/*" ],
       "dome": [ "src/dome/renderer/dome.tsx" ],

ivette/webpack.renderer.js

@@ -29,7 +29,8 @@ module.exports = {
     alias: {
       'frama-c/api':  path.resolve( __dirname , 'api/generated' ),
       'frama-c':      path.resolve( __dirname , 'src/frama-c' ),
-      'ivette':       path.resolve( __dirname , 'src/renderer/LabView' ),
+      'ivette@lab':   path.resolve( __dirname , 'src/renderer/LabView' ),
+      'ivette':       path.resolve( __dirname , 'src/ivette' ),
       'dome/misc':    path.resolve( DOME , 'misc' ),
       'dome/system':  path.resolve( DOME , 'misc/system.ts' ),
       'dome$':        path.resolve( DOME , 'renderer/dome.tsx' ),