Skip to content

Commit

Permalink
Refactoring Logo component; adding Ant Design (#872)
Browse files Browse the repository at this point in the history 
* Refactoring Logo component; adding Ant Design
* Fixing Logo test
* Fixing CodeClimate errors
  • Loading branch information
@baohouse
baohouse authored Mar 28, 2018
1 parent cdd2180 commit 7503e3d
Show file tree
Hide file tree
Showing 23 changed files with 1,631 additions and 565 deletions.
482 changes: 482 additions & 0 deletions app/assets/stylesheets/base/_font-face.scss
View file

Large diffs are not rendered by default.

474 changes: 0 additions & 474 deletions app/assets/stylesheets/base/_fonts.scss
View file

Large diffs are not rendered by default.

6 changes: 4 additions & 2 deletions app/views/layouts/application.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,13 @@
<link rel="shortcut icon" href="/assets/favicon.ico" type="image/x-icon">
<link rel="icon" href="/assets/favicon.ico" type="image/x-icon">

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<!-- Webpack Assets -->
<%= javascript_pack_tag 'webpack-bundle' %>
<%= stylesheet_pack_tag 'webpack-bundle' %>

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

<% if user_signed_in? %>
<!-- Pusher -->
<script src="https://js.pusher.com/3.0/pusher.min.js"></script>
Expand Down
11 changes: 10 additions & 1 deletion client/.babelrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,14 @@
"flow-react-proptypes"
]
}
}
},
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
}
1 change: 1 addition & 0 deletions client/.flowconfig
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
[ignore]
.*/__tests__/.*
.*/node_modules/draft-js/.*
.*/node_modules/enzyme-matchers/.*
.*/node_modules/jasmine-enzyme/.*
.*/node_modules/radium/.*
Expand Down
1 change: 1 addition & 0 deletions client/.storybook/config.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
import { configure } from '@storybook/react';
import { setDefaults } from '@storybook/addon-info';
import 'app/assets/stylesheets/base/_font-face.scss';

// addon-info
setDefaults({
Expand Down
69 changes: 67 additions & 2 deletions client/.storybook/webpack.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,19 @@
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const baseConfig = require('../webpack.config.base');

const extractCSS = new ExtractTextPlugin('[name]-[hash].css');
const cssLoader = {
loader: 'css-loader',
options: {
modules: true,
camelCase: true,
importLoaders: 1,
localIdentName: '[name]__[local]___[hash:base64:5]',
},
};

module.exports = Object.assign(baseConfig, {

resolve: {
Expand All @@ -13,11 +25,64 @@ module.exports = Object.assign(baseConfig, {
],
},

plugins: [
extractCSS,
],

module: {
rules: [
{
test: /\.scss$/,
loader: 'style-loader!css-loader?modules&camelCase&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass-loader',
test: require.resolve('react'),
use: {
loader: 'imports-loader',
options: {
shim: 'es5-shim/es5-shim',
sham: 'es5-shim/es5-sham',
},
},
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.css$/,
include: /node_modules\/antd/,
loader: extractCSS.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
modules: false,
camelCase: true,
importLoaders: 1,
localIdentName: '[name]__[local]___[hash:base64:5]',
},
},
],
}),
},
{
test: /\.css$/,
exclude: /node_modules/,
loader: extractCSS.extract({
fallback: 'style-loader',
use: [
cssLoader,
],
}),
},
{
test: /\.(sass|scss)$/,
loader: extractCSS.extract({
fallback: 'style-loader',
use: [
cssLoader,
'sass-loader',
],
}),
},
{
test: /\.ya?ml$/,
Expand Down
2 changes: 2 additions & 0 deletions client/app/bundles/momentDashboards/startup/registration.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
// @flow
import ReactOnRails from 'react-on-rails';

import 'app/assets/stylesheets/base/_font-face.scss';

import Chart from '../components/Chart';
import ChartControl from '../components/ChartControl';

Expand Down
0 ...dles/shared/components/Dropdown/index.jsx → ...ndles/shared/components/Dropdown/index.js
View file
File renamed without changes.
6 changes: 6 additions & 0 deletions client/app/bundles/shared/components/Logo/Logo.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
// @flow
import LogoFactory from './LogoFactory';

const Logo = LogoFactory();
Logo.displayName = 'Logo';
export default Logo;
12 changes: 3 additions & 9 deletions ...t/app/bundles/shared/components/Logo.scss → .../bundles/shared/components/Logo/Logo.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import "base.scss";
@import "../base.scss";

.container {
display: inline-block;
Expand All @@ -19,12 +19,6 @@
text-align: center;
outline: 0;

/* TODO: Need to switch to use container queries instead of media queries */
@media screen and (max-width: $small) {
font-size: $font20;
line-height: $font20;
}

&.small {
font-size: $font20;
line-height: $font20;
Expand All @@ -36,8 +30,8 @@

.me {
display: inline-block;
border-bottom: 0.11ex solid $highlight-text-color;
border-top: 0.11ex solid $highlight-text-color;
border-bottom: 0.15ex solid $highlight-text-color;
border-top: 0.15ex solid $highlight-text-color;
color: $highlight-text-color;
margin: 0 0 0 0.5ex;
padding: 0 0 0.55ex;
Expand Down
22 changes: 14 additions & 8 deletions ...nt/app/bundles/shared/components/Logo.jsx → ...es/shared/components/Logo/LogoFactory.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
// @flow
import React from 'react';
import React, { type StatelessFunctionalComponent } from 'react';
import css from './Logo.scss';

type Props = {
onClick?: () => any;
size?: string; // Future Task: Use ScreenSize enum
}
onClick?: (event: SyntheticEvent<>) => void;
};

export default class Logo extends React.Component<Props, {}> {
render() {
const { onClick, size = '' } = this.props;
function LogoFactory(size: string = ''): StatelessFunctionalComponent<Props> {
const LogoComponent = ({ onClick }: Props) => {
const linkClass = onClick ? 'link' : '';
const containerClass = `${css.container} ${css[size] || ''} ${linkClass}`;

Expand All @@ -19,5 +17,13 @@ export default class Logo extends React.Component<Props, {}> {
<span className={css.me}>me</span>
</div>
);
}
};

LogoComponent.defaultProps = {
onClick: undefined,
};

return LogoComponent;
}

export default LogoFactory;
6 changes: 6 additions & 0 deletions client/app/bundles/shared/components/Logo/LogoSmall.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
// @flow
import LogoFactory from './LogoFactory';

const LogoSmall = LogoFactory('small');
LogoSmall.displayName = 'LogoSmall';
export default LogoSmall;
6 changes: 3 additions & 3 deletions ...shared/components/__tests__/Logo.spec.jsx → ...d/components/Logo/__tests__/Logo.spec.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
// @flow
import { render } from 'enzyme';
import React from 'react';
import Logo from '../Logo';
import Logo, { LogoSmall } from '../index';

describe('Logo', () => {
it('renders the Logo (medium)', () => {
it('renders the Logo', () => {
let wrapper = null;

expect(() => {
Expand All @@ -18,7 +18,7 @@ describe('Logo', () => {
let wrapper = null;

expect(() => {
wrapper = render(<Logo size="small" />);
wrapper = render(<LogoSmall />);
}).not.toThrow();

expect(wrapper).not.toBeNull();
Expand Down
2 changes: 2 additions & 0 deletions client/app/bundles/shared/components/Logo/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export { default } from './Logo';
export { default as LogoSmall } from './LogoSmall';
10 changes: 5 additions & 5 deletions client/app/bundles/shared/components/_base.scss
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@import "../../../../../app/assets/stylesheets/base/_breakpoints.scss";
@import "../../../../../app/assets/stylesheets/base/_colors.scss";
@import "../../../../../app/assets/stylesheets/base/_mixins.scss";
@import "../../../../../app/assets/stylesheets/base/_fonts.scss";
@import "../../../../../app/assets/stylesheets/base/_values.scss";
@import "~app/assets/stylesheets/base/_breakpoints.scss";
@import "~app/assets/stylesheets/base/_colors.scss";
@import "~app/assets/stylesheets/base/_fonts.scss";
@import "~app/assets/stylesheets/base/_mixins.scss";
@import "~app/assets/stylesheets/base/_values.scss";

:global(.link) {
cursor: pointer;
Expand Down
6 changes: 4 additions & 2 deletions client/app/bundles/shared/startup/registration.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,17 @@
import ReactOnRails from 'react-on-rails';
import { loadLocales } from 'libs/i18n/I18nSetup';

import Logo from '../components/Logo';
import 'app/assets/stylesheets/base/_font-face.scss';

import Input from '../components/Input';
import Logo from '../components/Logo';
import Textarea from '../components/Textarea';

loadLocales();

// This is how react_on_rails can see the Components in the browser.
ReactOnRails.register({
Logo,
Input,
Logo,
Textarea,
});
19 changes: 13 additions & 6 deletions client/app/stories/Logo.stories.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,20 @@
import { Col, Row } from 'antd';
import React from 'react';
import { withInfo } from '@storybook/addon-info';
import { storiesOf } from '@storybook/react';

import Logo from 'bundles/shared/components/Logo';
import Logo, { LogoSmall } from 'bundles/shared/components/Logo';

const withSource = el => withInfo()(() => el);

storiesOf('Logo', module)
.add('Small', withInfo({})(() =>
<Logo size="small" />,
))
.add('Medium', withInfo({})(() =>
<Logo />,
.add('Regular and Small', withSource(
<Row>
<Col span={12}>
<Logo />
</Col>
<Col span={12}>
<LogoSmall />
</Col>
</Row>,
));
37 changes: 21 additions & 16 deletions client/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,29 +12,22 @@
"lint:eslint": "eslint 'app/**/*.js' 'app/**/*.jsx'",
"lint": "yarn lint:flow && yarn lint:eslint",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
"build-storybook": "build-storybook",
"start": "yarn storybook"
},
"cacheDirectories": [
"node_modules",
"client/node_modules"
],
"dependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-loader": "^6.3.2",
"babel-polyfill": "^6.23.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"babel-runtime": "^6.23.0",
"chart.js": "^2.6.0",
"chartjs": "^0.3.24",
"chartkick": "^2.2.4",
"es5-shim": "^4.5.9",
"expose-loader": "^0.7.3",
"file-loader": "^1.1.6",
"glob": "^7.1.2",
"imports-loader": "^0.7.1",
"intl": "^1.2.5",
"jquery": "^3.3.1",
"js-cookie": "^2.2.0",
"js-yaml": "^3.8.2",
"lodash": "^4.17.4",
Expand All @@ -46,20 +39,23 @@
"react-on-rails": "8.0.6",
"redux": "^3.7.2",
"shortid": "^2.2.8",
"superagent": "^3.5.2",
"url-loader": "^0.6.2",
"webpack": "^2.3.3",
"webpack-manifest-plugin": "^1.1.0",
"yml-loader": "^2.1.0"
"superagent": "^3.5.2"
},
"devDependencies": {
"@storybook/addon-actions": "^3.2.0",
"@storybook/addon-info": "^3.3.15",
"@storybook/react": "^3.2.3",
"antd": "^2.13.13",
"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-eslint": "^7.2.3",
"babel-loader": "^6.3.2",
"babel-plugin-flow-react-proptypes": "^4.1.0",
"babel-plugin-import": "^1.6.7",
"babel-preset-env": "^1.6.1",
"babel-preset-flow": "^6.23.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"compression-webpack-plugin": "^1.0.0",
"css-loader": "^0.28.7",
"empty": "^0.10.1",
Expand All @@ -71,9 +67,13 @@
"eslint-plugin-jasmine": "^2.8.4",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.7.0",
"expose-loader": "^0.7.3",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^1.1.6",
"flow-bin": "^0.54.1",
"flow-typed": "^2.3.0",
"glob": "^7.1.2",
"imports-loader": "^0.7.1",
"jasmine": "^2.7.0",
"jasmine-core": "^3.1.0",
"jasmine-enzyme": "^3.7.0",
Expand All @@ -90,6 +90,11 @@
"react-test-renderer": "^15.6.1",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"superagent-mock": "^3.5.0"
"superagent-mock": "^3.5.0",
"uglifyjs-webpack-plugin": "^1.2.4",
"url-loader": "^0.6.2",
"webpack": "^2.3.3",
"webpack-manifest-plugin": "^1.1.0",
"yml-loader": "^2.1.0"
}
}
Loading

0 comments on commit 7503e3d

Please sign in to comment.