AFP-229 Render code in markdown docs using the atlaskit code component

* Render code in markdown docs using the atlaskit code component

* Disable line numbers in code blocks

* Add changeset

Author: dpisani-atl

.changeset/38881e12/changes.json

@@ -0,0 +1,4 @@
+{
+  "releases": [{ "name": "@brisk-docs/website", "type": "patch" }],
+  "dependents": []
+}

.changeset/38881e12/changes.md

@@ -0,0 +1 @@
+- Display code blocks in markdown as syntax highlighted 

.eslintrc

@@ -25,30 +25,37 @@
       "never",
       { "css": "ignorePackages", "json": "always" }
     ],
-    "react/sort-comp": "off"
+    "react/sort-comp": "off",
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": [
+          "**/*.test.js",
+          "**/*.spec.js",
+          "**/*.test.ts",
+          "**/*.spec.ts",
+          "**/*.test.tsx",
+          "**/*.spec.tsx"
+        ]
+      }
+    ]
   },
   "settings": {
     "import/resolver": {
-        "node": {
-          "extensions": [
-            ".js",
-            ".jsx",
-            ".ts",
-            ".tsx"
-          ]
-        }
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
       }
-    
+    }
   },
   "overrides": [
-        {
-            "files": ["**/**/*.ts", "**/**/*.tsx"],
-            "parser": "@typescript-eslint/parser",
-            "plugins": ["emotion", "@typescript-eslint"],
-            "rules": {
-                "no-unused-vars": "off",
-                "@typescript-eslint/no-unused-vars": "error"
-            }
-        }
-    ]
+    {
+      "files": ["**/**/*.ts", "**/**/*.tsx"],
+      "parser": "@typescript-eslint/parser",
+      "plugins": ["emotion", "@typescript-eslint"],
+      "rules": {
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-unused-vars": "error"
+      }
+    }
+  ]
 }

package.json

@@ -40,6 +40,7 @@
         "@atlaskit/avatar": "^14.1.8",
         "@atlaskit/banner": "^8.0.1",
         "@atlaskit/button": "^8.2.4",
+        "@atlaskit/code": "^9.0.0",
         "@atlaskit/css-reset": "^3.0.5",
         "@atlaskit/docs": "^6.0.2",
         "@atlaskit/drawer": "^2.7.1",

packages/website/README.md

@@ -7,13 +7,13 @@ docs alongside your code.
 
 Start by installing Brisk Docs in your project
 
-```sh
+```shell
 npm install @brisk-docs/website
 ```
 
 To start your docs website locally, simply run:
 
-```sh
+```shell
 npm run brisk
 ```
 

packages/website/bin/page-generator/index.js

@@ -84,14 +84,15 @@ function generatePackagePages(packageInfo, generatorConfig) {
 
       const rawPagesPath = path.join(homePath, 'examples/isolated', example.id);
       const isolatedPath = path.join('/', `${rawPagesPath}`);
+      const pageTitle = titleCase(example.id);
 
       generateExamplePage(
         `${pagePath}.js`,
         `${rawPagesPath}.js`,
         example.path,
-        { ...pageData, isolatedPath },
+        { ...pageData, isolatedPath, pageTitle },
         generatorConfig,
-        titleCase(example.id),
+        pageTitle,
       );
 
       return {

packages/website/components/mdx/code/block.test.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { AkCodeBlock } from '@atlaskit/code';
+
+import CodeBlock from './block';
+
+const sampleCode = 'const x = 1;';
+
+describe('Code block markdown component', () => {
+  it('renders a AkCodeBlock component', () => {
+    const wrapper = shallow(<CodeBlock>{sampleCode}</CodeBlock>);
+    const codeBlocks = wrapper.find(AkCodeBlock);
+    expect(codeBlocks).toHaveLength(1);
+    expect(codeBlocks.first().props()).toHaveProperty('text', sampleCode);
+  });
+
+  it('transforms the language classname to select the rendered language', () => {
+    const wrapper = shallow(
+      <CodeBlock className="language-js">{sampleCode}</CodeBlock>,
+    );
+
+    expect(
+      wrapper
+        .find(AkCodeBlock)
+        .first()
+        .props(),
+    ).toHaveProperty('language', 'js');
+  });
+});

packages/website/components/mdx/code/block.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { AkCodeBlock } from '@atlaskit/code';
+
+interface Props {
+  children: string;
+  className?: string;
+}
+
+const getLanguageName = (className: string) => {
+  return className.replace(/language-/, '');
+};
+
+export default ({ children, className }: Props) => (
+  <AkCodeBlock
+    text={children}
+    language={className && getLanguageName(className)}
+    showLineNumbers={false}
+  />
+);

packages/website/components/mdx/code/index.ts

@@ -0,0 +1,2 @@
+export { default as CodeBlock } from './block';
+export { default as InlineCode } from './inline';

packages/website/components/mdx/code/inline.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { AkCode } from '@atlaskit/code';
+
+interface Props {
+  children: string;
+}
+
+export default ({ children }: Props) => <AkCode text={children} />;

packages/website/components/mdx/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Heading from './Heading';
 import Link from '../switch-link';
+import { CodeBlock, InlineCode } from './code';
 
 const components = {
   h1: props => <Heading {...props} tag="h1" />,
@@ -10,6 +11,8 @@ const components = {
   h5: props => <Heading {...props} tag="h5" />,
   h6: props => <Heading {...props} tag="h6" />,
   a: Link,
+  code: CodeBlock,
+  inlineCode: InlineCode,
 };
 
 export default components;

packages/website/components/page-templates/package-example.js

@@ -86,13 +86,9 @@ const PackageExample = ({ data, fileContents, children }) => {
       <PageContent>
         <ExampleStyle>
           <Header>
-            <h1>Dynamic Table</h1>
+            <h1>{data.pageTitle}</h1>
             <LinkButton href={data.isolatedPath}>Full page view</LinkButton>
           </Header>
-          <div style={{ padding: '24px 0px' }}>
-            The Dynamic Table component is a table component with pagination and
-            sorting functionality.
-          </div>
           <ExampleComponentContainer>
             <div className="inner-container">{children}</div>
           </ExampleComponentContainer>
@@ -109,6 +105,7 @@ PackageExample.propTypes = {
   data: PropTypes.shape({
     id: PropTypes.string.isRequired,
     packageName: PropTypes.string.isRequired,
+    pageTitle: PropTypes.string.isRequired,
   }).isRequired,
   fileContents: PropTypes.string.isRequired,
   children: PropTypes.node.isRequired,

packages/website/examples/markdown-code-blocks.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import Markdown from './sample-markdown/code-blocks.md';
+/*
+## Inline code examples
+
+Some inline bash code `echo "You are a wonderful person" >> affirmations.txt`
+
+`const myBestFeatures = ['kind', 'generous']`, a javascript snippet
+
+## Code block examples
+
+A js example
+
+```js
+// a React component
+
+import generateAffirmation from './generate-affirmation';
+
+const Affirmation = () => <div>{generateAffirmation()}</div>;
+```
+
+A C++ example
+
+```c++
+// Thanks to WebAssembly this is also valid for the web!
+#include <iostream>
+using namespace std;
+
+int main()
+{
+    cout << "Today will be a great day!";
+    return 0;
+}
+```
+*/
+
+export default () => <Markdown />;

packages/website/examples/sample-markdown/code-blocks.md

@@ -0,0 +1,31 @@
+## Inline code examples
+
+Some inline bash code `echo "You are a wonderful person" >> affirmations.txt`
+
+`const myBestFeatures = ['kind', 'generous']`, a javascript snippet
+
+## Code block examples
+
+A js example
+
+```js
+// a React component
+
+import generateAffirmation from './generate-affirmation';
+
+const Affirmation = () => <div>{generateAffirmation()}</div>;
+```
+
+A C++ example
+
+```c++
+/* Thanks to WebAssembly this is also valid for the web! */
+#include <iostream>
+using namespace std;
+
+int main()
+{
+    cout << "Today will be a great day!";
+    return 0;
+}
+```

packages/website/package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@atlaskit/avatar": "^14.1.8",
     "@atlaskit/button": "^8.2.4",
+    "@atlaskit/code": "^9.0.0",
     "@atlaskit/css-reset": "^3.0.5",
     "@atlaskit/docs": "^6.0.2",
     "@atlaskit/drawer": "^2.7.1",

tsconfig.json

@@ -22,7 +22,8 @@
   },
   "include": [
     "packages/react-changelogs/src/**/*",
+    "packages/website/**/*",
     "typings/**/*"
   ],
   "typeRoots": ["./typings", "./node_modules/@types"],
-}
+}

typings/atlaskit.d.ts

@@ -12,6 +12,13 @@ declare module '@atlaskit/pagination' {
   export default adefault;
 }
 
+declare module '@atlaskit/code' {
+  declare const AkCode: React.ComponentClass<any, any>;
+  declare const AkCodeBlock: React.ComponentClass<any, any>;
+
+  export { AkCode, AkCodeBlock };
+}
+
 interface ArrayConstructor {
   from(arrayLike: any, mapFn?: (item: any, index: number) => any): Array<any>;
 }

yarn.lock

@@ -153,6 +153,16 @@
     memoize-one "^3.0.1"
     react-syntax-highlighter "^10.0.1"
 
+"@atlaskit/code@^9.0.0":
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/@atlaskit/code/-/code-9.0.0.tgz#a5c3fcb1d490df43f25b47c928049a175f64fbcf"
+  integrity sha512-lYLV2S9TQxt4Lr+nA26QP0FNCrspw3GPwVqQx0PX7Coe+3nbXZc2HNQwqN+urs2WAc11B41jSy6NYXQ7+tTDIg==
+  dependencies:
+    "@atlaskit/theme" "^8.0.0"
+    "@babel/runtime" "^7.0.0"
+    memoize-one "^3.0.1"
+    react-syntax-highlighter "^10.0.1"
+
 "@atlaskit/css-reset@^3.0.5":
   version "3.0.5"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/css-reset/-/css-reset-3.0.5.tgz#c942746e2dc0b4b1c9aba58155383cdb92f50329"
@@ -481,6 +491,15 @@
     exenv "^1.2.2"
     prop-types "^15.5.10"
 
+"@atlaskit/theme@^8.0.0":
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/@atlaskit/theme/-/theme-8.1.1.tgz#bb546eb80eeb88969cd77454000d634d14b8140a"
+  integrity sha512-4LRj7ClY6OPoT8f2/s/G9Vt0CxOrL0hNNaPLqOwo8X6cMsIVcy2nfTIOFOurvK3zY9aJvRj5OFnoMim+6tTVMQ==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    exenv "^1.2.2"
+    prop-types "^15.5.10"
+
 "@atlaskit/theme@^8.0.1":
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/@atlaskit/theme/-/theme-8.0.1.tgz#aa474bed386963203d5e384806fe1a5cf732a533"