docs: add quick start page #145
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import * as React from 'react' | ||
| import Editor, { EDITOR_BACKGROUND_COLOR } from './Editor' | ||
|
|
||
| export interface ICodeSnippetProps { | ||
|
There was a problem hiding this comment. here is a point for further thought: to me it seems a bit unreasonable to use 'I' prefix for interface types - this leads to the fiolloiwng situation where import { ComponentVariablesInput, IComponentPartStylesInput } from '../../../types/theme'Here we are importing two type interfaces (in general sense) for styles and variables - but for some reason one uses There was a problem hiding this comment. I have no opinion here other than it should follow the best practice. It is nice to know when you can use There was a problem hiding this comment. I went to update this and it appears we have 44 interfaces in 24 files prefixed with "I" and only 4 interfaces in 3 files that aren't. I think we should make a separate PR that addresses this and updates the team about the new standard. I will still update my usage here to not include the prefix. |
||
| label?: string | ||
| mode?: 'jsx' | 'html' | 'sh' | ||
| value: string | ||
| style?: React.CSSProperties | ||
| } | ||
|
|
||
| const CodeSnippet = ({ label = '', value, mode, style, ...rest }: ICodeSnippetProps) => { | ||
| const editorMode: any = mode || label.replace(/.*\./, '') || 'jsx' | ||
|
There was a problem hiding this comment. it seems that we might obtain not supported editor mode's value here (like There was a problem hiding this comment. True. This is partial left over from a previous iteration where There was a problem hiding this comment. You also asked if it is OK to pass an unsupported value, no. It will break the highlighting and also throw. Also, |
||
|
|
||
| return ( | ||
| <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 || editorMode} | ||
| </div> | ||
| <Editor | ||
| id={btoa(value)} | ||
| highlightActiveLine={false} | ||
| highlightGutterLine={false} | ||
| mode={editorMode} | ||
| readOnly | ||
| showGutter={false} | ||
| showCursor={false} | ||
| value={editorMode === 'sh' ? value.replace(/^/g, '$ ') : value} | ||
| {...rest} | ||
| /> | ||
| </div> | ||
| ) | ||
| } | ||
| export default CodeSnippet | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default } from './DocPage' |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| export { default, IEditorProps, EDITOR_BACKGROUND_COLOR, EDITOR_GUTTER_COLOR } from './Editor' |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 install @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> | ||
| ) |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -45,6 +45,7 @@ const buttonStyles: IComponentPartStylesInput = { | |
| (iconPosition | ||
| ? { | ||
| display: 'inline-flex', | ||
| alignItems: 'center', | ||
|
There was a problem hiding this comment. as discussed, there is a corresponding PR #135 where bunch of related As a next work item related to that - the PR with conformance tests that will ensure that shorthand prop names correspond to component's anatomy parts, so that it would be intuitive for client to decide which name should be used for styling specific component's part: <Button icon={...} styles={ icon: () => ... } /> |
||
| 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, | ||
|
There was a problem hiding this comment. Fixed button styles when rendering as an |
||
| borderColor: 'transparent', | ||
| backgroundColor: typeSecondaryBackgroundColorHover, | ||
| }, | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍