From e4c302df1f18c93de29d6e31b6018ecb00269847 Mon Sep 17 00:00:00 2001
From: Francesco Cioria <firefelix@gmail.com>
Date: Tue, 3 Apr 2018 12:12:16 +0200
Subject: [PATCH] add example with styled-components

---
 examples/Examples.md | 22 ++++++++++++++++++++++
 package.json         |  3 ++-
 styleguide.config.js |  3 +++
 styleguide/setup.ts  |  4 ++++
 4 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/examples/Examples.md b/examples/Examples.md
index 99f4638..3e6f0d5 100644
--- a/examples/Examples.md
+++ b/examples/Examples.md
@@ -42,3 +42,25 @@ using `maxHeight`
   defaultValue={'this\nis\na\nlong\ninitial\ntext'}
 />
 ```
+
+#### Styled components
+
+```js
+const StyledTextarea = styled(TextareaAutosize)`
+  font-size: ${({ theme }) => theme.textarea.fontSize};
+  border-color: ${({ theme }) => theme.textarea.borderColor};
+  resize: none;
+  box-sizing: border-box;
+  width: 100%;
+`;
+
+<StyledTextarea
+  defaultValue='Church-key flannel bicycle rights, tofu tacos before they sold out polaroid for free'
+  theme={{
+    textarea: {
+      fontSize: '18px',
+      borderColor: 'green'
+    }
+  }}
+/>
+```
diff --git a/package.json b/package.json
index d2c65d3..731312e 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
     "css-loader": "^0.28.5",
     "file-loader": "^1.1.5",
     "jest": "^21.2.1",
-    "node-sass": "4.5.2",
+    "node-sass": "^4.8.3",
     "progress-bar-webpack-plugin": "^1.10.0",
     "raw-loader": "^0.5.1",
     "react": "^16",
@@ -62,6 +62,7 @@
     "require-dir": "^0.3.0",
     "sass-loader": "^6.0.6",
     "smooth-release": "^8.0.0",
+    "styled-components": "^3.2.5",
     "ts-jest": "^21.2.3",
     "ts-loader": "^2.3.3",
     "typescript": "^2.4.2",
diff --git a/styleguide.config.js b/styleguide.config.js
index 7640285..2800f71 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -11,6 +11,9 @@ module.exports = {
 
   // content
   title: 'react-autosize-textarea',
+  compilerConfig: {
+    transforms: { dangerousTaggedTemplateString: true }
+  },
   // assetsDir: 'styleguide/assets',
   template: 'styleguide/index.html',
   propsParser: require('react-docgen-typescript').parse, // detect docs using TS information
diff --git a/styleguide/setup.ts b/styleguide/setup.ts
index b36afa0..3bf22c1 100644
--- a/styleguide/setup.ts
+++ b/styleguide/setup.ts
@@ -1 +1,5 @@
+import styled from 'styled-components';
+
+(global as any).styled = styled;
+
 import '../examples/examples.scss';