janechu / design-to-code Goto Github PK

A system of development tools, and utilities used à la carte or as a suite to build enterprise-grade websites and applications.

License: MIT License

JavaScript 24.69% TypeScript 72.90% HTML 0.84% Rust 0.28% CSS 1.30%

design-to-code's Introduction

Design to Code

This is the Design to Code project, containing a set of packages that can be combined to create complex workflows. The goal of these workflows is to allow users to create and modify their own web based experiences, from individual web components to completed web sites.

Check out our documentation site to get started.

Packages

`design-to-code`

The design-to-code package contains a web worker referred to as the Message System and infrastructure for registering, posting, and receiving messages that aide in editing and navigating a serializable data structure that maps to JSON schema. There are also various services available to integrate commonly used libraries with the Message System, such as AJV and the Monaco Editor. To learn more, check out the package README.

`design-to-code-react`

The design-to-code-react package contains various React components that work with the message system provided by design-to-code to edit data, render data as HTML, and navigate data. To learn more, check out the package README.

Contact

Submit requests and issues on GitHub.

To join in on the conversation, use our discussions tab or join our discord server.

design-to-code's People

Contributors

Stargazers

Watchers

Forkers

janechu2 reneechen108 jiachenmbhj

design-to-code's Issues

[Feature]: Allow $ref to point to any sub property

What package(s) should this feature be added to?

design-to-code-react

Summary

Not just the $defs JSON pointer.

[Feature]: Update React tests to be Playwright

What package(s) should this feature be added to?

design-to-code-react

Summary

Testing is currently disabled due to the updating of React creating a break between the old testing environment (Jest/Enzyme) which is now no longer supported.

To achieve the following:

Regain test coverage
Disassociate testing from React so that a web component version of React components can be tested in parallel

The old Jest/Enzyme tests should be converted to Playwright.

[Bug]: Occasional Form Refresh Issue when Clicking into Elements

What happened?

Seems to be schema an instance independent but including anyways.

Json:

{
  "fruits": [
    "banana😀 😃 😄 😁 😆 😅 😂 🤣 🥲 🥹 ☺️ 😊 😇 🙂 🙃 😉 😌 😍 🥰 😘 😗 😙 😚 😋 😛 😝 😜 🤪 🤨 🧐 🤓 😎 🥸 🤩 🥳 😏 😒 😞 😔 😟 😕 🙁 ☹️ 😣 😖 😫 😩 🥺 😢 😭 😮‍💨 😤 😠 😡 🤬 🤯 😳 🥵 🥶 😱 😨 😰 😥 😓 🫣 🤗 🫡 🤔 🫢 🤭 🤫 🤥",
    "orange",
    "pear"
  ],
  "vegetables": [
    {
      "veggieName": "potato",
      "veggieLike": true
    },
    {
      "veggieName": "broccoli",
      "veggieLike": false
    }
  ]
}

Schema:

{
  "$id": "https://example.com/arrays.schema.json",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "description": "A representation of a person, company, organization, or place",
  "type": "object",
  "properties": {
    "fruits": {
      "type": "array",
      "items": {
        "type": "string"
      }
    },
    "vegetables": {
      "type": "array",
      "items": {
        "$ref": "#/$defs/veggie"
      }
    }
  },
  "$defs": {
    "veggie": {
      "type": "object",
      "required": [
        "veggieName",
        "veggieLike"
      ],
      "properties": {
        "veggieName": {
          "type": "string",
          "description": "The name of the vegetable."
        },
        "veggieLike": {
          "type": "boolean",
          "description": "Do I like this vegetable?"
        }
      }
    }
  }
}

What package(s) are causing the problem?

design-to-code, design-to-code-react, design-to-code-wasm

What browsers are you seeing the problem on?

Chrome

Relevant log output

n/a

Add a compatibility section on JSON schema drafts

Description

The documentation should have a compatibility table for JSON schema drafts to show current support.

[Bug]: Rule Item Form Maximum call stack size exceeded

What happened?

For rule schemas, the rule items cannot be viewed in a form when selected. EX. ICE

What package(s) are causing the problem?

No response

What browsers are you seeing the problem on?

No response

Relevant log output

Unexpected Application Error!
Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded
    at $r (https://ccs-claims-dv1.geico.net/vendors.js:8:132158)
    at $r (https://ccs-claims-dv1.geico.net/vendors.js:8:132242)
    at $r (https://ccs-claims-dv1.geico.net/vendors.js:8:132242)
    at $r (https://ccs-claims-dv1.geico.net/vendors.js:8:132242)
    at $r (https://ccs-claims-dv1.geico.net/vendors.js:8:132242)
    at $r (https://ccs-claims-dv1.geico.net/vendors.js:8:132242)
    at $r (https://ccs-claims-dv1.geico.net/vendors.js:8:132242)
    at $r (https://ccs-claims-dv1.geico.net/vendors.js:8:132242)
    at $r (https://ccs-claims-dv1.geico.net/vendors.js:8:132242)
    at $r (https://ccs-claims-dv1.geico.net/vendors.js:8:132242)

[Feature]: Support multiple array type items definitions

What package(s) should this feature be added to?

design-to-code, design-to-code-react

Summary

Per the spec, if the items for an array type is an array, map items to that array - https://cswr.github.io/JsonSchema/spec/arrays/

Example JSON schema:

{
    "type": "array",
    "items": [
        {
            "type": "string"
        },
        {
            "type": "number"
        }
    ]
}

Currently this reads "untitled" for all items and provides an un-clickable link.

[Feature]: Allow the creation of any properties - adds support additionalProperties

What package(s) should this feature be added to?

design-to-code-react

Summary

A legitimate use case of JSON schema may be the free form creation of an object with properties that can be any type. The JSON schema may appear as simply as:

{
    "type": "object"
}

Requirements:

There should be an "add property" button
Clicking "add property" will create two fields, one for the key and one for the value
The key should be a text input
The value should create an interface where:
- A dropdown is provided with types commensurate with JSON schema "type"
- Selecting a "type" creates a control for that type, e.g. creating a "boolean" generates a checkbox

Challenges:

This control will need to be rendered on any type of object that does not specify properties.
The control will need to evaluate all properties of the object and determine how to display them
Navigating through nested objects or arrays may prove to be an issue, a possible solution would be to create a temporary JSON schema for the object

[Feature]: Resolve $ref

What package(s) should this feature be added to?

design-to-code, design-to-code-react

Summary

Ensure that the $ref in JSON schema specification is resolved in the Form component.

Requirements

$ref should resolve to any $id in the schemaDictionary
- The URI-references in $ref resolve against the schema’s Base URI example:
```
{
    "$id": "https://example.com/foo",
    "$ref": "/bar"
}
```
Where "/bar" resolves to "https://example.com/bar"
$ref should resolve any $defs
$ref should resolve any JSON pointer (see #144)

[Feature]: Add a validation web component

What package(s) should this feature be added to?

design-to-code

Summary

This web component should interact with the AjvValidator message system service and render a list of clickable links of all current errors. The links when clicked should send navigation updates.

Investigate how to deal with definitions ($defs JSON schema keyword)

Description

Per the JSON schema format, the $defs reference should allow recursion and referencing inside a JSON schema. This should be allowed. Investigate how this can work.

Remove the dependency on @microsoft/fast-components

Description

There is a dependency on @microsoft/fast-components which is a deprecated package and causes dependency issues when attempting to upgrade.

Requirements

Remove all references to the @microsoft/fast-components package
Convert all web components either to pure CSS styling, or local web components

[Feature]: Allow JSON schema and JSON instance as parts of the monaco editor service

What package(s) should this feature be added to?

design-to-code, design-to-code-react

Summary

The following should be allowed in the monaco editor:

Display the JSON schema or JSON instance
Clicking on items in the JSON schema or JSON instance should send navigation updates to the message system

[Feature]: Create a web component that is a filterable how-to guide for the Form

What package(s) should this feature be added to?

design-to-code

Summary

The guidance for the generated form is hard to understand at times, while a user is creating JSON schema it would be good to have a handy reference guide for the documentation on the form.

Some things to consider:

Filterable
Each document should contain example(s)

This guidance should be specific to the form, therefore the naming of the web component should reflect that, for example <dtc-form-guidance>.

The web component should be injected into the documentation site.

There should be a superset of a "guidance" component that intakes a series of documents. These documents could be generated by a scripts, such that the guidance can be written down in markdown format, converted to HTML, then added to the web component.

What this might look like:

create-form-guidance.js // targets markdown and converts to a typescript file exporting HTML as a string
HOW_TO_GENERATE_LABELS.md
HOW_TO_REFER_TO_ARRAY_DATA_FOR_TEXT_DISPLAY.md

form-guidance/
└─ form-guidance.ts
└─ form-guidance.style.ts
└─ form-guidance.template.ts
└─ form-guidance.define.ts
└─ files/
   └─ HOW_TO_GENERATE_LABELS.ts
   └─ HOW_TO_REFER_TO_ARRAY_DATA_FOR_TEXT_DISPLAY.ts
   └─ index.ts // exporter

List of Topics

Ongoing.

Getting started
Creating restrictive schemas
Generating labels from title
Referring to an array data location for text display
Adding required for object properties
Using noAdditionalProperties
Creating dictionaries
Using oneOf to define separate sub schemas
Using references with the $ref vocabulary for recursive schemas

[Feature]: Make $id Field not Required

What package(s) should this feature be added to?

No response

Summary

Currently when the $id field is absent the render does not work. Request would be to gracefully ignore if this field is not present and do nothing or warn.

Example Schema currently breaks render:

{
  "$schema": "https://json-schema.org/draft/2019-09/schema",
  "title": "Example Schema",
  "type": "object",
  "properties": {
    "helloworld": {
      "title": "Hello World Label",
      "type": "string"
    }
  }
}

Desired behavior is for it to be rendered as if it had the extra field:

"$id": "https://example.com",

Enable text editing in the preview window

Description

Add the ability for edited inline text in the preview window to be sent to the parent window to update the main message system. If this does not occur, the text should not update on blur.

[Feature]: Add support for the "format" keyword

What package(s) should this feature be added to?

design-to-code-react

Summary

This change would add support for the format keyword for the Form component where it makes sense.

See https://json-schema.org/draft/2019-09/json-schema-validation#rfc.section.7.3

It should include the following controls being added:

"date" - Control created - <input type="date" />
"time" - Control created - <input type="time" />
"date-time" - Control created - <input type="datetime-local" />
"email" - Control created - <input type="email" />

All other defined formats, as they do not conform with an input type, will still create a control based on their type.

Enable navigation updates via the preview window

Description

When navigating in the preview window in the Editor application allow navigation updates to be sent to the parent window to update the root message system.

[Feature]: Allow additional properties

What package(s) should this feature be added to?

design-to-code-react

Summary

Per the creation of #205 this will reuse the "un-typed" control and apply it to type "object". Additional properties will be mapped to this control and shown as text, and reinterpreted as JSON.

[Bug]: When the AJV validation service throws an error from AJV this is uncaught

What happened?

AJV may throw an error, this should be handled by the AJV service.

What package(s) are causing the problem?

design-to-code

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

Relevant log output

No response

[Bug]: Cannot read properties of undefined (reading 'splice')

What happened?

When an array item is added and the delete button is clicked it creates this error.

What package(s) are causing the problem?

design-to-code

What browsers are you seeing the problem on?

No response

Relevant log output

Uncaught TypeError: Cannot read properties of undefined (reading 'splice')
    at In.<computed>.<computed>.data.sourceDataLocation (message-system.min.worker.js:1:21439)

Add Contributing doc for each package

What package(s) should this feature be added to?

design-to-code, design-to-code-react, design-to-code-wasm

Summary

Add Contributing.md to each package, design-to-code, design-to-code-react, design-to-code-wasm

[Feature]: Remove the ellipsis from the article titles in the guidance component

What package(s) should this feature be added to?

design-to-code

Summary

The article titles should wrap instead of truncating with an ellipsis.

Enable oneOf and anyOf dropdowns without moving to a section

Description

This task is to allow the form to select oneOf or anyOf from the dropdown of available items and generate the appropriate example data (if necessary) and form elements under the dropdown. This should update if the oneOf/anyOf selection changes, removing the data and replacing it.

Add code coverage for playwright

Using the nyc library, add code coverage. This will help in closing #133.

[Bug]: Rendering for additional properties appears misaligned

What happened?

The "+" appears misaligned as well as any properties that are there, appears to be too much space between property key and control.

What package(s) are causing the problem?

In addition the icon for array item removal will change from a "-" to a trash can, and so will the icon for dictionary item removal.

[Bug]: Bugs found related to number fields and mouse wheel events

What happened?

Found an error related to number fields in a form and mouse wheel events in react, when modifying a number field while using the mouse wheel up or down at the same time an error would occur.

What package(s) are causing the problem?

design-to-code

What browsers are you seeing the problem on?

Safari

Relevant log output

TypeError: undefined is not an object (evaluating “bn[0]”)

[Bug]: Array Item Naming Render Issue

What happened?

When adding the following schema I am unable to add new items to the array in the rendered form.

{
  "$schema": "https://json-schema.org/draft/2019-09/schema",
  "$id": "https://example.com/1609-example.schema.json",
  "title": "Example Schema",
  "type": "array",
  "dtc:form:control:array:display-text": "foo",
  "items": {
    "type": "object",
    "properties": {
      "foo": {
        "type": "string",
        "title": "Foo"
      }
    }
  }
}

Gives:

3vendors.js:8 Uncaught TypeError: r.push is not a function
    at Object.R [as onChange] (vendors.js:8:125047)
    at Object.onChange (vendors.js:8:176943)
    at vendors.js:8:82853
    at Object.$e (vendors.js:8:234439)
    at qe (vendors.js:8:234593)
    at vendors.js:8:254454
    at Lr (vendors.js:8:254548)
    at Mr (vendors.js:8:254962)
    at vendors.js:8:260390
    at uc (vendors.js:8:323729)

Proposed solution

The solution is for there to be a global option, and a schema specific option which can override it.

Global

Add a prop to the <Form /> specifying the type of truncation for the breadcrumbs.

The initial options should allow the most recent item as text, the previous breadcrumbs are collapsed to a dropdown with a folder icon and the default "show all breadcrumbs" behavior.

Const obj:

const breadcrumbBehavior = {
    showAll: "show-all", // default
    dropdown: "dropdown",
}

...

<Form breadcrumbs={"dropdown"} />

This is commensurate with our future work with the Form as a web component as this will become an attribute.

Schema scope

There may be cases in which one method is preferable to the others for a certain JSON schema. In these cases the JSON schema may contain the following:

{
    "$id": "https://example.com/my-schema.json",
    "dtc-breadcrumbs": "dropdown",
    ...
}

[Feature]: Allow additional items

What package(s) should this feature be added to?

design-to-code-react

Summary

Whenever a type of "array" is defined, if "additionalItems": true or "additionalItems" is not defined (and therefore assumed to be true), a dropdown from the "+" should be provided allowing the user to create some arbitrary JSON from controls. For example if the user wants to create a new item into the array, they can do so and specify the type.

Default data created when specifying the type:

boolean should create a true,
string should create "",
number should create 0,
object should create {},
array should create []
null should create null

The user should have the option of specifying a data location of text to display.

Example:

{
    "type": "array",
    "dtc:item-text": "foo",
    "items": {
        "type": "object",
        "properties": {
            "foo": {
                "type": "string",
            }
        }
    }
}

[Feature]: Add Playwright snapshots

What package(s) should this feature be added to?

design-to-code-react

Summary

For visual diffing we should add Playwright snapshots and integrate them into the build gate.

Note: This could be problematic depending on the build gate agent setup.

[Bug]: There is no fallback for breadcrumb text

What happened?

The breadcrumbs, if the text is an empty string or undefined it does not show, there should be a fallback to provide a clickable link.

What package(s) are causing the problem?

design-to-code-react

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

Relevant log output

No response

[Bug]: Unable to ddd item with “type”: “array” json schema

What happened?

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "Generated schema for Root",
  "type": "array",
  "items": {
    "type": "object",
    "properties": {
      "firstName": {
        "type": "string"
      },
      "lastName": {
        "type": "string"
      }
    },
    "required": [
      "firstName",
      "lastName"
    ]
  }
}

In the json schema defined above, clicking on "add item" results in a Type error: undefined is not an object (evaluating 'r.push') error

What package(s) are causing the problem?

design-to-code

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

[Bug]: Styling for the invalid error list is missing

What happened?

The styling for the classes assigned to the dropdown error list is missing.

What package(s) are causing the problem?

design-to-code-react

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

[Bug]: Styling for object dictionaries is buggy

What happened?

The styling of the dictionary shows the "-" icon overlapping other elements.

What package(s) are causing the problem?

design-to-code-react

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Investigate the usefulness of undo/redo

Description

Currently the undo/redo icons create some confusion and may be unnecessary for certain implementations, these should be optional. Investigate and potentially remove these.

[Bug]: A required boolean appears as "false"

What happened?

When a boolean property is required and undefined, it appears as false as a radio.

example:

{
    "type": "object",
    "properties": {
        "foo": {
            "type": "boolean"
        }
    },
    "required": ["foo"]
}

What package(s) are causing the problem?

design-to-code-react

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

Relevant log output

No response

[Feature]: Update navigation when clicking validation errors

What package(s) should this feature be added to?

design-to-code-react

Summary

Currently the data location is shown in the error list. Each of these should be a clickable item that navigates to that area of the form.