remove toolbox.duration and symphony env from duration component

.bitmap

@@ -459,6 +459,12 @@
         "mainFile": "index.tsx",
         "rootDir": "src/themes/theme-provider"
     },
+    "time/duration": {
+        "scope": "teambit.base-ui",
+        "version": "0.1.0",
+        "mainFile": "index.ts",
+        "rootDir": "src/components/time/duration"
+    },
     "utils/composer": {
         "scope": "teambit.base-ui",
         "version": "1.0.0",

src/components/time/duration/duration.compositions.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Duration } from './duration';
+
+export const BasicDuration = () => {
+	return <Duration time={2000} />;
+};
+
+export const WithHours = () => {
+	const hours = 240 * 60 * 60 * 1000;
+	return <Duration time={hours} />;
+};

src/components/time/duration/duration.docs.mdx

@@ -0,0 +1,24 @@
+---
+description: A component for rendering time durations.
+labels: ['time', 'duration', 'react', 'formatting']
+---
+
+import { Duration as TimeDuration } from '@teambit/toolbox.date.duration';
+import { Duration } from './duration';
+
+A component for rendering time durations.
+
+## Render duration from milliseconds.
+```tsx live=true
+() => {
+  return <Duration time={3600} />;
+}
+```
+
+## Render duration from minutes using the `Duration` module.
+```tsx live=true
+() => {
+  const durationMs = 240 * 60 * 1000;
+  return <Duration time={durationMs} />;
+}
+```

src/components/time/duration/duration.spec.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { BasicDuration, WithHours } from './duration.compositions';
+
+describe('Duration', () => {
+  it('should render the duration as text', async () => {
+    const { findByText } = render(<BasicDuration />);
+    const element = await findByText('00:00:02');
+    expect(element).toBeTruthy();
+  });
+
+  it('should render the duration with hours', async () => {
+    const { findByText } = render(<WithHours />);
+    const element = await findByText('240:00:00');
+    expect(element).toBeTruthy();    
+  });
+});

src/components/time/duration/duration.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+// @ts-ignore
+import TimeDuration from 'duration';
+
+export type DurationProps = {
+	/**
+	 * time of duration in milliseconds.
+	 * can be either a number representing milliseconds or
+	 * a `Duration` instance of the `teambit.toolbox/date/duration` component.
+	 */
+	time: number;
+};
+
+export function Duration({ time }: DurationProps) {
+	// @ts-ignore
+	const duration = new TimeDuration(new Date(0), new Date(time));
+
+	const totalHours = pad(duration.hours);
+	const minutes = pad(duration.minute);
+	const seconds = pad(duration.second);
+	const timeString = `${totalHours}:${minutes}:${seconds}`;
+
+	return <span>{timeString}</span>;
+}
+
+function pad(num: number, count = 2) {
+	return num.toString().padStart(count, '0');
+}

src/components/time/duration/index.ts

@@ -0,0 +1,2 @@
+export { Duration } from './duration';
+export type { DurationProps } from './duration';

workspace.jsonc

@@ -40,6 +40,7 @@
         "@types/url-parse": "1.4.3",
         "classnames": "^2.2.6",
         "core-js": "3.7.0",
+        "duration": "0.2.2",
         "graphql-request": "3.4.0",
         "graphql": "15.5.0",
         "javascript-time-ago": "^2.0.13",