@preply/ds-ai-core 11.1.0

package/src/tools/search-token/__tests__/search-token-by-name.test.ts

@@ -0,0 +1,384 @@
+import { describe, expect, it, vi } from 'vitest';
+import { searchTokenByName } from '../search-token-by-name';
+
+vi.mock(import('../context/get-tokens-data'), () => ({
+    getTokensData: () => ({
+        web: [
+            {
+                name: 'spacing.8',
+                scss: '$spacing-8',
+                less: '@spacing-8',
+                typescript: 'spacing[8]',
+                value: '8px',
+                private: false,
+            },
+            {
+                name: 'spacing.16',
+                scss: '$spacing-16',
+                less: '@spacing-16',
+                typescript: 'spacing[16]',
+                value: '16px',
+                private: false,
+            },
+            {
+                name: 'heading.huge.lineHeight',
+                scss: '$heading-huge-lineHeight',
+                less: '@heading-huge-lineHeight',
+                typescript: 'heading.huge.lineHeight',
+                value: '68px',
+                private: false,
+            },
+            {
+                name: 'dsInternalPrimitive.color.background.primary',
+                scss: '$dsInternalPrimitive-color-background-primary',
+                less: '@dsInternalPrimitive-color-background-primary',
+                typescript: 'dsInternalPrimitive.color.background.primary',
+                value: '#FFFFFF',
+                private: true,
+            },
+        ],
+        'react-native': [
+            {
+                name: 'spacing.8',
+                scss: '$spacing-8',
+                less: '@spacing-8',
+                typescript: 'spacing[8]',
+                value: 8,
+                private: false,
+            },
+            {
+                name: 'spacing.16',
+                scss: '$spacing-16',
+                less: '@spacing-16',
+                typescript: 'spacing[16]',
+                value: 16,
+                private: false,
+            },
+            {
+                name: 'heading.huge.lineHeight',
+                scss: '$heading-huge-lineHeight',
+                less: '@heading-huge-lineHeight',
+                typescript: 'heading.huge.lineHeight',
+                value: 68,
+                private: false,
+            },
+            {
+                name: 'dsInternalPrimitive.color.background.primary',
+                scss: '$dsInternalPrimitive-color-background-primary',
+                less: '@dsInternalPrimitive-color-background-primary',
+                typescript: 'dsInternalPrimitive.color.background.primary',
+                value: '#FAFAFA',
+                private: true,
+            },
+        ],
+    }),
+}));
+
+describe('searchTokenByName tool', () => {
+    it('returns exact match by raw name', () => {
+        expect(
+            searchTokenByName.callback({
+                name: 'spacing.8',
+                platform: 'web',
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "Found exact match for "spacing.8":",
+            "token: $spacing-8
+          value: 8px",
+            "Also, here you can find some tokens with similar names:",
+            "---
+          token: $spacing-16
+          value: 16px
+          ---",
+          ]
+        `);
+    });
+
+    it('returns exact match by scss format', () => {
+        const result = searchTokenByName.callback({
+            name: '$spacing-8',
+            platform: 'web',
+        });
+
+        expect(result).toMatchInlineSnapshot(`
+          [
+            "Found exact match for "$spacing-8":",
+            "token: $spacing-8
+          value: 8px",
+            "Also, here you can find some tokens with similar names:",
+            "---
+          token: $spacing-16
+          value: 16px
+          ---",
+          ]
+        `);
+    });
+
+    it('returns exact match by less format', () => {
+        const result = searchTokenByName.callback({
+            name: '@spacing-8',
+            platform: 'web',
+            format: 'less',
+        });
+
+        expect(result).toMatchInlineSnapshot(`
+          [
+            "Found exact match for "@spacing-8":",
+            "token: "@spacing-8"
+          value: 8px",
+            "Also, here you can find some tokens with similar names:",
+            "---
+          token: "@spacing-16"
+          value: 16px
+          ---",
+          ]
+        `);
+    });
+
+    it('returns exact match by typescript format', () => {
+        const result = searchTokenByName.callback({
+            name: 'spacing[8]',
+            platform: 'web',
+            format: 'typescript',
+        });
+
+        expect(result).toMatchInlineSnapshot(`
+          [
+            "Found exact match for "spacing[8]":",
+            "token: spacing[8]
+          value: 8px",
+            "Also, here you can find some tokens with similar names:",
+            "---
+          token: spacing[16]
+          value: 16px
+          ---",
+          ]
+        `);
+    });
+
+    it('returns fuzzy results when no exact match', () => {
+        expect(
+            searchTokenByName.callback({
+                name: 'spacing.32',
+                platform: 'web',
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "There is no exact match for "spacing.32", but here are some similar tokens:",
+            "---
+          token: $spacing-8
+          value: 8px
+          ---
+          token: $spacing-16
+          value: 16px
+          ---",
+          ]
+        `);
+    });
+
+    it('returns not-found when no matches', () => {
+        expect(
+            searchTokenByName.callback({
+                name: 'definitely_missing_token_name_123',
+                platform: 'web',
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "No results found for "definitely_missing_token_name_123"",
+          ]
+        `);
+    });
+
+    it('defaults to scss format when format is omitted', () => {
+        expect(
+            searchTokenByName.callback({
+                name: 'spacing.8',
+                platform: 'web',
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "Found exact match for "spacing.8":",
+            "token: $spacing-8
+          value: 8px",
+            "Also, here you can find some tokens with similar names:",
+            "---
+          token: $spacing-16
+          value: 16px
+          ---",
+          ]
+        `);
+    });
+
+    it('ignores format for react-native and returns typescript names', () => {
+        expect(
+            searchTokenByName.callback({
+                name: 'spacing.8',
+                platform: 'react-native',
+                format: 'less',
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "Found exact match for "spacing.8":",
+            "token: spacing[8]
+          value: 8",
+            "Also, here you can find some tokens with similar names:",
+            "---
+          token: spacing[16]
+          value: 16
+          ---",
+          ]
+        `);
+    });
+
+    it('includes example when includeExample is true', () => {
+        const result = searchTokenByName.callback({
+            name: 'spacing.8',
+            platform: 'web',
+            includeExample: true,
+        });
+
+        expect(result).toMatchInlineSnapshot(`
+          [
+            "Found exact match for "spacing.8":",
+            "token: $spacing-8
+          value: 8px",
+            "Here is an example of how to use design-system tokens in scss:",
+            "@use '@preply/ds-web-core/dist/generated/tokens' as *;
+
+          .MyComponent {
+              box-shadow: $dropShadow-1-shorthand;
+          }",
+            "Also, here you can find some tokens with similar names:",
+            "---
+          token: $spacing-16
+          value: 16px
+          ---",
+          ]
+        `);
+    });
+
+    it('includes react-native example', () => {
+        const result = searchTokenByName.callback({
+            name: 'spacing.8',
+            platform: 'react-native',
+            includeExample: true,
+        });
+
+        expect(result).toMatchInlineSnapshot(`
+          [
+            "Found exact match for "spacing.8":",
+            "token: spacing[8]
+          value: 8",
+            "Here is an example of how to use design-system tokens in react-native:",
+            "import { View } from 'react-native';
+          import { color } from '@preply/ds-core';
+          import { createStyleSheet, useStyleSheet } from '@preply/ds-rn-core';
+
+          const rawStyles = createStyleSheet({
+              container: {
+                  backgroundColor: color.background.primary,
+              },
+          });
+
+          export const MyComponent = () => {
+              const styles = useStyleSheet(rawStyles);
+
+              return <View style={styles.container} />;
+          };",
+            "Also, here you can find some tokens with similar names:",
+            "---
+          token: spacing[16]
+          value: 16
+          ---",
+          ]
+        `);
+    });
+
+    it('filters out private tokens by default', () => {
+        expect(
+            searchTokenByName.callback({
+                name: 'dsInternalPrimitive.color.background.primary',
+                platform: 'web',
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "No results found for "dsInternalPrimitive.color.background.primary"",
+          ]
+        `);
+    });
+
+    it('includes private tokens when includePrivate is true', () => {
+        const result = searchTokenByName.callback({
+            name: 'dsInternalPrimitive.color.background.primary',
+            platform: 'web',
+            includePrivate: true,
+        });
+
+        expect(result).toMatchInlineSnapshot(`
+          [
+            "Found exact match for "dsInternalPrimitive.color.background.primary":",
+            "token: $dsInternalPrimitive-color-background-primary
+          value: "#FFFFFF"",
+          ]
+        `);
+    });
+
+    it('includes less example for web', () => {
+        const result = searchTokenByName.callback({
+            name: 'spacing.8',
+            platform: 'web',
+            format: 'less',
+            includeExample: true,
+        });
+
+        expect(result).toMatchInlineSnapshot(`
+          [
+            "Found exact match for "spacing.8":",
+            "token: "@spacing-8"
+          value: 8px",
+            "Here is an example of how to use design-system tokens in less:",
+            "@import '~@preply/ds-web-core/dist/generated/tokens.less';
+
+          .MyComponent {
+              box-shadow: @dropShadow-1-shorthand;
+          }",
+            "Also, here you can find some tokens with similar names:",
+            "---
+          token: "@spacing-16"
+          value: 16px
+          ---",
+          ]
+        `);
+    });
+
+    it('includes typescript example for web', () => {
+        const result = searchTokenByName.callback({
+            name: 'spacing.8',
+            platform: 'web',
+            format: 'typescript',
+            includeExample: true,
+        });
+
+        expect(result).toMatchInlineSnapshot(`
+          [
+            "Found exact match for "spacing.8":",
+            "token: spacing[8]
+          value: 8px",
+            "Here is an example of how to use design-system tokens in typescript:",
+            "import styled from 'styled-components';
+          import { dropShadow } from '@preply/ds-core';
+          import { getTokenVar } from '@preply/ds-web-core';
+
+          const MyComponent = styled.div\`
+              box-shadow: \${getTokenVar(dropShadow[1].shorthand)};
+          \`;",
+            "Also, here you can find some tokens with similar names:",
+            "---
+          token: spacing[16]
+          value: 16px
+          ---",
+          ]
+        `);
+    });
+});

package/src/tools/search-token/__tests__/search-token-by-value.test.ts

@@ -0,0 +1,250 @@
+import { describe, expect, it, vi } from 'vitest';
+import { searchTokenByValue } from '../search-token-by-value';
+
+vi.mock(import('../context/get-tokens-data'), () => ({
+    getTokensData: () => ({
+        web: [
+            {
+                name: 'spacing.8',
+                scss: '$spacing-8',
+                less: '@spacing-8',
+                typescript: 'spacing[8]',
+                value: '8px',
+                private: false,
+            },
+            {
+                name: 'action.base.borderRadius',
+                scss: '$action-base-borderRadius',
+                less: '@action-base-borderRadius',
+                typescript: 'action.base.borderRadius',
+                value: '8px',
+                private: false,
+            },
+            {
+                name: 'spacing.16',
+                scss: '$spacing-16',
+                less: '@spacing-16',
+                typescript: 'spacing[16]',
+                value: '16px',
+                private: false,
+            },
+            {
+                name: 'dsInternalPrimitive.color.background.primary',
+                scss: '$dsInternalPrimitive-color-background-primary',
+                less: '@dsInternalPrimitive-color-background-primary',
+                typescript: 'dsInternalPrimitive.color.background.primary',
+                value: '#FFFFFF',
+                private: true,
+            },
+        ],
+        'react-native': [
+            {
+                name: 'spacing.8',
+                scss: '$spacing-8',
+                less: '@spacing-8',
+                typescript: 'spacing[8]',
+                value: 8,
+                private: false,
+            },
+            {
+                name: 'action.base.borderRadius',
+                scss: '$action-base-borderRadius',
+                less: '@action-base-borderRadius',
+                typescript: 'action.base.borderRadius',
+                value: 8,
+                private: false,
+            },
+            {
+                name: 'spacing.16',
+                scss: '$spacing-16',
+                less: '@spacing-16',
+                typescript: 'spacing[16]',
+                value: 16,
+                private: false,
+            },
+            {
+                name: 'dsInternalPrimitive.color.background.primary',
+                scss: '$dsInternalPrimitive-color-background-primary',
+                less: '@dsInternalPrimitive-color-background-primary',
+                typescript: 'dsInternalPrimitive.color.background.primary',
+                value: '#FAFAFA',
+                private: true,
+            },
+        ],
+    }),
+}));
+
+describe('searchTokenByValue tool', () => {
+    it('returns matching tokens by value', () => {
+        expect(
+            searchTokenByValue.callback({
+                value: '8px',
+                platform: 'web',
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "Found 2 tokens with value "8px"",
+            "---
+          token: $spacing-8
+          value: 8px
+          ---
+          token: $action-base-borderRadius
+          value: 8px
+          ---",
+          ]
+        `);
+    });
+
+    it('returns not-found when no matches', () => {
+        expect(
+            searchTokenByValue.callback({
+                value: 'definitely-missing-token-value',
+                platform: 'web',
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "No results found for "definitely-missing-token-value"",
+          ]
+        `);
+    });
+
+    it('expands numeric values to include px and em units', () => {
+        expect(
+            searchTokenByValue.callback({
+                value: '8',
+                platform: 'web',
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "Found 2 tokens with value "8"",
+            "---
+          token: $spacing-8
+          value: 8px
+          ---
+          token: $action-base-borderRadius
+          value: 8px
+          ---",
+          ]
+        `);
+    });
+
+    it('defaults to scss format when format is omitted', () => {
+        expect(
+            searchTokenByValue.callback({
+                value: '8px',
+                platform: 'web',
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "Found 2 tokens with value "8px"",
+            "---
+          token: $spacing-8
+          value: 8px
+          ---
+          token: $action-base-borderRadius
+          value: 8px
+          ---",
+          ]
+        `);
+    });
+
+    it('uses less format for web', () => {
+        expect(
+            searchTokenByValue.callback({
+                value: '8px',
+                platform: 'web',
+                format: 'less',
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "Found 2 tokens with value "8px"",
+            "---
+          token: "@spacing-8"
+          value: 8px
+          ---
+          token: "@action-base-borderRadius"
+          value: 8px
+          ---",
+          ]
+        `);
+    });
+
+    it('ignores format for react-native and returns typescript names', () => {
+        expect(
+            searchTokenByValue.callback({
+                value: '8',
+                platform: 'react-native',
+                format: 'less',
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "Found 2 tokens with value "8"",
+            "---
+          token: spacing[8]
+          value: 8
+          ---
+          token: action.base.borderRadius
+          value: 8
+          ---",
+          ]
+        `);
+    });
+
+    it('includes example when includeExample is true', () => {
+        expect(
+            searchTokenByValue.callback({
+                value: '8px',
+                platform: 'web',
+                includeExample: true,
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "Found 2 tokens with value "8px"",
+            "---
+          token: $spacing-8
+          value: 8px
+          ---
+          token: $action-base-borderRadius
+          value: 8px
+          ---",
+            "Here is an example of how to use design-system tokens in scss:",
+            "@use '@preply/ds-web-core/dist/generated/tokens' as *;
+
+          .MyComponent {
+              box-shadow: $dropShadow-1-shorthand;
+          }",
+          ]
+        `);
+    });
+
+    it('filters out private tokens by default', () => {
+        expect(
+            searchTokenByValue.callback({
+                value: '#FFFFFF',
+                platform: 'web',
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "No results found for "#FFFFFF"",
+          ]
+        `);
+    });
+
+    it('includes private tokens when includePrivate is true', () => {
+        expect(
+            searchTokenByValue.callback({
+                value: '#FFFFFF',
+                platform: 'web',
+                includePrivate: true,
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "Found 1 tokens with value "#FFFFFF"",
+            "---
+          token: $dsInternalPrimitive-color-background-primary
+          value: "#FFFFFF"
+          ---",
+          ]
+        `);
+    });
+});