fix: handling various linter warnings

.changeset/evil-results-nail.md

@@ -0,0 +1,40 @@
+---
+'@o2s/blocks.featured-service-list': patch
+'@o2s/blocks.feature-section-grid': patch
+'@o2s/blocks.notification-details': patch
+'@o2s/blocks.notification-summary': patch
+'@o2s/blocks.notification-list': patch
+'@o2s/blocks.payments-history': patch
+'@o2s/blocks.payments-summary': patch
+'@o2s/blocks.feature-section': patch
+'@o2s/blocks.pricing-section': patch
+'@o2s/blocks.service-details': patch
+'@o2s/blocks.article-search': patch
+'@o2s/blocks.orders-summary': patch
+'@o2s/blocks.ticket-details': patch
+'@o2s/blocks.ticket-summary': patch
+'@o2s/blocks.category-list': patch
+'@o2s/blocks.document-list': patch
+'@o2s/blocks.media-section': patch
+'@o2s/blocks.order-details': patch
+'@o2s/blocks.surveyjs-form': patch
+'@o2s/blocks.ticket-recent': patch
+'@o2s/configs.integrations': patch
+'@o2s/blocks.article-list': patch
+'@o2s/blocks.hero-section': patch
+'@o2s/blocks.invoice-list': patch
+'@o2s/blocks.product-list': patch
+'@o2s/blocks.service-list': patch
+'@o2s/blocks.user-account': patch
+'@o2s/blocks.cta-section': patch
+'@o2s/blocks.quick-links': patch
+'@o2s/blocks.ticket-list': patch
+'@o2s/blocks.bento-grid': patch
+'@o2s/blocks.order-list': patch
+'@o2s/modules.surveyjs': patch
+'@o2s/blocks.category': patch
+'@o2s/blocks.article': patch
+'@o2s/blocks.faq': patch
+---
+
+reworked data fetching a little to overcome ESlint warnings

apps/docs/eslint.config.mjs

@@ -0,0 +1,25 @@
+import { config } from '@o2s/eslint-config/frontend';
+
+/** @type {import("eslint").Linter.Config} */
+export default [
+    ...config,
+    {
+        rules: {
+            // Disable Next.js image rule since Docusaurus doesn't use next/image
+            '@next/next/no-img-element': 'off',
+            // Allow unescaped entities (apostrophes) in documentation text
+            'react/no-unescaped-entities': 'off',
+            // Allow require() imports (Docusaurus may need them)
+            '@typescript-eslint/no-require-imports': 'off',
+            // Allow unused vars if they start with underscore
+            '@typescript-eslint/no-unused-vars': [
+                'warn',
+                {
+                    argsIgnorePattern: '^_',
+                    varsIgnorePattern: '^_',
+                    caughtErrorsIgnorePattern: '^_',
+                },
+            ],
+        },
+    },
+];

apps/docs/package.json

@@ -13,7 +13,7 @@
         "write-translations": "docusaurus write-translations",
         "write-heading-ids": "docusaurus write-heading-ids",
         "typecheck": "tsc",
-        "lint": "tsc --noEmit",
+        "lint": "tsc --noEmit && eslint \"src/**/*.{ts,tsx}\" --fix --max-warnings=0",
         "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,scss,json}\""
     },
     "dependencies": {

apps/docs/src/components/BenefitsSection/index.tsx

@@ -29,7 +29,6 @@ export interface BenefitCardProps {
 export const BenefitCard: React.FC<BenefitCardProps> = ({
     team,
     icon,
-    iconPosition = 'right',
     title,
     description,
     link,

apps/docs/src/components/CookieConsent/index.tsx

@@ -4,7 +4,7 @@ import 'vanilla-cookieconsent/dist/cookieconsent.css';
 
 import pluginConfig from '@site/src/components/CookieConsent/config';
 
-import styles from '../../css/cookie-consent.css';
+// import styles from '../../css/cookie-consent.css';
 
 const CookieConsentComponent = () => {
     useEffect(() => {

apps/docs/src/components/DXPComplexPlatformsSection/index.tsx

@@ -28,7 +28,7 @@ export function DXPComplexPlatformsSection() {
                     <p className="leading-6">
                         <span>While this architecture is more complex than a direct CMS integration, </span>
                         <span className="font-bold">
-                            it's future-proof and scalable — perfect when you know your project will grow.
+                            it&apos;s future-proof and scalable — perfect when you know your project will grow.
                         </span>
                     </p>
                 </Body>

apps/docs/src/components/DXPFeaturesSection/index.tsx

@@ -59,8 +59,8 @@ const FeatureCard: React.FC<FeatureCardProps> = ({
     title,
     icon,
     features,
-    buttonText,
-    buttonUrl,
+    // buttonText,
+    // buttonUrl,
     borderColor = 'blue',
 }) => {
     return (

apps/docs/src/components/GetStartedButtons/index.tsx

@@ -1,22 +1,26 @@
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import React from 'react';
 
 import GithubActiveIcon from '@site/src/assets/icons/github-active.svg';
 import GithubIcon from '@site/src/assets/icons/github.svg';
-import { Body } from '@site/src/components/Typography';
 
 const GetStartedButtons = () => {
     return (
         <div>
             <div className="sm:flex gap-6">
-                <a className={clsx('button button mb-4')} href="https://demo.openselfservice.com" target="_blank">
+                <a
+                    className={clsx('button button mb-4')}
+                    href="https://demo.openselfservice.com"
+                    target="_blank"
+                    rel="noreferrer"
+                >
                     See our demo app
                 </a>
                 <a
                     href="https://github.com/o2sdev/openselfservice"
                     className={clsx('button button-ultra')}
                     target="_blank"
-                    rel="noopener"
+                    rel="noopener noreferrer"
                 >
                     <span className="label flex items-center justify-center gap-2">
                         <span className="relative h-5 w-5 mr-2 flex-shrink-0">

apps/docs/src/components/HomepageArchitectureSection/index.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
 
 import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
 import { Body, H2 } from '../Typography';
 
 export function HomepageArchitectureSection() {
-    const { siteConfig } = useDocusaurusContext();
     return (
         <section className="px-4 flex flex-col items-center">
             <div className="grid md:grid-cols-2 gap-14 md:gap-14">

apps/docs/src/components/HomepageFeatures/index.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx';
 import type { ReactNode } from 'react';
 
+import DocusaurusMountain from '@site/static/img/undraw_docusaurus_mountain.svg';
+import DocusaurusReact from '@site/static/img/undraw_docusaurus_react.svg';
+import DocusaurusTree from '@site/static/img/undraw_docusaurus_tree.svg';
+
 import Heading from '@theme/Heading';
 
 import styles from './styles.module.css';
@@ -14,7 +18,7 @@ type FeatureItem = {
 const FeatureList: FeatureItem[] = [
     {
         title: 'Easy to Use',
-        Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
+        Svg: DocusaurusMountain,
         description: (
             <>
                 Docusaurus was designed from the ground up to be easily installed and used to get your website up and
@@ -24,7 +28,7 @@ const FeatureList: FeatureItem[] = [
     },
     {
         title: 'Focus on What Matters',
-        Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
+        Svg: DocusaurusTree,
         description: (
             <>
                 Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go ahead and move your docs into
@@ -34,7 +38,7 @@ const FeatureList: FeatureItem[] = [
     },
     {
         title: 'Powered by React',
-        Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
+        Svg: DocusaurusReact,
         description: (
             <>
                 Extend or customize your website layout by reusing React. Docusaurus can be extended while reusing the

apps/docs/src/components/HomepageFeaturesSection/index.tsx

@@ -2,14 +2,9 @@ import React from 'react';
 
 import Link from '@docusaurus/Link';
 
-import BlocksIcon from '@site/src/assets/icons/Blocks.svg';
-import UserIcon from '@site/src/assets/icons/CircleUser.svg';
-import FileSearchIcon from '@site/src/assets/icons/FileSearch.svg';
-import TicketIcon from '@site/src/assets/icons/TicketX.svg';
-import WalletIcon from '@site/src/assets/icons/Wallet.svg';
 import CircleCheckIcon from '@site/src/assets/icons/circle-check.svg';
 
-import { Body, H2, H3, H4 } from '../Typography';
+import { Body, H2, H3 } from '../Typography';
 
 interface FeatureItemProps {
     text: string;
@@ -24,18 +19,6 @@ const FeatureItem: React.FC<FeatureItemProps> = ({ text, icon, textClassName = '
     </div>
 );
 
-interface BuildingBlockCardProps {
-    title: string;
-    icon: React.ReactNode;
-}
-
-const BuildingBlockCard: React.FC<BuildingBlockCardProps> = ({ title, icon }) => (
-    <div className="flex flex-col gap-2 items-start">
-        <div className="flex items-center mb-2 [&_svg_path]:stroke-(--color-highlighted)">{icon}</div>
-        <H4 className="mb-0! leading-7!">{title}</H4>
-    </div>
-);
-
 export function HomepageFeaturesSection() {
     const developersFeatures = [
         'Performance-first, modern stack',
@@ -53,29 +36,6 @@ export function HomepageFeaturesSection() {
         'UX optimized for efficient customer self-service',
     ];
 
-    const buildingBlocks = [
-        {
-            title: 'User authentication & profile management',
-            icon: <UserIcon className="h-5 w-5" />,
-        },
-        {
-            title: 'Ticketing and customer support workflows',
-            icon: <TicketIcon className="h-5 w-5" />,
-        },
-        {
-            title: 'Payments, invoices, orders',
-            icon: <WalletIcon className="h-5 w-5" />,
-        },
-        {
-            title: 'Knowledge base and content search',
-            icon: <FileSearchIcon className="h-5 w-5" />,
-        },
-        {
-            title: 'CMS-powered landing pages and sections',
-            icon: <BlocksIcon className="h-5 w-5" />,
-        },
-    ];
-
     return (
         <section className="px-4 flex flex-col items-center gap-y-20">
             <H2 className="mb-0! text-center">

apps/docs/src/components/HomepageJoinTheWaitlistSection/index.tsx

@@ -32,7 +32,7 @@ export default function HomepageJoinTheWaitlistSection(): ReactNode {
                 <div className="flex flex-col md:flex-row justify-between items-center gap-4 text-sm pt-16 md:pt-40">
                     <div className="text-left flex items-center gap-2">
                         Made by{' '}
-                        <a href="https://hycom.digital" target="_blank" aria-label="Hycom">
+                        <a href="https://hycom.digital" target="_blank" aria-label="Hycom" rel="noreferrer">
                             <img src="/img/logos/hycom.svg" alt="hycom logo" />
                         </a>
                     </div>
@@ -42,6 +42,7 @@ export default function HomepageJoinTheWaitlistSection(): ReactNode {
                             className="text-white! underline"
                             href="https://hycom.digital/privacy-policy"
                             target="_blank"
+                            rel="noreferrer"
                         >
                             Privacy Policy
                         </a>{' '}

apps/docs/src/components/HubspotForm/index.tsx

@@ -222,7 +222,7 @@ const HubspotForm: React.FC<HubspotFormProps> = ({
                 url.searchParams.append('success', 'false');
                 window.history.replaceState(null, null, url);
             }
-        } catch (error) {
+        } catch (_error) {
             setStatus({ type: 'error', message: 'An unexpected error occurred. Please try again later.' });
             setIsSubmitting(false);
 

apps/docs/src/components/SubscribeSection/index.tsx

@@ -97,7 +97,7 @@ export const SubscribeSection: React.FC<SubscribeSectionProps> = ({ portalId, fo
                 url.searchParams.append('success', 'false');
                 window.history.replaceState(null, null, url);
             }
-        } catch (error) {
+        } catch (_error) {
             setStatus({
                 type: 'error',
                 message: 'An unexpected error occurred. Please try again later.',

apps/docs/src/components/WaitlistForm/index.tsx

@@ -70,7 +70,7 @@ const WaitlistForm = ({ inputId }) => {
                 });
                 setIsSubmitting(false);
             }
-        } catch (error) {
+        } catch (_error) {
             setStatus({
                 type: 'error',
                 message: 'An unexpected error occurred. Please try again.',

apps/docs/src/pages/contact/index.tsx

@@ -43,7 +43,10 @@ const Contact = () => {
                                         formId={formId}
                                         title="Contact us"
                                         description={
-                                            <>Fill out the form below and we'll get back to you as soon as possible.</>
+                                            <>
+                                                Fill out the form below and we&apos;ll get back to you as soon as
+                                                possible.
+                                            </>
                                         }
                                         pageName="Contact - Open Self Service"
                                         fields={[

apps/docs/src/pages/dxp/index.tsx

@@ -1,7 +1,5 @@
 import React, { ReactNode } from 'react';
 
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-
 import GithubIcon from '@site/src/assets/icons/github.svg';
 import { BenefitCardProps, BenefitsSection } from '@site/src/components/BenefitsSection';
 import { DXPArchitectureSection } from '@site/src/components/DXPArchitectureSection';
@@ -42,8 +40,6 @@ const benefits: Array<BenefitCardProps> = [
 ];
 
 export default function DXPStarter(): ReactNode {
-    const { siteConfig } = useDocusaurusContext();
-
     return (
         <div className="dxp-page">
             <Layout title="DXP Frontend Starter - Open Self Service">

apps/docs/src/pages/index.tsx

@@ -12,14 +12,11 @@ import OrangeEnergia from '@site/src/assets/logos/OrangeEnergia.svg';
 import Osadkowski from '@site/src/assets/logos/Osadkowski.svg';
 import { ClientsSection } from '@site/src/components/ClientsSection';
 import { HeroBannerSection } from '@site/src/components/HeroBannerSection';
-import { HomepageAboutSection } from '@site/src/components/HomepageAboutSection';
 import { HomepageArchitectureSection } from '@site/src/components/HomepageArchitectureSection';
-import { HomepageBenefitsSection } from '@site/src/components/HomepageBenefitsSection';
 import { HomepageFeaturesSection } from '@site/src/components/HomepageFeaturesSection';
 import { HomepageStartersSection } from '@site/src/components/HomepageStartersSection';
-import { HomepageUseCases } from '@site/src/components/HomepageUseCases';
 import { SubscribeSection } from '@site/src/components/SubscribeSection';
-import { Body, BodyBold } from '@site/src/components/Typography';
+import { Body } from '@site/src/components/Typography';
 
 import Layout from '@theme/Layout';
 

apps/docs/src/pages/product/features.tsx

@@ -286,8 +286,8 @@ export default function ProductFeatures() {
                                 }
                                 description={
                                     <Body>
-                                        Here's a breakdown of what the framework enables — both for business outcomes
-                                        and developer experience.
+                                        Here&apos;s a breakdown of what the framework enables — both for business
+                                        outcomes and developer experience.
                                     </Body>
                                 }
                             />

apps/docs/src/pages/product/integrations.tsx

@@ -268,8 +268,8 @@ export default function ProductIntegrations() {
                                     <>
                                         <Body>
                                             Open Self Service is composable by design. We believe in backend-agnostic
-                                            architecture. That's why every integration is decoupled and modular — so you
-                                            can swap or extend data sources without rebuilding your frontend.
+                                            architecture. That&apos;s why every integration is decoupled and modular —
+                                            so you can swap or extend data sources without rebuilding your frontend.
                                         </Body>
                                         <BodyBold className="mb-0!">
                                             Below is a list of available and upcoming integrations.