furystack migrations, added eslint plugin

Author: gallayl

.cursor/rules/CODE_STYLE.mdc

@@ -217,7 +217,7 @@ type MyComponentProps = {
 
 // 3. Component
 export const MyComponent = Shade<MyComponentProps>({
-  shadowDomName: 'my-component',
+  customElementName: 'my-component',
   render: ({ props }) => {
     return <div>{props.title}</div>;
   },

.cursor/rules/TYPESCRIPT_GUIDELINES.mdc

@@ -94,7 +94,7 @@ type MonacoEditorProps = {
 };
 
 export const MonacoEditor = Shade<MonacoEditorProps>({
-  shadowDomName: 'monaco-editor',
+  customElementName: 'monaco-editor',
   render: ({ props }) => {
     return (
       <div data-testid="editor">

eslint.config.js

@@ -2,6 +2,7 @@
 
 import eslint from '@eslint/js'
 import prettierConfig from 'eslint-config-prettier'
+import furystack from '@furystack/eslint-plugin'
 import jsdoc from 'eslint-plugin-jsdoc'
 import playwright from 'eslint-plugin-playwright'
 import tseslint from 'typescript-eslint'
@@ -43,8 +44,11 @@ export default tseslint.config(
     },
     plugins: {
       jsdoc,
+      furystack,
     },
     rules: {
+      ...furystack.configs.recommendedStrict.rules,
+      ...furystack.configs.shadesStrict.rules,
       '@typescript-eslint/no-unused-vars': 'off', // Use Typescript own check for this
       '@typescript-eslint/ban-types': 'off',
       '@typescript-eslint/explicit-member-accessibility': [

frontend/src/components/body.tsx

@@ -4,7 +4,7 @@ import { ValidatePage } from '../pages/validate.js'
 import { Home } from '../pages/home.js'
 
 export const Body = Shade({
-  shadowDomName: 'shade-app-body',
+  customElementName: 'shade-app-body',
   render: () => {
     return (
       <NestedRouter

frontend/src/components/github-logo/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { createComponent, Shade } from '@furystack/shades'
-import { ThemeProviderService } from '@furystack/shades-common-components'
+import { getTextColor, ThemeProviderService } from '@furystack/shades-common-components'
 // @ts-ignore
 import ghLight from './gh-light.png'
 // @ts-ignore
@@ -11,17 +11,17 @@ type GithubLogoProps = Omit<Partial<HTMLImageElement>, 'style' | 'src' | 'alt'>
 }
 
 export const GithubLogo = Shade<GithubLogoProps>({
-  shadowDomName: 'github-logo',
+  customElementName: 'github-logo',
 
   render: ({ props, useDisposable, useState, injector }) => {
     const themeProvider = injector.getInstance(ThemeProviderService)
     const [theme, setTheme] = useState(
       'themeName',
-      themeProvider.getTextColor(themeProvider.theme.background.paper, 'light', 'dark'),
+      getTextColor(themeProvider.theme.background.paper, 'light', 'dark'),
     )
     useDisposable('themeChange', () =>
       themeProvider.subscribe('themeChanged', () => {
-        const value = themeProvider.getTextColor(themeProvider.theme.background.paper, 'light', 'dark')
+        const value = getTextColor(themeProvider.theme.background.paper, 'light', 'dark')
         setTheme(value)
       }),
     )

frontend/src/components/header.tsx

@@ -10,7 +10,7 @@ const AppBarLink = styledShade(ShadeAppBarLink, {
 })
 
 export const Header = Shade({
-  shadowDomName: 'shade-app-header',
+  customElementName: 'shade-app-header',
   render: () => {
     return (
       <AppBar id="header">

frontend/src/components/json-schema-selector.tsx

@@ -8,7 +8,7 @@ type JsonSchemaSelectorProps = {
 }
 
 export const JsonSchemaSelector = Shade<JsonSchemaSelectorProps>({
-  shadowDomName: 'shade-json-schema-selector',
+  customElementName: 'shade-json-schema-selector',
   css: {
     '& .material-symbols-outlined': {
       fontSize: '1.15em',

frontend/src/components/layout.tsx

@@ -4,7 +4,7 @@ import { Body } from './body.js'
 import { Header } from './header.js'
 
 export const Layout = Shade({
-  shadowDomName: 'shade-app-layout',
+  customElementName: 'shade-app-layout',
   render: () => {
     return (
       <PageLayout

frontend/src/components/monaco/monaco-diff-editor.tsx

@@ -17,7 +17,7 @@ export type MonacoDiffEditorProps = {
 }
 
 export const MonacoDiffEditor = Shade<MonacoDiffEditorProps>({
-  shadowDomName: 'monaco-diff-editor',
+  customElementName: 'monaco-diff-editor',
   render: ({ useRef, useDisposable, injector, props, useHostProps }) => {
     const containerRef = useRef<HTMLDivElement>('container')
     const themeProvider = injector.getInstance(ThemeProviderService)

frontend/src/components/monaco/monaco-editor.tsx

@@ -17,7 +17,7 @@ export type MonacoEditorProps = {
 }
 
 export const MonacoEditor = Shade<MonacoEditorProps>({
-  shadowDomName: 'monaco-editor',
+  customElementName: 'monaco-editor',
   render: ({ useRef, useDisposable, injector, props, useHostProps }) => {
     const containerRef = useRef<HTMLDivElement>('container')
     const themeProvider = injector.getInstance(ThemeProviderService)