headstorm / foundry-ui Goto Github PK

Default label should be the value that the handle represents.

As a user of the UI library without much interest in CSS or styling (but who wants to change the color scheme), I want to be able to use a simple color scheme object like the one exported from hs-ui, but I don't want to have to replace every use of every color through a new styled prop. It's unnecessary and I hate styling and CSS.

AC:
Implement a method for replacing the files in the constants directory with custom ones.

• Implement base UI
• Fully themable
• Add story with meaningful knobs
• Add figma frame to story
• A11y compliance
• Unit/snapshot testing

Built on the native hr element. Can be fancy with an svg shape or simple, or have multiple exports/versions controlled the API. I'll leave this open ended to see if someone wants to get creative with it.

Sub-components:

• Line

API:

• isShort

• Storybook with a hello world story will suffice for this ticket 👍

When using Foundry with server-side rendering (SSR) apps, i.e. apps created with NextJS, don't have a window object and will require polyfilling.

AC:

• Test out Foundry UI in a NextJS application
• Find a solution to get it working (Google is your friend)

Take the results of ticket #2 and create our theming API.

• Implement base UI
• Fully themable
• Add story with meaningful knobs
• Add figma frame to story
• A11y compliance
• Unit/snapshot testing

Figma board: https://www.figma.com/file/3r2G00brulOwr9j7F6JF59/Generic-UI-Style?node-id=102%3A87

When the team moves away from using the Jira project management board, replace the links and instruction for the Jira project board with a link to the Github Issues page, ie: https://github.com/Headstorm/rasa-ui/issues, and revise Contributing instructions to help new open source add and contribute to issues.

• Implement base UI
• Fully themable
• Add story with meaningful knobs
• Add figma frame to story
• A11y compliance
• Unit/snapshot testing

Figma design URL: https://www.figma.com/file/3r2G00brulOwr9j7F6JF59/Generic-UI-Style?node-id=83%3A17

Specific API:

• children
• color
• size
• isProcessing
• isLoading
• iconPrefix
• iconSuffix

• Implement base UI
• Fully themable
• Add story with meaningful knobs
• Add figma frame to story
• A11y compliance
• Unit/snapshot testing

Sub-components

• Container
• Icon
• PointerFeedback
  • for hover effects, click effects, loading, etc.

API:

• children
• icon
• type
• isLoading
• isProcessing

While we could pass the valueContainerProps to the containerProps of Button - this would overwrite the isOpen data. We need to merge the props.

Currently it is being included in consuming apps' node_modules

AC:

• ensure it is not included in consuming apps' node_modules

From @jakeoien:

This ticket was intending to solve an issue where linking Foundry in a local project causes multiple versions of React to load. We came up with this as the solution. Turns out, this isn’t enough - we’re still seeing the issue even after this change. The problem we’re running into is that these storybook dependencies are a part of the foundry package itself.

I’m wondering if a better way of going about this would be to move all of the storybook stuff out of our src/ directory so that it’s not actually a part of our bundled code.

The big thing this blocks is trying to make changes like bugfixes using a local version of foundry, that currently won’t work.

From me:

I’ve seen packages (@react-three/drei for instance) that put all the storybook stuff in .storybook - which may solve the issue for us.

We are currently using an image in the /public folder which doesn’t work when hosted on github pages. We should instead host one to foundry-ui.com and use that instead on storybook.

AC

• Upload new image to be hosted on foundry-ui.com (@aVileBroker to provide image and upload to S3)
• Update storybook image path to the new hosted url

Once the project has an angular library, and an exportable component exists, publish the library package to npm. It should be importable by another project. (test with codesandbox.com or another quick-setup environment)

Getting access to or creating the npm organization will be a big first step.

• Implement base UI
• Fully themable
• Add story with meaningful knobs
• Add figma frame to story
• A11y compliance
• Unit/snapshot testing

Figma design URL: https
https://www.figma.com/file/3r2G00brulOwr9j7F6JF59/Generic-UI-Style?node-id=102%3A29

API:

• value
• isClearable
• error
• isValid
• isMulti
• iconPrefix
• placeholder
• onChange
• onKeyPress
• onKeyDown
• onKeyUp

Take a base component and abstract one or more styles to a separate file for reuse using a CSS in JS system.

It will lay the groundwork for abstract sizing (small, medium, large), as well as consistent baselines, colorschemes, etc. This will also make the library smarter by powering the styling engine with TypeScript, make it more DRY, and more generally more consistent.

For long lists of options, we - and material ui - are quite inefficient at rendering them, causing long lists to be very slow/janky in opening and scrolling.

Virtualizing the options list and passing each option its current status (in view vs not in view) would be very powerful. We can roll our own intersection observer hook to achieve this, or use a package - but building our own would be the least risky approach imo.

AC:

• As an option scrolls out of view, it should be replaced with an div of the height it originally was (or another performant alternative, feel free to do some research on best practices. It would be bad if it ends up being worse on performance than doing nothing)

See examples of how custom scrollbars can be created using JS to detect the scrollable area available, as well as the current scroll position to achieve custom scrollbars.

https://twitter.com/sebastienlorber/status/1516847672992350211
https://medium.com/headstorm/in-search-of-a-better-scroll-ux-pattern-3a22d4cff5f1

The default behavior should be a simple scrollbar that is similar to OSX scrollbars. (floating, expand/appear when hovered near gutter)

We should use standard terminology from HTML scrollbar styling, like thumb, gutter, handle, etc.

Add an optional scroll progress indicator subcomponent that shows the current scroll progress

Should not break the current API
This will improve accessibility for screen readers, etc.

• Implement base UI
• Fully themable
• Add story with meaningful knobs
• Add figma frame to story
• A11y compliance
• Unit/snapshot testing

API:

• values
• options
• multi
• onInputChange
• onSelect
• clearable
• onClear

Suggested sub-components

• ValueContainer
• ValueItem
• OptionsContainer
• OptionItem

For developers who are new to Foundry, create a Usage section in the package readme to describe the recommended usage of Foundry with global styling.

From the original hs-ui pitch:
HS-UI is:
... opinionated in structure and approach, while remaining flexible in look and feel ...

In order to be able to import hs-ui/react/Button, and with a minimal amount of work, get a branded, customized look/feel, an architectural decision needs to be made.

It's also important to have a really nice looking default for developers who don't have ANY front-end theming understanding and are totally fine with just having headstorm orange all over their app.

This seems like a promising tool, as it considers mono-repos like ours:
https://github.com/storybookjs/storybook-deployer

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Add the Headstorm brand colors to a centralized file which can be exported and used with hs-ui, as well as imported from the library by external projects.

Use lerna's publish scripts to automatically publish a new version of the relevant repository to npm when merged to master. Any automated version bumping should be limited to patch bumps. Minor/Major version bumps should be a separate action.

AC:
When a merge to master occurs:

• run test script
• run build script
• run publish script
• add change log to tag

AC:

• When near the bottom of the window, the dropdown should open upward
• Add prop to prevent this behavior if desired (flipDirectionToStayInView or something, default to true)

The package will need to be initialized as an angular project ready for importing through npm.

ng g library hs-angular-ui may be all that is necessary.

Read more here: https://medium.com/@esanjiv/complete-beginner-guide-to-publish-an-angular-library-to-npm-d42343801660

• Implement base UI
• Fully themable
• Add story with meaningful knobs
• Add figma frame to story
• A11y compliance
• Unit/snapshot testing

Figma frame:
https://www.figma.com/file/3r2G00brulOwr9j7F6JF59/Generic-UI-Style?node-id=126%3A2

Sub-components

• Container
• DragHandle
• HandelLabel
• Slider
• SelectedRange
• MinMaxLabel
• Marker
• MarkerLabel

API:

• onHandleDrag
• disabled
• min
• max
• start
  • value
  • label
• end
  • value
  • label
• pushable
• markers

• Implement base UI
• Fully themable
• Add story with meaningful knobs
• Add figma frame to story
• A11y compliance
• Unit/snapshot testing

Figma Link:
https://www.figma.com/file/3r2G00brulOwr9j7F6JF59/Generic-UI-Style?node-id=102%3A0

Specific API:

• children
• header
• footer
• elevation
• onClick

Research and choose a robust testing platform which focuses on UI testing.

There is currently partial support, but we need to pass values array into a useSprings hook, which get updated by a single useDrag (based on id of drag handle maybe)

Ensure it has unit tests, storybook story, and adheres to the foundry-ui themeing architecture
https://www.figma.com/file/3r2G00brulOwr9j7F6JF59/Foundry-UI?node-id=105%3A6

One potential option is pa11y:
https://github.com/pa11y/ci

It should line up with the a11y add-on used in storybook to manually test accessibility issues.

Add ability to customize SVG element passed into the component

Rather than animating r and a circle radius, animate a transform: scale(0) to scale(1) on the passed in svg element

See feedback on:
#96
#106
for more info.

For hs-ui, hs-react-ui, and hs-angular-ui, there are different directions for theming and usage.

We should have a default internal search which sorts the current option list, which can be turned off and onChange callbacks (also pass the onDebouncedChange callback up as a separate function)

I like to use fuse.basic.js for fuzzy searching lists on client-side. It weights the results and allows for mispellings, searching multiple properties in a nested object, and weights for each property in nested objects. It also returns where in the strings the matches occur so that we can highlight/bold the letters which match the search.

The API could be

• searchable
• searchFiltersOptions (needs a better name - but this would be what tells us to filter the list ourselves, and add the boldness to the matched patterns)
• onSearchChange
• onDebouncedSearchChange

• Implement base UI
• Fully themable
• Add story with meaningful knobs
• Add figma frame to story
• A11y compliance
• Unit/snapshot testing

Figma board:
https://www.figma.com/file/3r2G00brulOwr9j7F6JF59/Generic-UI-Style?node-id=102%3A14

Sub-components

• ClickTrap
• Card
• CloseButton

API:

• onClickOutside
• onClose
• header
• body
• footer
• background-blur
• background-darkness

This allows user to click through more than one option without having to reopen the dropdown each time.

• This may be fixed - validate that is the case to complete this.

• Implement base UI
• Fully themable
• Add story with meaningful knobs
• Add figma frame to story
• A11y compliance
• Unit/snapshot testing

The benefits are keeping people on the main domain and allowing us to maintain docs for older versions (like v0, v1, v1.1, next, etc)

Perhaps because of styled-components, the a11y add-on for storybook doesn't work as it does with the angular version of hs-ui.

A cursory google search didn't find any explanation, so there could be another issue.

AC:

• The a11y add-on should be functioning and show passing/failing accessibility tests

From the storybook page http://localhost:9009/?path=/story/textinput--text-input-with-all-the-gadgets , not able to type more than one character at a time on this storybook page (TextInput with all the gadgets)

Hint: From the storybook page, if you look at the actions tab it is only calling onChange and not any of the others you see in the basic text input.

A/C
Should be able to type multiple characters.

• Implement base UI
• Fully themable
• Add story with meaningful knobs
• Add figma frame to story
• A11y compliance
• Unit/snapshot testing

Figma design URL:
https://www.figma.com/file/3r2G00brulOwr9j7F6JF59/Generic-UI-Style?node-id=102%3A88

Make sure to use the html <label> tag under the hood for accessibility and other native features.

Specific API:

• text
• children
• isInvalid
• isValid
• isRequired

Currently when running yarn build in the hs-react-ui folder, it creates a compiled-down version of the index.ts file but doesn't correctly compile the components and make them available as it should.

One possibility for this ticket is to start a brand new create-react-library and copy the components over to it, then replace hs-react-ui with that version. If you want to continue to try and trouble shoot the current environment, you can look at other libraries created with create-react-library to compare them.