@eleventheye/asui 2.13.3 → 2.14.1

package/docs/commit-syntax.md

@@ -0,0 +1,143 @@
+# Commit Syntax
+
+This repo uses `standard-version` for release commits, version tags, and changelog generation.
+
+For useful release notes, commit messages should follow Conventional Commits while still keeping the GitHub issue/ticket number near the front.
+
+## Recommended Format
+
+```text
+<type>: #<ticket> <short summary>
+```
+
+Examples:
+
+```text
+feat: #123 add ASTextField theme override helper
+fix: #124 correct ASNavBar large button spacing
+docs: #125 document release process
+chore: #126 update dependencies
+refactor: #127 simplify ASTextField value ownership
+```
+
+This format is parser-friendly for `standard-version` and still keeps the ticket number easy to scan.
+
+## Common Types
+
+- `feat`: user-facing feature or new capability
+- `fix`: bug fix
+- `docs`: documentation-only change
+- `chore`: maintenance, dependency updates, release plumbing
+- `refactor`: code structure change without intended behavior change
+- `test`: test-only change
+- `style`: formatting-only change
+- `perf`: performance improvement
+- `build`: build system or packaging change
+- `ci`: GitHub Actions or CI change
+
+## Version Bump Behavior
+
+`standard-version` looks at commits since the last tag and infers the next version:
+
+```text
+fix: ...      -> patch bump
+feat: ...     -> minor bump
+BREAKING CHANGE or ! -> major bump
+```
+
+Examples from `2.13.4`:
+
+```text
+fix: #128 correct ASTextField clear button behavior
+```
+
+would normally produce:
+
+```text
+2.13.5
+```
+
+```text
+feat: #128 add theme override helper
+```
+
+would normally produce:
+
+```text
+2.14.0
+```
+
+```text
+feat!: #128 replace textfield theme API
+```
+
+would normally produce:
+
+```text
+3.0.0
+```
+
+## Breaking Changes
+
+Use `!` after the type/scope:
+
+```text
+feat!: #128 replace textfield theme API
+```
+
+Or include a footer:
+
+```text
+feat: #128 replace textfield theme API
+
+BREAKING CHANGE: textfield theme keys were renamed.
+```
+
+## Manual Version Control
+
+The inferred version can be overridden:
+
+```bash
+npm run release -- --release-as patch
+npm run release -- --release-as minor
+npm run release -- --release-as major
+npm run release -- --release-as 2.14.3
+```
+
+## Release Flow
+
+Run releases from a clean, up-to-date `main` branch after feature work has been merged.
+
+The intended release flow is:
+
+```bash
+npm run release
+git push --follow-tags origin main
+```
+
+`npm run release` runs `standard-version`, which:
+
+1. reads commits since the last tag
+2. updates `package.json`
+3. updates `package-lock.json`
+4. updates `CHANGELOG.md`
+5. creates a release commit
+6. creates a version tag such as `v2.13.5`
+
+Pushing the tag triggers the publish workflow.
+
+## Avoid
+
+Avoid ticket-first messages when you want automatic changelog generation:
+
+```text
+#123 Added ASTextField theme override helper
+```
+
+This is readable for humans, but `standard-version` will not classify it as a feature or fix.
+
+Prefer:
+
+```text
+feat: #123 add ASTextField theme override helper
+```

package/docs/theme-update-strategy.md

@@ -0,0 +1,101 @@
+# Theme Update Strategy
+
+## Goal
+
+Keep the published UI components easy to reuse in projects that do not share the original ASUI yellow visual language.
+
+The theme should describe semantic design slots instead of locking components to one implementation style. A default ASUI theme can still be expressive and yellow-forward, but consumers should be able to replace it with a flat, dark, light, outlined, or product-specific style without fighting the component internals.
+
+## Guiding Principles
+
+- Theme semantic roles, not one visual implementation.
+- Avoid exposing every CSS property as a public prop.
+- Use theme slots for common branding and component states.
+- Keep `className` and `style` as escape hatches for one-off layout or visual tweaks.
+- Prefer component-level theme objects that can be partially overridden.
+- Do not make Storybook/local-demo styling drive the production component API.
+
+## ASTextField Direction
+
+`ASTextField` currently supports theming, but parts of the theme are still tied to the original gradient/yellow implementation. Keys such as `bgColorTop`, `bgColorBottom`, `inputBgTop`, and `inputBgBottom` imply that every text field background must be a two-stop gradient.
+
+Move this toward semantic slots that accept complete CSS values:
+
+```ts
+textfield: {
+  containerBackground: string;
+  containerBorderColor: string;
+  containerBorderRadius: string;
+  containerColor: string;
+
+  inputBackground: string;
+  inputBorderColor: string;
+  inputBorderRadius: string;
+  inputColor: string;
+  inputPlaceholderColor: string;
+
+  inputFocusBackground: string;
+  inputFocusBorderColor: string;
+  inputFocusColor: string;
+  inputFocusShadow: string;
+
+  iconColor: string;
+  iconHoverColor: string;
+
+  autofillBackground: string;
+  autofillColor: string;
+  autofillBorderColor: string;
+}
+```
+
+The default theme can still provide gradients:
+
+```ts
+containerBackground: `linear-gradient(to bottom, ${colors.yellow30} 5%, ${colors.mainYellow} 100%)`;
+```
+
+A consuming project should be able to replace it with a flat value:
+
+```ts
+containerBackground: '#ffffff';
+inputBackground: '#ffffff';
+inputFocusShadow: '0 0 0 3px rgb(59 130 246 / 25%)';
+```
+
+## Specific Cleanup Items
+
+- Replace hardcoded icon colors in `ASTextField.tsx` with theme values.
+- Rename gradient-specific theme keys to semantic background/border/color slots.
+- Consider theme slots for common layout values that affect portability:
+  - `minWidth`
+  - `containerPaddingInline`
+  - `inputBorderRadius`
+  - `transition`
+  - size-specific heights
+  - size-specific input font sizes
+- Keep advanced or rare customizations outside the public theme surface unless multiple real components need them.
+
+## Theme Override API
+
+Longer term, prefer a helper that deep-merges partial theme overrides with `ASThemeDefault`:
+
+```ts
+const theme = createASTheme({
+  textfield: {
+    containerBackground: '#fff',
+    containerBorderColor: '#d0d5dd',
+    iconColor: '#667085',
+  },
+});
+```
+
+This lets consumers update only the slots they care about while keeping the rest of the component library styled consistently.
+
+## Migration Approach
+
+1. Start with one component at a time, beginning with `ASTextField`.
+2. Add semantic theme slots while temporarily preserving old keys if needed.
+3. Update component styles to read from the new slots.
+4. Move hardcoded visual values into the theme.
+5. Verify the default ASUI theme still renders the current look.
+6. Add at least one alternate Storybook theme example to prove the component can leave the yellow theme cleanly.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eleventheye/asui",
-  "version": "2.13.3",
+  "version": "2.14.1",
   "private": false,
   "description": "AS UI React Library by eleventheye (another one!)",
   "keywords": [
@@ -59,24 +59,24 @@
     "build-storybook": "storybook build"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^10.1.11",
-    "@storybook/addon-onboarding": "^10.1.11",
-    "@storybook/addon-webpack5-compiler-swc": "^4.0.2",
-    "@storybook/react-webpack5": "^10.1.11",
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/addon-onboarding": "^10.3.6",
+    "@storybook/addon-webpack5-compiler-swc": "^4.0.3",
+    "@storybook/react-webpack5": "^10.3.6",
     "@svgr/webpack": "^8.1.0",
-    "@types/react": "^19.1.11",
-    "@types/react-dom": "^19.1.7",
-    "@types/styled-components": "^5.1.34",
-    "npmignore": "^0.3.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@types/styled-components": "^5.1.36",
+    "npmignore": "^0.3.5",
     "standard-version": "^9.5.0",
-    "storybook": "^10.1.11",
-    "typescript": "^5.9.2"
+    "storybook": "^10.3.6",
+    "typescript": "^6.0.3"
   },
   "dependencies": {
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "rimraf": "^6.0.1",
-    "styled-components": "^6.1.19",
-    "uuid": "11.1.0"
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "rimraf": "^6.1.3",
+    "styled-components": "^6.4.1",
+    "uuid": "14.0.0"
   }
 }