Skip to content

Commit

Permalink
Setup linting
Browse files Browse the repository at this point in the history 
Signed-off-by: Joe Fusco <[email protected]>
  • Loading branch information
@josephfusco
josephfusco committed Oct 11, 2023
1 parent 04f4a35 commit a774c9a
Show file tree
Hide file tree
Showing 53 changed files with 11,566 additions and 11,425 deletions.
78 changes: 76 additions & 2 deletions .eslintrc.json
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,77 @@
{
"extends": "next/core-web-vitals"
}
"root": true,
"parser": "@babel/eslint-parser",
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"browser": true,
"es6": true,
"node": true,
"jest": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:@next/next/recommended",
"plugin:react/recommended",
"plugin:jest/recommended",
"plugin:prettier/recommended",
"plugin:react-hooks/recommended"
],
"plugins": [
"react",
"jest",
"prettier",
"react-hooks",
"@next/next"
],
"rules": {
"prettier/prettier": "error",
"react/react-in-jsx-scope": "off",
"react/prop-types": "off",
"no-console": "warn",
"no-debugger": "warn",
"no-unused-vars": "warn",
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"@next/next/no-img-element": "error"
},
"settings": {
"react": {
"version": "detect"
},
"requireConfigFile": false
},
"overrides": [
{
"files": ["*.js", "*.jsx"],
"parser": "@babel/eslint-parser",
"parserOptions": {
"requireConfigFile": false,
"babelOptions": {
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
},
"rules": {
// ...your JavaScript-specific rules here
}
},
{
"files": ["*.ts", "*.tsx"],
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
],
"rules": {
// ...your TypeScript-specific rules here
}
}
]
}
76 changes: 45 additions & 31 deletions components/FeatureTabsLeft.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { Container } from '@/components/Container'
import { gql } from '@apollo/client'

const FeatureTabsLeft = (layout) => {
const { features } = layout;
const { features } = layout
let [tabOrientation, setTabOrientation] = useState('horizontal')

useEffect(() => {
Expand All @@ -33,8 +33,14 @@ const FeatureTabsLeft = (layout) => {
>
<Container className="relative">
<div className="max-w-2xl md:mx-auto md:text-center xl:max-w-none">
<h2 className="font-display text-3xl tracking-tight text-gray dark:text-white sm:text-4xl md:text-5xl" dangerouslySetInnerHTML={{__html:layout.name}} />
<p className="mt-6 text-lg tracking-tight text-gray dark:text-white" dangerouslySetInnerHTML={{__html:layout.descripton}} />
<h2
className="font-display text-3xl tracking-tight text-gray dark:text-white sm:text-4xl md:text-5xl"
dangerouslySetInnerHTML={{ __html: layout.name }}
/>
<p
className="mt-6 text-lg tracking-tight text-gray dark:text-white"
dangerouslySetInnerHTML={{ __html: layout.descripton }}
/>
</div>
<Tab.Group
as="div"
Expand All @@ -52,7 +58,7 @@ const FeatureTabsLeft = (layout) => {
'group relative rounded-full px-4 my-2 py-1 lg:rounded-l-xl lg:rounded-r-none lg:p-6',
selectedIndex === featureIndex
? 'bg-slate-600 dark:bg-slate-800 lg:dark:bg-slate-700 lg:ring-1 lg:ring-inset lg:ring-white/10 group-hover:text-white '
: 'hover:bg-slate-600 dark:hover:bg-slate-800 lg:dark:hover:bg-slate-700 bg-gray-100 group-hover:text-white'
: 'hover:bg-slate-600 dark:hover:bg-slate-800 lg:dark:hover:bg-slate-700 bg-gray-100 group-hover:text-white',
)}
>
<h3>
Expand All @@ -61,7 +67,7 @@ const FeatureTabsLeft = (layout) => {
'font-display text-lg [&:not(:focus-visible)]:focus:outline-none',
selectedIndex === featureIndex
? 'text-white dark:text-slate-200 hover:text-white group-hover:text-white dark:hover:text-slate-300 lg:dark:hover:text-slate-200'
: 'text-slate-800 hover:text-white group-hover:text-white dark:hover:text-slate-200'
: 'text-slate-800 hover:text-white group-hover:text-white dark:hover:text-slate-200',
)}
>
<span className="absolute inset-0 rounded-full lg:rounded-l-xl lg:rounded-r-none" />
Expand All @@ -73,7 +79,7 @@ const FeatureTabsLeft = (layout) => {
'mt-2 hidden text-sm lg:block group-hover:text-white dark:group-hover:text-slate-200',
selectedIndex === featureIndex
? 'text-slate-800 lg:text-white dark:text-slate-200'
: 'text-slate-800'
: 'text-slate-800',
)}
>
{feature.featureDescription}
Expand All @@ -92,15 +98,23 @@ const FeatureTabsLeft = (layout) => {
</p>
</div>
<div className="mt-20 w-[45rem] overflow-hidden rounded-xl bg-slate-50 shadow-xl shadow-blue-900/20 sm:w-auto lg:mt-0 lg:w-[67.8125rem]">
{ feature?.featureImage && <Image
className="w-full"
src={feature.featureImage.node.sourceUrl}
alt={feature.featureImage.node.altText}
width={feature?.featureImage?.node?.mediaDetails?.width || '1087'}
height={feature?.featureImage?.node?.mediaDetails?.height || '732'}
priority
sizes="(min-width: 1024px) 67.8125rem, (min-width: 640px) 100vw, 45rem"
/> }
{feature?.featureImage && (
<Image
className="w-full"
src={feature.featureImage.node.sourceUrl}
alt={feature.featureImage.node.altText}
width={
feature?.featureImage?.node?.mediaDetails?.width ||
'1087'
}
height={
feature?.featureImage?.node?.mediaDetails?.height ||
'732'
}
priority
sizes="(min-width: 1024px) 67.8125rem, (min-width: 640px) 100vw, 45rem"
/>
)}
</div>
</Tab.Panel>
))}
Expand All @@ -114,25 +128,25 @@ const FeatureTabsLeft = (layout) => {
}

FeatureTabsLeft.fragment = gql`
fragment FeatureTabsLeft on LayoutFeatureTabs_Fields {
layout
name
description
features {
fragment FeatureTabsLeft on LayoutFeatureTabs_Fields {
layout
name
featureDescription
featureImage {
node {
altText
sourceUrl
mediaDetails {
width
height
description
features {
name
featureDescription
featureImage {
node {
altText
sourceUrl
mediaDetails {
width
height
}
}
}
}
}
}
`;
`

export default FeatureTabsLeft;
export default FeatureTabsLeft
76 changes: 42 additions & 34 deletions components/FeatureTabsTop.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,32 @@ import clsx from 'clsx'
import { Container } from '@/components/Container'
import { gql } from '@apollo/client'


function Feature({ feature, isActive, className, ...props }) {
return (
<div
className={clsx(className, 'p-5 rounded-lg', !isActive ? 'opacity-75 hover:opacity-100 hover:bg-slate-50 dark:hover:bg-gray-800' : 'bg-slate-100 dark:bg-slate-800')}
className={clsx(
className,
'p-5 rounded-lg',
!isActive
? 'opacity-75 hover:opacity-100 hover:bg-slate-50 dark:hover:bg-gray-800'
: 'bg-slate-100 dark:bg-slate-800',
)}
{...props}
>
<h3
className={clsx(
'mt-6 text-sm font-medium',
isActive ? 'text-orange-500' : 'text-gray-500'
isActive ? 'text-orange-500' : 'text-gray-500',
)}
>
{feature.featureSubtitle}
</h3>
<p className="mt-2 font-display text-xl text-left text-slate-900 dark:text-slate-50">
{feature.name}
</p>
<p className="mt-4 text-sm text-slate-600 dark:text-slate-200">{feature.featureDescription}</p>
<p className="mt-4 text-sm text-slate-600 dark:text-slate-200">
{feature.featureDescription}
</p>
</div>
)
}
Expand All @@ -37,16 +44,16 @@ function FeaturesMobile({ features }) {
<div className="relative mt-10 pb-10">
<div className="absolute -inset-x-4 bottom-0 top-8 sm:-inset-x-6" />
<div className="relative mx-auto w-[30.75rem] overflow-hidden rounded-xl bg-white shadow-lg shadow-slate-900/5 ring-1 ring-slate-500/10">

{ feature.featureImage && <Image
{feature.featureImage && (
<Image
className="w-full"
src={feature.featureImage.node.sourceUrl}
alt={feature.featureImage.node.altText}
width={feature.featureImage.node.mediaDetails.width}
height={feature.featureImage.node.mediaDetails.height}
sizes="30.75rem"
/>
}
)}
</div>
</div>
</div>
Expand Down Expand Up @@ -86,21 +93,22 @@ function FeaturesDesktop({ features }) {
key={feature.name}
className={clsx(
'px-5 transition duration-500 ease-in-out [&:not(:focus-visible)]:focus:outline-none',
featureIndex !== selectedIndex && 'opacity-60'
featureIndex !== selectedIndex && 'opacity-60',
)}
style={{ transform: `translateX(-${selectedIndex * 100}%)` }}
aria-hidden={featureIndex !== selectedIndex}
>
<div className="w-[52.75rem] overflow-hidden rounded-xl bg-white shadow-lg shadow-slate-900/5 ring-1 ring-slate-500/10">
{ feature.featureImage && <Image
className="w-full"
src={feature.featureImage.node.sourceUrl}
alt={feature.featureImage.node.altText}
width={feature.featureImage.node.mediaDetails.width}
height={feature.featureImage.node.mediaDetails.height}
sizes="52.75rem"
/>
}
{feature.featureImage && (
<Image
className="w-full"
src={feature.featureImage.node.sourceUrl}
alt={feature.featureImage.node.altText}
width={feature.featureImage.node.mediaDetails.width}
height={feature.featureImage.node.mediaDetails.height}
sizes="52.75rem"
/>
)}
</div>
</Tab.Panel>
))}
Expand Down Expand Up @@ -137,26 +145,26 @@ const FeatureTabsTop = (feature) => {
}

FeatureTabsTop.fragment = gql`
fragment FeatureTabsTop on LayoutFeatureTabs_Fields {
layout
name
description
features {
fragment FeatureTabsTop on LayoutFeatureTabs_Fields {
layout
name
featureSubtitle
featureDescription
featureImage {
node {
altText
sourceUrl
mediaDetails {
width
height
description
features {
name
featureSubtitle
featureDescription
featureImage {
node {
altText
sourceUrl
mediaDetails {
width
height
}
}
}
}
}
}
`;
`

export default FeatureTabsTop;
export default FeatureTabsTop
Loading

0 comments on commit a774c9a

Please sign in to comment.