https://github.com/reggi/shopify-ui

:maple_leaf: Shopify's Admin Interface in React.js
https://github.com/reggi/shopify-ui

Last synced: about 1 month ago
JSON representation

:maple_leaf: Shopify's Admin Interface in React.js

• Host: GitHub
• URL: https://github.com/reggi/shopify-ui
• Owner: reggi
• Created: 2015-10-20T06:32:41.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2017-04-20T20:37:50.000Z (over 7 years ago)
• Last Synced: 2024-10-05T10:45:26.598Z (about 2 months ago)
• Language: JavaScript
• Homepage: http://reggi.github.io/shopify-ui/example/
• Size: 203 KB
• Stars: 7
• Watchers: 3
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# DEPRECATED SEE [Shopify Polaris](https://github.com/Shopify/polaris)

# Shopify Admin Interface React

```

npm install shopify-ui --save

```

This is an effort at creating and organizing a library of React.js components that built from Shopify's backend Admin interface, created with the intent of building Shopify Applications with.

## Ideal World

There's a chrome extension called [`SnappySnippet`](https://chrome.google.com/webstore/detail/snappysnippet/blfngdefapoapkcdibbdkigpeaffgcil?hl=en) that allows you to select a element on a webpage in the Chrome Developer tools and export the HTML and CSS to jsbin, jsfiddle, or codepen. I haven't used it yet for this project but it is really extraordinary.  It does have some flaws in that it's not the best at getting psudo-selectors like `:before` and `after` and state modifiers like `:hover` and `:focus`. I tried tirelessly to get a clean copy of Shopify's checkbox (which is a pretty complicated piece of CSS / HTML ripe for modularity) and it wasn't simple.

I love the idea of extracting the CSS out of the [Shopify stylesheet](https://cdn.shopify.com/s/assets/admin/style-fbcba2bedee582049a0a8b26a9fbc56f.css) and having it live closer to the components themeselves, the neat thing about SnappySnippet is that it consolidated all of the `class` and `id` attributes to one custom `id` for each element apart of the tree. Even if the extension worked perfectly I'm still uncertain how to store CSS in a React.js component library.

With all this said, I'm looking forward to a future where it's much simpler to pull styles and elements from existing webpages into React components.