Fix circular dependency and remove absolute imports

.circleci/config.yml

@@ -14,6 +14,7 @@ jobs:
       - run: echo "always-auth=true" >> ~/.npmrc
       - run: yarn
       - run: yarn lint
+      - run: yarn check-circular
       # - run: yarn test-once
       - run: yarn build
       - run: bash ./publish.sh

.storybook/main.js

@@ -1,35 +1,35 @@
 module.exports = {
   stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.tsx'],
   addons: [
+    '@storybook/addon-docs',
     '@storybook/addon-actions',
     '@storybook/addon-links',
     '@storybook/addon-a11y',
     '@storybook/addon-storysource',
     'storybook-dark-mode/register',
     '@storybook/addon-knobs/register', // Keep until we migrate all to addon-controls
     '@storybook/addon-controls',
-    '@storybook/addon-docs',
     '@storybook/preset-scss',
   ],
   webpackFinal: async (config) => {
     config.module.rules.push(
       {
-      test: /\.(ts|tsx)$/,
-      use: [
-        {
-          loader: require.resolve('ts-loader'),
-        },
-      ],
-    },
-    { 
-      test: /\.md$/,
-      use: [
+        test: /\.(ts|tsx)$/,
+        use: [
+          {
+            loader: require.resolve('ts-loader'),
+          },
+        ],
+      },
+      {
+        test: /\.md$/,
+        use: [
           {
-            loader: "markdown-loader",
-          }
-      ]
-   }  
-  );
+            loader: 'markdown-loader',
+          },
+        ],
+      }
+    );
     config.resolve.extensions.push('.ts', '.tsx');
     return config;
   },

package.json

@@ -20,7 +20,8 @@
     "storybook-docs": "start-storybook --docs",
     "build-storybook": "build-storybook -c .storybook -o dist/storybook",
     "test": "jest --watchAll",
-    "test-once": "jest"
+    "test-once": "jest",
+    "check-circular": "madge --circular --extensions ts,tsx ./"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -91,6 +92,7 @@
     "eslint-plugin-react-hooks": "^2.5.1",
     "html-react-parser": "^0.14.0",
     "jest": "^26.0.1",
+    "madge": "^4.0.0",
     "markdown-loader": "^6.0.0",
     "prettier": "^2.2.1",
     "react": "^16.13.1",
@@ -104,4 +106,4 @@
     "typescript": "^3.9.3",
     "yarn-deduplicate": "^3.1.0"
   }
-}
+}

src/components/dropdown/Dropdown.tsx

@@ -113,7 +113,7 @@ type DropdownState<T> = {
   displayArrowIndicator?: boolean;
 };
 
-class Dropdown<T = LabelValue> extends React.Component<
+export class Dropdown<T = LabelValue> extends React.Component<
   DropdownProps<T>,
   DropdownState<T>
 > {

src/components/dropdown/index.ts

@@ -1,5 +1,5 @@
 import Dropdown from './Dropdown';
 export * from './interfaces';
-export {Dropdown};
+export * from './Dropdown';
 
 export default Dropdown;

src/components/input/TextComponent.tsx

@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import * as PropTypes from 'prop-types';
 import Icon from '../icon';
 import Tooltip from '../tooltip';
-import { HasValidationProps } from 'components/validation/interfaces';
+import { HasValidationProps } from '../validation/interfaces';
 
 enum Types {
   TEXTAREA = 'TextArea',

src/components/time-picker/TimePicker.tsx

@@ -1,15 +1,14 @@
+import { Dropdown } from '../dropdown';
+import { HasValidationProps } from '../validation/interfaces';
 import * as PropTypes from 'prop-types';
-import { useState, useEffect, useMemo } from 'react';
 import * as React from 'react';
-import { Dropdown } from '../index';
-import { HasValidationProps } from 'components/validation/interfaces';
-
+import { useEffect, useMemo, useState } from 'react';
 import { Keys } from '../common/keyUtils';
-
+import { ErrorMessages } from '../validation/interfaces';
+import { DisabledTime } from './interfaces';
 import {
   FIELD,
-  formatTimeISO,
-  formatISOTimeToSeconds,
+  formatISOTimeToSeconds, formatTimeISO,
   getFormattedTime,
   getISOTimeFromLocalTime,
   getOptions,
@@ -20,12 +19,9 @@ import {
   isTimeDisabled,
   isTimeSelected,
   isTimeValid,
-  Time,
+  Time
 } from './utils';
 
-import { DisabledTime } from './interfaces';
-import { ErrorMessages } from '../validation/interfaces';
-
 enum STEP {
   MIN_STEP_VALUE = 600,
   MAX_STEP_VALUE = 43200,

src/components/time-picker/utils/index.ts

@@ -2,4 +2,3 @@ import Time from './Time';
 
 export { Time };
 export * from './timeUtils';
-export * from './matchTimeUtils';

src/components/time-picker/utils/timeUtils.tsx

@@ -2,8 +2,6 @@ import { Keys } from '../../common/keyUtils';
 
 import { format as formatTime, parse as parseTime, isValid } from 'date-fns';
 
-import { matchExactTime, matchTimeInRange } from './matchTimeUtils';
-
 import Time from './Time';
 import { DropdownOption } from '../../dropdown';
 import { DisabledTime } from '../interfaces';
@@ -410,3 +408,25 @@ export const getTimeFromString = (inputTime: string): Time => {
     result.groups.ampm
   );
 };
+
+/**
+ * Return true if the time is equal to the time in the matcher
+ * @param time Time {hours, minutes, seconds}
+ * @param matcher Object {time: 'HH:mm:ss'}
+ */
+export function matchExactTime(time: Time, matcher): boolean {
+  if (time === null || !('time' in matcher)) return false;
+  return formatTimeISO(time) === matcher.time;
+}
+
+/**
+ * Returns true if the range contains the time
+ * @param time Time {hours, minutes, seconds}
+ * @param matcher Object {from: 'HH:mm:ss', to: 'HH:mm:ss'}
+ */
+export function matchTimeInRange(time: Time, matcher): boolean {
+  if (time === null || !('from' in matcher) || !('to' in matcher)) return false;
+  return (
+    matcher.from <= formatTimeISO(time) && formatTimeISO(time) <= matcher.to
+  );
+}

stories/TimePicker.stories.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import {TimePicker} from '../src/components';
-import './styles/dropdownMenu.stories.css';
-import { Button, Validation } from '../src';
 import { useState } from 'react';
+import { Button, Validation } from '../src';
+import { TimePicker } from '../src/components';
+import './styles/dropdownMenu.stories.css';
 
 const logChange = (value, errorsMap) => {
   if (!value) {

tsconfig.json

@@ -7,10 +7,8 @@
     "strict": true,
     "jsx": "react",
     "rootDirs": [
-      "src",
       "stories"
     ],
-    "baseUrl": "src",
     "esModuleInterop": true,
     "noImplicitAny": false,
     "strictNullChecks": false,