Skip to content

Commit

Permalink
Reformatting and reorganizations. Updated eslint and ts configs
Browse files Browse the repository at this point in the history
  • Loading branch information
@dragoni7
dragoni7 committed Sep 19, 2024
1 parent 9bdb967 commit c82828e
Show file tree
Hide file tree
Showing 21 changed files with 700 additions and 568 deletions.
155 changes: 137 additions & 18 deletions .eslintrc.cjs
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,140 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react/jsx-no-target-blank': 'off',
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
env: {
node: true,
es6: true,
},
}
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
ignorePatterns: ['node_modules/*', 'certs', 'public/mockServiceWorker.js', 'generators/*'],
extends: ['eslint:recommended'],
plugins: ['check-file'],
overrides: [
{
files: ['**/*.ts', '**/*.tsx'],
parser: '@typescript-eslint/parser',
settings: {
react: { version: 'detect' },
'import/resolver': {
typescript: {},
},
},
env: {
browser: true,
node: true,
es6: true,
},
extends: [
'eslint:recommended',
'plugin:import/errors',
'plugin:import/warnings',
'plugin:import/typescript',
'plugin:@typescript-eslint/recommended',
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'plugin:jsx-a11y/recommended',
'plugin:prettier/recommended',
'plugin:testing-library/react',
'plugin:jest-dom/recommended',
'plugin:vitest/legacy-recommended',
],
rules: {
'import/no-restricted-paths': [
'error',
{
zones: [
// disables cross-feature imports:
// eg. src/features/discussions should not import from src/features/comments, etc.
{
target: './src/features/armor-mods',
from: './src/features',
except: ['./armor-mods'],
},
{
target: './src/features/armor-optimization',
from: './src/features',
except: ['./armor-optimization'],
},
{
target: './src/features/auth',
from: './src/features',
except: ['./auth'],
},
{
target: './src/features/membership',
from: './src/features',
except: ['./membership'],
},
{
target: './src/features/subclass',
from: './src/features',
except: ['./subclass'],
},
{
target: './src/features/loadouts',
from: './src/features',
except: ['./loadouts'],
},
// enforce unidirectional codebase:

// e.g. src/app can import from src/features but not the other way around
{
target: './src/features',
from: './src/app',
},

// e.g src/features and src/app can import from these shared modules but not the other way around
{
target: [
'./src/components',
'./src/hooks',
'./src/lib',
'./src/types',
'./src/utils',
'./src/styled',
'./src/stored',
'./src/generated',
],
from: ['./src/features', './src/app'],
},
],
},
],
'import/no-cycle': 'error',
'linebreak-style': ['error', 'unix'],
'react/prop-types': 'off',
'import/order': [
'error',
{
groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object'],
'newlines-between': 'always',
alphabetize: { order: 'asc', caseInsensitive: true },
},
],
'import/default': 'off',
'import/no-named-as-default-member': 'off',
'import/no-named-as-default': 'off',
'react/react-in-jsx-scope': 'off',
'jsx-a11y/anchor-is-valid': 'off',
'@typescript-eslint/no-unused-vars': ['error'],
'@typescript-eslint/explicit-function-return-type': ['off'],
'@typescript-eslint/explicit-module-boundary-types': ['off'],
'@typescript-eslint/no-empty-function': ['off'],
'@typescript-eslint/no-explicit-any': ['off'],
'prettier/prettier': ['error', {}, { usePrettierrc: true }],
'check-file/filename-naming-convention': [
'error',
{
ignoreMiddleExtensions: true,
},
],
},
},
{
plugins: ['check-file'],
files: ['src/**/!(__tests__)/*'],
rules: {
'check-file/folder-naming-convention': ['error'],
},
},
],
};
1 change: 0 additions & 1 deletion public/vite.svg
View file

This file was deleted.

20 changes: 10 additions & 10 deletions src/components/ArmorIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
import { styled } from '@mui/system';
import { styled } from '@mui/material';
import { DestinyArmor } from '../types/d2l-types';

const MasterworkedIconContainer = styled('img')({
interface ArmorIconProps {
armor: DestinyArmor;
size?: number | string;
}

const MasterworkedArmorIconContainer = styled('img')({
border: '2px solid',
borderImage: 'linear-gradient(to right, #FFD700, #FFFACD, #FFD700) 1',
borderRadius: '0',
maxWidth: '91px',
height: 'auto',
});

const DefaultIconContainer = styled('img')({
const DefaultArmorIconContainer = styled('img')({
border: '2px solid white',
borderRadius: '0',
maxWidth: '91px',
height: 'auto',
});

interface ArmorIconProps {
armor: DestinyArmor;
size?: number | string;
}

const ArmorIcon: React.FC<ArmorIconProps> = ({ armor, size = '64%' }) => {
return armor.masterwork ? (
<MasterworkedIconContainer src={armor.icon} alt={armor.name} width={size} />
<MasterworkedArmorIconContainer src={armor.icon} alt={armor.name} width={size} />
) : (
<DefaultIconContainer src={armor.icon} alt={armor.name} width={size} />
<DefaultArmorIconContainer src={armor.icon} alt={armor.name} width={size} />
);
};

Expand Down
142 changes: 28 additions & 114 deletions src/components/HeaderComponent.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,17 @@
import React from 'react';
import { styled } from '@mui/system';
import { Character } from '../types/d2l-types';
import { useDispatch } from 'react-redux';
import { updateSelectedCharacter } from '../store/DashboardReducer';
import {
HeaderOverlayImage,
HeaderDisplayName,
HeaderBottomContainer,
HeaderButtonContainer,
HeaderCharacterText,
HeaderLinksContainer,
HeaderStyledLink,
Header,
} from '../styled';

interface HeaderComponentProps {
emblemUrl: string;
Expand All @@ -13,105 +22,6 @@ interface HeaderComponentProps {
onCharacterClick: (index: number) => void;
}

const Header = styled('div')<{ emblemUrl: string }>(({ emblemUrl }) => ({
position: 'fixed',
top: 0,
left: 0,
width: '100vw',
height: '130px',
backgroundImage: `url(${emblemUrl})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
display: 'flex',
alignItems: 'center',
padding: '0 20px',
boxSizing: 'border-box',
zIndex: 1000,
font: 'Helvetica',
}));

const OverlayImage = styled('img')({
position: 'absolute',
left: '210px',
top: '120px',
transform: 'translateY(-50%)',
width: '100px',
height: '100px',
});

const DisplayName = styled('div')({
marginLeft: '300px',
marginTop: '30px',
fontSize: '32px',
color: 'white',
fontWeight: 'bold',
});

const BottomContainer = styled('div')({
position: 'absolute',
bottom: '0',
left: 0,
right: 0,
display: 'flex',
justifyContent: 'center',
alignItems: 'flex-end',
});

const ButtonContainer = styled('div')({
display: 'flex',
gap: '20px',
});

const sharedTextStyles = {
fontSize: '24px',
cursor: 'pointer',
paddingBottom: '5px',
transition: 'opacity 0.3s, transform 0.3s',
position: 'relative' as const,
'&:hover': {
opacity: 1,
transform: 'translateY(-2px)',
},
};

const CharacterText = styled('div')<{ isSelected: boolean }>(({ isSelected }) => ({
...sharedTextStyles,
color: isSelected ? 'white' : 'rgba(255, 255, 255, 0.6)',
opacity: isSelected ? 1 : 0.6,
textTransform: 'capitalize',
'&::after': {
content: '""',
position: 'absolute',
bottom: 0,
left: 0,
width: '100%',
height: '4px',
backgroundColor: 'white',
transform: isSelected ? 'scaleX(1)' : 'scaleX(0)',
transition: 'transform 0.3s',
},
}));

const LinksContainer = styled('div')({
position: 'absolute',
right: '20px',
bottom: '-2px',
display: 'flex',
gap: '20px',
alignItems: 'flex-end',
});

const StyledLink = styled('a')({
...sharedTextStyles,
color: 'rgba(255, 255, 255, 0.6)',
textDecoration: 'none',
opacity: 0.6,
'&:hover': {
...sharedTextStyles['&:hover'],
color: 'white',
},
});

const HeaderComponent: React.FC<HeaderComponentProps> = ({
emblemUrl,
overlayUrl,
Expand All @@ -129,33 +39,37 @@ const HeaderComponent: React.FC<HeaderComponentProps> = ({

return (
<Header emblemUrl={emblemUrl}>
<OverlayImage src={overlayUrl} alt="Overlay" />
<DisplayName>{displayName}</DisplayName>
<BottomContainer>
<ButtonContainer>
<HeaderOverlayImage src={overlayUrl} alt="Overlay" />
<HeaderDisplayName>{displayName}</HeaderDisplayName>
<HeaderBottomContainer>
<HeaderButtonContainer>
{characters.map((character, index) => (
<CharacterText
<HeaderCharacterText
key={index}
isSelected={selectedCharacter?.id === character.id}
onClick={() => handleCharacterClick(index)}
>
{character.class}
</CharacterText>
</HeaderCharacterText>
))}
</ButtonContainer>
</BottomContainer>
<LinksContainer>
<StyledLink
</HeaderButtonContainer>
</HeaderBottomContainer>
<HeaderLinksContainer>
<HeaderStyledLink
href="https://buymeacoffee.com/d2loadouts"
target="_blank"
rel="noopener noreferrer"
>
Coffee
</StyledLink>
<StyledLink href="https://patreon.com/d2loadouts" target="_blank" rel="noopener noreferrer">
</HeaderStyledLink>
<HeaderStyledLink
href="https://patreon.com/d2loadouts"
target="_blank"
rel="noopener noreferrer"
>
Patreon
</StyledLink>
</LinksContainer>
</HeaderStyledLink>
</HeaderLinksContainer>
</Header>
);
};
Expand Down
Loading

0 comments on commit c82828e

Please sign in to comment.