Skip to content

Commit dd530bf

Browse files
author
Maja Wichrowska
committedOct 5, 2017
Get CSS interface working with react-dates
1 parent 9515fea commit dd530bf

File tree

13 files changed

+173
-78
lines changed

13 files changed

+173
-78
lines changed
 

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,3 +44,5 @@ _gh-pages
4444
# Only apps should have lockfiles
4545
yarn.lock
4646
package-lock.json
47+
48+
css/styles.css

‎.storybook-css/.eslintrc

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"rules": {
3+
"import/no-extraneous-dependencies": [2, {
4+
"devDependencies": true
5+
}],
6+
"global-require": 2,
7+
}
8+
}

‎.storybook-css/addons.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/* eslint-disable import/no-extraneous-dependencies, import/extensions */
2+
3+
import '@storybook/addon-actions/register';
4+
import '@storybook/addon-links/register';

‎.storybook-css/config.js

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import React from 'react';
2+
import moment from 'moment';
3+
import cssInterface from 'react-with-styles-interface-css';
4+
5+
import { configure, addDecorator, setAddon } from '@storybook/react';
6+
import infoAddon from '@storybook/addon-info';
7+
import { setOptions } from '@storybook/addon-options';
8+
9+
import registerInterfaceWithDefaultTheme from '../src/utils/registerInterfaceWithDefaultTheme';
10+
11+
import '../css/storybook.scss';
12+
import '../css/styles.css';
13+
14+
registerInterfaceWithDefaultTheme(cssInterface);
15+
16+
addDecorator((story) => {
17+
moment.locale('en');
18+
return (story());
19+
});
20+
21+
function getLink(href, text) {
22+
return `<a href=${href} rel="noopener noreferrer" target="_blank">${text}</a>`;
23+
}
24+
25+
const README = getLink('https://github.com/airbnb/react-dates/blob/master/README.md', 'README');
26+
const wrapperSource = getLink('https://github.com/airbnb/react-dates/tree/master/examples', 'wrapper source');
27+
28+
const helperText = `All examples are built using a wrapper component that is not exported by
29+
react-dates. Please see the ${README} for more information about minimal setup or explore
30+
the ${wrapperSource} to see how to integrate react-dates into your own app.`;
31+
32+
addDecorator(story => (
33+
<div>
34+
<div
35+
style={{
36+
background: '#fff',
37+
height: 6 * 8,
38+
width: '100%',
39+
position: 'fixed',
40+
top: 0,
41+
left: 0,
42+
padding: '8px 40px 8px 8px',
43+
overflow: 'scroll',
44+
}}
45+
>
46+
<span dangerouslySetInnerHTML={{ __html: helperText }} />
47+
</div>
48+
49+
<div style={{ marginTop: 7 * 8 }}>
50+
{story()}
51+
</div>
52+
</div>
53+
));
54+
55+
setOptions({
56+
name: 'REACT-DATES',
57+
url: 'https://github.com/airbnb/react-dates',
58+
});
59+
60+
function loadStories() {
61+
require('../stories/DateRangePicker');
62+
require('../stories/DateRangePicker_input');
63+
require('../stories/DateRangePicker_calendar');
64+
require('../stories/DateRangePicker_day');
65+
require('../stories/SingleDatePicker');
66+
require('../stories/SingleDatePicker_input');
67+
require('../stories/SingleDatePicker_calendar');
68+
require('../stories/SingleDatePicker_day');
69+
require('../stories/DayPickerRangeController');
70+
require('../stories/DayPickerSingleDateController');
71+
require('../stories/DayPicker');
72+
require('../stories/withStyles');
73+
}
74+
75+
setAddon(infoAddon);
76+
77+
configure(loadStories, module);

‎.storybook-css/webpack.config.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
const path = require('path');
2+
3+
module.exports = {
4+
module: {
5+
rules: [
6+
{
7+
test: /(\.scss$|\.css$)/,
8+
use: ['style-loader', 'raw-loader', 'sass-loader'],
9+
include: [
10+
path.resolve(__dirname, '../css/'),
11+
],
12+
},
13+
{
14+
test: /\.svg$/,
15+
use: [
16+
{
17+
loader: 'babel-loader',
18+
query: {
19+
presets: ['airbnb'],
20+
},
21+
},
22+
{
23+
loader: 'react-svg-loader',
24+
query: {
25+
jsx: true,
26+
},
27+
},
28+
],
29+
},
30+
],
31+
},
32+
resolve: {
33+
extensions: ['.js', '.jsx'],
34+
},
35+
};

‎.storybook/config.js

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
11
import React from 'react';
22
import moment from 'moment';
3-
import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
43
import aphroditeInterface from 'react-with-styles-interface-aphrodite';
54

65
import { configure, addDecorator, setAddon } from '@storybook/react';
76
import infoAddon from '@storybook/addon-info';
87
import { setOptions } from '@storybook/addon-options';
98

10-
import DefaultTheme from '../src/theme/DefaultTheme';
9+
import registerInterfaceWithDefaultTheme from '../src/utils/registerInterfaceWithDefaultTheme';
1110

12-
import './storybook.scss';
11+
import '../css/storybook.scss';
1312

14-
ThemedStyleSheet.registerTheme(DefaultTheme);
15-
ThemedStyleSheet.registerInterface(aphroditeInterface);
13+
registerInterfaceWithDefaultTheme(aphroditeInterface);
1614

1715
addDecorator((story) => {
1816
moment.locale('en');

‎.storybook/webpack.config.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,9 @@ module.exports = {
44
module: {
55
rules: [
66
{
7-
test: /\.scss$/,
7+
test: /(\.scss$|\.css$)/,
88
use: ['style-loader', 'raw-loader', 'sass-loader'],
99
include: [
10-
path.resolve(__dirname, './'),
1110
path.resolve(__dirname, '../css/'),
1211
],
1312
},

‎css/SingleDatePickerInput.scss

Lines changed: 0 additions & 68 deletions
This file was deleted.

‎.storybook/storybook.scss renamed to ‎css/storybook.scss

File renamed without changes.

‎package.json

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
"description": "A responsive and accessible date range picker component built with React",
55
"main": "index.js",
66
"scripts": {
7-
"build": "npm run clean && npm run build:js && npm run build:css && npm run build:svg",
7+
"build": "npm run clean && npm run build:js && npm run build:svg",
88
"build:js": "babel src/ -d lib/ --ignore src/components",
9-
"build:css": "node-sass css/styles.scss lib/css/_datepicker.css",
9+
"build:css": "node scripts/buildCSS.js",
1010
"build:svg": "webpack",
1111
"clean": "rimraf lib",
1212
"precover": "rimraf coverage",
@@ -22,6 +22,7 @@
2222
"tests-karma": "karma start",
2323
"test": "npm run tests-only",
2424
"storybook": "start-storybook -p 6006",
25+
"storybook:css": "npm run build:css && start-storybook -p 6006 -c .storybook-css",
2526
"tag": "git tag v$npm_package_version",
2627
"gh-pages:clean": "rimraf _gh-pages",
2728
"gh-pages:build": "$(npm bin)/build-storybook -o _gh-pages",
@@ -62,6 +63,7 @@
6263
"babel-preset-airbnb": "^2.4.0",
6364
"babel-register": "^6.26.0",
6465
"chai": "^4.1.1",
66+
"clean-css": "^4.1.9",
6567
"coveralls": "^2.13.1",
6668
"cross-env": "^5.0.5",
6769
"enzyme": "^3.0.0",
@@ -95,6 +97,7 @@
9597
"react-svg-loader": "^1.1.1",
9698
"react-test-renderer": "^15.6.1",
9799
"react-with-styles-interface-aphrodite": "^1.2.0",
100+
"react-with-styles-interface-css": "^1.1.0",
98101
"rimraf": "^2.6.2",
99102
"safe-publish-latest": "^1.1.1",
100103
"sass-loader": "^6.0.6",

‎scripts/buildCSS.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
#!/usr/bin/env node
2+
3+
const fs = require('fs');
4+
const CleanCSS = require('clean-css');
5+
6+
const CSSInterface = require('react-with-styles-interface-css').default;
7+
const registerMaxSpecificity = require('react-with-styles-interface-css').registerMaxSpecificity;
8+
const compileCSS = require('react-with-styles-interface-css/compile').default;
9+
10+
const registerInterfaceWithDefaultTheme = require('../src/utils/registerInterfaceWithDefaultTheme').default;
11+
12+
require('../test/_helpers/ignoreSVGStrings');
13+
14+
registerMaxSpecificity(11);
15+
registerInterfaceWithDefaultTheme(CSSInterface);
16+
17+
const DateRangePickerPath = './src/components/DateRangePicker.jsx';
18+
const SingleDatePickerPath = './src/components/SingleDatePicker.jsx';
19+
20+
const dateRangePickerCSS = compileCSS(DateRangePickerPath);
21+
const singleDatePickerCSS = compileCSS(SingleDatePickerPath);
22+
const CSS = dateRangePickerCSS + singleDatePickerCSS;
23+
24+
const format = new CleanCSS({
25+
level: 0,
26+
format: 'beautify',
27+
inline: ['none'],
28+
});
29+
const { styles: formattedCSS } = format.minify(CSS);
30+
31+
fs.writeFileSync('./css/styles.css', formattedCSS, 'utf8');

‎src/components/CalendarMonth.jsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,6 @@ class CalendarMonth extends React.Component {
170170
orientation === HORIZONTAL_ORIENTATION && styles.CalendarMonth__horizontal,
171171
orientation === VERTICAL_ORIENTATION && styles.CalendarMonth__vertical,
172172
verticalScrollable && styles.CalendarMonth__verticalScrollable,
173-
174173
)}
175174
data-visible={isVisible}
176175
>

‎src/utils/registerInterfaceWithDefaultTheme.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
2+
import DefaultTheme from '../theme/DefaultTheme';
3+
4+
export default function registerInterfaceWithDefaultTheme(reactWithStylesInterface) {
5+
ThemedStyleSheet.registerInterface(reactWithStylesInterface);
6+
ThemedStyleSheet.registerTheme(DefaultTheme);
7+
}

0 commit comments

Comments
 (0)
Please sign in to comment.