feat(styled-components): upgrade styled-components to v4 (#190)

* feat(styled-components): upgrade styled-components to v4 * fix(DateRangePickerInput): remove comments * fix(styled-components): rename files and restructure directory * fix(DatePickerStyles): disable no-descending-specificity rule for one block * fix(THead): replace sc-custom with sc-selector
treebohotels · Mar 29, 2019 · 8f2a115 · 8f2a115
1 parent f7c6474
commit 8f2a115
Show file tree

Hide file tree

Showing 21 changed files with 326 additions and 322 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -1,5 +1,22 @@
 {
-  "processors": ["stylelint-processor-styled-components"],
+  "processors": [
+    ["stylelint-processor-styled-components", {
+      "parserPlugins": [
+        "jsx",
+        "objectRestSpread",
+        ["decorators", { "decoratorsBeforeExport": true }],
+        "classProperties",
+        "exportExtensions",
+        "asyncGenerators",
+        "functionBind",
+        "functionSent",
+        "dynamicImport",
+        "optionalCatchBinding",
+        "optionalChaining",
+        "exportDefaultFrom"
+      ]
+    }],
+  ],
   "extends": [
     "stylelint-config-standard",
     "stylelint-config-styled-components"

diff --git a/README.md b/README.md
@@ -20,13 +20,12 @@ Wrap your App component with ThemeProvider and pass it the leaf-ui theme (or ove
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { ThemeProvider } from 'styled-components';
-import leafUiTheme, { injectBaseStyles } from 'leaf-ui/theme';
+import leafUiTheme, { BaseStyles } from 'leaf-ui/theme/web';
 import App from './App';
 
-injectBaseStyles(leafUiTheme);
-
 ReactDOM.render(
   <ThemeProvider theme={leafUiTheme}>
+    <BaseStyles/>
     <App />
   </ThemeProvider>,
   document.getElementById('root'),

diff --git a/package.json b/package.json
@@ -78,16 +78,16 @@
     "npm-run-all": "4.1.5",
     "prop-types": "15.6.2",
     "raw-loader": "0.5.1",
-    "react": "16.7.0",
-    "react-dom": "16.7.0",
+    "react": "16.8.5",
+    "react-dom": "16.8.5",
     "react-native": "0.57.8",
     "rimraf": "2.6.3",
     "semantic-release": "11.0.2",
-    "styled-components": "3.2.6",
+    "styled-components": "4.2.0",
     "stylelint": "9.10.1",
     "stylelint-config-standard": "18.2.0",
     "stylelint-config-styled-components": "0.1.1",
-    "stylelint-processor-styled-components": "1.3.2"
+    "stylelint-processor-styled-components": "1.5.2"
   },
   "peerDependencies": {
     "react": "^16.2.0",

diff --git a/src/Button/web/Button.js b/src/Button/web/Button.js
@@ -120,6 +120,7 @@ const StyledButton = styled(
     size,
     shape,
     block,
+    isLoading,
     ...props
   }) => <button {...props} />,
 )`

diff --git a/src/DatePickerInput/web/DatePickerInput.js b/src/DatePickerInput/web/DatePickerInput.js
@@ -11,7 +11,7 @@ import Size from '../../Size/web';
 import View from '../../View/web';
 import TextInput from '../../TextInput/web';
 import DatePickerNavbar from './DatePickerNavbar';
-import injectDatePickerStyles from './injectDatePickerStyles';
+import DatePickerStyles from './DatePickerStyles';
 
 class DatePickerInput extends React.Component {
   constructor(props) {
@@ -25,11 +25,6 @@ class DatePickerInput extends React.Component {
     this.timeout = {};
   }
 
-  componentWillMount = () => {
-    const { theme } = this.props;
-    injectDatePickerStyles(theme);
-  }
-
   componentDidMount() {
     const { selectedDay } = this.state;
     const { name } = this.props;
@@ -143,67 +138,70 @@ class DatePickerInput extends React.Component {
     }
 
     return (
-      <Size
-        className={className}
-        width={size}
-      >
-        <View>
-          <TextInput
-            inputRef={this.storeInputRef}
-            label={label}
-            value={this.formatDayForInput(selectedDay)}
-            placeholder={placeholder}
-            disabled={disabled}
-            size="100%"
-            onFocus={this.onInputFocus}
-            onBlur={this.onInputBlur}
-            autoComplete="off"
-            error={errorMessage}
-            hint={hint}
-            required={required}
-          />
-          {
-            isOpen ? (
-              <Position position="relative">
-                <View>
-                  <Position
-                    position="absolute"
-                    top={0}
-                    left={0}
-                  >
-                    <View
-                      tabIndex={0}
-                      onFocus={this.onDatePickerFocus}
-                      onBlur={this.onDatePickerBlur}
+      <React.Fragment>
+        <DatePickerStyles />
+        <Size
+          className={className}
+          width={size}
+        >
+          <View>
+            <TextInput
+              inputRef={this.storeInputRef}
+              label={label}
+              value={this.formatDayForInput(selectedDay)}
+              placeholder={placeholder}
+              disabled={disabled}
+              size="100%"
+              onFocus={this.onInputFocus}
+              onBlur={this.onInputBlur}
+              autoComplete="off"
+              error={errorMessage}
+              hint={hint}
+              required={required}
+            />
+            {
+              isOpen ? (
+                <Position position="relative">
+                  <View>
+                    <Position
+                      position="absolute"
+                      top={0}
+                      left={0}
                     >
-                      <Card
-                        borderStyle="none"
-                        elevated
+                      <View
+                        tabIndex={0}
+                        onFocus={this.onDatePickerFocus}
+                        onBlur={this.onDatePickerBlur}
                       >
-                        <DayPicker
-                          numberOfMonths={1}
-                          fromMonth={fromMonth}
-                          toMonth={toMonth}
-                          month={selectedDay}
-                          selectedDays={[selectedDay]}
-                          disabledDays={disabledDays}
-                          modifiers={{
-                            start: [selectedDay],
-                          }}
-                          navbarElement={DatePickerNavbar}
-                          captionElement={() => null}
-                          renderDay={renderDay}
-                          onDayClick={this.onDayClick}
-                        />
-                      </Card>
-                    </View>
-                  </Position>
-                </View>
-              </Position>
-            ) : null
-          }
-        </View>
-      </Size>
+                        <Card
+                          borderStyle="none"
+                          elevated
+                        >
+                          <DayPicker
+                            numberOfMonths={1}
+                            fromMonth={fromMonth}
+                            toMonth={toMonth}
+                            month={selectedDay}
+                            selectedDays={[selectedDay]}
+                            disabledDays={disabledDays}
+                            modifiers={{
+                              start: [selectedDay],
+                            }}
+                            navbarElement={DatePickerNavbar}
+                            captionElement={() => null}
+                            renderDay={renderDay}
+                            onDayClick={this.onDayClick}
+                          />
+                        </Card>
+                      </View>
+                    </Position>
+                  </View>
+                </Position>
+              ) : null
+            }
+          </View>
+        </Size>
+      </React.Fragment>
     );
   }
 }
@@ -227,7 +225,6 @@ DatePickerInput.propTypes = {
   toMonth: PropTypes.instanceOf(Date),
   renderDay: PropTypes.func,
   onDateChange: PropTypes.func,
-  theme: PropTypes.object,
   disabledDays: PropTypes.oneOfType([
     PropTypes.array,
     PropTypes.object,

diff --git a/src/DatePickerInput/web/DatePickerStyles.js b/src/DatePickerInput/web/DatePickerStyles.js
@@ -0,0 +1,77 @@
+import { createGlobalStyle } from 'styled-components';
+import reactDayPickerStyles from '!!raw-loader!react-day-picker/lib/style.css'; // eslint-disable-line
+
+const DatePickerStyles = createGlobalStyle`
+  ${reactDayPickerStyles}
+
+  .DayPicker {
+    background: ${(props) => props.theme.color.white};
+    position: relative;
+    outline: none;
+    z-index: 1;
+
+    &-wrapper {
+      && {
+        padding: ${(props) => props.theme.px(4)};
+        outline: none;
+      }
+    }
+
+    &-Month {
+      && {
+        margin: 0;
+      }
+
+      & + & {
+        margin-left: ${(props) => props.theme.px(4)};
+      }
+    }
+
+    &-Weekday {
+      && {
+        padding: ${(props) => props.theme.px(1)};
+        font-size: ${(props) => props.theme.fontSize.s};
+      }
+    }
+
+    &-Day {
+      border-radius: 0 !important;
+
+      && {
+        padding: ${(props) => props.theme.px(1)};
+        font-weight: ${(props) => props.theme.fontWeight.normal};
+        font-size: ${(props) => props.theme.fontSize.s};
+        outline: none;
+      }
+
+      &:not(&--disabled):not(&--selected):not(&--outside):hover {
+        && {
+          background-color: ${(props) => props.theme.color.primaryLighter};
+        }
+      }
+
+      &--today:not(&--disabled):not(&--outside) {
+        && {
+          color: ${(props) => props.theme.color.greyDarker};
+        }
+      }
+      /* stylelint-disable no-descending-specificity */
+      &--selected:not(&--disabled):not(&--outside) {
+        && {
+          color: ${(props) => props.theme.color.white};
+          background-color: ${(props) => props.theme.color.primary};
+        }
+      }
+
+      &--selected:not(&--start):not(&--end):not(&--disabled):not(&--outside) {
+        && {
+          color: ${(props) => props.theme.color.greyDarker};
+          background-color: ${(props) => props.theme.color.primaryLighter};
+        }
+      }
+      /* stylelint-enable no-descending-specificity */
+    }
+  }
+`;
+
+export default DatePickerStyles;
diff --git a/src/DatePickerInput/web/injectDatePickerStyles.js b/src/DatePickerInput/web/injectDatePickerStyles.js