Skip to content

Commit eabef41

Browse files
Bill LeoutsakosBill Leoutsakos
Bill Leoutsakos
authored and
Bill Leoutsakos
committed
refactor(emcn): centralize document file-type icons
1 parent 44869df commit eabef41

24 files changed

Lines changed: 350 additions & 267 deletions

File tree

‎apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22

33
import { useState } from 'react'
44
import { Button, Download, Loader } from '@sim/emcn'
5-
import { Music } from '@sim/emcn/icons'
5+
import { DefaultFileIcon, Music } from '@sim/emcn/icons'
66
import { createLogger } from '@sim/logger'
77
import { sleep } from '@sim/utils/helpers'
8-
import { DefaultFileIcon, getDocumentIcon } from '@/components/icons/document-icons'
8+
import { getDocumentIcon } from '@/components/icons/document-icons'
99
import { isSafeHttpUrl } from '@/lib/core/utils/urls'
1010
import { saveBlob } from '@/lib/uploads/client/download'
1111
import { tryInferContextFromKey } from '@/lib/uploads/utils/file-utils'

‎apps/sim/app/(landing)/components/hero/components/hero-visual/workflow-data.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import type { ComponentType, SVGProps } from 'react'
2+
import { CsvIcon, DocxIcon, MarkdownIcon, PdfIcon } from '@sim/emcn/icons'
23
import type {
34
BLOCK_DIMENSIONS,
45
CONNECTION_KNOB_PEAK_PX,
56
HANDLE_POSITIONS,
67
} from '@sim/workflow-renderer'
78
import { AgentIcon, GithubIcon, JiraIcon } from '@/components/icons'
8-
import { CsvIcon, DocxIcon, MarkdownIcon, PdfIcon } from '@/components/icons/document-icons'
99

1010
/**
1111
* Shared data + geometry for the hero visual - the single source of truth the

‎apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/files-menu-preview/files-menu-preview.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
import { Chip } from '@sim/emcn'
2-
import { ArrowUpDown, Files, Folder, ListFilter, Search } from '@sim/emcn/icons'
3-
import { CsvIcon, DocxIcon, PdfIcon } from '@/components/icons/document-icons'
2+
import {
3+
ArrowUpDown,
4+
CsvIcon,
5+
DocxIcon,
6+
Files,
7+
Folder,
8+
ListFilter,
9+
PdfIcon,
10+
Search,
11+
} from '@sim/emcn/icons'
412
import { MenuPreviewFrame } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-frame'
513
import {
614
MenuPreviewHeader,

‎apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/knowledge-menu-preview/knowledge-menu-preview.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
import { Badge, Chip } from '@sim/emcn'
2-
import { ArrowUpDown, ChevronRight, Database, ListFilter, Search } from '@sim/emcn/icons'
3-
import { DocxIcon, PdfIcon } from '@/components/icons/document-icons'
2+
import {
3+
ArrowUpDown,
4+
ChevronRight,
5+
Database,
6+
DocxIcon,
7+
ListFilter,
8+
PdfIcon,
9+
Search,
10+
} from '@sim/emcn/icons'
411
import { MenuPreviewFrame } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-frame'
512
import {
613
MenuPreviewHeader,

‎apps/sim/app/(landing)/files/components/feature-graphics/file-library-graphic.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { ComponentType } from 'react'
22
import { ChipTag, cn } from '@sim/emcn'
3-
import { DocxIcon, PdfIcon } from '@/components/icons/document-icons'
3+
import { DocxIcon, PdfIcon } from '@sim/emcn/icons'
44
import { FeatureGraphicShell } from '@/app/(landing)/enterprise/components/feature-graphics'
55
import styles from '@/app/(landing)/files/components/feature-graphics/file-library-graphic.module.css'
66
import { InteractiveLibraryFolder } from '@/app/(landing)/files/components/feature-graphics/interactive-library-folder'

‎apps/sim/app/(landing)/files/components/files-hero-loop.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,18 @@
33
import type { ReactNode } from 'react'
44
import { useState } from 'react'
55
import { cn } from '@sim/emcn'
6-
import { ArrowUpDown, File, ListFilter, Plus, Search } from '@sim/emcn/icons'
6+
import {
7+
ArrowUpDown,
8+
CsvIcon,
9+
DocxIcon,
10+
File,
11+
ListFilter,
12+
PdfIcon,
13+
Plus,
14+
Search,
15+
ZipIcon,
16+
} from '@sim/emcn/icons'
717
import { AgentIcon } from '@/components/icons'
8-
import { CsvIcon, DocxIcon, PdfIcon, ZipIcon } from '@/components/icons/document-icons'
918
import { HeroLoopShell } from '@/app/(landing)/components/shared/hero-loop-shell'
1019
import { PLATFORM_LOOP_RESET_FADE_MS } from '@/app/(landing)/components/shared/platform-loop-constants'
1120
import { useMotionSafeCycle } from '@/app/(landing)/hooks/use-motion-safe-cycle'

‎apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/drop-overlay/drop-overlay.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
'use client'
22

33
import { memo } from 'react'
4-
import { ImageUp } from '@sim/emcn/icons'
54
import {
65
AudioIcon,
76
CsvIcon,
87
DocxIcon,
8+
ImageUp,
99
JsonIcon,
1010
MarkdownIcon,
1111
PdfIcon,
1212
TxtIcon,
1313
VideoIcon,
1414
XlsxIcon,
15-
} from '@/components/icons/document-icons'
15+
} from '@sim/emcn/icons'
1616

1717
const DROP_OVERLAY_ICONS = [
1818
PdfIcon,

‎apps/sim/components/icons/document-icons.test.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/** @vitest-environment node */
2+
import { DefaultFileIcon, ZipIcon } from '@sim/emcn/icons'
23
import { describe, expect, it } from 'vitest'
3-
import { DefaultFileIcon, getDocumentIcon, ZipIcon } from '@/components/icons/document-icons'
4+
import { getDocumentIcon } from '@/components/icons/document-icons'
45

56
describe('getDocumentIcon', () => {
67
it('uses the zip icon for zip archives by extension or mime type', () => {

‎apps/sim/components/icons/document-icons.tsx‎

Lines changed: 16 additions & 254 deletions
Original file line numberDiff line numberDiff line change
@@ -1,265 +1,27 @@
11
import type { SVGProps } from 'react'
2+
import {
3+
AudioIcon,
4+
ChartFileIcon,
5+
CsvIcon,
6+
DefaultFileIcon,
7+
DocxIcon,
8+
HtmlIcon,
9+
JsonIcon,
10+
MarkdownIcon,
11+
PdfIcon,
12+
PptxIcon,
13+
TxtIcon,
14+
VideoIcon,
15+
XlsxIcon,
16+
ZipIcon,
17+
} from '@sim/emcn/icons'
218
import {
319
SUPPORTED_ARCHIVE_EXTENSIONS,
420
SUPPORTED_ARCHIVE_MIME_TYPES,
521
SUPPORTED_AUDIO_EXTENSIONS,
622
SUPPORTED_VIDEO_EXTENSIONS,
723
} from '@/lib/uploads/utils/validation'
824

9-
export function PdfIcon(props: SVGProps<SVGSVGElement>) {
10-
return (
11-
<svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
12-
<rect x='4' y='2' width='16' height='20' rx='2' stroke='currentColor' strokeWidth='1.5' />
13-
<text
14-
x='12'
15-
y='12'
16-
textAnchor='middle'
17-
dominantBaseline='central'
18-
fontSize='5.5'
19-
fontWeight='bold'
20-
fontFamily='Arial, sans-serif'
21-
letterSpacing='0.5'
22-
fill='currentColor'
23-
>
24-
PDF
25-
</text>
26-
</svg>
27-
)
28-
}
29-
30-
export function DocxIcon(props: SVGProps<SVGSVGElement>) {
31-
return (
32-
<svg
33-
viewBox='0 0 24 24'
34-
fill='none'
35-
stroke='currentColor'
36-
strokeWidth='1.5'
37-
strokeLinecap='round'
38-
strokeLinejoin='round'
39-
xmlns='http://www.w3.org/2000/svg'
40-
{...props}
41-
>
42-
<path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' />
43-
<path d='M14 2v4a2 2 0 0 0 2 2h4' />
44-
<path d='M16 9H8' />
45-
<path d='M16 13H8' />
46-
<path d='M16 17H8' />
47-
</svg>
48-
)
49-
}
50-
51-
export function XlsxIcon(props: SVGProps<SVGSVGElement>) {
52-
return (
53-
<svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
54-
<rect x='3' y='3' width='18' height='18' rx='2' stroke='currentColor' strokeWidth='1.5' />
55-
<line x1='3' y1='9' x2='21' y2='9' stroke='currentColor' strokeWidth='1.5' />
56-
<line x1='3' y1='15' x2='21' y2='15' stroke='currentColor' strokeWidth='1.5' />
57-
<line x1='9' y1='3' x2='9' y2='21' stroke='currentColor' strokeWidth='1.5' />
58-
<line x1='15' y1='3' x2='15' y2='21' stroke='currentColor' strokeWidth='1.5' />
59-
</svg>
60-
)
61-
}
62-
63-
export function CsvIcon(props: SVGProps<SVGSVGElement>) {
64-
return (
65-
<svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
66-
<rect x='3' y='1' width='8' height='6' rx='1.5' stroke='currentColor' strokeWidth='1.5' />
67-
<rect x='13' y='1' width='8' height='6' rx='1.5' stroke='currentColor' strokeWidth='1.5' />
68-
<rect x='3' y='9' width='8' height='6' rx='1.5' stroke='currentColor' strokeWidth='1.5' />
69-
<rect x='13' y='9' width='8' height='6' rx='1.5' stroke='currentColor' strokeWidth='1.5' />
70-
<rect x='3' y='17' width='8' height='6' rx='1.5' stroke='currentColor' strokeWidth='1.5' />
71-
<rect x='13' y='17' width='8' height='6' rx='1.5' stroke='currentColor' strokeWidth='1.5' />
72-
</svg>
73-
)
74-
}
75-
76-
export function TxtIcon(props: SVGProps<SVGSVGElement>) {
77-
return (
78-
<svg
79-
viewBox='0 0 24 24'
80-
fill='none'
81-
stroke='currentColor'
82-
strokeWidth='1.5'
83-
strokeLinecap='round'
84-
strokeLinejoin='round'
85-
xmlns='http://www.w3.org/2000/svg'
86-
{...props}
87-
>
88-
<path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' />
89-
<path d='M14 2v4a2 2 0 0 0 2 2h4' />
90-
<path d='M16 13H8' />
91-
<path d='M12 17H8' />
92-
</svg>
93-
)
94-
}
95-
96-
export function PptxIcon(props: SVGProps<SVGSVGElement>) {
97-
return (
98-
<svg
99-
viewBox='0 0 24 24'
100-
fill='none'
101-
stroke='currentColor'
102-
strokeWidth='1.5'
103-
strokeLinecap='round'
104-
strokeLinejoin='round'
105-
xmlns='http://www.w3.org/2000/svg'
106-
{...props}
107-
>
108-
<rect x='2' y='4' width='20' height='16' rx='2' />
109-
<line x1='6' y1='9' x2='18' y2='9' />
110-
<line x1='8' y1='14' x2='16' y2='14' />
111-
</svg>
112-
)
113-
}
114-
115-
export function AudioIcon(props: SVGProps<SVGSVGElement>) {
116-
return (
117-
<svg
118-
viewBox='0 0 24 24'
119-
fill='none'
120-
stroke='currentColor'
121-
strokeWidth='2'
122-
strokeLinecap='round'
123-
xmlns='http://www.w3.org/2000/svg'
124-
{...props}
125-
>
126-
<line x1='4' y1='14' x2='4' y2='10' />
127-
<line x1='8' y1='17' x2='8' y2='7' />
128-
<line x1='12' y1='15' x2='12' y2='9' />
129-
<line x1='16' y1='18' x2='16' y2='6' />
130-
<line x1='20' y1='14' x2='20' y2='10' />
131-
</svg>
132-
)
133-
}
134-
135-
export function VideoIcon(props: SVGProps<SVGSVGElement>) {
136-
return (
137-
<svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
138-
<rect x='2' y='4' width='20' height='16' rx='2' stroke='currentColor' strokeWidth='1.5' />
139-
<path d='M10 9l5 3-5 3V9Z' fill='currentColor' />
140-
</svg>
141-
)
142-
}
143-
144-
export function ChartFileIcon(props: SVGProps<SVGSVGElement>) {
145-
return (
146-
<svg
147-
viewBox='0 0 24 24'
148-
fill='none'
149-
stroke='currentColor'
150-
strokeWidth='1.5'
151-
strokeLinecap='round'
152-
strokeLinejoin='round'
153-
xmlns='http://www.w3.org/2000/svg'
154-
{...props}
155-
>
156-
<path d='M3 3v17a1 1 0 0 0 1 1h17' />
157-
<rect x='7' y='12' width='3' height='6' rx='0.5' />
158-
<rect x='12.5' y='8' width='3' height='10' rx='0.5' />
159-
<rect x='18' y='5' width='3' height='13' rx='0.5' />
160-
</svg>
161-
)
162-
}
163-
164-
export function HtmlIcon(props: SVGProps<SVGSVGElement>) {
165-
return (
166-
<svg
167-
viewBox='0 0 24 24'
168-
fill='none'
169-
stroke='currentColor'
170-
strokeWidth='1.5'
171-
strokeLinecap='round'
172-
strokeLinejoin='round'
173-
xmlns='http://www.w3.org/2000/svg'
174-
{...props}
175-
>
176-
<path d='M8 8l-4 4 4 4' />
177-
<path d='M16 8l4 4-4 4' />
178-
<line x1='14' y1='4' x2='10' y2='20' />
179-
</svg>
180-
)
181-
}
182-
183-
export function JsonIcon(props: SVGProps<SVGSVGElement>) {
184-
return (
185-
<svg
186-
viewBox='0 0 24 24'
187-
fill='none'
188-
stroke='currentColor'
189-
strokeWidth='1.5'
190-
strokeLinecap='round'
191-
strokeLinejoin='round'
192-
xmlns='http://www.w3.org/2000/svg'
193-
{...props}
194-
>
195-
<path d='M8 3H7a2 2 0 0 0-2 2v4c0 1.1-.9 2-2 2 1.1 0 2 .9 2 2v4a2 2 0 0 0 2 2h1' />
196-
<path d='M16 3h1a2 2 0 0 1 2 2v4c0 1.1.9 2 2 2-1.1 0-2 .9-2 2v4a2 2 0 0 1-2 2h-1' />
197-
</svg>
198-
)
199-
}
200-
201-
export function MarkdownIcon(props: SVGProps<SVGSVGElement>) {
202-
return (
203-
<svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
204-
<rect x='2' y='4' width='20' height='16' rx='3' stroke='currentColor' strokeWidth='1.5' />
205-
<path
206-
d='M6 15V9l3 3.5L12 9v6'
207-
stroke='currentColor'
208-
strokeWidth='1.5'
209-
strokeLinecap='round'
210-
strokeLinejoin='round'
211-
/>
212-
<path
213-
d='M17 9v6m-2-2l2 2 2-2'
214-
stroke='currentColor'
215-
strokeWidth='1.5'
216-
strokeLinecap='round'
217-
strokeLinejoin='round'
218-
/>
219-
</svg>
220-
)
221-
}
222-
223-
export function ZipIcon(props: SVGProps<SVGSVGElement>) {
224-
return (
225-
<svg
226-
viewBox='0 0 24 24'
227-
fill='none'
228-
stroke='currentColor'
229-
strokeWidth='1.5'
230-
strokeLinecap='round'
231-
strokeLinejoin='round'
232-
xmlns='http://www.w3.org/2000/svg'
233-
{...props}
234-
>
235-
<path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' />
236-
<path d='M14 2v4a2 2 0 0 0 2 2h4' />
237-
<path d='M10 5h1' />
238-
<path d='M11 8h1' />
239-
<path d='M10 11h1' />
240-
<rect x='9' y='14' width='4' height='5' rx='1' />
241-
</svg>
242-
)
243-
}
244-
245-
export function DefaultFileIcon(props: SVGProps<SVGSVGElement>) {
246-
return (
247-
<svg
248-
viewBox='0 0 24 24'
249-
fill='none'
250-
stroke='currentColor'
251-
strokeWidth='1.5'
252-
strokeLinecap='round'
253-
strokeLinejoin='round'
254-
xmlns='http://www.w3.org/2000/svg'
255-
{...props}
256-
>
257-
<path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' />
258-
<path d='M14 2v4a2 2 0 0 0 2 2h4' />
259-
</svg>
260-
)
261-
}
262-
26325
export function getDocumentIcon(
26426
rawMimeType: string,
26527
filename: string

0 commit comments

Comments
 (0)