feat: Create a CodeDef component to abstract the styles of a code def…

…inition

src/components/CodeDef/Block.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './CodeDef.module.scss';
+
+const Block = ({ children }) => <div className={styles.block}>{children}</div>;
+
+Block.propTypes = {
+  children: PropTypes.node,
+};
+
+export default Block;

src/components/CodeDef/Bracket.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './CodeDef.module.scss';
+
+const Punctuation = ({ children }) => (
+  <span className={styles.bracket}>{children}</span>
+);
+
+Punctuation.propTypes = {
+  children: PropTypes.node,
+};
+
+export default Punctuation;

src/components/CodeDef/CodeDef.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import styles from './CodeDef.module.scss';
+import Block from './Block';
+import Comment from './Comment';
+import Identifier from './Identifier';
+import Keyword from './Keyword';
+import Bracket from './Bracket';
+import Type from './Type';
+
+const CodeDef = ({ className, children }) => (
+  <code className={cx(styles.container, className)}>{children}</code>
+);
+
+CodeDef.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+CodeDef.Block = Block;
+CodeDef.Comment = Comment;
+CodeDef.Keyword = Keyword;
+CodeDef.Identifier = Identifier;
+CodeDef.Bracket = Bracket;
+CodeDef.Type = Type;
+
+export default CodeDef;

src/components/CodeDef/CodeDef.module.scss

@@ -0,0 +1,30 @@
+.container {
+  display: block;
+  line-height: 2rem;
+}
+
+.keyword,
+.identifier {
+  color: var(--color-neutrals-700);
+}
+
+.type {
+  color: var(--color-green-500);
+  background: var(--color-green-050);
+}
+
+.comment {
+  color: var(--color-neutrals-500);
+
+  > p {
+    display: inline;
+  }
+}
+
+.bracket {
+  color: var(--color-neutrals-500);
+}
+
+.block {
+  margin-left: 1rem;
+}

src/components/CodeDef/Comment.js

@@ -0,0 +1,32 @@
+import React, { Children } from 'react';
+import PropTypes from 'prop-types';
+import Markdown from 'react-markdown';
+import styles from './CodeDef.module.scss';
+
+const Content = ({ children, ...props }) => {
+  if (Children.toArray(children).length === 0) {
+    return null;
+  }
+
+  return (
+    <span {...props} className={styles.comment}>
+      {`//`} {children}
+    </span>
+  );
+};
+
+const renderers = {
+  root: Content,
+};
+
+const Comment = ({ text }) => <Markdown source={text} renderers={renderers} />;
+
+Content.propTypes = {
+  children: PropTypes.node,
+};
+
+Comment.propTypes = {
+  text: PropTypes.string,
+};
+
+export default Comment;

src/components/CodeDef/Identifier.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './CodeDef.module.scss';
+
+const Identifier = ({ children }) => (
+  <span className={styles.identifier}>{children}</span>
+);
+
+Identifier.propTypes = {
+  children: PropTypes.node,
+};
+
+export default Identifier;

src/components/CodeDef/Keyword.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './CodeDef.module.scss';
+
+const Keyword = ({ children }) => (
+  <span className={styles.keyword}>{children}</span>
+);
+
+Keyword.propTypes = {
+  children: PropTypes.node,
+};
+
+export default Keyword;

src/components/CodeDef/Type.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './CodeDef.module.scss';
+
+const Type = ({ children }) => <span className={styles.type}>{children}</span>;
+
+Type.propTypes = {
+  children: PropTypes.node,
+};
+
+export default Type;

src/components/CodeDef/index.js

@@ -0,0 +1 @@
+export { default } from './CodeDef';