getspacetime / makani Goto Github PK

We're currently hiding the navigation on the docs page for small screens. We need to have navigation for the docs page that works for mobile.

Need to design/implement a form context to group validation concerns when dealing with multiple connected form components.

Good first issue for a more experienced dev.

• Modal Service (see: ToastService as a possible start)
• Other Modal implementations seem to have performance issues in some cases, especially on MacOS when using .NET MAUI. Modal performance should be tested in this scenario (e.g. minimal delays, no pixelated shadows)
• Spacetime API Client had a version of this but has since been removed. May be useful to reference.
  - Alert.razor
  - Modal.razor

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

Create an MkBadge component that accepts the different states.

Found in MkState:

• Success
• Danger
• Warning
• Information

Badges should only accept text input.

Badges can optionally have an additional icon (see examples).

Examples
https://tailwindui.com/components/application-ui/elements/badges
https://mui.com/material-ui/react-badge/
https://getbootstrap.com/docs/5.2/components/badge/

• Unit tests
• Performance tests

• Light mode
• Dark Mode
• Labels
• Icons

The docs page is hosted on Github Pages. When someone enters the docs via the base URL, all navigation works fine.

However, linking to a page that is not the base URL returns a 404. It appears to be possible to intercept this on the 404 page.

References
https://github.com/rafgraph/spa-github-pages
https://blog.elmah.io/blazor-wasm-404-error-and-fix-for-github-pages/

https://twitter.com/smarte03/status/1531975366784466950?s=21&t=5T08k2ONySTav5aFUNxftQ

• Basic input field light/dark theme
• Data binding a value
• Built in validations
  • Required
  • Numbers only satisfied by regex validator
  • Min number / Max number
  • Min length / Max length
  • Regex
  • Email* probably not now, but should be covered by regex support
  • Phone* probably not now, but should be covered by regex support
• Validation hooks for custom / a la carte validations new issue: #49
• Error state
• Debounce / rate limiting
• Helper text
• Placeholder text
• #51
• Adornments new issue: #50
• Labels
  • Default
  • Floating

The current implementation of the syntax highlighter does not support switching to a light theme when the overall theme of the library changes.

• Add Parameter AutomaticDarkMode
• AutomaticDarkMode should default to false and be opt-in since this introduces more JS and could have a minor impact on performance.
• If AutomaticDarkMode is true, the component should automatically switch between light/dark themes.
• Add parameter to manually specify dark vs light mode.
• This parameter should default to dark mode.

Outstanding questions

• Prism, the library behind the syntax highlighter component, utilizes the presence of the CSS on the index.html page. Need to investigate the best way to integrate this appropriately.
• There could be an opportunity to better support theming. Themes in general utilize this CSS on the index page.

The close button is not wired up yet. Clicking the close button should supersede the timer and begin removing the toast immediately.

Acceptance Criteria

• Component API design
• Should accept an optional card title
• Should accept a card body
• Should accept an optional card footer
• Should accept an optional image (placed at top or left)
• Styling is optional

The title of the Docs page is "Dark mode disabled" - this started appearing when the MkDarkModeToggle was added. We're using this title in the SVG as the caption for accessibility.

Need to find out:

1. Why the addition to the SVG causes this?
2. What is the fix?
3. Does the SVG code need to change?

In ToastServiceTests.cs the assertions in AddToast_ShouldRemoveMessages to check if items are being removed are failing on the server. They pass locally "works on my machine".

Need to dig in and see why they're failing and potentially better way to test this.

• Light mode
• Dark Mode
• Labels
• Auto-generated ID
• Validation - choose at least one option

Add the ability to copy the code in a syntax highlighter component.

Resources
https://prismjs.com/plugins/copy-to-clipboard/
https://prismjs.com/plugins/toolbar/

The docs page is being used to "dog food" the new sidebar component. This would

1. Add support to the docs page sidebar to always float along the page
2. Optionally, build this support into the sidebar. (this can be done later as a separate issue)

Notes

• Can this be done with only Tailwind / CSS?
• If JS is required, need to document the impact of including this and potentially making it "opt-in"

h/t to: https://twitter.com/awright18/status/1532039357531672578