@wazobiatech/wazui 0.0.12 → 0.0.14

package/src/index.css

@@ -1,397 +0,0 @@
-@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/mocks/env.ts

@@ -1,12 +0,0 @@
-// 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

@@ -1,10 +0,0 @@
-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

@@ -1,52 +0,0 @@
-'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

@@ -1,13 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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;
-}

package/src/types/post.types.ts

@@ -1,121 +0,0 @@
-export interface Category {
-  id?: string;
-  name: string;
-  description?: string | null;
-  created_at?: string;
-  updated_at?: string;
-  uuid: string;
-  slug?: string;
-  subCategories?: Category[];
-  parent?: Category;
-}
-export interface Tag {
-  id?: string;
-  name: string;
-  description?: string | null;
-  created_at?: string;
-  updated_at?: string;
-  uuid: string;
-  slug?: string;
-  subCategories?: Category[];
-  parent?: Category;
-}
-
-interface ImageCoordinates {
-  left: number | null;
-  top: number | null;
-  right: number | null;
-  bottom: number | null;
-}
-
-interface ScreenCoordinates {
-  desktop: ImageCoordinates;
-  tablet: ImageCoordinates;
-  mobile: ImageCoordinates;
-}
-
-interface FeaturedImage {
-  __typename: string;
-  title: string;
-  uuid: string;
-  url: string;
-  caption: string;
-  alternative_text: string;
-  metadata: string;
-  created_at: string;
-  updated_at: string;
-  src: string;
-  coordinates: ScreenCoordinates;
-  screenType: string;
-  width: number;
-  height: number;
-  original: string;
-}
-
-interface PostConfig {
-  has_related_posts: boolean | null;
-  is_comments_enabled: boolean;
-  is_feature_article: boolean;
-  is_in_sitemap: boolean;
-  permalink: string;
-  related_posts_config: string;
-  schema: string;
-  social_preview_config: {
-    open_graph: object;
-    twitter_cards: object;
-    seo_cards: {
-      'seo:image': FeaturedImage;
-    };
-  };
-}
-
-export type Post = {
-  id?: string;
-  uuid: string;
-  category_name?: string;
-  created_at?: string;
-  updated_at?: string;
-  excerpt: string;
-  author_uuid: string;
-  featured_image: string;
-  content: string;
-  categories: Category[];
-  tags: Tag[];
-  language_attr: string;
-  slug: string;
-  title: string;
-  metadata: string;
-  postConfig?: PostConfig;
-  status: number;
-  statistics: {
-    isLoading: boolean; shares: number; totalPageViews: number 
-};
-  author?: { uuid: string; name: string };
-};
-
-// Article metadata type definitions
-export interface OpenGraphData {
-  'og:title'?: string;
-  'og:image'?: string;
-  'og:description'?: string;
-}
-
-export interface TwitterCardsData {
-  'twitter:title'?: string;
-  'twitter:description'?: string;
-  'twitter:image'?: string;
-}
-export interface SEOCardsData {
-  'seo:title'?: string;
-  'seo:description'?: string;
-  'seo:image'?: string;
-  'seo:url'?: string;
-}
-
-export interface ArticleMetadata {
-  title?: string;
-  description?: string;
-  open_graph?: OpenGraphData;
-  seo_cards?: SEOCardsData;
-  twitter_cards?: TwitterCardsData;
-}

package/src/types/theme.types.ts

@@ -1,10 +0,0 @@
-export type Theme = 'dark' | 'light' | 'system' | 'brand';
-export type ThemeProviderProps = {
-  children: React.ReactNode;
-  defaultTheme?: Theme;
-  storageKey?: string;
-};
-export type ThemeProviderState = {
-  theme: Theme;
-  setTheme: (theme: Theme) => void;
-};

package/src/types/users.types.ts

@@ -1,5 +0,0 @@
-export type UserConfig = {
-  uuid: string;
-  name: string;
-  email: string;
-};