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

@undp/design-system

v1.3.4

Published

UNDP Design System

Downloads

229

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

jura.khrapunovjura.khrapunov

Keywords

UNDPUnited NationsDesign SystemReactStorybook

Readme

United Nations Development Programme Design System

Purpose

The purpose of this project is to create unified user interfaces for UNDP by the designer and developers.

These projects will have consistent look and feel and accessible in nature by just following the guidelines in the documentation.

By unifying design elements into reusable components, development will simplify and accelerate the development of these digital products.

The Guide is a living document created to meet the needs of UNDP's front-end developers and designers. If there is a Component or Pattern that you need, or you have any other feedback, question or comment please contact us.

Demo

Living Style Guide & Documentation: Demo

Install from NPM

npm install @undp/design-system

See Starter project at the link below for details of implementaiton

Starter project

Static generator using Design System as dependency: UNDP Design System starter template

Development

Run the following commands to create/update the code.

# checkout the codebase
git clone

# install project dependencies
npm install

# In Windows environment apply patch to the mdx1-csf plugin.
# This can be omitted when this PR is merged: https://github.com/storybookjs/mdx1-csf/pull/27
npm run windows-patch-package

# runs storybook locally
npm run storybook

# build storybook
npm run build-storybook

# build compiled css and js
npm run build

Important

Make sure to run npm run build to compile production ready css and js files and include them with your development work. This will help save some extra steps when it comes time to deploy to production.

List of components

View available Components here. Every components has its own documentation page on the link provided.

Credits

The design system is based on:

Assets

=======

  • All the icons/images can be found in the docs/images directory.
  • Fonts: docs/fonts
  • CSS directory at: docs/css
  • JS directory at: docs/js

Storybook and File references

| Storybook path | File path | | -------------------------------------------------------- | --------------------------------------------------------------- | | Components/UI components/Cards/Download Card | stories/Molecules/Blocks/DownloadCard/DownloadCard | | Components/UI components/Cards/Publication Card | stories/Molecules/Blocks/DownloadCard/PublicationCard | | Components/UI components/Text/Callout | stories/Molecules/Text/BlockquoteComponent | | Components/UI components/Text/CTA Block | stories/Molecules/Text/CtaBlock | | Components/UI components/Text/Heading Big Block | stories/Molecules/Text/HeadingBig | | Components/UI components/Text/Post Block | stories/Molecules/Text/Post | | Components/UI components/Text/Small Copy Lockup | stories/Molecules/Text/SmallCopy | | Components/UI components/Text/Tertiary Block | stories/Molecules/Text/Tertiary | | Components/UI components/Text/Text Background | stories/Molecules/Text/TextBackground | | Components/UI components/Text/Text Cta | stories/Molecules/Text/TextCta | | Components/UI components/Author Summary | stories/Organism/Blocks/Authorcard | | Patterns/Card grids/Content Cards | stories/Organism/Blocks/ContentCard | | Patterns/Card grids/Content Cards With and Without Image | stories/Organism/Blocks/ContentCardWithAndWithoutImage | | Patterns/Card grids/Featured Cards | stories/Organism/Blocks/FeaturedContentCard/FeaturedCard | | Components/UI components/Pagewide Featured Content Card | stories/Organism/Blocks/FeaturedContentCard/PagewideContentCard | | Patterns/Card grids/Image Reveal Cards | stories/Organism/Blocks/ImageRevealCards | | Components/UI components/Footer | stories/Organism/Footer | | Components/UI components/Stats | stories/Organism/Stats | | Components/UI components/Stats Card Slider | stories/Organism/Statscardslider | | Utilities/Progress Bar Navigation | stories/Atom/Navigation/ProgressBarNavigation |

License

MIT license.

Acknowledgments

Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.