refactor: Repo dependency overhaul (#73)

* minor: Repo dependency overhaul

* remove old github actions file

* add nvmrc

* add files to package.json

.github/workflows/release.yml

@@ -0,0 +1,45 @@
+name: Release npm package
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  test:
+    name: 'CI'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - name: Install Dependencies
+        uses: bahmutov/npm-install@v1
+      - name: Build
+        run: yarn build
+      - name: Lint
+        run: yarn lint
+      - name: Test
+        run: yarn test
+
+  release:
+    name: Publish to NPM
+    needs: test
+    # publish only when merged in master on original repo, not on PR
+    if: github.repository == 'roginfarrer/react-collapsed' && github.ref == 'refs/heads/main'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - name: Install Dependencies
+        uses: bahmutov/npm-install@v1
+      - name: Build
+        run: yarn build
+      - run: npx semantic-release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.nvmrc

@@ -0,0 +1 @@
+14.18.0

.storybook/main.js

@@ -1,36 +1,11 @@
-const webpack = require('webpack');
-
 module.exports = {
-  stories: ['../stories/**/*.stories.(ts|tsx)'],
-  addons: [
-    '@storybook/addon-actions',
-    '@storybook/addon-links',
-    '@storybook/addon-a11y',
-    '@storybook/addon-storysource',
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
   ],
-  webpackFinal: async config => {
-    config.module.rules.push({
-      test: /\.(ts|tsx)$/,
-      use: [
-        {
-          loader: require.resolve('ts-loader'),
-          options: {
-            transpileOnly: true,
-          },
-        },
-        {
-          loader: require.resolve('react-docgen-typescript-loader'),
-        },
-      ],
-    });
-
-    config.resolve.extensions.push('.ts', '.tsx');
-    config.plugins.push(
-      new webpack.DefinePlugin({
-        __DEV__: JSON.stringify(process.env.NODE_ENV),
-      })
-    );
-
-    return config;
-  },
-};
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-a11y"
+  ]
+}

.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

CHANGELOG.md

@@ -2,44 +2,44 @@
 
 Complete rewrite using React hooks!
 
-* Ends support for React versions < 16.8.x
-* Library now exports a custom hook in lieu of a render prop component
-* Adds support for unmounting the contents of the Collapse element when closed
+- Ends support for React versions < 16.8.x
+- Library now exports a custom hook in lieu of a render prop component
+- Adds support for unmounting the contents of the Collapse element when closed
 
 ```js
-import React from 'react';
-import useCollapse from 'react-collapsed';
+import React from 'react'
+import useCollapse from 'react-collapsed'
 
 function Demo() {
-  const {getCollapseProps, getToggleProps, isOpen} = useCollapse();
+  const { getCollapseProps, getToggleProps, isOpen } = useCollapse()
 
   return (
     <>
       <button {...getToggleProps()}>{isOpen ? 'Collapse' : 'Expand'}</button>
       <section {...getCollapseProps()}>Collapsed content 🙈</section>
     </>
-  );
+  )
 }
 ```
 
 # 1.0.0
 
 Bumped to full release! :)
 
-* `duration`, `easing`, and `delay` now support taking an object with `in` and `out` keys to configure differing in-and-out transitions
+- `duration`, `easing`, and `delay` now support taking an object with `in` and `out` keys to configure differing in-and-out transitions
 
 # 0.2.0
 
 ### Breaking Changes
 
-* `getCollapsibleProps` => `getCollapseProps`. Renamed since it's easier to spell 😅
+- `getCollapsibleProps` => `getCollapseProps`. Renamed since it's easier to spell 😅
 
 ### Other
 
-* Slew of Flow bug fixes
-* Improved documentation
+- Slew of Flow bug fixes
+- Improved documentation
 
 # 0.1.3
 
-* ESLINT wasn't working properly - fixed this
-* Added `files` key to package.json to improve NPM load
+- ESLINT wasn't working properly - fixed this
+- Added `files` key to package.json to improve NPM load

MIGRATION-2.x-to-3.x.md

@@ -76,15 +76,15 @@ Now, you must provide a boolean or a function that returns a boolean:
 
 ```javascript
 function Collapse() {
-  const [mountChildren, setMountChildren] = useState(false);
+  const [mountChildren, setMountChildren] = useState(false)
   const { getToggleProps, getCollapseProps } = useCollapse({
     onCollapseEnd() {
-      setMountChildren(false);
+      setMountChildren(false)
     },
     onExpandStart() {
-      setMountChildren(true);
+      setMountChildren(true)
     },
-  });
+  })
 
   return (
     <div>
@@ -93,7 +93,6 @@ function Collapse() {
         {mountChildren && <p>I will only render when expanded!</p>}
       </div>
     </div>
-  );
+  )
 }
 ```
-

README.md

@@ -34,11 +34,11 @@ $ npm i react-collapsed
 ### Simple Usage
 
 ```js
-import React from 'react';
-import useCollapse from 'react-collapsed';
+import React from 'react'
+import useCollapse from 'react-collapsed'
 
 function Demo() {
-  const { getCollapseProps, getToggleProps, isExpanded } = useCollapse();
+  const { getCollapseProps, getToggleProps, isExpanded } = useCollapse()
 
   return (
     <div>
@@ -47,19 +47,19 @@ function Demo() {
       </button>
       <section {...getCollapseProps()}>Collapsed content 🙈</section>
     </div>
-  );
+  )
 }
 ```
 
 ### Control it yourself
 
 ```js
-import React, { useState } from 'react';
-import useCollapse from 'react-collapsed';
+import React, { useState } from 'react'
+import useCollapse from 'react-collapsed'
 
 function Demo() {
-  const [isExpanded, setExpanded] = useState(false);
-  const { getCollapseProps, getToggleProps } = useCollapse({ isExpanded });
+  const [isExpanded, setExpanded] = useState(false)
+  const { getCollapseProps, getToggleProps } = useCollapse({ isExpanded })
 
   return (
     <div>
@@ -72,31 +72,27 @@ function Demo() {
       </button>
       <section {...getCollapseProps()}>Collapsed content 🙈</section>
     </div>
-  );
+  )
 }
 ```
 
 ## API
 
 ```js
-const {
-  getCollapseProps,
-  getToggleProps,
-  isExpanded,
-  setExpanded,
-} = useCollapse({
-  isExpanded: boolean,
-  defaultExpanded: boolean,
-  expandStyles: {},
-  collapseStyles: {},
-  collapsedHeight: 0,
-  easing: string,
-  duration: number,
-  onCollapseStart: func,
-  onCollapseEnd: func,
-  onExpandStart: func,
-  onExpandEnd: func,
-});
+const { getCollapseProps, getToggleProps, isExpanded, setExpanded } =
+  useCollapse({
+    isExpanded: boolean,
+    defaultExpanded: boolean,
+    expandStyles: {},
+    collapseStyles: {},
+    collapsedHeight: 0,
+    easing: string,
+    duration: number,
+    onCollapseStart: func,
+    onCollapseEnd: func,
+    onExpandStart: func,
+    onExpandEnd: func,
+  })
 ```
 
 ### `useCollapse` Config