Added Link Component to Svelte | Cursor Rules for Effecient React to Svelte Migration

.cursor/rules/svelte-migration.mdc

@@ -0,0 +1,36 @@
+---
+description:
+globs:
+alwaysApply: false
+---
+
+You work in design system of Razorpay and you are migrating existing components of Blade from React to Svelte. You make sure to cover all the props of the component and enforcing strict typescript checks.
+
+- You refer to existing components for expected props and HTML structure
+- You understand the common props that we normally use, compound component structure that we normally use and follow WISIWYG (What You See is What You Get) Philosophy.
+- You create the components in - packages/blade-svelte/src/components folder
+- Before writing the component refer to the corresponding React component written in - `packages/blade/src/components` folder
+- Wherever you are unsure about some practice, just ask for confirmation
+- Before writing the component, you discuss the approach on how you are writing the component and only write post confirmation
+- The API structure of the components should clean and easier to understand and integrate
+- Some component might be using another component like Link or Button component uses Icon. Wherever this case is there confirm whether to make a migration for that or not for the imported components like Icons
+Don't use createEventDispatcher for event handlers like on:click etc. Instead use a prop based mechanism expect and pass a prop
+- Any utility function like - `packages/blade/src/utils/makeBorderSize/index.ts` should be placed in blade core util directory - `packages/blade-core/src/utils` and not within the blade-svelte directory.
+- Whenever any utility import is encountered check in - `packagaes/blade-core/src/utils` directory, if the util file is not present or same function is not presend ask for a confirmation before adding.
+
+## Blade Component Svelte Guidelines
+### Key Examples for references
+Study the following React components for reference and understanding of props of the components
+
+- `packages/blade/src/components/Button`
+- `packages/blade/src/components/Link`
+- `packages/blade/src/components/Input`
+You can look for other components in the directory
+
+## Import Guidelines
+- Components in svelte directory have all the blade tokens listed in packages/blade-svelte/src/theme/theme.css
+- There is an existing example packages/blade-svelte/src/components/Button which you can refer to for any example
+- You can use common function from packages/blade-core if needed. However do confirm before you implement
+
+## Testing Guidelines
+Add the component in packages/blade-svelte/src/App.svelte as well which will be a testing playground for testing whether component is behaving as expected or not

packages/blade-core/package.json

@@ -22,10 +22,12 @@
     "typecheck:web": "tsc --noEmit --project tsconfig-typecheck.web.json",
     "typecheck:native": "tsc --noEmit --project tsconfig-typecheck.native.json",
     "build": "yarn build:generate-types && yarn build:rollup",
+    "build:watch": "yarn build:generate-types && yarn build:rollup:watch",
     "build:generate-types": "yarn build:generate-types:web && yarn build:generate-types:native",
     "build:generate-types:web": "tsc --project tsconfig-generate-types.web.json",
     "build:generate-types:native": "tsc --project tsconfig-generate-types.native.json",
     "build:rollup": "rollup --config rollup.config.mjs",
+    "build:rollup:watch": "rollup --config rollup.config.mjs --watch",
     "build:rollup:web": "FRAMEWORK=REACT rollup --config rollup.config.mjs",
     "build:rollup:native": "FRAMEWORK=REACT_NATIVE rollup --config rollup.config.mjs",
     "test": "echo 'No tests configured yet'"
@@ -69,11 +71,15 @@
   "exports": {
     "./tokens": {
       "types": "./dist/types/tokens/index.d.ts",
+      "development": "./dist/lib/web/development/tokens/index.js",
+      "production": "./dist/lib/web/production/tokens/index.js",
       "default": "./dist/lib/web/production/tokens/index.js"
     },
     "./tokens/theme.css": "./dist/lib/web/production/tokens/theme.css",
     "./utils": {
       "types": "./dist/types/utils/index.d.ts",
+      "development": "./dist/lib/web/development/utils/index.js",
+      "production": "./dist/lib/web/production/utils/index.js",
       "default": "./dist/lib/web/production/utils/index.js"
     }
   }

packages/blade-core/src/utils/index.ts

@@ -14,6 +14,9 @@ export * from './lodashButBetter/throttle';
 export * from './hasSameObjectStructure';
 export * from './isPartialMatchObjectKeys';
 export * from './logger';
+export * from './makeAccessible';
+export * from './makeAnalyticsAttribute';
+export * from './metaAttribute';
 export * from './makeBezier';
 export * from './platform';
 export * from './types';

packages/blade-core/src/utils/makeAccessible/accessibilityMap.ts

@@ -0,0 +1,63 @@
+import type { AccessibilityMap } from './types';
+
+export const accessibilityValue = {
+  valueMax: 'aria-valuemax',
+  valueMin: 'aria-valuemin',
+  valueNow: 'aria-valuenow',
+  valueText: 'aria-valuetext',
+};
+
+export const accessibilityState = {
+  selected: 'aria-selected',
+  disabled: 'aria-disabled',
+  expanded: 'aria-expanded',
+  busy: 'aria-busy',
+  checked: 'aria-checked',
+};
+
+// TODO:
+// accessibilityViewIsModal
+export const accessibilityMap: AccessibilityMap = {
+  ...accessibilityState,
+  ...accessibilityValue,
+  activeDescendant: 'aria-activedescendant',
+  atomic: 'aria-atomic',
+  autoComplete: 'aria-autocomplete',
+  colCount: 'aria-colcount',
+  colIndex: 'aria-colindex',
+  colSpan: 'aria-colspan',
+  controls: 'aria-controls',
+  describedBy: 'aria-describedby',
+  details: 'aria-details',
+  errorMessage: 'aria-errormessage',
+  flowTo: 'aria-flowto',
+  hasPopup: 'aria-haspopup',
+  hidden: 'aria-hidden',
+  invalid: 'aria-invalid',
+  keyShortcuts: 'aria-keyshortcuts',
+  label: 'aria-label',
+  labelledBy: 'aria-labelledby',
+  liveRegion: 'aria-live',
+  modal: 'aria-modal',
+  multiline: 'aria-multiline',
+  multiSelectable: 'aria-multiselectable',
+  orientation: 'aria-orientation',
+  owns: 'aria-owns',
+  placeholder: 'aria-placeholder',
+  posInSet: 'aria-posinset',
+  pressed: 'aria-pressed',
+  readOnly: 'aria-readonly',
+  required: 'aria-required',
+  role: 'role',
+  roleDescription: 'aria-roledescription',
+  rowCount: 'aria-rowcount',
+  rowIndex: 'aria-rowindex',
+  rowSpan: 'aria-rowspan',
+  setSize: 'aria-setsize',
+  sort: 'aria-sort',
+  current: 'aria-current',
+  dropEffect: 'aria-dropeffect',
+  grabbed: 'aria-grabbed',
+  level: 'aria-level',
+  relevant: 'aria-relevant',
+};

packages/blade-core/src/utils/makeAccessible/index.ts

@@ -0,0 +1,2 @@
+export * from './makeAccessible';
+export * from './types';

packages/blade-core/src/utils/makeAccessible/makeAccessible.ts

@@ -0,0 +1,27 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { accessibilityMap } from './accessibilityMap';
+import type { AccessibilityMap, AccessibilityProps } from './types';
+import { logger } from '~utils/logger';
+
+export const makeAccessible = (props: Partial<AccessibilityProps>): Record<string, unknown> => {
+  const newProps: Record<string, any> = {};
+
+  // eslint-disable-next-line guard-for-in
+  for (const key in props) {
+    const propKey = key as keyof AccessibilityMap;
+    const propValue = props[propKey];
+    const accessibilityAttribute = accessibilityMap[propKey];
+
+    if (accessibilityAttribute) {
+      newProps[accessibilityAttribute] = propValue;
+    } else if (__DEV__) {
+      logger({
+        message: `No mapping found for ${propKey}. Make sure you have entered valid key`,
+        moduleName: 'makeAccessible',
+        type: 'warn',
+      });
+    }
+  }
+
+  return newProps;
+};