Merge branch 'master' of github.com:razorpay/blade

razorpay · Aug 1, 2023 · c4d2774 · c4d2774
2 parents f38ee52 + 1427160
commit c4d2774
Show file tree

Hide file tree

Showing 122 changed files with 1,158 additions and 430 deletions.
diff --git a/.changeset/twelve-hornets-speak.md b/.changeset/twelve-hornets-speak.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+refactor: move to `React.ReactElement` type
diff --git a/packages/blade/.storybook/react/main.js b/packages/blade/.storybook/react/main.js
@@ -1,4 +1,5 @@
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const { DefinePlugin } = require('webpack');
 const path = require('path');
 
 module.exports = {
@@ -56,6 +57,13 @@ module.exports = {
       }),
     ];
 
+    config.plugins = [
+      ...(config.plugins || []),
+      new DefinePlugin({
+        __DEV__: true,
+      }),
+    ];
+
     // Return the altered config
     return {
       ...config,

diff --git a/packages/blade/CHANGELOG.md b/packages/blade/CHANGELOG.md
@@ -1,5 +1,21 @@
 # @razorpay/blade
 
+## 9.5.0
+
+### Minor Changes
+
+- cbed430f: feat: strip off logs & errors in production builds
+
+### Patch Changes
+
+- 2be798d9: feat: add zIndex prop to Tooltip
+
+## 9.4.1
+
+### Patch Changes
+
+- ebd3cbda: feat: add zIndex prop for Modal
+
 ## 9.4.0
 
 ### Minor Changes

diff --git a/packages/blade/jest.web.config.js b/packages/blade/jest.web.config.js
@@ -24,6 +24,9 @@ const baseConfig = {
     '^\\~utils/(.*)': '<rootDir>/src/utils/$1',
     '^\\~tokens/(.*)': '<rootDir>/src/tokens/$1',
   },
+  globals: {
+    __DEV__: true,
+  },
 };
 
 module.exports = {

diff --git a/packages/blade/package.json b/packages/blade/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "9.4.0",
+  "version": "9.5.0",
   "license": "MIT",
   "engines": {
     "node": ">=18.12.1"
@@ -39,7 +39,9 @@
       },
       "default": {
         "types": "./build/components/index.d.ts",
-        "default": "./build/components/index.web.js"
+        "development": "./build/components/index.development.web.js",
+        "production": "./build/components/index.production.web.js",
+        "default": "./build/components/index.development.web.js"
       }
     },
     "./tokens": {
@@ -49,7 +51,9 @@
       },
       "default": {
         "types": "./build/tokens/index.d.ts",
-        "default": "./build/tokens/index.web.js"
+        "development": "./build/tokens/index.development.web.js",
+        "production": "./build/tokens/index.production.web.js",
+        "default": "./build/tokens/index.development.web.js"
       }
     },
     "./utils": {
@@ -59,7 +63,9 @@
       },
       "default": {
         "types": "./build/utils/index.d.ts",
-        "default": "./build/utils/index.web.js"
+        "development": "./build/utils/index.development.web.js",
+        "production": "./build/utils/index.production.web.js",
+        "default": "./build/utils/index.development.web.js"
       }
     }
   },
@@ -80,8 +86,9 @@
     "types:copy-declarations:native": "copyfiles -u 1 \"src/**/*.d.ts\" build/types/native",
     "build:generate-root-imports": "rollup -c && node ./scripts/generateRootImports.js",
     "build:clean-declarations": "rm -rf build/types",
-    "build:react": "FRAMEWORK=REACT rollup -c && node ./scripts/generateRootImports.js",
-    "build:react-native": "FRAMEWORK=REACT_NATIVE rollup -c && node ./scripts/generateRootImports.js",
+    "build:react-dev": "FRAMEWORK=REACT NODE_ENV=development rollup -c",
+    "build:react-prod": "FRAMEWORK=REACT NODE_ENV=production rollup -c",
+    "build:react-native": "FRAMEWORK=REACT_NATIVE rollup -c",
     "build:generate-css-variables": "GENERATE_CSS_VARIABLES=true FRAMEWORK=REACT rollup -c && node ./scripts/generateCssThemeVariables.js",
     "build:clean-theme-bundle": "rm -rf build/js-bundle-for-css",
     "react-native:get-stories": "sb-rn-get-stories --config-path=./.storybook/react-native && yarn prettier --write ./.storybook/react-native/storybook.requires.js",
@@ -133,6 +140,7 @@
     "@rollup/plugin-babel": "5.3.1",
     "@rollup/plugin-commonjs": "21.1.0",
     "@rollup/plugin-node-resolve": "13.1.1",
+    "@rollup/plugin-replace": "5.0.2",
     "@size-limit/preset-big-lib": "8.2.4",
     "@storybook/addon-a11y": "6.3.0",
     "@storybook/addon-actions": "6.3.0",
@@ -247,15 +255,15 @@
     "files": [
       {
         "friendlyName": "Web Components",
-        "path": "./build/components/index.web.js"
+        "path": "./build/components/index.production.web.js"
       },
       {
         "friendlyName": "React Native Components",
         "path": "./build/components/index.native.js"
       },
       {
         "friendlyName": "Web Tokens",
-        "path": "./build/tokens/index.web.js"
+        "path": "./build/tokens/index.production.web.js"
       },
       {
         "friendlyName": "React Native Tokens",
@@ -267,7 +275,7 @@
       },
       {
         "friendlyName": "Web Utils",
-        "path": "./build/utils/index.web.js"
+        "path": "./build/utils/index.production.web.js"
       },
       {
         "friendlyName": "React Native Utils",
@@ -281,14 +289,14 @@
   "size-limit": [
     {
       "name": "Import Button only",
-      "path": "./build/components/index.web.js",
+      "path": "./build/components/index.production.web.js",
       "import": "{ Button }",
       "limit": "20 kb",
       "running": false
     },
     {
       "name": "Import Text only",
-      "path": "./build/components/index.web.js",
+      "path": "./build/components/index.production.web.js",
       "import": "{ Text }",
       "limit": "15 kb",
       "running": false

diff --git a/packages/blade/rollup.config.js b/packages/blade/rollup.config.js
@@ -6,6 +6,7 @@ import pluginResolve from '@rollup/plugin-node-resolve';
 import pluginCommonjs from '@rollup/plugin-commonjs';
 import pluginDeclarations from 'rollup-plugin-dts';
 import pluginAlias from '@rollup/plugin-alias';
+import pluginReplace from '@rollup/plugin-replace';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import ts from 'typescript';
 
@@ -61,13 +62,19 @@ const getWebConfig = ({ exportCategory }) => ({
   input: `${inputRootDirectory}/${exportCategory}/index.ts`,
   output: [
     {
-      file: `${outputRootDirectory}/${exportCategory}/index.web.js`,
+      file: `${outputRootDirectory}/${exportCategory}/index.${
+        process.env.NODE_ENV || 'development'
+      }.web.js`,
       format: 'esm',
       sourcemap: true,
     },
   ],
   external: (id) => id.includes('@babel/runtime'),
   plugins: [
+    pluginReplace({
+      __DEV__: process.env.NODE_ENV !== 'production',
+      preventAssignment: true,
+    }),
     pluginPeerDepsExternal(),
     pluginResolve({ extensions: webExtensions }),
     pluginCommonjs(),

diff --git a/packages/blade/src/components/Accordion/AccordionButton.native.tsx b/packages/blade/src/components/Accordion/AccordionButton.native.tsx
@@ -79,8 +79,10 @@ const _AccordionButton = ({ index, icon: Icon, children }: AccordionButtonProps)
       <Icon size="medium" color={iconColor} marginRight="spacing.3" marginY="spacing.2" />
     );
 
-    if (_index && _icon) {
-      throw new Error(`[Blade: Accordion]: showNumberPrefix and icon shouldn't be used together`);
+    if (__DEV__) {
+      if (_index && _icon) {
+        throw new Error(`[Blade: Accordion]: showNumberPrefix and icon shouldn't be used together`);
+      }
     }
 
     return (

diff --git a/packages/blade/src/components/Accordion/AccordionButton.web.tsx b/packages/blade/src/components/Accordion/AccordionButton.web.tsx
@@ -28,8 +28,10 @@ const _AccordionButton = ({ index, icon: Icon, children }: AccordionButtonProps)
     <Icon size="medium" color="currentColor" marginRight="spacing.3" marginY="spacing.2" />
   );
 
-  if (_index && _icon) {
-    throw new Error(`[Blade: Accordion]: showNumberPrefix and icon shouldn't be used together`);
+  if (__DEV__) {
+    if (_index && _icon) {
+      throw new Error(`[Blade: Accordion]: showNumberPrefix and icon shouldn't be used together`);
+    }
   }
 
   const isItemExpanded = expandedIndex === index;

diff --git a/packages/blade/src/components/Accordion/AccordionContext.tsx b/packages/blade/src/components/Accordion/AccordionContext.tsx
@@ -11,12 +11,14 @@ const AccordionContext = createContext<AccordionContextState | null>(null);
 
 const useAccordion = (): AccordionContextState => {
   const accordionContext = useContext(AccordionContext);
-  if (!accordionContext) {
-    throw new Error(
-      `[Blade: AccordionContext]: useAccordion should be only used within AccordionContext`,
-    );
+  if (__DEV__) {
+    if (!accordionContext) {
+      throw new Error(
+        `[Blade: AccordionContext]: useAccordion should be only used within AccordionContext`,
+      );
+    }
   }
-  return accordionContext;
+  return accordionContext!;
 };
 
 export { AccordionContext, useAccordion, AccordionContextState };
diff --git a/packages/blade/src/components/Accordion/__tests__/Accordion.native.test.tsx b/packages/blade/src/components/Accordion/__tests__/Accordion.native.test.tsx
@@ -99,7 +99,7 @@ describe('<Accordion />', () => {
     const description2 =
       'Just use Razorpay. You may also check our docs for detailed instructions. Please use the search functionality to ask your queries.';
 
-    const ControlledAccordionExample = (): JSX.Element => {
+    const ControlledAccordionExample = (): React.ReactElement => {
       const [expandedIndex, setExpandedIndex] = useState(-1);
 
       return (

diff --git a/packages/blade/src/components/Accordion/__tests__/Accordion.web.test.tsx b/packages/blade/src/components/Accordion/__tests__/Accordion.web.test.tsx
@@ -91,7 +91,7 @@ describe('<Accordion />', () => {
     const externalButton2 = 'Expand Second';
     const externalButtonCollapse = 'Collapse';
 
-    const ControlledAccordionExample = (): JSX.Element => {
+    const ControlledAccordionExample = (): React.ReactElement => {
       const [expandedIndex, setExpandedIndex] = useState(-1);
 
       return (

diff --git a/packages/blade/src/components/ActionList/ActionList.tsx b/packages/blade/src/components/ActionList/ActionList.tsx
@@ -18,10 +18,12 @@ const ActionListContext = React.createContext<ActionListContextProp>({ surfaceLe
 const useActionListContext = (): ActionListContextProp => {
   const context = React.useContext(ActionListContext);
 
-  if (!context) {
-    throw new Error(
-      '[Blade ActionList]: useActionListContext has to be called inside ActionListContext.Provider',
-    );
+  if (__DEV__) {
+    if (!context) {
+      throw new Error(
+        '[Blade ActionList]: useActionListContext has to be called inside ActionListContext.Provider',
+      );
+    }
   }
   return context;
 };
@@ -65,7 +67,11 @@ type ActionListProps = {
  * ```
  *
  */
-const _ActionList = ({ children, surfaceLevel = 2, testID }: ActionListProps): JSX.Element => {
+const _ActionList = ({
+  children,
+  surfaceLevel = 2,
+  testID,
+}: ActionListProps): React.ReactElement => {
   const {
     setOptions,
     actionListItemRef,

diff --git a/packages/blade/src/components/ActionList/ActionListItem.tsx b/packages/blade/src/components/ActionList/ActionListItem.tsx
@@ -81,7 +81,7 @@ const ActionListItemContext = React.createContext<{
   isDisabled?: ActionListItemProps['isDisabled'];
 }>({});
 
-const ActionListSectionDivider = (): JSX.Element => (
+const ActionListSectionDivider = (): React.ReactElement => (
   <Divider
     {...makeAccessible({
       role: getSeparatorRole(),
@@ -111,7 +111,7 @@ const _ActionListSection = ({
   children,
   testID,
   _hideDivider,
-}: ActionListSectionProps): JSX.Element => {
+}: ActionListSectionProps): React.ReactElement => {
   const { surfaceLevel } = useActionListContext();
 
   return (
@@ -151,7 +151,7 @@ const ActionListSection = assignWithoutSideEffects(_ActionListSection, {
   componentId: componentIds.ActionListSection,
 });
 
-const _ActionListItemIcon = ({ icon }: { icon: IconComponent }): JSX.Element => {
+const _ActionListItemIcon = ({ icon }: { icon: IconComponent }): React.ReactElement => {
   const Icon = icon;
   const { intent, isDisabled } = React.useContext(ActionListItemContext);
   return (
@@ -302,7 +302,7 @@ const ActionListItemBody = React.memo(_ActionListItemBody);
  * </ActionList>
  * ```
  */
-const _ActionListItem = (props: ActionListItemProps): JSX.Element => {
+const _ActionListItem = (props: ActionListItemProps): React.ReactElement => {
   const {
     activeIndex,
     dropdownBaseId,
@@ -348,10 +348,12 @@ const _ActionListItem = (props: ActionListItemProps): JSX.Element => {
   }, [props.leading, props.trailing]);
 
   React.useEffect(() => {
-    if (dropdownTriggerer === 'SelectInput' && props.intent === 'negative') {
-      throw new Error(
-        '[ActionListItem]: negative intent ActionListItem cannot be used inside Dropdown with SelectInput trigger',
-      );
+    if (__DEV__) {
+      if (dropdownTriggerer === 'SelectInput' && props.intent === 'negative') {
+        throw new Error(
+          '[ActionListItem]: negative intent ActionListItem cannot be used inside Dropdown with SelectInput trigger',
+        );
+      }
     }
   }, [props.intent, dropdownTriggerer]);