Scaffold out UI components

2020-07-21 23:07:36 -04:00
parent 016e6d987b
commit 19d9b8c7d2
24 changed files with 1063 additions and 528 deletions
--- a/src/lib/icons.ts
+++ b/src/lib/icons.ts
@@ -0,0 +1,642 @@
+import * as Icon from "phosphor-react";
+import { IconEntry, IconCategory } from ".";
+
+export const icons: Readonly<IconEntry[]> = [
+  {
+    name: "arrow-up-right-circle",
+    categories: [IconCategory.DESIGN],
+    tags: ["pointer", "direction", "round"],
+    Icon: Icon.ArrowUpRightCircle,
+  },
+  {
+    name: "backspace",
+    categories: [IconCategory.SYSTEM],
+    tags: ["keyboard", "remove", "delete"],
+    Icon: Icon.Backspace,
+  },
+  {
+    name: "battery-half",
+    categories: [IconCategory.DEVICE, IconCategory.SYSTEM],
+    tags: ["charged", "charger", "charging", "power"],
+    Icon: Icon.BatteryHalf,
+  },
+  {
+    name: "book-closed",
+    categories: [IconCategory.DOCUMENT, IconCategory.OTHER],
+    tags: ["reading", "reader", "novel", "story"],
+    Icon: Icon.BookClosed,
+  },
+  {
+    name: "calendar-x",
+    categories: [IconCategory.BUSINESS, IconCategory.SYSTEM],
+    tags: ["dates", "times", "events", "schedule", "closed", "cancelled"],
+    Icon: Icon.CalendarX,
+  },
+  {
+    name: "check-circle",
+    categories: [IconCategory.BUSINESS, IconCategory.SYSTEM],
+    tags: ["todo", "to-do", "list", "checkbox", "round"],
+    Icon: Icon.CheckCircle,
+  },
+  {
+    name: "clock",
+    categories: [IconCategory.SYSTEM],
+    tags: ["times", "timer", "alarm", "schedule", "events", "watch"],
+    Icon: Icon.Clock,
+  },
+  {
+    name: "cloud",
+    categories: [
+      IconCategory.BUSINESS,
+      IconCategory.SYSTEM,
+      IconCategory.WEATHER,
+    ],
+    tags: ["serverless", "backup", "storage"],
+    Icon: Icon.Cloud,
+  },
+  {
+    name: "copy",
+    categories: [IconCategory.EDITOR, IconCategory.SYSTEM],
+    tags: ["duplicated", "copied"],
+    Icon: Icon.Copy,
+  },
+  {
+    name: "cube",
+    categories: [IconCategory.DESIGN, IconCategory.OTHER],
+    tags: ["square", "box", "3d", "volume", "blocks"],
+    Icon: Icon.Cube,
+  },
+  {
+    name: "document-text",
+    categories: [IconCategory.DOCUMENT, IconCategory.EDITOR],
+    tags: ["documents", "files", "save", "write"],
+    Icon: Icon.DocumentText,
+  },
+  {
+    name: "droid",
+    categories: [
+      IconCategory.BRAND,
+      IconCategory.COMMUNICATION,
+      IconCategory.DEVELOPMENT,
+      IconCategory.DEVICE,
+      IconCategory.SYSTEM,
+    ],
+    tags: ["android", "google", "mobile", "phone", "cellular", "cellphone"],
+    Icon: Icon.Droid,
+  },
+  {
+    name: "envelope",
+    categories: [IconCategory.COMMUNICATION],
+    tags: ["mail", "email", "send", "sent", "message"],
+    Icon: Icon.Envelope,
+  },
+  {
+    name: "envelope-alt",
+    categories: [IconCategory.COMMUNICATION],
+    tags: ["mail", "email", "send", "sent", "message"],
+    Icon: Icon.EnvelopeAlt,
+  },
+  {
+    name: "folder",
+    categories: [
+      IconCategory.DOCUMENT,
+      IconCategory.EDITOR,
+      IconCategory.SYSTEM,
+    ],
+    tags: ["directory", "directories", "files"],
+    Icon: Icon.Folder,
+  },
+  {
+    name: "folder-dip",
+    categories: [
+      IconCategory.DOCUMENT,
+      IconCategory.EDITOR,
+      IconCategory.SYSTEM,
+    ],
+    tags: ["directory", "directories", "files"],
+    Icon: Icon.FolderDip,
+  },
+  {
+    name: "folder-minimal",
+    categories: [
+      IconCategory.DOCUMENT,
+      IconCategory.EDITOR,
+      IconCategory.SYSTEM,
+    ],
+    tags: ["directory", "directories", "files"],
+    Icon: Icon.FolderMinimal,
+  },
+  {
+    name: "heart",
+    categories: [
+      IconCategory.COMMUNICATION,
+      IconCategory.DESIGN,
+      IconCategory.HEALTH,
+      IconCategory.OTHER,
+    ],
+    tags: ["wellness", "love", "healthy", "like"],
+    Icon: Icon.Heart,
+  },
+  {
+    name: "horse",
+    categories: [IconCategory.HEALTH, IconCategory.OTHER],
+    tags: ["animals", "equestrian", "chess", "knight", "games", "sports"],
+    Icon: Icon.Horse,
+  },
+  {
+    name: "microphone",
+    categories: [
+      IconCategory.COMMUNICATION,
+      IconCategory.DEVICE,
+      IconCategory.MEDIA,
+      IconCategory.SYSTEM,
+    ],
+    tags: ["microphone", "audio", "recording", "music", "sound", "podcast"],
+    Icon: Icon.Microphone,
+  },
+  {
+    name: "minus-circle",
+    categories: [
+      IconCategory.DEVELOPMENT,
+      IconCategory.FINANCE,
+      IconCategory.OTHER,
+    ],
+    tags: [
+      "subtraction",
+      "difference",
+      "mathematics",
+      "arithmetic",
+      "calculator",
+      "round",
+    ],
+    Icon: Icon.MinusCircle,
+  },
+  {
+    name: "music-notes-sixteenth",
+    categories: [IconCategory.MEDIA, IconCategory.SYSTEM],
+    tags: ["songs", "audio", "playlist", "albums"],
+    Icon: Icon.MusicNotesSixteenth,
+  },
+  {
+    name: "pencil-clip",
+    categories: [IconCategory.DESIGN, IconCategory.EDITOR],
+    tags: ["write", "writing", "editing", "sign", "signature"],
+    Icon: Icon.PencilClip,
+  },
+  {
+    name: "pencil-line",
+    categories: [IconCategory.DESIGN, IconCategory.EDITOR],
+    tags: ["write", "writing", "editing", "sign", "signature"],
+    Icon: Icon.PencilLine,
+  },
+  {
+    name: "pen-nib",
+    categories: [IconCategory.DESIGN, IconCategory.EDITOR],
+    tags: [
+      "write",
+      "writing",
+      "editing",
+      "sign",
+      "signature",
+      "fountain pen",
+      "illustrator",
+    ],
+    Icon: Icon.PenNib,
+  },
+  {
+    name: "pin",
+    categories: [IconCategory.MAP],
+    tags: ["places", "markers", "locations"],
+    Icon: Icon.Pin,
+  },
+  {
+    name: "play-circle",
+    categories: [IconCategory.MEDIA, IconCategory.SYSTEM],
+    tags: ["resume", "music", "start", "round"],
+    Icon: Icon.PlayCircle,
+  },
+  {
+    name: "plus-circle",
+    categories: [
+      IconCategory.DEVELOPMENT,
+      IconCategory.FINANCE,
+      IconCategory.OTHER,
+    ],
+    tags: [
+      "addition",
+      "sum",
+      "mathematics",
+      "arithmetic",
+      "calculator",
+      "round",
+    ],
+    Icon: Icon.PlusCircle,
+  },
+  {
+    name: "prohibit",
+    categories: [IconCategory.MAP, IconCategory.SYSTEM, IconCategory.OTHER],
+    tags: [
+      "forbidden",
+      "prohibited",
+      "cancelled",
+      "prevent",
+      "stop",
+      "do not enter",
+    ],
+    Icon: Icon.Prohibit,
+  },
+  {
+    name: "search",
+    categories: [IconCategory.EDITOR, IconCategory.SYSTEM],
+    tags: ["find", "locate", "query"],
+    Icon: Icon.Search,
+  },
+  {
+    name: "smiley",
+    categories: [
+      IconCategory.COMMUNICATION,
+      IconCategory.DESIGN,
+      IconCategory.OTHER,
+    ],
+    tags: ["face", "smiley", "emoji", "unimpressed"],
+    Icon: Icon.Smiley,
+  },
+  {
+    name: "smiley-meh",
+    categories: [
+      IconCategory.COMMUNICATION,
+      IconCategory.DESIGN,
+      IconCategory.OTHER,
+    ],
+    tags: ["face", "smiley", "emoji", "unimpressed"],
+    Icon: Icon.SmileyMeh,
+  },
+  {
+    name: "speaker-off",
+    categories: [IconCategory.MEDIA, IconCategory.SYSTEM],
+    tags: ["muted", "volume", "sound", "music"],
+    Icon: Icon.SpeakerOff,
+  },
+  {
+    name: "star",
+    categories: [
+      IconCategory.COMMUNICATION,
+      IconCategory.MAP,
+      IconCategory.OTHER,
+    ],
+    tags: ["rate", "ratings", "favorites"],
+    Icon: Icon.Star,
+  },
+  {
+    name: "trash",
+    categories: [IconCategory.DOCUMENT, IconCategory.SYSTEM],
+    tags: ["garbage", "delete", "destroy", "recycle", "recycling"],
+    Icon: Icon.Trash,
+  },
+  {
+    name: "two-circle",
+    categories: [IconCategory.DESIGN],
+    tags: ["number", "digit", "2", "round"],
+    Icon: Icon.TwoCircle,
+  },
+  {
+    name: "user-circle",
+    categories: [IconCategory.USERS],
+    tags: ["person", "users", "account", "login", "circle"],
+    Icon: Icon.UserCircle,
+  },
+  {
+    name: "warning-triangle",
+    categories: [IconCategory.SYSTEM],
+    tags: ["alert", "danger", "dangerous", "caution"],
+    Icon: Icon.WarningTriangle,
+  },
+  {
+    name: "wifi-medium",
+    categories: [IconCategory.SYSTEM],
+    tags: ["wireless", "internet", "network", "connection", "connectivity"],
+    Icon: Icon.WifiMedium,
+  },
+];
+
+// export const iconList: Icon[] = [
+//   {
+//     name: "6-square",
+//     categories: [IconCategory.DESIGN],
+//     tags: ["number", "digit", "six", "box"],
+//     Icon: require("../Icons/6-square.svg"),
+//   },
+//   {
+//     name: "6-square-sharp",
+//     categories: [IconCategory.DESIGN],
+//     tags: ["number", "digit", "six", "box"],
+//     Icon: require("../Icons/6-square-sharp.svg"),
+//   },
+//   {
+//     name: "8-circle",
+//     categories: [IconCategory.DESIGN],
+//     tags: ["number", "digit", "eight", "round"],
+//     Icon: require("../Icons/8-circle.svg"),
+//   },
+//   {
+//     name: "arrow-right-circle",
+//     categories: [IconCategory.DESIGN],
+//     tags: ["pointer", "direction", "round"],
+//     Icon: require("../Icons/arrow-right-circle.svg"),
+//   },
+//   {
+//     name: "basketball",
+//     categories: [IconCategory.BRAND, IconCategory.HEALTH, IconCategory.OTHER],
+//     tags: ["sports", "games", "athletics", "dribbble"],
+//     Icon: require("../Icons/basketball.svg"),
+//   },
+//   {
+//     name: "battery-half",
+//     categories: [IconCategory.DEVICE, IconCategory.SYSTEM],
+//     tags: ["charged", "charger", "charging", "power"],
+//     Icon: require("../Icons/battery-half.svg"),
+//   },
+//   {
+//     name: "battery-half-hash",
+//     categories: [IconCategory.DEVICE, IconCategory.SYSTEM],
+//     tags: ["charged", "charger", "charging", "power"],
+//     Icon: require("../Icons/battery-half-hash.svg"),
+//   },
+//   {
+//     name: "book-open",
+//     categories: [IconCategory.DOCUMENT, IconCategory.OTHER],
+//     tags: ["reading", "reader", "novel", "story"],
+//     Icon: require("../Icons/book-open.svg"),
+//   },
+//   {
+//     name: "calendar-6",
+//     categories: [IconCategory.BUSINESS, IconCategory.SYSTEM],
+//     tags: ["dates", "times", "events", "schedule", "six"],
+//     Icon: require("../Icons/calendar-6.svg"),
+//   },
+//   {
+//     name: "check-circle",
+//     categories: [IconCategory.BUSINESS, IconCategory.SYSTEM],
+//     tags: ["todo", "to-do", "list", "checkbox", "round"],
+//     Icon: require("../Icons/check-circle.svg"),
+//   },
+//   {
+//     name: "clock",
+//     categories: [IconCategory.SYSTEM],
+//     tags: ["times", "timer", "alarm", "schedule", "events", "watch"],
+//     Icon: require("../Icons/clock.svg"),
+//   },
+//   {
+//     name: "cloud",
+//     categories: [
+//       IconCategory.BUSINESS,
+//       IconCategory.SYSTEM,
+//       IconCategory.WEATHER,
+//     ],
+//     tags: ["serverless", "backup", "storage"],
+//     Icon: require("../Icons/cloud.svg"),
+//   },
+//   {
+//     name: "cube",
+//     categories: [IconCategory.DESIGN, IconCategory.OTHER],
+//     tags: ["square", "box", "3d", "volume", "blocks"],
+//     Icon: require("../Icons/cube.svg"),
+//   },
+//   {
+//     name: "delete",
+//     categories: [IconCategory.SYSTEM],
+//     tags: ["keyboard", "remove", "backspace"],
+//     Icon: require("../Icons/delete.svg"),
+//   },
+//   {
+//     name: "doc",
+//     categories: [IconCategory.DOCUMENT, IconCategory.EDITOR],
+//     tags: ["documents", "files", "save"],
+//     Icon: require("../Icons/doc.svg"),
+//   },
+//   {
+//     name: "doc-text",
+//     categories: [IconCategory.DOCUMENT, IconCategory.EDITOR],
+//     tags: ["documents", "files", "save", "write"],
+//     Icon: require("../Icons/doc-text.svg"),
+//   },
+//   {
+//     name: "doc-x",
+//     categories: [IconCategory.DOCUMENT, IconCategory.EDITOR],
+//     tags: ["documents", "files", "cancel", "discard", "close"],
+//     Icon: require("../Icons/doc-x.svg"),
+//   },
+//   {
+//     name: "do-not-disturb",
+//     categories: [
+//       IconCategory.SYSTEM,
+//       IconCategory.USERS,
+//       IconCategory.WEATHER,
+//       IconCategory.OTHER,
+//     ],
+//     tags: ["forbidden", "disallowed", "blocked", "spam"],
+//     Icon: require("../Icons/do-not-disturb.svg"),
+//   },
+//   {
+//     name: "droid",
+//     categories: [
+//       IconCategory.BRAND,
+//       IconCategory.COMMUNICATION,
+//       IconCategory.DEVELOPMENT,
+//       IconCategory.DEVICE,
+//       IconCategory.SYSTEM,
+//     ],
+//     tags: ["android", "google", "mobile", "phone", "cellular", "cellphone"],
+//     Icon: require("../Icons/droid.svg"),
+//   },
+//   {
+//     name: "folder",
+//     categories: [
+//       IconCategory.DOCUMENT,
+//       IconCategory.EDITOR,
+//       IconCategory.SYSTEM,
+//     ],
+//     tags: ["directory", "directories", "files"],
+//     Icon: require("../Icons/folder.svg"),
+//   },
+//   {
+//     name: "folder-dip",
+//     categories: [
+//       IconCategory.DOCUMENT,
+//       IconCategory.EDITOR,
+//       IconCategory.SYSTEM,
+//     ],
+//     tags: ["directory", "directories", "files"],
+//     Icon: require("../Icons/folder-dip.svg"),
+//   },
+//   {
+//     name: "heart",
+//     categories: [
+//       IconCategory.COMMUNICATION,
+//       IconCategory.DESIGN,
+//       IconCategory.HEALTH,
+//       IconCategory.OTHER,
+//     ],
+//     tags: ["wellness", "love", "healthy", "like"],
+//     Icon: require("../Icons/heart.svg"),
+//   },
+//   {
+//     name: "horse",
+//     categories: [IconCategory.HEALTH, IconCategory.OTHER],
+//     tags: ["animals", "equestrian", "chess", "knight", "games", "sports"],
+//     Icon: require("../Icons/horse.svg"),
+//   },
+//   {
+//     name: "intersect",
+//     categories: [IconCategory.DESIGN],
+//     tags: ["merge", "join", "intersection", "layers"],
+//     Icon: require("../Icons/intersect.svg"),
+//   },
+//   {
+//     name: "mail",
+//     categories: [IconCategory.BUSINESS, IconCategory.COMMUNICATION],
+//     tags: ["email", "messages", "messaging", "send", "sent"],
+//     Icon: require("../Icons/mail.svg"),
+//   },
+//   {
+//     name: "medium",
+//     categories: [IconCategory.BRAND],
+//     tags: ["publish", "writing", "write"],
+//     Icon: require("../Icons/medium.svg"),
+//   },
+//   {
+//     name: "meh",
+//     categories: [
+//       IconCategory.COMMUNICATION,
+//       IconCategory.DESIGN,
+//       IconCategory.OTHER,
+//     ],
+//     tags: ["face", "smiley", "emoji", "unimpressed"],
+//     Icon: require("../Icons/meh.svg"),
+//   },
+//   {
+//     name: "mic",
+//     categories: [
+//       IconCategory.COMMUNICATION,
+//       IconCategory.DEVICE,
+//       IconCategory.MEDIA,
+//       IconCategory.SYSTEM,
+//     ],
+//     tags: ["microphone", "audio", "recording", "music", "sound", "podcast"],
+//     Icon: require("../Icons/mic.svg"),
+//   },
+//   {
+//     name: "music-beam-angled",
+//     categories: [IconCategory.MEDIA, IconCategory.SYSTEM],
+//     tags: ["songs", "audio", "playlist", "albums"],
+//     Icon: require("../Icons/music-beam-angled.svg"),
+//   },
+//   {
+//     name: "music-beam-straight",
+//     categories: [IconCategory.MEDIA, IconCategory.SYSTEM],
+//     tags: ["songs", "audio", "playlist", "albums"],
+//     Icon: require("../Icons/music-beam-straight.svg"),
+//   },
+//   {
+//     name: "pencil-line",
+//     categories: [IconCategory.DESIGN, IconCategory.EDITOR],
+//     tags: ["write", "writing", "editing", "sign", "signature"],
+//     Icon: require("../Icons/pencil-line.svg"),
+//   },
+//   {
+//     name: "pen-nib",
+//     categories: [IconCategory.DESIGN, IconCategory.EDITOR],
+//     tags: [
+//       "write",
+//       "writing",
+//       "editing",
+//       "sign",
+//       "signature",
+//       "fountain pen",
+//       "illustrator",
+//     ],
+//     Icon: require("../Icons/pen-nib.svg"),
+//   },
+//   {
+//     name: "profile-round",
+//     categories: [IconCategory.USERS],
+//     tags: ["person", "users", "account", "login", "circle"],
+//     Icon: require("../Icons/profile-round.svg"),
+//   },
+//   {
+//     name: "rewind",
+//     categories: [IconCategory.MEDIA, IconCategory.SYSTEM],
+//     tags: ["backwards", "reverse", "audio", "recording", "music", "sound"],
+//     Icon: require("../Icons/rewind.svg"),
+//   },
+//   {
+//     name: "send",
+//     categories: [IconCategory.BUSINESS, IconCategory.COMMUNICATION],
+//     tags: ["mail", "email", "messages", "up", "arrow", "pointer", "direction"],
+//     Icon: require("../Icons/chevron.svg"),
+//   },
+//   {
+//     name: "star",
+//     categories: [
+//       IconCategory.COMMUNICATION,
+//       IconCategory.MAP,
+//       IconCategory.OTHER,
+//     ],
+//     tags: ["rate", "ratings", "favorites"],
+//     Icon: require("../Icons/star.svg"),
+//   },
+//   {
+//     name: "table",
+//     categories: [IconCategory.EDITOR, IconCategory.OTHER],
+//     tags: ["tabular", "spreadsheet", "excel"],
+//     Icon: require("../Icons/table.svg"),
+//   },
+//   {
+//     name: "trash",
+//     categories: [IconCategory.DOCUMENT, IconCategory.SYSTEM],
+//     tags: ["garbage", "delete", "destroy", "recycle", "recycling"],
+//     Icon: require("../Icons/trash.svg"),
+//   },
+//   {
+//     name: "trash-duo",
+//     categories: [IconCategory.DOCUMENT, IconCategory.SYSTEM],
+//     tags: ["garbage", "delete", "destroy", "recycle", "recycling"],
+//     Icon: require("../Icons/trash-duo.svg"),
+//   },
+//   {
+//     name: "trash-solid",
+//     categories: [IconCategory.DOCUMENT, IconCategory.SYSTEM],
+//     tags: ["garbage", "delete", "destroy", "recycle", "recycling"],
+//     Icon: require("../Icons/trash-solid.svg"),
+//   },
+//   {
+//     name: "volume-off",
+//     categories: [IconCategory.DEVICE, IconCategory.MEDIA, IconCategory.SYSTEM],
+//     tags: ["speakers", "audio", "recording", "music", "sound"],
+//     Icon: require("../Icons/volume-off.svg"),
+//   },
+//   {
+//     name: "warning",
+//     categories: [IconCategory.SYSTEM],
+//     tags: ["alert", "danger", "dangerous", "caution"],
+//     Icon: require("../Icons/warning.svg"),
+//   },
+//   {
+//     name: "wifi-full",
+//     categories: [IconCategory.SYSTEM],
+//     tags: ["wireless", "internet", "network", "connection", "connectivity"],
+//     Icon: require("../Icons/wifi-full.svg"),
+//   },
+//   {
+//     name: "wifi-low",
+//     categories: [IconCategory.SYSTEM],
+//     tags: ["wireless", "internet", "network", "connection", "connectivity"],
+//     Icon: require("../Icons/wifi-low.svg"),
+//   },
+//   {
+//     name: "wifi-none",
+//     categories: [IconCategory.SYSTEM],
+//     tags: ["wireless", "internet", "network", "connection", "connectivity"],
+//     Icon: require("../Icons/wifi-none.svg"),
+//   },
+// ];