scriptex · scriptex · Oct 6, 2020 · Oct 6, 2020 · Oct 6, 2020 · Oct 6, 2020
diff --git a/.gitignore b/.gitignore
@@ -6,7 +6,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # Dependency directory
-node_modules/
+node_modules
 
 # Misc
 .DS_Store
@@ -18,4 +18,8 @@ ehthumbs.db
 Thumbs.db
 
 # Build directory
-/dist
+dist
+
+# Demo
+demo/.cache
+demo/dist
diff --git a/.npmignore b/.npmignore
@@ -6,7 +6,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # Dependency directory
-node_modules/
+node_modules
 
 # Misc
 .DS_Store
@@ -31,12 +31,21 @@ Thumbs.db
 yarn.lock
 
 # Config files
+.github
+.whitesource
 _config.yml
 _.config.yml
+tslint.json
+tsconfig.json
 renovate.json
 rollup.config.js
 webpack.config.js
 
 # Prettier
 .prettierrc
 .prettierignore
+
+# Project specific
+!dist
+demo
+__tests__
diff --git a/.travis.yml b/.travis.yml
@@ -5,4 +5,4 @@ node_js:
 install:
     - yarn
 script:
-    - yarn prepare
+    - yarn prod
diff --git a/README.md b/README.md
@@ -8,7 +8,14 @@
 
 # React Accordion
 
-An accordion widget for React applications written in Typescript.
+> An accordion widget for React web applications written in Typescript.
+
+## About
+
+The latest version of the widget has been built using the Hooks API introduced with React 16.
+If you need to support older versions of React, please install [an older version](https://www.npmjs.com/package/react-accordion-ts/v/0.2.0).
+
+**Please note that this widget does NOT work with React Native.**
 
 ## Install
 
@@ -52,9 +59,25 @@ const items = news.map(({ date, title, content }) => ({
 export const MyComponent = () => <Accordion items={items} duration={300} multiple={true} />;
 ```
 
+You can also use the basic stylesheet included:
+
+```javascript
+import 'react-accordion-ts/src/panel.css';
+```
+
+or
+
+```css
+@import 'react-accordion-ts/src/panel.css';
+
+// If the above doesn't work, add a ~ in the beginning:
+
+@import '~react-accordion-ts/src/panel.css';
+```
+
 ## Props
 
-1. items: Array of objects with the following properties:
+1. items [Required] - Array of objects with the following shape:
 
     - title [Required] - React Node
     - content [Required] - React Node

diff --git a/__tests__/__snapshots__/accordion.test.tsx.snap b/__tests__/__snapshots__/accordion.test.tsx.snap
@@ -116,4 +116,4 @@ Array [
 ]
 `;
 
-exports[`Accordion should render properly 2`] = `""`;
+exports[`Accordion should render properly 2`] = `null`;
diff --git a/__tests__/accordion.test.tsx b/__tests__/accordion.test.tsx
@@ -1,40 +1,18 @@
 import * as React from 'react';
 import * as renderer from 'react-test-renderer';
 
+import { items } from '../demo/mocks';
 import Accordion from '../src/accordion';
 
-const mock = [
-	{
-		date: '12-10-2018',
-		title: 'Awesome title',
-		content: 'Fantastic content'
-	},
-	{
-		date: '13-10-2018',
-		title: 'Awesome title',
-		content: 'Fantastic content'
-	},
-	{
-		date: '13-10-2018',
-		title: 'Awesome title',
-		content: 'Fantastic content'
-	}
-];
-
 describe('Accordion', () => {
-	const items = mock.map(({ date, title, content }) => ({
-		title: <h2>{date + ' - ' + title}</h2>,
-		content: <p>{content}</p>
-	}));
-
 	it('should render properly', () => {
-		const tree = renderer.create(<Accordion items={items} duration={300} multiple={true} /> as any).toJSON();
+		const tree = renderer.create((<Accordion items={items} duration={300} multiple />) as any).toJSON();
 
 		expect(tree).toMatchSnapshot();
 	});
 
 	it('should render properly', () => {
-		const tree = renderer.create(<Accordion items={[]} duration={0} multiple={false} /> as any).toJSON();
+		const tree = renderer.create((<Accordion items={[]} duration={0} multiple={false} />) as any).toJSON();
 
 		expect(tree).toMatchSnapshot();
 	});

diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+
+		<title>React Accordion Demo</title>
+
+		<link rel="stylesheet" href="../src/panel.css" />
+	</head>
+	<body>
+		<div id="root"></div>
+
+		<script src="./index.tsx"></script>
+	</body>
+</html>
diff --git a/demo/index.tsx b/demo/index.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { items } from './mocks';
+import { Accordion } from '../dist/index';
+
+const App = () => {
+	return <Accordion items={items} duration={300} multiple />;
+};
+
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/demo/mocks.tsx b/demo/mocks.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+export const news = [
+	{
+		date: '12-10-2018',
+		title: 'Awesome title',
+		content: 'Fantastic content'
+	},
+	{
+		date: '13-10-2018',
+		title: 'Awesome title',
+		content: 'Fantastic content'
+	},
+	{
+		date: '13-10-2018',
+		title: 'Awesome title',
+		content: 'Fantastic content'
+	}
+];
+
+export const items = news.map(({ date, title, content }) => ({
+	title: <h2>{date + ' - ' + title}</h2>,
+	content: <p>{content}</p>
+}));
diff --git a/demo/package.json b/demo/package.json
@@ -0,0 +1,21 @@
+{
+	"name": "react-accordion-ts-example",
+	"version": "1.0.0",
+	"main": "index.tsx",
+	"license": "MIT",
+	"scripts": {
+		"start": "parcel index.html",
+		"build": "parcel build index.html"
+	},
+	"dependencies": {},
+	"alias": {
+		"react": "../node_modules/react",
+		"react-dom": "../node_modules/react-dom/profiling"
+	},
+	"devDependencies": {
+		"@types/react": "16.9.51",
+		"@types/react-dom": "16.9.8",
+		"parcel": "1.12.4",
+		"typescript": "4.0.3"
+	}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -116,4 +116,4 @@ Array [ @@
     ]
     `;
-    exports[`Accordion should render properly 2`] = `""`;
+    exports[`Accordion should render properly 2`] = `null`;