Initial commit

.eslintrc.json

@@ -0,0 +1,58 @@
+{
+  "parser": "babel-eslint",
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true,
+    "commonjs": true,
+    "jest": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:jsx-a11y/recommended"
+  ],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2020,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "jsx-a11y", "react-hooks", "import"],
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "react/prop-types": 0,
+    "react/display-name": 0,
+    "jsx-a11y/click-events-have-key-events": 0,
+    "jsx-a11y/no-static-element-interactions": 0,
+    "react/function-component-definition": [
+      2,
+      {
+        "namedComponents": "function-declaration",
+        "unnamedComponents": "arrow-function"
+      }
+    ],
+    "import/order": [
+      2,
+      {
+        "newlines-between": "never",
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index"
+        ]
+      }
+    ],
+    "import/no-useless-path-segments": [
+      2,
+      {
+        "noUselessIndex": true
+      }
+    ]
+  }
+}

.gitignore

@@ -0,0 +1,24 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# builds
+build
+dist
+.rpt2_cache
+coverage
+
+# misc
+.DS_Store
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.idea/

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}

.storybook/main.js

@@ -0,0 +1,20 @@
+const custom = require('../webpack.config');
+
+module.exports = {
+  stories: ['../src/**/*.stories.(js|mdx)'],
+  webpackFinal: (config) => {
+    const oldRules = config.module.rules;
+    config.module.rules = [
+      ...custom.module.rules,
+      ...oldRules.filter((item) => /(story|md)/.test(item.test.toString())),
+    ];
+
+    config.resolve = custom.resolve;
+    return config;
+  },
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-storysource',
+    'storybook-addon-react-docgen',
+  ],
+};

.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import theme from './theme';
+
+addons.setConfig({
+  theme,
+});

.storybook/preview.js

@@ -0,0 +1,62 @@
+import React, { Fragment } from 'react';
+import styled, { createGlobalStyle } from 'styled-components';
+
+const GlobalStyle = createGlobalStyle`
+    html {
+      font-size: 10px;
+    }
+    
+    body {
+      font-size: 1.4rem;
+      font-family: Roboto, sans-serif;
+      color: #141414;
+    }
+    
+    * {
+      box-sizing: border-box;
+      padding: 0;
+      margin: 0;
+      outline: none;
+    }
+    
+    button {
+      outline: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 500;
+      border: none;
+      cursor: pointer;
+      border-radius: 0.5rem;
+      padding: 0 1.5rem;
+      background-color: #095d25;
+      color: #fff;
+      height: 3.5rem;
+      &:hover {
+        background-color: #126e2f;
+      }
+    }
+`;
+
+const Container = styled.div`
+  margin: 0 auto;
+  width: 300px;
+  height: 300px;
+  padding: 20px;
+  border-radius: 10px;
+  background-color: #fffcfc;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+`;
+
+export const decorators = [
+  (Story) => (
+    <Fragment>
+      <Container>
+        <Story />
+      </Container>
+      <GlobalStyle />
+    </Fragment>
+  ),
+];

.storybook/theme.js

@@ -0,0 +1,7 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+  base: 'light',
+
+  brandTitle: 'react-collapse',
+});

.travis.yml

@@ -0,0 +1,18 @@
+language: node_js
+
+node_js:
+  - stable
+
+addons:
+  apt:
+    packages:
+      - libgconf-2-4
+
+install:
+  - npm install
+
+script:
+  - npm run test -- --coverage
+
+after_script:
+  - COVERALLS_REPO_TOKEN=$coveralls_repo_token npm run coveralls

README.md

@@ -0,0 +1,146 @@
+# Collapse React Component
+
+[![NPM](https://img.shields.io/npm/v/@kaprisa57/react-collapse/.svg)](https://www.npmjs.com/package/@kaprisa57/react-collapse/) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![Coverage Status](https://coveralls.io/repos/github/kseniya57/react-collapse/badge.svg?branch=main)](https://coveralls.io/github/kseniya57/react-collapse?branch=main)
+
+- [Docs](https://kseniya57.github.io/react-collapse/?path=/docs/collapse--playground)
+- [Playground](https://kseniya57.github.io/react-collapse/?path=/story/collapse--playground)
+
+## Install
+
+```bash
+npm install --save @kaprisa57/react-collapse
+```
+
+```bash
+yarn add @kaprisa57/react-collapse
+```
+
+### See props in [Docs](https://kseniya57.github.io/react-collapse/?path=/docs/collapse--playground)
+
+
+### Basic Example
+
+```jsx
+import React from 'react'
+import Collapse from '@kaprisa57/react-collapse'
+
+function Example() {
+  return <Collapse>
+    <Collapse.Header>Open</Collapse.Header>
+    <Collapse.Body>:)</Collapse.Body>
+  </Collapse>
+}
+```
+
+### Header Function
+
+```jsx
+import React, { Fragment } from 'react'
+import Collapse from '@kaprisa57/react-collapse'
+
+function Example() {
+  return <Collapse>
+      <Header>
+        {({ open, close, toggle }) => (
+          <Fragment>
+            <button onClick={open}>Open</button>
+            <button onClick={close}>Close</button>
+            <button onClick={toggle}>Toggle</button>
+          </Fragment>
+        )}
+      </Header>
+      <Collapse.Body>:)</Collapse.Body>
+  </Collapse>
+}
+```
+
+### Body Function
+
+```jsx
+import React from 'react'
+import Collapse from '@kaprisa57/react-collapse'
+
+function Example() {
+  return <Collapse>
+    <Collapse.Header>Open</Collapse.Header>
+    <Collapse.Body>
+        {({ close }) => (
+            <Button onClick={close}>Close</Button>
+        )}
+    </Collapse.Body>
+  </Collapse>
+}
+```
+
+### Styling
+
+```jsx
+import React from 'react'
+import styled from 'styled-components';
+import Collapse from '@kaprisa57/react-collapse'
+
+const Header = styled(Collapse.Header)`
+  padding: 10px;
+  line-height: 20px;
+  cursor: pointer;
+  box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;
+  width: 100%;
+`;
+
+const Body = styled(Collapse.Body)`
+  box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;
+  padding: 20px;
+  border-bottom-right-radius: 10px;
+  border-bottom-left-radius: 10px;
+  width: 100%;
+`;
+
+const Content = styled.div`
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+function Example() {
+  return <Collapse>
+    <Header>Open</Header>
+    <Body>
+        <Content>:)</Content>
+    </Body>
+  </Collapse>
+}
+```
+
+### Custom Animation
+
+```jsx
+import React from 'react'
+import Collapse from '@kaprisa57/react-collapse'
+
+function Example() {
+  return  <Collapse>
+     <Collapse.Header>Open</Collapse.Header>
+     <Collapse.Body animation={{
+       initial: {
+         opacity: 0,
+       },
+       animate: {
+         opacity: 1
+       },
+       exit: {
+         opacity: 0
+       },
+       transition: { duration: 0.1, ease: [0.3, 0.6, 0.3, 0.2] },
+     }}>
+       :)
+     </Collapse.Body>
+  </Collapse>
+}
+```
+
+### See more details in [storybook](https://kseniya57.github.io/react-collapse/?path=/docs/collapse--playground)
+
+## License
+
+MIT © [kaprisa57@gmail.com](https://github.com/kaprisa57@gmail.com)

jest.config.js

@@ -0,0 +1,13 @@
+const config = require('kcd-scripts/jest');
+
+module.exports = {
+  ...config,
+  coverageThreshold: {
+    global: {
+      branches: 90,
+      functions: 90,
+      lines: 90,
+      statements: 90,
+    },
+  },
+};

jsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "allowSyntheticDefaultImports": false,
+    "baseUrl": "./src",
+    "paths": {
+      "*": ["src/*"]
+    }
+  },
+  "exclude": ["node_modules", "public", "build"]
+}