feat: implement upload package

build/builder.js

@@ -14,10 +14,8 @@ const { directory } = require('./library');
 const babelConfig = require('./babel');
 const { minifyConfig } = require('./minification');
 
-function buildWoly() {
-  const name = 'woly';
-
-  return Promise.all([
+const buildPackage = (name) => () =>
+  Promise.all([
     createEsCjs(name, {
       dir: directory(`dist/${name}`),
       file: {
@@ -27,24 +25,12 @@ function buildWoly() {
       inputExtension: 'ts',
     }),
   ]);
-}
 
-function buildCalendar() {
-  const name = 'calendar';
-
-  return Promise.all([
-    createEsCjs(name, {
-      dir: directory(`dist/${name}`),
-      file: {
-        cjs: `${name}.js`,
-        // es: `${name}.mjs`,
-      },
-      inputExtension: 'ts',
-    }),
-  ]);
-}
+const buildWoly = buildPackage('woly');
+const buildCalendar = buildPackage('calendar');
+const buildUpload = buildPackage('upload');
 
-module.exports = { buildWoly, buildCalendar };
+module.exports = { buildWoly, buildCalendar, buildUpload };
 
 const _compatTarget = {
   browsers: [
@@ -56,7 +42,15 @@ const _compatTarget = {
   ],
 };
 
-const externals = ['@woly/calendar', 'react-dom', 'react', 'styled-components', 'woly'];
+const externals = [
+  '@woly/calendar',
+  '@woly/upload',
+  'react-dom',
+  'react',
+  'styled-components',
+  'woly',
+  'react-dropzone',
+];
 
 const extensions = ['.js', '.mjs', '.ts', '.tsx'];
 

build/index.js

@@ -5,7 +5,7 @@ const {
   massCopy,
   // publishScript,
 } = require('./tasks');
-const { buildWoly, buildCalendar } = require('./builder');
+const { buildWoly, buildCalendar, buildUpload } = require('./builder');
 
 const woly = [
   generatePackageJson('woly'),
@@ -25,6 +25,15 @@ const calendar = [
   // publishScript('calendar', '@woly/calendar'),
 ];
 
+const upload = [
+  generatePackageJson('upload'),
+  copyLicense('upload'),
+  massCopy('packages/upload', 'dist/upload', ['README.md']),
+  massCopy('packages/upload', 'dist/upload', ['package.json']),
+  buildUpload,
+  // publishScript('upload', '@woly/upload'),
+];
+
 main();
 
 function main() {
@@ -45,6 +54,7 @@ function main() {
   Promise.all([
     run({ tasks: woly, name: 'woly', config }),
     run({ tasks: calendar, name: 'calendar', config }),
+    run({ tasks: upload, name: 'upload', config }),
   ]);
 }
 

build/packages.js

@@ -99,6 +99,23 @@ const calendar = {
   },
   ...common,
 };
+
+const upload = {
+  name: '@woly/upload',
+  version: versions.upload,
+  description: 'Upload components for Woly React library',
+  ...getModules('upload'),
+  files: getFiles('upload'),
+  keywords: [...keywords, 'upload'],
+  dependencies: {},
+  peerDependencies: {
+    ...dependsPeer,
+    ...dependsOnWoly,
+  },
+  ...common,
+};
+
 calendar.repository.directory = 'packages/calendar';
+upload.repository.directory = 'packages/upload';
 
-module.exports = { woly, calendar };
+module.exports = { woly, calendar, upload };

package.json

@@ -43,6 +43,7 @@
     "@rollup/plugin-url": "^6.0.0",
     "@types/node": "^14.14.25",
     "@types/react": "^17.0.1",
+    "@types/react-dropzone": "^5.1.0",
     "@types/styled-components": "^5.1.7",
     "@types/webpack": "^4.41.26",
     "@typescript-eslint/eslint-plugin": "^4.15.0",
@@ -96,6 +97,7 @@
   "dependencies": {
     "react": "16.14.0",
     "react-dom": "16.14.0",
+    "react-dropzone": "^11.3.2",
     "styled-components": "^5.2.1"
   },
   "config": {

packages/upload/README.md

@@ -0,0 +1,3 @@
+# @woly/upload
+
+@woly/upload

packages/upload/index.ts

@@ -0,0 +1 @@
+export * from '../../src/upload';

packages/upload/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@woly/upload",
+  "description": "Upload components for Woly React library",
+  "main": "upload.js",
+  "types": "upload.d.ts",
+  "typings": "upload.d.ts",
+  "files": [
+    "README.md",
+    "LICENSE",
+    "upload.js",
+    "upload.js.map",
+    "upload.mjs",
+    "upload.mjs.map",
+    "upload.d.ts"
+  ],
+  "keywords": [
+    "component",
+    "components",
+    "design",
+    "library",
+    "react-component",
+    "react",
+    "system",
+    "ui",
+    "woly",
+    "upload"
+  ],
+  "dependencies": {},
+  "peerDependencies": {
+    "react": "^16.11.0",
+    "styled-components": "^5.0.1",
+    "woly": "^0.7.0"
+  },
+  "scripts": {},
+  "author": {
+    "name": "Sergey Sova",
+    "email": "mail@sergeysova.com",
+    "url": "https://sova.dev"
+  },
+  "engines": {
+    "node": ">=8.0.0"
+  },
+  "sideEffects": false,
+  "contributors": [],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/woly-ui/woly",
+    "directory": "packages/upload"
+  },
+  "homepage": "https://github.com/woly-ui/woly",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/woly-ui/woly/issues",
+    "email": "woly@sergeysova.com"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/woly/package.json

@@ -44,7 +44,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/woly-ui/woly",
-    "directory": "packages/calendar"
+    "directory": "packages/woly"
   },
   "homepage": "https://github.com/woly-ui/woly",
   "license": "MIT",

src/ui/atoms/index.ts

@@ -15,4 +15,3 @@ export { Table, Thead, Tbody, Tr, Td, Th } from './table';
 export { Text } from './text';
 export { TextArea } from './text-area';
 export { Tooltip } from './tooltip';
-export { UploadArea } from './upload-area';

src/ui/molecules/index.ts

@@ -3,8 +3,8 @@ export { Checkbox } from './checkbox';
 export { Field } from './field';
 export { InputPassword } from './input-password';
 export { Modal } from './modal';
-export { RadioButton } from './radio-button';
 export { Popover } from './popover';
+export { RadioButton } from './radio-button';
 export { Select } from './select';
 export { Switch } from './switch';
 export { Toast } from './toast';

src/upload/atoms/index.ts

@@ -0,0 +1 @@
+export { UploadArea } from './upload-area';

src/ui/atoms/upload-area/index.tsx → src/upload/atoms/upload-area/index.tsx

@@ -3,29 +3,31 @@ import styled, { StyledComponent } from 'styled-components';
 import { Variant } from 'lib/types';
 
 interface UploadAreaProps {
-  className?: string;
   center?: boolean;
+  className?: string;
   content?: React.ReactNode;
+  disabled?: boolean;
+  focus?: boolean;
 }
 
 const UploadAreaBase: React.FC<UploadAreaProps & Variant> = ({
-  className,
   center = false,
+  className,
   content,
+  focus = false,
   variant = 'default',
 }) => (
-  <div className={className} data-variant={variant} tabIndex={0}>
-    <div data-content data-center={center}>
-      <div data-overlay />
+  <div className={className} data-variant={variant} data-focus={focus}>
+    <div data-content data-position-center={center}>
       {content}
     </div>
+    <div data-overlay />
   </div>
 );
 
 export const UploadArea = styled(UploadAreaBase)`
   --local-border-color: var(--woly-canvas-hover);
   --local-background-color: var(--woly-canvas-disabled);
-
   position: relative;
 
   width: 100%;
@@ -36,17 +38,17 @@ export const UploadArea = styled(UploadAreaBase)`
   border: var(--woly-border-width) dashed var(--local-border-color);
   border-radius: var(--woly-rounding);
 
-  [data-center='true'] {
+  [data-position-center='true'] {
     position: absolute;
     top: 50%;
     left: 50%;
 
     transform: translate(-50%, -50%);
   }
 
-  &:focus {
-    --local-border-color: var(--woly-focus);
-    --local-background-color: rgba(110, 59, 254, 0.05);
+  &[data-focus='true'] {
+    --local-border-color: var(--woly-canvas-active);
+
     outline: none;
 
     [data-overlay] {