@wazobiatech/wazui 0.0.1

package/src/index.css

@@ -0,0 +1,397 @@
+@import 'tw-animate-css';
+@import 'react-advanced-cropper/dist/style.css';
+@import 'quill/dist/quill.core.css';
+@import 'quill/dist/quill.snow.css';
+@import "tailwindcss";
+
+@font-face {
+  font-family: 'UniversalJungle';
+  src: url('./assets/fonts/UniversalJungle/UniversalJungle-420.woff') format('woff');
+}
+@font-face {
+  font-family: 'UniversalFeature';
+  src: url('./assets/fonts/UniversalFeature/FeatureJungle-Light.woff') format('woff');
+  font-style: normal;
+  font-display: swap;
+}
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  /* --sidebar-width: var(--sidebar-width); */
+  --font-display: var(--font-display);
+
+  --text: 10px;
+  --text-xs: 11px;
+  --text-sm: 12px;
+  --text-base: 14px;
+  --text-md: 18px;
+  --text-xl: 20px;
+  --text-2xl: 24px;
+  --text-3xl: 30px;
+
+  --font-weight-normal: 420;
+
+  --radius: 4px;
+}
+
+:root {
+  --radius: 0.5rem;
+  --background: oklch(1 0 0);
+  --foreground: #7a7a7a;
+  /* --foreground: #434343; */
+  --card: oklch(1 0 0);
+  --card-foreground: #7a7a7a;
+  --popover: oklch(1 0 0);
+  --popover-foreground: #7a7a7a;
+  --primary: #86fc65;
+  --primary-foreground: #272727;
+  --secondary: #fbbc9aa3;
+  --secondary-foreground: #6ffff0;
+  --muted: #f9f9f9;
+  --muted-foreground: #8d8d8d;
+  /* --muted-foreground: #acbcc4; */
+  --accent: #befef7;
+  --accent-foreground: #001a24;
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: #e9e9e9;
+  --input: oklch(0.92 0.004 286.32);
+  --ring: #a4f87a;
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: #7a7a7a;
+  --sidebar-primary: #a4f87a;
+  --sidebar-primary-foreground: oklch(0.982 0.018 155.826);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: #a4f87a;
+  /* --sidebar-width: 1rem; */
+  --font-display: 'UniversalJungle', sans-serif;
+  /* --font-display: 'Playwrite RO', cursives; */
+}
+
+.dark {
+  --background: black;
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.696 0.17 162.48);
+  --primary-foreground: oklch(0.393 0.095 152.535);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.527 0.154 150.069);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.696 0.17 162.48);
+  --sidebar-primary-foreground: oklch(0.393 0.095 152.535);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.527 0.154 150.069);
+}
+
+.brand {
+  --radius: 1rem;
+  --background: oklch(1 0 0);
+  --foreground: #7a7a7a;
+  --card: oklch(1 0 0);
+  --card-foreground: #7a7a7a;
+  --popover: oklch(1 0 0);
+  --popover-foreground: #7a7a7a;
+  --primary: oklch(0.795 0.184 86.047);
+  --primary-foreground: oklch(0.421 0.095 57.708);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.795 0.184 86.047);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: #7a7a7a;
+  --sidebar-primary: oklch(0.795 0.184 86.047);
+  --sidebar-primary-foreground: oklch(0.421 0.095 57.708);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.795 0.184 86.047);
+  /* --font-display: 'UniversalFeature', cursives; */
+  --font-display: 'Playwrite RO', cursives;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground font-display font-normal text-base;
+  }
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.no-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+#editorParent > div {
+  height: 100%;
+  padding-bottom: 20px;
+}
+.ql-editor {
+  max-height: 100%;
+  padding-bottom: 20px;
+  word-break: break-word;
+}
+
+.quill-editor .ql-editor p,
+.quill-editor .ql-editor li,
+.quill-editor .ql-editor.ql-blank::before {
+  margin: 10px 0;
+  font-family: 'UniversalJungle';
+  font-weight: 420;
+  font-size: 16px;
+  line-height: 150%;
+  letter-spacing: 0%;
+  vertical-align: middle;
+  color: #5f5e5e;
+  font-style: normal;
+}
+.quill-editor .ql-editor.ql-blank::before {
+  opacity: 0.5;
+}
+
+.quill-editor .ql-editor li {
+  line-height: 1.7;
+  font-size: 16px;
+}
+
+.quill-editor img {
+  position: relative;
+  width: 100%;
+  object-fit: cover;
+}
+
+.quill-editor {
+  border: 0 !important;
+}
+.quill-editor .ql-picker-options {
+  padding: 0;
+}
+.ql-picker {
+  line-height: 0;
+}
+.ql-editor ol li[data-list='bullet']:before {
+  content: none !important;
+  font-style: inherit !important;
+}
+#toolbar .ql-picker-label::before,
+#toolbar .ql-picker-item::before {
+  /* color: var(--muted-foreground) !important; */
+}
+#toolbar .ql-stroke {
+  /* stroke: var(--muted-foreground) !important; */
+}
+#toolbar .ql-stroke:hover {
+  /* stroke: black !important; */
+}
+#toolbar .ql-picker-options:hover {
+  /* color: black !important; */
+}
+#toolbar .ql-header .ql-picker-item {
+  padding: 12px 16px !important;
+  border-bottom: 0.5px solid #e4e7ec;
+  /* color: black !important; */
+}
+.quill-editor .ql-picker-item::before:hover {
+  color: black !important;
+}
+
+.quill-editor .ql-editor .ql-video {
+  position: relative;
+  left: 20%;
+  width: 60%;
+  min-height: 400px;
+  position: relative;
+  overflow: auto;
+}
+.quill-editor .ql-tooltip {
+  left: 10% !important;
+  z-index: 10;
+}
+.custom-link-tooltip {
+  padding: 12px !important;
+  border-radius: 8px !important;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
+  border: 1px solid #e5e7eb !important;
+  background: white !important;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.custom-link-tooltip input {
+  border: 1px solid #d1d5db !important;
+  border-radius: 4px !important;
+  padding: 6px 8px !important;
+  font-size: 13px !important;
+}
+
+.custom-link-tooltip input:focus {
+  outline: none !important;
+  border-color: #3b82f6 !important;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
+}
+.custom-link-tooltip a.ql-action {
+  background-color: #3b82f6 !important;
+  color: white;
+}
+
+.ql-toolbar button[data-tooltip]:hover::before,
+.ql-toolbar select[data-tooltip]:hover::before,
+.ql-toolbar span[data-tooltip]:hover::before {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+  z-index: 1000;
+  pointer-events: none;
+  margin-bottom: 4px;
+  color: var(--primary-foreground);
+  background-color: var(--primary);
+}
+
+.ql-toolbar button[data-tooltip]:hover::after,
+.ql-toolbar select[data-tooltip]:hover::after,
+.ql-toolbar span[data-tooltip]:hover::after {
+  content: '';
+  position: absolute;
+  bottom: 70%;
+  left: 50%;
+  transform: translateX(-40%);
+  border: 6px solid transparent;
+  border-top-color: var(--primary);
+  z-index: 1000;
+  pointer-events: none;
+}
+
+.ql-toolbar button,
+.ql-toolbar select,
+.ql-toolbar span {
+  position: relative;
+}
+
+.waz_shadow {
+  box-shadow: 0px 4px 12px 0px #00000012;
+}
+.waz_slight_shadow {
+  /* box-shadow: 0px 4px 8px 0px #a0a0a021; */
+  border: 0.5px solid #e3e3e3;
+}
+.slight_border {
+  border-width: 0.5px;
+  border-color: #6c6c6c;
+}
+
+@keyframes wazui_progress_bar {
+  0% {
+    transform: translateX(-98%);
+  }
+  100% {
+    transform: translateX(0%);
+  }
+}
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground text-base leading-[4.5];
+  }
+  a:not(.quill-editor a),
+  th {
+    @apply !text-[#101828];
+  }
+
+  button {
+    @apply text-base;
+  }
+
+  h1 {
+    @apply text-[#434343];
+    font-weight: 500;
+  }
+}

package/src/index.ts

@@ -0,0 +1,59 @@
+import TimeAgo from 'javascript-time-ago';
+
+import en from 'javascript-time-ago/locale/en';
+import ru from 'javascript-time-ago/locale/ru';
+
+TimeAgo.addDefaultLocale(en);
+TimeAgo.addLocale(ru);
+
+export type { Post } from './types/post.types';
+export type { FilterField, StatusFilter } from './components/wazui/WazUiBlogComponent/types';
+export { cleanHTML } from './utils/utils';
+// Export Shadcn UI components
+export { Button } from './components/shadcn/ui/button';
+export * from './components/shadcn/ui/dropdown-menu';
+
+// Export WAZUI components
+export { default as WazUIButton } from './components/wazui/WazUIButton/WazUiButton';
+export { default as WazUIBlogComponent } from './components/wazui/WazUiBlogComponent/WazUIBlogComponent';
+// export { default as WazUIBlogComponentWithProvider } from './components/wazui/WazUiBlogComponent/WazUIBlogComponentWithProvider';
+export { default as WazUiPostCard } from './components/wazui/WazUiPostCard/WazUiPostCard';
+export { FilterFieldType, BlogStatus } from './components/wazui/WazUiBlogComponent/types';
+export { WazUIPostActions } from './components/wazui/WazUiPostCard/WazUIPostActions';
+export { WazUIPostCategories } from './components/wazui/WazUiPostCard/WazUIPostCategories';
+export { WazUIPostTags } from './components/wazui/WazUiPostCard/WazUiPostTags';
+export { WazUIPostStatistics } from './components/wazui/WazUiPostCard/WazUiPostStatistics';
+export { default as WazUIThemeProvider } from './providers/ThemeProvider';
+export { default as useWazUITheme } from './hooks/useTheme';
+
+export { default as WazUIQueryProvider } from './providers/QueryProvider';
+export { WazuiActionModalProvider } from './components/wazui/WazuiActionModal/provider';
+export { withReactQuery } from './decorators/ReactQueryDecorator';
+
+export { default as WazUiGqlMediaLibrary } from './components/wazui/WazUiGqlMediaLibrary/WazUiGqlMediaLibrary';
+export { default as WazUiCreateBlogContent } from './components/wazui/WazUiCreateBlogContent/WazUiCreateBlogContent';
+export { default as BlogPostsComponent } from './components/wazui/BlogPostsComponent/BlogPostsComponent';
+export { default as CategoriesComponent } from './components/wazui/CategoriesComponent/CategoriesComponent';
+export { default as TagsComponent } from './components/wazui/TagsComponent/TagsComponent';
+export { default as RecipesComponent } from './components/wazui/RecipesComponent/RecipesComponent';
+export { default as RedirectsComponent } from './components/wazui/RedirectsComponent/RedirectsComponent';
+export { default as BlogCategoryContent } from './components/wazui/BlogCategoryContent/BlogCategoryContent';
+export { default as BlogTagContent } from './components/wazui/BlogTagContent/BlogTagContent';
+export { default as BlogPostContentComponent } from './components/wazui/BlogPostContentComponent/BlogPostContentComponent';
+export { default as PurgeCache } from './components/wazui/PurgeCache/PurgeCache';
+export { default as ClearCacheHistory } from './components/wazui/ClearCacheHistory/ClearCacheHistory';
+export { default as RecipeContentComponent } from './components/wazui/RecipeContentComponent/RecipeContentComponent';
+export { default as RecipeTags } from './components/wazui/RecipeTags/RecipeTags';
+export { default as RecipeCategories } from './components/wazui/RecipeCategories/RecipeCategories';
+export { default as WazUIBlogDashboard } from './components/wazui/WazUIBlogDashboard/WazUIBlogDashboard';
+export { default as WazUIPagesComponent } from './components/wazui/WazUiPagesComponent/WazUiPagesComponent';
+export type { 
+  WazUIBlogDashboardProps,
+  DashboardMetric,
+  ChartDataPoint,
+  ArticleData,
+  WriterData 
+} from './components/wazui/WazUIBlogDashboard/types';
+export { useAuthors } from './hooks/useAuthors';
+export * from '@tanstack/react-table';
+export * from 'zod';

package/src/mocks/env.ts

@@ -0,0 +1,12 @@
+// Mock for env.ts to avoid import.meta issues in Jest
+export const env = {
+  VITE_PORTAL_GRAPHQL_ENDPOINT: 'https://test.example.com',
+  VITE_DOLOS_URL: 'https://test.example.com',
+  VITE_DOLOS_TRANSFORMATION_ENDPOINT: 'https://test.example.com',
+  VITE_MUSE_TOKEN: 'test-token',
+  VITE_MUSE_ENDPOINT: 'https://test.example.com',
+  VITE_REVALIDATION_WAZOBIA_TOKEN: 'test-token',
+  VITE_REVALIDATION_DRIPLONDON_TOKEN: 'test-token',
+  VITE_REVALIDATION_TWISTEDFOOD_TOKEN: 'test-token',
+  VITE_REVALIDATION_VT_TOKEN: 'test-token',
+};

package/src/providers/QueryProvider/index.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const queryClient = new QueryClient();
+
+function QueryProvider({ children }: { children: ReactNode }) {
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+}
+
+export default QueryProvider;

package/src/providers/ThemeProvider/index.tsx

@@ -0,0 +1,52 @@
+'use client'
+import ThemeContext from '@/contexts/ThemeContext';
+import { Theme, ThemeProviderProps } from '@/types/theme.types';
+import { useEffect, useState } from 'react';
+
+function ThemeProvider({
+  children,
+  defaultTheme = 'system',
+  storageKey = 'vite-ui-theme',
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(() => {
+    if (typeof window !== 'undefined') {
+      // Access localStorage only in the browser
+      return (window.localStorage.getItem(storageKey) as Theme) || defaultTheme;
+    }
+    return defaultTheme; // Fallback for SSR
+  });
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove('light', 'dark', 'brand');
+
+    if (theme === 'system') {
+      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+
+      root.classList.add(systemTheme);
+      return;
+    }
+
+    root.classList.add(theme);
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      window.localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+    },
+  };
+
+  return (
+    <ThemeContext.Provider {...props} value={value}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export default ThemeProvider;

package/src/types/category.types.ts

@@ -0,0 +1,13 @@
+export type Category = {
+  uuid: string;
+  created_at: string;
+  updated_at: string;
+  description: string;
+  name: string;
+  post_count: number;
+  slug: string;
+  sub_categories: {
+    uuid: string;
+    name: string;
+  }[];
+};

package/src/types/image.types.ts

@@ -0,0 +1,44 @@
+import { Transformation } from '@/components/wazui/WazUiGqlMediaLibrary/types';
+
+export type ImageTransformation = Transformation & {
+  format?:
+    | 'JPEG'
+    | 'PNG'
+    | 'WEBP'
+    | 'AVIF'
+    | 'GIF'
+    | 'SVG'
+    | 'BMP'
+    | 'ICO'
+    | 'HEIC'
+    | 'HEIF'
+    | 'PDF';
+  quality?: number;
+  width?: number;
+  height?: number;
+  blur?: number;
+};
+
+export interface DeviceCoordinates {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+  width: number;
+  height: number;
+}
+
+export interface ParsedConfig {
+  coordinates?: {
+    desktop?: DeviceCoordinates;
+    tablet?: DeviceCoordinates;
+    mobile?: DeviceCoordinates;
+  };
+}
+export interface ImageUrlResult {
+  url: string;
+  srcset: string;
+  desktop: string;
+  tablet: string;
+  mobile: string;
+}