meetup-web-components
Advanced tools
Weekly downloads
Readme
Meetup library of React UI components for the web.
This checklist can be used as a guide for adding components that are easy to reuse and maintain. The categories come from a talk I saw Elyse Holladay give at Clarity Conf 2017.
Easy to reason about
Context-agnostic
Independent and isolated
This package uses semver versioning to tag releases, although the patch version
is determined exclusively by the Travis build number for pushes to main
.
Major and minor versions are hard-coded into the Makefile.
Manual pushes to main
and PR merges to main will be built by Travis, and
will kick off the yarn publish routine. The currently-published version of the
package is shown on the repo homepage on GitHub in a badge at the top of the
README.
CURRENT PRO VERSION: 6.2.0
pro-web
is not on the latest version of MWC that uses swarm-ui
.
Instead, the pro-web
version of MWC is based off a branch called
pro-web-6.x.x
. It's manually published to npm as version 6.2.0
and is tagged as pro
in the registry, so all that is needed to
install is yarn add meetup-web-components@pro -W
.
If changes are needed for the pro-web
version, do the following:
pro-web-6.x.x
branch.package.json
file and commit+push.npm publish --tag pro
as the meetupbot
npm user.When developing a consumer application that requires changes to the platform code, you can release a beta version of the platform on npm by opening a PR in the meetup-web-platform repo. When it builds successfully, a new beta version will be added to the list of available npm versions. The generated version number is in the Travis build logs, which you can navigate to by clicking on 'Show all checks' in the box that says 'All checks have passed', and then getting the 'Details' of the Travis build.
At the bottom of the build log, there is a line that echo
s the GIT_TAG
.
If you click the disclosure arrow, the version number will be displayed, e.g.
0.5.177-beta
.
You can then install this beta version into your consumer application with
> yarn add meetup-web-components@<version tag>
Each time you push a change to your meetup-web-components
PR, you'll need to
re-install it with the new tag in your consumer application code.
The overall workflow is:
meetup-web-components
branchGIT_TAG
meetup-web-components
branchYou can generate the boilerplate files for React components using
yarn run generate
, which invokes src/utils/generate.js
.
The command will prompt you for a 'type' (select from the list of options),
and a 'name'. It generates the following files in src/
:
<ComponentName>.jsx
Component JSX module<componentName>.test.jsx
Component test script<componentName>.story.jsx
Storybook scriptLocated in the src/
directory, component files live alongside
their corresponding .test
and .story
files.
Filename casing conventions:
CamelCase
, with a leading capital, i.e. RsvpTag.jsx
camelCase
, i.e. rsvpTag.test.js
camelCase
, i.e. rsvpTag.story.jsx
We use redux-form
in our mup-web
app to help with validation flow.
redux-form
can use our form components (just pass our MWC component to Field
as the component
prop), but we need to write wrappers to pass down the props from redux-form
Field
to our form components in meetup-web-components
.
The job of the wrapper for each component is mostly just parsing out the meta
, input
and other
props from redux-form
and passing them on.
You can find the wrapper classes in src/forms/redux-form
.
The files are named after the classes they wrap to avoid verbose file names.
Ex. forms/TogglePill.jsx
has a forms/redux-form/TogglePill.jsx
.
But the actual class name to import and displayName
, have ReduxForm
in the name.
Ex. export class ReduxFormTogglePill
We write wrappers as we need them, so if you don't find one that you need, please write it!
We've run into a couple gotchas already:
redux-form
validates all fields on load, and its hard to tell when the form is first rendered. To avoid displaying errors right away, we added some logic to read meta.touched
. https://github.com/meetup/meetup-web-components/pull/307
redux-form
's implementation of checkboxes give them values of true
and false
.
ReduxFormTogglePill
wrappers handle this now by passing the input.value
prop down as isActive
(which sets checked
on checkboxes)
https://github.com/meetup/meetup-web-components/pull/310.
We may need to do this for other checkbox, radio component wrappers.
The src/
directory contains layout helpers, like Section
and Chunk
. These are
documented in Storybook, but a more detailed guide can be found here.
Unit testing UI components is a little weird compared with unit testing business logic.
TestUtils.Simulate
appears to work correctly for our testing setup - it should be used
for all tests that involve simulating events, like onClick
. Check out button.test.js
for an example.
In UI testing, there is an almost invisible line between testing the implementation (markup) and testing the behavior (appearance/content), and ideally you only should test the behavior - there are loads of ways to change markup without changing the fundamental app experience, and those kinds of markup changes should not be considered "bugs" that result in failed tests.
The implication for constructing unit tests is that you should avoid relying on the specific
markup (tags and DOM structure). Sometimes it's unavoidable, but if you are inclined to use
getElementsByTagName
, firstChild/lastChild
, or a querySelector(All)
that includes a tag
name to access particular parts of the component UI, check whether there is a better way to skip
over the markup implementation details and grab what you want explicitly.
A useful option is to add a PCV className
to the element of interest, and just use
yourComponentEl.querySelector('.specificClassName')
to find it. Classnames are free and
DOM-independent, which means that no matter what the markup is for your event name, you can
always unit-test the behavior (text content) accurately with
// good
expect(eventNode.querySelector('.event-name').textContent).toEqual(testEventName);
// bad - assumes both tag (h5) and structure (first h5 in the card)
expect(eventNode.getElementsByTagName('h5')[0].textContent).toEqual(testEventName);
To manually lint your code, run:
$ yarn run lint
Whitespace issues will be fixed automatically - just remember to commit the changes. Other style
issues will log errors. Our .eslintrc
configuration is based on the 'recommended' preset, with
a number of additional rules that have been requested by the dev team. It's a 'living' standard,
however, so please feel free to send PRs with updates!
Before building any components, it's helpful to know what related components have already been built into our Foundation library. We use React Storybook to display components outside of the app context. To open it, run:
$ yarn install
$ yarn run storybook
And open the viewer at http://localhost:9001
All of the available components are listed on the left, and clicking on one will open it in the preview pane. Variants are also listed in the left column to show how different states affect the rendered component.
FAQs
Meetup Web UI Component Library
The npm package meetup-web-components receives a total of 203 weekly downloads. As such, meetup-web-components popularity was classified as not popular.
We found that meetup-web-components demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.