Merge pull request #131 from xsnippet/bemi-2

Add bemi to all components

Author: lotrien

src/components/Header.jsx

@@ -1,21 +1,26 @@
 import React from 'react'
 import { NavLink } from 'react-router-dom'
 
-import '../styles/Header.styl'
+import bemi from 'bemi'
+
 import Logo from '../assets/icons/xsnippet.svg'
 
+import '../styles/Header.styl'
+
+const header = bemi('header')
+
 const Header = () => (
-  <header className="header" key="header">
-    <div className="header-logo">
+  <header className={header.b()}>
+    <div className={header.e('logo')}>
       <NavLink exact to="/">
         <img src={Logo} alt="XSnippet" />
       </NavLink>
     </div>
-    <div className="header-inner">
-      <div className="header-slogan">
-        <span className="header-slogan-x">X</span>SNIPPET
+    <div className={header.e('inner')}>
+      <div className={header.e('slogan')}>
+        <span className={header.e('slogan-x')}>X</span>SNIPPET
       </div>
-      <div className="header-sign-in">
+      <div className={header.e('sign-in')}>
         <NavLink to="/sign-in">
           <span>Sign in</span>
           <i className="icon-user" />

src/components/NewSnippet.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useMemo } from 'react'
 import { connect } from 'react-redux'
 import AceEditor from 'react-ace'
 import { WithContext as Tags } from 'react-tag-input'
+import bemi from 'bemi'
 
 import 'brace/theme/textmate'
 
@@ -24,6 +25,8 @@ import '../styles/NewSnippet.styl'
 
 const ListBoxWithSearch = withSearch(ListBox)
 
+const newSnippet = bemi('new-snippet')
+
 const NewSnippet = ({ dispatch, history, syntaxes }) => {
   const snippetHeader = useRef()
   const {
@@ -54,7 +57,7 @@ const NewSnippet = ({ dispatch, history, syntaxes }) => {
   const recalcLangHeaderHeight = () => {
     const height = snippetHeader.current.offsetHeight
 
-    document.getElementsByClassName('new-snippet-lang-header')[0]
+    document.getElementsByClassName(newSnippet.e('lang-header'))[0]
       .setAttribute('style', `height:${height}px`)
   }
 
@@ -86,13 +89,13 @@ const NewSnippet = ({ dispatch, history, syntaxes }) => {
 
   return (
     <form
-      className="new-snippet"
+      className={newSnippet.b()}
       key="New Snippet"
       onSubmit={handleSubmit}
       role="presentation"
     >
-      <div className="new-snippet-code-wrapper">
-        <div className="new-snippet-code-header" ref={snippetHeader}>
+      <div className={newSnippet.e('code-wrapper')}>
+        <div className={newSnippet.e('code-header')} ref={snippetHeader}>
           <input
             className="input"
             placeholder="Title"
@@ -110,7 +113,7 @@ const NewSnippet = ({ dispatch, history, syntaxes }) => {
             delimiters={delimeterKeys}
           />
         </div>
-        <div className="new-snippet-code">
+        <div className={newSnippet.e('code')}>
           <AceEditor
             mode={getCurrentModeName(syntax)}
             width="100%"
@@ -123,15 +126,15 @@ const NewSnippet = ({ dispatch, history, syntaxes }) => {
             value={content}
             onChange={(value) => handleChange(value, handleContent)}
           />
-          <div className="new-snippet-code-bottom-bar">
+          <div className={newSnippet.e('code-bottom-bar')}>
             {renderValidationError()}
             <input type="submit" value="POST SNIPPET" />
           </div>
         </div>
       </div>
-      <div className="new-snippet-lang-wrapper">
+      <div className={newSnippet.e('lang-wrapper')}>
         <ListBoxWithSearch
-          className="new-snippet-lang"
+          className={newSnippet.e('lang')}
           items={memoizedSyntaxes}
           onClick={(syntax) => handleChange(syntax, handleSyntax)}
         />

src/components/RecentSnippetItem.jsx

@@ -1,11 +1,14 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
+import bemi from 'bemi'
 
 import { downloadSnippet } from '../misc/download'
 import { getCurrentModeCaption } from '../misc/modes'
 import { getSnippetTitle, formatDate } from '../misc/snippet'
 import { getRawUrl } from '../misc/url'
 
+const rsi = bemi('recent-snippet')
+
 const RecentSnippetItem = ({ snippet }) => {
   const syntax = getCurrentModeCaption(snippet.get('syntax'))
   const title = getSnippetTitle(snippet)
@@ -14,22 +17,22 @@ const RecentSnippetItem = ({ snippet }) => {
   const download = () => downloadSnippet(snippet)
 
   return (
-    <li className="recent-snippet-item">
-      <div className="recent-snippet-meta">
+    <li className={rsi.e('item')}>
+      <div className={rsi.e('meta')}>
         <div>
-          <Link to={`${snippet.get('id')}`} className="recent-snippet-meta-title">{title}</Link>
-          <div className="recent-snippet-meta-tags">
-            {snippet.get('tags').map(item => <span className="recent-snippet-meta-tag" key={item}>{item}</span>)}
+          <Link to={`${snippet.get('id')}`} className={rsi.e('meta-title')}>{title}</Link>
+          <div className={rsi.e('meta-tags')}>
+            {snippet.get('tags').map(item => <span className={rsi.e('meta-tag')} key={item}>{item}</span>)}
           </div>
         </div>
-        <span className="recent-snippet-meta-info">{formatDate(snippet.get('created_at'))}, by Guest</span>
+        <span className={rsi.e('meta-info')}>{formatDate(snippet.get('created_at'))}, by Guest</span>
       </div>
-      <div className="recent-snippet-actions">
-        <span className="recent-snippet-lang">{syntax}</span>
+      <div className={rsi.e('actions')}>
+        <span className={rsi.e('lang')}>{syntax}</span>
         <div>
-          <a href={rawUrl} className="recent-snippet-button light">Raw</a>
-          <button className="recent-snippet-button light" onClick={download}>Download</button>
-          <Link to={`${snippet.get('id')}`} className="recent-snippet-button">Show</Link>
+          <a href={rawUrl} className={rsi.e('button', 'light')}>Raw</a>
+          <button className={rsi.e('button', 'light')} onClick={download}>Download</button>
+          <Link to={`${snippet.get('id')}`} className={rsi.e('button')}>Show</Link>
         </div>
       </div>
     </li>

src/components/RecentSnippets.jsx

@@ -1,5 +1,6 @@
 import React, { Fragment, useEffect } from 'react'
 import { connect } from 'react-redux'
+import bemi from 'bemi'
 
 import RecentSnippetItem from './RecentSnippetItem'
 
@@ -11,6 +12,9 @@ const scrollTop = () => {
   window.scroll({ top: 0, behavior: 'smooth' })
 }
 
+const rsi = bemi('recent-snippet')
+const pag = bemi('pagination')
+
 const RecentSnippets = ({ dispatch, pagination, snippets, recent }) => {
   const older = pagination.get('next')
   const newer = pagination.get('prev')
@@ -46,24 +50,24 @@ const RecentSnippets = ({ dispatch, pagination, snippets, recent }) => {
   }
 
   const renderRecentSnippets = () => (
-    <ul className="recent-snippet" key="recent-snippet">
+    <ul className={rsi.b()}>
       {recent.map(id => <RecentSnippetItem key={id} snippet={snippets.get(id)} />)}
     </ul>
   )
 
   return (
     <Fragment>
       {renderRecentSnippets()}
-      <div className="pagination" key="pagination">
+      <div className={pag.b()}>
         <span
-          className={`pagination-item next ${newer ? '' : 'disabled'}`}
+          className={pag.e('item', { next: true, disabled: !newer })}
           onClick={newerSetOfSnippets}
           role="presentation"
         >
           &lsaquo; Newer
         </span>
         <span
-          className={`pagination-item prev ${older ? '' : 'disabled'}`}
+          className={pag.e('item', { prev: true, disabled: !older })}
           onClick={olderSetOfSnippets}
           role="presentation"
         >

src/components/Sidebar.jsx

@@ -1,22 +1,25 @@
 import React from 'react'
 import { NavLink } from 'react-router-dom'
+import bemi from 'bemi'
 
 import '../styles/Sidebar.styl'
 
+const sidebar = bemi('sidebar')
+
 const Sidebar = () => (
-  <nav className="sidebar" key="navigation">
-    <ul className="sidebar-list">
-      <li className="sidebar-item">
+  <nav className={sidebar.b()}>
+    <ul className={sidebar.e('list')}>
+      <li className={sidebar.e('item')}>
         <NavLink exact to="/" activeClassName="active" title="New Snippet">
           <i className="icon-new" />
         </NavLink>
       </li>
-      <li className="sidebar-item sidebar-item-border">
+      <li className={sidebar.e('item', 'border')}>
         <NavLink to="/recent" activeClassName="active" title="Recent Snippets">
           <i className="icon-recent" />
         </NavLink>
       </li>
-      <li className="sidebar-item">
+      <li className={sidebar.e('item')}>
         <NavLink to="/about" activeClassName="active" title="About">
           <i className="icon-about" />
         </NavLink>

src/components/Snippet.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react'
 import { connect } from 'react-redux'
 import AceEditor from 'react-ace'
+import bemi from 'bemi'
 
 import 'brace/theme/textmate'
 
@@ -18,6 +19,8 @@ import { existingSnippetOptions } from '../entries/aceEditorOptions'
 
 import '../styles/Snippet.styl'
 
+const block = bemi('snippet')
+
 const Snippet = props => {
   const { snippet, dispatch } = props
   const [ isShowEmbed, setIsShowEmbed ] = useState(false)
@@ -49,10 +52,10 @@ const Snippet = props => {
   const rawUrl = getRawUrl(snippet.get('id'))
 
   const renderEmbed = () => (
-    <div className={`snippet-embed ${isShowEmbed}`}>
-      <div className="snippet-embed-content">
-        <span className="snippet-embed-close" onClick={toggleEmbed} role="presentation" />
-        <p className="snippet-embed-text">
+    <div className={block.e('embed', { show: isShowEmbed, hide: !isShowEmbed })}>
+      <div className={block.e('embed-content')}>
+        <span className={block.e('embed-close')} onClick={toggleEmbed} role="presentation" />
+        <p className={block.e('embed-text')}>
           In order to embed this content into your website or blog,
           simply copy and paste code provided below:
         </p>
@@ -62,36 +65,36 @@ const Snippet = props => {
           type="text"
           defaultValue={`<script src='http://xsnippet.org/${snippet.get('id')}/embed/'></script>`}
         />
-        <button className="snippet-button embed" onClick={copyToClipboard}>Copy</button>
+        <button className={block.e('button', 'embed')} onClick={copyToClipboard}>Copy</button>
       </div>
     </div>
   )
 
   const renderTags = () => (
-    <div className="snippet-data-tags">
-      {snippet.get('tags').map(item => <span className="snippet-data-tag" key={item}>{item}</span>)}
+    <div className={block.e('data-tags')}>
+      {snippet.get('tags').map(item => <span className={block.e('data-tag')} key={item}>{item}</span>)}
     </div>
   )
 
-  const renderMetadata = () => (<span className="snippet-data-meta">{formatDate(snippet.get('created_at'))}, by Guest</span>)
+  const renderMetadata = () => (<span className={block.e('data-meta')}>{formatDate(snippet.get('created_at'))}, by Guest</span>)
 
   return (
-    <div className="snippet" key="Snippet">
-      <div className="snippet-header">
-        <div className="snippet-data">
-          <span className="snippet-data-title">{title}</span>
+    <div className={block.b()}>
+      <div className={block.e('header')}>
+        <div className={block.e('data')}>
+          <span className={block.e('data-title')}>{title}</span>
           {renderTags()}
           {renderMetadata()}
         </div>
-        <div className="snippet-data-actions">
-          <span className="snippet-data-lang">{syntax}</span>
+        <div className={block.e('data-actions')}>
+          <span className={block.e('data-lang')}>{syntax}</span>
           <div>
-            <a href={rawUrl} className="snippet-button">Raw</a>
-            <button className="snippet-button snippet-button-download" onClick={download}>
+            <a href={rawUrl} className={block.e('button')}>Raw</a>
+            <button className={block.e('button', 'download')} onClick={download}>
               Download
             </button>
             <button
-              className={`toggle-embed snippet-button ${isShowEmbed}`}
+              className={`${block.e('button', { show: isShowEmbed, hide: !isShowEmbed })} toggle-embed`}
               key="snippet-details"
               onClick={toggleEmbed}
               onKeyPress={toggleEmbed}
@@ -102,7 +105,7 @@ const Snippet = props => {
         </div>
       </div>
       {renderEmbed()}
-      <div className="snippet-code">
+      <div className={block.e('code')}>
         <AceEditor
           mode={snippet.get('syntax')}
           width="100%"

src/styles/Header.styl

@@ -13,13 +13,15 @@
   height: offset
   z-index: 5
   box-shadow: 0 2px 2px 0 border-dark
-  &-inner
+
+  &__inner
     display: flex
     flex-flow: row nowrap
     justify-content: space-between
     align-items: center
     width: "calc(100% - %s)" % offset
-  &-logo
+
+  &__logo
     width: offset
     height: offset
     background-color: header-logo-bg
@@ -30,7 +32,8 @@
       align-items: center
     & img
       width: 78%
-  &-slogan
+
+  &__slogan
     color:text-dark
     font-family: font-raleway
     font-size: 23px
@@ -39,7 +42,8 @@
     letter-spacing: .6px
     &-x
       color: text-green
-  &-sign-in
+
+  &__sign-in
     display: none
     pointer-events: none
     margin-right: 20px