Initial commit

.eslintrc.json

@@ -0,0 +1,56 @@
+{
+  "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,
+    "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,16 @@
+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/manager.js

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

.storybook/preview.js

@@ -0,0 +1,52 @@
+import React, { Fragment } from 'react';
+import { 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: #580B9E;
+      color: #FFFFFF;
+      height: 3.5rem;
+      &:hover {
+        background-color: #9552D4;
+      }
+    }
+`;
+
+export const parameters = {
+  layout: 'centered',
+};
+
+export const decorators = [
+  (Story) => (
+    <Fragment>
+      <Story />
+      <GlobalStyle />
+    </Fragment>
+  ),
+];

.storybook/theme.js

@@ -0,0 +1,37 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+  base: 'light',
+
+  colorPrimary: '#580B9E',
+  colorSecondary: '#14B9E4',
+
+  // UI
+  appBg: '#F9F2FF',
+  appContentBg: '#F9F2FF',
+  appBorderColor: '#B4B4B4',
+  appBorderRadius: 4,
+
+  // Typography
+  fontBase: '"Roboto", sans-serif',
+  fontCode: 'monospace',
+
+  // Text colors
+  textColor: '#14113C',
+  textInverseColor: '#FFFFFF',
+
+  // Toolbar default and active colors
+  barTextColor: '#FFFFFF',
+  barSelectedColor: '#F9F2FF',
+  barBg: '#580B9E',
+
+  // Form colors
+  inputBg: '#FFFFFF',
+  inputBorder: '#B4B4B4',
+  inputTextColor: '#313131',
+  inputBorderRadius: 5,
+
+  brandTitle: 'IDUI',
+  brandUrl: 'https://github.com/id-ui',
+  brandImage: 'https://avatars0.githubusercontent.com/u/75687767?s=200&v=4',
+});

.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

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 id-ui
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,89 @@
+# Sheet React Component
+
+[![NPM](https://img.shields.io/npm/v/@idui/react-sheet.svg)](https://www.npmjs.com/package/@idui/react-sheet/)
+[![Size](https://img.shields.io/bundlephobia/min/@idui/react-sheet)](https://www.npmjs.com/package/@idui/react-sheet)
+[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+[![Coverage Status](https://coveralls.io/repos/github/id-ui/react-sheet/badge.svg?branch=main)](https://coveralls.io/github/id-ui/react-sheet?branch=main)
+[![LICENSE](https://img.shields.io/github/license/id-ui/react-sheet)](https://github.com/id-ui/react-sheet/blob/main/LICENSE)
+
+- [Docs](https://id-ui.github.io/react-sheet/?path=/docs/sheet--playground)
+- [Playground](https://id-ui.github.io/react-sheet/?path=/story/sheet--playground)
+
+## Install
+
+```bash
+npm install --save @idui/react-sheet
+```
+
+```bash
+yarn add @idui/react-sheet
+```
+
+### Advantages
+- can be resizable
+- uses styled-components
+- has 4 different placements (bottom, top, right, left)
+- can be controlled by children function
+- can be closed by content function
+
+
+### See props in [Docs](https://id-ui.github.io/react-sheet/?path=/docs/sheet--playground)
+
+
+### Basic Example
+
+```jsx
+import React from 'react'
+import Sheet from '@idui/react-sheet'
+
+function Example() {
+    return <Sheet 
+        content={<span>Sheet Content</span>}
+    >
+        <button>Open Sheet</button>
+    </Sheet>
+}
+```
+
+### Resizable Sheet
+
+```jsx
+import React from 'react'
+import Sheet from '@idui/react-sheet'
+
+function Example() {
+    return <Sheet 
+        content={<span>Sheet Content</span>}
+        resizable
+        onResize={(size) => console.log(`New sheet size = ${size}px`)}
+    >
+        <button>Open Sheet</button>
+    </Sheet>
+}
+```
+
+### Controlled isOpen state
+
+```jsx
+import React from 'react'
+import Sheet from '@idui/react-sheet'
+
+function Example() {
+    return <Sheet 
+        content={({close}) => <button onClick={close}>close</button>}
+        resizable
+    >
+        {({open, close, toggle}) => <div>
+            <button onClick={open}>open</button>
+            <button onClick={close}>close</button>
+            <button onClick={toggle}>toggle</button>
+        </div>}
+    </Sheet>
+}
+```
+
+### See more details in [storybook](https://id-ui.github.io/react-sheet/?path=/docs/sheet--playground)
+
+## License
+
+MIT © [kaprisa57@gmail.com](https://github.com/id-ui)

babel.config.json

@@ -0,0 +1,10 @@
+{
+  "plugins": [
+    [
+      "babel-plugin-styled-components",
+      {
+        "namespace": "idui-sheet"
+      }
+    ]
+  ]
+}

jest.config.js

@@ -0,0 +1,13 @@
+const config = require('kcd-scripts/jest');
+
+module.exports = {
+  ...config,
+  coverageThreshold: {
+    global: {
+      branches: 85,
+      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"]
+}