@geektech/one 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Geek Tech Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README-zh.md

@@ -0,0 +1,143 @@
+# One UI
+
+One UI（`@geektech/one`）是面向 TSone 类组件框架的轻量级、无额外运行时依赖
+UI 组件库。TSone 是它的 peer dependency，使用 One UI 的应用必须同时安装
+TSone。
+
+## 安装
+
+```bash
+bun add @geektech/tsone @geektech/one
+```
+
+## 快速开始
+
+```ts
+import {
+  Component,
+  createApp,
+  createComponent,
+  type VNode,
+} from '@geektech/tsone';
+import { OneButton, OneCard, OneInput } from '@geektech/one';
+
+class App extends Component {
+  protected initState(): object {
+    return {};
+  }
+
+  protected initStyles(): void {}
+
+  protected render(): VNode {
+    return {
+      tag: 'main',
+      children: [
+        createComponent(OneButton, {}, ['保存']),
+        createComponent(OneInput, {
+          placeholder: '项目名称',
+          ariaLabel: '项目名称',
+        }),
+        createComponent(OneCard, { title: 'One UI' }, [
+          '为 TSone 提供轻量级组件。',
+        ]),
+      ],
+    };
+  }
+}
+
+createApp({ root: App }).mount();
+```
+
+## 按钮变体、尺寸、加载状态和事件
+
+`OneButton` 提供 `primary`、`secondary`、`danger` 三种变体，以及 `sm`、
+`md`、`lg` 三种尺寸。加载状态下按钮会被禁用并带有 `aria-busy`。
+
+```ts
+import { OneButton } from '@geektech/one';
+
+const button = new OneButton({
+  variant: 'danger',
+  size: 'lg',
+  loading: false,
+  children: ['删除'],
+});
+
+button.on('click', (event) => {
+  console.log('已点击', event);
+  button.setProps({ loading: true });
+});
+button.mount(document.querySelector('#actions') as HTMLElement);
+```
+
+## 受控与非受控输入框
+
+受控输入框传入 `value`，收到事件后通过 `setProps` 接受新值；非受控输入框传入
+`defaultValue`，值由 One UI 自己维护。
+
+```ts
+import { OneInput, type OneInputValueEvent } from '@geektech/one';
+
+const controlled = new OneInput({
+  value: 'one',
+  ariaLabel: '受控项目名称',
+});
+controlled.on('input', (payload) => {
+  const event = payload as OneInputValueEvent;
+  controlled.setProps({ value: event.value });
+});
+
+const uncontrolled = new OneInput({
+  defaultValue: '草稿',
+  ariaLabel: '草稿名称',
+});
+uncontrolled.on('change', (payload) => {
+  const event = payload as OneInputValueEvent;
+  console.log(event.value, event.originalEvent);
+});
+```
+
+## 卡片插槽
+
+带有 `slot: 'header'` 或 `slot: 'footer'` 的子节点进入对应命名插槽，未指定
+slot 的子节点进入默认内容区。
+
+```ts
+import { createComponent } from '@geektech/tsone';
+import { OneCard } from '@geektech/one';
+
+const card = createComponent(OneCard, {}, [
+  { tag: 'h2', slot: 'header', children: ['账户'] },
+  { tag: 'p', children: ['默认插槽内容'] },
+  { tag: 'button', slot: 'footer', children: ['继续'] },
+]);
+```
+
+## 主题覆盖
+
+One UI 样式限定在 `.one-*` 选择器中。可以在应用容器或 `:root` 上覆盖公开
+CSS 变量：
+
+```css
+.my-app {
+  --one-color-primary: #326bff;
+  --one-radius-md: 12px;
+}
+```
+
+对应的默认回退值也可以从 `ONE_THEME_DEFAULTS` 读取。
+
+## 开发
+
+```bash
+bun install
+bun test packages/one
+bunx tsc --noEmit --project packages/one/tsconfig.json
+bun run --cwd packages/one build
+```
+
+在仓库根目录运行完整发布前检查：
+
+```bash
+bun test packages/one/tests/package-contract.test.ts packages/one/tests/component-types.test.ts packages/one/tests/style-contract.test.ts packages/one/tests/package-smoke.test.ts && bunx tsc --noEmit --project packages/one/tsconfig.json && bun run --cwd packages/one build && bun pm pack --cwd packages/one --dry-run
+```

package/README.md

@@ -0,0 +1,144 @@
+# One UI
+
+One UI (`@geektech/one`) is a lightweight, zero-runtime-dependency UI
+component library for the TSone class-component framework. TSone is a peer
+dependency and must be installed by the consuming application.
+
+## Installation
+
+```bash
+bun add @geektech/tsone @geektech/one
+```
+
+## Quick start
+
+```ts
+import {
+  Component,
+  createApp,
+  createComponent,
+  type VNode,
+} from '@geektech/tsone';
+import { OneButton, OneCard, OneInput } from '@geektech/one';
+
+class App extends Component {
+  protected initState(): object {
+    return {};
+  }
+
+  protected initStyles(): void {}
+
+  protected render(): VNode {
+    return {
+      tag: 'main',
+      children: [
+        createComponent(OneButton, {}, ['Save']),
+        createComponent(OneInput, {
+          placeholder: 'Project name',
+          ariaLabel: 'Project name',
+        }),
+        createComponent(OneCard, { title: 'One UI' }, [
+          'Lightweight components for TSone.',
+        ]),
+      ],
+    };
+  }
+}
+
+createApp({ root: App }).mount();
+```
+
+## Button variants, sizes, loading and events
+
+`OneButton` supports `primary`, `secondary`, and `danger` variants and `sm`,
+`md`, and `lg` sizes. Loading buttons are disabled and expose `aria-busy`.
+
+```ts
+import { OneButton } from '@geektech/one';
+
+const button = new OneButton({
+  variant: 'danger',
+  size: 'lg',
+  loading: false,
+  children: ['Delete'],
+});
+
+button.on('click', (event) => {
+  console.log('clicked', event);
+  button.setProps({ loading: true });
+});
+button.mount(document.querySelector('#actions') as HTMLElement);
+```
+
+## Controlled and uncontrolled inputs
+
+Pass `value` for a controlled input and accept emitted values through
+`setProps`. Pass `defaultValue` when One UI should maintain the value.
+
+```ts
+import { OneInput, type OneInputValueEvent } from '@geektech/one';
+
+const controlled = new OneInput({
+  value: 'one',
+  ariaLabel: 'Controlled project name',
+});
+controlled.on('input', (payload) => {
+  const event = payload as OneInputValueEvent;
+  controlled.setProps({ value: event.value });
+});
+
+const uncontrolled = new OneInput({
+  defaultValue: 'draft',
+  ariaLabel: 'Draft project name',
+});
+uncontrolled.on('change', (payload) => {
+  const event = payload as OneInputValueEvent;
+  console.log(event.value, event.originalEvent);
+});
+```
+
+## Card slots
+
+Children with `slot: 'header'` or `slot: 'footer'` fill the named regions;
+children without a slot fill the default body.
+
+```ts
+import { createComponent } from '@geektech/tsone';
+import { OneCard } from '@geektech/one';
+
+const card = createComponent(OneCard, {}, [
+  { tag: 'h2', slot: 'header', children: ['Account'] },
+  { tag: 'p', children: ['Default slot content'] },
+  { tag: 'button', slot: 'footer', children: ['Continue'] },
+]);
+```
+
+## Theme overrides
+
+One UI styles are scoped to `.one-*` selectors. Override public CSS variables
+on an application container or `:root`:
+
+```css
+.my-app {
+  --one-color-primary: #326bff;
+  --one-radius-md: 12px;
+}
+```
+
+The matching fallback values are also available from
+`ONE_THEME_DEFAULTS`.
+
+## Development
+
+```bash
+bun install
+bun test packages/one
+bunx tsc --noEmit --project packages/one/tsconfig.json
+bun run --cwd packages/one build
+```
+
+Run the complete publish verification from the repository root:
+
+```bash
+bun test packages/one/tests/package-contract.test.ts packages/one/tests/component-types.test.ts packages/one/tests/style-contract.test.ts packages/one/tests/package-smoke.test.ts && bunx tsc --noEmit --project packages/one/tsconfig.json && bun run --cwd packages/one build && bun pm pack --cwd packages/one --dry-run
+```

package/dist/button/OneButton.d.ts

@@ -0,0 +1,19 @@
+import { Component, type VNode } from '@geektech/tsone';
+import { type OneNamedStyle } from '../styles/shared';
+import type { OneComponentSize } from '../types';
+export type OneButtonVariant = 'primary' | 'secondary' | 'danger';
+export interface OneButtonProps {
+    variant?: OneButtonVariant;
+    size?: OneComponentSize;
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    loading?: boolean;
+    children?: Array<VNode | string>;
+}
+export declare const ONE_BUTTON_STYLES: OneNamedStyle[];
+export declare function normalizeButtonVariant(value: unknown): OneButtonVariant;
+export declare class OneButton extends Component<OneButtonProps> {
+    protected initState(): object;
+    protected initStyles(): void;
+    protected render(): VNode;
+}

package/dist/button/index.d.ts

@@ -0,0 +1,2 @@
+export { OneButton } from './OneButton';
+export type { OneButtonProps, OneButtonVariant } from './OneButton';

package/dist/card/OneCard.d.ts

@@ -0,0 +1,12 @@
+import { Component, type VNode } from '@geektech/tsone';
+import { type OneNamedStyle } from '../styles/shared';
+export interface OneCardProps {
+    title?: string;
+    children?: Array<VNode | string>;
+}
+export declare const ONE_CARD_STYLES: OneNamedStyle[];
+export declare class OneCard extends Component<OneCardProps> {
+    protected initState(): object;
+    protected initStyles(): void;
+    protected render(): VNode;
+}

package/dist/card/index.d.ts

@@ -0,0 +1,2 @@
+export { OneCard } from './OneCard';
+export type { OneCardProps } from './OneCard';

package/dist/categories.d.ts

@@ -0,0 +1,18 @@
+export type OneComponentCategory = 'basic' | 'form' | 'data-display' | 'feedback';
+export declare const ONE_COMPONENT_CATEGORIES: readonly [{
+    readonly id: "basic";
+    readonly label: "基础";
+    readonly components: readonly ["OneButton", "OneInput"];
+}, {
+    readonly id: "form";
+    readonly label: "表单";
+    readonly components: readonly ["OneForm", "OneFormItem", "OneSelect", "OneCheckbox", "OneCheckboxGroup", "OneSwitch"];
+}, {
+    readonly id: "data-display";
+    readonly label: "数据展示";
+    readonly components: readonly ["OneCard"];
+}, {
+    readonly id: "feedback";
+    readonly label: "反馈与浮层";
+    readonly components: readonly [];
+}];

package/dist/checkbox/OneCheckbox.d.ts

@@ -0,0 +1,31 @@
+import { Component, type VNode } from '@geektech/tsone';
+import { type OneNamedStyle } from '../styles/shared';
+export interface OneCheckboxProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    ariaLabel?: string;
+    children?: Array<VNode | string>;
+}
+interface OneCheckboxState {
+    internalChecked: boolean;
+    revision: number;
+}
+export declare const ONE_CHECKBOX_STYLES: OneNamedStyle[];
+export declare class OneCheckbox extends Component<OneCheckboxProps, OneCheckboxState> {
+    private fieldContext;
+    private unsubscribe;
+    protected initState(): OneCheckboxState;
+    protected initStyles(): void;
+    protected beforeMount(): void;
+    protected onMounted(): void;
+    protected onUnmounted(): void;
+    protected onUpdated(): void;
+    protected render(): VNode;
+    private getChecked;
+    private emitChecked;
+}
+export {};

package/dist/checkbox/OneCheckboxGroup.d.ts

@@ -0,0 +1,28 @@
+import { Component, type VNode } from '@geektech/tsone';
+import type { OneSelectOption } from '../select';
+export interface OneCheckboxGroupProps {
+    options: readonly OneSelectOption[];
+    value?: string[];
+    defaultValue?: string[];
+    name?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    ariaLabel?: string;
+}
+interface OneCheckboxGroupState {
+    internalValue: string[];
+    revision: number;
+}
+export declare class OneCheckboxGroup extends Component<OneCheckboxGroupProps, OneCheckboxGroupState> {
+    private fieldContext;
+    private unsubscribe;
+    protected initState(): OneCheckboxGroupState;
+    protected initStyles(): void;
+    protected beforeMount(): void;
+    protected onMounted(): void;
+    protected onUnmounted(): void;
+    protected render(): VNode;
+    private getValue;
+    private toggle;
+}
+export {};

package/dist/checkbox/index.d.ts

@@ -0,0 +1,4 @@
+export { OneCheckbox } from './OneCheckbox';
+export type { OneCheckboxProps } from './OneCheckbox';
+export { OneCheckboxGroup } from './OneCheckboxGroup';
+export type { OneCheckboxGroupProps } from './OneCheckboxGroup';

package/dist/form/OneForm.d.ts

@@ -0,0 +1,29 @@
+import { Component, type VNode } from '@geektech/tsone';
+import type { OneNamedStyle } from '../styles/shared';
+import type { OneFormInitialValues, OneFormRules, OneFormValidationResult, OneFormValues } from './context';
+import { OneFormModel } from './model';
+export interface OneFormProps {
+    initialValues?: OneFormInitialValues;
+    rules?: OneFormRules;
+    children?: Array<VNode | string>;
+}
+export interface OneFormSubmitEvent {
+    values: OneFormValues;
+}
+interface OneFormState {
+    revision: number;
+}
+export declare const ONE_FORM_STYLES: OneNamedStyle[];
+export declare class OneForm extends Component<OneFormProps, OneFormState> {
+    readonly model: OneFormModel;
+    constructor(props?: OneFormProps);
+    validate(): OneFormValidationResult;
+    reset(): void;
+    getValues(): OneFormValues;
+    protected initState(): OneFormState;
+    protected initStyles(): void;
+    protected render(): VNode;
+    private handleSubmit;
+    private handleReset;
+}
+export {};

package/dist/form/OneFormItem.d.ts

@@ -0,0 +1,28 @@
+import { Component, type VNode } from '@geektech/tsone';
+import type { OneNamedStyle } from '../styles/shared';
+export interface OneFormItemProps {
+    name: string;
+    label?: string;
+    description?: string;
+    children?: Array<VNode | string>;
+}
+interface OneFormItemState {
+    revision: number;
+}
+export declare const ONE_FORM_ITEM_STYLES: OneNamedStyle[];
+export declare class OneFormItem extends Component<OneFormItemProps, OneFormItemState> {
+    private model;
+    private unsubscribe;
+    private unregister;
+    private fieldSignature;
+    protected initState(): OneFormItemState;
+    protected initStyles(): void;
+    protected beforeMount(): void;
+    protected onMounted(): void;
+    protected onUnmounted(): void;
+    protected render(): VNode;
+    private getFieldContext;
+    private getIds;
+    private getFieldSignature;
+}
+export {};

package/dist/form/context.d.ts

@@ -0,0 +1,30 @@
+import type { InjectionKey } from '@geektech/tsone';
+import type { OneFormModel } from './model';
+export type OneFieldValue = string | boolean | string[];
+export type OneFormValues = Readonly<Record<string, OneFieldValue | undefined>>;
+export type OneFormInitialValues = Readonly<Record<string, OneFieldValue | undefined>>;
+export interface OneFieldValueEvent<TValue extends OneFieldValue> {
+    value: TValue;
+    originalEvent: Event;
+}
+export interface OneValidationRule {
+    required?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: RegExp;
+    message?: string;
+    validator?: (value: OneFieldValue | undefined, values: OneFormValues) => string | undefined;
+}
+export type OneFormRules = Readonly<Record<string, readonly OneValidationRule[] | undefined>>;
+export interface OneFormValidationResult {
+    valid: boolean;
+    errors: Readonly<Record<string, readonly string[]>>;
+}
+export interface OneFormFieldContext {
+    name: string;
+    controlId: string;
+    describedBy: string | undefined;
+    model: OneFormModel;
+}
+export declare const ONE_FORM_MODEL_KEY: InjectionKey<OneFormModel>;
+export declare const ONE_FORM_FIELD_KEY: InjectionKey<OneFormFieldContext>;

package/dist/form/index.d.ts

@@ -0,0 +1,7 @@
+export { OneFormModel } from './model';
+export { OneForm } from './OneForm';
+export type { OneFormProps, OneFormSubmitEvent } from './OneForm';
+export { OneFormItem } from './OneFormItem';
+export type { OneFormItemProps } from './OneFormItem';
+export { ONE_FORM_FIELD_KEY, ONE_FORM_MODEL_KEY, } from './context';
+export type { OneFieldValue, OneFieldValueEvent, OneFormFieldContext, OneFormInitialValues, OneFormRules, OneFormValidationResult, OneFormValues, OneValidationRule, } from './context';

package/dist/form/model.d.ts

@@ -0,0 +1,25 @@
+import type { OneFieldValue, OneFormInitialValues, OneFormRules, OneFormValidationResult, OneFormValues } from './context';
+type OneFormSubscriber = () => void;
+export declare class OneFormModel {
+    private readonly initialValues;
+    private readonly rules;
+    private readonly values;
+    private readonly errors;
+    private readonly fields;
+    private readonly subscribers;
+    constructor(initialValues?: OneFormInitialValues, rules?: OneFormRules);
+    ensureValue(name: string, fallback: OneFieldValue): void;
+    setValue(name: string, value: OneFieldValue): void;
+    getValue(name: string): OneFieldValue | undefined;
+    getValues(): OneFormValues;
+    getErrors(name: string): readonly string[];
+    validate(): OneFormValidationResult;
+    reset(): void;
+    subscribe(listener: OneFormSubscriber): () => void;
+    registerField(name: string, focus: () => void): () => void;
+    focusFirstInvalidField(): boolean;
+    private validateField;
+    private getValidationResult;
+    private notify;
+}
+export {};

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+export type { OneComponentSize } from './types';
+export { OneButton } from './button';
+export type { OneButtonProps, OneButtonVariant } from './button';
+export { OneInput } from './input';
+export type { OneInputProps, OneInputValueEvent } from './input';
+export { OneForm, OneFormItem, OneFormModel } from './form';
+export type { OneFieldValue, OneFieldValueEvent, OneFormInitialValues, OneFormItemProps, OneFormProps, OneFormRules, OneFormSubmitEvent, OneFormValidationResult, OneFormValues, OneValidationRule, } from './form';
+export { OneCheckbox } from './checkbox';
+export type { OneCheckboxGroupProps, OneCheckboxProps } from './checkbox';
+export { OneCheckboxGroup } from './checkbox';
+export { OneSwitch } from './switch';
+export type { OneSwitchProps } from './switch';
+export { OneSelect } from './select';
+export type { OneSelectOption, OneSelectOptionGroup, OneSelectProps } from './select';
+export { ONE_COMPONENT_CATEGORIES } from './categories';
+export type { OneComponentCategory } from './categories';
+export { OneCard } from './card';
+export type { OneCardProps } from './card';
+export { ONE_THEME_DEFAULTS } from './styles/shared';
+export declare const ONE_NAME = "@geektech/one";
+export declare const ONE_VERSION = "0.0.1";