Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/chrislopresto/ember-freestyle

Create a component explorer for your Ember app
https://github.com/chrislopresto/ember-freestyle

Last synced: 3 months ago
JSON representation

Create a component explorer for your Ember app

Awesome Lists containing this project

README 

        
# Ember Freestyle



[![Build Status](https://github.com/chrislopresto/ember-freestyle/workflows/CI/badge.svg?branch=master)](https://github.com/chrislopresto/ember-freestyle/actions)



![NPM Version](https://img.shields.io/npm/v/ember-freestyle?logo=npm)

![Download Count All Time](https://img.shields.io/npm/dt/ember-freestyle.svg)

[![Ember Observer Score](http://emberobserver.com/badges/ember-freestyle.svg)](http://emberobserver.com/addons/ember-freestyle)



[![All Contributors](https://img.shields.io/badge/all_contributors-39-orange.svg?style=flat-square)](#contributors-)



Ember Freestyle is an Ember addon that allows you to quickly create a component

explorer for your Ember app.



## Documentation



This README provides a lightweight overview of Ember Freestyle to get you going.

More complete documentation can be found at [https://chrislopresto.github.io/ember-freestyle](https://chrislopresto.github.io/ember-freestyle).



## Live Demo



To see Ember Freestyle in action, visit [https://chrislopresto.github.io/ember-freestyle/#/acceptance](https://chrislopresto.github.io/ember-freestyle/#/acceptance).



## Compatibility



* Ember.js v3.24 or above

* Ember CLI v3.24 or above

* Node.js v18 or above

* Ember Auto Import v2 or above



ember-freestyle includes TypeScript types, and provides a template registry that can be imported from `ember-freestyle/template-registry` for Glint usage.



## Installation



This installation process is opinionated in order to get you going quickly.



1. `ember install ember-freestyle`



    This will do the following:



    - Install the `ember-freestyle` addon itself

    - Add a `freestyle` template in your app

    - Add a `freestyle` controller in your app



2. Add `this.route('freestyle');` to your `app/router.js` file

3. Navigate to `/freestyle`. You should now see something like:



    ![](doc/freestyle-generated.png)



All of the generated output is optional. If you don't want a `freestyle` route,

for example, feel free to get rid of it and add a `freestyle-guide` somewhere

else in your app.



You can use the `freestyle-guide` component anywhere you'd like in your app.

You can organize your components into multiple Freestyle guides if you want to.

You can even use the constituent components like `freestyle-usage` on their own.



## Problems? No problem.



Hopefully the installation instructions got you off to a smooth, seamless start.

If you have any problems, feel free to chat with us in the [Ember Community Discord](https://discord.gg/emberjs) or [open an issue](https://github.com/chrislopresto/ember-freestyle/issues/new). As always, PRs are welcome!



## Excluding Ember Freestyle's Styles



If you want to exclude Ember Freestyle's styles, you can set the `includeStyles`

option to `false` in your `ember-cli-build.js` file:



```js

// ember-cli-build.js



module.exports = function (defaults) {

  const app = new EmberApp(defaults, {

    'ember-freestyle': {

      includeStyles: false,

    },

  };

};

```



This might be useful in case you want to define your own styles _or_ if you are

using `ember-cli-sass` and want to import Ember Freestyle's styles explicitly:



```scss

$FreestyleGuide-color--primary: #C70039;

$FreestyleGuide-color--accent: #DAF7A6;



@import 'ember-freestyle';

```



## Excluding Ember Freestyle from Your Production Build



We recommend excluding Ember Freestyle from production builds using Ember CLI's

`addons.exclude` option.



```js

// ember-cli-build.js



const environment = process.env.EMBER_ENV;

const addonsToExclude = environment === 'production' ? ['ember-freestyle'] : [];



module.exports = function (defaults) {

  const app = new EmberApp(defaults, {

    addons: {

      exclude: addonsToExclude,

    },

  };

};

```



## Using Ember Freestyle Within an Addon



You should include `ember-freestyle` in your `devDependencies` so that apps

using your addon will not include Ember Freestyle CSS and JavaScript in their

production builds.



## Contributing



See the [Contributing](CONTRIBUTING.md) guide for details.



## Contributors ✨



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



  

    
Chris LoPresto
💻 📖 ⚠️

    
Luke Melia
💻 📖 ⚠️

    
Andrew Fan
💻

    
Chris van der Ploeg
💻 📖

    
Ilya Radchenko
💻 📖

    
Mike Szörnyi
💻 📖

    
miguel barcos
⚠️

  

  

    
Nathan Ward
💻 📖

    
zidjian257
💻 ⚠️

    
Eli Dupuis
💻

    
Peter Wagenet
💻

    
Sivakumar Kailasam
💻

    
Manuel Wiedenmann
💻

    
Lucas Hill
💻

  

  

    
Alex Zlotnik
💻

    
Tamzin Blake
💻

    
Simon Ihmig
📖

    
Ryan Tablada
💻

    
Kerrick Long
💻

    
Hajdukovic Radovan
💻 📖

    
Rob
💻

  

  

    
Gijs Boddeus
💻

    
Sarah Canieso
💻

    
Brian Runnells
💻

    
Dan Wenzel
💻 ⚠️

    
Camille TJHOA
💻 📖

    
Michael Swanson
⚠️

    
Sam Van Campenhout
📖

  

  

    
Chris Krycho
💻

    
Will Bagby
💻 ⚠️

    
Noah
💻

    
Stanley Stuart
💻

    
Matt McManus
💻

    
Suzi Dao
💻 ⚠️

    
Ray Tiley
💻

  

  

    
lucasmerat
💻

    
Kit
💻

    
Andrey Mikhaylov (lolmaus)
🐛 💻

    
Bert De Block
💻 🤔

  



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



## License



This project is licensed under the [MIT License](LICENSE.md).