Merge branch 'master' of github.com:atlassian/react-beautiful-dnd int…

…o major-state-refactor
atlassian · May 11, 2018 · 597a236 · 597a236
2 parents ce2e8ad + eb0487d
commit 597a236
Show file tree

Hide file tree

Showing 18 changed files with 879 additions and 91 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -0,0 +1,7 @@
+{
+  "processors": ["stylelint-processor-styled-components"],
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-styled-components"
+  ]
+}
diff --git a/README.md b/README.md
@@ -1,3 +1,5 @@
+![react beautiful dnd](https://raw.githubusercontent.com/alexreardon/files/master/resources/react-beautiful-dnd-logo.png)
+
 # react-beautiful-dnd
 
 Beautiful, accessible drag and drop for lists with [`React.js`](https://facebook.github.io/react/)

diff --git a/package.json b/package.json
@@ -26,8 +26,9 @@
   ],
   "scripts": {
     "test": "jest --config ./jest.config.js",
-    "validate": "yarn lint && yarn typecheck",
+    "validate": "yarn lint && yarn lint:css && yarn typecheck",
     "lint": "yarn eslint .",
+    "lint:css": "stylelint \"stories/**/*.{js,jsx}\"",
     "typecheck": "flow check",
     "check-bundle-sizes": "cross-env SNAPSHOT=match yarn build:dist && yarn build:clean",
     "update-bundle-sizes": "yarn build:dist && yarn build:clean",
@@ -95,7 +96,11 @@
     "rollup-plugin-size-snapshot": "^0.4.0",
     "rollup-plugin-strip": "^1.1.1",
     "rollup-plugin-uglify": "^3.0.0",
-    "styled-components": "^3.2.6"
+    "styled-components": "^3.2.6",
+    "stylelint": "9.1.3",
+    "stylelint-config-standard": "^18.2.0",
+    "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-processor-styled-components": "^1.3.1"
   },
   "peerDependencies": {
     "react": "^16.3.1"

diff --git a/stories/1-single-vertical-list-story.js b/stories/1-single-vertical-list-story.js
@@ -18,7 +18,6 @@ const ScrollContainer = styled.div`
   padding: ${grid * 2}px;
   overflow-y: scroll;
   width: 500px;
-
   height: 100vh;
   position: relative;
 `;

diff --git a/stories/src/accessible/task-list.jsx b/stories/src/accessible/task-list.jsx
@@ -25,7 +25,7 @@ const Title = styled.h3`
 
 const List = styled.div`
   padding: ${grid}px;
-  padding-bottom: 0px;
+  padding-bottom: 0;
   display: flex;
   flex-direction: column;
 `;

diff --git a/stories/src/accessible/task.jsx b/stories/src/accessible/task.jsx
@@ -18,7 +18,6 @@ const Container = styled.div`
   margin-bottom: ${grid}px;
   border-radius: ${borderRadius}px;
   font-size: 18px;
-
   ${({ isDragging }) => (isDragging ? 'box-shadow: 1px 1px 1px grey; background: lightblue' : '')}
 `;
 

diff --git a/stories/src/board/board.jsx b/stories/src/board/board.jsx
@@ -52,12 +52,14 @@ export default class Board extends Component<Props, State> {
   boardRef: ?HTMLElement
 
   componentDidMount() {
+    /* stylelint-disable max-empty-lines */
     // eslint-disable-next-line no-unused-expressions
     injectGlobal`
       body {
         background: ${colors.blue.deep};
       }
     `;
+    /* stylelint-enable */
   }
 
   onDragStart = (initial: DragStart) => {

diff --git a/stories/src/multi-drag/task.jsx b/stories/src/multi-drag/task.jsx
@@ -59,10 +59,9 @@ const Container = styled.div`
   color: ${props => getColor(props)};
   padding: ${grid}px;
   margin-bottom: ${grid}px;
-  border-radius: ${borderRadius}px;4
+  border-radius: ${borderRadius}px;
   font-size: 18px;
   border: 1px solid ${colors.shadow};
-
   ${props => (props.isDragging ? `box-shadow: 2px 2px 1px ${colors.shadow};` : '')}
   ${props => (props.isGhosting ? 'opacity: 0.8;' : '')}
 
@@ -75,10 +74,9 @@ const Container = styled.div`
     border-color: ${colors.blue.deep};
   }
 `;
-
-const Content = styled.div`
-`;
-
+/* stylelint-disable block-no-empty */
+const Content = styled.div``;
+/* stylelint-enable */
 const size: number = 30;
 
 const SelectionCount = styled.div`

diff --git a/stories/src/portal/portal-app.jsx b/stories/src/portal/portal-app.jsx
@@ -33,9 +33,11 @@ const SimpleQuote = styled.div`
   margin-bottom: ${grid}px;
   background-color: ${colors.blue.light};
   border: 1px solid ${colors.blue.deep};
+
   /* used for positioning the after content */
   position: relative;
 
+  /* stylelint-disable  comment-empty-line-before */
   /* add little portal indicator when in a portal */
   ${props => (props.inPortal ? (`
     ::after {
@@ -47,6 +49,7 @@ const SimpleQuote = styled.div`
       content: "in portal";
     }
   `) : '')}
+  /* stylelint-enable */
 `;
 
 class PortalAwareItem extends Component<ItemProps> {

diff --git a/stories/src/primatives/author-list.jsx b/stories/src/primatives/author-list.jsx
@@ -24,6 +24,7 @@ const Wrapper = styled.div`
 
 const DropZone = styled.div`
   display: flex;
+
   /*
     Needed to avoid growth in list due to lifting the first item
     Caused by display: inline-flex strangeness
@@ -32,7 +33,6 @@ const DropZone = styled.div`
 
   /* stop the list collapsing when empty */
   min-width: 600px;
-
 `;
 
 const ScrollContainer = styled.div`
@@ -43,8 +43,10 @@ const Container = styled.div`
   /* flex child */
   flex-grow: 1;
 
-  /* flex parent */
-  /* needed to allow width to grow greater than body */
+  /*
+    flex parent
+    needed to allow width to grow greater than body
+  */
   display: inline-flex;
 `;
 

diff --git a/stories/src/primatives/quote-item.jsx b/stories/src/primatives/quote-item.jsx
@@ -12,81 +12,83 @@ type Props = {
 }
 
 const Container = styled.a`
-border-radius: ${borderRadius}px;
-border: 1px solid grey;
-background-color: ${({ isDragging }) => (isDragging ? colors.green : colors.white)};
-
-box-shadow: ${({ isDragging }) => (isDragging ? `2px 2px 1px ${colors.shadow}` : 'none')};
-padding: ${grid}px;
-min-height: 40px;
-margin-bottom: ${grid}px;
-user-select: none;
-transition: background-color 0.1s ease;
+  border-radius: ${borderRadius}px;
+  border: 1px solid grey;
+  background-color: ${({ isDragging }) => (isDragging ? colors.green : colors.white)};
+  box-shadow: ${({ isDragging }) => (isDragging ? `2px 2px 1px ${colors.shadow}` : 'none')};
+  padding: ${grid}px;
+  min-height: 40px;
+  margin-bottom: ${grid}px;
+  user-select: none;
+  transition: background-color 0.1s ease;
+
+  /* anchor overrides */
+  color: ${colors.black};
 
-/* anchor overrides */
-color: ${colors.black};
+  &:hover {
+    color: ${colors.black};
+    text-decoration: none;
+  }
 
-&:hover {
-  color: ${colors.black};
-  text-decoration: none;
-}
-&:focus {
-  outline: 2px solid ${colors.purple};
-  box-shadow: none;
-}
+  &:focus {
+    outline: 2px solid ${colors.purple};
+    box-shadow: none;
+  }
 
-/* flexbox */
-display: flex;
-align-items: center;
+  /* flexbox */
+  display: flex;
+  align-items: center;
 `;
 
 const Avatar = styled.img`
-width: 40px;
-height: 40px;
-border-radius: 50%;
-margin-right: ${grid}px;
-flex-shrink: 0;
-flex-grow: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-right: ${grid}px;
+  flex-shrink: 0;
+  flex-grow: 0;
 `;
 
 const Content = styled.div`
-/* flex child */
-flex-grow: 1;
-
-/* Needed to wrap text in ie11 */
-/* https://stackoverflow.com/questions/35111090/why-ie11-doesnt-wrap-the-text-in-flexbox */
-flex-basis: 100%
-
-/* flex parent */
-display: flex;
-flex-direction: column;
+  /* flex child */
+  flex-grow: 1;
+
+  /*
+    Needed to wrap text in ie11
+    https://stackoverflow.com/questions/35111090/why-ie11-doesnt-wrap-the-text-in-flexbox
+  */
+  flex-basis: 100%;
+
+  /* flex parent */
+  display: flex;
+  flex-direction: column;
 `;
 
 const BlockQuote = styled.div`
-&::before {
-  content: open-quote;
-}
+  &::before {
+    content: open-quote;
+  }
 
-&::after {
-  content: close-quote;
-}
+  &::after {
+    content: close-quote;
+  }
 `;
 
 const Footer = styled.div`
-display: flex;
-margin-top: ${grid}px;
+  display: flex;
+  margin-top: ${grid}px;
 `;
 
 const QuoteId = styled.small`
-flex-grow: 0;
-margin: 0;
+  flex-grow: 0;
+  margin: 0;
 `;
 
 const Attribution = styled.small`
-margin: 0;
-margin-left: ${grid}px;
-text-align: right;
-flex-grow: 1;
+  margin: 0;
+  margin-left: ${grid}px;
+  text-align: right;
+  flex-grow: 1;
 `;
 
 // Previously this extended React.Component

diff --git a/stories/src/primatives/quote-list.jsx b/stories/src/primatives/quote-list.jsx
@@ -29,8 +29,11 @@ const Wrapper = styled.div`
 const DropZone = styled.div`
   /* stop the list collapsing when empty */
   min-height: 250px;
-  /* not relying on the items for a margin-bottom
-  as it will collapse when the list is empty */
+
+  /*
+    not relying on the items for a margin-bottom
+    as it will collapse when the list is empty
+  */
   margin-bottom: ${grid}px;
 `;
 
@@ -40,7 +43,9 @@ const ScrollContainer = styled.div`
   max-height: 300px;
 `;
 
+/* stylelint-disable block-no-empty */
 const Container = styled.div``;
+/* stylelint-enable */
 
 type Props = {|
   listId: string,

diff --git a/stories/src/primatives/title.jsx b/stories/src/primatives/title.jsx
@@ -8,6 +8,7 @@ export default styled.h4`
   flex-grow: 1;
   user-select: none;
   position: relative;
+
   &:focus {
     outline: 2px solid ${colors.purple};
     outline-offset: 2px;

diff --git a/stories/src/table/with-dimension-locking.jsx b/stories/src/table/with-dimension-locking.jsx
@@ -153,11 +153,11 @@ const Header = styled.header`
   margin-bottom: ${grid * 2}px;
 `;
 
-const LayoutControl = styled.div`
-`;
+/* stylelint-disable block-no-empty */
+const LayoutControl = styled.div``;
 
-const CopyTableButton = styled.button`
-`;
+const CopyTableButton = styled.button``;
+/* stylelint-enable */
 
 type AppProps = {|
   initial: Quote[],

diff --git a/stories/src/table/with-fixed-columns.jsx b/stories/src/table/with-fixed-columns.jsx
@@ -29,16 +29,20 @@ const THead = styled.thead`
 `;
 
 const Row = styled.tr`
+  /* stylelint-disable comment-empty-line-before */
   ${props => (props.isDragging ? `
     background: ${colors.green};
+
     /* maintain cell width while dragging */
     display: table;
   ` : '')}
+  /* stylelint-enable */
 `;
 
 const Cell = styled.td`
   box-sizing: border-box;
   padding: ${grid}px;
+
   /* locking the width of the cells */
   width: 50%;
 `;
@@ -78,11 +82,11 @@ const Header = styled.header`
   margin-bottom: ${grid * 2}px;
 `;
 
-const LayoutControl = styled.div`
-`;
+/* stylelint-disable block-no-empty */
+const LayoutControl = styled.div``;
 
-const CopyTableButton = styled.button`
-`;
+const CopyTableButton = styled.button``;
+/* stylelint-enable */
 
 type AppProps = {|
   initial: Quote[],

diff --git a/stories/src/table/with-portal.jsx b/stories/src/table/with-portal.jsx
@@ -235,11 +235,11 @@ const Header = styled.header`
   margin-bottom: ${grid * 2}px;
 `;
 
-const LayoutControl = styled.div`
-`;
+/* stylelint-disable block-no-empty */
+const LayoutControl = styled.div``;
 
-const CopyTableButton = styled.button`
-`;
+const CopyTableButton = styled.button``;
+/* stylelint-enable */
 
 type AppProps = {|
   initial: Quote[],

diff --git a/stories/src/vertical-nested/quote-list.jsx b/stories/src/vertical-nested/quote-list.jsx
@@ -26,6 +26,7 @@ const Container = styled.div`
   padding-bottom: 0;
   user-select: none;
   transition: background-color 0.1s ease;
+
   &:focus {
     outline: 2px solid ${colors.purple};
     outline-offset: 2px;