Performant UI initial release

.flowconfig

@@ -11,7 +11,5 @@
 [lints]
 
 [options]
-esproposal.export_star_as=enable
-module.file_ext=.less
 
 [strict]

eslint.config.js

@@ -1,19 +1,57 @@
 import js from '@eslint/js';
 import babelParser from '@babel/eslint-parser';
+import typescriptEslint from '@typescript-eslint/eslint-plugin';
+import typescriptParser from '@typescript-eslint/parser';
 import flowtype from 'eslint-plugin-flowtype';
 import { importX } from 'eslint-plugin-import-x';
 import jest from 'eslint-plugin-jest';
 import jsxA11y from 'eslint-plugin-jsx-a11y';
 import react from 'eslint-plugin-react';
 import globals from 'globals';
 import stylistic from '@stylistic/eslint-plugin';
+import { createTypeScriptImportResolver } from 'eslint-import-resolver-typescript';
+
+const commonRules = {
+  'class-methods-use-this': 'off',
+  '@stylistic/comma-dangle': ['error', 'never'],
+  "import-x/no-named-as-default": "off",
+  "import-x/no-named-as-default-member": "off",
+  'import-x/prefer-default-export': 'off',
+  'jsx-a11y/media-has-caption': 'off',
+  '@stylistic/jsx-quotes': ['error', 'prefer-single'],
+  '@stylistic/lines-between-class-members': 'off',
+  '@stylistic/max-len': ['error', {
+    code: 120,
+    ignoreStrings: true
+  }],
+  'no-underscore-dangle': 'off',
+  'no-use-before-define': 'off',
+  '@stylistic/quote-props': ['error', 'as-needed', {
+    keywords: false,
+    unnecessary: true,
+    numbers: true
+  }],
+  'react/display-name': 'off',
+  'react/default-props-match-prop-types': 'off',
+  'react/destructuring-assignment': 'off',
+  'react/jsx-no-bind': 'off',
+  'react/jsx-props-no-spreading': 'off',
+  'react/no-array-index-key': 'off',
+  'react/no-did-update-set-state': 'off',
+  'react/prefer-stateless-function': 'off',
+  'react/require-default-props': 'off',
+  'react/sort-comp': 'off',
+  'react/static-property-placement': 'off',
+  '@stylistic/semi-style': ['error', 'last'],
+  '@stylistic/semi': ['error', 'always']
+};
 
 export default [
   importX.flatConfigs.recommended,
   js.configs.recommended,
   react.configs.flat.recommended,
   {
-    files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
+    files: ['**/*.{js,jsx,mjs,cjs}'],
     languageOptions: {
       ecmaVersion: 'latest',
       globals: {
@@ -48,48 +86,64 @@ export default [
       '@stylistic': stylistic
     },
     rules: {
-      'class-methods-use-this': 'off',
-      '@stylistic/comma-dangle': ['error', 'never'],
-      "import-x/no-named-as-default": "off",
-      "import-x/no-named-as-default-member": "off",
-      'import-x/prefer-default-export': 'off',
-      'jsx-a11y/media-has-caption': 'off',
-      '@stylistic/jsx-quotes': ['error', 'prefer-single'],
-      '@stylistic/lines-between-class-members': 'off',
-      '@stylistic/max-len': ['error', {
-        code: 120,
-        ignoreStrings: true
-      }],
-      'no-underscore-dangle': 'off',
-      'no-use-before-define': 'off',
-      '@stylistic/quote-props': ['error', 'as-needed', {
-        keywords: false,
-        unnecessary: true,
-        numbers: true
-      }],
-      'react/display-name': 'off',
-      'react/default-props-match-prop-types': 'off',
-      'react/destructuring-assignment': 'off',
+      ...commonRules,
       'react/jsx-filename-extension': [1, {
         extensions: ['.js', '.jsx']
-      }],
-      'react/jsx-no-bind': 'off',
-      'react/jsx-props-no-spreading': 'off',
-      'react/no-array-index-key': 'off',
-      'react/no-did-update-set-state': 'off',
-      'react/prefer-stateless-function': 'off',
-      'react/require-default-props': 'off',
-      'react/sort-comp': 'off',
-      'react/static-property-placement': 'off',
-      '@stylistic/semi-style': ['error', 'last'],
-      '@stylistic/semi': ['error', 'always']
+      }]
     },
     settings: {
       react: {
         version: 'detect'
       }
     }
-  }, {
+  },
+  {
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      globals: {
+        ...globals.browser,
+        ...jest.environments.globals.globals,
+        __dirname: 'readonly',
+        Atomics: 'readonly',
+        JSX: 'readonly',
+        SharedArrayBuffer: 'readonly',
+        TimeoutID: 'readonly',
+        process: 'readonly'
+      },
+      parser: typescriptParser,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true
+        },
+        project: './tsconfig.json'
+      },
+      sourceType: 'module'
+    },
+    plugins: {
+      react,
+      '@typescript-eslint': typescriptEslint,
+      jest,
+      'jsx-a11y': jsxA11y,
+      '@stylistic': stylistic
+    },
+    rules: {
+      ...commonRules,
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": ["error"]
+    },
+    settings: {
+      react: {
+        version: 'detect'
+      },
+      'import-x/resolver-next': [
+        createTypeScriptImportResolver({
+          project: 'packages/*/{ts,js}config.json'
+        })
+      ]
+    }
+  },
+  {
     ignores: [
       '**/dist/*'
     ]

package.json

@@ -19,27 +19,31 @@
     "@babel/core": "^7.28.0",
     "@babel/eslint-parser": "^7.28.0",
     "@babel/preset-env": "^7.28.0",
-    "@eslint/compat": "^1.3.1",
+    "@babel/preset-typescript": "^7.27.1",
+    "@eslint/compat": "^1.3.2",
     "@eslint/eslintrc": "^3.3.1",
-    "@eslint/js": "^9.31.0",
+    "@eslint/js": "^9.33.0",
+    "@stylistic/eslint-plugin": "^5.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.39.1",
+    "@typescript-eslint/parser": "^8.39.1",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^30.0.4",
+    "babel-jest": "^30.0.5",
     "babel-plugin-transform-flow-strip-types": "^6.22.0",
-    "eslint": "^9.31.0",
+    "eslint": "^9.33.0",
     "eslint-config-airbnb": "^19.0.4",
+    "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import-x": "^4.16.1",
     "eslint-plugin-jest": "^29.0.1",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-storybook": "^9.0.17",
-    "flow-bin": "^0.275.0",
+    "eslint-plugin-storybook": "^9.1.2",
+    "flow-bin": "^0.278.0",
     "globals": "^16.3.0",
     "jest": "^27.5.1",
-    "minimist": "^1.2.6",
-    "@stylistic/eslint-plugin": "^5.2.2",
-    "underscore": "^1.13.4"
+    "minimist": "^1.2.8",
+    "underscore": "^1.13.7"
   },
   "jest": {
     "projects": [

packages/performant-ui/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@performant-software/performant-ui",
+  "version": "0.0.1-beta.50",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/performant-ui/src/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "peerDependencies": {
+    "react": ">= 16.13.1 < 20.0.0",
+    "react-dom": ">= 16.13.1 < 20.0.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "@headlessui/react": "^2.2.6",
+    "react-icons": "^5.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "typescript": "^5.8.3",
+    "vite": "^5.1.4",
+    "vite-plugin-dts": "4.5.4"
+  }
+}

packages/performant-ui/src/components/Avatar.tsx

@@ -0,0 +1,48 @@
+import clsx from 'clsx'
+import React from 'react'
+
+interface Props {
+  alt?: string
+  initials: string
+  src?: string
+  classes?: {
+    container?: string
+    img?: string
+    initials?: string
+  }
+}
+
+const Avatar: React.FC<Props> = (props) => {
+  return (
+    <div
+      className={clsx(
+        'overflow-hidden rounded-full bg-black text-white select-none w-10 h-10 font-sans',
+        props.classes?.container,
+      )}
+    >
+      {props.src
+        ? (
+            <img
+              alt={props.alt}
+              className={clsx(
+                'object-cover w-full h-full',
+                props.classes?.img
+              )}
+              src={props.src}
+            />
+          )
+        : (
+            <span
+              className={clsx(
+                'p-1 h-full w-full flex items-center justify-center',
+                props.classes?.initials
+              )}
+            >
+              {props.initials}
+            </span>
+          )}
+    </div>
+  )
+}
+
+export default Avatar

packages/performant-ui/src/components/Badge.tsx

@@ -0,0 +1,32 @@
+import clsx from 'clsx';
+import React from 'react';
+
+const colors = {
+  faircopy: 'bg-[#E9ECF5] hover:bg-[#CED8E9] text-[#324872]',
+  green: 'bg-green-100 hover:bg-green-200 text-green-500',
+  gray: 'bg-gray-100 hover:bg-gray-200 text-gray-500',
+  red: 'bg-red-100 hover:bg-red-200 text-red-500',
+  blue: 'bg-blue-100 hover:bg-blue-200 text-blue-500'
+} as const;
+
+interface Props {
+  className?: string
+  children: React.ReactNode
+  color?: keyof typeof colors
+}
+
+const Badge: React.FC<Props> = (props) => {
+  const color = props.color || 'faircopy';
+
+  return (
+    <span className={clsx(
+      'py-1 px-1.5 rounded-md text-xs font-semibold',
+      colors[color],
+      props.className
+    )}>
+      {props.children}
+    </span>
+  );
+};
+
+export default Badge;

packages/performant-ui/src/components/Button.tsx

@@ -0,0 +1,51 @@
+import clsx from 'clsx';
+import React, { useMemo } from 'react';
+
+interface Props {
+  ariaLabel?: string
+  className?: string
+  children?: React.ReactNode
+  disabled?: boolean
+  iconOnly?: boolean
+  onClick?: (...args: any[]) => any
+  size?: 'xs' | 's' | 'base' | 'l' | 'xl'
+  type?: 'button' | 'submit' | 'reset'
+  variant?: 'filled' | 'outline' | 'plain'
+}
+
+const Button: React.FC<Props> = (props) => {
+  const size = useMemo(() => props.size || 'base', [props.size]);
+  const variant = useMemo(() => props.variant || 'filled', [props.variant]);
+
+  return (
+    <button 
+      aria-label={props.ariaLabel}
+      className={clsx(
+        'font-semibold rounded-md outline-offset-2 focus:outline-2 focus:outline-primary disabled:opacity-50 hover:cursor-pointer',
+        {
+          'bg-primary text-white hover:brightness-110': variant === 'filled',
+          'bg-white border border-zinc-200 hover:bg-zinc-200': variant === 'outline',
+          'hover:bg-black/10': variant === 'plain',
+          'py-1 px-1': size === 'xs' && props.iconOnly,
+          'py-1.5 px-1.5': size === 's' && props.iconOnly,
+          'py-2 px-2': size === 'base' && props.iconOnly,
+          'py-2.5 px-2.5': size === 'l' && props.iconOnly,
+          'py-3 px-3': size === 'xl' && props.iconOnly,
+          'py-1 px-2 text-xs': size === 'xs' && !props.iconOnly,
+          'py-1 px-2 text-sm': size === 's' && !props.iconOnly,
+          'py-1.5 px-2.5 text-sm': size === 'base' && !props.iconOnly,
+          'py-2 px-3 text-sm': size === 'l' && !props.iconOnly,
+          'py-2 px-4 text-base': size === 'xl' && !props.iconOnly
+        },
+        props.className
+      )}
+      disabled={props.disabled}
+      onClick={props.onClick}
+      type={props.type || 'button'}
+    >
+      {props.children}
+    </button>
+  );
+};
+
+export default Button;