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

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",
-    },
-};

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

@@ -1,113 +0,0 @@
-import type { API, FileInfo, JSCodeshift } from "jscodeshift";
-
-import { CodemodUtils } from "../codemod-utils";
-import { mediaQueryMap } from "./data";
-
-// ======= Constants ======= //
-
-const IMPORT_PATHS = {
-    V2_MEDIA: "@lifesg/react-design-system/v2_media",
-    DESIGN_SYSTEM: "@lifesg/react-design-system",
-    THEME: "@lifesg/react-design-system/theme",
-};
-
-const IMPORT_SPECIFIERS = {
-    V2_MEDIA_QUERY: "V2_MediaQuery",
-    MEDIA_QUERY: "MediaQuery",
-    V2_MEDIA_WIDTHS: "V2_MediaWidths",
-};
-
-const MEMBER_EXPRESSION_PROPERTIES = {
-    MAX_WIDTH: "MaxWidth",
-    MIN_WIDTH: "MinWidth",
-};
-
-const WARNINGS = {
-    DEPRECATED_USAGE: `\x1b[31m[MIGRATION] V2_MediaWidths requires manual migration to Breakpoint. Refer to <"https://github.com/LifeSG/react-design-system/wiki/Migrating-to-V3">. File:\x1b[0m`,
-};
-
-const IDENTIFIERS = {
-    MEDIA_QUERY: "MediaQuery",
-};
-
-// ======= Transformer Function ======= //
-export default function transformer(file: FileInfo, api: API) {
-    const j: JSCodeshift = api.jscodeshift;
-    const source = j(file.source);
-
-    const isV2MediaQueryImported = CodemodUtils.hasImport(
-        source,
-        api,
-        [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_MEDIA],
-        IMPORT_SPECIFIERS.V2_MEDIA_QUERY
-    );
-    const isV2MediaWidthsImported = CodemodUtils.hasImport(
-        source,
-        api,
-        [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_MEDIA],
-        IMPORT_SPECIFIERS.V2_MEDIA_WIDTHS
-    );
-
-    // Detect usage of V2_MediaQuery
-    // Replace V2_MediaQuery with V3 MediaQuery
-    if (isV2MediaQueryImported) {
-        CodemodUtils.addImport(
-            source,
-            api,
-            IMPORT_PATHS.THEME,
-            IMPORT_SPECIFIERS.MEDIA_QUERY
-        );
-
-        CodemodUtils.removeImport(
-            source,
-            api,
-            [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_MEDIA],
-            IMPORT_SPECIFIERS.V2_MEDIA_QUERY
-        );
-
-        // Rename all instances of V2_MediaQuery to MediaQuery
-        source
-            .find(j.Identifier, { name: IMPORT_SPECIFIERS.V2_MEDIA_QUERY })
-            .forEach((path) => {
-                path.node.name = IMPORT_SPECIFIERS.MEDIA_QUERY;
-            });
-
-        // Map V2 to V3 breakpoints
-        source.find(j.MemberExpression).forEach((path) => {
-            const object = path.node.object;
-            const property = path.node.property;
-
-            if (
-                j.MemberExpression.check(object) &&
-                j.Identifier.check(object.object) &&
-                object.object.name === IDENTIFIERS.MEDIA_QUERY &&
-                j.Identifier.check(object.property) &&
-                (object.property.name ===
-                    MEMBER_EXPRESSION_PROPERTIES.MAX_WIDTH ||
-                    object.property.name ===
-                        MEMBER_EXPRESSION_PROPERTIES.MIN_WIDTH) &&
-                j.Identifier.check(property)
-            ) {
-                const queryType = object.property
-                    .name as keyof typeof mediaQueryMap;
-                const mediaKey =
-                    property.name as keyof (typeof mediaQueryMap)[typeof queryType];
-
-                if (
-                    mediaQueryMap[queryType] &&
-                    mediaQueryMap[queryType][mediaKey]
-                ) {
-                    const newMediaKey = mediaQueryMap[queryType][mediaKey];
-                    property.name = newMediaKey;
-                }
-            }
-        });
-    }
-
-    // Link to migration docs for V2_MediaWidths deprecation
-    if (isV2MediaWidthsImported) {
-        console.error(`${WARNINGS.DEPRECATED_USAGE} ${file.path}`);
-    }
-
-    return source.toSource();
-}

package/codemods/migrate-text/data.ts

@@ -1,48 +0,0 @@
-export const textComponentMap = {
-    D1: "HeadingXXL",
-    D2: "HeadingXL",
-    D3: "HeadingMD",
-    D4: "HeadingSM",
-    H1: "HeadingLG",
-    H2: "HeadingMD",
-    H3: "HeadingSM",
-    H4: "HeadingXS",
-    H5: "BodyMD",
-    H6: "BodySM",
-    DBody: "HeadingSM",
-    Body: "BodyBL",
-    BodySmall: "BodyMD",
-    XSmall: "BodyXS",
-    "Hyperlink.Default": "LinkBL",
-    "Hyperlink.Small": "LinkMD",
-};
-
-export const textStyleFontMap = {
-    D1: "heading-xxl",
-    D2: "heading-xl",
-    D3: "heading-md",
-    D4: "heading-sm",
-    H1: "heading-lg",
-    H2: "heading-md",
-    H3: "heading-sm",
-    H4: "heading-xs",
-    H5: "body-md",
-    H6: "body-sm",
-    DBody: "heading-sm",
-    Body: "body-baseline",
-    BodySmall: "body-md",
-    XSmall: "body-xs",
-};
-
-export const weightMap = {
-    regular: "regular",
-    semibold: "semibold",
-    bold: "bold",
-    light: "light",
-    black: "bold",
-    400: "regular",
-    600: "semibold",
-    700: "bold",
-    300: "light",
-    900: "bold",
-};