Skip to content

Commit 64e2e99

Browse files
lotrienlotrien
authored
Merge pull request #141 from xsnippet/remove-dep
[Styles] Remove unstable dependency
2 parents bbade9a + bf534c6 commit 64e2e99

File tree

17 files changed

+22157
-179
lines changed

17 files changed

+22157
-179
lines changed

‎package-lock.json‎

Lines changed: 22025 additions & 23 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@
2929
}
3030
},
3131
"dependencies": {
32-
"bemi": "0.0.4",
3332
"brace": "^0.11.0",
3433
"immutable": "^3.8.2",
3534
"joi": "^13.2.0",

‎src/components/About.jsx‎

Lines changed: 29 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, { Fragment } from 'react'
2-
import bemi from 'bemi'
32

43
import Title from './common/Title'
54

@@ -10,80 +9,78 @@ import KaterynaImage from '../assets/photos/kateryna.jpg'
109

1110
import '../styles/AboutUs.styl'
1211

13-
const about = bemi('about')
14-
1512
const About = () => (
1613
<Fragment>
17-
<div className={about.b()}>
14+
<div className="about">
1815
<Title title="About" />
19-
<p className={about.e('paragraph', 'padded')}>
16+
<p className="about-paragraph padded">
2017
XSnippet is an open source web-service for sharing code snippets on
2118
the Internet. Years ago it was started as educational project, and
2219
nothing has changed since then. The service has been rewritten several
2320
times from scratch and now it consists of:
2421
</p>
25-
<ul className={about.e('repo-list')}>
26-
<li className={about.e('repo-item')}>
27-
<span className={about.e('repo')}>xsnippet-api</span>
28-
<p className={about.e('paragraph')}>
22+
<ul className="about-repo-list">
23+
<li className="about-repo-item">
24+
<span className="about-repo">xsnippet-api</span>
25+
<p className="about-paragraph">
2926
It implements a RESTful API to manage snippets and flies on top of
3027
asyncio/aiohttp and MongoDB;
3128
</p>
3229
</li>
33-
<li className={about.e('repo-item')}>
34-
<span className={about.e('repo')}>xsnippet-web</span>
35-
<p className={about.e('paragraph')}>
30+
<li className="about-repo-item">
31+
<span className="about-repo">xsnippet-web</span>
32+
<p className="about-paragraph">
3633
It provides a web-based user interface (SPA) and flies on top of
3734
React/Redux stack;
3835
</p>
3936
</li>
40-
<li className={about.e('repo-item')}>
41-
<span className={about.e('repo')}>xsnippet-web-backend</span>
42-
<p className={about.e('paragraph')}>
37+
<li className="about-repo-item">
38+
<span className="about-repo">xsnippet-web-backend</span>
39+
<p className="about-paragraph">
4340
It is a tiny app which implements what doesn’t fall under API
4441
description yet required by xsnippet-web.
4542
</p>
4643
</li>
4744
</ul>
48-
<p className={about.e('paragraph')}>
45+
<p className="about-paragraph">
4946
These components, and other goodies, can be found in our GitHub:
5047
</p>
51-
<a className={about.e('github')} href="http://github.com/xsnippet/">
48+
<a className="about-github" href="http://github.com/xsnippet/">
5249
http://github.com/xsnippet/
5350
</a>
5451
</div>
55-
<div className={about.b()}>
52+
<div className="about">
5653
<Title title="Our Team" />
57-
<p className={about.e('paragraph', 'padded')}>
54+
<p className="about-paragraph padded">
5855
Modern XSnippet incarnation has been designed and developed by these fine people:
5956
</p>
60-
<ul className={about.e('team-list')}>
61-
<li className={about.e('team-item')}>
57+
<ul className="about-team-list">
58+
<li className="about-team-item">
6259
<img src={IhorImage} alt="Ihor Kalnytskyi" />
6360
<div>
64-
<span className={about.e('team-member')}>Ihor Kalnytskyi</span>
65-
<p className={about.e('paragraph', 'small')}>Back-end developer</p>
61+
<span className="about-team-member">Ihor Kalnytskyi</span>
62+
<p className="about-paragraph small">Back-end developer</p>
6663
</div>
6764
</li>
68-
<li className={about.e('team-item')}>
65+
<li className="about-team-item">
6966
<img src={RomanImage} alt="Roman Podoliaka" />
7067
<div>
71-
<span className={about.e('team-member')}>Roman Podoliaka</span>
72-
<p className={about.e('paragraph', 'small')}>Back-end developer</p>
68+
<span className="about-team-member">Roman Podoliaka</span>
69+
<p className="about-paragraph small">Back-end developer</p>
7370
</div>
7471
</li>
75-
<li className={about.e('team-item')}>
72+
<li className="about-team-item">
7673
<img src={OlhaImage} alt="Olha Kurkaiedova" />
7774
<div>
78-
<span className={about.e('team-member')}>Olha Kurkaiedova</span>
79-
<p className={about.e('paragraph', 'small')}>Front-end developer</p>
75+
<span className="about-team-member">Olha Kurkaiedova</span>
76+
<p className="about-paragraph small">Front-end developer</p>
8077
</div>
8178
</li>
82-
<li className={about.e('team-item')}>
79+
<li className="about-team-item">
8380
<img src={KaterynaImage} alt="Kateryna Zharikova" />
8481
<div>
85-
<span className={about.e('team-member')}>Kateryna Zharikova</span>
86-
<p className={about.e('paragraph', 'small')}>UI Designer</p>
82+
<span className="about-team-member">Kateryna Zharikova</span>
83+
<p className="about-paragraph small">UI Designer</p>
8784
</div>
8885
</li>
8986
</ul>

‎src/components/Header.jsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,22 @@
11
import React from 'react'
22
import { NavLink } from 'react-router-dom'
33

4-
import bemi from 'bemi'
5-
64
import Logo from '../assets/icons/xsnippet.svg'
75

86
import '../styles/Header.styl'
97

10-
const header = bemi('header')
11-
128
const Header = () => (
13-
<header className={header.b()}>
14-
<div className={header.e('logo')}>
9+
<header className="header">
10+
<div className="header-logo">
1511
<NavLink exact to="/">
1612
<img src={Logo} alt="XSnippet" />
1713
</NavLink>
1814
</div>
19-
<div className={header.e('inner')}>
20-
<div className={header.e('slogan')}>
21-
<span className={header.e('slogan-x')}>X</span>SNIPPET
15+
<div className="header-inner">
16+
<div className="header-slogan">
17+
<span className="header-slogan-x">X</span>SNIPPET
2218
</div>
23-
<div className={header.e('sign-in')}>
19+
<div className="header-sign-in">
2420
<NavLink to="/sign-in">
2521
<span>Sign in</span>
2622
<i className="icon-user" />

‎src/components/NewSnippet.jsx‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React, { useEffect, useRef, useMemo } from 'react'
22
import { connect } from 'react-redux'
33
import AceEditor from 'react-ace'
44
import { WithContext as Tags } from 'react-tag-input'
5-
import bemi from 'bemi'
65

76
import 'brace/theme/textmate'
87

@@ -25,8 +24,6 @@ import '../styles/NewSnippet.styl'
2524

2625
const ListBoxWithSearch = withSearch(ListBox)
2726

28-
const newSnippet = bemi('new-snippet')
29-
3027
const NewSnippet = ({ fetchSyntaxes, postSnippet, history, syntaxes }) => {
3128
const snippetHeader = useRef()
3229
const {
@@ -55,7 +52,7 @@ const NewSnippet = ({ fetchSyntaxes, postSnippet, history, syntaxes }) => {
5552
const recalcLangHeaderHeight = () => {
5653
const height = snippetHeader.current.offsetHeight
5754

58-
document.getElementsByClassName(newSnippet.e('lang-header'))[0]
55+
document.getElementsByClassName('new-snippet-lang-header')[0]
5956
.setAttribute('style', `height:${height}px`)
6057
}
6158

@@ -87,13 +84,13 @@ const NewSnippet = ({ fetchSyntaxes, postSnippet, history, syntaxes }) => {
8784

8885
return (
8986
<form
90-
className={newSnippet.b()}
87+
className="new-snippet"
9188
key="New Snippet"
9289
onSubmit={handleSubmit}
9390
role="presentation"
9491
>
95-
<div className={newSnippet.e('code-wrapper')}>
96-
<div className={newSnippet.e('code-header')} ref={snippetHeader}>
92+
<div className="new-snippet-code-wrapper">
93+
<div className="new-snippet-code-header" ref={snippetHeader}>
9794
<input
9895
className="input"
9996
placeholder="Title"
@@ -111,7 +108,7 @@ const NewSnippet = ({ fetchSyntaxes, postSnippet, history, syntaxes }) => {
111108
delimiters={delimeterKeys}
112109
/>
113110
</div>
114-
<div className={newSnippet.e('code')}>
111+
<div className="new-snippet-code">
115112
<AceEditor
116113
mode={getCurrentModeName(syntax)}
117114
width="100%"
@@ -124,15 +121,15 @@ const NewSnippet = ({ fetchSyntaxes, postSnippet, history, syntaxes }) => {
124121
value={content}
125122
onChange={(value) => handleChange(value, handleContent)}
126123
/>
127-
<div className={newSnippet.e('code-bottom-bar')}>
124+
<div className="new-snippet-code-bottom-bar">
128125
{renderValidationError()}
129126
<input type="submit" value="POST SNIPPET" />
130127
</div>
131128
</div>
132129
</div>
133-
<div className={newSnippet.e('lang-wrapper')}>
130+
<div className="new-snippet-lang-wrapper">
134131
<ListBoxWithSearch
135-
className={newSnippet.e('lang')}
132+
className="new-snippet-lang"
136133
items={memoizedSyntaxes}
137134
onClick={(syntax) => handleChange(syntax, handleSyntax)}
138135
/>

‎src/components/RecentSnippetItem.jsx‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react'
22
import { Link } from 'react-router-dom'
3-
import bemi from 'bemi'
43

54
import SnippetTags from './common/SnippetTags'
65

@@ -9,8 +8,6 @@ import { getCurrentModeCaption } from '../misc/modes'
98
import { getSnippetTitle, formatDate } from '../misc/snippet'
109
import { getRawUrl } from '../misc/url'
1110

12-
const rsi = bemi('recent-snippet')
13-
1411
const RecentSnippetItem = ({ snippet }) => {
1512
const syntax = getCurrentModeCaption(snippet.get('syntax'))
1613
const title = getSnippetTitle(snippet)
@@ -19,20 +16,20 @@ const RecentSnippetItem = ({ snippet }) => {
1916
const download = () => downloadSnippet(snippet)
2017

2118
return (
22-
<li className={rsi.e('item')}>
23-
<div className={rsi.e('meta')}>
19+
<li className="recent-snippet-item">
20+
<div className="recent-snippet-meta">
2421
<div>
25-
<Link to={`${snippet.get('id')}`} className={rsi.e('meta-title')}>{title}</Link>
26-
<SnippetTags className={rsi} snippet={snippet} />
22+
<Link to={`${snippet.get('id')}`} className="recent-snippet-meta-title">{title}</Link>
23+
<SnippetTags className="recent-snippet-meta-tags" snippet={snippet} />
2724
</div>
28-
<span className={rsi.e('meta-info')}>{formatDate(snippet.get('created_at'))}, by Guest</span>
25+
<span className="recent-snippet-meta-info">{formatDate(snippet.get('created_at'))}, by Guest</span>
2926
</div>
30-
<div className={rsi.e('actions')}>
31-
<span className={rsi.e('lang')}>{syntax}</span>
27+
<div className="recent-snippet-actions">
28+
<span className="recent-snippet-lang">{syntax}</span>
3229
<div>
33-
<a href={rawUrl} className={rsi.e('button', 'light')}>Raw</a>
34-
<button className={rsi.e('button', 'light')} onClick={download}>Download</button>
35-
<Link to={`${snippet.get('id')}`} className={rsi.e('button')}>Show</Link>
30+
<a href={rawUrl} className="recent-snippet-button light">Raw</a>
31+
<button className="recent-snippet-button light" onClick={download}>Download</button>
32+
<Link to={`${snippet.get('id')}`} className="recent-snippet-button">Show</Link>
3633
</div>
3734
</div>
3835
</li>

‎src/components/RecentSnippets.jsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { Fragment, useEffect } from 'react'
22
import { connect } from 'react-redux'
3-
import bemi from 'bemi'
43

54
import RecentSnippetItem from './RecentSnippetItem'
65

@@ -12,9 +11,6 @@ const scrollTop = () => {
1211
window.scroll({ top: 0, behavior: 'smooth' })
1312
}
1413

15-
const rsi = bemi('recent-snippet')
16-
const pag = bemi('pagination')
17-
1814
const RecentSnippets = ({ fetchRecentSnippets, pagination, snippets, recent }) => {
1915
const older = pagination.get('next')
2016
const newer = pagination.get('prev')
@@ -50,24 +46,24 @@ const RecentSnippets = ({ fetchRecentSnippets, pagination, snippets, recent }) =
5046
}
5147

5248
const renderRecentSnippets = () => (
53-
<ul className={rsi.b()}>
49+
<ul className="recent-snippet">
5450
{recent.map(id => <RecentSnippetItem key={id} snippet={snippets.get(id)} />)}
5551
</ul>
5652
)
5753

5854
return (
5955
<Fragment>
6056
{renderRecentSnippets()}
61-
<div className={pag.b()}>
57+
<div className="pagination">
6258
<span
63-
className={pag.e('item', { next: true, disabled: !newer })}
59+
className={`pagination-item next ${newer ? '' : 'disabled'}`}
6460
onClick={newerSetOfSnippets}
6561
role="presentation"
6662
>
6763
&lsaquo; Newer
6864
</span>
6965
<span
70-
className={pag.e('item', { prev: true, disabled: !older })}
66+
className={`pagination-item prev ${older ? '' : 'disabled'}`}
7167
onClick={olderSetOfSnippets}
7268
role="presentation"
7369
>

‎src/components/Sidebar.jsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,22 @@
11
import React from 'react'
22
import { NavLink } from 'react-router-dom'
3-
import bemi from 'bemi'
43

54
import '../styles/Sidebar.styl'
65

7-
const sidebar = bemi('sidebar')
8-
96
const Sidebar = () => (
10-
<nav className={sidebar.b()}>
11-
<ul className={sidebar.e('list')}>
12-
<li className={sidebar.e('item')}>
7+
<nav className="sidebar">
8+
<ul className="sidebar-list">
9+
<li className="sidebar-item">
1310
<NavLink exact to="/" activeClassName="active" title="New Snippet">
1411
<i className="icon-new" />
1512
</NavLink>
1613
</li>
17-
<li className={sidebar.e('item', 'border')}>
14+
<li className="sidebar-item sidebar-item-border">
1815
<NavLink to="/recent" activeClassName="active" title="Recent Snippets">
1916
<i className="icon-recent" />
2017
</NavLink>
2118
</li>
22-
<li className={sidebar.e('item')}>
19+
<li className="sidebar-item">
2320
<NavLink to="/about" activeClassName="active" title="About">
2421
<i className="icon-about" />
2522
</NavLink>

0 commit comments

Comments
 (0)