Components Library

[darraghjburke]

Tasks:

• [x] Milestone 1 - Components Library Infrastructure
  • ~Setup storybook~
  • ~Create migration plan for existing components (see readme.md)~
  • Create Jest visual snapshot tests (see Storyshots)
  • Generate snapshot of storybook for every PR
  • Make sure that the storybook is building
  • Copy everything from the dist folder of the storybook into the snapshot folder (see prepareSnapshot.ts)
• [ ] Milestone 2 - Extract Node System from NME
  • Copy all node graph components to shared components library
  • Remove dependencies on Babylon
  • Create stories for node graph
  • Create local styling for node graph in .scss files so it can be imported anywhere and look right (instead of relying on application-specific stylesheets)
  • Delete node graph components in NME and integrate the shared components version
  • Refactor node graph to be "React-ive" (ie using components, JSX, props rather than imperatively adding DOM elements)
• [ ] Milestone 3 - Extract GUI editor components
  • Extract each UI element from GUI editor one-by-one, prioritizing components that will be used in VSM
    • If it's already an independent component, move it to the shared components library. If not, create a new component
    • Extract styling from GUI editor stylesheets into local component-based styles
    • Rewire the GUI editor to use the shared component
  • Tentative list of components needed:
    • Bar
    • Divider
    • ColorDisplay
    • ColorPicker
    • LabelAndElement
    • Toggle
    • NumericInput
    • PaneGroup
    • Pane
    • Icon
    • TextInput
    • UnitButton
    • PropertyLine
    • SwitchInput
    • DropDownInput
    • SliderInput
    • ColorInput
  • At this point, we are ready to build VSM
• [ ] Milestone 4 - Extract remaining UI components, use them inside of our existing tools
  • Will need to plan this at a later stage

Design Goals

• [ ] Alignment of UI language across tools

  • Design layout of Inspector utilizing design language from GUI Editor
  • Update layout for ACE utilizing design language from GUI Editor
  • Update layout for NME utilizing design language from GUI Editor
  • Update layout for Texture Editor utilizing design language from GUI Editor
  • Validate layout for Performance Profiler
  • Design layout for embedded version of Performance Profiler

• [ ] Accessibility

  • Define dark mode/light mode parameters for our design language
  • Validate our tools for baseline accessibility using MS tooling

• [ ] New Assets

  • Create glyph fonts for icons to reduce overhead of image downloads
  • Identify how to split icon sets to multiple fonts so that our downloads are as small as possible for the given tool
  • New icons as needed for above designs
  • New component layouts as needed for tool parameters that don't conform to the components specified in GUI Editor

[thomlucc]

Closing as @carolhmj is doing this step by step when needed as part of the work for VSM