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

opuscapita-showroom-client

v1.1.3

Published

React components catalog component.

Downloads

8

Readme

OpusCapita Showroom

Synopsis

Awesome react based components catalog which provide you markdown documentation and live examples. :boom:

If you interested in project development, please star it and send us your pull-requests!

Click gif image and press Download to zoom

showroom-demo

Start new project in 2 minutes!

Video

We have preconfigured project template with webpack, babel, tests, etc. (full overview)

Install template generator globally

npm install -g opuscapita-showroom-template

Create empty directory

mkdir my-react-project && cd my-react-project

Init project and ask several questions

showroom init

Install deps

npm install

Done :star2: Let's run it!

npm start

Open in browser: http://localhost:3000


You can easilly add new component.

showroom add and specify component name

Component will be added to src/client/components directory

Component is a directory includes:

Add showroom to existing project

See documentation here

Need help with integration to your open-source project? Create an issue or contact us :innocent:

See also

Motivation to develop

The fundamental ideas of ReactJS is modularity and code reuse. You should't rewrite same things every time.

What ReactJS creators say about it:

How do you know what should be its own component? Just use the same techniques for deciding if you should create a new function or object. One such technique is the single responsibility principle, that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents.

As you start to build large libraries of components, you'll appreciate this explicitness and modularity, and with code reuse, your lines of code will start to shrink. :)

O.K., ReactJS creators :+1: We are sure you are clever. We understand your ideas. But if we want to have a large libraries of components we must have a easy way to organize and browse this library.

  • Facebook have thousands of components.

  • In contrast - now we have no common UI composable pieces which allow developers to construct complex busines logic components fast with modern user interface for a better user experience. Happy customer => happy seller

  • Twitter Bootstrap/React Bootstrap don't solve the problem. It have a good looking typography and a simple for use grid system. It have only a little number of basic components like buttons and inputs.

    For example if you have a vertical split-screen, default bootstrap grid system based on html media-queries became useless. Media-queries reacts on main viewport size changes, but with split-screen we have two virtual viewports. Simple react component tracking size of specified DOMNode can solve the problem. If we can't find at http://npmjs.com we can write it themselves and reuse in future.

  • There are lot of good-written third-party components. But they can't cover all use-cases. The problem of most of them:

    Written by different people with a different methodology of development and styles organization (style conflicts are not a rarity)

    We can't change them when met a limitations of API

~~Allen Carr~~ The easy way to start organize a libraries:

  • Spent several hours/days creating a component? Spend 30 more minutes to put your component in a library and write simple documentation with a code example.
  • Next time you or your teammate wont't have to rewrite it again.
  • Or you can spend several hours/days :clock10: to /dev/null again.
  • The choice is yours.

How to use

Embedded

  • Developer-side variant
  • Always write the documentation :pencil:
  • Take care about other developers and others take care about you :tophat:
  • react-fix-it

See how to install

Server application

! Now it require exposed components from main npm package file

See how to install

  • Browse components catalog
  • See usage code examples
  • See API documentation
  • Change component properties and see what happenned in realtime
  • Change component version to see appropriate documentation
  • If you run it don't forget configure this file accordingly showroom-server host and port configuration

Contributors

| | Alexey Sergeev | | :---: | :---: | | | Kirill Volkovich |

Contributing are welcome. We need YOU! :metal:

License

OpusCapita Showroom is licensed under the Apache License, Version 2.0. See LICENSE for the full license text.