@eleventheye/asui 2.13.4 → 2.14.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/publish.yml +3 -5
- package/AGENTS.md +125 -0
- package/CHANGELOG.md +17 -0
- package/dist/apptypes/ASUI.types.d.ts +5 -0
- package/dist/apptypes/ASUI.types.d.ts.map +1 -1
- package/dist/astextfield/ASTextField.d.ts.map +1 -1
- package/dist/astextfield/ASTextField.js +34 -61
- package/dist/astextfield/ASTextField.types.d.ts +2 -1
- package/dist/astextfield/ASTextField.types.d.ts.map +1 -1
- package/dist/astextfield/styles.js +1 -1
- package/dist/astheme/ASThemeDefault.d.ts.map +1 -1
- package/dist/astheme/ASThemeDefault.js +1 -0
- package/docs/commit-syntax.md +143 -0
- package/docs/theme-update-strategy.md +101 -0
- package/package.json +1 -1
|
@@ -15,12 +15,12 @@ jobs:
|
|
|
15
15
|
|
|
16
16
|
steps:
|
|
17
17
|
- name: Checkout code
|
|
18
|
-
uses: actions/checkout@
|
|
18
|
+
uses: actions/checkout@v6
|
|
19
19
|
|
|
20
20
|
- name: Setup Node.js
|
|
21
|
-
uses: actions/setup-node@
|
|
21
|
+
uses: actions/setup-node@v6
|
|
22
22
|
with:
|
|
23
|
-
node-version: '
|
|
23
|
+
node-version: '24'
|
|
24
24
|
registry-url: 'https://registry.npmjs.org'
|
|
25
25
|
|
|
26
26
|
- name: Install dependencies
|
|
@@ -31,5 +31,3 @@ jobs:
|
|
|
31
31
|
|
|
32
32
|
- name: Publish to NPM
|
|
33
33
|
run: npm publish --access public
|
|
34
|
-
env:
|
|
35
|
-
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
|
package/AGENTS.md
ADDED
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
# AGENTS.md
|
|
2
|
+
|
|
3
|
+
Guidance for future coding agents working in this repo.
|
|
4
|
+
|
|
5
|
+
## Repo Purpose
|
|
6
|
+
|
|
7
|
+
This is `@eleventheye/asui`, a React/TypeScript UI component library. The published package should be driven by the production component source under `src/`, with exports collected through `src/index.ts` and generated output in `dist/`.
|
|
8
|
+
|
|
9
|
+
Storybook is used as a local component workshop for rendering, prop testing, and visual checks. It is not intended to define the production build boundary or act as a second strict application.
|
|
10
|
+
|
|
11
|
+
## Important Boundaries
|
|
12
|
+
|
|
13
|
+
- The root `tsconfig.json` is the source of truth for the published library typecheck.
|
|
14
|
+
- `src/stories/**/*`, `.storybook`, and `storybook-static` are excluded from the production TypeScript build.
|
|
15
|
+
- Do not make production config more complex only to satisfy Storybook demos.
|
|
16
|
+
- Prefer small, component-scoped refactors over broad rewrites.
|
|
17
|
+
- Preserve the public component API unless there is a clear reason to change it.
|
|
18
|
+
- Avoid generating per-file CSS declaration stubs for Storybook CSS imports. Use the global CSS module declaration instead.
|
|
19
|
+
- Keep this file lean. Put deep component-specific context in linked docs or instruction files.
|
|
20
|
+
|
|
21
|
+
## Common Commands
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm run typescript:check
|
|
25
|
+
npm run build
|
|
26
|
+
npm run storybook
|
|
27
|
+
npm run build-storybook
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Use `npm run typescript:check` for the main library. If a story-specific check is useful, use:
|
|
31
|
+
|
|
32
|
+
```bash
|
|
33
|
+
npx tsc -p src/stories/tsconfig.json --noEmit --pretty false
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
Story checks should help local development, not become a release blocker unless the issue affects the library itself.
|
|
37
|
+
|
|
38
|
+
## Storybook And CSS
|
|
39
|
+
|
|
40
|
+
Storybook imports plain CSS files for demo styling. The preferred setup is:
|
|
41
|
+
|
|
42
|
+
- Keep `declare module '*.css';` in `src/typings/images.d.ts`.
|
|
43
|
+
- Keep stories out of the root library build.
|
|
44
|
+
- Do not add `allowArbitraryExtensions` or `*.d.css.ts` files just for Storybook CSS.
|
|
45
|
+
|
|
46
|
+
The goal is a clean production config and low-friction local demos.
|
|
47
|
+
|
|
48
|
+
## Component Patterns
|
|
49
|
+
|
|
50
|
+
Components generally use:
|
|
51
|
+
|
|
52
|
+
- React + TypeScript
|
|
53
|
+
- `styled-components`
|
|
54
|
+
- local `ASThemeDefault`
|
|
55
|
+
- shared size constants from `src/apptypes/ASUI.types.ts`
|
|
56
|
+
- Storybook files under `src/stories`
|
|
57
|
+
|
|
58
|
+
Before making meaningful changes to a component, check whether there is a linked instruction or cold-read document for that component. For VS Code/Copilot-style file rules, look under `.github/instructions/*.instructions.md`. These files can use `applyTo` globs such as `src/astextfield/**`.
|
|
59
|
+
|
|
60
|
+
When creating or significantly refactoring a component, consider adding a concise cold-read document that explains:
|
|
61
|
+
|
|
62
|
+
- what the component owns
|
|
63
|
+
- controlled vs uncontrolled behavior
|
|
64
|
+
- important public API decisions
|
|
65
|
+
- theming expectations
|
|
66
|
+
- known tradeoffs and future direction
|
|
67
|
+
- why non-obvious implementation choices exist
|
|
68
|
+
|
|
69
|
+
If implementation changes make an instruction file or doc outdated, update the documentation in the same change.
|
|
70
|
+
|
|
71
|
+
When forwarding props to DOM/styled elements, spread external props before internal controlled props and handlers when the component must preserve behavior. Compose caller handlers instead of accidentally overwriting internal handlers.
|
|
72
|
+
|
|
73
|
+
For controlled/uncontrolled inputs, prefer the standard React split:
|
|
74
|
+
|
|
75
|
+
- `value` means parent-controlled.
|
|
76
|
+
- `defaultValue` means component-owned initial value.
|
|
77
|
+
- Local state should update only when uncontrolled.
|
|
78
|
+
- `onChange` should still notify the parent with the next value.
|
|
79
|
+
|
|
80
|
+
## ASTextField Notes
|
|
81
|
+
|
|
82
|
+
`ASTextField` was simplified to avoid a mixed controlled/uncontrolled flow:
|
|
83
|
+
|
|
84
|
+
- `value` controls the input when provided.
|
|
85
|
+
- `defaultValue` seeds internal state when uncontrolled.
|
|
86
|
+
- `onChange` receives the next string value.
|
|
87
|
+
- `onEnter` reads from the current input event value.
|
|
88
|
+
- icon visibility and class names should be derived from props/state instead of mirrored through effects.
|
|
89
|
+
- `autoFocus` should remain opt-in, not forced by default.
|
|
90
|
+
|
|
91
|
+
Be careful not to reintroduce duplicated local update + parent update + effect sync behavior for controlled input values.
|
|
92
|
+
|
|
93
|
+
## Theming Direction
|
|
94
|
+
|
|
95
|
+
The default visual theme is yellow-forward, but reusable components should not be married to that style. See `docs/theme-update-strategy.md` before changing theme APIs.
|
|
96
|
+
|
|
97
|
+
The desired direction:
|
|
98
|
+
|
|
99
|
+
- Theme semantic slots, not one visual implementation.
|
|
100
|
+
- Prefer names like `containerBackground`, `inputBorderColor`, `inputFocusShadow`, and `iconColor`.
|
|
101
|
+
- Avoid theme keys that force a gradient-only model, such as `bgColorTop` / `bgColorBottom`.
|
|
102
|
+
- Move hardcoded colors from components into theme slots.
|
|
103
|
+
- Keep `className` and `style` as escape hatches.
|
|
104
|
+
- Long term, prefer a `createASTheme(partialTheme)` helper that deep-merges partial overrides with `ASThemeDefault`.
|
|
105
|
+
|
|
106
|
+
When updating theming, migrate one component at a time and verify the default ASUI look still renders correctly.
|
|
107
|
+
|
|
108
|
+
## Packaging
|
|
109
|
+
|
|
110
|
+
Package entrypoints are `dist/index.js` and `dist/index.d.ts`. The published package should not include source stories or Storybook output.
|
|
111
|
+
|
|
112
|
+
Before changing publish behavior, inspect:
|
|
113
|
+
|
|
114
|
+
- `package.json`
|
|
115
|
+
- `.npmignore`
|
|
116
|
+
- `tsconfig.json`
|
|
117
|
+
- `src/index.ts`
|
|
118
|
+
|
|
119
|
+
## Style Preferences
|
|
120
|
+
|
|
121
|
+
- Keep changes focused.
|
|
122
|
+
- Avoid unrelated formatting churn.
|
|
123
|
+
- Prefer semantic prop and theme names over implementation-specific names.
|
|
124
|
+
- Do not add abstractions unless they remove real complexity.
|
|
125
|
+
- If a task is exploratory, document the decision in `docs/` when it will help future work.
|
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
|
+
|
|
5
|
+
### [2.14.1](https://github.com/Andrey11/asui/compare/v2.14.0...v2.14.1) (2026-05-26)
|
|
6
|
+
|
|
7
|
+
## [2.14.0](https://github.com/Andrey11/asui/compare/v2.13.4...v2.14.0) (2026-05-26)
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
### Features
|
|
11
|
+
|
|
12
|
+
* [#92](https://github.com/Andrey11/asui/issues/92) improve ASTextField behavior and release workflow docs ([4e86e4c](https://github.com/Andrey11/asui/commit/4e86e4c8ec7123341e73e02a6b981ddee65790ae))
|
|
13
|
+
|
|
14
|
+
## [2.13.2] - 2026-02-06
|
|
15
|
+
|
|
16
|
+
### Added
|
|
17
|
+
- Start tracking notable changes in this changelog.
|
|
@@ -135,10 +135,15 @@ export type ASColorTheme = {
|
|
|
135
135
|
whiteAlpha35: string;
|
|
136
136
|
whiteAlpha25: string;
|
|
137
137
|
whiteAlpha15: string;
|
|
138
|
+
yellowAlpha90: string;
|
|
139
|
+
yellowAlpha80: string;
|
|
140
|
+
yellowAlpha70: string;
|
|
141
|
+
yellowAlpha60: string;
|
|
138
142
|
};
|
|
139
143
|
export type ASTextFieldTheme = {
|
|
140
144
|
color: string;
|
|
141
145
|
borderColor: string;
|
|
146
|
+
borderRadius: string;
|
|
142
147
|
bgColorTop: string;
|
|
143
148
|
bgColorBottom: string;
|
|
144
149
|
autofillBorder: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ASUI.types.d.ts","sourceRoot":"","sources":["../../src/apptypes/ASUI.types.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"ASUI.types.d.ts","sourceRoot":"","sources":["../../src/apptypes/ASUI.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ASTextField.d.ts","sourceRoot":"","sources":["../../src/astextfield/ASTextField.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ASTextField.d.ts","sourceRoot":"","sources":["../../src/astextfield/ASTextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAK3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAUvD,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA2H3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -7,80 +7,53 @@ const ASUI_types_1 = require("../apptypes/ASUI.types");
|
|
|
7
7
|
const astheme_1 = tslib_1.__importDefault(require("../astheme"));
|
|
8
8
|
const icons_1 = require("../icons");
|
|
9
9
|
const styles_1 = require("./styles");
|
|
10
|
-
const ASTextField = ({ className = '', theme = astheme_1.default, value = '', onChange, onEnter, size = ASUI_types_1.ComponentSize.Medium, type = 'text', showClearButton = false, showSearchIcon = false, disableAutofill = false, ...props }) => {
|
|
11
|
-
const passwordTypeRef = (0, react_1.useRef)(false);
|
|
10
|
+
const ASTextField = ({ className = '', theme = astheme_1.default, value, defaultValue = '', onChange, onEnter, size = ASUI_types_1.ComponentSize.Medium, type = 'text', showClearButton = false, showSearchIcon = false, disableAutofill = false, id, style, autoFocus = false, autoComplete, autoCorrect, autoCapitalize, spellCheck, onFocus, onKeyDown, ...props }) => {
|
|
12
11
|
const genericId = (0, react_1.useId)();
|
|
13
|
-
const textFieldId =
|
|
14
|
-
const
|
|
15
|
-
const [
|
|
16
|
-
const [
|
|
17
|
-
const
|
|
18
|
-
const
|
|
19
|
-
const
|
|
20
|
-
const
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
let searchIcon = showSearchIcon;
|
|
30
|
-
let clearIcon = showClearButton;
|
|
31
|
-
if (passwordTypeRef.current && type !== 'text' && type !== 'password') {
|
|
32
|
-
passwordTypeRef.current = false;
|
|
33
|
-
setPasswordIconVisible(false);
|
|
34
|
-
}
|
|
35
|
-
if (type === 'search') {
|
|
36
|
-
searchIcon = true;
|
|
37
|
-
clearIcon = true;
|
|
38
|
-
}
|
|
39
|
-
if (type === 'email') {
|
|
40
|
-
clearIcon = true;
|
|
41
|
-
}
|
|
42
|
-
if (type === 'password') {
|
|
43
|
-
passwordTypeRef.current = true;
|
|
44
|
-
setPasswordIconVisible(true);
|
|
45
|
-
}
|
|
46
|
-
setSearchIconVisible(searchIcon);
|
|
47
|
-
setClearIconVisible(clearIcon);
|
|
48
|
-
}, [showClearButton, showSearchIcon, type]);
|
|
49
|
-
(0, react_1.useEffect)(() => {
|
|
50
|
-
setRightIconCls(clearIconVisible ? 'RightIconOn' : 'RightIconOff');
|
|
51
|
-
}, [clearIconVisible]);
|
|
52
|
-
(0, react_1.useEffect)(() => {
|
|
53
|
-
setLeftIconCls(searchIconVisible ? 'LeftIconOn' : 'LeftIconOff');
|
|
54
|
-
if (searchIconVisible)
|
|
55
|
-
setRightIconCls('RightIconOn');
|
|
56
|
-
}, [searchIconVisible]);
|
|
57
|
-
(0, react_1.useEffect)(() => {
|
|
58
|
-
setPasswordCls(passwordIconVisible ? 'PasswordOn' : '');
|
|
59
|
-
}, [passwordIconVisible]);
|
|
12
|
+
const textFieldId = id || genericId;
|
|
13
|
+
const isControlled = value !== undefined;
|
|
14
|
+
const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue);
|
|
15
|
+
const [passwordVisible, setPasswordVisible] = (0, react_1.useState)(false);
|
|
16
|
+
const inputValue = isControlled ? value : internalValue;
|
|
17
|
+
const searchIconVisible = showSearchIcon || type === 'search';
|
|
18
|
+
const clearIconVisible = showClearButton || type === 'search' || type === 'email';
|
|
19
|
+
const passwordIconVisible = type === 'password';
|
|
20
|
+
const showType = passwordIconVisible && passwordVisible ? 'text' : type;
|
|
21
|
+
const rightIconCls = clearIconVisible || passwordIconVisible ? 'RightIconOn' : 'RightIconOff';
|
|
22
|
+
const leftIconCls = searchIconVisible ? 'LeftIconOn' : 'LeftIconOff';
|
|
23
|
+
const passwordCls = passwordIconVisible ? 'PasswordOn' : '';
|
|
24
|
+
const computedAutoComplete = autoComplete ?? (passwordIconVisible ? 'new-password' : disableAutofill ? 'off' : 'on');
|
|
25
|
+
const computedAutoCorrect = autoCorrect ?? (passwordIconVisible ? 'off' : 'on');
|
|
26
|
+
const computedAutoCapitalize = autoCapitalize ?? 'none';
|
|
27
|
+
const computedSpellCheck = spellCheck ?? !passwordIconVisible;
|
|
60
28
|
const onValueChange = (e) => {
|
|
61
|
-
const
|
|
62
|
-
|
|
63
|
-
|
|
29
|
+
const nextValue = e.currentTarget.value;
|
|
30
|
+
if (!isControlled) {
|
|
31
|
+
setInternalValue(nextValue);
|
|
32
|
+
}
|
|
33
|
+
onChange?.(nextValue);
|
|
64
34
|
};
|
|
65
35
|
const clearValue = () => {
|
|
66
|
-
|
|
36
|
+
if (!isControlled) {
|
|
37
|
+
setInternalValue('');
|
|
38
|
+
}
|
|
67
39
|
onChange?.('');
|
|
68
40
|
};
|
|
69
41
|
const onInputFieldFocus = (e) => {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
return e;
|
|
42
|
+
e.currentTarget.select();
|
|
43
|
+
onFocus?.(e);
|
|
73
44
|
};
|
|
74
45
|
const handleKeyDown = (e) => {
|
|
75
46
|
if (e.key === 'Enter' && onEnter) {
|
|
76
|
-
onEnter(
|
|
47
|
+
onEnter(e.currentTarget.value);
|
|
77
48
|
}
|
|
78
|
-
|
|
49
|
+
onKeyDown?.(e);
|
|
79
50
|
};
|
|
80
51
|
const onPasswordShowHide = () => {
|
|
81
|
-
|
|
52
|
+
setPasswordVisible((currentPasswordVisible) => !currentPasswordVisible);
|
|
82
53
|
};
|
|
83
|
-
const baseCls =
|
|
84
|
-
|
|
54
|
+
const baseCls = ['ASTextFieldInputContainer', size, leftIconCls, rightIconCls, passwordCls, className]
|
|
55
|
+
.filter(Boolean)
|
|
56
|
+
.join(' ');
|
|
57
|
+
return ((0, jsx_runtime_1.jsxs)(styles_1.ASTextFieldInputContainer, { theme: theme, className: baseCls, style: style, children: [searchIconVisible && ((0, jsx_runtime_1.jsx)(styles_1.ASTextFieldSearchIcon, { theme: theme, className: "ASTextFieldSearchIcon", children: (0, jsx_runtime_1.jsx)(icons_1.SearchIcon, { color: "#333333", fillColor: "#333333", iconSize: 20 }) })), (0, jsx_runtime_1.jsx)(styles_1.ASTextFieldInput, { ...props, theme: theme, autoComplete: computedAutoComplete, "aria-autocomplete": passwordIconVisible ? 'none' : 'list', autoCorrect: computedAutoCorrect, autoCapitalize: computedAutoCapitalize, spellCheck: computedSpellCheck, autoFocus: autoFocus, id: textFieldId, className: "ASTextFieldInput", type: showType, value: inputValue, onChange: onValueChange, onFocus: onInputFieldFocus, onKeyDown: handleKeyDown }), clearIconVisible && ((0, jsx_runtime_1.jsx)(styles_1.ASTextFieldClickIcon, { theme: theme, className: "ASTextFieldClearIcon", onTapped: clearValue, children: (0, jsx_runtime_1.jsx)(icons_1.CloseIcon, { color: "transparent", fillColor: "#333333", circleStrokeColor: "#666666", circleStrokeWidth: 0.5, iconSize: 20 }) })), passwordIconVisible && ((0, jsx_runtime_1.jsxs)(styles_1.ASTextFieldClickIcon, { theme: theme, className: "ASTextFieldPasswordIcon", onTapped: onPasswordShowHide, children: [showType === 'password' && (0, jsx_runtime_1.jsx)(styles_1.ScaledEyeIcon, { color: "#333333", fillColor: "#333333", iconSize: 20 }), showType === 'text' && (0, jsx_runtime_1.jsx)(styles_1.ScaledSlashedEyeIcon, { color: "#333333", fillColor: "#333333", iconSize: 20 })] }))] }));
|
|
85
58
|
};
|
|
86
59
|
exports.default = ASTextField;
|
|
@@ -4,11 +4,12 @@ export type ASTextFieldProps = {
|
|
|
4
4
|
className?: string;
|
|
5
5
|
theme?: typeof ASThemeDefault;
|
|
6
6
|
value?: string;
|
|
7
|
+
defaultValue?: string;
|
|
7
8
|
onChange?: (value: string) => void;
|
|
8
9
|
size?: ASComponentSize;
|
|
9
10
|
showClearButton?: boolean;
|
|
10
11
|
disableAutofill?: boolean;
|
|
11
12
|
showSearchIcon?: boolean;
|
|
12
13
|
onEnter?: (value: string) => void;
|
|
13
|
-
} & Omit<React.
|
|
14
|
+
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'defaultValue' | 'onChange'>;
|
|
14
15
|
//# sourceMappingURL=ASTextField.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ASTextField.types.d.ts","sourceRoot":"","sources":["../../src/astextfield/ASTextField.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,cAAc,MAAM,YAAY,CAAC;AAExC,MAAM,MAAM,gBAAgB,GAAG;IAK7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAMnB,KAAK,CAAC,EAAE,OAAO,cAAc,CAAC;IAM9B,KAAK,CAAC,EAAE,MAAM,CAAC;IAMf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IASnC,IAAI,CAAC,EAAE,eAAe,CAAC;IAOvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAO1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAQ1B,cAAc,CAAC,EAAE,OAAO,CAAC;IAMzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,GAAG,IAAI,CAAC,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"ASTextField.types.d.ts","sourceRoot":"","sources":["../../src/astextfield/ASTextField.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,cAAc,MAAM,YAAY,CAAC;AAExC,MAAM,MAAM,gBAAgB,GAAG;IAK7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAMnB,KAAK,CAAC,EAAE,OAAO,cAAc,CAAC;IAM9B,KAAK,CAAC,EAAE,MAAM,CAAC;IAMf,YAAY,CAAC,EAAE,MAAM,CAAC;IAMtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IASnC,IAAI,CAAC,EAAE,eAAe,CAAC;IAOvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAO1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAQ1B,cAAc,CAAC,EAAE,OAAO,CAAC;IAMzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC,CAAC"}
|
|
@@ -19,7 +19,7 @@ exports.ASTextFieldInputContainer = styled_components_1.default.div `
|
|
|
19
19
|
);
|
|
20
20
|
color: ${(props) => props.theme.textfield.color};
|
|
21
21
|
outline: 1px solid ${(props) => props.theme.textfield.borderColor};
|
|
22
|
-
border-radius:
|
|
22
|
+
border-radius: ${(props) => props.theme.textfield.borderRadius};
|
|
23
23
|
-webkit-tap-highlight-color: transparent;
|
|
24
24
|
padding: 0 12px;
|
|
25
25
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ASThemeDefault.d.ts","sourceRoot":"","sources":["../../src/astheme/ASThemeDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAiB,MAAM,wBAAwB,CAAC;AA8EhE,QAAA,MAAM,cAAc,EAAE,
|
|
1
|
+
{"version":3,"file":"ASThemeDefault.d.ts","sourceRoot":"","sources":["../../src/astheme/ASThemeDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAiB,MAAM,wBAAwB,CAAC;AA8EhE,QAAA,MAAM,cAAc,EAAE,OA+JrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
# Commit Syntax
|
|
2
|
+
|
|
3
|
+
This repo uses `standard-version` for release commits, version tags, and changelog generation.
|
|
4
|
+
|
|
5
|
+
For useful release notes, commit messages should follow Conventional Commits while still keeping the GitHub issue/ticket number near the front.
|
|
6
|
+
|
|
7
|
+
## Recommended Format
|
|
8
|
+
|
|
9
|
+
```text
|
|
10
|
+
<type>: #<ticket> <short summary>
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Examples:
|
|
14
|
+
|
|
15
|
+
```text
|
|
16
|
+
feat: #123 add ASTextField theme override helper
|
|
17
|
+
fix: #124 correct ASNavBar large button spacing
|
|
18
|
+
docs: #125 document release process
|
|
19
|
+
chore: #126 update dependencies
|
|
20
|
+
refactor: #127 simplify ASTextField value ownership
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
This format is parser-friendly for `standard-version` and still keeps the ticket number easy to scan.
|
|
24
|
+
|
|
25
|
+
## Common Types
|
|
26
|
+
|
|
27
|
+
- `feat`: user-facing feature or new capability
|
|
28
|
+
- `fix`: bug fix
|
|
29
|
+
- `docs`: documentation-only change
|
|
30
|
+
- `chore`: maintenance, dependency updates, release plumbing
|
|
31
|
+
- `refactor`: code structure change without intended behavior change
|
|
32
|
+
- `test`: test-only change
|
|
33
|
+
- `style`: formatting-only change
|
|
34
|
+
- `perf`: performance improvement
|
|
35
|
+
- `build`: build system or packaging change
|
|
36
|
+
- `ci`: GitHub Actions or CI change
|
|
37
|
+
|
|
38
|
+
## Version Bump Behavior
|
|
39
|
+
|
|
40
|
+
`standard-version` looks at commits since the last tag and infers the next version:
|
|
41
|
+
|
|
42
|
+
```text
|
|
43
|
+
fix: ... -> patch bump
|
|
44
|
+
feat: ... -> minor bump
|
|
45
|
+
BREAKING CHANGE or ! -> major bump
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
Examples from `2.13.4`:
|
|
49
|
+
|
|
50
|
+
```text
|
|
51
|
+
fix: #128 correct ASTextField clear button behavior
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
would normally produce:
|
|
55
|
+
|
|
56
|
+
```text
|
|
57
|
+
2.13.5
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
```text
|
|
61
|
+
feat: #128 add theme override helper
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
would normally produce:
|
|
65
|
+
|
|
66
|
+
```text
|
|
67
|
+
2.14.0
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
```text
|
|
71
|
+
feat!: #128 replace textfield theme API
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
would normally produce:
|
|
75
|
+
|
|
76
|
+
```text
|
|
77
|
+
3.0.0
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## Breaking Changes
|
|
81
|
+
|
|
82
|
+
Use `!` after the type/scope:
|
|
83
|
+
|
|
84
|
+
```text
|
|
85
|
+
feat!: #128 replace textfield theme API
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
Or include a footer:
|
|
89
|
+
|
|
90
|
+
```text
|
|
91
|
+
feat: #128 replace textfield theme API
|
|
92
|
+
|
|
93
|
+
BREAKING CHANGE: textfield theme keys were renamed.
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
## Manual Version Control
|
|
97
|
+
|
|
98
|
+
The inferred version can be overridden:
|
|
99
|
+
|
|
100
|
+
```bash
|
|
101
|
+
npm run release -- --release-as patch
|
|
102
|
+
npm run release -- --release-as minor
|
|
103
|
+
npm run release -- --release-as major
|
|
104
|
+
npm run release -- --release-as 2.14.3
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
## Release Flow
|
|
108
|
+
|
|
109
|
+
Run releases from a clean, up-to-date `main` branch after feature work has been merged.
|
|
110
|
+
|
|
111
|
+
The intended release flow is:
|
|
112
|
+
|
|
113
|
+
```bash
|
|
114
|
+
npm run release
|
|
115
|
+
git push --follow-tags origin main
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
`npm run release` runs `standard-version`, which:
|
|
119
|
+
|
|
120
|
+
1. reads commits since the last tag
|
|
121
|
+
2. updates `package.json`
|
|
122
|
+
3. updates `package-lock.json`
|
|
123
|
+
4. updates `CHANGELOG.md`
|
|
124
|
+
5. creates a release commit
|
|
125
|
+
6. creates a version tag such as `v2.13.5`
|
|
126
|
+
|
|
127
|
+
Pushing the tag triggers the publish workflow.
|
|
128
|
+
|
|
129
|
+
## Avoid
|
|
130
|
+
|
|
131
|
+
Avoid ticket-first messages when you want automatic changelog generation:
|
|
132
|
+
|
|
133
|
+
```text
|
|
134
|
+
#123 Added ASTextField theme override helper
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
This is readable for humans, but `standard-version` will not classify it as a feature or fix.
|
|
138
|
+
|
|
139
|
+
Prefer:
|
|
140
|
+
|
|
141
|
+
```text
|
|
142
|
+
feat: #123 add ASTextField theme override helper
|
|
143
|
+
```
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
# Theme Update Strategy
|
|
2
|
+
|
|
3
|
+
## Goal
|
|
4
|
+
|
|
5
|
+
Keep the published UI components easy to reuse in projects that do not share the original ASUI yellow visual language.
|
|
6
|
+
|
|
7
|
+
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.
|
|
8
|
+
|
|
9
|
+
## Guiding Principles
|
|
10
|
+
|
|
11
|
+
- Theme semantic roles, not one visual implementation.
|
|
12
|
+
- Avoid exposing every CSS property as a public prop.
|
|
13
|
+
- Use theme slots for common branding and component states.
|
|
14
|
+
- Keep `className` and `style` as escape hatches for one-off layout or visual tweaks.
|
|
15
|
+
- Prefer component-level theme objects that can be partially overridden.
|
|
16
|
+
- Do not make Storybook/local-demo styling drive the production component API.
|
|
17
|
+
|
|
18
|
+
## ASTextField Direction
|
|
19
|
+
|
|
20
|
+
`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.
|
|
21
|
+
|
|
22
|
+
Move this toward semantic slots that accept complete CSS values:
|
|
23
|
+
|
|
24
|
+
```ts
|
|
25
|
+
textfield: {
|
|
26
|
+
containerBackground: string;
|
|
27
|
+
containerBorderColor: string;
|
|
28
|
+
containerBorderRadius: string;
|
|
29
|
+
containerColor: string;
|
|
30
|
+
|
|
31
|
+
inputBackground: string;
|
|
32
|
+
inputBorderColor: string;
|
|
33
|
+
inputBorderRadius: string;
|
|
34
|
+
inputColor: string;
|
|
35
|
+
inputPlaceholderColor: string;
|
|
36
|
+
|
|
37
|
+
inputFocusBackground: string;
|
|
38
|
+
inputFocusBorderColor: string;
|
|
39
|
+
inputFocusColor: string;
|
|
40
|
+
inputFocusShadow: string;
|
|
41
|
+
|
|
42
|
+
iconColor: string;
|
|
43
|
+
iconHoverColor: string;
|
|
44
|
+
|
|
45
|
+
autofillBackground: string;
|
|
46
|
+
autofillColor: string;
|
|
47
|
+
autofillBorderColor: string;
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
The default theme can still provide gradients:
|
|
52
|
+
|
|
53
|
+
```ts
|
|
54
|
+
containerBackground: `linear-gradient(to bottom, ${colors.yellow30} 5%, ${colors.mainYellow} 100%)`;
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
A consuming project should be able to replace it with a flat value:
|
|
58
|
+
|
|
59
|
+
```ts
|
|
60
|
+
containerBackground: '#ffffff';
|
|
61
|
+
inputBackground: '#ffffff';
|
|
62
|
+
inputFocusShadow: '0 0 0 3px rgb(59 130 246 / 25%)';
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
## Specific Cleanup Items
|
|
66
|
+
|
|
67
|
+
- Replace hardcoded icon colors in `ASTextField.tsx` with theme values.
|
|
68
|
+
- Rename gradient-specific theme keys to semantic background/border/color slots.
|
|
69
|
+
- Consider theme slots for common layout values that affect portability:
|
|
70
|
+
- `minWidth`
|
|
71
|
+
- `containerPaddingInline`
|
|
72
|
+
- `inputBorderRadius`
|
|
73
|
+
- `transition`
|
|
74
|
+
- size-specific heights
|
|
75
|
+
- size-specific input font sizes
|
|
76
|
+
- Keep advanced or rare customizations outside the public theme surface unless multiple real components need them.
|
|
77
|
+
|
|
78
|
+
## Theme Override API
|
|
79
|
+
|
|
80
|
+
Longer term, prefer a helper that deep-merges partial theme overrides with `ASThemeDefault`:
|
|
81
|
+
|
|
82
|
+
```ts
|
|
83
|
+
const theme = createASTheme({
|
|
84
|
+
textfield: {
|
|
85
|
+
containerBackground: '#fff',
|
|
86
|
+
containerBorderColor: '#d0d5dd',
|
|
87
|
+
iconColor: '#667085',
|
|
88
|
+
},
|
|
89
|
+
});
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
This lets consumers update only the slots they care about while keeping the rest of the component library styled consistently.
|
|
93
|
+
|
|
94
|
+
## Migration Approach
|
|
95
|
+
|
|
96
|
+
1. Start with one component at a time, beginning with `ASTextField`.
|
|
97
|
+
2. Add semantic theme slots while temporarily preserving old keys if needed.
|
|
98
|
+
3. Update component styles to read from the new slots.
|
|
99
|
+
4. Move hardcoded visual values into the theme.
|
|
100
|
+
5. Verify the default ASUI theme still renders the current look.
|
|
101
|
+
6. Add at least one alternate Storybook theme example to prove the component can leave the yellow theme cleanly.
|