Move to Tailwind (#116)

.gitignore

@@ -27,3 +27,4 @@ lib/react-wavify.module.dev.js
 lib/react-wavify.module.js
 /lib/index.d.ts
 /demo/yarn.lock
+test.css

README.md

@@ -0,0 +1 @@
+packages/react-wavify/README.md

package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-wavify-root",
-    "version": "1.11.0",
+    "version": "1.11.1",
     "description": "Animated wave component for React",
     "scripts": {
       "package": "pnpm -C packages/react-wavify package",
@@ -9,7 +9,7 @@
       "clean": "pnpm -C packages/react-wavify clean && pnpm -C packages/website clean",
       "dev": "pnpm -C packages/website dev",
       "build-site": "pnpm -C packages/website build",
-      "format": "prettier --write \"packages/**/{src,tests}/**/*.js\""
+      "format": "prettier --write \"packages/**/{src,tests}/**/*.{js,jsx,ts,tsx}\""
     },
     "repository": "https://github.com/woofers/react-wavify",
     "keywords": [

packages/react-wavify/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "arrowParens": "avoid",
+  "singleQuote": true,
+  "semi": false,
+  "trailingComma" : "none"
+}

packages/react-wavify/README.md

@@ -0,0 +1,138 @@
+
+
+# React Wavify
+
+[![img](https://github.com/woofers/react-wavify/workflows/build/badge.svg)](https://github.com/woofers/react-wavify/actions) [![img](https://badge.fury.io/js/react-wavify.svg)](https://www.npmjs.com/package/react-wavify) [![img](https://img.shields.io/npm/dt/react-wavify.svg)](https://www.npmjs.com/package/react-wavify) [![img](https://badgen.net/bundlephobia/minzip/react-wavify)](https://bundlephobia.com/result?p=react-wavify) [![img](https://img.shields.io/npm/l/react-wavify.svg)](https://github.com/woofers/react-wavify/blob/main/LICENSE)
+
+A simple React component which creates an animated wave.
+
+**[Live Demo](https://jaxs.onl/react-wavify/)**
+
+This component is heavily adapted from [Mikołaj Stolarski](https://github.com/grimor)'s awesome [Codepen](https://codepen.io/grimor/pen/qbXLdN)
+and is functionally similar to [Benjamin Grauwin](http://benjamin.grauwin.me/)'s [Wavify](https://github.com/peacepostman/wavify) plug-in.
+
+![img](./screenshots/wave.gif "Wave")
+
+
+# Installation
+
+**Yarn**
+
+```yarn
+yarn add react-wavify
+```
+
+**npm**
+
+```npm
+npm install react-wavify
+```
+
+# Usage
+
+```jsx
+import React from 'react'
+import Wave from 'react-wavify'
+
+const App = () => (
+  <Wave fill='#f79902'
+        paused={false}
+        style={{ display: 'flex' }}
+        options={{
+          height: 20,
+          amplitude: 20,
+          speed: 0.15,
+          points: 3
+        }}
+  />
+)
+```
+
+Simply add the Wave component to the React application using JSX.
+
+The wave's width will scale to fit the parent container.
+
+
+## Props
+
+
+### Fill
+
+The `fill` property can be set to anything that a SVG path can accept (usually gradients or colors). **Default:** `#FFF`
+
+
+### Paused
+
+The `paused` property controls the play state of the animation. **Default:** `false`
+
+If set to `true` the wave animation will pause.
+
+
+### Options
+
+The component supports a variety of options to affect how the wave is rendered.
+
+Any omitted options will be set to the default value.
+
+-   `height` - Height of the wave relative to the SVG element. **Default:** `20`
+-   `amplitude` - Amplitude of the rendered wave. **Default:** `20`
+-   `speed` - Speed that the wave animation plays at. **Default:** `0.15`
+-   `points` - Amount of points used to form the wave.
+    Can not be less than `1`. **Default:** `3`
+
+
+### Pass Through Props
+
+Any other props such as `id`, `className` or `style` will be passed through to the root of the component.
+
+Other props such as `opacity` or `stroke` will be passed to the SVG path element.
+
+Any other elements can be passed inside the SVG component itself.
+
+Inner `<defs>` elements can be used to add gradients, clipping paths, or masks.
+
+##### Using a Gradient
+
+```jsx
+<Wave fill="url(#gradient)">
+  <defs>
+    <linearGradient id="gradient" gradientTransform="rotate(90)">
+      <stop offset="10%"  stopColor="#d4af37" />
+      <stop offset="90%" stopColor="#f00" />
+    </linearGradient>
+  </defs>
+</Wave>
+```
+
+![img](./screenshots/wave-grad.gif "Gradient Wave")
+
+##### Using a Clipping Path
+
+```jsx
+<Wave fill="#e62315" mask="url(#mask)" options={{ points: 20, speed: 0.2, amplitude: 40 }}>
+  {/* Example adapted from https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask */}
+  <mask id="mask">
+    <path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z" fill="white" />
+  </mask>
+</Wave>
+```
+
+![img](./screenshots/wave-heart.gif "Clipping Path Wave")
+
+##### Using a Mask
+
+```jsx
+<Wave mask="url(#mask)" fill="#1277b0" >
+  <defs>
+    <linearGradient id="gradient" gradientTransform="rotate(90)">
+      <stop offset="0" stopColor="white" />
+      <stop offset="0.5" stopColor="black" />
+    </linearGradient>
+    <mask id="mask">
+      <rect x="0" y="0" width="2000" height="200" fill="url(#gradient)"  />
+    </mask>
+  </defs>
+</Wave>
+```
+
+![img](./screenshots/wave-mask.gif "Mask Wave")

packages/react-wavify/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-wavify",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "description": "Animated wave component for React",
   "main": "lib/index.js",
   "module": "lib/index.module.js",
@@ -14,14 +14,14 @@
     "README.md"
   ],
   "scripts": {
-    "start": "yarn watch",
+    "start": "pnpm watch",
     "build:module": "microbundle --no-pkg-main --no-sourcemap --no-generateTypes --jsx React.createElement --define __isDev__=false -i src/index.js -o lib/react-wavify.module.js -f es",
     "build:umd": "microbundle --no-pkg-main --no-sourcemap --no-generateTypes --jsx React.createElement --define __isDev__=false -i src/index.js -o lib/react-wavify.js -f umd",
     "build:dev:module": "microbundle --no-pkg-main --no-sourcemap --no-generateTypes --jsx React.createElement --define __isDev__=true -i src/index.js -o lib/react-wavify.module.dev.js -f es",
     "build:dev:umd": "microbundle --no-pkg-main --no-sourcemap --no-generateTypes --jsx React.createElement --define __isDev__=true -i src/index.js -o lib/react-wavify.dev.js -f umd",
     "build:types": "cp src/index.d.ts lib/index.d.ts",
-    "clean": "rimraf lib/react-wavify.dev.js lib/react-wavify.js lib/react-wavify.module.dev.js lib/react-wavify.module.js lib/index.d.ts README.md",
-    "build": "yarn build:dev:module && yarn build:dev:umd && yarn build:module && yarn build:umd && yarn build:types && cp ../../README.md README.md",
+    "clean": "rimraf lib/react-wavify.dev.js lib/react-wavify.js lib/react-wavify.module.dev.js lib/react-wavify.module.js lib/index.d.ts",
+    "build": "pnpm build:dev:module && yarn build:dev:umd && yarn build:module && yarn build:umd && yarn build:types",
     "watch": "rollup -c --watch",
     "test": "echo \"No tests \" && exit 0",
     "package": "pnpm publish --no-git-checks --access public"

packages/react-wavify/src/index.d.ts

@@ -7,17 +7,21 @@ type WaveOptions = {
   points?: number
 }
 
-type BaseProps = Omit<React.SVGProps<SVGPathElement>, 'ref' | 'height' | 'width' | 'points'>
+type BaseProps = Omit<
+  React.SVGProps<SVGPathElement>,
+  'ref' | 'height' | 'width' | 'points'
+>
 
-type WaveProps = BaseProps & WaveOptions & {
-  paused?: boolean
-  fill?: string
-  options?: WaveOptions
-  ref?: string
-  svgId?: string
-  svgPathId?: string
-}
+type WaveProps = BaseProps &
+  WaveOptions & {
+    paused?: boolean
+    fill?: string
+    options?: WaveOptions
+    ref?: string
+    svgId?: string
+    svgPathId?: string
+  }
 
 declare const Wave: React.FC<WaveProps>
 
-export = Wave
+export = Wave

packages/react-wavify/src/index.js

@@ -7,15 +7,15 @@ const defaults = {
   height: 20,
   amplitude: 20,
   speed: 0.15,
-  points: 3,
+  points: 3
 }
 
-const Wave = ({ options, ...rest }) =>
+const Wave = ({ options, ...rest }) => (
   <WaveBase {...Object.assign({}, defaults, options, rest)} />
+)
 
 if (__isDev__) {
   Wave.displayName = 'Wave'
 }
 
-
 export default Wave

packages/website/.gitignore

@@ -32,3 +32,4 @@ yarn-error.log*
 
 # vercel
 .vercel
+tsconfig.tsbuildinfo