Skip to content

Commit c930d12

Browse files
dvdsgldvdsgl
authored
Icons per category (#57)
* Icons per category * Add jest * WIP * WIP * WIP * better
1 parent 88d1346 commit c930d12

File tree

6 files changed

+124
-47
lines changed

6 files changed

+124
-47
lines changed

‎package-lock.json

+11-11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
"autoprefixer": "^10.3.4",
4444
"esbuild": "^0.13.4",
4545
"husky": "^7.0.4",
46-
"jest": "^27.1.0",
46+
"jest": "^27.3.1",
4747
"postcss": "^8.3.6",
4848
"prettier": "^2.4.1",
4949
"tailwindcss": "^2.2.15",

‎src/columns/app-icon.ts

-1
Original file line numberDiff line numberDiff line change
@@ -45,5 +45,4 @@ export default glide.column({
4545
about: `
4646
Given a URL to a Glide app or page, this column produces a link to the icon for that app or page.
4747
`,
48-
icon: "glide",
4948
});

‎src/columns/glide-brand-image.ts

-1
Original file line numberDiff line numberDiff line change
@@ -42,5 +42,4 @@ export default glide.column({
4242
example: { category: "3d", random: "glideapps.com" },
4343
result: { type: "image-uri" },
4444
run,
45-
icon: "glide",
4645
});

‎src/glide.ts

+6-33
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import startCase from "lodash/startCase";
2+
import { getIconForManifest } from "./icons";
23

34
export type PrimitiveColumnType = "string" | "primitive" | "number" | "boolean" | "image-uri" | "date-time" | "uri";
45

@@ -95,7 +96,7 @@ export type Manifest = {
9596

9697
export type ManifestConvenient<T> = Omit<Manifest, "params" | "icon"> & {
9798
params: { [Name in keyof T]: Omit<ColumnParam, "name"> };
98-
icon?: "glide" | string;
99+
icon?: string;
99100
};
100101

101102
type Test<TParams> = { params: Partial<TParams>; expectedResult: any; allowFailure?: boolean };
@@ -120,40 +121,11 @@ export function column<TColumnParams>(manifest: ColumnDefinition<TColumnParams>)
120121
};
121122
}
122123

123-
const glideIcon = `
124-
<svg
125-
width="48"
126-
height="48"
127-
viewBox="0 0 26 27"
128-
fill="none"
129-
xmlns="http://www.w3.org/2000/svg"
130-
>
131-
<path
132-
d="M0 14.85L14.3 0V7.29C14.3 11.4653 11.0406 14.85 7.02 14.85H0Z"
133-
fill="currentColor"
134-
/>
135-
<path
136-
d="M11.7 19.71C11.7 15.5347 14.9594 12.15 18.98 12.15H26L11.7 27V19.71Z"
137-
fill="currentColor"
138-
/>
139-
</svg>
140-
`;
141-
142-
const defaultIcon = `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
143-
<path d="M12.0002 34.828L2.58624 25.414C1.80524 24.633 1.80524 23.367 2.58624 22.586L12.0002 13.172L14.8292 16L6.82924 24L14.8292 32L12.0002 34.828Z" fill="currentColor"/>
144-
<path d="M36.0004 34.828L33.1714 32L41.1714 24L33.1714 16L36.0004 13.172L45.4144 22.586C46.1954 23.367 46.1954 24.633 45.4144 25.414L36.0004 34.828Z" fill="currentColor"/>
145-
<path d="M26.5485 5.57617L17.5723 41.4553L21.4527 42.4261L30.4289 6.54697L26.5485 5.57617Z" fill="currentColor"/>
146-
</svg>`;
147-
148124
export function toStrictManifest(convenient: ManifestConvenient<any>): Manifest {
149125
// We carefully pick out just the props in manifest, because more
150126
// could come in from the component.
151127
const { name, category, released, description, author, result, params, about, video } = convenient;
152-
153-
let { icon = defaultIcon } = convenient;
154-
if (icon === "glide") {
155-
icon = glideIcon;
156-
}
128+
const icon = getIconForManifest(convenient);
157129

158130
return {
159131
name,
@@ -180,7 +152,7 @@ const defaultDefinition: ColumnDefinition = {
180152
author: "Glide <[email protected]>",
181153
params: {},
182154
result: { type: "string" },
183-
icon: defaultIcon,
155+
icon: undefined,
184156
about: undefined,
185157
video: undefined,
186158
tests: [],
@@ -210,7 +182,8 @@ export class Col<TParams = {}, TResult = string> {
210182
}
211183

212184
public withCategory(category: Manifest["category"]) {
213-
return this.with({ category });
185+
const { icon } = this.definition;
186+
return this.with({ category, icon: getIconForManifest({ icon, category }) });
214187
}
215188

216189
public withReleased(released: "direct" | "sandboxed") {

‎src/icons.ts

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import type { Manifest, Category } from "./glide";
2+
3+
const Glide = `
4+
<svg
5+
width="48"
6+
height="48"
7+
viewBox="0 0 26 27"
8+
fill="none"
9+
xmlns="http://www.w3.org/2000/svg"
10+
>
11+
<path
12+
d="M0 14.85L14.3 0V7.29C14.3 11.4653 11.0406 14.85 7.02 14.85H0Z"
13+
fill="currentColor"
14+
/>
15+
<path
16+
d="M11.7 19.71C11.7 15.5347 14.9594 12.15 18.98 12.15H26L11.7 27V19.71Z"
17+
fill="currentColor"
18+
/>
19+
</svg>
20+
`;
21+
22+
const Code = `
23+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none" viewBox="0 0 24 24" stroke="currentColor">
24+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
25+
</svg>
26+
`;
27+
28+
const Number = `
29+
<svg xmlns="http://www.w3.org/2000/svg" width="48"
30+
height="48" fill="none" viewBox="0 0 24 24" stroke="currentColor">
31+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
32+
</svg>
33+
`;
34+
35+
export const defaultIcon = `
36+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none" viewBox="0 0 24 24" stroke="currentColor">
37+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />
38+
</svg>
39+
`;
40+
41+
const Array = `
42+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none" viewBox="0 0 24 24" stroke="currentColor">
43+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
44+
</svg>
45+
`;
46+
47+
const Image = `
48+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none" viewBox="0 0 24 24" stroke="currentColor">
49+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
50+
</svg>
51+
`;
52+
53+
const Fun = `
54+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none" viewBox="0 0 24 24" stroke="currentColor">
55+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
56+
</svg>
57+
`;
58+
59+
const Date = `
60+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none" viewBox="0 0 24 24" stroke="currentColor">
61+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
62+
</svg>
63+
`;
64+
65+
const APIs = `
66+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none" viewBox="0 0 24 24" stroke="currentColor">
67+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
68+
</svg>
69+
`;
70+
71+
const Text = `
72+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none" viewBox="0 0 24 24" stroke="currentColor">
73+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
74+
</svg>
75+
`;
76+
77+
const AI = `
78+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none" viewBox="0 0 24 24" stroke="currentColor">
79+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
80+
</svg>
81+
`;
82+
83+
const Encoding = `
84+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none" viewBox="0 0 24 24" stroke="currentColor">
85+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14" />
86+
</svg>
87+
`;
88+
89+
export const categoryIcons: Partial<Record<Category, string>> = {
90+
Glide,
91+
"Machine Learning": AI,
92+
General: defaultIcon,
93+
Array,
94+
Number,
95+
Encoding,
96+
Text,
97+
"Data & APIs": APIs,
98+
Image,
99+
Fun,
100+
"Date & Time": Date,
101+
Code,
102+
};
103+
104+
export function getIconForManifest({ icon, category }: { icon?: string; category: Category }): string {
105+
return icon ?? categoryIcons[category] ?? defaultIcon;
106+
}

0 commit comments

Comments
 (0)