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

styled-sigma-ui

v0.2.2

Published

react ui library for sigma products

Downloads

3

Vulnerabilities

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

Links

Git

Maintainers

am-kevin-jamesam-kevin-james

Keywords

Readme

Sigma UI v0

🏗️ ⚠️ Work in progress. Any help and contributions towards finishing a working version are welcome, whether through discussions, raising issues, or sharing links on Slack. We value your input as we strive to build a valuable product.

Idea Behind Sigma UI

As we continue to grow and focus on rapid development from design to product, dealing with UI coloring and padding placement should be the least of our concerns. Our primary focus should be on product development, especially with the new [REDACTED] on the horizon. Sigma UI is designed to house components that are created from our past experiences and lessons learned, aiming to streamline the process of building products like [REDACTED]

What and How We Are Building This

What

We aim to recreate all the components from the Figma Leopard Library, making them themeable with minimal effort while retaining the Sigma design theme.

How

Currently, the library is styled using styled-components, and most of the components are composed from the elements in Radix UI Primitives. Any component with unique behavior tailored to our use case is created from scratch.

Getting Started

1. Installing the Package

To make development for the UIs and production iteration quicker. We've pushed the project to public npm instead for now. This might change later on and will be communicated in this document

This package heavily depends on styled-components. To make it work, add it as a peer dependency to your react project:

yarn add styled-components styled-sigma-ui

Development

This repository is created using TypeScript, and the documentation is generated using Storybook.

To build and run Storybook:

yarn build-docs
yarn start

To build and create a working package:

yarn build
yarn version --patch

Contributions

Contributions are welcome in various forms, from a Slack message to a PR. Please reach out to Iniaki (@Iniaki-Sigma) or Kevin (@iam-kevin) in your preferred channel to help continue the development of the components.

To-Do

  • [ ] Is README helpful enough?
  • [ ] Make the project build work
  • [ ] Make tests work
  • [ ] Test coverage
  • [ ] Link Storybook with Figma