Merge pull request #668 from storybookjs/fix-svelte-native-format-sni…

…ppets Fix svelte native-format snippets
storybookjs · Mar 6, 2024 · a240e5a · a240e5a
2 parents 8f22355 + 8e0d483
commit a240e5a
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/src/components/screens/DocsScreen/CodeSnippets/CodeSnippets.tsx b/src/components/screens/DocsScreen/CodeSnippets/CodeSnippets.tsx
@@ -48,9 +48,11 @@ function getPathsForLanguage(paths, forLanguage, { matchMDX = true } = {}) {
        * - `ts-4-9` for TS 4.9
        * - `mdx` for MDX
        * - `mdx-2` or `mdx-3` for Vue 2/3 MDX
+       * - `native-format` for Svelte
        * This check is formulated so that `ts-4-9` does not match `ts`, but, e.g., `ts-2` does
        */
       (language === 'ts-4-9' ? language === forLanguage : language.startsWith(forLanguage)) ||
+      language === 'native-format' ||
       // Also optionally match any mdx language snippet paths
       (matchMDX && language.startsWith('mdx'))
     );

diff --git a/src/components/screens/DocsScreen/CodeSnippets/fetch-snippets.utils.tsx b/src/components/screens/DocsScreen/CodeSnippets/fetch-snippets.utils.tsx
@@ -37,6 +37,7 @@ const syntaxMap = {
   npx: 'sh',
   pnpm: 'sh',
   yarn: 'sh',
+  'native-format': 'html',
 };
 
 export const isTerminalSnippetByType = (type: string): boolean => syntaxMap[type] === 'sh';
@@ -47,7 +48,10 @@ export const isTerminalSnippetByPath = (path: string): boolean =>
 export const getSnippetSyntax = (type: string) => syntaxMap[type] || type;
 
 const nameMap = {
+  js: 'JS',
+  'native-format': 'Svelte native',
   'stories-of': 'StoriesOf()',
+  ts: 'TS',
   'ts-4-9': 'TS 4.9',
 };
 

diff --git a/src/components/screens/DocsScreen/CodeSnippets/fetch-snippets.utilts.test.ts b/src/components/screens/DocsScreen/CodeSnippets/fetch-snippets.utilts.test.ts
@@ -17,10 +17,33 @@ describe('UTILITIES: fetch-snippets.utils', () => {
       expect(getSnippetType('some-snippet.npm.ts.mdx')).toBe('npm');
       expect(getSnippetType('some-snippet.yarn.ts.mdx')).toBe('yarn');
       expect(getSnippetType('some-snippet.pnpm.ts.mdx')).toBe('pnpm');
+      expect(getSnippetType('some-snippet.native-format.mdx')).toBe('native-format');
       expect(getSnippetType('some-snippet.whatever.ts.mdx')).toBe('ts');
     });
   });
-  describe('UTIL: getSnippetSyntax', () => {});
-  describe('UTIL: isTerminalSnippetBySyntax', () => {});
+  describe('UTIL: getSnippetSyntax', () => {
+    it('SYNTAX: It should return the correct snippet syntax', () => {
+      expect(getSnippetSyntax('js')).toBe('js');
+      expect(getSnippetSyntax('js-2')).toBe('js');
+      expect(getSnippetSyntax('ts')).toBe('ts');
+      expect(getSnippetSyntax('ts-2')).toBe('ts');
+      expect(getSnippetSyntax('npm')).toBe('sh');
+      expect(getSnippetSyntax('npx')).toBe('sh');
+      expect(getSnippetSyntax('pnpm')).toBe('sh');
+      expect(getSnippetSyntax('yarn')).toBe('sh');
+      expect(getSnippetSyntax('native-format')).toBe('html');
+      expect(getSnippetSyntax('whatever')).toBe('whatever');
+    });
+  });
+  describe('UTIL: isTerminalSnippetByType', () => {
+    it('TERMINAL: It should determine terminal snippets by type', () => {
+      expect(isTerminalSnippetByType('js')).toBe(false);
+      expect(isTerminalSnippetByType('ts')).toBe(false);
+      expect(isTerminalSnippetByType('npm')).toBe(true);
+      expect(isTerminalSnippetByType('npx')).toBe(true);
+      expect(isTerminalSnippetByType('pnpm')).toBe(true);
+      expect(isTerminalSnippetByType('yarn')).toBe(true);
+    });
+  });
   describe('UTIL: fetchDocsSnippets', () => {});
 });