chore: update examples

Author: Codennnn

.eslintignore

@@ -3,4 +3,4 @@ lib
 !.prettierrc.js
 !.eslintrc.js
 !.stylelintrc.js
-/examples
+# /examples

examples/green-wall/.eslintrc.js

@@ -1,22 +1,9 @@
 module.exports = {
   root: true,
-  extends: [require.resolve('../../lib/eslint')],
-  rules: {
-    'react/react-in-jsx-scope': 0,
-    'jsx-a11y/no-static-element-interactions': 0,
-    'jsx-a11y/click-events-have-key-events': 0,
-    '@typescript-eslint/no-explicit-any': 0,
-  },
-  parserOptions: {
-    tsconfigRootDir: __dirname,
-    project: ['./tsconfig.json'],
-  },
+  extends: [require.resolve('prefer-code-style/lib/eslint')],
   ignorePatterns: [
     'public',
-    'es',
-    'dist*',
     'yarn*',
-    '.cache',
     '.next',
     '!.eslintrc.js',
     '!.prettierrc.js',

examples/green-wall/.prettierrc.js

@@ -1,4 +1,4 @@
-const prettier = require('../../lib/prettier')
+const { prettier } = require('prefer-code-style')
 
 module.exports = {
   ...prettier,

examples/green-wall/.stylelintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  extends: [require.resolve('../../lib/stylelint')],
+  extends: [require.resolve('prefer-code-style/lib/stylelint')],
   rules: {
     'color-function-notation': 'modern',
     'selector-id-pattern': null,

examples/green-wall/package.json

@@ -37,6 +37,7 @@
     "@types/react": "18.0.20",
     "autoprefixer": "^10.4.11",
     "postcss": "^8.4.16",
+    "prefer-code-style": "0.6.9",
     "tailwindcss": "^3.1.8",
     "typescript": "^4.8.3"
   }

examples/green-wall/src/components/AppearanceSetting/AppearanceSetting.tsx

@@ -1,6 +1,8 @@
+import { useId } from 'react'
+
 import splitbee from '@splitbee/web'
 
-import { type GraphData, DisplayName, GraphSize } from '../../types'
+import { DisplayName, type GraphData, GraphSize } from '../../types'
 import type useSetting from '../../useSetting'
 import ThemeSelector from '../ThemeSelector'
 import { RadixSelect } from '../ui-kit/RadixSelect'
@@ -10,7 +12,7 @@ import { RadixToggleGroup } from '../ui-kit/RadixToggleGroup'
 type State = ReturnType<typeof useSetting>[0]
 type Dispatch = ReturnType<typeof useSetting>[1]
 
-export interface AppearanceSettingProps {
+interface AppearanceSettingProps {
   value?: State
   onChange?: Dispatch
   graphData: GraphData | undefined
@@ -21,6 +23,8 @@ export default function AppearanceSetting({
   onChange: dispatch,
   graphData,
 }: AppearanceSettingProps) {
+  const attribution = useId()
+
   return (
     <div className="appearance-setting min-w-[min(40vw,220px)] max-w-[min(90vw,280px)] text-main-400">
       <fieldset>
@@ -49,11 +53,11 @@ export default function AppearanceSetting({
       </fieldset>
 
       <fieldset>
-        <label htmlFor="attribution">Attribution</label>
+        <label htmlFor={attribution}>Attribution</label>
         <RadixSwitch
           checked={settings?.showAttribution}
           defaultChecked={true}
-          id="attribution"
+          id={attribution}
           onCheckedChange={(checked) => dispatch?.({ type: 'showAttribution', payload: checked })}
         />
       </fieldset>

examples/green-wall/src/components/AppearanceSetting/DraggableAppearanceSetting.tsx

@@ -1,6 +1,7 @@
-import { motion, useDragControls } from 'framer-motion'
 import { useEffect, useRef, useState } from 'react'
 
+import { motion, useDragControls } from 'framer-motion'
+
 import { iconClose } from '../icons'
 
 export default function DraggableAppearanceSetting(

examples/green-wall/src/components/ContributionsGraph/ContributionsGraph.tsx

@@ -1,8 +1,9 @@
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react'
 
-import { DEFAULT_SIZE, DEFAULT_THEME, sizeProperties, THEMES } from '../../constants'
+import { DEFAULT_SIZE, DEFAULT_THEME, THEMES, sizeProperties } from '../../constants'
 import type { GraphData, GraphSettings } from '../../types'
 import { DisplayName } from '../../types'
+
 import Graph from './Graph'
 import GraphFooter from './GraphFooter'
 import GraphHeader from './GraphHeader'

examples/green-wall/src/components/ContributionsGraph/Graph.tsx

@@ -2,6 +2,7 @@ import { levels } from '../../constants'
 import { numberWithCommas } from '../../helpers'
 import type { ContributionCalendar, ContributionDay } from '../../types'
 import { ContributionLevel } from '../../types'
+
 import styles from './Graph.module.css'
 
 interface GraphProps extends React.ComponentProps<'div'> {

examples/green-wall/src/components/ContributionsGraph/GraphHeader.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link'
 
 import type { GitHubUser, GitHubUsername } from '../../types'
+
 import styles from './Graph.module.css'
 
 export default function GraphHeader(props: {