refactor: Export date-related components from default indices since tree-shaking is now working properly (#1919)

Luke Bowerman · web-flow · commit 7dc4122d4516 · 2021-02-17T09:50:33.000-08:00
diff --git a/packages/components/src/Form/Fields/FieldDate/FieldDate.story.tsx b/packages/components/src/Form/Fields/FieldDate/FieldDate.story.tsx
@@ -26,14 +26,15 @@
 import { Story } from '@storybook/react/types-6-0'
 import partial from 'lodash/partial'
 import React, { useState, SyntheticEvent } from 'react'
-import { Button } from '../Button'
-import { Grid } from '../Layout'
-import { Fieldset, FieldSelect, FieldSlider, FieldText } from '../Form'
-import { Popover, PopoverContent } from '../Popover'
-import { Paragraph } from '../Text'
-import { Locales, LocaleCodes } from '../utils/i18n'
-import { DateFormat } from '../DateFormat'
-import { FieldDate, FieldDateProps } from '../FieldDate'
+import { Button } from '../../../Button'
+import { Grid } from '../../../Layout'
+import { Fieldset } from '../../Fieldset'
+import { FieldSelect, FieldSlider, FieldText } from '../../Fields'
+import { Popover, PopoverContent } from '../../../Popover'
+import { Paragraph } from '../../../Text'
+import { Locales, LocaleCodes } from '../../../utils/i18n'
+import { DateFormat } from '../../../DateFormat'
+import { FieldDate, FieldDateProps } from '.'
 
 export default {
   component: FieldDate,
diff --git a/packages/components/src/Form/Fields/FieldDate/FieldDate.test.tsx b/packages/components/src/Form/Fields/FieldDate/FieldDate.test.tsx
diff --git a/packages/components/src/Form/Fields/FieldDate/FieldDate.tsx b/packages/components/src/Form/Fields/FieldDate/FieldDate.tsx
@@ -26,15 +26,10 @@
 
 import React, { forwardRef, Ref } from 'react'
 import styled from 'styled-components'
-import { useID } from '../utils'
-import { useFormContext } from '../Form'
-import { InputDate, InputDateProps } from '../InputDate'
-import {
-  Field,
-  FieldProps,
-  omitFieldProps,
-  pickFieldProps,
-} from '../Form/Fields/Field'
+import { useID } from '../../../utils'
+import { useFormContext } from '../../Form'
+import { InputDate, InputDateProps } from '../../Inputs/InputDate'
+import { Field, FieldProps, omitFieldProps, pickFieldProps } from '../Field'
 
 export interface FieldDateProps extends FieldProps, InputDateProps {}
 
diff --git a/packages/components/src/Form/Fields/FieldDate/index.ts b/packages/components/src/Form/Fields/FieldDate/index.ts
diff --git a/packages/components/src/Form/Fields/FieldDateRange/FieldDateRange.story.tsx b/packages/components/src/Form/Fields/FieldDateRange/FieldDateRange.story.tsx
@@ -25,10 +25,10 @@
  */
 import React, { useState } from 'react'
 import { Story } from '@storybook/react/types-6-0'
-import { Locales } from '../utils/i18n'
-import { FieldSelect } from '../Form/Fields/FieldSelect'
-import { Paragraph } from '../Text/Paragraph'
-import { DateFormat } from '../DateFormat'
+import { Locales } from '../../../utils/i18n'
+import { FieldSelect } from '../FieldSelect'
+import { Paragraph } from '../../../Text/Paragraph'
+import { DateFormat } from '../../../DateFormat'
 import { FieldDateRange, FieldInputDateRangeProps } from '.'
 
 interface DateRange {
diff --git a/packages/components/src/Form/Fields/FieldDateRange/FieldDateRange.test.tsx b/packages/components/src/Form/Fields/FieldDateRange/FieldDateRange.test.tsx
diff --git a/packages/components/src/Form/Fields/FieldDateRange/FieldDateRange.tsx b/packages/components/src/Form/Fields/FieldDateRange/FieldDateRange.tsx
@@ -26,15 +26,13 @@
 
 import React, { forwardRef, Ref } from 'react'
 import styled from 'styled-components'
-import { useID } from '../utils'
-import { useFormContext } from '../Form'
-import { InputDateRange, InputDateRangeProps } from '../InputDateRange'
+import { useID } from '../../../utils'
+import { useFormContext } from '../../Form'
 import {
-  Field,
-  FieldProps,
-  omitFieldProps,
-  pickFieldProps,
-} from '../Form/Fields/Field'
+  InputDateRange,
+  InputDateRangeProps,
+} from '../../Inputs/InputDateRange'
+import { Field, FieldProps, omitFieldProps, pickFieldProps } from '../Field'
 
 export interface FieldInputDateRangeProps
   extends FieldProps,
diff --git a/packages/components/src/Form/Fields/FieldDateRange/index.ts b/packages/components/src/Form/Fields/FieldDateRange/index.ts
diff --git a/packages/components/src/Form/Fields/index.ts b/packages/components/src/Form/Fields/index.ts
@@ -28,6 +28,8 @@ export * from './FieldCheckbox'
 export * from './FieldCheckboxGroup'
 export * from './FieldChips'
 export * from './FieldColor'
+export * from './FieldDate'
+export * from './FieldDateRange'
 export * from './FieldRadio'
 export * from './FieldRadioGroup'
 export * from './FieldRangeSlider'
diff --git a/packages/components/src/Form/Inputs/InputDate/InputDate.story.tsx b/packages/components/src/Form/Inputs/InputDate/InputDate.story.tsx
@@ -25,11 +25,11 @@
  */
 import React, { useState } from 'react'
 import { Story } from '@storybook/react/types-6-0'
-import { DateFormat } from '../DateFormat'
-import { Space } from '../Layout/Space'
-import { Box } from '../Layout/Box'
-import { Heading, Text } from '../Text'
-import { InputDate, InputDateProps } from './'
+import { DateFormat } from '../../../DateFormat'
+import { Space } from '../../../Layout/Space'
+import { Box } from '../../../Layout/Box'
+import { Heading, Text } from '../../../Text'
+import { InputDate, InputDateProps } from '.'
 
 export default {
   component: InputDate,
diff --git a/packages/components/src/Form/Inputs/InputDate/InputDate.test.tsx b/packages/components/src/Form/Inputs/InputDate/InputDate.test.tsx
@@ -28,7 +28,7 @@ import React, { useState } from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { renderWithTheme } from '@looker/components-test-utils'
 
-import { Locales } from '../utils/i18n'
+import { Locales } from '../../../utils/i18n'
 import { InputDate } from './InputDate'
 
 const realDateNow = Date.now.bind(global.Date)
diff --git a/packages/components/src/Form/Inputs/InputDate/InputDate.tsx b/packages/components/src/Form/Inputs/InputDate/InputDate.tsx
@@ -37,11 +37,15 @@ import styled from 'styled-components'
 import isFunction from 'lodash/isFunction'
 import isEqual from 'lodash/isEqual'
 import { BorderProps, SpaceProps } from '@looker/design-tokens'
-import { InputText } from '../Form/Inputs/InputText'
-import { Calendar, CalendarLocalization } from '../Calendar'
-import { ValidationType } from '../Form/ValidationMessage'
-import { Locales, formatDateString, parseDateFromString } from '../utils/i18n'
-import { useReadOnlyWarn } from '../utils/useReadOnlyWarn'
+import { InputText } from '../InputText'
+import { Calendar, CalendarLocalization } from '../../../Calendar'
+import { ValidationType } from '../../ValidationMessage'
+import {
+  Locales,
+  formatDateString,
+  parseDateFromString,
+} from '../../../utils/i18n'
+import { useReadOnlyWarn } from '../../../utils/useReadOnlyWarn'
 
 export interface InputDateProps extends SpaceProps, BorderProps {
   'aria-describedby'?: string
diff --git a/packages/components/src/Form/Inputs/InputDate/index.ts b/packages/components/src/Form/Inputs/InputDate/index.ts
diff --git a/packages/components/src/Form/Inputs/InputDateRange/InputDateRange.story.tsx b/packages/components/src/Form/Inputs/InputDateRange/InputDateRange.story.tsx
@@ -26,13 +26,13 @@
 import React, { useState } from 'react'
 import { Story } from '@storybook/react/types-6-0'
 import { RangeModifier } from 'react-day-picker'
-import { VIEWPORT_MAP } from '../utils-storybook'
-import { Button } from '../Button'
-import { Popover, PopoverContent } from '../Popover'
-import { DateFormat } from '../DateFormat'
-import { Tabs, Tab, TabList, TabPanels, TabPanel } from '../Tabs'
-import { MenuList, MenuItem } from '../Menu'
-import { InputDateRange, InputDateRangeProps } from './'
+import { VIEWPORT_MAP } from '../../../utils-storybook'
+import { Button } from '../../../Button'
+import { Popover, PopoverContent } from '../../../Popover'
+import { DateFormat } from '../../../DateFormat'
+import { Tabs, Tab, TabList, TabPanels, TabPanel } from '../../../Tabs'
+import { MenuList, MenuItem } from '../../../Menu'
+import { InputDateRange, InputDateRangeProps } from '.'
 
 export default {
   component: InputDateRange,
diff --git a/packages/components/src/Form/Inputs/InputDateRange/InputDateRange.test.tsx b/packages/components/src/Form/Inputs/InputDateRange/InputDateRange.test.tsx
@@ -28,7 +28,7 @@ import React, { useState } from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { renderWithTheme } from '@looker/components-test-utils'
 import { RangeModifier } from 'react-day-picker'
-import { Locales } from '../utils/i18n'
+import { Locales } from '../../../utils/i18n'
 import { InputDateRange } from './InputDateRange'
 
 const realDateNow = Date.now.bind(global.Date)
diff --git a/packages/components/src/Form/Inputs/InputDateRange/InputDateRange.tsx b/packages/components/src/Form/Inputs/InputDateRange/InputDateRange.tsx
@@ -40,20 +40,24 @@ import max from 'lodash/max'
 import isEmpty from 'lodash/isEmpty'
 import isEqual from 'lodash/isEqual'
 import values from 'lodash/values'
-import { Icon } from '../Icon'
-import { ValidationType } from '../Form/ValidationMessage'
+import { Icon } from '../../../Icon'
+import { ValidationType } from '../../ValidationMessage'
 import {
   inputCSS,
   inputTextHover,
   inputTextFocus,
   inputTextValidation,
   inputTextDisabled,
-} from '../Form/Inputs/InputText'
-import { InlineInputTextBase } from '../Form/Inputs/InlineInputText'
-import { Calendar, CalendarLocalization } from '../Calendar'
-import { Locales, formatDateString, parseDateFromString } from '../utils/i18n'
-import { useID } from '../utils/useID'
-import { useReadOnlyWarn } from '../utils/useReadOnlyWarn'
+} from '../InputText'
+import { InlineInputTextBase } from '../../Inputs/InlineInputText'
+import { Calendar, CalendarLocalization } from '../../../Calendar'
+import {
+  Locales,
+  formatDateString,
+  parseDateFromString,
+} from '../../../utils/i18n'
+import { useID } from '../../../utils/useID'
+import { useReadOnlyWarn } from '../../../utils/useReadOnlyWarn'
 
 export interface InputDateRangeProps {
   disabled?: boolean
diff --git a/packages/components/src/Form/Inputs/InputDateRange/index.ts b/packages/components/src/Form/Inputs/InputDateRange/index.ts
diff --git a/packages/components/src/Form/Inputs/index.ts b/packages/components/src/Form/Inputs/index.ts
@@ -31,6 +31,8 @@ export * from './InlineInputText'
 export * from './InlineTextArea'
 export * from './InputChips'
 export * from './InputColor'
+export * from './InputDate'
+export * from './InputDateRange'
 export * from './InputFilters'
 export * from './InputHidden'
 export * from './InputSearch'
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
@@ -31,10 +31,13 @@ export * from './Badge'
 export * from './Button'
 export * from './Breakpoint'
 export * from './Card'
+export * from './Calendar'
 export * from './Chip'
 export * from './ChipButton'
 export * from './CopyToClipboard'
 export * from './DataTable'
+export * from './DateFormat'
+export * from './DateTimeFormat'
 export * from './Dialog'
 export * from './Divider'
 export * from './Drawer'
@@ -56,6 +59,7 @@ export * from './Spinner'
 export * from './Status'
 export * from './Table'
 export * from './Tabs'
+export * from './TimeFormat'
 export * from './Tooltip'
 export * from './Text'
 export * from './Tree'
diff --git a/packages/components/src/utils/index.ts b/packages/components/src/utils/index.ts
@@ -24,11 +24,12 @@
 
  */
 
+export * from './getNextFocus'
 export * from './getNextFocusTarget'
 export * from './getWindowedListBoundaries'
 export * from './HoverDisclosure'
+export * from './i18n'
 export * from './mergeHandlers'
-export * from './getNextFocus'
 export * from './targetIsButton'
 export * from './undefinedCoalesce'
 export * from './useAnimationState'
diff --git a/www/src/MDX/Pre/allComponents.ts b/www/src/MDX/Pre/allComponents.ts
@@ -45,6 +45,7 @@ import {
   ButtonOutline,
   ButtonToggle,
   ButtonTransparent,
+  Calendar,
   Card,
   CardContent,
   CardMedia,
@@ -59,6 +60,8 @@ import {
   ConfirmLayout,
   CopyToClipboard,
   doDataTableSort,
+  DateFormat,
+  DateTimeFormat,
   Dialog,
   DialogContent,
   DialogContext,
@@ -74,6 +77,8 @@ import {
   FieldCheckboxGroup,
   FieldChips,
   FieldColor,
+  FieldDate,
+  FieldDateRange,
   FieldRadio,
   FieldRadioGroup,
   FieldRangeSlider,
@@ -99,6 +104,8 @@ import {
   InlineTextArea,
   InputChips,
   InputColor,
+  InputDate,
+  InputDateRange,
   InputFilters,
   InputHidden,
   InputSearch,
@@ -153,6 +160,7 @@ import {
   Tabs,
   Text,
   TextArea,
+  TimeFormat,
   Truncate,
   theme,
   ToggleSwitch,
@@ -172,17 +180,6 @@ import {
   VisuallyHidden,
 } from '@looker/components'
 
-import { Calendar } from '@looker/components/src/Calendar'
-
-import { InputDate } from '@looker/components/src/InputDate'
-import { InputDateRange } from '@looker/components/src/InputDateRange'
-import { FieldDate } from '@looker/components/src/FieldDate'
-import { FieldDateRange } from '@looker/components/src/FieldDateRange'
-
-import { DateFormat } from '@looker/components/src/DateFormat'
-import { DateTimeFormat } from '@looker/components/src/DateTimeFormat'
-import { TimeFormat } from '@looker/components/src/TimeFormat'
-
 import { DialogSurface } from '@looker/components/src/Dialog/DialogSurface'
 import styled from 'styled-components'
 import isEqual from 'lodash/isEqual'
diff --git a/www/src/documentation/components/content/calendar.mdx b/www/src/documentation/components/content/calendar.mdx
@@ -2,21 +2,9 @@
 title: Calendar
 ---
 
-import { MessageBar, Code } from '@looker/components'
+import { Code } from '@looker/components'
 import { CalendarPropTable } from './demos'
 
-<MessageBar my="large" noActions>
-  Note: Calendar must be imported from its specific location rather than the
-  package root.
-</MessageBar>
-
-Import path: `@looker/components/lib/Calendar`
-
-<MessageBar noActions>
-  If you need an interactive date picker, use{' '}
-  <a href="../forms/input-date">InputDate</a> or InputDateRange instead.
-</MessageBar>
-
 `Calendar` is a stateless component which renders a standard calendar month. It accepts a limited amount of props, and is the foundation of our more useful [`InputDate`](/components/forms/input-date) and `InputDateRange` components.
 
 ```jsx
diff --git a/www/src/documentation/components/content/date-format.mdx b/www/src/documentation/components/content/date-format.mdx
@@ -3,16 +3,8 @@ title: DateFormat
 github: DateTimeFormat/DateFormat.tsx
 ---
 
-import { MessageBar } from '@looker/components'
 import { DateFormatTable, LocaleTable } from './demos'
 
-<MessageBar my="large" noActions>
-  Note: DateFormat must be imported from its specific location rather than the
-  package root.
-</MessageBar>
-
-Import path: `@looker/components/lib/DateFormat`
-
 As it's name implies, `DateFormat` is used to format a javascript Date object to human readable and localized text.
 
 This is the sibling component of [`TimeFormat`](time-format), which does the same thing for times. If no Date object is provided, it will default to `Now`.
diff --git a/www/src/documentation/components/content/demos/DateFormatTable.tsx b/www/src/documentation/components/content/demos/DateFormatTable.tsx
@@ -24,14 +24,14 @@
 
  */
 import {
+  DateFormat,
   Table,
   TableBody,
   TableDataCell,
   TableHead,
   TableHeaderCell,
   TableRow,
 } from '@looker/components'
-import { DateFormat } from '@looker/components/src/DateFormat'
 import React from 'react'
 
 export const DateFormatTable = () => {
diff --git a/www/src/documentation/components/content/demos/LocaleTable.tsx b/www/src/documentation/components/content/demos/LocaleTable.tsx
@@ -27,14 +27,14 @@
 import React from 'react'
 import toPairs from 'lodash/toPairs'
 import {
+  Locales,
   Table,
   TableBody,
   TableDataCell,
   TableHead,
   TableHeaderCell,
   TableRow,
 } from '@looker/components'
-import { Locales } from '@looker/components/src/utils/i18n'
 
 export const LocaleTable = () => {
   return (
diff --git a/www/src/documentation/components/content/demos/TimeFormatTable.tsx b/www/src/documentation/components/content/demos/TimeFormatTable.tsx
@@ -30,8 +30,8 @@ import {
   TableHead,
   TableHeaderCell,
   TableRow,
+  TimeFormat,
 } from '@looker/components'
-import { TimeFormat } from '@looker/components/src/TimeFormat'
 import React from 'react'
 
 export const TimeFormatTable = () => {
diff --git a/www/src/documentation/components/content/time-format.mdx b/www/src/documentation/components/content/time-format.mdx
diff --git a/www/src/documentation/components/forms/input-date-range.mdx b/www/src/documentation/components/forms/input-date-range.mdx
diff --git a/www/src/documentation/components/forms/input-date.mdx b/www/src/documentation/components/forms/input-date.mdx
