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

@rishinarang/component-library

v1.0.1

Published

React component library with components generated and/or composed with Figmagic. Made for The newline Guide to React Component Design Systems with Figmagic.

Downloads

7

Readme

ACME Corp. Potted Plants - Component Library (Starter)

This is the starter package that recreates the final result.

React component library with components generated and/or composed with Figmagic. Made for The newline Guide to React Component Design Systems with Figmagic.

In the context of the course, it's meant to be used with our example application.

Technology

  • Figmagic
  • React
  • Styled Components
  • Webpack
  • ESLint
  • Prettier
  • Babel

Instructions

  • Initialize the project with npm run init, which will:
    • Install Storybook with npx sb init -f
    • Install dependencies with npm install --force (important, as regular install will not work correctly)
  • Run Storybook with npm start
  • Create a .env file that contains values for FIGMA_URL, FIGMA_TOKEN and CHROMATIC_TOKEN

Structure

  • /.storybook: Storybook configuration
  • /src/index.jsx: Component exports
  • /src/utils.js: Basic JavaScript utility functions
  • /src/components: Manually composed complex React components
  • /src/elements: Figmagic-generated React components ("elements")
  • /src/graphics: Figmagic-generated graphics
  • /src/tokens: Figmagic-generated design tokens

Component architecture

The very short version is that elements are generated files. Here we only change React and/or Styled Components files, so they can be styled correctly and can become functional.

In components we compose new items out of the elements and whatever wrapping code we might need, with DIVs and CSS etc.

Provided components

All component code is provided for you, and the course should refer to the very same code you find here.

Demo

We will recreate this in the course.

  • Demo

Products view

  • ProductCard
  • CartButton

Checkout view

  • FormInput
  • CheckoutForm
  • CheckoutItem
  • IconButton

Provided elements

These will be recreated in the course.

  • Button
  • Card
  • CartSymbol
  • Description
  • Footer
  • Form
  • Header
  • Heading
  • Image
  • Input
  • Minus
  • Plus

Building your own components

Starting with the course, you should move out the src/components folder to the root (or delete it) so you can see the more basic elements working on their own first.

Same goes for tokens, elements and graphics. A recommendation would be to keep all the pre-provided code in a folder in the root so you can eyeball it in case you wonder how something was originally built.

Files that you will modify after generating them

Files that will be modified while doing the course:

  • Button: src/elements/Button/Button.js
  • Button: src/elements/Button/ButtonStyled.js
  • Card: src/elements/Card/CardStyled.js
  • Card: src/elements/Card/Card.stories.mdx
  • Description: src/elements/Description/DescriptionStyled.js
  • Footer: src/elements/Footer/FooterStyled.js
  • Heading: src/elements/Heading/HeadingStyled.js
  • Image: src/elements/Image/Image.js
  • Image: src/elements/Image/ImageStyled.js
  • Image: src/elements/Image/Image.stories.mdx
  • Input: src/elements/Input/Input.js
  • Input: src/elements/Input/InputStyled.js
  • Label: src/elements/Label/LabelStyled.js
  • Form: src/elements/Form/FormStyled.js

Figmagic configuration

You need to set the FIGMA_URL and FIGMA_TOKEN, for example in an .env file.

The provided configuration at figmagic.json should be a good starting point.

Remember to have your overwrite object correctly set up if you expect to modify the generated files! The provided config will overwrite anything except the React and Styled Components files.