Merge branch 'release/1.4.0'

Author: AlexandreBourdeaudhui

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 **Ne pas oublier de changer le package.json**
 
+## 1.4.0 / 06-04-2020
+
+### :tada: Enhancements
+
+- Update React to the latest version
+- Title attribute for emojis
+- [#22](https://github.com/O-clock-Dev/formatizer/issues/22) : Remove CSS-in-JS' library and use CSS inline instead.
+
 ## 1.3.4 / 17-03-2020
 
 ### :bug: Fixes

README.md

@@ -5,9 +5,6 @@
 You need these packages to install **Formatizer**.
 
 - React
-- Glamor & Glamorous
-
-If you don't have these, please install `yarn add react glamor glamorous`
 
 ## :rocket: Installation
 

package.json

@@ -1,11 +1,11 @@
 {
   "name": "formatizer",
-  "version": "1.3.4",
+  "version": "1.4.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/O-clock-dev/formatizer.git"
   },
-  "author": "Alexandre Bourdeaud'hui <alexandre@oclock.io>",
+  "author": "Team O’clock <dev@oclock.io>",
   "license": "MIT",
   "scripts": {
     "start": "brunch watch --server",
@@ -25,12 +25,11 @@
   },
   "dependencies": {
     "emoji-mart": "^2.11.1",
+    "enzyme-adapter-react-16": "^1.15.2",
     "react-syntax-highlighter": "^5.7.0"
   },
   "peerDependencies": {
-    "glamor": "^2.20.40",
-    "glamorous": "^4.11.0",
-    "react": "^15.4.1 || ^16.0.0"
+    "react": "^16.2.0 || ^16.13.1"
   },
   "devDependencies": {
     "auto-reload-brunch": "^2.7.1",
@@ -45,24 +44,21 @@
     "brunch": "^2.10.12",
     "chai": "^4.1.2",
     "enzyme": "^3.2.0",
-    "enzyme-adapter-react-15": "^1.0.5",
     "eslint": "^4.4.1",
     "eslint-config-airbnb": "^15.1.0",
     "eslint-import-resolver-node": "^0.3.0",
     "eslint-plugin-import": "^2.3.0",
     "eslint-plugin-jsx-a11y": "^5.0.3",
     "eslint-plugin-react": "^7.1.0",
-    "glamor": "^2.20.40",
-    "glamorous": "^4.11.0",
     "husky": "^0.14.3",
     "jsdom": "^11.5.1",
     "lint-staged": "^6.0.0",
     "mocha": "^4.0.1",
     "prettier": "^1.9.1",
     "prop-types": "^15.6.0",
-    "react": "^15.6.2",
-    "react-dom": "^15.6.2",
-    "react-test-renderer": "^15.6.2"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-test-renderer": "^16.13.1"
   },
   "main": "dist/index.js",
   "files": [
@@ -81,6 +77,7 @@
     "react"
   ],
   "contributors": [
+    "Alexandre Bourdeaud’hui <alexandre@oclock.io>",
     "Maxime Vasse <maxime@oclock.io>"
   ]
 }

src/components/Format/index.js

@@ -24,21 +24,21 @@ const Format = ({ children, ...props }) => {
   /*
    * View
    */
-
-  // @TODO : Delete <span> when we pass at React 16
   return (
-    <span>
+    <React.Fragment>
       {fragments.map((fragment, index) => {
         // If element is a string
         if (typeof fragment === 'string') {
-          return <span key={index}>{fragment}</span>;
+          return <React.Fragment key={index}>{fragment}</React.Fragment>;
         }
 
         // Otherwise, is a Piece of Fragment.
         // Clone element to add key
-        return React.cloneElement(fragment, { key: index });
+        return React.cloneElement(fragment, {
+          key: index,
+        });
       })}
-    </span>
+    </React.Fragment>
   );
 };
 

src/components/Formatizer/index.js

@@ -8,21 +8,16 @@ import PropTypes from 'prop-types';
  * Local Import
  */
 import Format from 'src/components/Format';
-import { Container } from './style';
-
-/*
- * Code
- */
 
 /*
  * Component
  */
 const Formatizer = ({ children, ...props }) => (
-  <Container>
+  <div style={{ paddingRight: '.2em' }}>
     <Format {...props}>
       {typeof children === 'object' ? children.join('') : children}
     </Format>
-  </Container>
+  </div>
 );
 Formatizer.propTypes = {
   children: PropTypes.oneOfType([

src/components/Formatizer/style.js

@@ -3,7 +3,6 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import glamorous from 'glamorous';
 
 /*
  * Local Import
@@ -18,15 +17,12 @@ export const patternBlockquote = /(?:^|\n.)>[^\n]+\n?/gm;
 /*
  * Style
  */
-const Style = glamorous.span({
+const style = {
   display: 'block',
   borderLeft: '3px solid rgba(255,255,255,0.2)',
   fontStyle: 'italic',
   paddingLeft: '.7em',
-  '&:last-of-type': {
-    marginBottom: '.2em',
-  },
-});
+};
 
 /*
  * Component
@@ -36,9 +32,9 @@ const Blockquote = ({ children }) => {
   const value = children.slice(1);
 
   return (
-    <Style>
+    <span style={style}>
       <Format>{value}</Format>
-    </Style>
+    </span>
   );
 };
 

src/components/Piece/Blockquote/index.js

@@ -16,7 +16,6 @@ export const patternCharacter = /\n+/g;
 /*
  * Component
  */
-// @TODO, get rid of <span>s with React 16.2
 const Character = ({ children }) => {
   // Line
   if (children === '\n') {
@@ -26,15 +25,15 @@ const Character = ({ children }) => {
   // Multiline
   if (children.slice(0, 1) === '\n') {
     return (
-      <span>
+      <React.Fragment>
         <br />
         <br />
-      </span>
+      </React.Fragment>
     );
   }
 
   // Other char
-  return <span>{children}</span>;
+  return <React.Fragment>{children}</React.Fragment>;
 };
 
 /*

src/components/Piece/Character/index.js

@@ -7,21 +7,31 @@ import PropTypes from 'prop-types';
 /*
  * Local Import
  */
-import { Style } from './style';
+import { Chunk, CodingFont } from '../style';
 
 /*
  * Pattern
  */
 export const patternCode = /`(.+?)\n?`/g;
 
+/*
+ * Style
+ */
+const style = {
+  ...Chunk,
+  ...CodingFont,
+  color: '#abb2bf',
+  padding: '.1em .3em',
+};
+
 /*
  * Component
  */
 const Code = ({ children }) => {
   // Get rid of first and last `
   const value = children.slice(1, -1).trim();
 
-  return <Style>{value}</Style>;
+  return <span style={style}>{value}</span>;
 };
 
 /*