@spaced-out/ui-design-system 0.1.30 → 0.1.31

package/.cspell/custom-words.txt

@@ -1,3 +1,4 @@
+amet
 Anant
 argstable
 atleast
@@ -10,6 +11,7 @@ Crespo
 datetime
 DEFAULTTEXT
 dismissable
+dropzone
 eqeqeq
 fbjs
 Fennimore
@@ -20,6 +22,7 @@ Gaurav
 innerref
 interdimensional
 Lipsey
+msword
 Neue
 Nishant
 nofollow
@@ -33,6 +36,7 @@ pocus
 premajor
 preminor
 prepatch
+progressbar
 rgba
 sbdocs
 Stapleton
@@ -46,6 +50,7 @@ tnum
 transclude
 Typeahead
 typeof
+valuenow
 Verda
 xmark
 yourcomponentname

package/.github/workflows/pages.yml

@@ -1,3 +1,6 @@
+# Author: Anant Raj
+# Note: Do not change
+
 # Simple workflow for deploying static content to GitHub Pages
 name: Publish Genesis Design System Storybook to Github Pages
 

package/.github/workflows/publish_to_npm.yml

@@ -42,7 +42,7 @@ jobs:
         uses: actions/setup-node@v2
         with:
           registry-url: https://registry.npmjs.org/
-          node-version: '16'
+          node-version: '18'
 
       # Install dependencies (required by Run tests step)
       - name: Install dependencies

package/.github/workflows/pull_request_checks.yml

@@ -0,0 +1,44 @@
+# Author: Nishant Gaurav
+# Note: Do not change
+
+name: Run Yarn Flow, Lint, and Spell Check
+
+on:
+  pull_request:
+    branches:
+      - master
+    types:
+      - opened
+      - edited
+      - synchronize
+
+jobs:
+  run_yarn_checks:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      # Set up Node.js environment
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          registry-url: https://registry.npmjs.org/
+          node-version: '18'
+
+      # Install project dependencies
+      - name: Install dependencies
+        run: yarn install
+
+      # Run Yarn Flow static type checking
+      - name: Run Yarn Flow
+        run: yarn flow
+
+      # Run spell-checking for documentation or comments
+      - name: Run Yarn Spell Check
+        run: yarn spell-check
+
+      # Run ESLint code linting
+      - name: Run Yarn Lint
+        run: yarn lint:strict

package/.github/workflows/pull_request_semantics_checker.yml

@@ -1,5 +1,6 @@
 # Author: Nishant Gaurav
 # workflow to check for PR names wrt conventional commits, uses a third party action
+
 name: 'Lint PR'
 
 on:

package/.storybook/preview-head.html

@@ -38,7 +38,7 @@
     height: auto;
     margin: 0px;
     padding: 0px;
-    background: white;
+    background: #fafafa;
     color: #606060;
     font-size: 16px;
     text-size-adjust: none;
@@ -117,7 +117,7 @@
     font-family: 'Centra No 2' !important;
   }
 
-  #docs-root .sbdocs {
+  .sbdocs {
     background: #fafafa !important;
   }
 

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.31](https://github.com/spaced-out/ui-design-system/compare/v0.1.30...v0.1.31) (2023-06-16)
+
+
+### Features
+
+* added colorBorderTertiary ([731c25d](https://github.com/spaced-out/ui-design-system/commit/731c25d8996fd94e6c7e52c86fcb16e169b0e187))
+* file upload component useFileUpload hook and lint workflow ([#120](https://github.com/spaced-out/ui-design-system/issues/120)) ([79351a4](https://github.com/spaced-out/ui-design-system/commit/79351a40e6b18c9aa035baccb5cb029de0027514)), closes [#1](https://github.com/spaced-out/ui-design-system/issues/1)
+* hover state for input and its derivatives and textarea ([01db867](https://github.com/spaced-out/ui-design-system/commit/01db8676f9245fda4540abf6e00d671732342f3b))
+* sizing support in modals ([478f4eb](https://github.com/spaced-out/ui-design-system/commit/478f4eba8a07f76c706231f64a35a922fac6558d))
+
+
+### Bug Fixes
+
+* changed borders of input textarea and avatar border to use borderWidthPrimary ([337fad0](https://github.com/spaced-out/ui-design-system/commit/337fad0db3443428da769af17ef461c290417b29))
+* file path fixes ([5563ffc](https://github.com/spaced-out/ui-design-system/commit/5563ffc1b51802a570f423f677ae601c9854dd77))
+* modal documentation fixes ([572b4a6](https://github.com/spaced-out/ui-design-system/commit/572b4a6732eb6d3b73c24c259b8f7b794353452b))
+* placeholder for input, textarea and its derivatives change to colorTextTertiary ([beb6252](https://github.com/spaced-out/ui-design-system/commit/beb62520a19c3f2192875181dd3821d424f67304))
+
 ### [0.1.30](https://github.com/spaced-out/ui-design-system/compare/v0.1.29...v0.1.30) (2023-06-06)
 
 

package/design-tokens/color/app-color.json

@@ -47,6 +47,9 @@
       "secondary": {
         "value": "{baseColor.gray.200.value}"
       },
+      "tertiary": {
+        "value": "{baseColor.gray.250.value}"
+      },
       "danger": {
         "value": "{baseColor.red.500.value}"
       }

package/design-tokens/color/base-color.json

@@ -48,6 +48,9 @@
       "200": {
         "value": "#d1d1d1"
       },
+      "250": {
+        "value": "#AEAEAE"
+      },
       "300": {
         "value": "#939393"
       },

package/design-tokens/size/base-size.json

@@ -54,12 +54,18 @@
     "48": {
       "value": "48px"
     },
+    "50": {
+      "value": "50px"
+    },
     "58": {
       "value": "58px"
     },
     "60": {
       "value": "60px"
     },
+    "70": {
+      "value": "70px"
+    },
     "90": {
       "value": "90px"
     },
@@ -69,6 +75,9 @@
     "110": {
       "value": "110px"
     },
+    "125": {
+      "value": "125px"
+    },
     "140": {
       "value": "140px"
     },
@@ -90,6 +99,9 @@
     "300": {
       "value": "300px"
     },
+    "320": {
+      "value": "320px"
+    },
     "380": {
       "value": "380px"
     },
@@ -105,6 +117,9 @@
     "580": {
       "value": "580px"
     },
+    "640": {
+      "value": "640px"
+    },
     "720": {
       "value": "720px"
     },

package/lib/components/Dialog/Dialog.module.css

@@ -83,5 +83,5 @@
 .dialogFooterActions {
   display: flex;
   gap: spaceSmall;
-  width: 100%;
+  width: sizeFluid;
 }

package/lib/components/FileUpload/FileUpload.js

@@ -0,0 +1,195 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FileUpload = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useFileUpload = require("../../hooks/useFileUpload");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button");
+var _Icon = require("../Icon");
+var _LinearLoader = require("../LinearLoader");
+var _Truncate = require("../Truncate");
+var _FileUploadModule = _interopRequireDefault(require("./FileUpload.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const FileUploadBase = (props, ref) => {
+  const {
+    classNames,
+    label = 'Upload File',
+    disabled = false,
+    instruction = 'Drag and drop or click to upload',
+    draggingInstruction = 'Drop here to start uploading..',
+    error = false,
+    required = false,
+    secondaryInstruction = '',
+    maxSize,
+    accept,
+    onValidFilesDrop,
+    onRejectedFilesDrop,
+    onFileClear,
+    onFileRefreshClick,
+    maxFiles = 1
+  } = props;
+
+  // Get file upload state from useFileUpload hook
+  const {
+    validFiles,
+    rejectedFiles,
+    isDragActive,
+    getRootProps,
+    shouldAcceptFiles,
+    getInputProps,
+    handleFileClear,
+    moveFileToProgress,
+    moveFileToSuccess,
+    moveFileToReject,
+    setShowReUpload
+  } = (0, _useFileUpload.useFileUpload)({
+    maxFiles,
+    maxSize,
+    accept,
+    disabled,
+    onValidFilesDrop,
+    onRejectedFilesDrop,
+    onFileClear
+  });
+
+  // Expose file upload actions to parent component
+  React.useImperativeHandle(ref, () => ({
+    moveFileToProgress,
+    moveFileToSuccess,
+    moveFileToReject,
+    setShowReUpload,
+    validFiles,
+    rejectedFiles,
+    files: [...validFiles, ...rejectedFiles]
+  }));
+
+  // Merge valid and rejected files
+  const files = [...validFiles, ...rejectedFiles];
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_FileUploadModule.default.wrapper, classNames?.wrapper)
+  }, Boolean(label) && /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadModule.default.label
+  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, label), required && /*#__PURE__*/React.createElement("span", {
+    className: _FileUploadModule.default.required
+  }, '*')), /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({
+    disabled: disabled || !shouldAcceptFiles
+  }, getRootProps(), {
+    className: (0, _classify.default)(_FileUploadModule.default.dropzone, {
+      [_FileUploadModule.default.disabled]: disabled || !shouldAcceptFiles,
+      [_FileUploadModule.default.dragActive]: isDragActive,
+      [_FileUploadModule.default.error]: error
+    })
+  }), /*#__PURE__*/React.createElement("input", getInputProps()), /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_FileUploadModule.default.instruction, classNames?.instruction)
+  }, isDragActive ? draggingInstruction : instruction), /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_FileUploadModule.default.secondaryInstruction, classNames?.secondaryInstruction)
+  }, secondaryInstruction)), files.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadModule.default.files
+  }, files.map(file => /*#__PURE__*/React.createElement(React.Fragment, {
+    key: file.id
+  }, /*#__PURE__*/React.createElement(FileBlock, {
+    file: file,
+    onFileRefreshClick: onFileRefreshClick,
+    handleFileClear: handleFileClear
+  })))));
+};
+const FileBlock = _ref => {
+  let {
+    file,
+    onFileRefreshClick,
+    handleFileClear
+  } = _ref;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadModule.default.file
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadModule.default.fileInfo
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadModule.default.fileNameBlock
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadModule.default.icon
+  }, /*#__PURE__*/React.createElement(FileStatusIcon, {
+    file: file
+  })), /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadModule.default.fileName
+  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, file.file.name))), file.success && !!file.successMessage && /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadModule.default.fileSuccess
+  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, file.successMessage)), file.reject && !!file.rejectReason && /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadModule.default.fileError
+  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, file.rejectReason)), !!file.progress && /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadModule.default.progress
+  }, /*#__PURE__*/React.createElement(_LinearLoader.LinearLoader, {
+    size: "small",
+    value: file.progress === 'indeterminate' ? 0 : file.progress,
+    indeterminate: file.progress === 'indeterminate'
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadModule.default.rightSection
+  }, file.showReUpload && /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadModule.default.rightBlock
+  }, /*#__PURE__*/React.createElement(_Icon.ClickableIcon, {
+    name: "refresh",
+    size: "small",
+    onClick: () => onFileRefreshClick?.(file)
+  })), /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadModule.default.rightBlock
+  }, /*#__PURE__*/React.createElement(_Icon.CloseIcon, {
+    size: "small",
+    onClick: () => handleFileClear?.(file.id)
+  })))));
+};
+
+// This function returns the status of a file
+const getFileStatus = file => {
+  if (file.progress) {
+    return 'progress';
+  }
+  if (file.success) {
+    return 'success';
+  }
+  if (file.reject) {
+    return 'error';
+  }
+  return 'default';
+};
+
+// This component renders the status icon for a file
+const FileStatusIcon = _ref2 => {
+  let {
+    file
+  } = _ref2;
+  const status = getFileStatus(file);
+  switch (status) {
+    case 'progress':
+      return /*#__PURE__*/React.createElement(_Icon.Icon, {
+        size: "small",
+        name: "loader",
+        color: "tertiary"
+      });
+    case 'success':
+      return /*#__PURE__*/React.createElement(_Icon.Icon, {
+        size: "small",
+        name: "check",
+        color: "success"
+      });
+    case 'error':
+      return /*#__PURE__*/React.createElement(_Icon.Icon, {
+        size: "small",
+        name: "circle-exclamation",
+        color: "danger",
+        type: "solid"
+      });
+    default:
+      return /*#__PURE__*/React.createElement(_Icon.Icon, {
+        size: "small",
+        name: "check",
+        color: "success"
+      });
+  }
+};
+const FileUpload = /*#__PURE__*/React.forwardRef(FileUploadBase);
+exports.FileUpload = FileUpload;