task(core): apply scss modules: admin & login [#94]

components/admin/AdminSidebar.js

@@ -17,7 +17,7 @@ const IGNORE_ROUTES = ['login', 'preview'].map(page => ROUTES_NAMES.admin[page])
 const AdminSidebar = () => {
   const router = useRouter();
   return (
-    <div className={b()}>
+    <div>
       <ul className={b('nav-list')}>
         {ADMIN_ROUTES.filter(({ name }) => !IGNORE_ROUTES.includes(name)).map(({ name, page }) => (
           <li key={name}>

components/auth/FormField.js

@@ -1,21 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ErrorMessage } from 'formik';
+import block from 'bem-css-modules';
 
 import Icon from 'components/common/ui/Icon';
 import Text from 'components/common/Text';
+import styles from './login-form.module.scss';
+
+const b = block(styles);
 
 const FormField = ({ id, label, icon, children, pending, touched, error }) => {
   const hasError = !pending && touched && error;
   return (
-    <div className="login-form__input-wrap">
-      <label className="login-form__input-label" htmlFor={id}>
+    <div className={b('input-wrap')}>
+      <label className={b('input-label')} htmlFor={id}>
         <Icon name={icon} /> {label || <Text id={`auth.${id}`} />}
       </label>
       {children(hasError)}
       <ErrorMessage name={id}>
         {message => (
-          <p className="login-form__input-error-message">
+          <p className={b('input-error-message')}>
             <Text id={message} />
           </p>
         )}

components/auth/LoginForm.js

@@ -1,18 +1,19 @@
-import './login-form.scss';
-
 import React from 'react';
-import cn from 'classnames';
 import { Form, Field } from 'formik';
+import block from 'bem-css-modules';
 
 import { validEmail, required, checkLength, hasErrors } from 'utils/validators';
 import FormWrapper from 'components/common/form/FormWrapper';
 import Button from 'components/common/Button';
 import Text from 'components/common/Text';
 
 import { authActions } from 'redux/ducks/auth';
+import styles from './login-form.module.scss';
 
 import FormField from './FormField';
 
+const b = block(styles);
+
 const LOGIN_INITIAL_FORM = {
   isSignUp: false,
   firstName: '',
@@ -77,8 +78,8 @@ const loginValidator = values =>
   }, {});
 
 const LoginForm = () => (
-  <div className="login-form">
-    <div className="login-form__title">
+  <div className={b()}>
+    <div className={b('title')}>
       <Text id="auth.signIn" />
     </div>
     <FormWrapper
@@ -112,17 +113,17 @@ const LoginForm = () => (
                 {hasError => (
                   <Field
                     id={id}
-                    className={cn('login-form__input', { 'login-form__input-error': hasError })}
+                    className={b('input', { error: !!hasError })}
                     name={id}
                     type={type}
                   />
                 )}
               </FormField>
             ))}
-          <div className="login-form__btn-container">
-            <div className="login-form__btn-wrap">
+          <div className={b('btn-container')}>
+            <div className={b('btn-wrap')}>
               <Button
-                className="login-form__btn"
+                className={b('btn')}
                 type="submit"
                 disabled={hasErrors(errors, touched)}
                 pending={isSubmitting}

components/auth/login-form.module.scss

@@ -33,7 +33,7 @@
       color: $primary;
     }
 
-    &-error {
+    &--error {
       border-color: $error;
     }
 

components/common/Table.js

@@ -1,12 +1,11 @@
-import './ui/table.scss';
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import identity from 'lodash/identity';
 import get from 'lodash/get';
 import cn from 'classnames';
 
 import { toTitleCase } from 'utils/formatters';
+import styles from './ui/table.module.scss';
 
 const renderValue = ({ value }) => value;
 
@@ -44,7 +43,7 @@ const Table = ({ className, cols, rows, getRowClass }) => (
 );
 
 Table.propTypes = {
-  className: PropTypes.string,
+  className: PropTypes.string.isRequired,
   rows: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.string.isRequired,
@@ -63,8 +62,9 @@ Table.propTypes = {
 };
 
 Table.defaultProps = {
-  className: 'wir-table',
   getRowClass: () => '',
 };
 
+export { styles };
+
 export default Table;

components/common/Text.js

@@ -18,7 +18,7 @@ const extract = key => {
 };
 
 export const localize = (id, lang) =>
-  extract(`${id}.${lang}`) || extract(`${id}.${DEFAULT_LOCALE}`);
+  extract(`${id}.${lang}`) || extract(`${id}.${DEFAULT_LOCALE}`) || id;
 
 export const useLocaleContext = () => useContext(LocaleContext);
 

components/common/layout/layout.scss

@@ -159,3 +159,7 @@ footer {
     padding-right: calc((100% - #{map-get($page-content, mobile)}) * 2 / 3);
   }
 }
+
+.nowrap {
+  white-space: nowrap;
+}

components/common/ui/table.module.scss

@@ -1,10 +1,6 @@
 // FIXME
 /* stylelint-disable selector-max-compound-selectors, no-descending-specificity */
 
-.nowrap {
-  white-space: nowrap;
-}
-
 .wir-table {
   border-spacing: 0;
 
@@ -79,11 +75,11 @@
     }
   }
 
-  &--font-large {
+  &__font--size--large {
     font-size: 1.2rem;
   }
 
-  &--font-small {
+  &__font--size--small {
     font-size: 0.7rem;
   }
 }

pages/admin/articles.js

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import { connect } from 'react-redux';
+import block from 'bem-css-modules';
 
 import Link from 'components/common/Link';
-import Table from 'components/common/Table';
+import Table, { styles } from 'components/common/Table';
 import Clickable from 'components/common/Clickable';
 import ExternalLink from 'components/common/ExternalLink';
 import withAdmin from 'components/hoc/withAdmin';
@@ -18,14 +19,16 @@ import { getArticleBaseUrl } from 'utils/fibery';
 import { ROUTES_NAMES } from 'routes';
 import { DATETIME_FORMAT } from 'constants';
 
+const b = block(styles);
+
 const mapStateToProps = (state, { lang }) => ({
   articles: adminArticlesSelectors.getAll(state, lang),
 });
 
 const ARTICLE_COLS = [
   {
     id: 'title',
-    className: 'wir-table--font-large',
+    className: b('font', { size: 'large' }),
     render: ({ value, row: { slug } }) => (
       <Link route={ROUTES_NAMES.article} params={{ slug }}>
         {value}
@@ -35,7 +38,7 @@ const ARTICLE_COLS = [
   },
   {
     id: 'actions',
-    className: 'wir-table__column-actions',
+    className: b('column-actions'),
     render: ({ row: { fiberyPublicId }, index }) => {
       const url = getArticleBaseUrl(fiberyPublicId);
       return (
@@ -61,13 +64,13 @@ const ARTICLE_COLS = [
   },
   {
     id: 'subtitle',
-    className: 'wir-table--font-small',
+    className: b('font', { size: 'small' }),
     formatter: text => `${text.slice(0, 100)}...`,
   },
   {
     id: 'tagsByTopic',
     title: 'Tags',
-    className: 'wir-table--font-small',
+    className: b('font', { size: 'small' }),
     formatter: tagsByTopic => {
       const tags = Object.values(tagsByTopic).reduce((acc, cur) => acc.concat(cur), []);
       return renderNodeList(
@@ -106,7 +109,6 @@ const AdminArticlesPage = ({ articles }) => {
         />{' '}
         {previewUrl && (
           <Link
-            className="button"
             route={ROUTES_NAMES.admin.preview}
             params={{ url: encodeURIComponent(previewUrl) }}
             target="_blank"
@@ -116,7 +118,7 @@ const AdminArticlesPage = ({ articles }) => {
         )}
       </div>
       <br />
-      <Table rows={articles} cols={ARTICLE_COLS} />
+      <Table className={b()} rows={articles} cols={ARTICLE_COLS} />
     </div>
   );
 };

pages/admin/login.js

@@ -1,16 +1,19 @@
-import 'styles/pages/login.scss';
+import styles from 'styles/pages/login.module.scss';
 
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ROUTES_NAMES } from 'routes';
 import { connect } from 'react-redux';
+import block from 'bem-css-modules';
 
 import Redirect from 'components/common/Redirect';
 import LoginForm from 'components/auth/LoginForm';
 
 import { authSelectors } from 'redux/ducks/auth';
 import { UserShape } from 'utils/customPropTypes';
 
+const b = block(styles);
+
 const mapStateToProps = state => ({
   user: authSelectors.getUser(state),
 });
@@ -21,8 +24,8 @@ const LoginPage = ({ user, routerQuery: { next = ROUTES_NAMES.admin.articles } }
   }
 
   return (
-    <div className="login-page-container">
-      <div className="login-page-wrap">
+    <div className={b('container')}>
+      <div className={b('wrap')}>
         <LoginForm />
       </div>
     </div>