https://github.com/intuit/devtools-ds

UI components, libraries, and templates for building robust devtools experiences.
https://github.com/intuit/devtools-ds

chrome-extension design-system devtools firefox-addon react storybook webextension

Last synced: 22 days ago
JSON representation

UI components, libraries, and templates for building robust devtools experiences.

• Host: GitHub
• URL: https://github.com/intuit/devtools-ds
• Owner: intuit
• License: mit
• Created: 2021-01-22T20:48:49.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T21:00:02.000Z (11 months ago)
• Last Synced: 2024-04-14T15:18:49.630Z (7 months ago)
• Topics: chrome-extension, design-system, devtools, firefox-addon, react, storybook, webextension
• Language: TypeScript
• Homepage: https://intuit.github.io/devtools-ds
• Size: 2.52 MB
• Stars: 237
• Watchers: 5
• Forks: 15
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        


  

  


  


  
Components and tools for building browser devtools extensions, built on DS-CLI and PostCSS Themed.



---









  

 





Ever wanted to build your own browser extension or devtools panel? This project can help! We've built out a set of utilities and React components that let you mirror the functionality of the Chrome/FireFox developer tools.

Each component:

- Supports themes for multiple browsers

- Is fully written in TypeScript

- Aims to be keyboard accessible and screen-reader friendly

- Uses minimal external dependencies

Read more in our [Storybook documentation site](https://intuit.github.io/devtools-ds).

## :hammer: Developer Set-up

Access source files and and make contributions using the following setup steps:

1. Clone the repo

   ```sh

   git clone https://github.com/design-systems/devtools-ds.git

   cd devtools-ds

   ```

2. Install dependencies

   ```sh

   yarn

   ```

3. Build

   ```sh

   yarn build

   ```

4. Start Storybook

   ```sh

   yarn storybook

   ```

# 🤝 Contributing

Whether it's improving documentation, adding a new component, or suggesting an issue that will help us improve, all contributions are welcome!

Top reasons to contribute:



  


    

      😍

    

    Empower others to build high quality browser devtools experiences

  

  


    

      🎓

    

    Learn design system development

  

  


    

      ⏳

    

    Help maintainers prioritize impactful work

  



Here are some ideas for contributions:

- New components

- New themes (We'd love to see some Safari themes eventually)

- Accessibility improvements

- New browser extension templates

- Support for frameworks like Vue, Angular, or Svelte

For more information about contributing, read our [contributing guide](./CONTRIBUTING.md) and [code of conduct](./CODE_OF_CONDUCT.md).

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    
Tyler Krupicka
️️️️♿️ 🐛 💻 🎨 📖 💡 🚇 🚧 ⚠️ 🔧

    
Adam Dierkens
️️️️♿️ 💻 🎨 📖 💡 🚇 🚧 📦 ⚠️ 🔧

    
Shelby Cohen
️️️️♿️ 💻 🎨 📖 ⚠️

    
Kelly Harrop
🎨

    
Andrew Lisowski
📖 💡 💻

    
Adrian de la Rosa
💻 📖 💡

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!