docs: add quick start page #145

levithomason · 2018-08-28T05:59:29Z

This PR adds a little info to the Introduction page and links the Quick Start guide (many more guides on another branch will be posted tomorrow).

codecov · 2018-08-28T06:01:49Z

Codecov Report

Merging #145 into master will decrease coverage by 19.73%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #145       +/-   ##
==========================================
- Coverage   88.93%   69.2%   -19.74%     
==========================================
  Files          47     101       +54     
  Lines         768    1341      +573     
  Branches      103     251      +148     
==========================================
+ Hits          683     928      +245     
- Misses         83     411      +328     
  Partials        2       2

Impacted Files	Coverage Δ
...mes/teams/components/Icon/fontAwesomeIconStyles.ts	`40% <ø> (ø)`
src/themes/teams/components/Button/buttonStyles.ts	`11.42% <ø> (ø)`
src/index.ts	`100% <100%> (ø)`	⬆️
...ams/components/Accordion/accordionContentStyles.ts	`50% <0%> (ø)`
.../themes/teams/components/List/listItemVariables.ts	`100% <0%> (ø)`
src/themes/teams/components/List/listStyles.ts	`37.5% <0%> (ø)`
src/themes/teams/components/Icon/iconVariables.ts	`100% <0%> (ø)`
src/themes/teams/components/Label/labelStyles.ts	`37.5% <0%> (ø)`
... and 48 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 405a01d...a096478. Read the comment docs.

levithomason · 2018-08-28T06:04:43Z

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

@@ -1,4 +1,5 @@
 const fontAwesomeIcons = new Map([
+  ['arrow right', 'f061'],


Icon used in quick start example.

levithomason · 2018-08-28T06:04:58Z

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

@@ -86,6 +88,7 @@ const buttonStyles: IComponentPartStylesInput = {
              backgroundColor: typeSecondaryBackgroundColor,
              borderColor: typeSecondaryBorderColor,
              ':hover': {
+                color: typeSecondaryColor,


Fixed button styles when rendering as an a tag.

levithomason · 2018-08-28T06:05:19Z

src/index.ts

@@ -1,3 +1,6 @@
+import * as themes from './themes'
+export { themes }


Export themes from our package.

levithomason · 2018-08-28T06:07:01Z

docs/src/components/Editor/Editor.tsx

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

 export interface IEditorProps extends AceEditorProps {
-  id?: string
+  id: string


This is a DOM id and is required by AceEditor to work correctly.

smykhailov · 2018-08-28T10:25:36Z

@levithomason, can we also add an explanation, that Stardust UI consists of two parts:

Component Library
The framework which allows creating a new components

This part is a little bit confusing for consumers of the library. I've seen that consumers create new components extended from React.Component instead of extending them from UIComponent which allows them to leverage styling, accessibility, and theming provided by Framework.

kuzhelov · 2018-08-28T14:38:15Z

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

@@ -45,6 +45,7 @@ const buttonStyles: IComponentPartStylesInput = {
        (iconPosition
          ? {
              display: 'inline-flex',
+              alignItems: 'center',


as discussed, there is a corresponding PR #135 where bunch of related Button problems are addressed.

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: () => ... } />

kuzhelov · 2018-08-28T14:38:55Z

build/tsconfig.common.json

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


kuzhelov · 2018-08-28T14:44:55Z

docs/src/components/CodeSnippet.tsx

+import * as React from 'react'
+import Editor, { EDITOR_BACKGROUND_COLOR } from './Editor'
+
+export interface ICodeSnippetProps {


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 interface types and alias type types - both with exactly the same semantics, - are mixed:

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 I prefix :) What I would suggest is to omit I prefix altogether for all types - this will make them consistent. Actually, the same approach React has taken for its types - quite a few of them are TS interfaces, but all the exposed names are consistent to the client as there are no I prefixes

I have no opinion here other than it should follow the best practice. It is nice to know when you can use extends (interfaces but not types). However, it appears the official recommendation is to not use prefixes. Will update.

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.

kuzhelov · 2018-08-28T14:55:09Z

docs/src/components/CodeSnippet.tsx

+}
+
+const CodeSnippet = ({ label = '', value, mode, style, ...rest }: ICodeSnippetProps) => {
+  const editorMode: any = mode || label.replace(/.*\./, '') || 'jsx'


it seems that we might obtain not supported editor mode's value here (like tsx from label). Is it fine to pass this value to AceEditor then, or we should opt to some default (maybe, 'text') mode, so that only explicitly supported modes will be rendered (and, thus, guaranteed to be rendered properly)?

True. This is partial left over from a previous iteration where label was named filename. However, the point still stands. I'm going to revert to using the less magical mode prop just as the Editor does. This will ensure we can explicitly set the mode/highlighting separate from the label in the code snippet.

You also asked if it is OK to pass an unsupported value, no. It will break the highlighting and also throw. Also, tsx is not a supported mode.

markpete · 2018-08-28T15:41:57Z

The command should be 'yarn add @stardust-ui/react' yarn install doesn't work.

markpete · 2018-08-28T15:48:51Z

The library @stardust-ui/react/themes/teams isn't installed by installing the core @stardust-ui/react and trying to add that module directly doesn't work. Where does one get that module from? Without it, the base example doesn't work.

levithomason · 2018-08-28T16:01:04Z

...command should be 'yarn add @stardust-ui/react'
Fixed!

...@stardust-ui/react/themes/teams isn't installed by installing the core @stardust-ui/react

It is installed, however, it is not exported at that path until this PR is released. You can find it in v0.3.0 at @stardust-ui/dist/react/es/themes/teams where es is your module preference. There is also commonjs. Have a look in node_modules/@stardust-ui to confirm the path.

levithomason · 2018-08-28T16:06:25Z

@levithomason, can we also add an explanation, that Stardust UI consists of two parts:

Component Library

The framework which allows creating a new components

@smykhailov Agreed but I think we need to flesh this out still. We haven't yet put forward a proposal for how consumers will do this. Let's save that for another PR.

markpete · 2018-08-28T16:28:05Z

Non-SVG icons still don't seem to work with these instructions. They come in as boxes. Is there a need to include a font such as FontAwesome or something?

docs: add quick start page

64fef06

levithomason requested review from dvdzkwsk, kuzhelov, miroslavstastny and mnajdova as code owners August 28, 2018 05:59

fix(Button): make styles work with anchors

cac949d

docs: add changelog entry

c967fbd

levithomason added the 🚀 ready for review label Aug 28, 2018

levithomason commented Aug 28, 2018

View reviewed changes

Merge branch 'master' into docs/quick-start

1329af7

levithomason commented Aug 28, 2018

View reviewed changes

kuzhelov reviewed Aug 28, 2018

View reviewed changes

kuzhelov approved these changes Aug 28, 2018

View reviewed changes

levithomason added 3 commits August 28, 2018 08:55

address code snippet feedback

e33a4e5

docs: add exported themes to changelog

e179c17

fix: quick start yarn add command

de6ec17

merge master

a096478

levithomason merged commit 87093d9 into master Aug 28, 2018

levithomason deleted the docs/quick-start branch August 28, 2018 16:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: add quick start page #145

docs: add quick start page #145

levithomason commented Aug 28, 2018 •

edited

Loading

codecov bot commented Aug 28, 2018 •

edited

Loading

levithomason Aug 28, 2018

levithomason Aug 28, 2018

levithomason Aug 28, 2018

levithomason Aug 28, 2018

smykhailov commented Aug 28, 2018

kuzhelov Aug 28, 2018

kuzhelov Aug 28, 2018

kuzhelov Aug 28, 2018

levithomason Aug 28, 2018

levithomason Aug 28, 2018

kuzhelov Aug 28, 2018 •

edited

Loading

levithomason Aug 28, 2018

levithomason Aug 28, 2018

markpete commented Aug 28, 2018

markpete commented Aug 28, 2018

levithomason commented Aug 28, 2018

levithomason commented Aug 28, 2018 •

edited

Loading

markpete commented Aug 28, 2018

		@@ -1,4 +1,5 @@
		const fontAwesomeIcons = new Map([
		['arrow right', 'f061'],

		@@ -1,3 +1,6 @@
		import * as themes from './themes'
		export { themes }

docs: add quick start page #145

docs: add quick start page #145

Conversation

levithomason commented Aug 28, 2018 • edited Loading

codecov bot commented Aug 28, 2018 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

smykhailov commented Aug 28, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kuzhelov Aug 28, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

markpete commented Aug 28, 2018

markpete commented Aug 28, 2018

levithomason commented Aug 28, 2018

levithomason commented Aug 28, 2018 • edited Loading

markpete commented Aug 28, 2018

levithomason commented Aug 28, 2018 •

edited

Loading

codecov bot commented Aug 28, 2018 •

edited

Loading

kuzhelov Aug 28, 2018 •

edited

Loading

levithomason commented Aug 28, 2018 •

edited

Loading