Bundle styleguide

package.json

@@ -154,7 +154,7 @@
     "solarized-light-syntax": "file:packages/solarized-light-syntax",
     "spell-check": "https://codeload.github.com/atom/spell-check/legacy.tar.gz/refs/tags/v0.77.1",
     "status-bar": "file:packages/status-bar",
-    "styleguide": "https://codeload.github.com/atom/styleguide/legacy.tar.gz/refs/tags/v0.49.12",
+    "styleguide": "file:./packages/styleguide",
     "superstring": "^2.4.4",
     "symbols-view": "file:./packages/symbols-view",
     "tabs": "file:packages/tabs",

packages/styleguide/.gitignore

@@ -0,0 +1 @@
+node_modules

packages/styleguide/README.md

@@ -0,0 +1,8 @@
+# Styleguide package
+
+Styleguide will show you all the UI components used in Pulsar. It is useful as a reference when developing themes and packages.
+
+* <kbd>cmd-ctrl-shift-g</kbd> (macOS) and <kbd>ctrl-shift-g</kbd> (Windows and Linux) opens it in a new tab
+* You can click on the section headings to expand/collapse them
+
+![Demo](https://cloud.githubusercontent.com/assets/378023/15767543/ccecf9bc-2983-11e6-9c5e-d228d39f52b0.png)

packages/styleguide/keymaps/styleguide.cson

@@ -0,0 +1,5 @@
+'.platform-darwin':
+  'cmd-ctrl-G': 'styleguide:show'
+
+'.platform-win32, .platform-linux':
+  'ctrl-G': 'styleguide:show'

packages/styleguide/lib/code-block.js

@@ -0,0 +1,17 @@
+const {TextEditor} = require('atom')
+
+module.exports =
+class CodeBlock {
+  constructor (props) {
+    this.editor = new TextEditor({readonly: true, keyboardInputEnabled: false})
+    this.element = document.createElement('div')
+    this.element.appendChild(this.editor.getElement())
+    atom.grammars.assignLanguageMode(this.editor, props.grammarScopeName)
+    this.update(props)
+  }
+
+  update ({cssClass, code}) {
+    this.editor.setText(code)
+    this.element.classList.add(cssClass)
+  }
+}

packages/styleguide/lib/example-select-list-view.js

@@ -0,0 +1,68 @@
+/** @babel */
+/** @jsx etch.dom */
+
+import SelectListView from 'atom-select-list'
+import etch from 'etch'
+import dedent from 'dedent'
+import CodeBlock from './code-block'
+
+export default class ExampleSelectListView {
+  constructor () {
+    this.jsExampleCode = dedent`
+    import SelectListView from 'atom-select-list'
+
+    const selectListView = new SelectListView({
+      items: ['one', 'two', 'three'],
+      elementForItem: (item) => {
+        const li = document.createElement('li')
+        li.textContent = item
+        return li
+      },
+      didConfirmSelection: (item) => {
+        console.log('confirmed', item)
+      },
+      didCancelSelection: () => {
+        console.log('cancelled')
+      }
+    })
+    `
+    etch.initialize(this)
+  }
+
+  elementForItem (item) {
+    const li = document.createElement('li')
+    li.textContent = item
+    return li
+  }
+
+  didConfirmSelection (item) {
+    console.log('confirmed', item)
+  }
+
+  didCancelSelection () {
+    console.log('cancelled')
+  }
+
+  render () {
+    return (
+      <div className='example'>
+        <div className='example-rendered'>
+          <atom-panel className='modal'>
+            <SelectListView
+              items={['one', 'two', 'three']}
+              elementForItem={this.elementForItem.bind(this)}
+              onDidConfirmSelection={this.didConfirmSelection.bind(this)}
+              onDidCancelSelection={this.didCancelSelection.bind(this)} />
+          </atom-panel>
+        </div>
+        <div className='example-code show-example-space-pen'>
+          <CodeBlock cssClass='example-space-pen' grammarScopeName='source.js' code={this.jsExampleCode} />
+        </div>
+      </div>
+    )
+  }
+
+  update () {
+
+  }
+}

packages/styleguide/lib/styleguide-section.js

@@ -0,0 +1,73 @@
+/** @babel */
+/** @jsx etch.dom */
+
+import etch from 'etch'
+
+export default class StyleguideSection {
+  constructor (props, children) {
+    this.collapsed = props.collapsed
+    this.title = props.title
+    this.name = props.name
+    this.children = children
+    etch.initialize(this)
+    if (props.onDidInitialize) {
+      props.onDidInitialize(this)
+    }
+  }
+
+  render () {
+    if (this.loaded) {
+      let className = 'bordered'
+      if (this.collapsed) {
+        className += ' collapsed'
+      }
+      return (
+        <section className={className} dataset={{name: this.name}}>
+          <h1 className='section-heading' onclick={() => this.toggle()}>{this.title}</h1>
+          {this.children}
+        </section>
+      )
+    } else {
+      return (
+        <section className='bordered collapsed' dataset={{name: this.name}}>
+          <h1 className='section-heading' onclick={() => this.toggle()}>{this.title}</h1>
+        </section>
+      )
+    }
+  }
+
+  update (props, children) {
+    if (props.title) {
+      this.title = props.title
+    }
+
+    if (props.name) {
+      this.name = props.name
+    }
+
+    if (children) {
+      this.children = children
+    }
+
+    if (props.didExpandOrCollapseSection) {
+      this.didExpandOrCollapseSection = props.onDidExpandOrCollapseSection
+    }
+
+    return etch.update(this)
+  }
+
+  toggle () {
+    return this.collapsed ? this.expand() : this.collapse()
+  }
+
+  expand () {
+    this.collapsed = false
+    this.loaded = true
+    return etch.update(this)
+  }
+
+  collapse () {
+    this.collapsed = true
+    return etch.update(this)
+  }
+}

packages/styleguide/lib/styleguide.js

@@ -0,0 +1,24 @@
+const {CompositeDisposable} = require('atom')
+let StyleguideView = null
+
+const STYLEGUIDE_URI = 'atom://styleguide'
+
+module.exports = {
+  activate () {
+    this.subscriptions = new CompositeDisposable()
+    this.subscriptions.add(atom.workspace.addOpener(filePath => {
+      if (filePath === STYLEGUIDE_URI) return this.createStyleguideView({uri: STYLEGUIDE_URI})
+    }))
+    this.subscriptions.add(atom.commands.add('atom-workspace', 'styleguide:show', () => atom.workspace.open(STYLEGUIDE_URI))
+    )
+  },
+
+  deactivate () {
+    this.subscriptions.dispose()
+  },
+
+  createStyleguideView (state) {
+    if (StyleguideView == null) StyleguideView = require('./styleguide-view')
+    return new StyleguideView(state)
+  }
+}

packages/styleguide/menus/styleguide.cson

@@ -0,0 +1,10 @@
+'menu': [
+  'label': 'Packages'
+  'submenu': [
+    'label': 'Styleguide'
+    'submenu': [
+      'label': 'Show'
+      'command': 'styleguide:show'
+    ]
+  ]
+]

packages/styleguide/package-lock.json

@@ -0,0 +1,50 @@
+{
+  "name": "styleguide",
+  "version": "0.49.12",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "styleguide",
+      "version": "0.49.12",
+      "license": "MIT",
+      "dependencies": {
+        "atom-select-list": "^0.7.0",
+        "dedent": "^0.7.0",
+        "etch": "0.9.0"
+      },
+      "engines": {
+        "atom": "*"
+      }
+    },
+    "node_modules/atom-select-list": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/atom-select-list/-/atom-select-list-0.7.2.tgz",
+      "integrity": "sha512-a707OB1DhLGjzqtFrtMQKH7BBxFuCh8UBoUWxgFOrLrSwVh3g+/TlVPVDOz12+U0mDu3mIrnYLqQyhywQOTxhw==",
+      "dependencies": {
+        "etch": "^0.12.6",
+        "fuzzaldrin": "^2.1.0"
+      }
+    },
+    "node_modules/atom-select-list/node_modules/etch": {
+      "version": "0.12.8",
+      "resolved": "https://registry.npmjs.org/etch/-/etch-0.12.8.tgz",
+      "integrity": "sha512-dFLRe4wLroVtwzyy1vGlE3BSDZHiL0kZME5XgNGzZIULcYTvVno8vbiIleAesoKJmwWaxDTzG+4eppg2zk14JQ=="
+    },
+    "node_modules/dedent": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
+      "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA=="
+    },
+    "node_modules/etch": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/etch/-/etch-0.9.0.tgz",
+      "integrity": "sha512-UG0mzvvs8JyBo4tDG39mqGuZ7zZGKFn9QOzO+BhrKe17R/f+3U+jFgA/bjW/gTA2ykytcE/Qm826ltykCiIrFA=="
+    },
+    "node_modules/fuzzaldrin": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fuzzaldrin/-/fuzzaldrin-2.1.0.tgz",
+      "integrity": "sha512-zgllBYwfHR5P3CncJiGbGVPpa3iFYW1yuPaIv8DiTVRrcg5/6uETNL5zvIoKflG1aifXVUZTlIroDehw4WygGA=="
+    }
+  }
+}

packages/styleguide/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "styleguide",
+  "main": "./lib/styleguide",
+  "version": "0.49.12",
+  "description": "A visual styleguide of the Pulsars's UI components.",
+  "repository": "https://github.com/pulsar-edit/styleguide",
+  "license": "MIT",
+  "dependencies": {
+    "atom-select-list": "^0.7.0",
+    "dedent": "^0.7.0",
+    "etch": "0.9.0"
+  },
+  "deserializers": {
+    "StyleguideView": "createStyleguideView"
+  },
+  "engines": {
+    "atom": "*"
+  }
+}

packages/styleguide/spec/async-spec-helpers.js

@@ -0,0 +1,103 @@
+/** @babel */
+
+export function beforeEach (fn) {
+  global.beforeEach(function () {
+    const result = fn()
+    if (result instanceof Promise) {
+      waitsForPromise(() => result)
+    }
+  })
+}
+
+export function afterEach (fn) {
+  global.afterEach(function () {
+    const result = fn()
+    if (result instanceof Promise) {
+      waitsForPromise(() => result)
+    }
+  })
+}
+
+['it', 'fit', 'ffit', 'fffit'].forEach(function (name) {
+  module.exports[name] = function (description, fn) {
+    if (fn === undefined) {
+      global[name](description)
+      return
+    }
+
+    global[name](description, function () {
+      const result = fn()
+      if (result instanceof Promise) {
+        waitsForPromise(() => result)
+      }
+    })
+  }
+})
+
+export async function conditionPromise (condition, description = 'anonymous condition') {
+  const startTime = Date.now()
+
+  while (true) {
+    await timeoutPromise(100)
+
+    if (await condition()) {
+      return
+    }
+
+    if (Date.now() - startTime > 5000) {
+      throw new Error('Timed out waiting on ' + description)
+    }
+  }
+}
+
+export function timeoutPromise (timeout) {
+  return new Promise(function (resolve) {
+    global.setTimeout(resolve, timeout)
+  })
+}
+
+function waitsForPromise (fn) {
+  const promise = fn()
+  global.waitsFor('spec promise to resolve', function (done) {
+    promise.then(done, function (error) {
+      jasmine.getEnv().currentSpec.fail(error)
+      done()
+    })
+  })
+}
+
+export function emitterEventPromise (emitter, event, timeout = 15000) {
+  return new Promise((resolve, reject) => {
+    const timeoutHandle = setTimeout(() => {
+      reject(new Error(`Timed out waiting for '${event}' event`))
+    }, timeout)
+    emitter.once(event, () => {
+      clearTimeout(timeoutHandle)
+      resolve()
+    })
+  })
+}
+
+export function promisify (original) {
+  return function (...args) {
+    return new Promise((resolve, reject) => {
+      args.push((err, ...results) => {
+        if (err) {
+          reject(err)
+        } else {
+          resolve(...results)
+        }
+      })
+
+      return original(...args)
+    })
+  }
+}
+
+export function promisifySome (obj, fnNames) {
+  const result = {}
+  for (const fnName of fnNames) {
+    result[fnName] = promisify(obj[fnName])
+  }
+  return result
+}

packages/styleguide/spec/styleguide-spec.js

@@ -0,0 +1,18 @@
+const {it, fit, ffit, beforeEach, afterEach} = require('./async-spec-helpers') // eslint-disable-line no-unused-vars
+
+describe('Style Guide', () => {
+  beforeEach(async () => {
+    await atom.packages.activatePackage('styleguide')
+  })
+
+  describe('the Styleguide view', () => {
+    let styleGuideView
+    beforeEach(async () => {
+      styleGuideView = await atom.workspace.open('atom://styleguide')
+    })
+
+    it('opens the style guide', () => {
+      expect(styleGuideView.element.textContent).toContain('Styleguide')
+    })
+  })
+})

packages/styleguide/styles/components.less

@@ -0,0 +1,134 @@
+@import "ui-variables";
+
+//
+// This adds some component styles specifically for the Styleguide
+// --------------------------------
+
+.styleguide {
+
+  // Icons ---------------
+
+  [data-name="icons"] {
+    .example-rendered {
+      display: flex;
+      flex-wrap: wrap;
+      align-content: flex-start;
+    }
+
+    .example-code {
+      display: none; // remove, doesn't make much sense here
+    }
+
+    .icon {
+      position: relative;
+      flex: 1 0 200px;
+      padding: 10px 0 10px 40px;
+      color: @text-color-subtle;
+      &:before {
+        position: absolute;
+        margin-left: -32px;
+        color: @text-color-highlight;
+        text-align: center;
+      }
+      &:hover {
+        color: @text-color-highlight;
+        &:before {
+          color: @text-color-selected;
+          font-size: 32px;
+          width: 32px;
+          height: 32px;
+          margin-top: -8px;
+          margin-left: -40px; // 32px (initial) + 8px (grow)
+        }
+      }
+    }
+
+    // Make the Gist logo bigger
+    .icon-logo-gist {
+      &:before,
+      &:hover:before {
+        font-size: 2.5em;
+        margin-top: -.05em;
+        margin-left: -1.3em;
+        width: 16px;
+        height: 16px;
+      }
+    }
+
+    // Make the GitHub logo bigger
+    .icon-logo-github {
+      &:before,
+      &:hover:before {
+        font-size: 3em;
+        margin-top: .08em;
+        margin-left: -1.2em;
+      }
+    }
+  }
+
+  // Inputs + controls ---------------
+
+  .input-search,
+  .input-textarea {
+    margin-top: @component-padding;
+  }
+
+  .input-label {
+    display: block;
+    width: -webkit-max-content;
+    margin: 0 1em 1em 0;
+  }
+
+  .input-color,
+  .input-number,
+  .input-select {
+    margin: 0 @component-padding 0 0 !important;
+  }
+
+
+  // Site colors ---------------
+
+  .ui-site-1,
+  .ui-site-2,
+  .ui-site-3,
+  .ui-site-4,
+  .ui-site-5 {
+    height: 10px;
+    width: 100px;
+  }
+
+
+  // Modals ---------------
+
+  atom-panel.modal {
+    // makde them responsive in the styleguide
+    position: relative;
+    max-width: 100%;
+    left: 0;
+    margin: 0;
+  }
+
+
+  // Misc ---------------
+
+  .popover-list {
+    position: relative;
+  }
+
+  .popover-list,
+  .select-list {
+    atom-text-editor[mini] { height: 27px; }
+  }
+
+  .tooltip {
+    position: relative;
+    opacity: 1;
+    display: inline-block;
+    margin-right: @component-padding;
+  }
+
+  [data-name="error-messages"] .example-rendered {
+    min-height: 60px; // don't cut off centered messages
+  }
+
+}

packages/styleguide/styles/styleguide.less

@@ -0,0 +1,129 @@
+@import "ui-variables";
+@import "syntax-variables";
+
+@styleguide-spacing: @component-padding *1.5;
+@styleguide-bg: darken(@base-background-color, 2%);
+
+.styleguide {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  a {
+    text-decoration: underline;
+  }
+}
+
+.styleguide-controls {
+  position: absolute;
+  right: @component-padding;
+  top: @component-padding;
+  z-index: 100;
+}
+
+.styleguide-header {
+  padding: @styleguide-spacing;
+  border-bottom: 1px solid @base-border-color;
+  h1 {
+    font-size: 2em;
+    margin: 0 0 .5em 0;
+    color: @text-color-highlight;
+  }
+  p {
+    font-size: 1.2em;
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.styleguide-sections {
+  flex: 1;
+  overflow: auto;
+
+  & > section {
+    background-color: @styleguide-bg;
+    padding: 0;
+    border-bottom: 1px solid @base-border-color;
+    border-top: none;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &.collapsed {
+      background-color: @base-background-color;
+      > .section-heading {
+        display: block;
+        margin: 0;
+        padding-bottom: @styleguide-spacing;
+        color: @text-color;
+        &:hover {
+          color: @text-color-highlight;
+          background-color: @background-color-highlight;
+        }
+        &:active {
+          background-color: @base-background-color;
+        }
+      }
+      > * {
+        display: none
+      }
+    }
+  }
+
+  .section-heading.section-heading {
+    padding: @styleguide-spacing @styleguide-spacing 0 @styleguide-spacing;
+    cursor: pointer;
+    font-weight: normal;
+    font-size: 1.8em;
+    color: @text-color-highlight;
+  }
+
+  section > h2 {
+    font-size: 1.5em;
+    line-height: 1.2;
+    margin: 1em @styleguide-spacing 0 @styleguide-spacing;
+    color: @text-color-highlight;
+  }
+
+  section > p {
+    font-size: 1.1em;
+    margin: .5em @styleguide-spacing 1em @styleguide-spacing;
+  }
+}
+
+// Example -------------------------------
+
+.styleguide .example {
+  @example-background: @base-background-color;
+
+  display: flex;
+  flex-wrap: wrap;
+  border-radius: @component-border-radius;
+  padding: @component-padding / 2;
+
+  .example-rendered,
+  .example-code {
+    position: relative;
+    flex: 1 1 300px;
+    min-width: 0;
+    margin: @component-padding / 2;
+    border-radius: @component-border-radius;
+    border: 1px solid @tool-panel-border-color;
+  }
+
+  .example-rendered {
+    padding: @component-padding;
+    background: @example-background;
+    overflow: hidden;
+  }
+
+  .example-code {
+    background-color: @syntax-background-color;
+    pre {
+      border: none;
+      background-color: inherit;
+    }
+  }
+}

packages/styleguide/styles/variables.less

@@ -0,0 +1,148 @@
+@import "ui-variables";
+@import "syntax-variables";
+
+.styleguide [data-name="variables"] {
+
+  // Text colors
+  .color( text-color );
+  .color( text-color-subtle );
+  .color( text-color-highlight );
+  .color( text-color-selected );
+  .color( text-color-info );
+  .color( text-color-success );
+  .color( text-color-warning );
+  .color( text-color-error );
+
+  // Background colors
+  .color( background-color-info );
+  .color( background-color-success );
+  .color( background-color-warning );
+  .color( background-color-error );
+  .color( background-color-highlight );
+  .color( background-color-selected );
+  .color( app-background-color );
+
+  // Base colors
+  .color( base-background-color );
+  .color( base-border-color );
+
+  // Pane colors
+  .color( pane-item-background-color );
+  .color( pane-item-border-color );
+
+  // Input colors
+  .color( input-background-color );
+  .color( input-border-color );
+
+  // Panel colors
+  .color( tool-panel-background-color );
+  .color( tool-panel-border-color );
+  .color( inset-panel-background-color );
+  .color( inset-panel-border-color );
+  .color( panel-heading-background-color );
+  .color( panel-heading-border-color );
+  .color( overlay-background-color );
+  .color( overlay-border-color );
+
+  // Button colors
+  .color( button-background-color );
+  .color( button-background-color-hover );
+  .color( button-background-color-selected );
+  .color( button-border-color );
+
+  // Tab colors
+  .color( tab-bar-background-color );
+  .color( tab-bar-border-color );
+  .color( tab-background-color );
+  .color( tab-background-color-active );
+  .color( tab-border-color );
+
+  // Tree-view colors
+  .color( tree-view-background-color );
+  .color( tree-view-border-color );
+
+  // Site colors
+  .color( ui-site-color-1 );
+  .color( ui-site-color-2 );
+  .color( ui-site-color-3 );
+  .color( ui-site-color-4 );
+  .color( ui-site-color-5 );
+
+  // Component sizes
+  .size( disclosure-arrow-size );
+  .size( component-padding );
+  .size( component-icon-padding );
+  .size( component-icon-size );
+  .size( component-line-height );
+  .size( tab-height );
+  .size( font-size );
+
+  // Misc
+  .radius( component-border-radius );
+  .font( font-family );
+
+
+  // Visualize --------------------------------
+
+  .is-color:before,
+  .is-size:after,
+  .is-radius:after {
+    content: "";
+    display: inline-block;
+    height: 20px;
+    vertical-align: middle;
+  }
+  .is-color:before {
+    margin-right: @component-padding*1.5;
+    width: 20%;
+  }
+  .is-size:after {
+    margin-left: @component-padding*1.5;
+    height: 4px;
+    background-color: @text-color;
+  }
+  .is-radius:after {
+    width: 20px;
+    margin-left: @component-padding*1.5;
+    background-color: @text-color;
+  }
+  .is-font:after {
+    margin-left: @component-padding;
+    color: @text-color-highlight;
+  }
+
+
+  // Mixins --------------------------------
+
+  .color(@variable) {
+    .is-color.@{variable}:before {
+      background-color: @@variable;
+    }
+  }
+
+  .size(@variable) {
+    .is-size.@{variable}:after {
+      width: @@variable;
+    }
+  }
+
+  .radius(@variable) {
+    .is-radius.@{variable}:after {
+      border-radius: @@variable;
+    }
+  }
+
+  .font(@variable) {
+    .is-font.@{variable}:after {
+      content: @@variable;
+      font-family: @@variable;
+    }
+  }
+
+
+  // Custom styling for vars --------------------------------
+
+  .example-code {
+    display: none; // remove, doesn't make much sense here
+  }
+}

yarn.lock

@@ -9045,9 +9045,8 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
-"styleguide@https://codeload.github.com/atom/styleguide/legacy.tar.gz/refs/tags/v0.49.12":
+"styleguide@file:./packages/styleguide":
   version "0.49.12"
-  resolved "https://codeload.github.com/atom/styleguide/legacy.tar.gz/refs/tags/v0.49.12#d2c09228e5da99017034227b8bc571fea56bc63b"
   dependencies:
     atom-select-list "^0.7.0"
     dedent "^0.7.0"