@collabchron/notiq 0.2.0

package/src/components/providers/QueryProvider.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export default function QueryProvider({ children }: Props) {
+  const [queryClient] = useState(() => new QueryClient());
+  return (
+    <QueryClientProvider client={queryClient}> {children} </QueryClientProvider>
+  );
+}

package/src/components/providers/SharedHistoryContext.tsx

@@ -0,0 +1,28 @@
+"use client"
+import type {HistoryState} from '@lexical/react/LexicalHistoryPlugin';
+import {createEmptyHistoryState} from '@lexical/react/LexicalHistoryPlugin';
+
+import * as React from 'react';
+import {createContext, ReactNode, useContext, useMemo} from 'react';
+
+type ContextShape = {
+  historyState?: HistoryState;
+};
+
+const Context: React.Context<ContextShape> = createContext({});
+
+export const SharedHistoryContext = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const historyContext = useMemo(
+    () => ({historyState: createEmptyHistoryState()}),
+    [],
+  );
+  return <Context.Provider value={historyContext}>{children}</Context.Provider>;
+};
+
+export const useSharedHistoryContext = (): ContextShape => {
+  return useContext(Context);
+};

package/src/components/providers/ToolbarContext.tsx

@@ -0,0 +1,123 @@
+"use client"
+import {ElementFormatType} from 'lexical';
+import React, {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+
+export const MIN_ALLOWED_FONT_SIZE = 8;
+export const MAX_ALLOWED_FONT_SIZE = 72;
+export const DEFAULT_FONT_SIZE = 15;
+
+const rootTypeToRootName = {
+  root: 'Root',
+  table: 'Table',
+};
+
+export const blockTypeToBlockName = {
+  bullet: 'Bulleted List',
+  check: 'Check List',
+  code: 'Code Block',
+  h1: 'Heading 1',
+  h2: 'Heading 2',
+  h3: 'Heading 3',
+  h4: 'Heading 4',
+  h5: 'Heading 5',
+  h6: 'Heading 6',
+  number: 'Numbered List',
+  paragraph: 'Normal',
+  quote: 'Quote',
+};
+
+const INITIAL_TOOLBAR_STATE = {
+  bgColor: '#fff',
+  blockType: 'paragraph' as keyof typeof blockTypeToBlockName,
+  canRedo: false,
+  canUndo: false,
+  codeLanguage: '',
+  elementFormat: 'left' as ElementFormatType,
+  fontColor: '#000',
+  fontFamily: 'Arial',
+  // Current font size in px
+  fontSize: `${DEFAULT_FONT_SIZE}px`,
+  // Font size input value - for controlled input
+  fontSizeInputValue: `${DEFAULT_FONT_SIZE}`,
+  isBold: false,
+  isCode: false,
+  isImageCaption: false,
+  isItalic: false,
+  isLink: false,
+  isRTL: false,
+  isStrikethrough: false,
+  isSubscript: false,
+  isSuperscript: false,
+  isUnderline: false,
+  isLowercase: false,
+  isUppercase: false,
+  isCapitalize: false,
+  rootType: 'root' as keyof typeof rootTypeToRootName,
+};
+
+type ToolbarState = typeof INITIAL_TOOLBAR_STATE;
+
+// Utility type to get keys and infer value types
+type ToolbarStateKey = keyof ToolbarState;
+type ToolbarStateValue<Key extends ToolbarStateKey> = ToolbarState[Key];
+
+export type ContextShape = {
+  toolbarState: ToolbarState;
+  updateToolbarState<Key extends ToolbarStateKey>(
+    key: Key,
+    value: ToolbarStateValue<Key>,
+  ): void;
+};
+
+
+const Context = createContext<ContextShape | undefined>(undefined);
+
+export const ToolbarContext = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const [toolbarState, setToolbarState] = useState(INITIAL_TOOLBAR_STATE);
+  const selectionFontSize = toolbarState.fontSize;
+
+  const updateToolbarState = useCallback(
+    <Key extends ToolbarStateKey>(key: Key, value: ToolbarStateValue<Key>) => {
+      setToolbarState((prev) => ({
+        ...prev,
+        [key]: value,
+      }));
+    },
+    [],
+  );
+
+  useEffect(() => {
+    updateToolbarState('fontSizeInputValue', selectionFontSize.slice(0, -2));
+  }, [selectionFontSize, updateToolbarState]);
+
+  const contextValue = useMemo(() => {
+    return {
+      toolbarState,
+      updateToolbarState,
+    };
+  }, [toolbarState, updateToolbarState]);
+
+  return <Context.Provider value={contextValue}>{children}</Context.Provider>;
+};
+
+export const useToolbarState = () => {
+  const context = useContext(Context);
+
+  if (context === undefined) {
+    throw new Error('useToolbarState must be used within a ToolbarProvider');
+  }
+
+  return context;
+};

package/src/components/providers/theme-provider.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

package/src/components/theme/ModeToggle.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ModeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant={"outline"} size={"Toolbar"} type="button" className="border-none">
+          <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/components/ui/FileInput.tsx

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {JSX} from 'react';
+
+import './Input.css';
+
+import * as React from 'react';
+
+type Props = Readonly<{
+  'data-test-id'?: string;
+  accept?: string;
+  label: string;
+  onChange: (files: FileList | null) => void;
+}>;
+
+export default function FileInput({
+  accept,
+  label,
+  onChange,
+  'data-test-id': dataTestId,
+}: Props): JSX.Element {
+  return (
+    <div className="Input__wrapper">
+      <label className="Input__label">{label}</label>
+      <input
+        type="file"
+        accept={accept}
+        className="Input__input"
+        onChange={(e) => onChange(e.target.files)}
+        data-test-id={dataTestId}
+      />
+    </div>
+  );
+}

package/src/components/ui/Input.css

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+.Input__wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.Input__label {
+  display: flex;
+  flex: 1;
+  color: #666;
+}
+.Input__input {
+  display: flex;
+  flex: 2;
+  border: 1px solid #999;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  padding-left: 10px;
+  padding-right: 10px;
+  font-size: 16px;
+  border-radius: 5px;
+  min-width: 0;
+}

package/src/components/ui/Select.css

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-color: transparent;
+  border: none;
+  padding: 0 1em 0 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  cursor: inherit;
+  line-height: inherit;
+
+  z-index: 1;
+  outline: none;
+}
+
+:root {
+  --select-border: #393939;
+  --select-focus: #101484;
+  --select-arrow: var(--select-border);
+}
+
+.select {
+  min-width: 160px;
+  max-width: 290px;
+  border: 1px solid var(--select-border);
+  border-radius: 0.25em;
+  padding: 0.25em 0.5em;
+  font-size: 1rem;
+  cursor: pointer;
+  line-height: 1.4;
+  background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
+}

package/src/components/ui/Select.tsx

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {JSX} from 'react';
+
+import './Select.css';
+
+import * as React from 'react';
+
+type SelectIntrinsicProps = JSX.IntrinsicElements['select'];
+interface SelectProps extends SelectIntrinsicProps {
+  label: string;
+}
+
+export default function Select({
+  children,
+  label,
+  className,
+  ...other
+}: SelectProps): JSX.Element {
+  return (
+    <div className="Input__wrapper">
+      <label style={{marginTop: '-1em'}} className="Input__label">
+        {label}
+      </label>
+      <select {...other} className={className || 'select'}>
+        {children}
+      </select>
+    </div>
+  );
+}

package/src/components/ui/TextInput.tsx

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {JSX} from 'react';
+
+import './Input.css';
+
+import * as React from 'react';
+import {HTMLInputTypeAttribute} from 'react';
+
+type Props = Readonly<{
+  'data-test-id'?: string;
+  label: string;
+  onChange: (val: string) => void;
+  placeholder?: string;
+  value: string;
+  type?: HTMLInputTypeAttribute;
+}>;
+
+export default function TextInput({
+  label,
+  value,
+  onChange,
+  placeholder = '',
+  'data-test-id': dataTestId,
+  type = 'text',
+}: Props): JSX.Element {
+  return (
+    <div className="Input__wrapper">
+      <label className="Input__label">{label}</label>
+      <input
+        type={type}
+        className="Input__input"
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => {
+          onChange(e.target.value);
+        }}
+        data-test-id={dataTestId}
+      />
+    </div>
+  );
+}