feat: update text editor component

apps/saagaraya/app/providers.tsx

@@ -5,6 +5,7 @@ import { ColorSchemeScript, createTheme, MantineProvider } from '@mantine/core';
 import { ThemeProvider } from 'next-themes';
 
 import { noto_sans_sinhala } from '@/assets/fonts';
+import { ThemeSwitchComponent } from '@/components/theme-switch';
 import { AuthContextProvider } from '@/modules/context';
 
 type ProvidersProps = {
@@ -17,11 +18,14 @@ const theme = createTheme({
 
 export function Providers({ children }: ProvidersProps) {
   return (
-    <ThemeProvider attribute="class" disableTransitionOnChange>
-      <AuthContextProvider>
-        <ColorSchemeScript defaultColorScheme="auto" />
-        <MantineProvider theme={theme}>{children}</MantineProvider>
-      </AuthContextProvider>
-    </ThemeProvider>
+    <AuthContextProvider>
+      <ThemeProvider attribute="class">
+        <MantineProvider theme={theme}>
+          <ColorSchemeScript defaultColorScheme="auto" />
+          <ThemeSwitchComponent />
+          {children}
+        </MantineProvider>
+      </ThemeProvider>
+    </AuthContextProvider>
   );
 }

apps/saagaraya/assets/fonts/fonts.ts

@@ -1,8 +1,10 @@
 import {
+  Gemunu_Libre,
   Noto_Sans_Sinhala,
   Noto_Serif_Sinhala,
   Poppins,
   Source_Serif_4,
+  Yaldevi,
 } from 'next/font/google';
 
 import { DisplayLanguage, LanguageFonts } from '@kala-pavura/models';
@@ -19,6 +21,18 @@ export const noto_sans_sinhala = Noto_Sans_Sinhala({
   weight: ['400', '600'],
 });
 
+export const yaldevi = Yaldevi({
+  subsets: ['sinhala'],
+  display: 'swap',
+  weight: ['400', '700'],
+});
+
+export const gemunu_libre = Gemunu_Libre({
+  subsets: ['sinhala'],
+  display: 'swap',
+  weight: ['400', '700'],
+});
+
 export const poppins = Poppins({
   subsets: ['latin'],
   display: 'swap',

apps/saagaraya/components/atoms/index.ts

@@ -1 +1,3 @@
-export * from './post-interaction-buttons';
+export * from './post-interaction-button';
+export * from './toolbar-core-button';
+export * from './toolbar-core-button-group';

apps/saagaraya/components/atoms/toolbar-core-button-group/ToolbarCoreButtonGroup.atom.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import cs from 'classnames';
+
+export type ToolBarCoreButtonGroupProps = {
+  children: ReactNode | ReactNode[];
+};
+
+export const ToolbarCoreButtonGroup = ({
+  children,
+}: ToolBarCoreButtonGroupProps) => {
+  return (
+    <span
+      className={cs(
+        'inline-flex gap-2 p-2',
+        'border border-gray-200/20',
+        'rounded-full',
+      )}>
+      {children}
+    </span>
+  );
+};

apps/saagaraya/components/atoms/toolbar-core-button-group/index.ts

@@ -0,0 +1 @@
+export * from './ToolbarCoreButtonGroup.atom';

apps/saagaraya/components/atoms/toolbar-core-button/ToolbarCoreButton.atom.tsx

@@ -0,0 +1,39 @@
+import { forwardRef } from 'react';
+import { Icon } from '@phosphor-icons/react';
+import cs from 'classnames';
+
+export type ToolBarCoreButtonProps = {
+  icon: Icon;
+  onClick?: (() => void) | undefined;
+  isSelected?: boolean;
+  className?: string;
+};
+
+export const ToolBarCoreButton = forwardRef<
+  HTMLDivElement,
+  ToolBarCoreButtonProps
+>((props: ToolBarCoreButtonProps, ref) => {
+  // HoverCard.Target will inject few other props to the element
+  const { icon, onClick, isSelected, className, ...rest } = props;
+  const Icon = icon;
+
+  return (
+    <div
+      ref={ref}
+      onClick={onClick || (() => {})}
+      className={cs(
+        'p-2 rounded-full hover:bg-white hover:text-neutral-900',
+        'transition-colors duration-200',
+        'flex items-center justify-center',
+        {
+          'bg-gray-100/20': isSelected,
+        },
+        className,
+      )}
+      {...rest}>
+      {<Icon size={16} />}
+    </div>
+  );
+});
+
+ToolBarCoreButton.displayName = 'ToolBarCoreButton';

apps/saagaraya/components/atoms/toolbar-core-button/index.ts

@@ -0,0 +1 @@
+export * from './ToolbarCoreButton.atom';

apps/saagaraya/components/select/Select.component.tsx

@@ -0,0 +1,102 @@
+import { Fragment } from 'react';
+import { Listbox, Transition } from '@headlessui/react';
+import { CaretUpDown, Check } from '@phosphor-icons/react';
+import cs from 'classnames';
+
+export type SelectOption = {
+  value: string;
+  label: string;
+  className?: string;
+};
+
+type SelectProps<T> = {
+  data: SelectOption[];
+  selected: T;
+  onChange: (value: T) => void;
+  className?: string;
+};
+
+export function Select<T>({
+  data,
+  selected,
+  onChange,
+  className,
+}: SelectProps<T>) {
+  const selectedOption = data.find((option) => option.value === selected);
+
+  return (
+    <Listbox value={selected} onChange={onChange}>
+      <div className={cs('relative mt-1 w-full', className)}>
+        <Listbox.Button
+          className={cs(
+            'relative w-full cursor-default rounded-full',
+            'py-2 pl-4 pr-10 text-left',
+            'border border-gray-300 dark:border-neutral-500',
+            'focus:outline-none focus-visible:border-blue-400 focus-visible:ring-[0.0075rem] focus-visible:ring-blue-400',
+            'bg-white dark:bg-neutral-800 sm:text-sm',
+          )}>
+          {selectedOption && (
+            <span
+              className={cs(
+                'block truncate text-black dark:text-neutral-300',
+                selectedOption.className,
+              )}>
+              {selectedOption.label}
+            </span>
+          )}
+          <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+            <CaretUpDown className="h-5 w-5 text-gray-400" aria-hidden="true" />
+          </span>
+        </Listbox.Button>
+        <Transition
+          as={Fragment}
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0">
+          <Listbox.Options
+            className={cs(
+              'absolute mt-3 z-2 max-h-60 w-full overflow-auto rounded-2xl',
+              'py-1 text-base',
+              'ring-1 ring-black/5 focus:outline-none',
+              'bg-white dark:bg-neutral-700',
+              'sm:text-sm',
+            )}>
+            {data.map((item, index) => (
+              <Listbox.Option
+                key={index}
+                className={({ active }) =>
+                  `relative cursor-default select-none py-2 pl-10 pr-4 ${
+                    active
+                      ? 'bg-gray-100 text-gray-900 dark:bg-neutral-600 dark:text-neutral-200'
+                      : 'text-gray-900 dark:text-neutral-300'
+                  }`
+                }
+                value={item.value}>
+                {({ selected }) => (
+                  <>
+                    <span
+                      className={cs(
+                        'block truncate',
+                        {
+                          'font-medium': selected,
+                          'font-normal': !selected,
+                        },
+                        item?.className,
+                      )}>
+                      {item.label}
+                    </span>
+                    {selected ? (
+                      <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600 dark:text-neutral-200">
+                        <Check className="h-5 w-5" />
+                      </span>
+                    ) : null}
+                  </>
+                )}
+              </Listbox.Option>
+            ))}
+          </Listbox.Options>
+        </Transition>
+      </div>
+    </Listbox>
+  );
+}

apps/saagaraya/components/select/index.ts

@@ -0,0 +1 @@
+export * from './Select.component';