stylish 0.0.1 → 0.0.2

data/support/editor-app/development/src/apis/index.coffee

@@ -0,0 +1,35 @@
+class Api
+  constructor: (options={})->
+    @base = options.base
+    @host = options.host
+    @cache = {}
+
+  get: (endpoint)->
+    $.get("http://localhost:8080/stylish/#{endpoint}")
+
+  browsePackages: (cb, bypass=false)->
+    packages = @cache.packages
+
+    if !bypass && packages
+      cb(packages)
+      return
+
+    @get("models/browse/packages").then (r)=>
+      @cache.packages = r
+      cb(r)
+
+  showPackage:(slug, cb, bypass=false)->
+    @cache.packageDetails ||= {}
+    existing = @cache.packageDetails[slug]
+
+    if existing && !bypass
+      cb(existing)
+      return
+    else
+      @get("models/show/packages/#{slug}").then (r)=>
+        @cache.packageDetails[slug] = r
+        cb(r)
+
+module.exports = apis = {}
+
+apis.stylish = new Api()

data/support/editor-app/development/src/components/editor.cjsx

@@ -0,0 +1,58 @@
+IS_MOBILE = typeof navigator == 'undefined' or navigator.userAgent.match(/Android/i) or navigator.userAgent.match(/webOS/i) or navigator.userAgent.match(/iPhone/i) or navigator.userAgent.match(/iPad/i) or navigator.userAgent.match(/iPod/i) or navigator.userAgent.match(/BlackBerry/i) or navigator.userAgent.match(/Windows Phone/i)
+
+if !IS_MOBILE
+  CodeMirror = require('codemirror')
+
+require "codemirror/keymap/sublime"
+require "codemirror/keymap/vim"
+
+require "codemirror/mode/css/css"
+require "codemirror/mode/coffeescript/coffeescript"
+require "codemirror/mode/gherkin/gherkin"
+require "codemirror/mode/htmlmixed/htmlmixed"
+require "codemirror/mode/haml/haml"
+require "codemirror/mode/jade/jade"
+require "codemirror/mode/ruby/ruby"
+require "codemirror/mode/sass/sass"
+require "codemirror/mode/slim/slim"
+require "codemirror/mode/yaml/yaml"
+require "codemirror/mode/markdown/markdown"
+
+require "codemirror/theme/monokai.css"
+require "codemirror/theme/eclipse.css"
+require "codemirror/theme/twilight.css"
+require "codemirror/theme/vibrant-ink.css"
+
+CodeMirrorEditor = React.createClass(
+  displayName: "Editor"
+
+  propTypes:
+    value: React.PropTypes.string
+    defaultValue: React.PropTypes.string
+    style: React.PropTypes.object
+    className: React.PropTypes.string
+    onChange: React.PropTypes.func
+
+  componentDidMount: ->
+    @editor = CodeMirror.fromTextArea(@refs.editor.getDOMNode(), @props)
+    @editor.on 'change', @handleChange
+
+  handleChange: ->
+
+  render: ->
+    editor = React.createElement('textarea',
+      ref: 'editor'
+      value: @props.value
+      readOnly: @props.readOnly
+      defaultValue: @props.defaultValue
+      onChange: @props.onChange
+      style: @props.textAreaStyle
+      className: @props.textAreaClassName or @props.textAreaClass)
+
+    React.createElement 'div', {
+      style: @props.style
+      className: @props.className
+    }, editor
+)
+
+module.exports = CodeMirrorEditor

data/support/editor-app/development/src/components/editor_drawer.cjsx

@@ -0,0 +1,7 @@
+component "EditorDrawer"
+
+view ->
+  <div className="editor drawer">
+  </div>
+
+module.exports = finished()

data/support/editor-app/development/src/components/header.cjsx

@@ -0,0 +1,12 @@
+register "Header"
+
+properties
+  title: "Stylish.io"
+  tag: "h4"
+
+view ->
+  <div className="ui page header">
+    {React.createElement(@props.tag, {}, @props.title)}
+  </div>
+
+module.exports = finished()

data/support/editor-app/development/src/components/index.coffee

@@ -0,0 +1,9 @@
+components = {}
+
+components.Header = require "./header"
+components.Sidebar = require "./sidebar"
+components.Editor = require "./editor"
+components.TiledGrid = require "./tiled_grid"
+components.EditorDrawer = require "./tiled_grid"
+
+module.exports = components

data/support/editor-app/development/src/components/sidebar.cjsx

@@ -0,0 +1,24 @@
+register "Sidebar"
+
+helpers
+  mixins: [Router.State]
+
+properties
+  launch: ".ui.launch.button"
+  element: ".ui.sidebar"
+
+events
+  componentDidMount: ->
+    console.log "Sidebar Mounted"
+    $(@props.element).sidebar()
+    $(@props.launch).on "click", => $(@props.element).sidebar('toggle')
+
+view ->
+  <div className="ui inverted vertical menu">
+    <a href="#" className="item">
+      <i className="home icon"></i>
+      Home
+    </a>
+  </div>
+
+module.exports = finished()

data/support/editor-app/development/src/components/tiled_grid.cjsx

@@ -0,0 +1,35 @@
+register "TiledGrid"
+
+properties
+  perRow: 4
+
+helpers
+  applyFormatter: (listOfChunks)->
+    formatter = @props.formatter
+    itemClass = @props.itemClass
+    
+    buildColumn = (item, index)->
+      <div className="ui column #{itemClass}" key="column-#{index}">
+        {formatter(item)}
+      </div>
+
+    html = _(listOfChunks).map (group, index)->
+      <div className="ui row" key="row-#{index}">
+        {_(group).map(buildColumn)}
+      </div>
+
+    html
+
+view ->
+  cx = React.addons.classSet
+
+  classes = 
+    "ui tiled grid": true
+  
+  classes["#{ util.wordsForNumber(@props.perRow) } columns"] = true
+
+  <div className={cx(classes)}>
+    {@applyFormatter(util.chunk(@props.items, @props.perRow))}
+  </div>
+
+module.exports = finished() 

data/support/editor-app/development/src/index.cjsx

@@ -0,0 +1,82 @@
+require "./styles/index.css.scss"
+require "codemirror/lib/codemirror.css"
+
+$                 = require "jquery"
+_                 = require "underscore"
+global            = if typeof(window) isnt "undefined" then window else global
+
+React           = require("expose?React!react/addons")
+global.Router   = require "react-router-component"
+
+Locations       = Router.Locations
+Location        = Router.Location
+
+global.util       = require "./lib/util"
+global.stylish    = require("./apis").stylish
+
+global.factory    = React.createFactory
+global.Link       = Router.Link
+
+definitions       = require("./sugar").globalized()
+registry          = require("./registry").globalized().loaded()
+
+{getComponent, getPage} = registry
+
+HomePage            = getPage("HomePage")
+PackageDetailsPage  = getPage("PackageDetailsPage")
+Sidebar             = getComponent("Sidebar")
+
+Application = React.createClass
+  displayName: "Application"
+  
+  getInitialState: ->
+    loaded: false
+    fullWidth: false
+
+  getContainerClasses: ->
+    cx
+      "full": true
+      "height": true
+      "container": !@requiresFullWidth()
+
+  requiresFullWidth: ->
+    @state.fullWidth is true
+
+  componentDidMount: ->
+    @setState(loaded: true)
+    @sidebar = React.render(<Sidebar />, el("sidebar"))
+    @setWidth()
+
+  onNavigation: ->
+    @setWidth()
+    $('#sidebar').sidebar('hide')
+  
+  setWidth: ->
+    route = @getCurrentRoute()
+
+    if route && route.props.fullWidth?
+      @setState(fullWidth: route.props.fullWidth)
+
+  getSidebar: ->
+    @sidebar
+
+  getCurrentRoute: ->
+    _(@refs.router?.refs).values()[0]
+  
+  isLoaded: ->
+    @state.loaded is true
+
+  render: ->
+    if @isLoaded() then @showApp() else @showLoadingIndicator()
+
+  showLoadingIndicator: ->
+    <div className="ui alert">Loading</div>
+
+  showApp: ->
+    <Locations ref="router" className={@getContainerClasses()} onNavigation={@onNavigation} onBeforeNavigation={@onBeforeNavigation} hash=true>
+      <Location ref="package_details" path="/packages/:slug" handler={PackageDetailsPage} />
+      <Location ref="home_page" path="/" handler={HomePage} />
+    </Locations>
+
+$ ->
+  global.App = React.render(<Application />, document.getElementById('app')) 

data/support/editor-app/development/src/lib/util.coffee

@@ -0,0 +1,48 @@
+_ = require "underscore"
+
+module.exports = util = {}
+
+#_.extend(util, inflections: require("inflection"), string:require("underscore.string"))
+
+util.chunk = (data, size)->
+  _.chain(data).groupBy((element, index)-> Math.floor(index/size)).toArray().value()
+
+# util.classify = (string, forceSingular = true)->
+#   string = util.singularize(string) if forceSingular
+#   classified = util.string.capitalize(util.string.camelize(string))
+#   classified
+
+# A safe way of arriving at a value from a string
+# that does not use eval
+#util.resolve = (string, root)->
+#  parts = string.split('.')
+#  _(parts).reduce (memo,part)->
+#    memo[part]
+#  , root
+
+util.read = (value)->
+  if _.isFunction(value) then value() else value
+
+util.wordsForNumber = (number)->
+  number = 0 if number is 0
+  number = number - 1 if number > 1
+
+  [
+    "one"
+    "two"
+    "three"
+    "four"
+    "five"
+    "six"
+    "seven"
+    "eight"
+    "nine"
+    "ten"
+    "eleven"
+    "twelve"
+    "thirteen"
+    "fourteen"
+    "fifteen"
+    "sixteen"
+    "seventeen"
+  ][number]

data/support/editor-app/development/src/pages/home.cjsx

@@ -0,0 +1,46 @@
+stylish = require("../apis/index").stylish
+
+TiledGrid = require("../components/tiled_grid")
+
+page "HomePage"
+
+helpers
+  showPackage: (pkg)->
+    <div className="ui card" key={pkg.slug}>
+      <Link href="/packages/#{ pkg.slug }">{pkg.name}</Link>
+    </div>
+
+state
+  loaded: false
+  packages: []
+
+properties
+  fullWidth: false
+
+helpers
+  isLoaded: -> 
+    @state.loaded is true
+
+events
+  componentDidMount: ->
+    @fetchStateFromApi() unless @isLoaded()
+
+  fetchStateFromApi: ->
+    page = @
+
+    stylish.browsePackages (response)->
+      page.setState(packages: response, loaded: true)
+
+view ->
+  <div className="ui body">
+    <div className="ui header">
+      <h4>Stylish Packages</h4>
+    </div>
+
+    <TiledGrid perRow=4 
+               items={@state.packages} 
+               formatter={@showPackage} 
+               itemClass="stylish-package" />
+  </div>
+
+module.exports = finished()

data/support/editor-app/development/src/pages/index.coffee

@@ -0,0 +1,6 @@
+pages = {}
+
+pages.HomePage = require "./home"
+pages.PackageDetailsPage = require "./package_details"
+
+module.exports = pages

data/support/editor-app/development/src/pages/package_details.cjsx

@@ -0,0 +1,55 @@
+page "PackageDetailsPage"
+
+state
+  loaded: false
+  package: undefined
+
+properties
+  fullWidth: false
+
+events
+  componentDidMount: ->
+    @fetchStateFromApi() unless @isLoaded()
+  
+  fetchStateFromApi: ->
+    page = @
+    slug = @props.slug 
+    
+    if slug? && _.isUndefined(@state.package)
+      stylish.showPackage slug, (pkg)->
+        page.setState(package: pkg, loaded: true)
+
+helpers 
+  isLoaded: ->
+    @state.loaded is true
+
+  getBody: ->
+    if @isLoaded() then @showDetails() else @loadingIndicator()
+  
+  loadingIndicator: ->
+    <div className="ui loading indicator">Loading...</div>
+
+  showDetails: ->
+    pkg = @state.package
+    pkg.categories ||= []
+
+    <div className="ui package details">
+      <div className="ui header">
+        <h2>{pkg.name}</h2>
+      </div>
+      <div className="ui segment">
+        <div className="ui header">
+          <h4>Components</h4>
+        </div>
+        <div className="ui very relaxed list">
+          {React.createElement("div", key: item, className:"item", item) for item in pkg.categories}
+        </div>
+      </div>
+    </div>
+
+view -> 
+  <div className="ui page package-details">
+    {@getBody()}  
+  </div>
+
+module.exports = finished() 

data/support/editor-app/development/src/registry.coffee

@@ -0,0 +1,35 @@
+module.exports = iface = {}
+
+global            = if typeof(window) isnt "undefined" then window else global
+
+registry = {pages:{}, apis: {}, components: {}}
+
+iface.loaded = ->
+  _.extend(registry.apis, require("./apis"))
+  _.extend(registry.pages, require("./pages"))
+  _.extend(registry.components, require("./components"))
+  iface
+
+iface.setPage = (name, componentClass)->
+  registry.pages[name] = componentClass
+
+iface.setComponent = (name, componentClass)->
+  registry.component[name] = componentClass
+
+iface.setApi = (name, component)->
+  registry.apis[name] = component
+
+iface.getPage = (identifier)->
+  registry.pages[identifier]
+
+iface.getComponent = (identifier)->
+  registry.components[identifier]
+
+iface.getApi = (identifier)->
+  registry.apis[identifier]
+
+iface.globalized = ->
+  for prop, val of iface
+    global[prop] = iface[val]
+
+  iface