Adding CSS Modules

1. Added initial infrastructure for CSS Modules. 2. Created logo React component 3. Fixing flow type errors
ifmeorg · Sep 11, 2017 · 8093fbd · 8093fbd
1 parent 8def2fd
commit 8093fbd
Show file tree

Hide file tree

Showing 12 changed files with 126 additions and 3 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "javascript.validate.enable": false
+}
diff --git a/client/.flowconfig b/client/.flowconfig
@@ -1,4 +1,8 @@
 [ignore]
+.*/__tests__/.*
+.*/node_modules/enzyme-matchers/.*
+.*/node_modules/jasmine-enzyme/.*
+.*/node_modules/radium/.*
 
 [include]
 
@@ -7,3 +11,4 @@
 [lints]
 
 [options]
+module.name_mapper='.*\(.s?css\)' -> 'empty/object'
diff --git a/client/.storybook/webpack.config.js b/client/.storybook/webpack.config.js
@@ -0,0 +1,12 @@
+const path = require('path');
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.scss$/,
+        loader: 'style-loader!css-loader?modules&camelCase&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass-loader',
+      },
+    ],
+  },
+};
diff --git a/client/PROVISIONARY_README.md b/client/PROVISIONARY_README.md
@@ -1,4 +1,4 @@
-# How to Run 
+# How to Run
 
 ## StoryBook
 `yarn run storybook`
@@ -12,3 +12,12 @@
 ## Flow
 `yarn flow`
 
+### NPM Packages
+Some NPM packages have flow type enabled but fail the flow checks (e.g. radium). You'll want to put the package path under the `[ignore]` section of `.flowconfig`, for example:
+
+```
+[ignore]
+.*/node_modules/radium/.*
+```
+
+If you're wondering why we don't just ignore the entire `node_modules` folder, it's because some NPM Packages _do_ have correct type definitions, and we don't want to ignore those.
diff --git a/client/app/bundles/momentDashboards/components/Chart.jsx b/client/app/bundles/momentDashboards/components/Chart.jsx
@@ -20,7 +20,7 @@ const colorSchemes = ['#6D0839', '#66118', '#7F503F', '#775577', '#CCAADD'];
  */
 // We keep the class otherwise our enzyme tests can't reference this component by name
 // eslint-disable-next-line react/prefer-stateless-function
-export default class Chart extends React.Component {
+export default class Chart extends React.Component<chartShape, {}> {
     props: chartShape;
 
     /**

diff --git a/client/app/bundles/momentDashboards/components/ChartControl.jsx b/client/app/bundles/momentDashboards/components/ChartControl.jsx
@@ -33,7 +33,7 @@ const ChartControlButton =
 /**
  * Control Panel for selecting different objects to graph.
  */
-export default class ChartControl extends React.Component {
+export default class ChartControl extends React.Component<chartControlProp, chartControlState> {
   props: chartControlProp;
   state: chartControlState;
 

diff --git a/client/app/bundles/shared/components/Logo.jsx b/client/app/bundles/shared/components/Logo.jsx
@@ -0,0 +1,23 @@
+// @flow
+import React from 'react';
+import css from './Logo.scss';
+
+type Props = {
+  onClick?: () => any;
+  size?: string; // Future Task: Use ScreenSize enum
+}
+
+export default class Logo extends React.Component<Props, {}> {
+  render() {
+    const { onClick, size = '' } = this.props;
+    const linkClass = onClick ? 'link' : '';
+    const containerClass = `${css.container} ${css[size] || ''} ${linkClass}`;
+
+    return (
+      <div className={containerClass} onClick={onClick}>
+        <span className={css.if}>if</span>
+        <span className={css.me}>me</span>
+      </div>
+    );
+  }
+}
diff --git a/client/app/bundles/shared/components/Logo.scss b/client/app/bundles/shared/components/Logo.scss
@@ -0,0 +1,43 @@
+@import "base.scss";
+
+.container {
+  display: inline-block;
+  width: 3em;
+  height: 3em;
+  box-sizing: border-box;
+
+  background-color: $container-color;
+
+  font-family: 'Lato', sans-serif;
+  font-size: $font30;
+  line-height: $font30;
+  font-weight: 300;
+  text-transform: lowercase;
+
+  margin: 0;
+  padding: 0.8em 0.4em 0;
+  outline: 0;
+
+  @media screen and (max-width: $small) {
+    font-size: $font20;
+    line-height: $font20;
+  }
+
+  &.small {
+    font-size: $font20;
+    line-height: $font20;
+  }
+
+  .if {
+    color: $header-text-color;
+  }
+
+  .me {
+    display: inline-block;
+    border-bottom: 0.05em solid $highlight-text-color;
+    border-top: 0.05em solid $highlight-text-color;
+    color: $highlight-text-color;
+    margin: 0 0 0 0.3em;
+    padding: 0 0 0.25em;
+  }
+}
diff --git a/client/app/bundles/shared/components/_base.scss b/client/app/bundles/shared/components/_base.scss
@@ -0,0 +1,8 @@
+@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/_values.scss";
+
+:global(.link) {
+  cursor: pointer;
+}
diff --git a/client/app/stories/index.jsx b/client/app/stories/index.jsx
@@ -6,6 +6,16 @@ import { storiesOf } from '@storybook/react';
 import Chart from '../bundles/momentDashboards/components/Chart';
 import ChartControl from '../bundles/momentDashboards/components/ChartControl';
 
+import Logo from '../bundles/shared/components/Logo';
+
+storiesOf('Logo', module)
+  .add('Small', () => (
+    <Logo size="small" />
+  ))
+  .add('Medium', () => (
+    <Logo />
+  ))
+
 const sampleChartData = { '2013-02-10 00:00:00 -0800': 11, '2013-02-11 00:00:00 -0800': 6 };
 
 storiesOf('Chart', module)

diff --git a/client/package.json b/client/package.json
@@ -47,6 +47,8 @@
     "babel-eslint": "^7.2.3",
     "babel-plugin-flow-react-proptypes": "^4.1.0",
     "babel-preset-flow": "^6.23.0",
+    "css-loader": "^0.28.7",
+    "empty": "^0.10.1",
     "enzyme": "^2.9.1",
     "eslint": "^3.19.0 || ^4.3.0",
     "eslint-config-airbnb": "^15.1.0",
@@ -64,9 +66,12 @@
     "karma-phantomjs-launcher": "^1.0.4",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^2.0.4",
+    "node-sass": "^4.5.3",
     "react-addons-test-utils": "^15.6.0",
     "react-test-render": "^1.0.3",
     "react-test-renderer": "^15.6.1",
+    "sass-loader": "^6.0.6",
+    "style-loader": "^0.18.2",
     "superagent-mock": "^3.5.0"
   }
 }
diff --git a/client/webpack.config.js b/client/webpack.config.js
@@ -63,6 +63,11 @@ const config = {
         use: 'babel-loader',
         exclude: /node_modules/,
       },
+      {
+        test: /\.scss$/,
+        loader: 'style-loader!css-loader?modules&camelCase&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass-loader',
+        include: resolve(__dirname, './app'),
+      },
     ],
   },
 };