bugfix/pharos-site-development: Wrap component files in fragment

.prettierrc.js

@@ -5,4 +5,10 @@ module.exports = {
   singleQuote: true,
   arrowParens: 'always',
   bracketSpacing: true,
+  overrides: [
+    {
+      files: '*.mdx',
+      options: { parser: 'mdx' },
+    },
+  ],
 };

.storybook/main.ts

@@ -1,12 +1,15 @@
 import { mergeConfig } from 'vite';
-import path from 'path';
+import react from '@vitejs/plugin-react';
+
+import path, { dirname, join } from 'path';
 
 const config = {
   stories: [],
-  addons: ['@storybook/addon-a11y', '@storybook/addon-essentials', '@storybook/addon-links'],
-  features: {
-    storyStoreV7: true,
-  },
+  addons: [
+    getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-links'),
+  ],
   docs: {
     autodocs: true,
   },
@@ -54,12 +57,15 @@ const config = {
           '@config': path.resolve(__dirname, './'),
         },
       },
+      plugins: [react()],
       optimizeDeps: {
+        exclude: ['fsevents'],
         include: [
           '@storybook/addon-viewport',
           '@storybook/blocks',
           '@storybook/theming/create',
           '@storybook/web-components',
+          '@vitejs/plugin-react',
           'lit/directives/style-map.js',
           'uuid',
         ],
@@ -68,3 +74,7 @@ const config = {
   },
 };
 export default config;
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}

.stylelintrc.js

@@ -11,7 +11,7 @@ module.exports = {
     'selector-id-pattern': null,
     'keyframes-name-pattern': null,
     'scss/operator-no-newline-after': null,
-    'value-no-vendor-prefix': [true, { ignoreValues: 'box' }],
+    'value-no-vendor-prefix': [true, { ignoreValues: ['box'] }],
     'alpha-value-notation': 'number',
   },
 };

.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.1.0.cjs
+yarnPath: .yarn/releases/yarn-4.1.1.cjs

eslint.config.mjs

@@ -0,0 +1,118 @@
+import js from '@eslint/js';
+import babelParser from '@babel/eslint-parser';
+import reactPlugin from 'eslint-plugin-react';
+import prettierPlugin from 'eslint-plugin-prettier';
+import storybookPlugin from 'eslint-plugin-storybook';
+import typeScriptEsLint from '@typescript-eslint/eslint-plugin';
+import globals from 'globals';
+
+const globalIgnores = [
+  '.storybook-static/',
+  'packages/pharos/coverage/',
+  'packages/pharos/lib/',
+  'packages/pharos/src/styles/**/*.ts',
+  'packages/pharos-site/public/',
+  'packages/pharos-site/.cache/',
+  '**/dist/',
+  '**/node_modules/',
+  '**/*.css.ts',
+];
+
+const pharosConfig = {
+  languageOptions: {
+    parser: babelParser,
+    globals: {
+      ...globals.browser,
+      ...globals.node,
+    },
+    parserOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'module',
+      requireConfigFile: false,
+      ecmaFeatures: {
+        jsx: true,
+      },
+      babelOptions: {
+        plugins: ['@babel/plugin-syntax-import-assertions'],
+        presets: ['@babel/preset-react'],
+      },
+    },
+  },
+  plugins: {
+    reactPlugin,
+    prettierPlugin,
+    storybookPlugin,
+    typeScriptEsLint,
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+  },
+};
+
+const tsConfig = {
+  files: ['*.ts'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: './packages/**/tsconfig.json',
+  },
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'plugin:wc/recommended',
+    'plugin:lit/recommended',
+  ],
+  rules: {
+    'no-unused-vars': 'off',
+    '@typescript-eslint/consistent-type-imports': ['error'],
+    '@typescript-eslint/no-unused-vars': ['error'],
+    'lit/no-legacy-template-syntax': 'off',
+  },
+};
+
+const tsxConfig = {
+  files: ['*.tsx'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: './packages/**/tsconfig.json',
+  },
+  extends: [
+    'plugin:jsx-a11y/recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:@typescript-eslint/recommended',
+  ],
+  rules: {
+    'no-unused-vars': 'off',
+    '@typescript-eslint/consistent-type-imports': ['error'],
+    '@typescript-eslint/no-unused-vars': ['error'],
+    'react/display-name': 'off',
+    'react/prop-types': 'off',
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
+  },
+};
+
+const mdxConfig = {
+  files: ['*.mdx'],
+  extends: ['plugin:mdx/recommended', 'plugin:react/recommended'],
+  settings: {
+    'mdx/code-blocks': true,
+  },
+  rules: {
+    'react/no-unescaped-entities': 'off',
+    'react/jsx-no-undef': 'off',
+  },
+};
+
+export default [
+  { ignores: globalIgnores },
+  js.configs.recommended,
+  pharosConfig,
+  tsConfig,
+  tsxConfig,
+  mdxConfig,
+];

package.json

@@ -54,65 +54,67 @@
   },
   "homepage": "https://github.com/ithaka/pharos#readme",
   "devDependencies": {
-    "@babel/core": "^7.24.0",
-    "@babel/eslint-parser": "^7.23.10",
-    "@babel/plugin-proposal-decorators": "^7.24.0",
-    "@babel/plugin-proposal-export-default-from": "^7.23.3",
-    "@babel/plugin-syntax-import-assertions": "^7.23.3",
-    "@babel/preset-env": "^7.24.0",
+    "@babel/core": "^7.24.5",
+    "@babel/eslint-parser": "^7.24.5",
+    "@babel/plugin-proposal-decorators": "^7.24.1",
+    "@babel/plugin-proposal-export-default-from": "^7.24.1",
+    "@babel/plugin-syntax-import-assertions": "^7.24.1",
+    "@babel/preset-env": "^7.24.5",
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.1",
-    "@commitlint/cli": "^19.2.0",
-    "@commitlint/config-conventional": "^19.1.0",
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/config-conventional": "^19.2.2",
     "@emotion/babel-plugin": "^11.11.0",
-    "@size-limit/preset-small-lib": "^11.1.0",
-    "@storybook/addon-a11y": "^7.6.17",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/blocks": "^7.6.17",
-    "@storybook/manager-api": "^7.6.17",
-    "@storybook/react-vite": "^7.6.17",
-    "@storybook/theming": "^7.6.17",
-    "@storybook/web-components": "^7.6.17",
-    "@storybook/web-components-vite": "^7.6.17",
+    "@size-limit/preset-small-lib": "^11.1.3",
+    "@storybook/addon-a11y": "^8.0.10",
+    "@storybook/addon-essentials": "^8.0.10",
+    "@storybook/addon-links": "^8.0.10",
+    "@storybook/blocks": "^8.0.10",
+    "@storybook/manager-api": "^8.0.10",
+    "@storybook/react-vite": "^8.0.10",
+    "@storybook/theming": "^8.0.10",
+    "@storybook/web-components": "^8.0.10",
+    "@storybook/web-components-vite": "^8.0.10",
     "@types/uuid": "^9.0.8",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.2.0",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "all-contributors-cli": "^6.26.1",
     "concurrently": "^8.2.2",
-    "cssnano": "^6.1.0",
-    "eslint": "^8.57.0",
+    "cssnano": "^7.0.1",
+    "eslint": "^9.2.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-lit": "^1.11.0",
     "eslint-plugin-mdx": "^2.3.4",
     "eslint-plugin-no-smart-quotes": "^1.3.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-wc": "^2.0.4",
+    "eslint-plugin-wc": "^2.1.0",
+    "globals": "^15.2.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
     "lit": "^2.8.0",
     "lit-analyzer": "^2.0.3",
     "markdown-toc": "^1.2.0",
-    "postcss": "^8.4.35",
-    "postcss-import": "^16.0.1",
+    "postcss": "^8.4.38",
+    "postcss-import": "^16.1.0",
     "postcss-media-minmax": "^5.0.0",
-    "postcss-preset-env": "^9.5.1",
+    "postcss-preset-env": "^9.5.11",
     "prettier": "^3.2.5",
     "pretty-quick": "^4.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "sass": "^1.72.0",
-    "size-limit": "^11.1.0",
-    "storybook": "^7.6.17",
-    "stylelint": "^16.2.1",
-    "stylelint-config-standard-scss": "^13.0.0",
-    "stylelint-scss": "^6.2.1",
-    "svglint": "^2.7.0",
-    "vite": "^4.5.2"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "sass": "^1.77.0",
+    "size-limit": "^11.1.3",
+    "storybook": "^8.0.10",
+    "stylelint": "^16.5.0",
+    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint-scss": "^6.3.0",
+    "svglint": "^2.7.1",
+    "vite": "^5.2.11"
   },
   "workspaces": {
     "packages": [
@@ -127,5 +129,5 @@
       "path": "packages/pharos/lib/index.js"
     }
   ],
-  "packageManager": "[email protected].0"
+  "packageManager": "[email protected].1"
 }