npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

homeday-blocks

v19.18.1

Published

A Vue component library built by Homeday's frontend team.

Downloads

135

Readme

Release and publish Storybook deployment Coverage Status This project is using Percy.io for visual regression testing.

Homeday Blocks

A library of Vue components and tokens used across Homeday projects - here

Local setup

Fork the main repository, clone your fork to your local machine and add the main repo as upstream.

$ git clone [email protected]:YOUR_USERNAME/homeday-blocks.git
$ cd homeday-blocks
$ git remote add upstream [email protected]:homeday-de/homeday-blocks.git

Prerequisites

Homeday Blocks requires Node.js version 14.17.0 (.nvmrc). It's recommended to manage multiple versions of Node on the same machine with nvm or nvm-windows.

Don't forget to setup the deeper shell integration in your console to take full advantage of nvm. You can achieve this by adding the following alias into your ~/.bashrc, or ~/.zshrc file:

alias cd="cdnvm(){ cd $1; if [[ -f .nvmrc && -s .nvmrc && -r .nvmrc ]]; then <.nvmrc nvm install; elif [[ $(nvm current) != $(nvm version default) ]]; then nvm use default; fi; };cdnvm"

Project setup

Download and install dependencies

For a breif explanation of what is being install, please read our setup documentation file.

OSX

To install all our dependencies on OSX, run scripts/setup.osx.sh.

Ubuntu

To install all our dependencies on Ubuntu, run scripts/setup.ubuntu.sh.

It is recommended to run the setup script everytime you pull from the master branch. This way you can always be sure to have all the project dependencies up to date.

Lints and fixes files

npm run lint

Storybook

Development

npm run serve:storybook

Build

npm run build:storybook

Build the library

npm run build

For a brief explanation of how the library is built, checkout this documentation.

Testing

To just run all unit tests:

npm run test:unit

To watch for changes while writing tests:

npm run test:unit:watch

To watch for changes while writing tests for a single component:

npm run test:unit:watch ComponentName

Screenshot tests on Percy

Make sure you've PERCY_TOKEN exported first and the project is built.

The token can be obtained from Percy dashboard if you've access to it.

npm run test:percy

You can also follow build statuses in https://percy.io/Homeday/homeday-blocks

Gotchas

  • tests/ is an alias for <rootDir>/tests/

TypeScript

For a basic explanation of what it is and how to use it, please read TYPESCRIPT.md.

Generators

We use Hygen as a code generator tool to save time when we need to scaffold some structure.

Just run:

npm run new component
npm run new service

And follow the wizzard in order to generate a base component structure or a service.

Contribution guide

This project follows Git Feature Branch Workflow. See project setup to get started locally. That means that all code changes enter the project by PR to master branch. Once you open the PR with suggested changes, the checks for build and coverage will run. If those fail, your PR needs some more work. :)

Each PR should be reviewed by at least two team members. Once reviewed and approved, it can be merged. Please follow the following convention when merging the PR:

  1. Use "Squash and merge" to merge the PR.
  2. Use a meaningful title when merging your PR.
  3. Give title a semantic meaning through emojis. Please use emoji first, then the text.
  4. :boom: - marks breaking changes (MAJOR version change)
  5. :sparkles: - marks new feature (MINOR version change)
  6. The other gitmojis are either a patch or have no effect at all.

It is important to follow this convention, because our automated releases are based on it.

Examples

Major change

:boom: Removed HdNotNeeded component

Minor change

:sparkles: Added HdAwesomeComponent

Patch

:bug: Fixed that annoying bug

Version release

Releasing a new version is as easy as pushing your changes to master 😎

Consuming in other projects

import { HdDynamicForm } from 'homeday-blocks';

Customize configuration

See Configuration Reference.

Services

Together with the components, Homeday Blocks also provides useful services that can be reused across projects. You can read more about them in the services documentation.

Infrastructure

Homeday Blocks has its own infrastructure repository: blocks-infra. Whenever changes need to be made, you can do it in the repository and "deploy". If it is an emergency, you can also use AWS Console but your next step is to update it in the repository to avoid future inconsistencies.