feat: add initial TypeScript and ESLint configurations for library and React applications

- Created TypeScript configuration files for library and React applications.
- Added ESLint configurations for library, React, and Storybook.
- Implemented a basic Button component in the UI package.
- Set up Vite for the docs development environment.

packages/configs/eslint/library.js

@@ -0,0 +1,15 @@
+module.exports = {
+  env: {
+    node: true,
+  },
+  parser: '@typescript-eslint/parser',
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+  plugins: ['@typescript-eslint'],
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 2020,
+  },
+  rules: {
+    '@typescript-eslint/no-non-null-assertion': 'off',
+  },
+};

packages/configs/eslint/package.json

@@ -1,12 +1,21 @@
 {
   "name": "@repo/eslint-config",
   "version": "0.0.0",
-  "main": "index.js",
   "license": "MIT",
+  "files": [
+    "library.js",
+    "react.js",
+    "storybook.js"
+  ],
   "dependencies": {
     "@typescript-eslint/eslint-plugin": "^7.1.0",
     "@typescript-eslint/parser": "^7.1.0",
-    "eslint-config-prettier": "^9.1.0"
+    "@vercel/style-guide": "^5.2.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-turbo": "^2.0.0",
+    "eslint-plugin-mdx": "^3.1.5",
+    "eslint-plugin-only-warn": "^1.1.0",
+    "eslint-plugin-storybook": "^0.8.0"
   },
   "publishConfig": {
     "access": "public"

packages/configs/eslint/storybook.js

@@ -0,0 +1,45 @@
+const { resolve } = require('node:path');
+
+const project = resolve(process.cwd(), 'tsconfig.json');
+
+/*
+ * This is a custom ESLint configuration for use with
+ * typescript packages.
+ *
+ * This config extends the Vercel Engineering Style Guide.
+ * For more information, see https://github.com/vercel/style-guide
+ *
+ */
+
+module.exports = {
+  extends: [
+    'plugin:storybook/recommended',
+    'plugin:mdx/recommended',
+    ...[
+      '@vercel/style-guide/eslint/node',
+      '@vercel/style-guide/eslint/typescript',
+      '@vercel/style-guide/eslint/browser',
+      '@vercel/style-guide/eslint/react',
+    ].map(require.resolve),
+  ],
+  parserOptions: {
+    project,
+  },
+  plugins: ['only-warn'],
+  globals: {
+    React: true,
+    JSX: true,
+  },
+  settings: {
+    'import/resolver': {
+      typescript: {
+        project,
+      },
+    },
+  },
+  ignorePatterns: ['node_modules/', 'dist/'],
+  // add rules configurations here
+  rules: {
+    'import/no-default-export': 'off',
+  },
+};

packages/configs/typescript/react-app.json

@@ -0,0 +1,21 @@
+{
+    "extends": "./base.json",
+    "compilerOptions": {
+        "target": "ESNext",
+        "useDefineForClassFields": true,
+        "module": "ESNext",
+        "lib": [
+            "ESNext",
+            "DOM"
+        ],
+        "sourceMap": true,
+        "resolveJsonModule": true,
+        "noEmit": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noImplicitReturns": true
+    },
+    "exclude": [
+        "node_modules"
+    ]
+}

packages/configs/typescript/react-story.json

@@ -0,0 +1,20 @@
+{
+    "$schema": "https://json.schemastore.org/tsconfig",
+    "extends": "./base.json",
+    "compilerOptions": {
+        "allowJs": true,
+        "declaration": false,
+        "declarationMap": false,
+        "incremental": true,
+        "jsx": "preserve",
+        "lib": [
+            "dom",
+            "dom.iterable",
+            "esnext"
+        ],
+        "module": "esnext",
+        "noEmit": true,
+        "resolveJsonModule": true,
+        "target": "es5"
+    }
+}

packages/ui/.eslintrc.cjs

@@ -2,7 +2,7 @@
 module.exports = {
   root: true,
   ignorePatterns: ['.eslintrc.cjs'],
-  extends: ['@repo/eslint-config/index.js'],
+  extends: ['@repo/eslint-config/react.js'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     project: true,

packages/ui/src/components/button.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+}
+
+export function Button({ children, ...other }: ButtonProps): ReactNode {
+  return (
+    <button type="button" {...other}>
+      {children}
+    </button>
+  );
+}
+
+Button.displayName = 'Button';

packages/ui/src/components/index.ts

@@ -2,3 +2,4 @@ export * from './header';
 export * from './counter';
 export * from './date-example';
 export * from './encryption-demo';
+export * from './button';

packages/utils/.eslintrc.cjs

@@ -2,7 +2,7 @@
 module.exports = {
   root: true,
   ignorePatterns: ['.eslintrc.cjs'],
-  extends: ['@repo/eslint-config/index.js'],
+  extends: ['@repo/eslint-config/library.js'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     project: true,

packages/utils/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@repo/typescript-config/vite.json",
+  "extends": "@repo/typescript-config/library.json",
   "include": ["."],
   "exclude": ["node_modules"]
 }