diff --git a/.eslintignore b/.eslintignore index 638ccc1..c645832 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,4 +1,4 @@ dist/* node_modules/ -www/public/ +storybook-static/ !.storybook/ diff --git a/package.json b/package.json index 973c817..35c1330 100644 --- a/package.json +++ b/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" diff --git a/stories/index.stories.jsx b/stories/index.stories.jsx index 2509fda..3d96733 100644 --- a/stories/index.stories.jsx +++ b/stories/index.stories.jsx @@ -36,7 +36,7 @@ const PointConfetti = (passedProps) => { storiesOf('With Size Hook', module) .addDecorator(withKnobs) - .add('Props', () => ( + .add('Knobs', () => ( )) -storiesOf('Default') +storiesOf('Default', module) .addDecorator(withInfo) .add('Default', () => ) diff --git a/stories/snow.stories.jsx b/stories/snow.stories.jsx new file mode 100644 index 0000000..021d4fe --- /dev/null +++ b/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 ( + + ) +} + +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', () => ( + + )) diff --git a/stories/stars.stories.jsx b/stories/stars.stories.jsx new file mode 100644 index 0000000..4ae8439 --- /dev/null +++ b/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 ( + + ) +} + +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', () => ( + + ))