letalkui 0.0.1 → 0.0.3

package/.editorconfig

@@ -0,0 +1,11 @@
+root = true
+
+[*]
+indent_style = tab
+indent_size = 4
+# LF (Line Feed) and CRLF (Carriage Return + Line Feed) are different line-ending conventions used to mark the end of a line in text files:
+# More information in this post: https://medium.com/@feldy7k/understanding-line-break-types-cr-lf-and-crlf-278069b8da29
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

package/.github/workflows/check.yml

@@ -0,0 +1,33 @@
+on:
+    push:
+        branches:
+            - master
+
+    pull_request:
+
+    workflow_dispatch:
+
+name: Check
+
+jobs:
+    check:
+        name: Check
+        runs-on: ubuntu-latest
+
+        steps:
+            -   name: Checkout
+                uses: actions/checkout@v2
+
+            -   name: Setup NodeJS
+                uses: actions/setup-node@v1
+                with:
+                    node-version: "18.20.3"
+
+            -   name: Install All Dependencies
+                run: npm i -f
+
+            -   name: Build
+                env:
+                    CI: true
+                    NODE_OPTIONS: --max-old-space-size=4096
+                run: npm run build

package/.github/workflows/lint.yaml

@@ -0,0 +1,25 @@
+on: pull_request
+
+name: Lint
+
+jobs:
+    check:
+        name: Lint
+        runs-on: ubuntu-latest
+        container:
+            image: node:18.20.3
+
+        steps:
+            -   name: Checkout
+                uses: actions/checkout@v2
+
+            -   name: Setup NodeJS
+                uses: actions/setup-node@v2
+                with:
+                    node-version: "18.20.3"
+
+            -   name: Install packages
+                run: npm ci
+
+            -   name: Check Lint
+                run: npx eslint 'src/**'

package/.github/workflows/npm-publish.yml

@@ -1,27 +1,27 @@
 name: Release
 
 on:
-  push:
-    branches:
-      - master
+    push:
+        branches:
+            - master
 
 jobs:
-  release:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
+    release:
+        runs-on: ubuntu-latest
+        steps:
+            -   name: Checkout
+                uses: actions/checkout@v3
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: "18.20.3"
-          registry-url: 'https://registry.npmjs.org'
+            -   name: Setup Node.js
+                uses: actions/setup-node@v3
+                with:
+                    node-version: "18.20.3"
+                    registry-url: 'https://registry.npmjs.org'
 
-      - name: Install dependencies
-        run: npm i -f
+            -   name: Install dependencies
+                run: npm i -f
 
-      - name: Publish to NPM
-        run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+            -   name: Release
+                run: npm publish
+                env:
+                    NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.nvmrc

@@ -0,0 +1 @@
+14.18.1

package/eslint.config.js

@@ -1,28 +1,68 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import js from "@eslint/js"
+import globals from "globals"
+import reactHooks from "eslint-plugin-react-hooks"
+import reactRefresh from "eslint-plugin-react-refresh"
+import react from "eslint-plugin-react"
+import typescriptEslint from "@typescript-eslint/eslint-plugin"
+import jsxA11Y from "eslint-plugin-jsx-a11y"
+import _import from "eslint-plugin-import"
+import tsParser from "@typescript-eslint/parser"
 
-export default tseslint.config(
-  { ignores: ['dist'] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
+export default [
+    {
+        ignores: ["dist", ".storybook", "vite.config.ts", "tsup.config.ts"],
     },
-    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
+    js.configs.recommended,
+    {
+        files: ["**/*.{ts,tsx}"],
+        languageOptions: {
+            ecmaVersion: 2020,
+            sourceType: "module",
+            globals: {
+                ...globals.browser,
+                ...globals.node,
+                ...globals.jest,
+            },
+            parser: tsParser,
+            parserOptions: {
+                project: "./tsconfig.eslint.json",
+                ecmaFeatures: {
+                    jsx: true,
+                },
+            },
+        },
+        plugins: {
+            "react-hooks": reactHooks,
+            "react-refresh": reactRefresh,
+            react,
+            "@typescript-eslint": typescriptEslint,
+            "jsx-a11y": jsxA11Y,
+            import: _import,
+        },
+        rules: {
+            ...reactHooks.configs.recommended.rules,
+            "react-refresh/only-export-components": [
+                "warn",
+                { allowConstantExport: true },
+            ],
+            ...typescriptEslint.configs.recommended.rules,
+            ...react.configs.recommended.rules,
+            "@typescript-eslint/no-unused-vars": "error",
+            indent: ["error", "tab"],
+            quotes: ["error", "double"],
+            semi: ["error", "never"],
+			"object-curly-spacing": ["error", "always"],
+			"comma-dangle": ["error", "never"]
+        },
+        settings: {
+            "import/resolver": {
+                typescript: {
+                    project: ["./tsconfig.json"],
+                },
+            },
+            react: {
+                version: "detect",
+            },
+        },
     },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
-    },
-  },
-)
+]

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "letalkui",
   "private": false,
-  "version": "0.0.1",
+  "version": "0.0.3",
+  "type": "module",
   "scripts": {
     "lint": "eslint .",
     "dev": "storybook dev -p 6006",
@@ -13,6 +14,8 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@eslint/compat": "^1.2.5",
+    "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.17.0",
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/blocks": "^8.4.7",
@@ -22,8 +25,13 @@
     "@types/node": "18.19",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
+    "@typescript-eslint/eslint-plugin": "^8.20.0",
+    "@typescript-eslint/parser": "^8.20.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "eslint": "^9.17.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",
     "eslint-plugin-storybook": "^0.11.2",

package/src/components/Button/Button.stories.ts

@@ -1,53 +1,52 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
+import type { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 
-import { Button } from '.';
+import { Button } from "@/components/Button"
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
-  title: 'Example/Button',
-  component: Button,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-  args: { onClick: fn() },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+	title: "Example/Button",
+	component: Button,
+	parameters: {
+		layout: "centered"
+	},
+	tags: ["autodocs"],
+	argTypes: {
+		backgroundColor: {
+			control: "color"
+		}
+	},
+	args: {
+		onClick: fn()
+	}
+} satisfies Meta<typeof Button>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
 export const Primary: Story = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
+	args: {
+		primary: true,
+		label: "Button"
+	}
+}
 
 export const Secondary: Story = {
-  args: {
-    label: 'Button',
-  },
-};
+	args: {
+		label: "Button"
+	}
+}
 
 export const Large: Story = {
-  args: {
-    size: 'large',
-    label: 'Button',
-  },
-};
+	args: {
+		size: "large",
+		label: "Button"
+	}
+}
 
 export const Small: Story = {
-  args: {
-    size: 'small',
-    label: 'Button',
-  },
-};
+	args: {
+		size: "small",
+		label: "Button"
+	}
+}

package/src/components/Button/index.tsx

@@ -1,35 +1,30 @@
-import React from 'react';
+import React from "react"
 
 export interface ButtonProps {
-  /** Is this the principal call to action on the page? */
-  primary?: boolean;
-  /** What background color to use */
-  backgroundColor?: string;
-  /** How large should the button be? */
-  size?: 'small' | 'medium' | 'large';
-  /** Button contents */
-  label: string;
-  /** Optional click handler */
-  onClick?: () => void;
+	primary?: boolean
+	backgroundColor?: string
+	size?: "small" | "medium" | "large"
+	label: string
+	onClick?: () => void
 }
 
-/** Primary UI component for user interaction */
-export const Button = ({
-  primary = false,
-  size = 'medium',
-  backgroundColor,
-  label,
-  ...props
-}: ButtonProps) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-  return (
-    <button
-      type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-      style={{ backgroundColor }}
-      {...props}
-    >
-      {label}
-    </button>
-  );
-};
+export const Button = (props: ButtonProps) => {
+	const {
+		backgroundColor,
+		label,
+		size,
+		primary
+	} = props
+
+	const mode = primary ? "storybook-button--primary" : "storybook-button--secondary"
+	return (
+		<button
+			type="button"
+			className={["storybook-button", `storybook-button--${size}`, mode].join("")}
+			style={{ backgroundColor }}
+			{...props}
+		>
+			{label}
+		</button>
+	)
+}

package/src/index.ts

@@ -1 +1 @@
-export * from "./components/Button"
+export * from "@/components/Button"

package/tsconfig.app.json

@@ -24,7 +24,8 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]
-    }
+    },
+    "allowSyntheticDefaultImports": true
   },
   "include": ["src"]
 }

package/tsconfig.build.json

@@ -3,8 +3,9 @@
         "jsx": "react-jsx",
         "target": "ES2022",
         "esModuleInterop": true,
-        "strict": true,
-        "module": "NodeNext",
+		"moduleResolution": "node",
+		"strict": true,
+        "module": "ESNext",
         "sourceMap": true,
         "declaration": true,
         "lib": ["ES2022", "DOM", "DOM.Iterable"],
@@ -14,4 +15,4 @@
         }
     },
     "include": ["src"]
-}
+}

package/tsconfig.eslint.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.stories.ts"]
+}