Merge pull request #48 from alampros/develop

Fix typescript types

.eslintignore

@@ -1,4 +1,4 @@
 dist/*
 node_modules/
-www/public/
+storybook-static/
 !.storybook/

package.json

@@ -3,7 +3,7 @@
   "version": "2.7.0",
   "description": "React component to draw confetti for your party.",
   "main": "dist/react-confetti.min.js",
-  "types": "dist/types/",
+  "types": "dist/types/ReactConfetti.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/alampros/react-confetti.git"

stories/index.stories.jsx

@@ -36,7 +36,7 @@ const PointConfetti = (passedProps) => {
 
 storiesOf('With Size Hook', module)
   .addDecorator(withKnobs)
-  .add('Props', () => (
+  .add('Knobs', () => (
     <SizedConfetti
       run={boolean('Run', true)}
       recycle={boolean('Recycle', true)}
@@ -98,6 +98,6 @@ storiesOf('With Size Hook', module)
     />
   ))
 
-storiesOf('Default')
+storiesOf('Default', module)
   .addDecorator(withInfo)
   .add('Default', () => <ReactConfetti />)

stories/snow.stories.jsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { useWindowSize } from 'react-use'
+import { storiesOf } from '@storybook/react'
+import { randomInt } from '../src/utils'
+
+import ReactConfetti from '../src/ReactConfetti'
+
+const SizedConfetti = (passedProps) => {
+  const { width, height } = useWindowSize()
+  return (
+    <ReactConfetti
+      width={width}
+      height={height}
+      {...passedProps}
+    />
+  )
+}
+
+function drawSnowflake(ctx) {
+  const numPoints = this.numPoints || (randomInt(3, 4) * 2)
+  this.numPoints = numPoints
+  const innerRadius = this.radius * 0.2
+  const outerRadius = this.radius * 0.8
+  ctx.beginPath()
+  ctx.moveTo(0, 0 - outerRadius)
+
+  for(let n = 1; n < numPoints * 2; n++) {
+    const radius = n % 2 === 0 ? outerRadius : innerRadius
+    const x = radius * Math.sin((n * Math.PI) / numPoints)
+    const y = -1 * radius * Math.cos((n * Math.PI) / numPoints)
+    ctx.lineTo(x, y)
+  }
+  ctx.fill()
+  ctx.stroke()
+  ctx.closePath()
+}
+
+storiesOf('With Size Hook', module)
+  .add('Snow', () => (
+    <SizedConfetti
+      drawShape={drawSnowflake}
+      colors={['#AEE1FF', '#CBDDF8']}
+      gravity={0.03}
+      wind={0.01}
+    />
+  ))

stories/stars.stories.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { useWindowSize } from 'react-use'
+import { storiesOf } from '@storybook/react'
+import { randomInt } from '../src/utils'
+
+import ReactConfetti from '../src/ReactConfetti'
+
+const SizedConfetti = (passedProps) => {
+  const { width, height } = useWindowSize()
+  return (
+    <ReactConfetti
+      width={width}
+      height={height}
+      {...passedProps}
+    />
+  )
+}
+
+function drawStar(ctx) {
+  const numPoints = this.numPoints || randomInt(4, 6)
+  this.numPoints = numPoints
+  const outerRadius = this.w
+  const innerRadius = outerRadius / 2
+  ctx.beginPath()
+  ctx.moveTo(0, 0 - outerRadius)
+
+  for(let n = 1; n < numPoints * 2; n++) {
+    const radius = n % 2 === 0 ? outerRadius : innerRadius
+    const x = radius * Math.sin((n * Math.PI) / numPoints)
+    const y = -1 * radius * Math.cos((n * Math.PI) / numPoints)
+    ctx.lineTo(x, y)
+  }
+  ctx.fill()
+  ctx.closePath()
+}
+
+storiesOf('With Size Hook', module)
+  .add('Stars', () => (
+    <SizedConfetti
+      drawShape={drawStar}
+    />
+  ))