Merge v3 into master (#41)

* Commit new version!

* v3.0.0-2

* improve storybook

* try to fix type exports

* v3.0.0-3

* add missing warning dependency

* v3.0.0-4

* adding cypress, removing some jest tests

* update readme with directions to v2 docs

Co-authored-by: Rogin Farrer <rfarrer@Rogins-MacBook-Pro.local>

.gitignore

@@ -1,6 +1,5 @@
+*.log
+.DS_Store
 node_modules
+.cache
 dist
-.docz/
-.vscode/
-coverage
-.eslintcache

.storybook/config.js

@@ -0,0 +1 @@
+import 'cypress-storybook/react';

.storybook/main.js

@@ -0,0 +1,29 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.(ts|tsx)'],
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-a11y',
+    '@storybook/addon-storysource',
+  ],
+  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');
+
+    return config;
+  },
+};

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Rogin Farrer
+Copyright (c) 2019-2020 Rogin Farrer
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,13 +1,16 @@
-# React-Collapsed (useCollapse) 🙈
+# react-collapsed (useCollapse)
 
-A tiny (< 2kb) custom hook for creating flexible and accessible expand/collapse components in React.
+A custom hook for creating flexible and accessible expand/collapse components in React.
+
+## v3
+
+This master branch now reflects the development of the next major release of this library. If you're looking for the latest stable source code, [head over to the v2 branch](https://github.com/roginfarrer/react-collapsed/tree/v2).
 
 ## Features
 
 - Handles the height of animations of your elements, `auto` included!
 - You control the UI - `useCollapse` provides the necessary props, you control everything else.
 - Built with accessibility in mind - no need to worry if your collapse/expand component is accessible, since this takes care of it for you!
-- Small footprint (< 2kb gzipped)
 - No animation framework required! Simply powered by CSS animations
 
 ## Demo
@@ -17,9 +20,9 @@ A tiny (< 2kb) custom hook for creating flexible and accessible expand/collapse
 ## Installation
 
 ```bash
-$ yarn add react-collapsed
+$ yarn add react-collapsed@next
 # or
-$ npm i react-collapsed
+$ npm i react-collapsed@next
 ```
 
 ## Usage
@@ -31,7 +34,7 @@ import React from 'react';
 import useCollapse from 'react-collapsed';
 
 function Demo() {
-  const {getCollapseProps, getToggleProps, isOpen} = useCollapse();
+  const { getCollapseProps, getToggleProps, isOpen } = useCollapse();
 
   return (
     <Fragment>
@@ -45,12 +48,12 @@ function Demo() {
 ### Control it yourself
 
 ```js
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 import useCollapse from 'react-collapsed';
 
 function Demo() {
   const [isOpen, setOpen] = useState(false);
-  const {getCollapseProps, getToggleProps} = useCollapse({isOpen});
+  const { getCollapseProps, getToggleProps } = useCollapse({ isOpen });
 
   return (
     <Fragment>

cypress.json

@@ -0,0 +1,3 @@
+{
+  "baseUrl": "http://localhost:6006"
+}

cypress/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "plugins": ["cypress"],
+  "env": {
+    "cypress/globals": true
+  }
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/example-spec.js

@@ -0,0 +1,49 @@
+import 'cypress-storybook/cypress';
+
+describe('My First Test', function() {
+  it('Does not do much!', function() {
+    expect(true).to.equal(true);
+  });
+});
+
+describe('My First Test', function() {
+  it('Does not do much!', function() {
+    expect(true).to.equal(false);
+  });
+});
+
+describe('My First Test', function() {
+  it('clicks the link "type"', function() {
+    cy.visit('https://example.cypress.io');
+
+    cy.contains('type').click();
+  });
+});
+
+describe('RC', () => {
+  // Note the use of `before`
+  before(() => {
+    // Visit the storybook iframe page once per file
+    cy.visitStorybook();
+  });
+
+  // Note the use of `beforeEach`
+  beforeEach(() => {
+    // The first parameter is the category. This is the `title` in CSF or the value in `storiesOf`
+    // The second parameter is the name of the story. This is the name of the function in CSF or the value in the `add`
+    // This does not refresh the page, but will unmount any previous story and use the Storybook Router API to render a fresh new story
+    cy.loadStory('React-Collapsed', 'Uncontrolled');
+  });
+
+  it('toggles open and close the panel', () => {
+    cy.contains('Close').should('exist');
+    cy.contains('Open').should('not.exist');
+    cy.contains('In the morning').should('be.visible');
+
+    cy.contains('Close').click();
+
+    cy.contains('Close').should('not.exist');
+    cy.contains('Open').should('exist');
+    cy.contains('In the morning').should('not.be.visible');
+  });
+});