New Directory Setup (#2065)

* chore: moved app & space from apps to root

* chore: modified workspace configuration

* chore: modified dockerfiles for space and web

* chore: modified icons for space

* feat: updated files for new svg icons supported by next-images

* chore: added /spaces base path for next

* chore: added compose config for space

* chore: updated husky configuration

* chore: updated workflows for new configuration

* chore: changed app name to web

* fix: resolved build errors with web

* chore: reset file tracing root for both projects

* chore: added nginx config for deploy

* fix: eslint and tsconfig settings for space app

* husky setup fixes based on new dir

* eslint fixes

* prettier formatting

---------

Co-authored-by: Henit Chobisa <chobisa.henit@gmail.com>
This commit is contained in:
sriram veeraghanta 2023-09-03 18:50:30 +05:30 committed by GitHub
parent 20e36194b4
commit 1e152c666c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1022 changed files with 1475 additions and 1240 deletions

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,26 @@
export const saveRecentEmoji = (emoji: string) => {
const recentEmojis = localStorage.getItem("recentEmojis");
if (recentEmojis) {
const recentEmojisArray = recentEmojis.split(",");
if (recentEmojisArray.includes(emoji)) {
const index = recentEmojisArray.indexOf(emoji);
recentEmojisArray.splice(index, 1);
}
recentEmojisArray.unshift(emoji);
if (recentEmojisArray.length > 18) {
recentEmojisArray.pop();
}
localStorage.setItem("recentEmojis", recentEmojisArray.join(","));
} else {
localStorage.setItem("recentEmojis", emoji);
}
};
export const getRecentEmojis = () => {
const recentEmojis = localStorage.getItem("recentEmojis");
if (recentEmojis) {
const recentEmojisArray = recentEmojis.split(",");
return recentEmojisArray;
}
return [];
};

View file

@ -0,0 +1,607 @@
{
"material_rounded": [
{
"name": "search"
},
{
"name": "home"
},
{
"name": "menu"
},
{
"name": "close"
},
{
"name": "settings"
},
{
"name": "done"
},
{
"name": "check_circle"
},
{
"name": "favorite"
},
{
"name": "add"
},
{
"name": "delete"
},
{
"name": "arrow_back"
},
{
"name": "star"
},
{
"name": "logout"
},
{
"name": "add_circle"
},
{
"name": "cancel"
},
{
"name": "arrow_drop_down"
},
{
"name": "more_vert"
},
{
"name": "check"
},
{
"name": "check_box"
},
{
"name": "toggle_on"
},
{
"name": "open_in_new"
},
{
"name": "refresh"
},
{
"name": "login"
},
{
"name": "radio_button_unchecked"
},
{
"name": "more_horiz"
},
{
"name": "apps"
},
{
"name": "radio_button_checked"
},
{
"name": "download"
},
{
"name": "remove"
},
{
"name": "toggle_off"
},
{
"name": "bolt"
},
{
"name": "arrow_upward"
},
{
"name": "filter_list"
},
{
"name": "delete_forever"
},
{
"name": "autorenew"
},
{
"name": "key"
},
{
"name": "sort"
},
{
"name": "sync"
},
{
"name": "add_box"
},
{
"name": "block"
},
{
"name": "restart_alt"
},
{
"name": "menu_open"
},
{
"name": "shopping_cart_checkout"
},
{
"name": "expand_circle_down"
},
{
"name": "backspace"
},
{
"name": "undo"
},
{
"name": "done_all"
},
{
"name": "do_not_disturb_on"
},
{
"name": "open_in_full"
},
{
"name": "double_arrow"
},
{
"name": "sync_alt"
},
{
"name": "zoom_in"
},
{
"name": "done_outline"
},
{
"name": "drag_indicator"
},
{
"name": "fullscreen"
},
{
"name": "star_half"
},
{
"name": "settings_accessibility"
},
{
"name": "reply"
},
{
"name": "exit_to_app"
},
{
"name": "unfold_more"
},
{
"name": "library_add"
},
{
"name": "cached"
},
{
"name": "select_check_box"
},
{
"name": "terminal"
},
{
"name": "change_circle"
},
{
"name": "disabled_by_default"
},
{
"name": "swap_horiz"
},
{
"name": "swap_vert"
},
{
"name": "app_registration"
},
{
"name": "download_for_offline"
},
{
"name": "close_fullscreen"
},
{
"name": "file_open"
},
{
"name": "minimize"
},
{
"name": "open_with"
},
{
"name": "dataset"
},
{
"name": "add_task"
},
{
"name": "start"
},
{
"name": "keyboard_voice"
},
{
"name": "create_new_folder"
},
{
"name": "forward"
},
{
"name": "download"
},
{
"name": "settings_applications"
},
{
"name": "compare_arrows"
},
{
"name": "redo"
},
{
"name": "zoom_out"
},
{
"name": "publish"
},
{
"name": "html"
},
{
"name": "token"
},
{
"name": "switch_access_shortcut"
},
{
"name": "fullscreen_exit"
},
{
"name": "sort_by_alpha"
},
{
"name": "delete_sweep"
},
{
"name": "indeterminate_check_box"
},
{
"name": "view_timeline"
},
{
"name": "settings_backup_restore"
},
{
"name": "arrow_drop_down_circle"
},
{
"name": "assistant_navigation"
},
{
"name": "sync_problem"
},
{
"name": "clear_all"
},
{
"name": "density_medium"
},
{
"name": "heart_plus"
},
{
"name": "filter_alt_off"
},
{
"name": "expand"
},
{
"name": "subdirectory_arrow_right"
},
{
"name": "download_done"
},
{
"name": "arrow_outward"
},
{
"name": "123"
},
{
"name": "swipe_left"
},
{
"name": "auto_mode"
},
{
"name": "saved_search"
},
{
"name": "place_item"
},
{
"name": "system_update_alt"
},
{
"name": "javascript"
},
{
"name": "search_off"
},
{
"name": "output"
},
{
"name": "select_all"
},
{
"name": "fit_screen"
},
{
"name": "swipe_up"
},
{
"name": "dynamic_form"
},
{
"name": "hide_source"
},
{
"name": "swipe_right"
},
{
"name": "switch_access_shortcut_add"
},
{
"name": "browse_gallery"
},
{
"name": "css"
},
{
"name": "density_small"
},
{
"name": "assistant_direction"
},
{
"name": "check_small"
},
{
"name": "youtube_searched_for"
},
{
"name": "move_up"
},
{
"name": "swap_horizontal_circle"
},
{
"name": "data_thresholding"
},
{
"name": "install_mobile"
},
{
"name": "move_down"
},
{
"name": "dataset_linked"
},
{
"name": "keyboard_command_key"
},
{
"name": "view_kanban"
},
{
"name": "swipe_down"
},
{
"name": "key_off"
},
{
"name": "transcribe"
},
{
"name": "send_time_extension"
},
{
"name": "swipe_down_alt"
},
{
"name": "swipe_left_alt"
},
{
"name": "swipe_right_alt"
},
{
"name": "swipe_up_alt"
},
{
"name": "keyboard_option_key"
},
{
"name": "cycle"
},
{
"name": "rebase"
},
{
"name": "rebase_edit"
},
{
"name": "empty_dashboard"
},
{
"name": "magic_exchange"
},
{
"name": "acute"
},
{
"name": "point_scan"
},
{
"name": "step_into"
},
{
"name": "cheer"
},
{
"name": "emoticon"
},
{
"name": "explosion"
},
{
"name": "water_bottle"
},
{
"name": "weather_hail"
},
{
"name": "syringe"
},
{
"name": "pill"
},
{
"name": "genetics"
},
{
"name": "allergy"
},
{
"name": "medical_mask"
},
{
"name": "body_fat"
},
{
"name": "barefoot"
},
{
"name": "infrared"
},
{
"name": "wrist"
},
{
"name": "metabolism"
},
{
"name": "conditions"
},
{
"name": "taunt"
},
{
"name": "altitude"
},
{
"name": "tibia"
},
{
"name": "footprint"
},
{
"name": "eyeglasses"
},
{
"name": "man_3"
},
{
"name": "woman_2"
},
{
"name": "rheumatology"
},
{
"name": "tornado"
},
{
"name": "landslide"
},
{
"name": "foggy"
},
{
"name": "severe_cold"
},
{
"name": "tsunami"
},
{
"name": "vape_free"
},
{
"name": "sign_language"
},
{
"name": "emoji_symbols"
},
{
"name": "clear_night"
},
{
"name": "emoji_food_beverage"
},
{
"name": "hive"
},
{
"name": "thunderstorm"
},
{
"name": "communication"
},
{
"name": "rocket"
},
{
"name": "pets"
},
{
"name": "public"
},
{
"name": "quiz"
},
{
"name": "mood"
},
{
"name": "gavel"
},
{
"name": "eco"
},
{
"name": "diamond"
},
{
"name": "forest"
},
{
"name": "rainy"
},
{
"name": "skull"
}
]
}

View file

@ -0,0 +1,207 @@
import React, { useEffect, useState } from "react";
// headless ui
import { Tab, Transition, Popover } from "@headlessui/react";
// react colors
import { TwitterPicker } from "react-color";
// types
import { Props } from "./types";
// emojis
import emojis from "./emojis.json";
import icons from "./icons.json";
// helpers
import { getRecentEmojis, saveRecentEmoji } from "./helpers";
import { getRandomEmoji, renderEmoji } from "helpers/emoji.helper";
const tabOptions = [
{
key: "emoji",
title: "Emoji",
},
{
key: "icon",
title: "Icon",
},
];
const EmojiIconPicker: React.FC<Props> = ({
label,
value,
onChange,
onIconColorChange,
disabled = false,
}) => {
const [isOpen, setIsOpen] = useState(false);
const [openColorPicker, setOpenColorPicker] = useState(false);
const [activeColor, setActiveColor] = useState<string>("rgb(var(--color-text-200))");
const [recentEmojis, setRecentEmojis] = useState<string[]>([]);
useEffect(() => {
setRecentEmojis(getRecentEmojis());
}, []);
useEffect(() => {
if (!value || value?.length === 0) onChange(getRandomEmoji());
}, [value, onChange]);
return (
<Popover className="relative z-[1]">
<Popover.Button
onClick={() => setIsOpen((prev) => !prev)}
className="outline-none"
disabled={disabled}
>
{label}
</Popover.Button>
<Transition
show={isOpen}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Popover.Panel className="absolute z-10 mt-2 w-[250px] rounded-[4px] border border-custom-border-200 bg-custom-background-80 shadow-lg">
<div className="h-[230px] w-[250px] overflow-auto rounded-[4px] border border-custom-border-200 bg-custom-background-80 p-2 shadow-xl">
<Tab.Group as="div" className="flex h-full w-full flex-col">
<Tab.List className="flex-0 -mx-2 flex justify-around gap-1 p-1">
{tabOptions.map((tab) => (
<Tab key={tab.key} as={React.Fragment}>
{({ selected }) => (
<button
type="button"
onClick={() => {
setOpenColorPicker(false);
}}
className={`-my-1 w-1/2 border-b pb-2 text-center text-sm font-medium outline-none transition-colors ${
selected ? "" : "border-transparent text-custom-text-200"
}`}
>
{tab.title}
</button>
)}
</Tab>
))}
</Tab.List>
<Tab.Panels className="flex-1 overflow-y-auto">
<Tab.Panel>
{recentEmojis.length > 0 && (
<div className="py-2">
<h3 className="mb-2 text-xs text-custom-text-200">Recent</h3>
<div className="grid grid-cols-8 gap-2">
{recentEmojis.map((emoji) => (
<button
key={emoji}
type="button"
className="flex h-4 w-4 select-none items-center justify-between text-sm"
onClick={() => {
onChange(emoji);
setIsOpen(false);
}}
>
{renderEmoji(emoji)}
</button>
))}
</div>
</div>
)}
<hr className="mb-2 h-[1px] w-full border-custom-border-200" />
<div>
<div className="grid grid-cols-8 gap-x-2 gap-y-3">
{emojis.map((emoji) => (
<button
type="button"
className="mb-1 flex h-4 w-4 select-none items-center text-sm"
key={emoji}
onClick={() => {
onChange(emoji);
saveRecentEmoji(emoji);
setIsOpen(false);
}}
>
{renderEmoji(emoji)}
</button>
))}
</div>
</div>
</Tab.Panel>
<div className="py-2">
<Tab.Panel className="flex h-full w-full flex-col justify-center">
<div className="relative">
<div className="flex items-center justify-between px-1 pb-2">
{[
"#FF6B00",
"#8CC1FF",
"#FCBE1D",
"#18904F",
"#ADF672",
"#05C3FF",
"#000000",
].map((curCol) => (
<span
key={curCol}
className="h-4 w-4 cursor-pointer rounded-full"
style={{ backgroundColor: curCol }}
onClick={() => setActiveColor(curCol)}
/>
))}
<button
type="button"
onClick={() => setOpenColorPicker((prev) => !prev)}
className="flex items-center gap-1"
>
<span
className="conical-gradient h-4 w-4 rounded-full"
style={{ backgroundColor: activeColor }}
/>
</button>
</div>
<div>
<TwitterPicker
className={`!absolute top-4 left-4 z-10 m-2 ${
openColorPicker ? "block" : "hidden"
}`}
color={activeColor}
onChange={(color) => {
setActiveColor(color.hex);
if (onIconColorChange) onIconColorChange(color.hex);
}}
triangle="hide"
width="205px"
/>
</div>
</div>
<hr className="mb-1 h-[1px] w-full border-custom-border-200" />
<div className="mt-1 ml-1 grid grid-cols-8 gap-x-2 gap-y-3">
{icons.material_rounded.map((icon, index) => (
<button
key={`${icon.name}-${index}`}
type="button"
className="mb-1 flex h-4 w-4 select-none items-center text-lg"
onClick={() => {
onChange({ name: icon.name, color: activeColor });
setIsOpen(false);
}}
>
<span
style={{ color: activeColor }}
className="material-symbols-rounded text-lg"
>
{icon.name}
</span>
</button>
))}
</div>
</Tab.Panel>
</div>
</Tab.Panels>
</Tab.Group>
</div>
</Popover.Panel>
</Transition>
</Popover>
);
};
export default EmojiIconPicker;

View file

@ -0,0 +1,14 @@
export type Props = {
label: React.ReactNode;
value: any;
onChange: (
data:
| string
| {
name: string;
color: string;
}
) => void;
onIconColorChange?: (data: any) => void;
disabled?: boolean;
};