mapikit/meta-editor

About meta-editor

meta-editor is a GUI tool used for building systems quickly and more efficiently, using meta-system as its engine.

Meta editor is made with svelte and electron.

Developing

As usual, before you start, remember to run

npm install

Meta editor has two development modes which can be accessed with the following commands

# Start a vite dev server that can be accessed trough a browser.
npm run dev

# Start a vite dev server as well an electron instance.
npm run dev-electron

Note: In both cases changes to meta-editor frontend will automatically reload the view, EXCEPT for changes to the electron files. These will require you to relaunch the app entirely.

Building

Similarly, meta-editor can be built with two commands:

# Build the application with vite.
npm run build

# Build the vite part of the application as well as electron components.
npm run build-electron

Note: Building is not the same as packaging and that will be worked on in the future

meta-editor's Issues

Page Flow Template + Navigation

Description

This issue is to create a navigation flow in the Meta-Editor, allowing the user to traverse the views in the editor.

Imported projects folder should be a UUID or NanoID to avoid conflicts

Description

In order to avoid naming conflicts with folder, we should use a UUID folder name.

System Overview Panel Development

Use the created design of #9 for the completion of this issue.

Create "open project location" button on managing projects view

Prepare design for "Browse Plugins" view of Meta-Editor

Information

Plugins are extensions for the Meta-Editor. They modify the application and add extra functionality.

The browse plugins view is responsible for letting the user navigate through community-made Plugins, see their descriptions, select and add them to their Meta-Editor.

Design Criteria

• Requires a search bar for searching available plugins by their name
• Plugins are registered with tags for easier filtering, which means we would require a "Tag Picker" for further filtering the plugins list.
• Clicking a plugin should bring up its description

Subtasks

• Create Criteria for the view (what it has to do, which features)
• Design view

Designs for System Overview panel

Description

This task is for creating both the design and its requirements for the System Overview Panel for the Meta-Editor.

Panels are dockable views you can rearrange and resize for every configuration you edit in Meta-Editor. One of these panels is the System Overview panel.

I'll share the finalized design screenshots here when done.

Design/UX requirements

• The view should favor a vertical layout, for it is, primarily, a list-based layout.
• It should contain all system elements and their titles, possibly separated by their types: Addons, Schemas, Business Operations, and Environment Variables.
• It should also say the project name and the current version you're editing.
• Through it, it should be possible to create new elements of any category, though editing them is not possible by this view.
• It should be possible to duplicate elements, assigning them a new name based on the original one, such as "element (copy)".
• We should also be able to delete elements through this view.

Tasks Steps

• Requirements
• Design

Meta-Editor Header and Sidebar

Create Meta-Editor header and sidebar using layout.svelte and in accordance to the model.

Designs for "Browse Addons" Modal

Description

This first version of the Browse Addons modal won't use a service to search through already validated Addons, which means we will instead just pick an origin for the addon, and a path/location/name for it. This will download or import the addon and validate it locally.

Steps

• Create feature Requirements
• Design Modal

Requirements

• When opening, the modal comes empty with a selection to pick from: Addon from Disk, Addon from NPM, or CDN.
• There's a field to type the path/package name/url.
• When "from disk" is selected, input is a file picker.
• there is an import button that is only active when both fields are filled.
• After clicking the button, importing and validating process is started.

Notification System

Description

We need a standard way of notifying users of processes happening in the background, Async errors, actions information, and other useful feedbacks.

The proposal here is to have a global UI component that we can use to warn, inform, and announce to the user.

Proposal

A UI component capable of displaying stacked notifications from any source within Meta-Editor.

Should have:

• warn(), info(), error() methods that spawns a notification window.
• Notification history. Could reset every session, and have a button to clean them all.
• Methods with a parameter to tell how long the notification hangs until it is automatically dismissed. If not present, or equals to -1, user must manually dismiss it.
• Handler to make hovering the cursor in the notification to reset its timer.

Montar Boilerplate Landing Page

Devemos ter um boilerplate para que seja possível começar a esenvolver este front end.

• Implementar React
• Implementar Typescript
• Usar Hot-Reloading
• Implementar Sass
• Implementar Mobx

Implementation of "Create Project" button on the projects page

Description

There is a button currently present in the view, but it is not doing any action.

Criteria

• Clicking the button should create a card in the list with default values
• Should also create the according folder

Fazer Wireframe/Protótipo da página

Devemos fazer um modelo wireframe e em seguida um protóripo antes do desenvolvimento da página para que o desenvolvimento seja mais rápido e direcionado.

A página deve cumprir os seguintes requisitos, não necessariamente nesta ordem:

• Mostrar o produto;
• Mostrar que tipo de problema ele resolve;
• Conter uma demo simples;
• Prover uma forma de realizar cadastro;
• Prover uma forma de direcionar a pessoa para o Dashboard;

Schemas Panel Development

Use the design created at #10 for the completion of this feature.

Designs for "Edit Addon Configuration" Panel

Hub view recent projects card actions

Description

The card on the HUB view currently is only a display of information. We should enable actions on it to allow the user navigate to his project quickly.

Requirements

• Add a button to navigate to the last edited version
• Add a dropdown to select and navigate to another version.

Deleting two projects with same name causes the editor to fail deleting

Description

When an operation failure happens, we shouldn't update the store. This is currently happening as described in the title.

Designs for "Edit Schema" Panel

Project Pages Small Fixes

Description

Fixes for the project page:

• Version Dropdown won't close if clicking on the arrow
• Include version text to the dropdown click area
• Clicking outside on the project title while editing it should be equivalent to pressing enter

Hub View Development

Create Meta-Editor Hub view, where user will be able to view and access:

• recent projects
• browse plugins

As of right now plugins won't be available, and section should contain only a "coming soon" text.
More details are available on penpot.

Designs for "Schemas" Panel

Description

This issue tracks the design development for the Schemas Panel in the Meta-Editor.

Steps

• Create Feature Requirements
• Design around the created requirements

Requirements

• Has to list all Schemas, even those created by Addons
• Can create and edit schemas through this screen.
• Can delete Schemas
• Schemas can be renamed
• Of course, only schemas created by the user can be deleted/edited
• Can navigate to schemas format editing (which is another view)