Tidy up components and tsconfig

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+    "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
+}

src/coding/index.ts

@@ -1,2 +1,2 @@
-export * from './golay-decoder.ts';
-export * from './golay-encoder.ts';
+export * from './golay-decoder';
+export * from './golay-encoder';

src/components/channel/channel.tsx

@@ -4,8 +4,8 @@ import './channel.scss';
 
 export const Channel = (): React.JSX.Element => {
     return (
-        <div className="coding-theory-channel-img" aria-description="Channel">
-            <img src={channelUrl} alt="Channel" title="Channel" />
+        <div role="img" className="coding-theory-channel-img" aria-label="Binary data streaming channel illustration">
+            <img src={channelUrl} title="Channel" />
         </div>
     );
 };

src/components/header/header.scss

@@ -3,3 +3,7 @@
     align-items: center;
     justify-content: space-between;
 }
+
+.coding-theory-author {
+    font-style: normal;
+}

src/components/header/header.tsx

@@ -13,22 +13,20 @@ export const Header: React.FC<HeaderProps> = props => {
     const { activeViewMode, setActiveViewMode, tabs } = props;
 
     return (
-        <>
-            <header className="coding-theory-header">
-                <nav className="coding-theory-tabs">
-                    {tabs.map(x => (
-                        <Tab
-                            key={x.name}
-                            onSelect={() => setActiveViewMode(x.name)}
-                            title={x.title}
-                            isActive={activeViewMode == x.name}
-                        />
-                    ))}
-                </nav>
-                <address rel="author" className="coding-theory-author">
-                    Šarūnas Griškus | Coding theory 2023/24 | A13
-                </address>
-            </header>
-        </>
+        <header className="coding-theory-header">
+            <nav>
+                {tabs.map(x => (
+                    <Tab
+                        key={x.name}
+                        onSelect={() => setActiveViewMode(x.name)}
+                        title={x.title}
+                        isActive={activeViewMode === x.name}
+                    />
+                ))}
+            </nav>
+            <address rel="author" className="coding-theory-author">
+                Šarūnas Griškus | Coding theory | Golay C23
+            </address>
+        </header>
     );
 };

src/components/labeled-controls/index.ts

@@ -1,5 +1,5 @@
-export * from './label.tsx';
-export * from './labeled-file-upload.tsx';
-export * from './labeled-image.tsx';
-export * from './labeled-input.tsx';
-export * from './labeled-text-area.tsx';
+export * from './label';
+export * from './labeled-file-upload';
+export * from './labeled-image';
+export * from './labeled-input';
+export * from './labeled-text-area';

src/components/labeled-controls/labeled-file-upload.tsx

@@ -9,14 +9,14 @@ export type LabeledFileUploadProps = {
     errorMessage?: string;
 } & Omit<
     React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
-    'onChange' | 'id' | 'value' | 'type'
+    'onChange' | 'id' | 'value' | 'type' | 'className'
 >;
 
 export const LabeledFileUpload: React.FC<LabeledFileUploadProps> = props => {
     const { id, title, setValue, errorMessage, ...rest } = props;
 
     return (
-        <div className={`coding-theory-labeled-file-upload ${props.className ?? ''}`} aria-description={id}>
+        <div className="coding-theory-labeled-file-upload" aria-description={`File upload container for ${id}`}>
             <Label id={id} title={title} errorMessage={errorMessage} />
             <input
                 {...rest}

src/components/labeled-controls/labeled-image.tsx

@@ -12,7 +12,7 @@ export const LabeledImage: React.FC<LabeledImageProps> = props => {
     const { id, title, source } = props;
 
     return (
-        <div className="coding-theory-labeled-image">
+        <div className="coding-theory-labeled-image" role="img" aria-label={title}>
             <Label id={id} title={title} />
             {source && <img id={id} src={source} />}
         </div>

src/components/labeled-controls/labeled-input.tsx

@@ -10,14 +10,14 @@ export type LabeledInputProps = {
     errorMessage?: string;
 } & Omit<
     React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
-    'onChange' | 'id' | 'value'
+    'onChange' | 'id' | 'value' | 'className'
 >;
 
 export const LabeledInput: React.FC<LabeledInputProps> = props => {
     const { id, title, value, setValue, errorMessage, ...rest } = props;
 
     return (
-        <div className={`coding-theory-labeled-input ${props.className ?? ''}`} aria-description={id}>
+        <div className="coding-theory-labeled-input" aria-description={`Input field for ${id}`}>
             <Label id={id} title={title} errorMessage={errorMessage} />
             <input
                 {...rest}

src/components/labeled-controls/labeled-text-area.tsx

@@ -9,14 +9,14 @@ export type LabeledTextAreaProps = {
     setValue?: (value: string) => void;
 } & Omit<
     React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>,
-    'onChange' | 'id' | 'value'
+    'onChange' | 'id' | 'value' | 'className'
 >;
 
 export const LabeledTextArea: React.FC<LabeledTextAreaProps> = props => {
     const { id, title, value, setValue, ...rest } = props;
 
     return (
-        <div className={`coding-theory-labeled-text-area ${props.className ?? ''}`} aria-description={id}>
+        <div className="coding-theory-labeled-text-area" aria-description={`Text area field for ${id}`}>
             <Label id={id} title={title} />
             <textarea
                 {...rest}

src/components/modules/index.ts

@@ -1,4 +1,4 @@
-export * from './binary-coding-module.tsx';
-export * from './image-coding-module.tsx';
-export * from './parameters-module.tsx';
-export * from './text-coding-module.tsx';
+export * from './binary-coding-module';
+export * from './image-coding-module';
+export * from './parameters-module';
+export * from './text-coding-module';

src/data-types/index.ts

@@ -1,3 +1,3 @@
-export * from './image-file-data.ts';
-export * from './tab-identifier.ts';
-export * from './view-mode.ts';
+export * from './image-file-data';
+export * from './tab-identifier';
+export * from './view-mode';

src/main.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { App } from './App.tsx';
+import { App } from './App';
 import './main.scss';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(

src/state/index.ts

@@ -1 +1 @@
-export * from './settings-store.ts';
+export * from './settings-store';

src/utils/index.ts

@@ -1,5 +1,5 @@
-export * from './binary-utils.ts';
-export * from './channel-utils.ts';
-export * from './image-utils.ts';
-export * from './string-utils.ts';
-export * from './vector-utils.ts';
+export * from './binary-utils';
+export * from './channel-utils';
+export * from './image-utils';
+export * from './string-utils';
+export * from './vector-utils';

tsconfig.json

@@ -2,11 +2,13 @@
     "compilerOptions": {
         "target": "ESNext",
         "useDefineForClassFields": true,
-        "lib": ["ES2020", "DOM", "DOM.Iterable"],
+        "lib": ["ESNext", "DOM", "DOM.Iterable"],
         "module": "ESNext",
+        "allowJs": false,
         "skipLibCheck": true,
-        "moduleResolution": "bundler",
-        "allowImportingTsExtensions": true,
+        "moduleResolution": "Node",
+        "esModuleInterop": false,
+        "forceConsistentCasingInFileNames": true,
         "isolatedModules": true,
         "noEmit": true,
         "jsx": "react-jsx",

tsconfig.node.json

@@ -3,7 +3,7 @@
         "composite": true,
         "skipLibCheck": true,
         "module": "ESNext",
-        "moduleResolution": "bundler",
+        "moduleResolution": "node",
         "allowSyntheticDefaultImports": true
     },
     "include": ["vite.config.ts"]