@lifesg/react-design-system 4.0.0-alpha.3 → 4.0.0-alpha.4

package/codemods/deprecate-v2-tokens/data.ts

@@ -1,283 +0,0 @@
-export const componentMap = [
-    {
-        oldName: "DesignToken",
-        newName: "V2_DesignToken",
-    },
-    {
-        oldName: "DesignTokenSet",
-        newName: "V2_DesignTokenSet",
-    },
-    {
-        oldName: "DesignTokenSetOptions",
-        newName: "V2_DesignTokenSetOptions",
-    },
-    {
-        oldName: "MediaQuery",
-        newName: "V2_MediaQuery",
-    },
-    {
-        oldName: "MediaWidths",
-        newName: "V2_MediaWidths",
-    },
-    {
-        oldName: "MediaWidth",
-        newName: "V2_MediaWidth",
-    },
-    {
-        oldName: "MediaType",
-        newName: "V2_MediaType",
-    },
-    {
-        oldName: "Color",
-        newName: "V2_Color",
-    },
-    {
-        oldName: "ColorSet",
-        newName: "V2_ColorSet",
-    },
-    {
-        oldName: "ValidationElementAttributes",
-        newName: "V2_ValidationElementAttributes",
-    },
-    {
-        oldName: "ValidationTypes",
-        newName: "V2_ValidationTypes",
-    },
-    {
-        oldName: "ColorSetOptions",
-        newName: "V2_ColorSetOptions",
-    },
-    {
-        oldName: "Text",
-        newName: "V2_Text",
-    },
-    {
-        oldName: "TextStyleHelper",
-        newName: "V2_TextStyleHelper",
-    },
-    {
-        oldName: "TextStyle",
-        newName: "V2_TextStyle",
-    },
-    {
-        oldName: "TextSizeType",
-        newName: "V2_TextSizeType",
-    },
-    {
-        oldName: "TextLinkSizeType",
-        newName: "V2_TextLinkSizeType",
-    },
-    {
-        oldName: "TextStyleSpec",
-        newName: "V2_TextStyleSpec",
-    },
-    {
-        oldName: "TextStyleSetType",
-        newName: "V2_TextStyleSetType",
-    },
-    {
-        oldName: "TextStyleSetOptionsType",
-        newName: "V2_TextStyleSetOptionsType",
-    },
-    {
-        oldName: "TextWeight",
-        newName: "V2_TextWeight",
-    },
-    {
-        oldName: "TextProps",
-        newName: "V2_TextProps",
-    },
-    {
-        oldName: "TextLinkProps",
-        newName: "V2_TextLinkProps",
-    },
-    {
-        oldName: "TextLinkStyleProps",
-        newName: "V2_TextLinkStyleProps",
-    },
-    {
-        oldName: "Layout",
-        newName: "V2_Layout",
-    },
-    {
-        oldName: "ColDiv",
-        newName: "V2_ColDiv",
-    },
-    {
-        oldName: "Container",
-        newName: "V2_Container",
-    },
-    {
-        oldName: "Content",
-        newName: "V2_Content",
-    },
-    {
-        oldName: "Section",
-        newName: "V2_Section",
-    },
-    {
-        oldName: "CommonLayoutProps",
-        newName: "V2_CommonLayoutProps",
-    },
-    {
-        oldName: "SectionProps",
-        newName: "V2_SectionProps",
-    },
-    {
-        oldName: "ContainerType",
-        newName: "V2_ContainerType",
-    },
-    {
-        oldName: "ContainerProps",
-        newName: "V2_ContainerProps",
-    },
-    {
-        oldName: "ContentProps",
-        newName: "V2_ContentProps",
-    },
-    {
-        oldName: "DivRef",
-        newName: "V2_DivRef",
-    },
-    {
-        oldName: "ColProps",
-        newName: "V2_ColProps",
-    },
-    {
-        oldName: "ColDivProps",
-        newName: "V2_ColDivProps",
-    },
-    {
-        oldName: "TextList",
-        newName: "V2_TextList",
-    },
-    {
-        oldName: "OrderedListProps",
-        newName: "V2_OrderedListProps",
-    },
-    {
-        oldName: "UnorderedListProps",
-        newName: "V2_UnorderedListProps",
-    },
-    {
-        oldName: "CounterType",
-        newName: "V2_CounterType",
-    },
-    {
-        oldName: "BulletType",
-        newName: "V2_BulletType",
-    },
-    {
-        oldName: "Transition",
-        newName: "V2_Transition",
-    },
-    // Added theme name mappings
-    {
-        oldName: "BaseTheme",
-        newName: "V2_BaseTheme",
-    },
-    {
-        oldName: "BookingSGTheme",
-        newName: "V2_BookingSGTheme",
-    },
-    {
-        oldName: "RBSTheme",
-        newName: "V2_RBSTheme",
-    },
-    {
-        oldName: "MyLegacyTheme",
-        newName: "V2_MyLegacyTheme",
-    },
-    {
-        oldName: "CCubeTheme",
-        newName: "V2_CCubeTheme",
-    },
-    {
-        oldName: "OneServiceTheme",
-        newName: "V2_OneServiceTheme",
-    },
-    // Added type name mappings
-    {
-        oldName: "ThemeSpec",
-        newName: "V2_ThemeSpec",
-    },
-    {
-        oldName: "ThemeSpecOptions",
-        newName: "V2_ThemeSpecOptions",
-    },
-    {
-        oldName: "ThemeCollectionSpec",
-        newName: "V2_ThemeCollectionSpec",
-    },
-    {
-        oldName: "ColorScheme",
-        newName: "V2_ColorScheme",
-    },
-    {
-        oldName: "TextStyleScheme",
-        newName: "V2_TextStyleScheme",
-    },
-    {
-        oldName: "DesignTokenScheme",
-        newName: "V2_DesignTokenScheme",
-    },
-    {
-        oldName: "ResourceScheme",
-        newName: "V2_ResourceScheme",
-    },
-    {
-        oldName: "ColorCollectionsMap",
-        newName: "V2_ColorCollectionsMap",
-    },
-    {
-        oldName: "FontStyleCollectionsMap",
-        newName: "V2_FontStyleCollectionsMap",
-    },
-    {
-        oldName: "DesignTokenCollectionsMap",
-        newName: "V2_DesignTokenCollectionsMap",
-    },
-    {
-        oldName: "ThemeContextKeys",
-        newName: "V2_ThemeContextKeys",
-    },
-    {
-        oldName: "ThemeLayout",
-        newName: "V2_ThemeLayout",
-    },
-];
-
-export const pathMap = [
-    {
-        oldPath: "design-token",
-        newPath: "v2_design-token",
-    },
-    {
-        oldPath: "color",
-        newPath: "v2_color",
-    },
-    {
-        oldPath: "media",
-        newPath: "v2_media",
-    },
-    {
-        oldPath: "text",
-        newPath: "v2_text",
-    },
-    {
-        oldPath: "layout",
-        newPath: "v2_layout",
-    },
-    {
-        oldPath: "text-list",
-        newPath: "v2_text-list",
-    },
-    {
-        oldPath: "theme",
-        newPath: "v2_theme",
-    },
-    {
-        oldPath: "transition",
-        newPath: "v2_transition",
-    },
-];

package/codemods/deprecate-v2-tokens/index.ts

@@ -1,89 +0,0 @@
-import type { API, FileInfo, JSCodeshift } from "jscodeshift";
-
-import { componentMap, pathMap } from "./data";
-
-export default function transformer(file: FileInfo, api: API) {
-    const j: JSCodeshift = api.jscodeshift;
-    const source = j(file.source);
-
-    const componentsToChange = new Set();
-
-    // change import declarations and check which components to change
-    source.find(j.ImportDeclaration).forEach((path) => {
-        const importPath = path.node.source.value;
-
-        // check if importPath starts with @lifesg/
-        const isPathLib =
-            typeof importPath === "string" && importPath.startsWith("@lifesg/");
-
-        if (isPathLib) {
-            componentMap.forEach(({ oldName, newName }) => {
-                let importChanged = false;
-
-                // change specifiers
-                if (path.node.specifiers) {
-                    path.node.specifiers.forEach((specifier) => {
-                        if (
-                            specifier.type === "ImportSpecifier" &&
-                            specifier.imported.name === oldName
-                        ) {
-                            specifier.imported.name = newName;
-                            if (
-                                specifier.local &&
-                                specifier.local.name === oldName
-                            ) {
-                                specifier.local.name = newName;
-                            }
-                            importChanged = true;
-                            componentsToChange.add(oldName);
-                        }
-                    });
-                }
-
-                // check and update path by replacing the last word with the new path
-                if (
-                    importChanged &&
-                    importPath !== "@lifesg/react-design-system" &&
-                    typeof importPath === "string"
-                ) {
-                    const pathParts = importPath.split("/");
-                    if (
-                        pathParts[pathParts.length - 1] !==
-                        "react-design-system"
-                    ) {
-                        const lastPathPart = pathParts[pathParts.length - 1];
-                        // map with pathMap to find the new path
-                        pathMap.forEach(({ oldPath, newPath }) => {
-                            if (lastPathPart === oldPath) {
-                                pathParts[pathParts.length - 1] = newPath;
-                                path.node.source.value = pathParts.join("/");
-                            }
-                        });
-                    }
-                }
-            });
-        }
-    });
-
-    // change JSX identifiers and normal identifiers
-    if (componentsToChange.size > 0) {
-        componentMap.forEach(({ oldName, newName }) => {
-            if (componentsToChange.has(oldName)) {
-                source
-                    .find(j.JSXIdentifier, { name: oldName })
-                    .forEach((path) => {
-                        path.node.name = newName;
-                    });
-
-                source.find(j.Identifier, { name: oldName }).forEach((path) => {
-                    // only update if it's a parent property
-                    if (!j.MemberExpression.check(path.parent.value.object)) {
-                        path.node.name = newName;
-                    }
-                });
-            }
-        });
-    }
-
-    return source.toSource();
-}

package/codemods/migrate-colour/data.ts

@@ -1,95 +0,0 @@
-const defaultMapping = {
-    Primary: "primary-50",
-    PrimaryDark: "primary-40",
-    Secondary: "primary-40",
-    "Brand[1]": "brand-50",
-    "Brand[2]": "brand-60",
-    "Brand[3]": "brand-70",
-    "Brand[4]": "brand-80",
-    "Brand[5]": "brand-90",
-    "Brand[6]": "brand-95",
-    "Accent.Light[1]": "primary-60",
-    "Accent.Light[2]": "primary-70",
-    "Accent.Light[3]": "primary-80",
-    "Accent.Light[4]": "primary-90",
-    "Accent.Light[5]": "primary-95",
-    "Accent.Light[6]": "primary-100",
-    "Accent.Dark[1]": "secondary-40",
-    "Accent.Dark[2]": "secondary-50",
-    "Accent.Dark[3]": "secondary-60",
-    "Neutral[1]": "neutral-20",
-    "Neutral[2]": "neutral-30",
-    "Neutral[3]": "neutral-50",
-    "Neutral[4]": "neutral-60",
-    "Neutral[5]": "neutral-90",
-    "Neutral[6]": "neutral-95",
-    "Neutral[7]": "neutral-100",
-    "Neutral[8]": "white",
-    "Validation.Green.Text": "success-40",
-    "Validation.Green.Icon": "success-70",
-    "Validation.Green.Border": "success-80",
-    "Validation.Green.Background": "success-100",
-    "Validation.Orange.Text": "warning-50",
-    "Validation.Orange.Icon": "warning-70",
-    "Validation.Orange.Border": "warning-80",
-    "Validation.Orange.Background": "warning-100",
-    "Validation.Orange.Badge": "warning-100",
-    "Validation.Red.Text": "error-50",
-    "Validation.Red.Icon": "error-50",
-    "Validation.Red.Border": "error-60",
-    "Validation.Red.Background": "error-100",
-    "Validation.Blue.Text": "info-40",
-    "Validation.Blue.Icon": "info-50",
-    "Validation.Blue.Border": "info-70",
-    "Validation.Blue.Background": "info-95",
-};
-
-export const lifesgMapping = {
-    ...defaultMapping,
-    Primary: "primary-50",
-    PrimaryDark: "primary-40",
-    Secondary: "primary-40",
-};
-
-export const bookingSgMapping = {
-    ...defaultMapping,
-    Primary: "primary-50",
-    PrimaryDark: "primary-40",
-    Secondary: "primary-40",
-    "Accent.Dark[1]": "secondary-40",
-    "Accent.Dark[2]": "secondary-60",
-    "Accent.Dark[3]": "secondary-70",
-};
-
-export const mylegacyMapping = {
-    ...defaultMapping,
-    PrimaryDark: "primary-40",
-    Primary: "primary-50",
-    Secondary: "primary-40",
-    "Validation.Green.Text": "success-50",
-    "Validation.Red.Text": "success-40",
-};
-
-export const ccubeMapping = {
-    ...defaultMapping,
-    Primary: "primary-50",
-    PrimaryDark: "primary-40",
-    Secondary: "secondary-40",
-    "Brand[1]": "brand-60",
-    "Brand[2]": "brand-50",
-};
-
-export const rbsMapping = {
-    ...defaultMapping,
-};
-
-export const oneServiceMapping = {
-    ...defaultMapping,
-    Primary: "primary-50",
-    PrimaryDark: "primary-40",
-    Secondary: "secondary-40",
-    "Brand[1]": "brand-60",
-    "Accent.Dark[1]": "secondary-50",
-    "Accent.Dark[2]": "secondary-60",
-    "Accent.Dark[3]": "secondary-70",
-};

package/codemods/migrate-colour/index.ts

@@ -1,104 +0,0 @@
-import type { API, FileInfo, JSCodeshift } from "jscodeshift";
-
-import { CodemodUtils } from "../codemod-utils";
-import { Theme } from "../common";
-import {
-    bookingSgMapping,
-    ccubeMapping,
-    lifesgMapping,
-    mylegacyMapping,
-    oneServiceMapping,
-    rbsMapping,
-} from "./data";
-
-const IMPORT_PATHS = {
-    V2_COLOR: "@lifesg/react-design-system/v2_color",
-    DESIGN_SYSTEM: "@lifesg/react-design-system",
-    THEME: "@lifesg/react-design-system/theme",
-};
-
-const IMPORT_SPECIFIERS = {
-    V2_COLOR: "V2_Color",
-    COLOUR: "Colour",
-};
-
-const MEMBER_EXPRESSION_PROPERTIES = {
-    PRIMITIVE: "Primitive",
-};
-
-const COLOR_MAPPINGS = {
-    lifesg: lifesgMapping,
-    bookingsg: bookingSgMapping,
-    mylegacy: mylegacyMapping,
-    ccube: ccubeMapping,
-    rbs: rbsMapping,
-    oneservice: oneServiceMapping,
-};
-
-interface Options {
-    mapping: Theme;
-}
-
-export default function transformer(
-    file: FileInfo,
-    api: API,
-    options: Options
-) {
-    const j: JSCodeshift = api.jscodeshift;
-    const source = j(file.source);
-
-    const isV2ColorImport = CodemodUtils.hasImport(
-        source,
-        api,
-        [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_COLOR],
-        IMPORT_SPECIFIERS.V2_COLOR
-    );
-
-    // Determine which Colour mapping to use
-    const colorMapping =
-        COLOR_MAPPINGS[options.mapping] || COLOR_MAPPINGS[Theme.LifeSG];
-
-    const replaceWithColorPrimitive = (path: any, new_color_value: string) => {
-        path.replace(
-            j.memberExpression(
-                j.memberExpression(
-                    j.identifier(IMPORT_SPECIFIERS.COLOUR),
-                    j.identifier(MEMBER_EXPRESSION_PROPERTIES.PRIMITIVE)
-                ),
-                j.literal(new_color_value)
-            )
-        );
-    };
-
-    if (isV2ColorImport) {
-        CodemodUtils.addImport(
-            source,
-            api,
-            IMPORT_PATHS.THEME,
-            IMPORT_SPECIFIERS.COLOUR
-        );
-
-        CodemodUtils.removeImport(
-            source,
-            api,
-            [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_COLOR],
-            IMPORT_SPECIFIERS.V2_COLOR
-        );
-
-        // Map V2 Color usage to V3 Colour
-        source.find(j.MemberExpression).forEach((path) => {
-            const objectPath = CodemodUtils.getObjectPath(source, api, path);
-            const prefix = IMPORT_SPECIFIERS.V2_COLOR + ".";
-            if (objectPath && objectPath.startsWith(prefix)) {
-                const colour = objectPath.slice(prefix.length);
-                const newColorValue =
-                    colorMapping[colour as keyof typeof colorMapping];
-                if (newColorValue) {
-                    replaceWithColorPrimitive(path, newColorValue);
-                }
-            }
-        });
-    }
-
-    return source.toSource();
-}

package/codemods/migrate-layout/data.ts

@@ -1,5 +0,0 @@
-export const propMapping = {
-    desktopCols: "xlCols",
-    tabletCols: "mdCols",
-    mobileCols: "xxsCols",
-};

package/codemods/migrate-layout/index.ts

@@ -1,108 +0,0 @@
-import type { API, FileInfo, JSCodeshift } from "jscodeshift";
-
-import { CodemodUtils } from "../codemod-utils";
-import { propMapping } from "./data";
-
-const IMPORT_PATHS = {
-    V2_LAYOUT: "@lifesg/react-design-system/v2_layout",
-    DESIGN_SYSTEM: "@lifesg/react-design-system",
-    LAYOUT: "@lifesg/react-design-system/layout",
-};
-
-const IMPORT_SPECIFIERS = {
-    V2_LAYOUT: "V2_Layout",
-    LAYOUT: "Layout",
-};
-
-export default function transformer(file: FileInfo, api: API) {
-    const j: JSCodeshift = api.jscodeshift;
-    const source = j(file.source);
-
-    const isLifesgImport = CodemodUtils.hasImport(
-        source,
-        api,
-        [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_LAYOUT],
-        IMPORT_SPECIFIERS.V2_LAYOUT
-    );
-
-    if (isLifesgImport) {
-        CodemodUtils.addImport(
-            source,
-            api,
-            IMPORT_PATHS.LAYOUT,
-            IMPORT_SPECIFIERS.LAYOUT
-        );
-
-        CodemodUtils.removeImport(
-            source,
-            api,
-            [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_LAYOUT],
-            IMPORT_SPECIFIERS.V2_LAYOUT
-        );
-
-        // Update V2_Layout to Layout
-        source.find(j.JSXMemberExpression).forEach((path) => {
-            const { object } = path.node;
-
-            if (
-                j.JSXIdentifier.check(object) &&
-                object.name === IMPORT_SPECIFIERS.V2_LAYOUT
-            ) {
-                object.name = IMPORT_SPECIFIERS.LAYOUT;
-            }
-        });
-
-        source
-            .find(j.Identifier, { name: IMPORT_SPECIFIERS.V2_LAYOUT })
-            .forEach((path) => {
-                path.node.name = IMPORT_SPECIFIERS.LAYOUT;
-            });
-
-        // Update ColDiv column props to its V3 version
-        source.find(j.JSXOpeningElement).forEach((path) => {
-            const { name, attributes } = path.node;
-
-            if (
-                j.JSXMemberExpression.check(name) &&
-                j.JSXIdentifier.check(name.object) &&
-                name.object.name === IMPORT_SPECIFIERS.LAYOUT &&
-                j.JSXIdentifier.check(name.property) &&
-                name.property.name === "ColDiv"
-            ) {
-                if (attributes && attributes.length > 0) {
-                    attributes.forEach((attribute) => {
-                        if (
-                            j.JSXAttribute.check(attribute) &&
-                            j.JSXIdentifier.check(attribute.name)
-                        ) {
-                            const oldPropName = attribute.name.name;
-                            const newPropName =
-                                propMapping[
-                                    oldPropName as keyof typeof propMapping
-                                ];
-
-                            if (newPropName) {
-                                attribute.name.name = newPropName;
-                            }
-                        }
-                    });
-                }
-            }
-        });
-
-        source.find(j.JSXElement).forEach((path) => {
-            const openingElement = path.node.openingElement;
-            const { name } = openingElement;
-            if (
-                j.JSXMemberExpression.check(name) &&
-                j.JSXIdentifier.check(name.object)
-            ) {
-                if (name.object.name === IMPORT_SPECIFIERS.V2_LAYOUT) {
-                    name.object.name = IMPORT_SPECIFIERS.LAYOUT;
-                }
-            }
-        });
-    }
-
-    return source.toSource();
-}

package/codemods/migrate-media-query/data.ts

@@ -1,20 +0,0 @@
-export const mediaQueryMap = {
-    MaxWidth: {
-        mobileS: "xxs",
-        mobileM: "xs",
-        mobileL: "sm",
-        tablet: "lg",
-        desktopM: "xl",
-        desktopL: "xl",
-        desktop4k: "xl",
-    },
-    MinWidth: {
-        mobileS: "xs",
-        mobileM: "sm",
-        mobileL: "md",
-        tablet: "xl",
-        desktopM: "xxl",
-        desktopL: "xxl",
-        desktop4k: "xxl",
-    },
-};