Ideas

• Have reusable templates (be able to drag custom templates into canvases)
• Additional labels to group them

Ideas:

• Collapse side nav when clicking outside of the component
• Close button (somewhere on the top of the pane maybe?)
• Collapse side nav after dragging a component onto the editor
• etc...

Most svgs have the same "dropdown / 01 default..." title. That's wrong.

Titles should be the name of the component.

• UI
• render
• react export
• angular export

At least a full dashboard and editing a complex component

In the project and in the react exports.

It's a major version change so there might be breaking changes. Check release notes and test everything.

We want to get some nice highlighting and autocomplete.

Challenge:

monaco treats it as a (s)css file (as it should), while we use it for content of a class. This leads to wrong highlighting and squiggly error lines.

An inelegant solution is to prefill the editor with &{ } and put our styles inside of it. This works for an exported solution because exported code uses scss.

Two problems with this are:

• looks ugly and users might not know what to do with it
• we're currently not compiling scss in browser so the styles won't apply correctly in the wysiwyg editor

Solutions to explore:

• tell monaco that we're only editing the content of a class
• disable the first and last two lines that have the .class-name { } and only use the lines between for class content
• something else?

Contain component specific things near component and make it unnecessary to change react-fragment.ts for net new components.

They are always added at the moment.

This means that the exported code will have unused imports in case... when those imports aren't used.

Probably will be fixed when ##23 is addressed since there are currently no options to choose from in the "create new fragment from template" modal.

Steps to reproduce:

1. Create a new fragment from scratch
2. Create a new fragment from template
3. Delete the fragment created from template from the dashboard
4. Try to edit the fragment created from scratch
5. ???
6. Profit.

Text component currently supports only... text. It's inserted in place or as a span if a custom class is applied to it.

We should support

• titles
• bold
• italic
• underline
• links
• text alignment
• ...

To achieve that we'll need a rich text editor, pull out the HTML without non-carbon classes (and apply any carbon classes we might need).

Can we export test scaffolds?
What would be the best way to do this?

We don't need both since everything is in the local storage anyway. This is a leftover from xenon.

That's currently possible from code sandbox after clicking "Edit on CodeSandbox" link.

Is this something users would want accessible more easily?
They can already copy the individual files' content directly.

It might need some work in the exported code to make it possible to run after unpacking. At the moment we're optimizing for CodeSandbox and copying component files.

SCSS is correctly exported in code.

Since it's not compiled in browser, wysiwyg editor won't correctly show it.
It only correctly shows plain css at the moment.

We should compile scss -> css before applying classes to editor.

helperText and others...

a modal reporting a mismatch and deciding which to pick - global or create a local?

something else?

Carbon angular seems to have different grid options than react and may be outdated.

This means we might need to update carbon-components-angular grid options to latest carbon.
Or at least match the results.

Current rough steps:

• Create a-component for it in fragment-components folder
• Add a tile in elements-pane.tsx
• Render in fragment.tsx
• Add AStyleUI to style-context-pane.tsx
• Export React
• Export Angular

• ** Icons - Moiz --not available and not needed for now
• - Radio - Moiz
• - Context menu - Moiz
• - Combobox - Akshat
• - Dropdown - Akshat
• - Tiles - Akshat
• - Accordion - Doni
• - Link - Moiz
• - Input - Z
• - Number -Z
• - Button - Z
• - Tag - Doni
• - Progress indicator - Akshat

There are some security deps we could update.
Audit currently reports some jest conflicts.

If you're working on #16, you might want to check this one too.

Things missing for double binding values from outside the component.

Checkbox does this for the checked property

• make all props available vs. make only used available vs. black box
• #49
• ...

What else?

Code exporters should check if classes have content before exporting them (in scss files)

Classes should still be applied to elements because they might have a significance in the app they'll be imported.

It should be a simple fix.

Contain component specific things near component and make it unnecessary to change react-fragment.ts for net new components.

• Inputs for translatable strings (assigned from componentObj strings)
• Inputs for properties
• Outputs for double binding
• Outputs for actions
• ...

• expandable
• theme
• ...

Needs to update UI, render and react+angular exports

Ideas:

• IndexedDB https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
• localStorage