canonical / react-components

A set of components based on Vanilla Framework

React components for Vanilla Framework

This is a collection of components designed to be the way to consume Vanilla Framework when using React.

Storybook contains component docs with usage instructions.

Requirements

Canonical react components currently require that your build is configured with sass-loader (or equivalent), to compile sass.

Install

To use the NPM package do:

yarn add @canonical/react-components

Or if you use NPM:

npm install @canonical/react-components

Issues

Please file any issues at GitHub.

Contributing

You might want to:

• View the source on GitHub.
• Read about developing components.
• Find out how to publish to NPM.
• Know how to publish the docs to GitHub Pages.

Developing locally using this repository

You may wish to link this library directly to your projects while developing locally.

You can do this by cloning this repo to your local workspace;

git clone https://github.com/canonical/react-components

If you then drop into that folder and run;

yarn run link-packages

...this will add this project, react and react-dom to a local yarn registry.

Switching back to the project you are developing, run;

yarn install
yarn link react
yarn link react-dom
yarn link @canonical/react-components

...to pull the linked deps from the local registry. If you now run yarn build-watch in your react-components folder, your project should pick up any changes on refresh or hot module reload.

Note: When you're finished working locally - don't forget to go back and unlink;

cd react-components
yarn run unlink-packages

react-components's Issues

Pass the onClick to Button

The recent change to handle disabled buttons broke onClick because the user defined onClick is not passed to the prop.

Add danger to enforce changelog entries

https://danger.systems/js/

Make Canvas examples not full width

The Storybook canvas examples are full width, explore adding a row or strip to make the examples smaller.

Document props that don't have descriptions

Cannot give className to label when using Input component

There's no prop available in Input that allows giving a className to a label (e.g. labelClassName). Recent Vanilla work on allowing inline checkbox labels therefore cannot be applied.

yarn start throws an error

The package.json file has a start script but running it results in;

Add a doc for publishing to npm

Prepare for release

Check out a new release branch from master

git checkout -b prepare-0.1.1-release master

Update the changelog

Update CHANGELOG.md, changing the [Unreleased] section to the version number from above e.g. [0.1.1] - 2019-11-06. Consider looking at git log and adding any missed changes.

git commit -m "Update changelog for 0.1.1."

Build the docs

Build and Commit the docs for this version.

yarn build-docs
git commit -m "Build docs for 0.1.1."

Update the version

• Update the version using the next sensible version.

yarn version --new-version [0.1.1]

Push

Push your branch to GitHub, create a PR and land it (this might require approval).

Publish to NPM

Get a fresh copy of master

git clone [email protected]:canonical-web-and-design/react-components.git react-components-release

Build and publish the package.

cd react-components-release
npm publish --access public

Tag the release

• Get the released package link.

npm view @canonical/react-components dist.tarball

Download the package from the link.

Create a new release on GitHub, remembering to:

• Add the tag against against the correct commit using the new version number.
• Copy the changelog section for this release into the description.
• Upload the package (downloaded above).

Build Navigation component

• Default
• Dark
• Full-width
• Sub navigation

Rename Loader to Spinner

The vanilla component is <i class="p-icon--spinner u-animation--spin"></i> so Spinner might make more sense. Also as @hatched mentioned, it doesn't actually load anything.

https://docs.vanillaframework.io/settings/animation-settings/#spin

Investigate UX tools

Take a look at whether these components could be used with https://www.framer.com/ and Sketch.

Move CI from Circle to Github Actions

MainTable caption shouldn't have a negative margin

The negative margin on the caption element in the table causes it to move into the header if there is no content in the table.

https://github.com/canonical-web-and-design/react-components/blob/3ed7f3f15613eae14071136353e9f1c6828f1c24/src/components/MainTable/MainTable.scss#L7

Get demo service working

It's possible that the port might not be working due to this line in package.json: "docs": "start-storybook --port 8403"

No way of adding a data attr to table cells

As part of our testing, we would like to provide or automatically assign a data-test attr to a table cell. This is currently not possible with the current component.

Consider adding "tooltip" prop to buttons and form inputs

It's quite a common pattern in MAAS and RBAC to disable a button or checkbox and have a tooltip display on hover why it's disabled. It might be a good idea for that logic to be handled by the component directly.

Add doc for publishing to github pages

Create a new branch and run:

yarn build-docs

Commit and create a new PR and land to master.

That's it!

Allow SearchBox component to be controlled by external state

Button should support dense utility

Add a dense prop to Button as defined in the docs: https://docs.vanillaframework.io/patterns/buttons/#dense

Modal requires title

It would be nice if the Modal didn't require a title when you want to use it to display something like an image.

Add a hacking doc

Developing

Use Storybook to develop new components.

yarn install
yarn docs

And remember to yarn test and yarn lint.

Using with another project

Both projects will need to be running on the same machine/container.

In react-components run:

yarn install
yarn build
yarn link

To prevent multiple copies of React being loaded you'll also need to link React:

cd node_modules/react
yarn link

In the project you're working on:

yarn link "@canonical/react-components"
yarn link "react"
yarn install

If using a monorepo you'll need to run those commands at the top level (not inside a workspace).

You'll then need to start you project with yarn, not ./run.

Then when you're finished run:

yarn unlink react
yarn unlink "@canonical/react-components"

More details on yarn link in the docs.

MainTable doesn't allow for double rows

The MainTable component currently only allows single rows. In MAAS we use double rows in a lot of places (see screenshot) and need the flexibility to use the component in this way.

Set up circleci

Complete cypress tests for remaining components

Initial cypress integration landed with some tests for the Accordion component. We need tests for all the other components as well!

ActionButton uses custom styles

Build Breadcrumbs component

Expose individual components at nice paths

To prevent having to import all components in the index.js it'd be nice to be able to import individual components.

At the moment these paths look like: import MainTable from "@canonical/react-components/dist/components/MainTable";

It'd be nice if this was import MainTable from "@canonical/react-components/MainTable";

Add a watch command

babel src --watch --out-dir dist --copy-files --ignore .test.js,.md,__snapshots__,testing

Replace uuid/v4 with nanoid

To reduce the dist size we can replace uuid/v4 with nanoid, as done here: canonical/maas-ui#576

Margin under show code button

Storybook should be deployed to Github pages

We would then have a permanent, online link to reference docs.

https://storybook.js.org/docs/basics/exporting-storybook/#deploying-to-github-pages

Accordion: aria attribute error

When opening the accordion there is an error:

Warning: Invalid ARIA attribute `ariaMultiselectable`. Did you mean `aria-multiselectable`?

Scroll to top when paginating MainTable

When paging the MainTable it'd be good to scroll to the top of the window, either by default or configured via a prop.

Sync table changes from jaas-dashboard

README is unhelpful to contributors

The README tells me how to consume this lib but not how to contribute to it, explaining Storybook, how to run it, etc

Allow the use of spinners inside SearchBox

canonical/maas-ui#1007

Docs code example child text unreadable

Loader can't be used in paragraphs

The Loader component is wrapped in a div so it can't be inside a paragraph. It would be better if it was a span.

Storybook doesn't use latest version of Vanilla

Even that project has Vanilla as dependency in package.json and is kept up to date with renovate the styles used by storybook are actually coming from hardcoded old version of Vanilla.

This makes impossible to make sure that the react component work and look correctly with latest version of vanilla.

https://github.com/canonical-web-and-design/react-components/blob/1527b939a5a12935ee274c3800c9529d3669d70c/.storybook/preview-head.html#L1-L4

Expected

Storybook should include the same version of Vanilla as is used in dependencies.

Use Percy for snapshot diffing

We use Percy in Vanilla for snapshot diffing which is super helpful for catching visual regressions. It was also used in the old react components repo.
https://docs.percy.io/docs/storybook

@anthonydillon are you able to add @huwshimi and @squidsoup to the Percy account?

Build SideNavigation component

• Default
• Dark
• With icons
• With labels

Add custom class name to table rows

We have a use case on jaas-dashboard where we want to add nested table rows for subordinate units. Example:

However, the designs dictate that these rows should not have a border-top but I have no way to target that row with CSS.

Can the row prop on MainTable have a className property?

Release process is unclear

Hey @squidsoup - now that the empty state for MainTable has landed, what's the process for getting it into the wild?

Allow columns to be sized in MainTable

Currently it appears as though all the columns are the same width. It would be helpful to allow columns to be sized so that some are bigger or smaller than they would be by default.

Props not appearing in docs

Skip Cypress for most CI tasks

When running the CI tasks we should skip the Cypress binary install to speed up the setup for all tasks except the integration tests.

https://docs.cypress.io/guides/getting-started/installing-cypress.html#Skipping-installation

Update loader doc to mention Vanilla

At the moment the Loader docs say "This is a not an existing Vanilla component." but there are some docs for this spinner here: https://docs.vanillaframework.io/settings/animation-settings/#spin

Fix babel ignores

The build command is not correctly ignoring files that don't need to be in the release.

Setup initial cypress tests

Create some scaffold cypress tests against storybook.

Missing navigation component

One of the first components a new project is going to look for is a navigation component. This should be adopted from https://docs.vanillaframework.io/patterns/navigation.

Theme docs to look like vanilla docs