fix: Handful of fixes based on v3 migration. (#332)

milesj · web-flow · commit e37800438b20 · 2020-03-06T09:33:24.000-08:00
* Fix codemods.

* Fix generics.

* Move prop.

* Ignore withIcon.
diff --git a/codemods/v3/canonicalPropsState.ts b/codemods/v3/canonicalPropsState.ts
@@ -15,7 +15,10 @@ module.exports = function canonicalPropsState(
   mod.source.find(mod.cs.ImportDeclaration).forEach(({ node }) => {
     const source = String(node.source.value);
 
-    if (!source.includes('lunar') && !source.includes('components')) {
+    if (
+      (!source.includes('lunar') && !source.includes('components')) ||
+      source.endsWith('withIcon')
+    ) {
       return;
     }
 
diff --git a/codemods/v3/i18nKeyContext.ts b/codemods/v3/i18nKeyContext.ts
@@ -32,9 +32,14 @@ module.exports = function i18nKeyContext(
       callee: { object: { name: 'T' }, property: { name: 'phrase' } },
     })
     .forEach(({ node }) => {
-      const [, params, opts] = node.arguments;
+      const [phrase, params, opts] = node.arguments;
       let key = '';
 
+      // Already converted
+      if (phrase?.type === 'StringLiteral' && params?.type === 'StringLiteral') {
+        return;
+      }
+
       // Extract key and remove context
       if (opts && opts.type === 'ObjectExpression') {
         opts.properties = opts.properties.filter(prop => {
diff --git a/packages/core/src/components/CheckBox/index.tsx b/packages/core/src/components/CheckBox/index.tsx
@@ -4,7 +4,7 @@ import BaseCheckBox, { BaseCheckBoxProps } from '../private/BaseCheckBox';
 import FormField, { FormFieldProps, partitionFieldProps } from '../FormField';
 import Text from '../Text';
 
-export type CheckBoxProps<T extends string> = BaseCheckBoxProps<T> &
+export type CheckBoxProps<T extends string = string> = BaseCheckBoxProps<T> &
   FormFieldProps & {
     /** Middle align content. */
     middleAlign?: boolean;
diff --git a/packages/core/src/components/CheckBoxController/index.tsx b/packages/core/src/components/CheckBoxController/index.tsx
@@ -5,14 +5,14 @@ import proxyComponent from '../../utils/proxyComponent';
 import FormField, { FormFieldProps, partitionFieldProps } from '../FormField';
 import CheckBox, { CheckBoxProps } from '../CheckBox';
 
-export type CheckBoxControlledProps<T extends string> = Partial<
+export type CheckBoxControlledProps<T extends string = string> = Partial<
   Omit<CheckBoxProps<T>, 'label' | 'value'>
 > & {
   label: NonNullable<React.ReactNode>;
   value: T;
 };
 
-export type CheckBoxControllerProps<T extends string> = FormFieldProps & {
+export type CheckBoxControllerProps<T extends string = string> = FormFieldProps & {
   /** Function children in which CheckBox components can be rendered. */
   children: (
     component: React.ComponentType<CheckBoxControlledProps<T>>,
@@ -27,7 +27,7 @@ export type CheckBoxControllerProps<T extends string> = FormFieldProps & {
   value?: T[];
 };
 
-export type CheckBoxControllerState<T extends string> = {
+export type CheckBoxControllerState<T extends string = string> = {
   id: string;
   values: Set<T>;
 };
diff --git a/packages/core/src/components/FormField/index.tsx b/packages/core/src/components/FormField/index.tsx
@@ -44,8 +44,6 @@ export type FormFieldProps = {
   suffix?: React.ReactNode;
   /** Custom style sheet. */
   styleSheet?: StyleSheet;
-  /** @ignore Top align. (Internal use only) */
-  topAlign?: boolean;
 };
 
 export type PrivateProps = FormFieldProps & {
@@ -61,6 +59,8 @@ export type PrivateProps = FormFieldProps & {
   renderLargeLabel?: boolean;
   /** @ignore Stretches the label to 100%. */
   stretchLabel?: boolean;
+  /** @ignore Top align. (Internal use only) */
+  topAlign?: boolean;
   /** @ignore Middle align content. */
   middleAlign?: boolean;
   /** Custom style sheet. */
diff --git a/packages/core/src/components/RadioButton/index.tsx b/packages/core/src/components/RadioButton/index.tsx
@@ -7,7 +7,7 @@ import Text from '../Text';
 
 const stateProp = mutuallyExclusiveTrueProps('checked', 'indeterminate');
 
-export type RadioButtonProps<T extends string> = Omit<BaseRadioButtonProps<T>, 'value'> &
+export type RadioButtonProps<T extends string = string> = Omit<BaseRadioButtonProps<T>, 'value'> &
   FormFieldProps & {
     /** Middle align content. */
     middleAlign?: boolean;
diff --git a/packages/core/src/components/RadioButtonController/index.tsx b/packages/core/src/components/RadioButtonController/index.tsx
@@ -4,14 +4,14 @@ import proxyComponent from '../../utils/proxyComponent';
 import FormField, { FormFieldProps, partitionFieldProps } from '../FormField';
 import RadioButton, { RadioButtonProps } from '../RadioButton';
 
-export type RadioButtonControlledProps<T extends string> = Partial<
+export type RadioButtonControlledProps<T extends string = string> = Partial<
   Omit<RadioButtonProps<T>, 'label' | 'value'>
 > & {
   label: NonNullable<React.ReactNode>;
   value: T;
 };
 
-export type RadioButtonControllerProps<T extends string> = FormFieldProps & {
+export type RadioButtonControllerProps<T extends string = string> = FormFieldProps & {
   /** Function children in which RadioButton components can be rendered. */
   children: (
     component: React.ComponentType<RadioButtonControlledProps<T>>,
@@ -26,7 +26,7 @@ export type RadioButtonControllerProps<T extends string> = FormFieldProps & {
   value?: T;
 };
 
-export type RadioButtonControllerState<T extends string> = {
+export type RadioButtonControllerState<T extends string = string> = {
   id: string;
   value: T;
 };
diff --git a/packages/core/src/components/Select/index.tsx b/packages/core/src/components/Select/index.tsx
@@ -3,7 +3,7 @@ import { v4 as uuid } from 'uuid';
 import BaseSelect, { BaseSelectProps } from '../private/BaseSelect';
 import FormField, { FormFieldProps, partitionFieldProps } from '../FormField';
 
-export type SelectProps<T extends string> = Omit<BaseSelectProps<T>, 'id'> &
+export type SelectProps<T extends string = string> = Omit<BaseSelectProps<T>, 'id'> &
   FormFieldProps & {
     /** Dropdown options. Supports `option` and `optgroup`. */
     children: NonNullable<React.ReactNode>;
diff --git a/packages/core/src/components/Switch/index.tsx b/packages/core/src/components/Switch/index.tsx
@@ -3,7 +3,8 @@ import { v4 as uuid } from 'uuid';
 import BaseSwitch, { BaseSwitchProps } from '../private/BaseSwitch';
 import FormField, { FormFieldProps, partitionFieldProps } from '../FormField';
 
-export type SwitchProps<T extends string> = Omit<BaseSwitchProps<T>, 'id'> & FormFieldProps;
+export type SwitchProps<T extends string = string> = Omit<BaseSwitchProps<T>, 'id'> &
+  FormFieldProps;
 
 /** A controlled switch (fancy checkbox) field. */
 export default function Switch<T extends string = string>(props: SwitchProps<T>) {
diff --git a/packages/core/src/components/Tabs/Tab.tsx b/packages/core/src/components/Tabs/Tab.tsx
@@ -6,7 +6,7 @@ import TrackingBoundary from '../TrackingBoundary';
 import { styleSheetTab } from './styles';
 import useStyles, { StyleSheet } from '../../hooks/useStyles';
 
-export type TabProps<T extends string> = Pick<
+export type TabProps<T extends string = string> = Pick<
   ButtonOrLinkProps,
   'afterIcon' | 'beforeIcon' | 'disabled' | 'href'
 > & {
diff --git a/packages/core/src/components/Tabs/index.tsx b/packages/core/src/components/Tabs/index.tsx
@@ -8,7 +8,7 @@ import useStyles, { StyleSheet } from '../../hooks/useStyles';
 
 export { Tab };
 
-export type TabsProps<T extends string> = {
+export type TabsProps<T extends string = string> = {
   /** Hide bottom border of Tabs. */
   borderless?: boolean;
   /** Tabs and their content. */
diff --git a/packages/core/src/components/ToggleButtonController/index.tsx b/packages/core/src/components/ToggleButtonController/index.tsx
@@ -9,12 +9,12 @@ import { ButtonOrLinkTypes } from '../private/ButtonOrLink';
 
 export { ButtonGroup };
 
-export type ToggleButtonControlledProps<T extends string> = Partial<ButtonProps> & {
+export type ToggleButtonControlledProps<T extends string = string> = Partial<ButtonProps> & {
   children: NonNullable<React.ReactNode>;
   value: T;
 };
 
-export type ToggleButtonControllerProps<T extends string> = FormFieldProps & {
+export type ToggleButtonControllerProps<T extends string = string> = FormFieldProps & {
   /** Function children in which Button components can be rendered. */
   children: (
     component: React.ComponentType<ToggleButtonControlledProps<T>>,
@@ -29,7 +29,7 @@ export type ToggleButtonControllerProps<T extends string> = FormFieldProps & {
   value?: T;
 };
 
-export type ToggleButtonControllerState<T extends string> = {
+export type ToggleButtonControllerState<T extends string = string> = {
   id: string;
   value: T;
 };
diff --git a/packages/core/src/components/private/BaseCheckBox.tsx b/packages/core/src/components/private/BaseCheckBox.tsx
@@ -65,7 +65,7 @@ export const styleSheetCheckbox: StyleSheet = theme => {
   };
 };
 
-export type BaseCheckBoxProps<T extends string> = InputProps<T> & {
+export type BaseCheckBoxProps<T extends string = string> = InputProps<T> & {
   /** Render the field as a large clickable button. */
   button?: boolean;
   /** Content to display when in button mode. Defaults to the current label bolded followed by the label description. */
diff --git a/packages/core/src/components/private/BaseRadioButton.tsx b/packages/core/src/components/private/BaseRadioButton.tsx
@@ -67,7 +67,7 @@ export const styleSheetRadioButton: StyleSheet = theme => {
   };
 };
 
-export type BaseRadioButtonProps<T extends string> = InputProps<T> & {
+export type BaseRadioButtonProps<T extends string = string> = InputProps<T> & {
   /** Render the field as a large clickable button. */
   button?: boolean;
   /** Content to display when in button mode. Defaults to the current label bolded followed by the label description. */
diff --git a/packages/core/src/components/private/BaseSelect.tsx b/packages/core/src/components/private/BaseSelect.tsx
@@ -36,7 +36,7 @@ export const styleSheetSelect: StyleSheet = ({ pattern, unit }) => ({
   },
 });
 
-export type BaseSelectProps<T extends string> = SelectProps<T> & {
+export type BaseSelectProps<T extends string = string> = SelectProps<T> & {
   /** List of `option`s to render. */
   children: NonNullable<React.ReactNode>;
   /** An empty `option` to render at the top of the list. */
diff --git a/packages/core/src/components/private/BaseSwitch.tsx b/packages/core/src/components/private/BaseSwitch.tsx
@@ -80,7 +80,7 @@ export const styleSheetSwitch: StyleSheet = theme => {
   };
 };
 
-export type BaseSwitchProps<T extends string> = InputProps<T> & {
+export type BaseSwitchProps<T extends string = string> = InputProps<T> & {
   /** Whether the switch is checked. */
   checked?: boolean;
   /** Unique identifier. */
