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

@superkoders/wl2021-ui

v3.2.2-3

Published

- Node.js (^14.0.0) - NPM (^6.14.0)

Downloads

133

Vulnerabilities

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

Links

Maintainers

martina.paclikovamartina.paclikovajoskjoskandscoandscofireball_fireball_jena.hajekjena.hajekpetrbulanekskpetrbulanekskpetr.grochalpetr.grochal

Keywords

Readme

Requirements

  • Node.js (^14.0.0)
  • NPM (^6.14.0)

Getting Started

This repository is folder for UI componets for two projects - MyAccount and WhiteLabel. To both projects it is installed like node module.

Instalation

It is quite funny to setup it for local development. We need to test UI standalone with storybook and also with projects. UI requires React package but we can't have that in node_modules here. Otherwise it cause problem with two version of react when we testing UI locally agaist to the project with npm link. Npm link is only way to do it straightforward so we need also solve missing react.

Here we go.

  1. Download all repositories (UI, this repo) and also projects where you will test it (MyAccount and WhiteLabel)
  2. Go to UI folder and write npm link to terminal
  3. Go to project folder and link UI with npm link @superkoders/wl2021-ui
  4. Now we need solve missing react in UI. Go to project (MyAccount or WhiteLabel) terminal write cd node_modules/react and then again npm link
  5. Go back to UI terminal and write npm link react
  6. Go to project (MyAccount or WhiteLabel) terminal write cd node_modules/react-dom and then again npm link
  7. Go back to UI terminal and write npm link react-dom

Step 2. and 3 repeat for all projects where you will test UI.

Step 4. and 5., 6. and .7 you will need to do every time before you start testing on some project with UI. After this it will use same version of react.

After this steps you can test UI standalone and also with one of projects. Happy coding!

Storybook

Stories are located in the src/stories directory.

dev mode

npm run storybook

export stories presentation

npm run build-storybook

Styles

All styles are located in src/styles directory. There must be a style.scss file there that exports all the styles and serves as an entry point for global styles. Some Sass variables (breakpoints) are injected into the style.scss file from Javascript (in both Next and Storybook) by overriding next-variables import in build step (in webpack config). These variables are defined in src/config/style-variables.js file and can be then used in both SCSS and Javascript (Typescript).