docs: add quick start page

CHANGELOG.md

@@ -24,12 +24,17 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix docs pages presenting examples of wrong component @kuzhelov ([#124](https://github.com/stardust-ui/react/pull/124))
 - Fix component variables when merging themes @levithomason ([#128](https://github.com/stardust-ui/react/pull/128))
 - Fix docs *Maximize* for shorthand examples @miroslavstastny ([#122](https://github.com/stardust-ui/react/pull/122))
+- Fix Button styles when rendered as an anchor @levithomason ([#145](https://github.com/stardust-ui/react/pull/145))
 
 ### Features
 - Add basic `Radio` component @alinais ([#100](https://github.com/stardust-ui/react/pull/100))
 - Add `descriptionColor` to Header @kuzhelov ([#78](https://github.com/stardust-ui/react/pull/78))
 - Add accessibility behavior description @kolaps33 ([#74](https://github.com/stardust-ui/react/pull/74))
 - Add strict null checks for generated TS types @smykhailov ([#108](https://github.com/stardust-ui/react/pull/108))
+- Export themes at `@stardust-ui/react/themes` @levithomason ([#145](https://github.com/stardust-ui/react/pull/145))
+
+### Documentation
+- Add a Quick Start guide @levithomason ([#145](https://github.com/stardust-ui/react/pull/145))
 
 <!--------------------------------[ v0.3.0 ]------------------------------- -->
 ## [v0.3.0](https://github.com/stardust-ui/react/tree/v0.3.0) (2018-08-22)

build/tsconfig.common.json

@@ -6,6 +6,7 @@
     "baseUrl": "../",
     "paths": {
       "@stardust-ui/react": ["src"],
+      "@stardust-ui/react/themes/teams": ["src/themes/teams"],
       "*": ["*", "types/*"]
     },
     "types": [

docs/src/components/CodeSnippet.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react'
+import Editor, { EDITOR_BACKGROUND_COLOR } from './Editor'
+
+export interface CodeSnippetProps {
+  label?: string
+  mode?: 'jsx' | 'html' | 'sh'
+  value: string
+  style?: React.CSSProperties
+}
+
+const CodeSnippet = ({ label = '', value, mode, style, ...rest }: CodeSnippetProps) => (
+  <div
+    style={{
+      position: 'relative',
+      padding: '1rem',
+      marginBottom: '2rem',
+      background: EDITOR_BACKGROUND_COLOR,
+      ...style,
+    }}
+  >
+    <div
+      style={{
+        position: 'absolute',
+        padding: '0.2rem 0.35rem',
+        top: '1rem',
+        right: '1rem',
+        lineHeight: 1,
+        color: '#899',
+        fontFamily: 'monospace',
+        fontSize: '0.8rem',
+        border: '1px solid #566',
+        zIndex: 100,
+      }}
+    >
+      {label || mode}
+    </div>
+    <Editor
+      id={btoa(value)}
+      highlightActiveLine={false}
+      highlightGutterLine={false}
+      mode={mode}
+      readOnly
+      showGutter={false}
+      showCursor={false}
+      value={mode === 'sh' ? value.replace(/^/g, '$  ') : value}
+      {...rest}
+    />
+  </div>
+)
+export default CodeSnippet

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

@@ -17,7 +17,7 @@ import {
 } from 'docs/src/utils'
 import evalTypeScript from 'docs/src/utils/evalTypeScript'
 import { callable, doesNodeContainClick, mergeThemes, pxToRem } from 'src/lib'
-import Editor from 'docs/src/components/Editor'
+import Editor, { EDITOR_BACKGROUND_COLOR, EDITOR_GUTTER_COLOR } from 'docs/src/components/Editor'
 import ComponentControls from '../ComponentControls'
 import ComponentExampleTitle from './ComponentExampleTitle'
 import ContributionPrompt from '../ContributionPrompt'
@@ -49,9 +49,6 @@ interface IComponentExampleState {
   copiedCode: boolean
 }
 
-const EDITOR_BACKGROUND_COLOR = '#1D1F21'
-const EDITOR_GUTTER_COLOR = '#26282d'
-
 const childrenStyle: React.CSSProperties = {
   paddingTop: 0,
   maxWidth: pxToRem(500),

docs/src/components/DocPage/DocPage.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import DocumentTitle from 'react-document-title'
+import { Header } from 'semantic-ui-react'
+
+interface IDocPageProps {
+  title: string
+  description?: string
+  children: React.ReactNode
+}
+
+const DocPage = ({ title, description, children }: IDocPageProps) => (
+  <DocumentTitle title={'Stardust - ' + title}>
+    <div style={{ padding: '2rem', fontSize: '1.15rem', maxWidth: '80ch' }}>
+      <Header as="h1" content={title} subheader={description} textAlign="center" />
+
+      {children}
+    </div>
+  </DocumentTitle>
+)
+
+export default DocPage

docs/src/components/DocPage/index.tsx

@@ -0,0 +1 @@
+export { default } from './DocPage'

docs/src/components/Editor/Editor.tsx

@@ -2,10 +2,11 @@ import * as _ from 'lodash'
 import PropTypes from 'prop-types'
 import * as React from 'react'
 import AceEditor, { AceEditorProps } from 'react-ace'
-import ace from 'brace'
+import * as ace from 'brace'
 import 'brace/ext/language_tools'
-import 'brace/mode/jsx'
 import 'brace/mode/html'
+import 'brace/mode/jsx'
+import 'brace/mode/sh'
 import 'brace/theme/tomorrow_night'
 import { eventStack, doesNodeContainClick } from 'src/lib'
 
@@ -45,16 +46,19 @@ const semanticUIReactCompleter = {
 languageTools.addCompleter(semanticUIReactCompleter)
 
 export interface IEditorProps extends AceEditorProps {
-  id?: string
+  id: string
   value?: string
-  mode?: 'html' | 'jsx'
+  mode?: 'html' | 'jsx' | 'sh'
   onClick?: () => void
   onOutsideClick?: (e: Event) => void
   active?: boolean
   showCursor?: boolean
   highlightGutterLine?: boolean
 }
 
+export const EDITOR_BACKGROUND_COLOR = '#1D1F21'
+export const EDITOR_GUTTER_COLOR = '#26282d'
+
 class Editor extends React.Component<IEditorProps> {
   private lineCount: number
 
@@ -63,7 +67,7 @@ class Editor extends React.Component<IEditorProps> {
   public static propTypes = {
     id: PropTypes.string.isRequired,
     value: PropTypes.string.isRequired,
-    mode: PropTypes.oneOf(['html', 'jsx']),
+    mode: PropTypes.oneOf(['html', 'jsx', 'sh']),
     onClick: PropTypes.func,
     onOutsideClick: PropTypes.func,
     active: PropTypes.bool,

docs/src/components/Editor/index.tsx

@@ -1 +1 @@
-export { default, IEditorProps } from './Editor'
+export { default, IEditorProps, EDITOR_BACKGROUND_COLOR, EDITOR_GUTTER_COLOR } from './Editor'

docs/src/components/Sidebar/Sidebar.tsx

@@ -171,25 +171,35 @@ class Sidebar extends React.Component<any, any> {
         <Menu.Item>
           <Logo spaced="right" size="mini" />
           <strong>
-            Stardust &nbsp;
+            Stardust UI React &nbsp;
             <small>
               <em>{pkg.version}</em>
             </small>
           </strong>
+          <Menu.Menu>
+            <Menu.Item as="a" href={repoURL} target="_blank" rel="noopener noreferrer">
+              <Icon name="github" /> GitHub
+            </Menu.Item>
+            <Menu.Item
+              as="a"
+              href={`${repoURL}/blob/master/CHANGELOG.md`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Icon name="file alternate outline" /> CHANGELOG
+            </Menu.Item>
+          </Menu.Menu>
         </Menu.Item>
         <Menu.Item as={NavLink} exact to="/" activeClassName="active">
           Introduction
         </Menu.Item>
-        <Menu.Item as="a" href={repoURL} target="_blank" rel="noopener noreferrer">
-          <Icon name="github" /> GitHub
-        </Menu.Item>
-        <Menu.Item
-          as="a"
-          href={`${repoURL}/blob/master/CHANGELOG.md`}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Icon name="file alternate outline" /> CHANGELOG
+        <Menu.Item>
+          Guides
+          <Menu.Menu>
+            <Menu.Item as={NavLink} exact to="/quick-start" activeClassName="active">
+              Quick Start
+            </Menu.Item>
+          </Menu.Menu>
         </Menu.Item>
         <Menu.Item active>
           <SemanticUIInput

docs/src/index.ejs

@@ -71,6 +71,13 @@
       margin: 1.5em 0;
     }
 
+    blockquote {
+      border-left: 4px solid #777;
+      padding-left: 1rem;
+      margin-left: 0;
+      opacity: 0.8;
+    }
+
     pre {
       margin: 0;
     }

docs/src/routes.tsx

@@ -7,6 +7,7 @@ import DocsRoot from './components/DocsRoot'
 
 import Introduction from './views/Introduction'
 import PageNotFound from './views/PageNotFound'
+import QuickStart from './views/QuickStart'
 
 const Router = () => (
   <BrowserRouter basename={__BASENAME__}>
@@ -15,6 +16,7 @@ const Router = () => (
       <Switch>
         <DocsLayout exact path="/" component={Introduction} />
         <DocsLayout exact path="/:type/:name" component={DocsRoot} sidebar />
+        <DocsLayout exact path="/quick-start" component={QuickStart} />
         <DocsLayout exact path="/*" component={PageNotFound} />
       </Switch>
     </Switch>

docs/src/views/Introduction.tsx

@@ -1,6 +1,7 @@
 import * as _ from 'lodash'
 import PropTypes from 'prop-types'
 import * as React from 'react'
+import { NavLink } from 'react-router-dom'
 
 import Editor from 'docs/src/components/Editor'
 import { Container, Divider, Grid, Header, Icon, Label, List, Segment } from 'semantic-ui-react'
@@ -38,14 +39,21 @@ Comparison.propTypes = {
 }
 
 const Introduction = () => (
-  <Container id="introduction-page">
+  <Container id="introduction-page" text>
     <Segment basic textAlign="center">
       <Logo centered size="small" />
       <Header as="h1" textAlign="center">
         {_.capitalize(pkg.name)}
         <Header.Subheader>{pkg.description}</Header.Subheader>
       </Header>
     </Segment>
+    <p>
+      Stardust UI React is being built as an exemplar of the Stardust UI design language, component
+      specifications, and utilities.
+    </p>
+    <p>
+      See the <NavLink to="quick-start">Quick Start</NavLink> guide to get started.
+    </p>
   </Container>
 )
 

docs/src/views/QuickStart.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react'
+import { NavLink } from 'react-router-dom'
+import { Header, Icon } from 'semantic-ui-react'
+
+import { Button } from '@stardust-ui/react'
+
+import CodeSnippet from '../components/CodeSnippet'
+import DocPage from '../components/DocPage'
+
+export default () => (
+  <DocPage title="Quick Start">
+    <Header as="h2">Install</Header>
+    <p>
+      Stardust UI should be installed as a <code>dependency</code> of your app.
+    </p>
+    <CodeSnippet mode="sh" value="yarn add @stardust-ui/react" />
+    <Header as="h2">Setup</Header>
+    <p>
+      Stardust components are styled using CSS in JS. This technique requires a style renderer to
+      render JavaScript objects to CSS.{' '}
+      <a href="https://reactjs.org/docs/context.html" target="_blank" rel="noopener nofollow">
+        React Context <Icon name="external" size="small" link fitted />
+      </a>{' '}
+      is used to provide the style renderer and theme to components.
+    </p>
+    <p>
+      Place a <code>{'<Provider />'}</code> at the root of your app and pass theme as props.
+    </p>
+    <CodeSnippet
+      label="index.jsx"
+      value={[
+        `import React from 'react'`,
+        `import ReactDOM from 'react-dom'`,
+        `import { Provider } from '@stardust-ui/react'`,
+        `import { fontFaces, staticStyles, theme } from '@stardust-ui/react/themes/teams'`,
+        ``,
+        `import App from './App'`,
+        ``,
+        `ReactDOM.render(`,
+        `  <Provider theme={theme} staticStyles={staticStyles} fontFaces={fontFaces}>`,
+        `    <App />`,
+        `  </Provider>,`,
+        `  document.getElementById('root'),`,
+        `)`,
+      ].join('\n')}
+    />
+    <Header as="h2">Usage</Header>
+    <p>That's it. You can now use Stardust UI components in your app.</p>
+    <CodeSnippet
+      label="App.jsx"
+      value={[
+        `import React from 'react'`,
+        `import { Button } from '@stardust-ui/react'`,
+        ``,
+        `export default () => (`,
+        `  <Button type="primary" content="Docs" icon="arrow right" iconPosition="after" />`,
+        `)`,
+      ].join('\n')}
+    />
+    <br />
+    {/* Show a preview of the above snippet */}
+    <Button
+      as={NavLink}
+      content="Docs"
+      type="primary"
+      icon="arrow right"
+      iconPosition="after"
+      to="components/button"
+    />
+  </DocPage>
+)

src/index.ts

@@ -1,3 +1,6 @@
+import * as themes from './themes'
+export { themes }
+
 export { default as Accordion } from './components/Accordion'
 export { default as Button } from './components/Button'
 export { default as Chat } from './components/Chat'

src/themes/teams/components/Button/buttonStyles.ts

@@ -45,6 +45,7 @@ const buttonStyles: IComponentPartStylesInput = {
         (iconPosition
           ? {
               display: 'inline-flex',
+              alignItems: 'center',
               justifyContent: 'center',
             }
           : {
@@ -77,6 +78,7 @@ const buttonStyles: IComponentPartStylesInput = {
               backgroundColor: typePrimaryBackgroundColor,
               borderColor: typePrimaryBorderColor,
               ':hover': {
+                color: typePrimaryColor,
                 backgroundColor: typePrimaryBackgroundColorHover,
               },
             }),
@@ -86,6 +88,7 @@ const buttonStyles: IComponentPartStylesInput = {
               backgroundColor: typeSecondaryBackgroundColor,
               borderColor: typeSecondaryBorderColor,
               ':hover': {
+                color: typeSecondaryColor,
                 borderColor: 'transparent',
                 backgroundColor: typeSecondaryBackgroundColorHover,
               },

src/themes/teams/components/Icon/fontAwesomeIconStyles.ts

@@ -1,4 +1,5 @@
 const fontAwesomeIcons = new Map([
+  ['arrow right', 'f061'],
   ['chess rook', 'f447'],
   ['unordered list', 'f0ca'],
   ['ordered list', 'f0cb'],