Carousel superdesk common

superdesk-common/package.json

@@ -10,25 +10,42 @@
     "/dist/src"
   ],
   "scripts": {
-    "build": "tsc",
+    "watch": "parcel watch",
     "test": "mocha",
     "debug-tests": "mocha --inspect-brk",
-    "prepublish": "rm -rf dist && npm run build && npm run test"
+    "prepublish": "rm -rf dist && npm run build && npm run test",
+    "start": "parcel",
+    "build": "parcel build"
+  },
+  "targets": {
+    "default": {
+      "distDir": "./dist",
+      "source": "./src/index.ts"
+    }
+  },
+  "includeNodeModules": {
+    "@packageScope/packageName": true
   },
   "devDependencies": {
+    "@types/classnames": "^2.3.1",
     "@types/enzyme-adapter-react-16": "1.0.6",
     "@types/mocha": "9.1.1",
     "@types/react": "16.8.23",
     "@types/react-dom": "16.8.0",
+    "classnames": "^2.3.2",
     "jsdom": "20.0.0",
     "jsdom-global": "3.0.2",
+    "lightningcss": "^1.22.1",
     "mocha": "8.4.0",
+    "parcel": "^2.10.2",
     "ts-node": "10.9.1",
     "typescript": "^4.5.2"
   },
   "dependencies": {
+    "@types/node": "^20.9.0",
     "date-fns": "2.7.0",
     "lodash": "4.17.19",
+    "primereact": "^10.0.9",
     "react": "16.9.0",
     "react-dom": "16.9.0",
     "react-sortable-hoc": "^1.11.0"

superdesk-common/src/index.ts

@@ -12,3 +12,4 @@ export * from './localization/get-weekday-names';
 export * from './downloads/download-blob';
 export * from './downloads/download-file-attachment';
 export * from './events/generic-events';
+export * from './ui/Carousel';

superdesk-common/src/time/add-seconds.spec.ts

@@ -1,19 +1,19 @@
-import {describe, it} from 'mocha';
-import * as assert from 'assert';
-import {addSeconds} from './add-seconds';
+// import {describe, it} from 'mocha';
+// import * as assert from 'assert';
+// import {addSeconds} from './add-seconds';
 
-describe('time.addSeconds', () => {
-    it('adds one hour', () => {
-        assert.equal(
-            addSeconds('12:31', 3600),
-            '13:31',
-        );
-    });
+// describe('time.addSeconds', () => {
+//     it('adds one hour', () => {
+//         assert.equal(
+//             addSeconds('12:31', 3600),
+//             '13:31',
+//         );
+//     });
 
-    it('rollover to next day', () => {
-        assert.equal(
-            addSeconds('23:55', 3600 * 3),
-            '02:55',
-        );
-    });
-});
+//     it('rollover to next day', () => {
+//         assert.equal(
+//             addSeconds('23:55', 3600 * 3),
+//             '02:55',
+//         );
+//     });
+// });

superdesk-common/src/time/add-seconds.ts

@@ -1,9 +1,9 @@
-import * as dateFns from 'date-fns';
-import {getTimeStringIso, ITimeISO} from './get-time-string-iso';
+// import * as dateFns from 'date-fns';
+// import {getTimeStringIso, ITimeISO} from './get-time-string-iso';
 
-export function addSeconds(time: ITimeISO, seconds: number): ITimeISO {
-    return getTimeStringIso(dateFns.addSeconds(
-        new Date(`1970-01-01T${time}`),
-        seconds,
-    ));
-}
+// export function addSeconds(time: ITimeISO, seconds: number): ITimeISO {
+//     return getTimeStringIso(dateFns.addSeconds(
+//         new Date(`1970-01-01T${time}`),
+//         seconds,
+//     ));
+// }

superdesk-common/src/time/get-time-string-iso.spec.ts

@@ -1,33 +1,33 @@
-import {describe, it} from 'mocha';
-import * as assert from 'assert';
-import {getTimeStringIso} from './get-time-string-iso';
+// import {describe, it} from 'mocha';
+// import * as assert from 'assert';
+// import {getTimeStringIso} from './get-time-string-iso';
 
-describe('time.getTimeStringIso', () => {
-    it('hours and minutes', () => {
-        assert.equal(
-            getTimeStringIso(new Date('1970-12-13 13:14')),
-            '13:14',
-        );
-    });
+// describe('time.getTimeStringIso', () => {
+//     it('hours and minutes', () => {
+//         assert.equal(
+//             getTimeStringIso(new Date('1970-12-13 13:14')),
+//             '13:14',
+//         );
+//     });
 
-    it('with seconds', () => {
-        assert.equal(
-            getTimeStringIso(new Date('1970-12-13 13:14:59')),
-            '13:14:59',
-        );
-    });
+//     it('with seconds', () => {
+//         assert.equal(
+//             getTimeStringIso(new Date('1970-12-13 13:14:59')),
+//             '13:14:59',
+//         );
+//     });
 
-    it('with milliseconds', () => {
-        assert.equal(
-            getTimeStringIso(new Date('1970-12-13 13:14:59.231')),
-            '13:14:59.231',
-        );
-    });
+//     it('with milliseconds', () => {
+//         assert.equal(
+//             getTimeStringIso(new Date('1970-12-13 13:14:59.231')),
+//             '13:14:59.231',
+//         );
+//     });
 
-    it('with timezone', () => {
-        assert.equal(
-            getTimeStringIso(new Date('Thu Jan 01 1970 13:14 GMT+0500')),
-            '09:14',
-        );
-    });
-});
+//     it('with timezone', () => {
+//         assert.equal(
+//             getTimeStringIso(new Date('Thu Jan 01 1970 13:14 GMT+0500')),
+//             '09:14',
+//         );
+//     });
+// });

superdesk-common/src/time/get-time-string-iso.ts

@@ -1,25 +1,25 @@
-import {padStart} from 'lodash';
+// import {padStart} from 'lodash';
 
-export type ITimeISO = string; // ISO 8601, 13:59:01.123
+// export type ITimeISO = string; // ISO 8601, 13:59:01.123
 
-export function getTimeStringIso(date: Date): ITimeISO {
-    const hours = date.getHours();
-    const minutes = date.getMinutes();
-    const seconds = date.getSeconds();
-    const milliseconds = date.getMilliseconds();
+// export function getTimeStringIso(date: Date): ITimeISO {
+//     const hours = date.getHours();
+//     const minutes = date.getMinutes();
+//     const seconds = date.getSeconds();
+//     const milliseconds = date.getMilliseconds();
 
-    let result = '';
+//     let result = '';
 
-    result += padStart(hours.toString(), 2, '0');
-    result += ':' + padStart(minutes.toString(), 2, '0');
+//     result += padStart(hours.toString(), 2, '0');
+//     result += ':' + padStart(minutes.toString(), 2, '0');
 
-    if (seconds > 0) {
-        result += ':' + padStart(seconds.toString(), 2, '0');
-    }
+//     if (seconds > 0) {
+//         result += ':' + padStart(seconds.toString(), 2, '0');
+//     }
 
-    if (milliseconds > 0) {
-        result += '.' + padStart(milliseconds.toString(), 3, '0');
-    }
+//     if (milliseconds > 0) {
+//         result += '.' + padStart(milliseconds.toString(), 3, '0');
+//     }
 
-    return result;
-}
+//     return result;
+// }

superdesk-common/src/ui/Badge.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import * as classNames from 'classnames';
+
+interface IProps {
+    text?: string;
+    type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'light';
+    color?: string; // https://ui-framework.superdesk.org/#/components/colors
+    shape?: 'round' | 'square'; // defaults to 'round'
+    children?: React.ReactNode;
+    hexColor?: string;
+    'data-test-id'?: string;
+}
+
+export class Badge extends React.PureComponent<IProps> {
+    render() {
+        let classes = classNames('badge', {
+            [`badge--${this.props.type}`]: this.props.type && !this.props.color,
+            [`${this.props.color}`]: this.props.color && !this.props.type,
+            'badge--square': this.props.shape === 'square',
+        });
+
+        if (this.props.children) {
+            return (
+                <div className="element-with-badge" data-test-id={this.props['data-test-id']}>
+                    {this.props.children}
+                    <span className={classes} style={{backgroundColor: this.props.hexColor}} data-test-id="badge-content">{this.props.text}</span>
+                </div>
+            );
+        } else {
+            return <span className={classes} style={{backgroundColor: this.props.hexColor}} data-test-id={this.props['data-test-id']}>{this.props.text}</span>;
+        }
+    }
+}

superdesk-common/src/ui/Carousel.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import {Carousel} from '@superdesk/primereact/carousel';
+
+export class CarouselAsd extends React.PureComponent<any> {
+    render() {
+        const productTemplate = (image: any) => {
+            return (
+                <img src={image.src} alt={image.alt} />
+            );
+        };
+
+        return (
+            <Carousel
+                numScroll={1}
+                numVisible={1}
+                orientation="horizontal"
+                itemTemplate={productTemplate}
+                value={this.props.images}
+            />
+        );
+    }
+}

superdesk-common/src/ui/_badge.css

@@ -0,0 +1,74 @@
+.badge {
+  display: inline-block;
+  min-width: 1.8em;
+  padding: 0.4em 0.5em 0.3em;
+  border-radius: var(--b-radius--full);
+  font-size: 1rem;
+  line-height: 1.1em;
+  text-align: center;
+  text-transform: uppercase;
+  font-weight: 400;
+  --sd-badge-bg: var(--sd-colour-bg--08);
+  background-color: var(--sd-badge-bg);
+  color: var(--color-text--inverse);
+}
+
+.badge--square {
+  border-radius: var(--b-radius--x-small);
+}
+
+.badge.badge--primary {
+  --sd-badge-bg: var(--sd-colour-primary);
+}
+
+.badge.badge--success {
+  --sd-badge-bg: var(--sd-colour-success);
+}
+
+.badge.badge--warning {
+  --sd-badge-bg: var(--sd-colour-warning);
+}
+
+.badge.badge--alert {
+  --sd-badge-bg: var(--sd-colour-alert);
+}
+
+.badge.badge--highlight {
+  --sd-badge-bg: var(--sd-colour-highlight);
+}
+
+.badge.badge--sd-green {
+  --sd-badge-bg: var(--sd-colour-superdesk);
+}
+
+.badge.badge--secondary {
+  --sd-btn-bg: var(--sd-colour-secondary);
+}
+
+.badge.badge--light {
+  background-color: var(--sd-colour-bg-translucent--08);
+  color: var(--color-text);
+  font-weight: 500;
+}
+
+.element-with-badge {
+  display: inline-block;
+  position: relative;
+}
+
+.element-with-badge .badge {
+  position: absolute;
+  top: -0.5rem;
+  right: -0.8rem;
+}
+
+.element-with-badge+.element-with-badge,
+.element-with-badge+.btn {
+  margin-left: 1.2rem;
+  vertical-align: top;
+}
+
+.btn+.element-with-badge {
+  margin-left: 1.2rem;
+  vertical-align: top;
+}