icgc-argo/uikit

Re-usable React Components for ICGC-ARGO sites

uikit's Issues

SVG throwing error with Next v9

Consolidate package.json to top-level

Upgrade dependencies

• upgrade dependencies that to latest versions
• upgrade storybook (keep same writing style of stories, no need to move to new style)
• upgrade React
  • ensure peer dependency works
• upgrade emotion to next major version
  • ensure components do not break
  • ensure uikit is still working as a dependency

Export SVGs

Make SVGs into named exports i.e. so they can be used in Next components.

POC: making UI Kit theme provider work with third party project

• assembling already existing work and integrating to ensure it will work together.

ui kit: local dev setup

3. local dev setup

• needs to be a prescribed way to run the uikit locally, with automatic reloading on code change
• this should be done before tackling component improvements

Fix uikit v2 issues

• fix leftover testing string in Tabs component
• review PR for issue 71 for other problems

🐛emotion/core usage

Describe the bug

some usage of older emotion api - emotion/core
didn't break build because its a dependency of storybook

Steps To Reproduce

Steps to reproduce the behaviour:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behaviour

A clear and concise description of what you expected to happen.

investigate moving build process to parcel

Detailed Description

Possible Implementation

remove minor dependencies not used

recompose, color, url-join are all prod dependencies for minor usage which can be adjusted to remove dep

Detailed Description

Possible Implementation

Setup correct peer dependencies

I may be wrong, but react and react-dom may still need to be peer deps, so that React doesn't throw mismatching versions for hooks.
That's happened to me while using npm/yarn link.

Originally posted by @caravinci in #33 (comment)

also breaking dev ci

While resolving: @icgc-argo/[email protected]
npm ERR! Found: @emotion/[email protected]
npm ERR! node_modules/@emotion/styled
npm ERR!   peer @emotion/styled@"^11.6.0" from the root project
npm ERR!   @emotion/styled@"^10.0.17" from @storybook/[email protected]
npm ERR!   node_modules/@storybook/addon-info/node_modules/@storybook/theming
npm ERR!     @storybook/theming@"5.3.21" from @storybook/[email protected]
npm ERR!     node_modules/@storybook/addon-info
npm ERR!       dev @storybook/addon-info@"^5.3.21" from the root project
npm ERR!     @storybook/theming@"5.3.21" from @storybook/[email protected]
npm ERR!     node_modules/@storybook/addon-info/node_modules/@storybook/api
npm ERR!       @storybook/api@"5.3.21" from @storybook/[email protected]
npm ERR!       node_modules/@storybook/addon-info/node_modules/@storybook/addons
npm ERR!         @storybook/addons@"5.3.21" from @storybook/[email protected]
npm ERR!         node_modules/@storybook/addon-info
npm ERR!     1 more (@storybook/components)
npm ERR!   1 more (@storybook/theming)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @emotion/styled@"^11.6.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @emotion/[email protected]
npm ERR! node_modules/@emotion/styled
npm ERR!   peer @emotion/styled@"^11.6.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/runner/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/runner/.npm/_logs/2022-03-22T21_04_50_693Z-debug-0.log
Error: Process completed with exit code 1.

Theme property checking

does the theme system allow for the theme to be disabled -> missing, or overwritten with a custom theme that has an entirely different shape?
in that case these chains may fail with cannot find X of undefined.

theme?.uikit?.typography?.paragraph covers that, but could also use having a fallback/default value if it the chain ever fails.

Originally posted by @caravinci in #33 (comment)

sure we could do theme?.uikit?.button?.md?.color but then we're just posing as the Riddler.
maybe have a local of css`` which does a check for theme

Entity Pages - Storybook Legend component

Goal

On the File entity page (Rakesh is working on) https://platform-ui.qa.argo.cancercollaboratory.org/file/00095e36-49f6-520d-bb3a-a0ae8c31eb7e

And the donor entity page (Sam is working on)

In the titlebar, there is a "Legend" button that we will need to build to help researchers know what the missing data means.

For now, let's build this in storybook and then Rakesh and Sam can bring it into their pages.

Mockups

Closed button: https://zpl.io/an8jpLl

Opened button: https://zpl.io/adodrp1

Expected behaviour

• The user can hover over the legend button and it opens the legend, and turns the chevron to face down.
• When their mouse is on the button or the opened legend, the legend stays open
• When they move the mouse off the button or legend, the legend closes and the chevron turns back to pointing to the right.
• To make this keyboard accessible, we will also need to allow the user to click on the legend button. If they click on the button, it will open the legend and it will stay open until they click again anywhere on the page.

Document local dev process

v4 - assets

• live copy and cleanup for dev watch mode
• correct bundling for prod package

Add "Open Lock" Icon

Detailed Description

Platform UI's File Entity page requires an "Open Lock" icon for files with "Open" access.
icgc-argo/platform-ui#2090

To prevent forking changes between repos, the icon has not been added to the previous UIKit. Once this repo is ready, the icon will be added and a follow-up ticket in platform-ui will be created to use the new icon there.

Icon file is attached in the zip below:
icon-unlock.svg.zip

Update React Table 6 to 8

React Table must be updated from 6 to 8 for compatibility with React 18.

Additionally, when this is completed, update the version in platform-UI and remove the warning suppression in next.config.js.

Update exports for platform-UI

Update exports during Platform-UI integration

Apply minimal set of changes from V2 branch

uikit changes in v2 branch were headed towards making uikit entirely reusable across projects.
this is incorrect. we want to keep it ARGO specific.

there are still some changes which are applicable.

• local dev of uikit so projects can contribute as needed
  • building exports as a singular index.js
  • ensuring all exports are named or they don't work
  • ensuring no collisions of named exports
• removing/updating some libraries (outdated or many versions behind)
• ensure peer dependencies of react and emotion work correctly
  • ensure requirements of using lib are well defined eg. is there a specific emotion version needed?

consuming projects will need to update. breaking changes because the import structure of components will be completely different.

🐛 Tag component styled incorrectly in FF

Describe the bug

chrome

firefox

Steps To Reproduce

Steps to reproduce the behaviour:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behaviour

A clear and concise description of what you expected to happen.

Modal behaviour

Describe

• modal should dismiss on pressing 'Escape' should be default
• modal should dismiss on click outside
• currently hook behaviour outside uikit (clickaway)
• fade out transition on dismiss (similar to fade in)

🐛 storybook prop docs react-docgen-typescript

Describe the bug

storybook default inference of prop types using react-docgen-typescript is broken
storybook docs lack prop details unless explicitly written in argTypes

Steps To Reproduce

Steps to reproduce the behaviour:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behaviour

A clear and concise description of what you expected to happen.

Export colours object

UI kit Export colours as an object so we can use them outside of components.

Enable consistent styling

Several components prohibit styling due to missing props.
There are conflicting usages of how we are styling which need to be made consistent.
Some rough edges to address also eg. need all colour codes defined.

Detailed Description

• ensure components have either a strictly defined set of props to customise or allow theme to be re-styled (don't just ...spread everything)
• documentation on how to approach styling
  • check for colours consts, use styled over inline css
  • some components we should define strict interface others (containers) we should allow to be customised.
  • output of this should be a wiki page
• make sure all colours are in the theme (involve Kim in the colour scheme process)

bug: storybook not working

Storybook has stopped working in Uikit

Workflow updates

• NPM throwing errors should stop merge
• should be able to manually run workflows

Migrate uikit code to it's own repo

1. uikit code in its own repo and build/publishing.
   • jenkins pipeline and publishing

Scoping - Accessibility

Accessibility is important.
In particular we want to be able to use this library in projects that have to meet a certain WCAG guidelines

@mistryrn has lots of expertise

Detailed Description

• Labelling
• Colour contrast (disabled states)
  • Finding accessible colours that work/look nice is tricky. Previously found accessible colours, reviewed with Kim to find better options
• Confirm level of accessibility we need to meet
• Ensure components are set up to be accessible, accept aria props,
• Develop consistent approach: focus states,

Test UIKit with Consuming Projects

Detailed Description

Since UI Kit reorganization is complete(not all tickets in the epic are finished, as we decided to only make UIkit reusable for ARGO), next step is to ensure it integrates with platform u, daco ui, argo-doc and other projects.

There may be some minor tweaks needed eg. React dependency version or a certain export is missing from uikit.

What we need to do

• Ensure dependencies are ok
• ensure exports are ok
• ensure local building is ok
• There’s no api breaking changes except import/exports

To Do

• @ciaranschutte will verify the projects and update here.
• @ciaranschutte to investigate and provide an estimate.

🐛 fix storybook to run with emotion 11

Describe the bug

storybook has some difficulties working with emotion v11

Steps To Reproduce

Steps to reproduce the behaviour:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behaviour

A clear and concise description of what you expected to happen.

Design: Consistent event handling

Components are handling events in various ways

Detailed Description

• Multiselect component doesn't expose every event
• Click/focus/etc not exposed on all components
• Want components to behave as if they were native
• Will need to create events for some components since they are "molecules" instead of "atomic"

Output

• Identify components we want to tackle first and what ht event interfaces will look like. Document in a wiki.

Consistent Icons

Icons require too much manual tweaking

@caravinci has some input on this too... will update as soon as I find it on slack

Detailed Description

svgs should be centered automatically

Implement Consistent Event Handling

Implement Consistent Event Handling

• Changing native events we're currently capturing and making sure we pass them all consistently

Epic: React 18

Steps required:

1. Upgrade dependencies
   1. react-table: update to 8, skip 7 (talk to Justin)
   2. react/tippy: outdated, migrate to react-tooltip
   3. react-grid-system: update to latest
   4. recompose: replaced by hooks, remove (it's used 2 times)
   5. more dependencies may need updates
2. Update React to 18

UIKit: Modify button component to add spinner state

As a continuation to this ticket: icgc-argo/platform-ui#2032, add all of the improvements to the button component in regards to the spinner.

Which included:

• when button is clicked, if the action takes a while - change the button icon to a spinner. Keep the button label visible
• the button size shouldn't change in this state
• disable the button from being pressed again until the action is finished
• any other improvements that were made
• Can we implement this button throughout the platform (file repo download, upload sample registration, submit clinical files, etc) to make the behaviour consistent?

Export SVGs used by platform UI

Export SVGs used by platform UI so they can be used as Next images rather than Uikit components.

<Textarea> Update

Detailed Description

Purpose: Update useEffect in <Textarea> to make rendering work when clearing contents using useState.
Issue: <Textarea> won't render properly when using useState to clear content.

See Ciaran's Explaination:

Textarea is not re-rendering because it's state is not changing. The value prop is only used to set the initial state of internalValue .
To fix, we can add value prop to the dependency array of the useEffect on line 130. This makes the function run every time the value prop changes, not just on component mounting, which is what an empty dependency array does [ ]
We also use the already existing functionality of applyChanges so nothing should break and it can reconcile any changes needed internally.

useEffect(() => {
    value && applyChanges(value);
  }, [value]);

Now if you try this it's still broken... but our state is being passed correctly like you said. Well, empty string '' is a falsey JS value so the shorthand of value && applyChanges(value) means applyChanges is never run. But empty string is a valid value for our textarea. So we can fix the conditional like so:

useEffect(() => {
  (value || value === '') && applyChanges(value);
}, [value]);

Possible Implementation

Locate <Textarea> in src/form and update line 127-130 to:

useEffect(() => {
    (value || value === '') && applyChanges(value);
  }, [value]);

Or Justin suggests to:

useEffect(() => {
    (value !== internalValue) && applyChanges(value);
  }, [value]);

Reason of this slight change is so that we don't need to keep adding conditions in the future.
Both cases work for the filter modal textarea.

Component color prop

components taking a color prop ie. Pipe takes a fill prop
should be able to take a theme color OR any valid color
currently TS will complain if color is not in theme

Detailed Description

Possible Implementation

Write readme for Tables

Write readme with examples for the new Uikit tables. Using stories for this feature is tricky due to nested components.

Consistent Button loading behaviour

Button loading behaviour needs a custom loader component passed into it.

Detailed Description

• enable a consistent loader while Button is in loading state
• option to pass in custom element but not required

Possible Implementation

🐛Storybook not running correctly

Storybook is not running correctly limited dev ability to work in this sandbox

Theming

Theming responsibility should be delegated to the consuming project for 3 reasons:

Currently we get around Emotion lib integration issues by creating our own context in uikit and exporting useTheme with our own ThemeProvider

This works because context is shared.

css={(theme) => {...}} this should work but Emotion uses it's own jsx runtime which in turn uses its own theme context, so our theme will always be empty object

suggestion is to move theming out of UIKit and have the consuming project decide the process
we can still export a default theme that is compatible with an Emotion theme provider

Types are too tightly coupled to the defaultTheme. Extending the theme in a project will cause type errors.

no reason for reactivity of theme provider. can just use normal object
if a project wants reactivity eg. for a dark mode it can be added to its project

upgrade storybook to latest

Increase reusability

Detailed Description

Certain components still have hardcoded features which hinder use as a reusable lib

Component: Header
Description: Logo

Component: Footer
Description: Logo

Possible Implementation

Consolidate readme

keep only the uikit section from root level, adding section from src directory

🐛 Footer: make sure the footer year is dynamic

Describe the bug

I noticed on Dev and QA the footer went back to 2020.

Expected behaviour

Let's make sure it's dynamic in UI kit.

Proper building of SVG

Currently consuming projects need to transpile the npm package to use svgs eg. in Icons
Shouldn't be needed...

Detailed Description

Possible Implementation

move npmrc to top directory

move the src/.npmrc file to root directory and update necessary references to it

Testing

• JEST and test setup needs to happen
• write unit tests for ~45 components
• write integration tests (form, form elements)
  • cover components that interact
  • parent / child component interactions

Scoping - uikit roadmap

• Events should be consistent
• Components should expose events and not just values
• Standardize events
• Consider upgrade plan for new projects.
  • Consider breaking changes and adoption for all the projects we support now.
  • Let's try to maintain backward compatibility!

Result: Take stock of where we are and where we would like to go. Wiki will be the result, with a breakdown of tasks.