feat: add, remove, rename routines

packages/entity/src/trait-components/behaved.jsx

@@ -1,6 +1,13 @@
 import {join} from 'path';
 
-import {PropTypes, React} from '@latus/react';
+import {
+  PropTypes,
+  React,
+  useEffect,
+  useRef,
+  useState,
+} from '@latus/react';
+import {useJsonPatcher} from '@persea/json';
 import {
   Tab,
   Tabs,
@@ -15,12 +22,69 @@ const Behaved = ({
   json,
   path,
 }) => {
+  const patch = useJsonPatcher();
+  const editingRef = useRef();
+  useEffect(() => {
+    editingRef.current?.focus();
+  });
+  const [isEditing, setIsEditing] = useState(false);
   const tabs = [];
   const tabPanels = [];
   Object.entries(json.params.routines).forEach(([key, expressions]) => {
+    const routinePath = join(path, 'params/routines', key);
     tabs.push(
-      <Tab key={key}>
+      <Tab
-        {key}
+        key={key}
+        onDoubleClick={() => {
+          if (false === isEditing) {
+            setTimeout(() => {
+              editingRef.current?.select();
+            }, 10);
+          }
+          setIsEditing(key);
+        }}
+      >
+        {
+          key === isEditing
+            ? (
+              <input
+                type="text"
+                value={key}
+                onBlur={() => {
+                  setIsEditing(false);
+                }}
+                onChange={({target: {value}}) => {
+                  patch({
+                    op: 'move',
+                    from: routinePath,
+                    path: join(path, 'params/routines', value),
+                  });
+                  setIsEditing(value);
+                }}
+                onKeyPress={({key}) => {
+                  if ('Enter' === key) {
+                    setIsEditing(false);
+                  }
+                }}
+                ref={editingRef}
+              />
+            )
+            : key
+        }
+        &nbsp;
+        <button
+          type="button"
+          className="routines__tab-remove"
+          onClick={() => {
+            patch({
+              op: 'remove',
+              path: routinePath,
+            });
+          }}
+        >
+          ✕
+        </button>
+
       </Tab>,
     );
     tabPanels.push(
@@ -28,7 +92,7 @@ const Behaved = ({
         <Expressions
           context={entity.context}
           value={expressions}
-          path={join(path, 'params/routines', key)}
+          path={routinePath}
         />
       </TabPanel>,
     );
@@ -38,9 +102,51 @@ const Behaved = ({
       <div className="behaved__routines-label label">
         <div className="behaved__routines-label-text">Routines</div>
         <Tabs>
-          <TabList>
+          <div className="behaved__routines-tab-bar">
-            {tabs}
+            <button
-          </TabList>
+              className="traits__add-trait"
+              onClick={() => {
+                let i = 1;
+                let name = 'untitled';
+                while (json.params.routines[name]) {
+                  name = `untitled (${i++})`;
+                }
+                patch({
+                  op: 'add',
+                  path: join(path, 'params/routines', name),
+                  value: {
+                    type: 'expressions',
+                    expressions: [
+                      {
+                        type: 'expression',
+                        ops: [
+                          {
+                            type: 'key',
+                            key: 'Flow',
+                          },
+                          {
+                            type: 'key',
+                            key: 'nop',
+                          },
+                          {
+                            type: 'invoke',
+                            args: [],
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                });
+                setIsEditing(name);
+              }}
+              type="button"
+            >
+              +
+            </button>
+            <TabList>
+              {tabs}
+            </TabList>
+          </div>
           <div className="routines__tab-panes">
             {tabPanels}
           </div>

packages/entity/src/trait-components/behaved.scss

@@ -1,3 +1,9 @@
+.behaved__routines-tab-bar {
+  display: flex;
+  margin-bottom: 1em;
+  overflow: auto;
+}
+
 .behaved__routines-label[class] {
   flex-wrap: nowrap;
   > .react-tabs {