Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

Commit 87093d9

Browse files
levithomasonlevithomason
authored
docs: add quick start page (#145)
* docs: add quick start page * fix(Button): make styles work with anchors * docs: add changelog entry * address code snippet feedback * docs: add exported themes to changelog * fix: quick start yarn add command
1 parent 405a01d commit 87093d9

File tree

16 files changed

+206
-22
lines changed

16 files changed

+206
-22
lines changed

‎CHANGELOG.md

+5
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,17 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
2424
- Fix docs pages presenting examples of wrong component @kuzhelov ([#124](https://github.com/stardust-ui/react/pull/124))
2525
- Fix component variables when merging themes @levithomason ([#128](https://github.com/stardust-ui/react/pull/128))
2626
- Fix docs *Maximize* for shorthand examples @miroslavstastny ([#122](https://github.com/stardust-ui/react/pull/122))
27+
- Fix Button styles when rendered as an anchor @levithomason ([#145](https://github.com/stardust-ui/react/pull/145))
2728

2829
### Features
2930
- Add basic `Radio` component @alinais ([#100](https://github.com/stardust-ui/react/pull/100))
3031
- Add `descriptionColor` to Header @kuzhelov ([#78](https://github.com/stardust-ui/react/pull/78))
3132
- Add accessibility behavior description @kolaps33 ([#74](https://github.com/stardust-ui/react/pull/74))
3233
- Add strict null checks for generated TS types @smykhailov ([#108](https://github.com/stardust-ui/react/pull/108))
34+
- Export themes at `@stardust-ui/react/themes` @levithomason ([#145](https://github.com/stardust-ui/react/pull/145))
35+
36+
### Documentation
37+
- Add a Quick Start guide @levithomason ([#145](https://github.com/stardust-ui/react/pull/145))
3338

3439
<!--------------------------------[ v0.3.0 ]------------------------------- -->
3540
## [v0.3.0](https://github.com/stardust-ui/react/tree/v0.3.0) (2018-08-22)

‎build/tsconfig.common.json

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"baseUrl": "../",
77
"paths": {
88
"@stardust-ui/react": ["src"],
9+
"@stardust-ui/react/themes/teams": ["src/themes/teams"],
910
"*": ["*", "types/*"]
1011
},
1112
"types": [

‎docs/src/components/CodeSnippet.tsx

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import * as React from 'react'
2+
import Editor, { EDITOR_BACKGROUND_COLOR } from './Editor'
3+
4+
export interface CodeSnippetProps {
5+
label?: string
6+
mode?: 'jsx' | 'html' | 'sh'
7+
value: string
8+
style?: React.CSSProperties
9+
}
10+
11+
const CodeSnippet = ({ label = '', value, mode, style, ...rest }: CodeSnippetProps) => (
12+
<div
13+
style={{
14+
position: 'relative',
15+
padding: '1rem',
16+
marginBottom: '2rem',
17+
background: EDITOR_BACKGROUND_COLOR,
18+
...style,
19+
}}
20+
>
21+
<div
22+
style={{
23+
position: 'absolute',
24+
padding: '0.2rem 0.35rem',
25+
top: '1rem',
26+
right: '1rem',
27+
lineHeight: 1,
28+
color: '#899',
29+
fontFamily: 'monospace',
30+
fontSize: '0.8rem',
31+
border: '1px solid #566',
32+
zIndex: 100,
33+
}}
34+
>
35+
{label || mode}
36+
</div>
37+
<Editor
38+
id={btoa(value)}
39+
highlightActiveLine={false}
40+
highlightGutterLine={false}
41+
mode={mode}
42+
readOnly
43+
showGutter={false}
44+
showCursor={false}
45+
value={mode === 'sh' ? value.replace(/^/g, '$ ') : value}
46+
{...rest}
47+
/>
48+
</div>
49+
)
50+
export default CodeSnippet

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

+1-4
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {
1717
} from 'docs/src/utils'
1818
import evalTypeScript from 'docs/src/utils/evalTypeScript'
1919
import { callable, doesNodeContainClick, mergeThemes, pxToRem } from 'src/lib'
20-
import Editor from 'docs/src/components/Editor'
20+
import Editor, { EDITOR_BACKGROUND_COLOR, EDITOR_GUTTER_COLOR } from 'docs/src/components/Editor'
2121
import ComponentControls from '../ComponentControls'
2222
import ComponentExampleTitle from './ComponentExampleTitle'
2323
import ContributionPrompt from '../ContributionPrompt'
@@ -49,9 +49,6 @@ interface IComponentExampleState {
4949
copiedCode: boolean
5050
}
5151

52-
const EDITOR_BACKGROUND_COLOR = '#1D1F21'
53-
const EDITOR_GUTTER_COLOR = '#26282d'
54-
5552
const childrenStyle: React.CSSProperties = {
5653
paddingTop: 0,
5754
maxWidth: pxToRem(500),

‎docs/src/components/DocPage/DocPage.tsx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import * as React from 'react'
2+
import DocumentTitle from 'react-document-title'
3+
import { Header } from 'semantic-ui-react'
4+
5+
interface IDocPageProps {
6+
title: string
7+
description?: string
8+
children: React.ReactNode
9+
}
10+
11+
const DocPage = ({ title, description, children }: IDocPageProps) => (
12+
<DocumentTitle title={'Stardust - ' + title}>
13+
<div style={{ padding: '2rem', fontSize: '1.15rem', maxWidth: '80ch' }}>
14+
<Header as="h1" content={title} subheader={description} textAlign="center" />
15+
16+
{children}
17+
</div>
18+
</DocumentTitle>
19+
)
20+
21+
export default DocPage

‎docs/src/components/DocPage/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './DocPage'

‎docs/src/components/Editor/Editor.tsx

+9-5
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ import * as _ from 'lodash'
22
import PropTypes from 'prop-types'
33
import * as React from 'react'
44
import AceEditor, { AceEditorProps } from 'react-ace'
5-
import ace from 'brace'
5+
import * as ace from 'brace'
66
import 'brace/ext/language_tools'
7-
import 'brace/mode/jsx'
87
import 'brace/mode/html'
8+
import 'brace/mode/jsx'
9+
import 'brace/mode/sh'
910
import 'brace/theme/tomorrow_night'
1011
import { eventStack, doesNodeContainClick } from 'src/lib'
1112

@@ -45,16 +46,19 @@ const semanticUIReactCompleter = {
4546
languageTools.addCompleter(semanticUIReactCompleter)
4647

4748
export interface IEditorProps extends AceEditorProps {
48-
id?: string
49+
id: string
4950
value?: string
50-
mode?: 'html' | 'jsx'
51+
mode?: 'html' | 'jsx' | 'sh'
5152
onClick?: () => void
5253
onOutsideClick?: (e: Event) => void
5354
active?: boolean
5455
showCursor?: boolean
5556
highlightGutterLine?: boolean
5657
}
5758

59+
export const EDITOR_BACKGROUND_COLOR = '#1D1F21'
60+
export const EDITOR_GUTTER_COLOR = '#26282d'
61+
5862
class Editor extends React.Component<IEditorProps> {
5963
private lineCount: number
6064

@@ -63,7 +67,7 @@ class Editor extends React.Component<IEditorProps> {
6367
public static propTypes = {
6468
id: PropTypes.string.isRequired,
6569
value: PropTypes.string.isRequired,
66-
mode: PropTypes.oneOf(['html', 'jsx']),
70+
mode: PropTypes.oneOf(['html', 'jsx', 'sh']),
6771
onClick: PropTypes.func,
6872
onOutsideClick: PropTypes.func,
6973
active: PropTypes.bool,

‎docs/src/components/Editor/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { default, IEditorProps } from './Editor'
1+
export { default, IEditorProps, EDITOR_BACKGROUND_COLOR, EDITOR_GUTTER_COLOR } from './Editor'

‎docs/src/components/Sidebar/Sidebar.tsx

+21-11
Original file line numberDiff line numberDiff line change
@@ -171,25 +171,35 @@ class Sidebar extends React.Component<any, any> {
171171
<Menu.Item>
172172
<Logo spaced="right" size="mini" />
173173
<strong>
174-
Stardust &nbsp;
174+
Stardust UI React &nbsp;
175175
<small>
176176
<em>{pkg.version}</em>
177177
</small>
178178
</strong>
179+
<Menu.Menu>
180+
<Menu.Item as="a" href={repoURL} target="_blank" rel="noopener noreferrer">
181+
<Icon name="github" /> GitHub
182+
</Menu.Item>
183+
<Menu.Item
184+
as="a"
185+
href={`${repoURL}/blob/master/CHANGELOG.md`}
186+
target="_blank"
187+
rel="noopener noreferrer"
188+
>
189+
<Icon name="file alternate outline" /> CHANGELOG
190+
</Menu.Item>
191+
</Menu.Menu>
179192
</Menu.Item>
180193
<Menu.Item as={NavLink} exact to="/" activeClassName="active">
181194
Introduction
182195
</Menu.Item>
183-
<Menu.Item as="a" href={repoURL} target="_blank" rel="noopener noreferrer">
184-
<Icon name="github" /> GitHub
185-
</Menu.Item>
186-
<Menu.Item
187-
as="a"
188-
href={`${repoURL}/blob/master/CHANGELOG.md`}
189-
target="_blank"
190-
rel="noopener noreferrer"
191-
>
192-
<Icon name="file alternate outline" /> CHANGELOG
196+
<Menu.Item>
197+
Guides
198+
<Menu.Menu>
199+
<Menu.Item as={NavLink} exact to="/quick-start" activeClassName="active">
200+
Quick Start
201+
</Menu.Item>
202+
</Menu.Menu>
193203
</Menu.Item>
194204
<Menu.Item active>
195205
<SemanticUIInput

‎docs/src/index.ejs

+7
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,13 @@
7171
margin: 1.5em 0;
7272
}
7373
74+
blockquote {
75+
border-left: 4px solid #777;
76+
padding-left: 1rem;
77+
margin-left: 0;
78+
opacity: 0.8;
79+
}
80+
7481
pre {
7582
margin: 0;
7683
}

‎docs/src/routes.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import DocsRoot from './components/DocsRoot'
77

88
import Introduction from './views/Introduction'
99
import PageNotFound from './views/PageNotFound'
10+
import QuickStart from './views/QuickStart'
1011

1112
const Router = () => (
1213
<BrowserRouter basename={__BASENAME__}>
@@ -15,6 +16,7 @@ const Router = () => (
1516
<Switch>
1617
<DocsLayout exact path="/" component={Introduction} />
1718
<DocsLayout exact path="/:type/:name" component={DocsRoot} sidebar />
19+
<DocsLayout exact path="/quick-start" component={QuickStart} />
1820
<DocsLayout exact path="/*" component={PageNotFound} />
1921
</Switch>
2022
</Switch>

‎docs/src/views/Introduction.tsx

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as _ from 'lodash'
22
import PropTypes from 'prop-types'
33
import * as React from 'react'
4+
import { NavLink } from 'react-router-dom'
45

56
import Editor from 'docs/src/components/Editor'
67
import { Container, Divider, Grid, Header, Icon, Label, List, Segment } from 'semantic-ui-react'
@@ -38,14 +39,21 @@ Comparison.propTypes = {
3839
}
3940

4041
const Introduction = () => (
41-
<Container id="introduction-page">
42+
<Container id="introduction-page" text>
4243
<Segment basic textAlign="center">
4344
<Logo centered size="small" />
4445
<Header as="h1" textAlign="center">
4546
{_.capitalize(pkg.name)}
4647
<Header.Subheader>{pkg.description}</Header.Subheader>
4748
</Header>
4849
</Segment>
50+
<p>
51+
Stardust UI React is being built as an exemplar of the Stardust UI design language, component
52+
specifications, and utilities.
53+
</p>
54+
<p>
55+
See the <NavLink to="quick-start">Quick Start</NavLink> guide to get started.
56+
</p>
4957
</Container>
5058
)
5159

‎docs/src/views/QuickStart.tsx

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import * as React from 'react'
2+
import { NavLink } from 'react-router-dom'
3+
import { Header, Icon } from 'semantic-ui-react'
4+
5+
import { Button } from '@stardust-ui/react'
6+
7+
import CodeSnippet from '../components/CodeSnippet'
8+
import DocPage from '../components/DocPage'
9+
10+
export default () => (
11+
<DocPage title="Quick Start">
12+
<Header as="h2">Install</Header>
13+
<p>
14+
Stardust UI should be installed as a <code>dependency</code> of your app.
15+
</p>
16+
<CodeSnippet mode="sh" value="yarn add @stardust-ui/react" />
17+
<Header as="h2">Setup</Header>
18+
<p>
19+
Stardust components are styled using CSS in JS. This technique requires a style renderer to
20+
render JavaScript objects to CSS.{' '}
21+
<a href="https://reactjs.org/docs/context.html" target="_blank" rel="noopener nofollow">
22+
React Context <Icon name="external" size="small" link fitted />
23+
</a>{' '}
24+
is used to provide the style renderer and theme to components.
25+
</p>
26+
<p>
27+
Place a <code>{'<Provider />'}</code> at the root of your app and pass theme as props.
28+
</p>
29+
<CodeSnippet
30+
label="index.jsx"
31+
value={[
32+
`import React from 'react'`,
33+
`import ReactDOM from 'react-dom'`,
34+
`import { Provider } from '@stardust-ui/react'`,
35+
`import { fontFaces, staticStyles, theme } from '@stardust-ui/react/themes/teams'`,
36+
``,
37+
`import App from './App'`,
38+
``,
39+
`ReactDOM.render(`,
40+
` <Provider theme={theme} staticStyles={staticStyles} fontFaces={fontFaces}>`,
41+
` <App />`,
42+
` </Provider>,`,
43+
` document.getElementById('root'),`,
44+
`)`,
45+
].join('\n')}
46+
/>
47+
<Header as="h2">Usage</Header>
48+
<p>That's it. You can now use Stardust UI components in your app.</p>
49+
<CodeSnippet
50+
label="App.jsx"
51+
value={[
52+
`import React from 'react'`,
53+
`import { Button } from '@stardust-ui/react'`,
54+
``,
55+
`export default () => (`,
56+
` <Button type="primary" content="Docs" icon="arrow right" iconPosition="after" />`,
57+
`)`,
58+
].join('\n')}
59+
/>
60+
<br />
61+
{/* Show a preview of the above snippet */}
62+
<Button
63+
as={NavLink}
64+
content="Docs"
65+
type="primary"
66+
icon="arrow right"
67+
iconPosition="after"
68+
to="components/button"
69+
/>
70+
</DocPage>
71+
)

‎src/index.ts

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
import * as themes from './themes'
2+
export { themes }
3+
14
export { default as Accordion } from './components/Accordion'
25
export { default as Button } from './components/Button'
36
export { default as Chat } from './components/Chat'

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

+3
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ const buttonStyles: IComponentPartStylesInput = {
4545
(iconPosition
4646
? {
4747
display: 'inline-flex',
48+
alignItems: 'center',
4849
justifyContent: 'center',
4950
}
5051
: {
@@ -77,6 +78,7 @@ const buttonStyles: IComponentPartStylesInput = {
7778
backgroundColor: typePrimaryBackgroundColor,
7879
borderColor: typePrimaryBorderColor,
7980
':hover': {
81+
color: typePrimaryColor,
8082
backgroundColor: typePrimaryBackgroundColorHover,
8183
},
8284
}),
@@ -86,6 +88,7 @@ const buttonStyles: IComponentPartStylesInput = {
8688
backgroundColor: typeSecondaryBackgroundColor,
8789
borderColor: typeSecondaryBorderColor,
8890
':hover': {
91+
color: typeSecondaryColor,
8992
borderColor: 'transparent',
9093
backgroundColor: typeSecondaryBackgroundColorHover,
9194
},

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

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
const fontAwesomeIcons = new Map([
2+
['arrow right', 'f061'],
23
['chess rook', 'f447'],
34
['unordered list', 'f0ca'],
45
['ordered list', 'f0cb'],

0 commit comments

Comments
 (0)