microsoft / fast-creator Goto Github PK
View Code? Open in Web Editor NEWAn application for designers and developers to create web experiences.
License: MIT License
An application for designers and developers to create web experiences.
License: MIT License
There may be instances where an outside source (via iframe) will need to update the Creator with different libraries before updating to use a data dictionary. This API could lookn like:
{
"type": "library::add",
"libraries": ["fast"]
}
As an additional requirement, it may be prudent to take another look at the ability to update the data dictionary, ensure it only includes the data dictionary and it also has a "type". This should be relatively safe to change, due to there presently being only one outside contributors.
Shortcut actions are being added in @microsoft/fast-tooling
which consist of the following:
Add the Shortcuts
service and these actions to the Creators root body element and preview body element.
When viewing https://explore.fast.design and https://create.fast.design on https://gtmetrix.com for performance analysis both fully between 4-6 seconds. Ideally, all FAST sites would fully load in under 2 seconds.
There are a few issues on GTMetrix reports that can be improved when looking at the following analysis performed.
Replace the current Preview React component in Creator with a new Preview web component. The new component is to be created in fast-creator with the intent of migrating it to fast-tooling later.
There is currently no footer in the newly migrated app. This needs to be rectified for security and compliance reasons.
This could be in the actual footer, or as a link to another page that shows the information required for compliance.
The Fluent Dialog component takes focus when it is initialized. This results in text fields in the right panel losing focus with each key press. Investigate if it is possible to block something within an iframe from taking focus from something in a parent window.
This may be related to the completion of microsoft/design-to-code#144 where a solution may be found.
There are some secrets pertaining to the server environment that may not be readily apparent to contributors, it would be good to know where these secrets originate from, whether that is GitHub or ADO.
server.js
filecd-create-stage.yml
fileIt also might be worthwhile to have README files in any directory where files of this type exist to explain the the presence of secrets and also have link to documentation used to create the files for future contributors who may be unfamiliar with what the .yml
files are for etc. as well as links to any markdown files in the CONTRIBUTORS.md
file under a devops section.
There should be a .yml
file that is triggered by a pull request and will be required for a pull request to be merged.
.yml
file should be used as a build gate for pull requests to the release
branch which is currently the default branchnpm run test
Currently component definitions are written manually, they should however be able to be generated from TypeScript.
Determine whether a library such as web component analyzer can be used to generate these files.
This feature is to facilitate communication, it will be a method by which all changelog items from the release are shown to any user accessing the app, determined by the last time the app was opened.
localStorage
information about when the user last visited the app
@microsoft/fast-tooling
and @microsoft/fast-creator
and renders HTML in a modal, depending on design with multiple pages or scrolling to show multiple releasesInvestigate what appropriate services offered by Azure are available for AI and Machine Learning.
Requirements:
Any code that generates models must be able to run on a local machine (no tight coupling with a specific service).
Additional notes on some of the things that might be part of the Machine Learning models:
Update instances of deprecated attributes names on fast-tooling components once PR microsoft/design-to-code#164 is complete.
The HTMLRenderLayerNavigation.resizeobserverselector attribute is replaced with "resize-observer-selector" and the File.progressCallback attribute is replaced with "progress-callback".
There should be a user settings page.
Currently the Form, or right rail, is a mess as it contains unordered attributes which can be confusing for the end user.
It has been noted by several people that the terminology for the branches is confusing as release
is tied to the staging server. For more clarity release
will be renamed to stage
and all relevant documentation updated. This will help collaborators who might otherwise find confusing between why there is a distinction between main
and release
. Additionally all "release" terms will be converted to "milestone" to align with GitHub naming.
The design token differences for fluent web components vs fast web components should be reflected in the design tokens pane.
Uploading JSON using the upload button causes library components to not be found.
Add default text to the HTML button.
Similar to #49
When the main
branch updates, trigger a deployment to production servers with a Webpack build. This will include a server "Swap" from Staging to Production. Staging then would be updated on the next merge to the release branch.
Font family and font size should be available in the CSS Layout component for "textual" elements.
Related to #50
h1
, p
, button
, span
, etc.)HTML elements can have default accessibility guidance, for example an <img />
element may need to have alt
attribute.
There should be a version number in the top left of the application as a FAST badge. This should be stored as a cookie on a users machine, so that if there is a new update an indicator should display. When clicked this should then have an overlay that the user can click/scroll through to see bug fixes and features that have been added since they last visited the site.
Now that Monaco has been added, it should also have intellisense for users editing code.
Currently blocked by microsoft/monaco-editor#1723
Describe the bug; what happened?
After adding a <fast-anchor>
and then clicking on it, the page will reload and the top portion of the page will be missing.
What are the steps to reproduce the issue?
<fast-anchor>
using the right panel dropdown<fast-anchor>
that appears in the preview areaWhat behavior did you expect?
This should not attempt to navigate away from the page, this behavior should be blocked. Additionally, no part of the page should disappear.
There is not enough distinction for what the preview switch is doing as there is already a "preview" in the canvas.
Components and libraries may make available certain component and library level CSS variables. These should be registered in such a way that the color picker can gain access to them.
Allow for individual user's branches users/name/*
to trigger a deployment to a temporary service where the PR can be tested in real world scenario and then upon PR completion this temporary service would be destroyed.
Allowing for PRs to be tested remotely without requiring local build/start/run. This will drastically speed up the testability of PRs and make it easier for others to review and provide feedback.
This change should update every time there is a navigation update. The Monaco Editor should scroll to the element that has been selected.
Integrate the new Box Model component into Creator. This should replace the margin, padding and width CSS fields.
Dependent on: microsoft/design-to-code#73
The Creator currently has a very large state object which controls all aspects of the app. This is unweildy and will not scale well going forward. A state management system would help isolate state update logic in a more methodical manner, this may be achieved using the DI and Observables from @microsoft/fast-element
. Due to mutation, this could be close to a mobx implementation
Currently the site is not a PWA, it does not use a manifest file etc. This was due to, potentially, server side issues with cache-busting.
Add steps in to implement the Creator site as a PWA. This includes:
Currently no text nodes are being displayed in the Navigation. This may have to do with disallowing string types, as we want to continue disallowing string attributes, but do want to allow text nodes, investigate how this can be accomplished.
One of the global variables that should be available is updating the font family and font size.
Currently the runtime environment is just the webpack dev server configuration which is not what is used on the server. Ideally the server configuration should be the same as the local production configuration.
Investigate the use of Docker to allow a similar run time environment to that of the server. This should not slow down local development time but should serve as a check against any potential issues that might occur on the production site.
The current "Design Tokens" tab does not represent what the tab is intended for. Instead this should be an area where default HTML elements can have global values set and libraries can register to have their own section inside for controlling their variables, in the case of FAST and Fluent web components this might be design tokens.
The fieldset is using the default stylings coming from the browser, this is in conflict with the rest of the CSS styles that are currently available.
Either the stylings should be updated, or the fieldset should be removed and replaced with the same label/field relationship.
Add a Ctrl + S
to save a project. This should save via a backend to a users account.
Lighthouse (Edge DevTools) is showing a low score on a11y for Creator.
This feature would add a github workflow that runs a scheduled cron job at the same interval as the publish in FAST tooling, an hour later. It should:
convert:version-files
scripts to update the version filesOther requirements:
Unordered lists <ul>
should include 3 <li>
items which themselves contain the short Lorem ipsum.
In the app/configs/{library-name}/*.examples.ts
files there are examples which get auto added if that element is added via the Form. These are the ones that should be edited for this task.
ul
elements (see above)li
elements (see above)The preview app carries unnecessary extra weight of the React library. This can be mitigated by converting the app to web components as it is relatively simple.
With the completion of microsoft/design-to-code#81 we will want to convert all web component libraries to use the custom elements manifest to interpret attributes and convert them to JSON Schema.
There should be a server.js file using express and helmet which can serve the production build of the Creator site.
Create a way for the "ALPHA" badge, which will be updated as releases are updated (eg, BETA, v1.0.0 etc.), to indicate that there are new changes since a user last arrived.
Design requirement for #27
create.fast.design
See the Add FAST tooling E2E testing for details on E2E testing dependencies.
Creator should only test for functionality specific to the Creator application. This includes such user interactions as "login", "user settings/account settings" etc. The FAST tooling will take care of the testing of packages and their interaction with each other by use of a manual testing app that simulates a Creator-like application.
The Creator should be able to handle multi-page workflows. This should also involve Eugene with the FAST2Figma plugin and the prototyping tool that Figma currently contains. This will be part of the prototyping story.
A marketing page with "about", "contact" etc. which a user may design in a multi-page prototype and want to see that clicking on anchors will navigate between the pages.
Requirements gathering will involve:
Investigate how the canvas area can use a base <body>
element instead of the current <div>
to allow full control of the page to the editor. This also pertains to @microsoft/fast-tooling
<html-render>
and sub-components on how they deal with extra padding currently needed to allow the pill to be displayed.
Take into account what changes will need to be made for fast-tooling and fast-creator.
Determine a list of changes and issues that should be filed in either repository.
Adding a piece of linked data using the <Form />
components linked data control, then pressing the "unset" arrow causes a runtime issue, does not remove the components.
@microsoft/fast-tooling-react
Firefox, Chrome, Safari, Microsoft Edge
No response
The "What's New" feature relies on beachball generated JSON, therefore even though the Creator is not a distributed package, it must version similarly to FAST tooling packages so that updates can be picked up.
Describe the bug; what happened?
When uploading a project file that includes several nested components, the call stack will be exceeded if those components are drag and dropped from the <Navigation />
component. The problem appears to occur in the <Form />
.
What are the steps to reproduce the issue?
If applicable, provide screenshots:
Uncaught RangeError: Maximum call stack size exceeded
at Module.DataType (index.js:1)
at Module.DataType (index.js:1)
at getBreadcrumbs (breadcrumb.js:16)
at getBreadcrumbs (breadcrumb.js:26)
at resolveDictionaryBreadcrumbs (breadcrumb.js:35)
at resolveDictionaryBreadcrumbs (breadcrumb.js:40)
at resolveDictionaryBreadcrumbs (breadcrumb.js:40)
at resolveDictionaryBreadcrumbs (breadcrumb.js:40)
at resolveDictionaryBreadcrumbs (breadcrumb.js:40)
at resolveDictionaryBreadcrumbs (breadcrumb.js:40)
The above error occurred in the <Form> component:
in Form (created by withJSS(Form))
in withJSS(Form) (created by Creator)
in div (created by Pane)
in Pane (created by withJSS(Pane))
in withJSS(Pane) (created by Creator)
in div (created by Row)
in Row (created by withJSS(Row))
in withJSS(Row) (created by Creator)
in div (created by Container)
in Container (created by withJSS(Container))
in withJSS(Container) (created by Creator)
in div (created by Context.Consumer)
in DesignSystemProvider (created by Context.Consumer)
in Background (created by Creator)
in Creator (created by Context.Consumer)
in Route (created by App)
in DesignSystemProvider (created by App)
in div (created by App)
in Router (created by BrowserRouter)
in BrowserRouter (created by App)
in App
in Unknown
Is there any additional context?
Some investigation reveals that modifying the ./packages/tooling/fast-tooling-react/src/form/utilities/breadcrumb.ts
on line 95 to:
if (typeof breadcrumbParent !== "undefined" && (breadcrumbParent.id !== dictionaryId && breadcrumbParent.dataLocation !== navigationConfigId)) {
prevents the call stack error, but causes other issues during the drop phase.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.