[BREAKING CHANGE] feat: rename appearance to colorScheme (#7728)

* feat: rename AppearanceType to ColorSchemeType, Appearance to ColorScheme * feat: rename useAppearance to useColorScheme, useAutoDetectAppearance to useAutoDetectColorScheme * feat: rename appearance props to colorScheme props in styleguide and storybook * feat: rename useAppearanceProvider to useColorSchemeProvider * feat: add codemod to renaming Appearance, AppearanceType to ColorScheme, ColorSchemeType * feat: add codemod to renaming AppearanceProvider, AppearanceProviderProps to ColorSchemeProvider, ColorSchemeTypeProps * feat: add codemod to renaming useAppearance to useColorScheme * feat: add codemod to renaming ConfigProvider prop appearance to colorScheme * feat: rename identifier * Update styleguide/pages/integrations_vk_mini_apps.md revert renaming Co-authored-by: Inomdzhon Mirdzhamolov <[email protected]> * Update styleguide/pages/platforms_and_themes.md Co-authored-by: Inomdzhon Mirdzhamolov <[email protected]> * fix: revert change link * fix: rename appearance to colorScheme in storybook theme addon --------- Co-authored-by: Inomdzhon Mirdzhamolov <[email protected]>
VKCOM · Oct 14, 2024 · be5ef3e · be5ef3e
1 parent 819c65b
commit be5ef3e
Show file tree

Hide file tree

Showing 90 changed files with 997 additions and 322 deletions.
diff --git a/docs/TESTING.md b/docs/TESTING.md
@@ -65,7 +65,7 @@
 
 - platform: 'android'
 - browserName: 'chromium'
-- appearance: 'light'
+- colorScheme: 'light'
 
 ```tsx
 test('Example', async ({ expectScreenshotClippedToContent }) => {

diff --git a/packages/codemods/src/codemod-helpers.ts b/packages/codemods/src/codemod-helpers.ts
@@ -31,6 +31,53 @@ export function getImportInfo(
   return { localName: localImportName };
 }
 
+export function renameImportName(
+  j: JSCodeshift,
+  source: Collection,
+  componentName: string,
+  newName: string,
+  alias: string,
+  renameOnlyImportedName: boolean,
+) {
+  source
+    .find(j.ImportDeclaration, { source: { value: alias } })
+    .find(j.ImportSpecifier, { local: { name: componentName } })
+    .forEach((path) => {
+      const newSpecifier = j.importSpecifier(
+        j.identifier(newName),
+        renameOnlyImportedName ? j.identifier(componentName) : j.identifier(newName),
+      );
+      (newSpecifier as any).importKind = (path.value as any).importKind;
+      j(path).replaceWith(newSpecifier);
+    });
+}
+
+export function renameIdentifier(
+  j: JSCodeshift,
+  source: Collection,
+  oldName: string,
+  newName: string,
+) {
+  source.find(j.Identifier, { name: oldName }).forEach((path) => {
+    j(path).replaceWith(j.identifier(newName));
+  });
+}
+
+export function renameTypeIdentifier(
+  j: JSCodeshift,
+  source: Collection,
+  oldName: string,
+  newName: string,
+) {
+  source
+    .find(j.TSTypeReference, { typeName: { type: 'Identifier', name: oldName } })
+    .forEach((path) => {
+      if (path.node.typeName.type === 'Identifier') {
+        path.node.typeName.name = newName;
+      }
+    });
+}
+
 export function renameProp(
   j: JSCodeshift,
   source: Collection,

diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/appearance-provider/alias.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/appearance-provider/alias.input.tsx
@@ -0,0 +1,15 @@
+import { AppearanceProvider as AppearanceProviderAlias, type AppearanceProviderProps as AppearanceProviderPropsAlias, Snackbar } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  const props: AppearanceProviderPropsAlias = {
+    value: 'dark',
+    children: (<Snackbar action="Поделиться">Поделиться</Snackbar>)
+  };
+
+  return (
+    <React.Fragment>
+      <AppearanceProviderAlias {...props} />
+    </React.Fragment>
+  );
+};
diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/appearance-provider/basic.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/appearance-provider/basic.input.tsx
@@ -0,0 +1,26 @@
+import { AppearanceProvider, type AppearanceProviderProps, Snackbar } from '@vkontakte/vkui';
+import React from 'react';
+
+type Props = AppearanceProviderProps & {
+  additionalProp: string,
+}
+
+const App = () => {
+  const props: AppearanceProviderProps = {
+    value: 'dark',
+    children: (<Snackbar action="Поделиться">Поделиться</Snackbar>)
+  };
+
+  const getAdditionalProvider = () => (
+    <AppearanceProvider value={"light"}>
+      <Snackbar action="Поделиться">Поделиться</Snackbar>
+    </AppearanceProvider>
+  )
+
+  return (
+    <React.Fragment>
+      <AppearanceProvider {...props} />
+      {getAdditionalProvider()}
+    </React.Fragment>
+  );
+};
diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/appearance/alias.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/appearance/alias.input.tsx
@@ -0,0 +1,20 @@
+import { Appearance as AppearanceAlias, type AppearanceType as AppearanceTypeAlias } from '@vkontakte/vkui';
+import React from 'react';
+
+const Component: React.FC<{
+  appearance: AppearanceTypeAlias;
+}> = () => {
+  return (
+    <div></div>
+  )
+}
+
+const App = () => {
+  const appearance: AppearanceTypeAlias = AppearanceAlias.LIGHT;
+
+  return (
+    <React.Fragment>
+      <Component appearance={AppearanceAlias.DARK} />
+    </React.Fragment>
+  );
+};
diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/appearance/basic.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/appearance/basic.input.tsx
@@ -0,0 +1,24 @@
+import { Appearance, type AppearanceType, useAppearance } from '@vkontakte/vkui';
+import React from 'react';
+
+const Component: React.FC<{
+  appearance: AppearanceType;
+}> = ({
+  appearance,
+}) => {
+  return (
+    <div></div>
+  )
+}
+
+const App = () => {
+  const appearance: AppearanceType = Appearance.LIGHT;
+
+  const fromHookAppearance = useAppearance();
+
+  return (
+    <React.Fragment>
+      <Component appearance={Appearance.DARK} />
+    </React.Fragment>
+  );
+};
diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/config-provider/basic.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/config-provider/basic.input.tsx
@@ -0,0 +1,33 @@
+import { ConfigProvider, ConfigProviderContext } from '@vkontakte/vkui';
+import React, {createContext} from 'react';
+
+const OtherContext = createContext({});
+
+
+const App = () => {
+  const contextValue = {}
+  return (
+    <>
+      <ConfigProvider
+        appearance={"dark"}
+        {...contextValue}
+      >
+        <div></div>
+      </ConfigProvider>
+
+      <ConfigProviderContext.Provider value={{
+        appearance: 'light',
+        ...contextValue
+      }}>
+        <div></div>
+      </ConfigProviderContext.Provider>
+
+      <OtherContext.Provider value={{
+        appearance: 'light',
+        ...contextValue
+      }}>
+        <div></div>
+      </OtherContext.Provider>
+    </>
+  );
+};
diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/appearance-provider.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/appearance-provider.ts.snap
@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`appearance-provider transforms correctly 1`] = `
+"import { ColorSchemeProvider, type ColorSchemeProviderProps, Snackbar } from '@vkontakte/vkui';
+import React from 'react';
+
+type Props = ColorSchemeProviderProps & {
+  additionalProp: string,
+}
+
+const App = () => {
+  const props: ColorSchemeProviderProps = {
+    value: 'dark',
+    children: (<Snackbar action="Поделиться">Поделиться</Snackbar>)
+  };
+
+  const getAdditionalProvider = () => (
+    <ColorSchemeProvider value={"light"}>
+      <Snackbar action="Поделиться">Поделиться</Snackbar>
+    </ColorSchemeProvider>
+  )
+
+  return (
+    (<React.Fragment>
+      <ColorSchemeProvider {...props} />
+      {getAdditionalProvider()}
+    </React.Fragment>)
+  );
+};"
+`;
+
+exports[`appearance-provider transforms correctly 2`] = `
+"import { ColorSchemeProvider as AppearanceProviderAlias, type ColorSchemeProviderProps as AppearanceProviderPropsAlias, Snackbar } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  const props: AppearanceProviderPropsAlias = {
+    value: 'dark',
+    children: (<Snackbar action="Поделиться">Поделиться</Snackbar>)
+  };
+
+  return (
+    <React.Fragment>
+      <AppearanceProviderAlias {...props} />
+    </React.Fragment>
+  );
+};"
+`;
diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/appearance.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/appearance.ts.snap
@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`appearance transforms correctly 1`] = `
+"import { ColorScheme, type ColorSchemeType, useColorScheme } from '@vkontakte/vkui';
+import React from 'react';
+
+const Component: React.FC<{
+  appearance: ColorSchemeType;
+}> = ({
+  appearance,
+}) => {
+  return (
+    <div></div>
+  )
+}
+
+const App = () => {
+  const appearance: ColorSchemeType = ColorScheme.LIGHT;
+
+  const fromHookAppearance = useColorScheme();
+
+  return (
+    (<React.Fragment>
+      <Component appearance={ColorScheme.DARK} />
+    </React.Fragment>)
+  );
+};"
+`;
+
+exports[`appearance transforms correctly 2`] = `
+"import { ColorScheme as AppearanceAlias, type ColorSchemeType as AppearanceTypeAlias } from '@vkontakte/vkui';
+import React from 'react';
+
+const Component: React.FC<{
+  appearance: AppearanceTypeAlias;
+}> = () => {
+  return (
+    <div></div>
+  )
+}
+
+const App = () => {
+  const appearance: AppearanceTypeAlias = AppearanceAlias.LIGHT;
+
+  return (
+    <React.Fragment>
+      <Component appearance={AppearanceAlias.DARK} />
+    </React.Fragment>
+  );
+};"
+`;
diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/config-provider.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/config-provider.ts.snap
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`config-provider transforms correctly 1`] = `
+"import { ConfigProvider, ConfigProviderContext } from '@vkontakte/vkui';
+import React, {createContext} from 'react';
+
+const OtherContext = createContext({});
+
+
+const App = () => {
+  const contextValue = {}
+  return (<>
+    <ConfigProvider
+      colorScheme={"dark"}
+      {...contextValue}
+    >
+      <div></div>
+    </ConfigProvider>
+    <ConfigProviderContext.Provider value={{
+      colorScheme: 'light',
+      ...contextValue
+    }}>
+      <div></div>
+    </ConfigProviderContext.Provider>
+    <OtherContext.Provider value={{
+      appearance: 'light',
+      ...contextValue
+    }}>
+      <div></div>
+    </OtherContext.Provider>
+  </>);
+};"
+`;
diff --git a/packages/codemods/src/transforms/v7/__tests__/appearance-provider.ts b/packages/codemods/src/transforms/v7/__tests__/appearance-provider.ts
@@ -0,0 +1,12 @@
+jest.autoMockOff();
+
+import { defineSnapshotTestFromFixture } from '../../../testHelpers/testHelper';
+
+const name = 'appearance-provider';
+const fixtures = ['basic', 'alias'] as const;
+
+describe(name, () => {
+  fixtures.forEach((test) =>
+    defineSnapshotTestFromFixture(__dirname, name, global.TRANSFORM_OPTIONS, `${name}/${test}`),
+  );
+});
diff --git a/packages/codemods/src/transforms/v7/__tests__/appearance.ts b/packages/codemods/src/transforms/v7/__tests__/appearance.ts
@@ -0,0 +1,12 @@
+jest.autoMockOff();
+
+import { defineSnapshotTestFromFixture } from '../../../testHelpers/testHelper';
+
+const name = 'appearance';
+const fixtures = ['basic', 'alias'] as const;
+
+describe(name, () => {
+  fixtures.forEach((test) =>
+    defineSnapshotTestFromFixture(__dirname, name, global.TRANSFORM_OPTIONS, `${name}/${test}`),
+  );
+});
diff --git a/packages/codemods/src/transforms/v7/__tests__/config-provider.ts b/packages/codemods/src/transforms/v7/__tests__/config-provider.ts
@@ -0,0 +1,12 @@
+jest.autoMockOff();
+
+import { defineSnapshotTestFromFixture } from '../../../testHelpers/testHelper';
+
+const name = 'config-provider';
+const fixtures = ['basic'] as const;
+
+describe(name, () => {
+  fixtures.forEach((test) =>
+    defineSnapshotTestFromFixture(__dirname, name, global.TRANSFORM_OPTIONS, `${name}/${test}`),
+  );
+});