docs(gitbook): Integration Gitbook and Styleguidist - part 3

.dockerignore

@@ -7,3 +7,5 @@ dist/
 
 icons/
 styleguide/
+build/
+_book/

.gitignore

@@ -18,5 +18,6 @@ coverage
 # TDS build artifacts
 dist
 styleguide
-guide
+guide/components/
 _book
+build

Dockerfile

@@ -33,7 +33,7 @@ COPY . /app
 
 # Build the app.
 RUN yarn run build-package && \
-    STYLEGUIDIST_ENV=staging yarn run build-styleguide && \
+    STYLEGUIDIST_ENV=staging yarn run build:docs-staging && \
     STYLEGUIDIST_ENV=production yarn run build-styleguide
 
 # Set the container's user to the newly created one.

config/styleguide.config.js

@@ -2,8 +2,11 @@ const path = require('path')
 const { version } = require('../package.json')
 
 const styleguidistEnv = process.env.STYLEGUIDIST_ENV || 'dev' // dev, staging, production
-const isStaging = styleguidistEnv === 'staging'
-const getDirectory = () => (isStaging ? 'guide/components' : 'styleguide')
+
+const getStyleguideDir = () => {
+  const isStaging = styleguidistEnv === 'staging'
+  return path.resolve(isStaging ? 'guide/components' : `build/${styleguidistEnv}`)
+}
 
 // Append strings to this array to enable components in staging, e.g. `['Box', 'ExpandCollapse']`
 const enabledInStaging = ['Image', 'Checkbox', 'Radio', 'Select', 'Textarea']
@@ -265,7 +268,7 @@ module.exports = {
 
   template: styleguidistEnv === 'production' ? path.resolve('docs/index.html') : undefined,
   assetsDir: path.resolve('docs/assets/'),
-  styleguideDir: path.resolve(getDirectory(), !isStaging ? styleguidistEnv : ''),
+  styleguideDir: getStyleguideDir(),
   require: [path.resolve('src/scss/global.scss'), path.resolve('docs/scss/styleguide.scss')],
   styleguideComponents: {
     Logo: path.resolve('docs/components/Logo/Logo'),

guide/README.md

@@ -0,0 +1,77 @@
+# TELUS Design System [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
+
+The TELUS Design System (TDS) is a set of living guidelines that communicates our brand promise through our digital experiences.
+It's a holistic platform that integrates documentation, guidelines and design management and that serves as single source for
+digital design guidelines, code patterns and UI elements.
+
+TDS usage, documentation & examples: <http://tds.telus.com>
+
+## Installation
+_If you are using the [isomorphic-starter-kit](https://github.com/telusdigital/telus-isomorphic-starter-kit), these steps should already be done._
+
+```sh
+yarn add @telusdigital/tds
+
+# Or, with npm :)
+npm install @telusdigital/tds --save
+```
+
+## Usage
+
+### 1. Import the TDS styles
+First, import the TDS stylesheet into the main entry point of your application. This stylesheet contains all the global TDS styles and the
+component styles. Webpack will bundle the TDS styles with your application specific styles.
+
+```js
+// index.js
+
+import React from 'react';
+import { render } from 'react-dom';
+
+import App from './App';
+
+import '@telusdigital/tds/dist/tds.css'
+
+render(
+  <App />,
+  document.getElementById("root")
+);
+```
+
+### 2. Use TDS Components
+Now, use TDS components in your application components.
+
+```js
+// MyLoadingCard.js
+
+import React from 'react';
+
+import { Card, Spinner } from '@telusdigital/tds';
+
+const MyLoadingCard = ({loading, children}) => (
+  <div>
+    {loading && <Spinner spinning={true} tip="Loading..." />}
+
+    <Card>
+      {children}
+    </Card>
+  </div>
+);
+```
+
+### 3. Use TDS Sass variables and mixins
+
+Finally, use TDS Sass variables and mixins in your Sass files. Only add these imports into files that use the provided
+variables, functions, or mixins.
+
+```scss
+// MyLoadingCard.scss
+
+@import '~@telusdigital/tds/dist/scss/helpers';
+@import '~@telusdigital/tds/dist/scss/mixins';
+@import '~@telusdigital/tds/dist/scss/variables';
+
+.my-loading-card {
+  color: $color-accessible-green;
+}
+```

guide/SUMMARY.md

@@ -0,0 +1,4 @@
+# Summary
+
+* [Introduction](README.md)
+* [Components](ref://components/index.html)

guide/book.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["otherlink"]
+}

package.json

@@ -11,18 +11,21 @@
     "build:js": "rollup -c config/rollup.config.js",
     "build:scss": "sh ./scripts/cp-scss.sh",
     "build-package": "yarn build:js && yarn build:css && yarn build:scss",
+    "build-gitbook": "gitbook build guide guide/_book",
     "build-styleguide": "styleguidist build --config config/styleguide.config.js",
-    "build:for-staging":
-      "yarn build-package && STYLEGUIDIST_ENV=staging yarn build-styleguide && gitbook build guide guide/staging",
+    "build:docs-staging": "yarn build-styleguide && gitbook build guide build/staging",
     "deploy:docs": "node ./scripts/deploy-docs.js",
     "deploy:package": "scripts/publish.sh",
     "dev": "styleguidist server --config config/styleguide.config.js",
+    "gitbook": "gitbook serve guide",
+    "gitbook:install": "gitbook install guide",
     "lint:js":
       "eslint src config docs scripts --ext '.js,.jsx' --config config/.eslintrc.json --fix",
     "lint:scss": "stylelint 'src/components/**/*.scss' --config config/.stylelintrc.json",
     "lint:ec": "echint",
     "lint": "yarn lint:js && yarn lint:scss && yarn lint:ec",
-    "precommit": "yarn lint && yarn test && yarn build-package && yarn build-styleguide",
+    "precommit":
+      "yarn lint && yarn test && yarn build-package && yarn build-styleguide && yarn build-gitbook",
     "release:changelog": "changelog",
     "release": "scripts/release.sh",
     "scaffold": "node scripts/scaffold.js",
@@ -72,7 +75,7 @@
     "eslint-plugin-react": "7.0.0",
     "file-loader": "^1.1.5",
     "generate-changelog": "^1.3.0",
-    "gitbook-plugin-otherlink": "^1.1.0",
+    "gitbook-cli": "^2.3.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^21.2.1",
     "jest-enzyme": "^4.0.1",
@@ -137,7 +140,9 @@
       "icons/scripts/icons.js",
       "styleguide/**",
       "**.tgz",
-      "guide/**"
+      "guide/components/**",
+      "guide/_book/**",
+      "build/**"
     ]
   }
 }

scripts/deploy-docs.js

@@ -29,9 +29,7 @@ const AWS = require('aws-sdk')
 const env = process.argv[2] || 'staging'
 const { version } = require('../package.json')
 
-const _path = env === 'staging' ? 'guide' : 'styleguide'
-
-const uploadDir = resolvePath(_path, env)
+const uploadDir = resolvePath('build', env)
 
 const config = {
   region: 'us-east-1',