Skip to content

layershifter/stardust

 
 

Repository files navigation

Stardust

Circle CI Codecov Code Climate Gemnasium npm

The official integration between Semantic UI and React.

Hey, we're in development. There are big changes taking place while we migrate to SUI-Org. Minor versions may introduce breaking changes until the v1.0 release.

Install

npm i stardust -S

Usage

App.js

import React, { Component } from 'react'
import { Button } from 'stardust'

export default class TryStardust extends Component {
  render() {
    return <Button>Hello</Button>
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try Stardust</title>

  <!-- SUI CSS -->
  <link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css" rel="stylesheet">

  <!-- Temporary script dependencies until we're done removing jQuery -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.js"></script>
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

We then use Webpack to create bundle.js from App.js and include it in index.html.

For more complete examples, check out the Doc Site.

Debugger

We use the debug module for debugging. You can turn debugging on and off via the localStorage.debug flag from the browser console. See the debug docs for more.

localStorage.debug = 'stardust:*'         // default, debug all components
localStorage.debug = 'stardust:dropdown'  // debug only the dropdown
localStorage.debug = null                 // turn debug off

Once you change the flag, you need to refresh your browser to see the changes in debug output.

How Can I Help?

First, get setup and acquainted with development by reading the contributing guidelines.

v1.0 Migrations

We're making two migrations right now:

  1. Moving legacy component APIs to our v1 API
  2. Removing jQuery and SUI JS

Each of these issues includes a list of components and more information on how you can help.

New Components

There is an issue for every missing component. They are all labeled enhancement help wanted and we're accepting PRs for these.

Be sure to check out the above migrations before embarking on a new component. All new components should be written in accordance with the migrations above.

Our Principles

TechnologyAdvice has been dogfooding Stardust in production since fall of 2015. This living list is updated as we iterate. We'll lock it in as our v1.0 constitution soon.

  • No jQuery dependency
  • No animation dependencies
  • Reuse SUI CSS transitions
  • Complete keyboard support
  • Complete SUI component definition support
  • Completely documented
  • Completely tested
  • Abstract away HTML markup intricacies

Support

Elements Collections Views Modules Behaviors
x Button _ Breadcrumb _ Advertisement _ Accordion x Form Validation
x Container x Form _ Card x Checkbox API (NA)
x Divider x Grid _ Comment _ Dimmer Visibility (NA)
_ Flag x Menu _ Feed x Dropdown
x Header x Message x Item _ Embed
x Icon x Table x Statistic x Modal
x Image _ Nag
x Input _ Popup
x Label x Progress
x List _ Rating
_ Loader _ Search
_ Rail _ Shape
_ Reveal _ Sidebar
x Segment _ Sticky
_ Step _ Tab
_ Transition

Releasing

On the latest clean master:

npm run release:major
npm run release:minor
npm run release:patch

Credit

Originally created with ❤️ at TechnologyAdvice. A ridiculous place to work.

About

🌟 The official Semantic-UI-React library

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%