Skip to content

Commit

Permalink
Merge pull request #514 from w3bdesign/develop
Browse files Browse the repository at this point in the history
Fix Eslint issues
  • Loading branch information
w3bdesign authored Dec 7, 2024
2 parents c0de83a + 1fafe90 commit 42c15e9
Showing 11 changed files with 129 additions and 45 deletions.
43 changes: 42 additions & 1 deletion .eslintrc.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,44 @@
{
"extends": "next/core-web-vitals"
"extends": [
"next/core-web-vitals",
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"plugin:jsx-a11y/recommended"
],
"plugins": [
"@typescript-eslint",
"react",
"jsx-a11y"
],
"rules": {
"react/react-in-jsx-scope": "off",
"react/prop-types": "off",
"@typescript-eslint/explicit-module-boundary-types": "off",
"@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
"@typescript-eslint/no-explicit-any": "error",
"no-console": ["warn", { "allow": ["warn", "error"] }],
"prefer-const": "error",
"jsx-a11y/anchor-is-valid": ["error", {
"components": ["Link"],
"specialLink": ["hrefLeft", "hrefRight"],
"aspects": ["invalidHref", "preferButton"]
}],
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"jsx-a11y/label-has-associated-control": ["error", {
"labelComponents": [],
"labelAttributes": [],
"controlComponents": [],
"assert": "either",
"depth": 25
}]
},
"settings": {
"react": {
"version": "detect"
}
},
"ignorePatterns": ["node_modules/", "build/", ".next/", "coverage/"]
}
5 changes: 5 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -53,11 +53,16 @@
"@types/node": "^22.10.1",
"@types/react": "^18.3.13",
"@types/react-dom": "^18.3.1",
"@typescript-eslint/eslint-plugin": "^8.17.0",
"@typescript-eslint/parser": "^8.17.0",
"axe-core": "^4.10.2",
"cypress": "13.16.1",
"cypress-axe": "^1.5.0",
"eslint": "9.16.0",
"eslint-config-next": "15.0.4",
"eslint-plugin-jsx-a11y": "^6.10.2",
"eslint-plugin-react": "^7.37.2",
"eslint-plugin-react-hooks": "^5.1.0",
"jest-environment-jsdom": "^29.7.0",
"jsdom-testing-mocks": "^1.13.1",
"postcss": "^8.4.49",
23 changes: 19 additions & 4 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 4 additions & 5 deletions src/components/ErrorBoundary/ErrorBoundary.tsx
Original file line number Diff line number Diff line change
@@ -9,11 +9,6 @@ interface ErrorBoundaryProps {
compact?: boolean;
}

// Define the fallback component outside of ErrorBoundary
function ErrorFallback(props: FallbackProps) {
return <Fallback {...props} compact={false} />;
}

/**
* ErrorBoundary component that catches JavaScript errors anywhere in the child component tree.
* It logs the error and displays a fallback UI instead of the component tree that crashed.
@@ -28,6 +23,10 @@ const ErrorBoundary: React.FC<ErrorBoundaryProps> = ({ children, compact = false
console.error("Uventet feil i Matrix:", error, info);
};

const ErrorFallback = (props: FallbackProps) => {
return <Fallback {...props} compact={compact} />;
};

return (
<ReactErrorBoundary
FallbackComponent={ErrorFallback}
2 changes: 1 addition & 1 deletion src/components/Kontakt/KontaktContent.component.tsx
Original file line number Diff line number Diff line change
@@ -33,7 +33,7 @@ const KontaktContent = () => {
emailjs.init(EMAIL_API_KEY);
await emailjs.send(SERVICE_KEY, TEMPLATE_KEY, data);
setServerResponse("Takk for din beskjed");
} catch (error) {
} catch {
setServerResponse("Feil under sending av skjema");
}
};
2 changes: 1 addition & 1 deletion src/components/Layout/MobileMenu.component.tsx
Original file line number Diff line number Diff line change
@@ -118,7 +118,7 @@ const MobileMenu = ({ links }: IMobileMenuProps) => {
}}
>
{links.map(
({ title, name, hash, href, externalLink }, index) => (
({ title, name, href, externalLink }, index) => (
<motion.li
key={title}
className="block p-4 text-xl text-white mx-auto text-center border-t border-b border-gray-600 border-solid shadow"
1 change: 1 addition & 0 deletions src/stories/components/GenericForm.stories.tsx
Original file line number Diff line number Diff line change
@@ -34,6 +34,7 @@ type FormData = z.infer<typeof contactSchema> |
// Example async submit handlers
const mockSubmit = async (data: FormData) => {
await new Promise((resolve) => setTimeout(resolve, 1000));
// eslint-disable-next-line no-console
console.log("Form submitted:", data);
};

11 changes: 10 additions & 1 deletion src/stories/components/InputField.stories.tsx
Original file line number Diff line number Diff line change
@@ -8,13 +8,22 @@ export default {
component: InputField,
} as Meta;

// Define a type for the form values
interface StoryFormValues extends FieldValues {
defaultInput?: string;
requiredInput?: string;
emailInput?: string;
textArea?: string;
errorInput?: string;
}

// Wrapper component to provide form context
const InputFieldWrapper = <T extends FieldValues>(props: Omit<InputProps<T>, "register">) => {
const { register } = useForm<T>();
return <InputField {...props} register={register} />;
};

const Template: Story<Omit<InputProps<any>, "register">> = (args) => (
const Template: Story<Omit<InputProps<StoryFormValues>, "register">> = (args) => (
<InputFieldWrapper {...args} />
);

13 changes: 11 additions & 2 deletions src/stories/components/Matrix.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,22 @@
import React, { useEffect, useState } from "react";
import { Meta } from "@ladle/react";

interface ReactMatrixAnimationProps {
tileSize?: number;
fadeFactor?: number;
backgroundColor?: string;
fontColor?: string;
glowColor?: string;
tileSet?: string[] | null;
}

export default {
title: "Animations/Matrix",
} as Meta;

// Client-side only wrapper component
const ClientOnlyMatrix = (props: any) => {
const [Matrix, setMatrix] = useState<any>(null);
const ClientOnlyMatrix = (props: ReactMatrixAnimationProps) => {
const [Matrix, setMatrix] = useState<React.ComponentType<ReactMatrixAnimationProps> | null>(null);

useEffect(() => {
import("../../components/Animations/Matrix.component").then((mod) => {
10 changes: 3 additions & 7 deletions src/stories/components/MatrixCursor.stories.tsx
Original file line number Diff line number Diff line change
@@ -58,13 +58,9 @@ export const WithInteractiveElements = () => (
<button className="bg-blue-600 text-white px-6 py-3 rounded hover:bg-blue-700 transition-colors">
Hover Me
</button>
<a
href="#"
className="bg-green-600 text-white px-6 py-3 rounded hover:bg-green-700 transition-colors text-center"
onClick={(e) => e.preventDefault()}
>
Link Example
</a>
<button className="bg-green-600 text-white px-6 py-3 rounded hover:bg-green-700 transition-colors text-center">
Button Example
</button>
</div>
<div className="bg-gray-800 p-6 rounded">
<p>
55 changes: 32 additions & 23 deletions src/stories/components/Tabs.stories.tsx
Original file line number Diff line number Diff line change
@@ -33,29 +33,38 @@ const ListContent = () => (
</div>
);

const FormContent = () => (
<div className="py-4">
<h2 className="text-xl text-white mb-4">Form Content</h2>
<form className="space-y-4">
<div>
<label className="block text-gray-300 mb-2">Name</label>
<input
type="text"
className="w-full p-2 rounded bg-gray-700 text-white"
placeholder="Enter your name"
/>
</div>
<div>
<label className="block text-gray-300 mb-2">Email</label>
<input
type="email"
className="w-full p-2 rounded bg-gray-700 text-white"
placeholder="Enter your email"
/>
</div>
</form>
</div>
);
const FormContent = () => {
const formId = React.useId();
return (
<div className="py-4">
<h2 className="text-xl text-white mb-4">Form Content</h2>
<form className="space-y-4">
<div>
<label htmlFor={`${formId}-name`} className="block text-gray-300 mb-2">
Name
</label>
<input
id={`${formId}-name`}
type="text"
className="w-full p-2 rounded bg-gray-700 text-white"
placeholder="Enter your name"
/>
</div>
<div>
<label htmlFor={`${formId}-email`} className="block text-gray-300 mb-2">
Email
</label>
<input
id={`${formId}-email`}
type="email"
className="w-full p-2 rounded bg-gray-700 text-white"
placeholder="Enter your email"
/>
</div>
</form>
</div>
);
};

export const VerticalTabs = Template.bind({});
VerticalTabs.args = {

0 comments on commit 42c15e9

Please sign in to comment.