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 🙏

© 2026 – Pkg Stats / Ryan Hefner

@gudangada/gada-ui

v0.1.38

Published

Gada Design System

Downloads

4

Vulnerabilities

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

Links

Git

Maintainers

rudi-gadarudi-gadawiratmigadawiratmigada

Keywords

stroybookreacttypescript

Readme

Hosted on Vercel

Intro

A component library based on Gada Design System

Usage

  • Login to your npm account from npm cli.
    • Make sure you are a member of DS npm project.
  • Install npm package to your project:
  npm install @gudangada/design-system
  • Add imports to your _app.tsx:
import "@fontsource/inter";
import * as React from "react";
import { ThemeProvider } from "@gudangada/design-system";

const MyApp: React.VFC<AppProps> = ({ Component, pageProps }) => {
  return (
    <>
      <Head>
        <title>GudangAda - Project</title>
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width"
        />
      </Head>
      <ThemeProvider>
        <Component {...pageProps} />
      </ThemeProvider>
    </>
  );
};

export default MyApp;
  • For deployment, you need to add NPM_TOKEN environment variable to your project. You can get the token from npm project dashboard.

File Organization

  • src/components : used for all the react components
    • /core : contains all those components that have finalized design on figma
    • /data-grid : contains the components that are used to show data in a certain way e.g. a Table.
    • /lab : contains all the experimental components that shouldn't be exported with the npm package
  • src/hocs : contains generic higher order components
  • src/styles : contains all the stuff related to theming, including tokens for colors, typography and mui component's overrides etc.

Branch Structure

The repo has 3 main branches:

  • main -> Production
  • develop -> Development

Conventions for branch name

  • Use feature/GUD-ticket-number-feature-name for any feature development
  • Use fix/GUD-ticket-number-fix-name for any fixes
  • Use improve/GUD-ticket-number-feature-to-improve-name for any improvements

How to run

  • Run storybook
yarn storybook

For development

  • Checkout develop branch
git checkout develop
  • Make sure that you have latest changes from the remote develop
git pull origin develop
  • Checkout a feature branch from develop and do your changes on that new branch
git checkout -b feature/GUD-ticket-number-feature-name
  • Push all your changes to your feature branch and create a PR against develop branch.

For release:

  • Get that PR reviewed and address any feedback.
  • Once approved, merge it using Squash and merge option.
  • Test it on the dev instance
  • Move the develop changes to master (production) branch by:
- git checkout master
- git pull origin develop
# Resolve any conflicts
- git push origin master

Publish to NPM

  • Draft a new GitHub release by providing correct version as tag and release title.
    • Naming convention for tag and title should follow v{version_number}.
  • Auto generate release notes
    • Release notes are auto generated from the PRs that are merged since the last release
  • Press Publish release button. This will trigger Github action to publish the release to NPM.
    • Release action is defined in npm-publish.yml workflow file

Contribution

  • Clone the repo to your local
git clone https://github.com/gudangada/gada-ui.git
  • Checkout develop branch
git checkout develop
  • Install dependencies
yarn install
  • Run the project
yarn storybook
  • Pick any unimplemented component from Design System's Figma project
  • Assign an existing unassigned task to yourself from Design System - Web project on linear, or create a new one if it doesn't exist.
  • Specify the Estimate points (1 point being 2 hours) to your ticket
  • Checkout your feature branch (Follow Conventions for branch name section's guideline)
  • Implement the feature
  • Create a PR against develop branch
  • Post it in the #design-system-web-trackers channel on slack
  • Get that PR approved
  • Merge the PR to develop (with a meaningful message - can use PR's title)
  • Don't forget to keep updating your linear ticket's status

TODOs

  • Responsive components
  • Unit Testing
  • Gradually replace material-ui with custom components to remove dependencies

Troubleshoot

  • In case you run into type error from styled not recognizing the theme fully, add index.d.ts file to your root repo and add following lines to it:
import { AppTheme } from "@gudangada/design-system";

declare module "@emotion/react" {
  export interface Theme extends AppTheme {}
}