task(core): apply scss modules: diary, tag, topic & error pages [#94]

components/admin/AdminLayout.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import block from 'bem-css-modules';
+import bem from 'bem-css-modules';
 import styles from './admin.module.scss';
 
 import AdminSidebar from './AdminSidebar';
 
-const b = block(styles);
+const b = bem(styles);
 
 const AdminLayout = ({ children }) => (
  <div className={b()}>

components/admin/AdminSidebar.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useRouter } from 'next/router';
-import block from 'bem-css-modules';
+import bem from 'bem-css-modules';
 
 import Link from 'components/common/Link';
 import Text from 'components/common/Text';
@@ -11,7 +11,7 @@ import { authActions } from 'redux/ducks/auth';
 import { ADMIN_ROUTES, ROUTES_NAMES } from 'routes';
 import styles from './admin-sidebar.module.scss';
 
-const b = block(styles);
+const b = bem(styles);
 const IGNORE_ROUTES = ['login', 'preview'].map(page => ROUTES_NAMES.admin[page]);
 
 const AdminSidebar = () => {

components/articles/Article.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { useRouter } from 'next/router';
 import flatten from 'lodash/flatten';
 import cn from 'classnames';
-import block from 'bem-css-modules';
+import bem from 'bem-css-modules';
 
 import {
  MetaTitle,
@@ -27,7 +27,7 @@ import host from 'utils/host';
 
 import CollectionNote from './CollectionNote';
 
-const b = block(styles);
+const b = bem(styles);
 const COVER_SIZES = [1200, 1000, 770, 640, 360];
 
 const Article = ({

components/articles/CollectionNote.js

@@ -2,7 +2,7 @@ import styles from 'styles/pages/article.module.scss';
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import block from 'bem-css-modules';
+import bem from 'bem-css-modules';
 
 import { localize } from 'components/common/Text';
 import Link from 'components/common/Link';
@@ -12,7 +12,7 @@ import { CollectionShape, LangType } from 'utils/customPropTypes';
 
 import { ROUTES_NAMES } from 'routes';
 
-const b = block(styles);
+const b = bem(styles);
 
 const CollectionNoteItem = ({ className, hideLink, text, slug }) => (
  <div className={className}>

components/articles/blocks/BannerBlock.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import block from 'bem-css-modules';
+import bem from 'bem-css-modules';
 import cn from 'classnames';
 
 import Picture from 'components/common/Picture';
@@ -10,7 +10,7 @@ import styles from './banner.module.scss';
 
 import BlockWrapper from './BlockWrapper';
 
-const b = block(styles);
+const b = bem(styles);
 const LINK = 'https://map.wir.by?utm_source=wirby-main-page';
 
 const getLink = (width, name) =>

components/articles/blocks/BlockWrapper.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
-import block from 'bem-css-modules';
+import bem from 'bem-css-modules';
 import styles from './blockWrapper.module.scss';
 
-const b = block(styles);
+const b = bem(styles);
 
 const BlockWrapper = ({ className, withBackground, negativeTop, children }) => (
  <div

components/articles/blocks/DiaryBlock.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import block from 'bem-css-modules';
+import bem from 'bem-css-modules';
 
 import Link from 'components/common/Link';
 import Text from 'components/common/Text';
@@ -21,7 +21,7 @@ import styles from './diary.module.scss';
 
 import BlockWrapper from './BlockWrapper';
 
-const b = block(styles);
+const b = bem(styles);
 
 const mapStateToProps = (state, { lang }) => ({
  diary: diarySelectors.getCurrent(state, lang),

components/auth/FormField.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ErrorMessage } from 'formik';
-import block from 'bem-css-modules';
+import bem 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 b = bem(styles);
 
 const FormField = ({ id, label, icon, children, pending, touched, error }) => {
  const hasError = !pending && touched && error;

components/auth/LoginForm.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Form, Field } from 'formik';
-import block from 'bem-css-modules';
+import bem from 'bem-css-modules';
 
 import { validEmail, required, checkLength, hasErrors } from 'utils/validators';
 import FormWrapper from 'components/common/form/FormWrapper';
@@ -12,7 +12,7 @@ import styles from './login-form.module.scss';
 
 import FormField from './FormField';
 
-const b = block(styles);
+const b = bem(styles);
 
 const LOGIN_INITIAL_FORM = {
  isSignUp: false,

components/common/Button.js

@@ -1,22 +1,18 @@
-import './ui/button.scss';
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
+import bem from 'bem-css-modules';
 
 import Icon from 'components/common/ui/Icon';
 
 import { IconPackShape } from 'utils/customPropTypes';
+import styles from './ui/button.module.scss';
+
+const b = bem(styles);
 
-const Button = ({ className, children, pending, icon: { pack, name }, ...props }) => (
- <button
- type="button"
- className={cn('wir-kit-button', className, {
- 'wir-kit-button__loading': pending,
- })}
- {...props}
- >
- {name && <Icon className="wir-kit-button__icon" pack={pack} name={name} />}
+const Button = ({ className, children, pending: _, icon: { pack, name }, ...props }) => (
+ <button type="button" className={cn(b(), className)} {...props}>
+ {name && <Icon className={b('icon')} pack={pack} name={name} />}
  {children}
  </button>
 );

components/common/ButtonGroup.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
-import block from 'bem-css-modules';
+import bem from 'bem-css-modules';
 import styles from './ui/button-group.module.scss';
 
-const b = block(styles);
+const b = bem(styles);
 
 const ButtonGroup = ({ children, icon, className }) => (
  <div className={cn(b(), icon && b('icon'), className)}>{children}</div>

components/common/Picture.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
-import block from 'bem-css-modules';
+import bem from 'bem-css-modules';
 import styles from './ui/picture.module.scss';
 
-const b = block(styles);
+const b = bem(styles);
 
 // checkout `styles/responsiveness.scss`
 const BREAKPOINTS = {

components/common/layout/Footer.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import cn from 'classnames';
-import block from 'bem-css-modules';
+import bem from 'bem-css-modules';
 
 import Text, { useLocalization } from 'components/common/Text';
 import Link from 'components/common/Link';
@@ -18,8 +18,8 @@ import layout from './footer/layout.module.scss';
 
 import SubscribeForm from './footer/SubscribeForm';
 
-const f = block(footer);
-const l = block(layout);
+const f = bem(footer);
+const l = bem(layout);
 
 const Footer = () => (
  <footer className={cn(f(), l())}>

components/common/layout/Sidebar.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { useRouter } from 'next/router';
 import Cookies from 'js-cookie';
-import block from 'bem-css-modules';
+import bem from 'bem-css-modules';
 import cn from 'classnames';
 
 import Icon from 'components/common/ui/Icon';
@@ -29,7 +29,7 @@ const getLocaleSwitchUrl = (path, lang) => {
  parts[1] = lang;
  return parts.join('/');
 };
-const b = block(styles);
+const b = bem(styles);
 
 const SidebarSection = ({ title, data, idKey, renderItem, footer }) => (
  <section className={b('section')}>

components/common/layout/error/ErrorMessage.js

@@ -1,6 +1,5 @@
-import './error.scss';
-
 import React from 'react';
+import bem from 'bem-css-modules';
 
 import Link from 'components/common/Link';
 import Text from 'components/common/Text';
@@ -9,28 +8,31 @@ import ExternalLink from 'components/common/ExternalLink';
 
 import { ROUTES_NAMES } from 'routes';
 import { NETWORKS } from 'constants/social';
+import styles from './error.module.scss';
+
+const b = bem(styles);
 
 const ErrorMessage = ({ code }) => (
- <div className="error-message">
- <div className="error-message__title">
- <span className="error-message__code">{code}</span> <Text id={`errors.${code}-title`} />
+ <div className={b()}>
+ <div className={b('title')}>
+ <span className={b('code')}>{code}</span> <Text id={`errors.${code}-title`} />
  </div>
- <div className="error-message__subtitle">
+ <div className={b('subtitle')}>
  <Text id={`errors.${code}-subtitle`} />
  </div>
- <div className="error-message__go-to-main">
+ <div className={b('go-to-main')}>
  <Link route={ROUTES_NAMES.main}>
  <Text id="errors.go-to-main" />
  </Link>
  </div>
- <div className="error-message__social-buttons">
+ <div className={b('social-buttons')}>
  {NETWORKS.map(({ id, link, color }) => (
- <ExternalLink key={id} href={link} className="error-message__social-button">
+ <ExternalLink key={id} href={link} className={b('social-button')}>
  <Icon pack="b" name={id} style={{ color }} />
  </ExternalLink>
  ))}
  </div>
- <div className="error-message__contact-us">
+ <div className={b('contact-us')}>
  <Text id="errors.contact-us" />
  {': '}
  <ExternalLink href="mailto:dev@wir.by">dev@wir.by</ExternalLink>

components/common/layout/footer/SubscribeForm.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import block from 'bem-css-modules';
+import bem from 'bem-css-modules';
 import { Form } from 'formik';
 
 import Clickable from 'components/common/Clickable';
@@ -13,7 +13,7 @@ import { validEmail } from 'utils/validators';
 import createConstants from 'lib/utils/createConstants';
 import styles from './index.module.scss';
 
-const b = block(styles);
+const b = bem(styles);
 const STATUS = createConstants('subscribed', 'unsubscribed');
 
 const SubscribeForm = () => {

components/common/ui/Input.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import block from 'bem-css-modules';
+import bem from 'bem-css-modules';
 
 import Clickable from 'components/common/Clickable';
 import Icon from 'components/common/ui/Icon';
 import styles from './input.module.scss';
 
-const b = block(styles);
+const b = bem(styles);
 
 const Input = ({
  pending,

components/common/ui/button.module.scss

@@ -21,8 +21,4 @@
  &__icon {
  padding-right: 5px;
  }
-
- &__loading {
- //TODO
- }
 }

components/social/ShareButtons.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import qs from 'qs';
-import block from 'bem-css-modules';
+import bem from 'bem-css-modules';
 
 import Text, { localize, useLocaleContext } from 'components/common/Text';
 import Icon from 'components/common/ui/Icon';
@@ -12,7 +12,7 @@ import { SHARE_NETWORKS } from 'constants/social';
 import { DOMAIN_SECURE } from 'constants';
 import styles from './social-buttons.module.scss';
 
-const b = block(styles);
+const b = bem(styles);
 const POPUP_WINDOW_PARAMS = 'width=600,height=400';
 
 const ShareButtons = ({ urlPath, basicText, extendedText }) => {

components/social/Teammate.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import block from 'bem-css-modules';
+import bem from 'bem-css-modules';
 import styles from './teammate.module.scss';
 
-const b = block(styles);
+const b = bem(styles);
 
 const Teammate = ({ image, name, role }) => (
  <div className={b()}>

components/specials/diary/DiaryLinkArrows.js

@@ -1,12 +1,12 @@
-import './diaryArrows.module.scss';
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import cn from 'classnames';
 
 import Link from 'components/common/Link';
 import { diarySelectors } from 'redux/ducks/diary';
 import { ROUTES_NAMES } from 'routes';
+import styles from './diaryArrows.module.scss';
 
 import ArrowIcon from './ArrowIcon';
 
@@ -17,7 +17,7 @@ const mapStateToProps = state => ({
 });
 
 const DiaryLinkArrows = ({ className, prev, next, size, isNextAvailable }) => (
- <div className={`diary-arrows ${className}`}>
+ <div className={cn(styles.arrows, className)}>
  <Link route={ROUTES_NAMES.diary} params={{ slug: prev.slug }} titleId="diary.previous">
  <ArrowIcon direction="left" size={size} />
  </Link>

package.json

@@ -157,7 +157,7 @@
  },
  {
  "path": ".next/static/**/*.css",
- "maxSize": "16 kB"
+ "maxSize": "24 kB"
  }
  ]
 }