WIP: [Tiny-lisp] test build

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@lambdulus/core": "^0.0.7",
+    "@lambdulus/tiny-lisp-core": "git+ssh://git@github.com:lambdulus/tiny-lisp-core.git",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
@@ -42,4 +43,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

src/Constants.ts

@@ -10,7 +10,6 @@ export const CLEAR_WORKSPACE_CONFIRMATION : string =
 
                                           Are you sure?`
 
-
 export function mapBoxTypeToStr (type : BoxType) : string {
   switch (type) {
     case BoxType.UNTYPED_LAMBDA:
@@ -75,6 +74,7 @@ export function loadSettingsFromStorage () : GlobalSettings {
 
 
 export function loadAppStateFromStorage () : AppState {
+  return EmptyAppState/*
   const maybeState : string | null = localStorage.getItem('AppState')
 
   if (maybeState === null) {
@@ -90,11 +90,12 @@ export function loadAppStateFromStorage () : AppState {
 
       return EmptyAppState
     }
-  }
+  }*/
 }
 
 export function updateAppStateToStorage (state : AppState) : void {
-  localStorage.setItem('AppState', JSON.stringify(state))
+  const {stringify} = require('flatted/cjs');
+  localStorage.setItem('AppState', stringify(state))
 }
 
 export function updateNotebookStateToStorage (notebook : NotebookState, index : number) {

src/Types.ts

@@ -1,5 +1,6 @@
 import { UntypedLambdaState, UntypedLambdaSettings } from "./untyped-lambda-integration/Types"
 import { NoteState } from "./markdown-integration/AppTypes"
+import { TinyLispState } from "./tiny-lisp-integration/Types"
 
 export enum BoxType {
   UNTYPED_LAMBDA = 'UNTYPED_LAMBDA',
@@ -26,15 +27,11 @@ export interface AbstractSettings {
   type : BoxType,
 }
 
-export interface LispBox extends AbstractBoxState {
-  // TODO: delete this placeholder and implement it
-}
-
 export interface LispSettings extends AbstractSettings {
   // TODO: delete this placeholder and implement it
 }
 
-export type BoxState = UntypedLambdaState | LispBox | NoteState // or other things in the future
+export type BoxState = UntypedLambdaState | TinyLispState | NoteState // or other things in the future
 
 export type Settings = UntypedLambdaSettings | LispSettings // or other things in the future
 

src/components/Box.tsx

@@ -15,6 +15,8 @@ import { NoteState } from '../markdown-integration/AppTypes'
 import Note from '../markdown-integration/Note'
 
 import Empty from '../empty-integration'
+import TinyLispBox from '../tiny-lisp-integration/TinyLispBox'
+import { TinyLispState } from '../tiny-lisp-integration/Types'
 
 // import { BoxState } from '../AppTypes'
 
@@ -59,6 +61,17 @@ export default function Box (props : BoxProperties) : JSX.Element {
       />
     )
   }
+  if (type === BoxType.LISP) {
+    return (
+      <TinyLispBox
+        state={ state as TinyLispState }
+        isActive={ isActive }
+        isFocused={ isFocused }
+
+        setBoxState={ updateBoxState }
+      />
+    )
+  }
   else {
     return (
       <Empty />

src/components/BoxTitleBar.tsx

@@ -219,7 +219,8 @@ export default class BoxTitleBar extends Component<Props, State> {
                   break
                 }
                 case BoxType.MARKDOWN: {
-                  updateBoxState({ ...state, isEditing : true })
+                  updateBoxState({ ...state, isEditing : true } as NoteState)
+                  // updateBoxState(resetMarkdownBox(state as NoteState))
                   break
                 }
               }

src/components/PickBoxTypeModal.tsx

@@ -2,10 +2,14 @@ import React from 'react'
 import { GlobalSettings, BoxState } from '../Types'
 import { createNewMarkdown } from '../markdown-integration/AppTypes'
 import { UntypedLambdaSettings, UntypedLambdaState } from '../untyped-lambda-integration/Types'
-import { createNewUntypedLambdaExpression, ADD_BOX_LABEL, CODE_NAME as UNTYPED_CODE_NAME } from '../untyped-lambda-integration/AppTypes'
+
+import { createNewUntypedLambdaExpression, ADD_BOX_LABEL as UNTYPED_ADD_BOX_LABEL, CODE_NAME as UNTYPED_CODE_NAME } from '../untyped-lambda-integration/AppTypes'
+import { CODE_NAME as TINY_LISP_CODE_NAME, ADD_BOX_LABEL as TINY_LISP_ADD_BOX_LABEL } from '../tiny-lisp-integration/Constants'
 
 
 import '../styles/PickBoxTypeModal.css'
+import { createNewTinyLispExpression } from '../tiny-lisp-integration/Constants'
+import { TinyLispSettings } from '../tiny-lisp-integration/Types'
 
 
 interface Props {
@@ -18,6 +22,7 @@ export default function PickBoxTypeModal (props : Props) : JSX.Element {
   const { addNew, settings } : Props = props
 
   const untLSettings : UntypedLambdaSettings = settings[UNTYPED_CODE_NAME] as UntypedLambdaState
+  const tinyLSettings : TinyLispSettings = settings[TINY_LISP_CODE_NAME] as TinyLispSettings
 
   const addLambdaBox = (
     <div className='add-box--group'
@@ -31,29 +36,35 @@ export default function PickBoxTypeModal (props : Props) : JSX.Element {
         className='plusBtn'
         title='Create new λ box'
       >
-        <p className='create-box--big'>λ</p>
-        <p className='creat-box--label'>{ ADD_BOX_LABEL }</p>
+        <div
+          className='plusBtn'
+          title='Create new λ box'
+        >
+          <p className='create-box--big'>λ</p>
+          <p className='creat-box--label'>{ UNTYPED_ADD_BOX_LABEL }</p>
+        </div>
       </div>
     </div>
   )
 
-  // const addLispBox = (
-  //   <div className='add-box--group'
-  //     onClick={ (e) => {
-  //       e.stopPropagation()
-  //       // this.setState({ opened : false })
-  //       addNew({__key : Date.now().toString()} as BoxState) } // NOTE: just for now
-  //     }
-  //   >
-  //     <div
-  //       className='plusBtn'
-  //       title='Create new Lisp box'
-  //     >
-  //       <p className='create-box--big'>()</p>
-  //       <p className='creat-box--label'>+ Lisp</p>
-  //     </div>
-  //   </div>
-  // )
+
+const addLispBox = (
+      <div className='add-box--group'
+        onClick={ (e) => {
+          e.stopPropagation()
+          // this.setState({ opened : false })
+          addNew(createNewTinyLispExpression(tinyLSettings)) } // NOTE: just for now
+        }
+      >
+        <div
+          className='plusBtn'
+          title='Create new Lisp box'
+        >
+          <p className='create-box--big'>()</p>
+          <p className='creat-box--label'>{ TINY_LISP_ADD_BOX_LABEL }</p>
+        </div>
+      </div>
+      )
 
   const addMDBox = (
     <div className='add-box--group'
@@ -78,7 +89,7 @@ export default function PickBoxTypeModal (props : Props) : JSX.Element {
       <div className='modal--create-box'>
         <div className='modal--create-box--container'>
           { addLambdaBox }
-          {/* { addLispBox } */}
+          { addLispBox }
           { addMDBox }
         </div>
       </div>

src/components/TopBar.tsx

@@ -21,8 +21,8 @@ export default function TopBar (props : Props) : JSX.Element {
   const { name } : NotebookState = ntbk
 
   // const dehydrated : object = dehydrate(state)
-
-  const serialized : string = JSON.stringify(ntbk)
+    const {stringify} = require('flatted/cjs');
+  const serialized : string = stringify(ntbk)
   const link : string = createURL(serialized)
 
   return (

src/styles/PickBoxTypeModal.css

@@ -24,7 +24,7 @@
 
 .add-box--group {
   display: inline-block;
-  width: 50%;
+  width: 33.3%;
   text-align: center;
   /* margin: 30px; */
   margin-right: 0%;

src/tiny-lisp-integration/Constants.ts

@@ -0,0 +1,33 @@
+import { InstructionShortcut } from "@lambdulus/tiny-lisp-core";
+import { BoxType } from "../Types";
+import { TinyLispSettings, TinyLispState, TinyLispType } from "./Types"
+
+export const ADD_BOX_LABEL = '+ Lisp Expression'
+
+export const CODE_NAME = 'TINY_LISP'
+
+
+export function createNewTinyLispExpression (defaultSettings : TinyLispSettings) : TinyLispState {
+    return {
+        __key : Date.now().toString(),
+        type : BoxType.LISP,
+        title : 'New Tiny Lisp Expression',
+        minimized : false,
+        settingsOpen : false,
+
+        subtype: TinyLispType.EMPTY,
+        expression : '',
+        mouseOver: null,
+        cleanNeeded: false,
+        interpreterState: null,
+        errorMsg: null,
+
+        editor : {
+            placeholder : '',
+            content : '',
+            caretPosition : -1,
+            syntaxError : null,
+        },
+        current : InstructionShortcut.DUMMY
+    };
+}