}) => {
6 | return (
7 |
8 | {Object.keys(children).map((key) => {
9 | return createElement(children[key], { key });
10 | })}
11 |
12 | );
13 | };
14 |
15 | describe("icons", () => {
16 | it("icons render", () => {
17 | const { asFragment } = render({icons});
18 | expect(asFragment()).toMatchSnapshot();
19 | });
20 | });
21 |
--------------------------------------------------------------------------------
/src/components/icon/icons/action/open-in-new.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const OpenInNew = withIcon(({ size }) => {
5 | return (
6 |
18 | );
19 | });
20 |
21 | export default OpenInNew;
22 |
--------------------------------------------------------------------------------
/src/components/icon/icons/toggle/star-outline.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const StarOutline = withIcon(({ size }) => {
5 | return (
6 |
12 | );
13 | });
14 |
15 | export default StarOutline;
16 |
--------------------------------------------------------------------------------
/src/types/countdown.ts:
--------------------------------------------------------------------------------
1 | import type { ComponentProps } from "./element";
2 | import type { ButtonProps } from "./button";
3 |
4 | /**
5 | * @description
6 | * countdown props
7 | */
8 | export type CountdownProps = Pick<
9 | ButtonProps,
10 | "children" | "disabled" | "variant" | "color" | "size" | "shape" | "ripple" | "onClick"
11 | > &
12 | ComponentProps & {
13 | /**
14 | * @description
15 | * count total after every trigger
16 | * @default 60
17 | */
18 | count?: number;
19 |
20 | /**
21 | * @description
22 | * interval, unit(ms)
23 | * @default 1000
24 | */
25 | interval?: number;
26 | };
27 |
--------------------------------------------------------------------------------
/src/types/kbd.ts:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from "react";
2 |
3 | export type KbdKey =
4 | | "command"
5 | | "shift"
6 | | "ctrl"
7 | | "option"
8 | | "enter"
9 | | "delete"
10 | | "escape"
11 | | "tab"
12 | | "capslock"
13 | | "up"
14 | | "right"
15 | | "down"
16 | | "left"
17 | | "pageup"
18 | | "pagedown"
19 | | "home"
20 | | "end"
21 | | "help"
22 | | "space";
23 |
24 | export interface KbdProps {
25 | /**
26 | * @description
27 | * The key or keys to be displayed.
28 | */
29 | keys?: KbdKey | KbdKey[];
30 |
31 | /**
32 | * @description
33 | * children
34 | */
35 | children: ReactNode;
36 | }
37 |
--------------------------------------------------------------------------------
/src/types/message.ts:
--------------------------------------------------------------------------------
1 | import type { NotificationConfig, Type } from "../components/notification";
2 |
3 | export type MessageConfig = Omit;
4 |
5 | export type OpenHandler = (config: Omit) => Promise;
6 |
7 | /**
8 | * @author murukal
9 | *
10 | * @description
11 | * messager
12 | */
13 | export type Messager = Record;
14 |
15 | /**
16 | * @description
17 | * typed message
18 | */
19 | export type TypedMessage = {
20 | /**
21 | * @description
22 | * open
23 | */
24 | open: (config: MessageConfig) => Promise;
25 | } & Messager;
26 |
--------------------------------------------------------------------------------
/stories/tabs.stories.ts:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "@storybook/react-vite";
2 | import { Tabs } from "../dist";
3 | import { range } from "@aiszlab/relax";
4 |
5 | const meta: Meta = {
6 | title: "tabs",
7 | component: Tabs,
8 | parameters: {},
9 | tags: ["autodocs"],
10 | };
11 |
12 | export default meta;
13 | type Story = StoryObj;
14 |
15 | export const Scrollable: Story = {
16 | args: {
17 | items: range(0, 30).map((key) => {
18 | return {
19 | key,
20 | label: key.toString(),
21 | children: `panel ${key}`,
22 | };
23 | }),
24 | },
25 | };
26 |
--------------------------------------------------------------------------------
/src/components/icon/icons/editor/format-underlined.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const FormatUnderlined = withIcon(({ size }) => {
5 | return (
6 |
18 | );
19 | });
20 |
21 | export default FormatUnderlined;
22 |
--------------------------------------------------------------------------------
/src/components/icon/icons/alert/error-outline.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const ErrorOutline = withIcon(({ size }) => {
5 | return (
6 |
12 | );
13 | });
14 |
15 | export default ErrorOutline;
16 |
--------------------------------------------------------------------------------
/src/components/tabs/context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from "react";
2 | import type { ContextValue } from "../../types/tabs";
3 |
4 | /**
5 | * @description
6 | * class names
7 | */
8 | export const CLASS_NAMES = {
9 | tabs: "tabs",
10 | navigation: "tabs__navigation",
11 | navigator: "tabs__navigator",
12 | list: "tabs__tab-list",
13 | tab: "tabs__item",
14 | indicator: "tabs__indicator",
15 | panels: "tabs__panels",
16 | panel: "tabs__panel",
17 | } as const;
18 |
19 | export const Context = createContext<
20 | | ContextValue & {
21 | classNames: typeof CLASS_NAMES;
22 | }
23 | >({
24 | items: [],
25 | classNames: CLASS_NAMES,
26 | });
27 |
--------------------------------------------------------------------------------
/src/components/icon/icons/content/clear.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const Redo = withIcon(({ size }) => {
5 | return (
6 |
18 | );
19 | });
20 |
21 | export default Redo;
22 |
--------------------------------------------------------------------------------
/src/components/icon/icons/content/redo.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const Clear = withIcon(({ size }) => {
5 | return (
6 |
18 | );
19 | });
20 |
21 | export default Clear;
22 |
--------------------------------------------------------------------------------
/src/components/icon/icons/action/check-circle.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const CheckCircle = withIcon(({ size }) => {
5 | return (
6 |
12 | );
13 | });
14 |
15 | export default CheckCircle;
16 |
--------------------------------------------------------------------------------
/src/components/icon/icons/action/done-outline.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const DoneOutline = withIcon(({ size }) => {
5 | return (
6 |
18 | );
19 | });
20 |
21 | export default DoneOutline;
22 |
--------------------------------------------------------------------------------
/src/components/icon/icons/content/undo.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const Undo = withIcon(({ size }) => {
5 | return (
6 |
18 | );
19 | });
20 |
21 | export default Undo;
22 |
--------------------------------------------------------------------------------
/src/components/timeline/context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from "react";
2 | import type { ContextValue } from "../../types/timeline";
3 |
4 | /**
5 | * @description
6 | * class names
7 | */
8 | export const CLASS_NAMES = {
9 | timeline: "timeline",
10 | item: "timeline__item",
11 | leading: "timeline__item-leading",
12 | sign: "timeline__item-leading-sign",
13 | dot: "timeline__item-leading-dot",
14 | label: "timeline__item-label",
15 | description: "timeline__item-description",
16 | } as const;
17 |
18 | export const Context = createContext({
19 | mode: "right",
20 | max: 0,
21 | classNames: CLASS_NAMES,
22 | });
23 |
--------------------------------------------------------------------------------
/src/components/icon/icons/image/index.ts:
--------------------------------------------------------------------------------
1 | import Bedtime from "./bedtime";
2 | import WbSunny from "./wb-sunny";
3 | import RotateLeft from "./rotate-left";
4 | import RotateRight from "./rotate-right";
5 | import LooksOne from "./looks-one";
6 | import LooksTwo from "./looks-two";
7 | import LooksThree from "./looks-three";
8 | import LooksFour from "./looks-four";
9 | import LooksFive from "./looks-five";
10 | import LooksSix from "./looks-six";
11 | import Edit from "./edit";
12 |
13 | export {
14 | Bedtime,
15 | RotateLeft,
16 | RotateRight,
17 | WbSunny,
18 | LooksOne,
19 | LooksTwo,
20 | LooksThree,
21 | LooksFour,
22 | LooksFive,
23 | LooksSix,
24 | Edit,
25 | };
26 |
--------------------------------------------------------------------------------
/src/components/icon/icons/image/looks-five.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const LooksFive = withIcon(({ size }) => {
5 | return (
6 |
18 | );
19 | });
20 |
21 | export default LooksFive;
22 |
--------------------------------------------------------------------------------
/stories/dialog.stories.ts:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "@storybook/react-vite";
2 | import { Dialog } from "../dist";
3 |
4 | const meta: Meta = {
5 | title: "dialog",
6 | component: Dialog,
7 | parameters: {},
8 | tags: ["autodocs"],
9 | argTypes: {
10 | open: {
11 | type: "boolean",
12 | },
13 | },
14 | };
15 |
16 | export default meta;
17 | type Story = StoryObj;
18 |
19 | export const Normal: Story = {
20 | args: {
21 | children: "使用一个简单的弹窗",
22 | },
23 | };
24 |
25 | export const WithTitle: Story = {
26 | args: {
27 | title: "标题",
28 | children: "使用一个带有标题的弹窗",
29 | },
30 | };
31 |
--------------------------------------------------------------------------------
/src/types/otp-input.ts:
--------------------------------------------------------------------------------
1 | import type { ComponentProps } from "./element";
2 |
3 | /**
4 | * @description
5 | * otp input props
6 | */
7 | export type OtpInputProps = ComponentProps & {
8 | /**
9 | * @description
10 | * length
11 | * @default 6
12 | */
13 | length?: number;
14 |
15 | /**
16 | * @description
17 | * value change handler
18 | * @default void 0
19 | */
20 | onChange?: (value: string) => void;
21 |
22 | /**
23 | * @description
24 | * value
25 | * @default void 0
26 | */
27 | value?: string;
28 |
29 | // TODO docs
30 | /**
31 | * @description
32 | * invalid
33 | * @default false
34 | */
35 | invalid?: boolean;
36 | };
37 |
--------------------------------------------------------------------------------
/src/components/icon/icons/action/check-circle-outline.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const CheckCircleOutline = withIcon(({ size }) => {
5 | return (
6 |
12 | );
13 | });
14 |
15 | export default CheckCircleOutline;
16 |
--------------------------------------------------------------------------------
/src/components/table/context.ts:
--------------------------------------------------------------------------------
1 | import { createContext, useContext } from "react";
2 | import type { ContextValue } from "../../types/table";
3 |
4 | export const CLASS_NAMES = {
5 | table: "table",
6 | header: "table__header",
7 | body: "table__body",
8 | } as const;
9 |
10 | const Context = createContext & { classNames: typeof CLASS_NAMES }>({
11 | bordered: false,
12 | classNames: CLASS_NAMES,
13 | });
14 |
15 | export { Context };
16 |
17 | /**
18 | * @author murukal
19 | * @description
20 | * use table context hook
21 | */
22 | export const useTable = () => {
23 | return useContext(Context) as ContextValue & { classNames: typeof CLASS_NAMES };
24 | };
25 |
--------------------------------------------------------------------------------
/src/types/space.ts:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from "react";
2 | import type { Gutter } from "../hooks/use-gutters";
3 | import type { ComponentProps } from "./element";
4 |
5 | type Orientation = "horizontal" | "vertical";
6 |
7 | /**
8 | * @description
9 | * space props
10 | */
11 | export type SpaceProps = ComponentProps & {
12 | /**
13 | * @description
14 | * children
15 | * @default void 0
16 | */
17 | children?: ReactNode;
18 |
19 | /**
20 | * @description
21 | * gutter
22 | * @default 4
23 | */
24 | gutter?: Gutter;
25 |
26 | /**
27 | * @description
28 | * orientation
29 | * @default "horizontal"
30 | */
31 | orientation?: Orientation;
32 | };
33 |
--------------------------------------------------------------------------------
/src/components/icon/icons/hardware/speaker_group.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/icon/icons/image/looks-two.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const LooksTwo = withIcon(({ size }) => {
5 | return (
6 |
18 | );
19 | });
20 |
21 | export default LooksTwo;
22 |
--------------------------------------------------------------------------------
/src/components/message/messager.ts:
--------------------------------------------------------------------------------
1 | import { Notification, type Type } from "../notification";
2 | import type { TypedMessage, MessageConfig, OpenHandler } from "../../types/message";
3 |
4 | const METHODS: Type[] = ["error", "info", "loading", "success", "warning"];
5 |
6 | const Message: TypedMessage = Object.assign(
7 | {
8 | open: (message: MessageConfig) => {
9 | Notification.open(message);
10 | },
11 | },
12 | ...METHODS.map((type) => ({
13 | [type]: ((message) => {
14 | return Notification.open({
15 | ...message,
16 | placement: "top",
17 | type,
18 | });
19 | }) satisfies OpenHandler,
20 | })),
21 | );
22 |
23 | export default Message;
24 |
--------------------------------------------------------------------------------
/src/components/transfer/context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from "react";
2 | import type { ContextValue } from "../../types/transfer";
3 |
4 | /**
5 | * @description
6 | * class names
7 | */
8 | export const CLASS_NAMES = {
9 | transfer: "transfer",
10 | operation: "transfer__operation",
11 | list: "transfer__list",
12 | title: "transfer__list-title",
13 | item: "transfer__list-item",
14 | header: "transfer__list-header",
15 | body: "transfer__list-body",
16 | };
17 |
18 | /**
19 | * @description
20 | * transfer context
21 | */
22 | export const Context = createContext({
23 | disabled: false,
24 | classNames: CLASS_NAMES,
25 | });
26 |
--------------------------------------------------------------------------------
/src/components/icon/icons/editor/index.ts:
--------------------------------------------------------------------------------
1 | import FormatBold from "./format-bold";
2 | import FormatItalic from "./format-italic";
3 | import FormatUnderlined from "./format-underlined";
4 | import InsertLink from "./insert-link";
5 | import FormatStrikethrough from "./format-strikethrough";
6 | import Subscript from "./subscript";
7 | import Superscript from "./superscript";
8 | import Notes from "./notes";
9 | import Checklist from "./checklist";
10 | import AttachFile from "./attch-file";
11 |
12 | export {
13 | FormatBold,
14 | FormatItalic,
15 | FormatUnderlined,
16 | InsertLink,
17 | FormatStrikethrough,
18 | Subscript,
19 | Superscript,
20 | Notes,
21 | Checklist,
22 | AttachFile,
23 | };
24 |
--------------------------------------------------------------------------------
/src/components/icon/icons/content/font-download.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const FontDownload = withIcon(({ size }) => {
5 | return (
6 |
18 | );
19 | });
20 |
21 | export default FontDownload;
22 |
--------------------------------------------------------------------------------
/src/components/icon/icons/hardware/videogame_asset.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/progress/progress.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import type { ProgressProps } from "../../types/progress";
3 | import Linear from "./linear";
4 | import Circular from "./circular";
5 | import { useClassNames } from "../../hooks/use-class-names";
6 | import Context, { CLASS_NAMES } from "./context";
7 |
8 | const Progress = ({ variant = "linear", value = 0 }: ProgressProps) => {
9 | const classNames = useClassNames(CLASS_NAMES);
10 |
11 | return (
12 |
13 | {variant === "circular" && }
14 | {variant === "linear" && }
15 |
16 | );
17 | };
18 |
19 | export default Progress;
20 |
--------------------------------------------------------------------------------
/src/types/portal.ts:
--------------------------------------------------------------------------------
1 | import { Voidable } from "@aiszlab/relax/types";
2 | import type { ReactNode } from "react";
3 |
4 | /**
5 | * @description
6 | * portal props
7 | */
8 | export interface PortalProps {
9 | /**
10 | * @description
11 | * children
12 | */
13 | children?: ReactNode;
14 |
15 | /**
16 | * @description
17 | * destroyable
18 | */
19 | destroyable?: boolean;
20 |
21 | /**
22 | * @description
23 | * open
24 | */
25 | open?: boolean;
26 |
27 | /**
28 | * @description
29 | * lockable
30 | */
31 | lockable?: boolean;
32 |
33 | /**
34 | * @description
35 | * container
36 | */
37 | container?: (() => Voidable) | HTMLElement | null;
38 | }
39 |
--------------------------------------------------------------------------------
/src/components/form/hooks/use-form.ts:
--------------------------------------------------------------------------------
1 | import { isUndefined, useUpdateEffect } from "@aiszlab/relax";
2 | import type { UsingForm } from "../../../types/form";
3 | import { type FieldsValue } from "../../../utils/form";
4 | import { useForm as _useForm } from "../use-form";
5 |
6 | /**
7 | * hook for `Form` used internal
8 | */
9 | function useForm({ value, form: _form, ...usingForm }: UsingForm = {}) {
10 | const form = _useForm({ value, form: _form, ...usingForm });
11 |
12 | useUpdateEffect(() => {
13 | if (isUndefined(value)) {
14 | return;
15 | }
16 |
17 | form.setFieldsValue(value);
18 | }, [value, form]);
19 |
20 | return form;
21 | }
22 |
23 | export { useForm };
24 |
--------------------------------------------------------------------------------
/src/components/icon/icons/image/looks-six.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const LooksSix = withIcon(({ size }) => {
5 | return (
6 |
18 | );
19 | });
20 |
21 | export default LooksSix;
22 |
--------------------------------------------------------------------------------
/src/components/icon/icons/action/schedule.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const Schedule = withIcon(({ size }) => {
5 | return (
6 |
18 | );
19 | });
20 |
21 | export default Schedule;
22 |
--------------------------------------------------------------------------------
/src/components/steps/context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from "react";
2 | import type { ContextValue } from "../../types/steps";
3 |
4 | /**
5 | * @description
6 | * class names
7 | */
8 | export const CLASS_NAMES = {
9 | steps: "steps",
10 | item: "steps__item",
11 | done: "steps__item--done",
12 | doing: "steps__item--doing",
13 | todo: "steps__item--todo",
14 | leading: "steps__item-leading",
15 | sign: "steps__item-leading-sign",
16 | title: "steps__item-title",
17 | description: "steps__item-description",
18 | };
19 |
20 | export const Context = createContext({
21 | type: "horizontal",
22 | max: 0,
23 | value: 0,
24 | classNames: CLASS_NAMES,
25 | });
26 |
--------------------------------------------------------------------------------
/src/components/icon/icons/editor/checklist.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const Checklist = withIcon(({ size }) => {
5 | return (
6 |
18 | );
19 | });
20 |
21 | export default Checklist;
22 |
--------------------------------------------------------------------------------
/src/components/icon/icons/image/looks-three.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const LooksThree = withIcon(({ size }) => {
5 | return (
6 |
18 | );
19 | });
20 |
21 | export default LooksThree;
22 |
--------------------------------------------------------------------------------
/src/components/collapse/context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from "react";
2 | import type { ContextValue } from "../../types/collapse";
3 |
4 | export const CLASS_NAMES = {
5 | collapse: "collapse",
6 | item: "collapse__item",
7 | itemActive: "collapse__item--active",
8 | header: "collapse__item-header",
9 | collapser: "collapse__header-collapser",
10 | panel: "collapse__item-panel",
11 | panelActive: "collapse__item-panel--active",
12 | content: "collapse__item-content",
13 | };
14 |
15 | /**
16 | * @description
17 | * `Collapse` Context
18 | */
19 | export const Context = createContext({
20 | activeKeys: new Set(),
21 | toggle: () => {},
22 | classNames: CLASS_NAMES,
23 | });
24 |
--------------------------------------------------------------------------------
/src/components/number-input/hooks.ts:
--------------------------------------------------------------------------------
1 | import { isUndefined, useControlledState, useEvent } from "@aiszlab/relax";
2 |
3 | /**
4 | * @description
5 | * number input value hook
6 | */
7 | export const useValue = ({ value: _value }: { value?: number }) => {
8 | const [value, setValue] = useControlledState(_value?.toString());
9 |
10 | const change = useEvent((___value: string) => {
11 | // ignore invalid character
12 | if (!/^-?(?:\d+)?(\.)?\d*$/.test(___value) && ___value !== "") {
13 | return;
14 | }
15 |
16 | // uncontrolled, change state only
17 | if (isUndefined(_value)) {
18 | setValue(___value);
19 | return;
20 | }
21 | });
22 |
23 | return {
24 | value,
25 | change,
26 | };
27 | };
28 |
--------------------------------------------------------------------------------
/src/locale/use-locale.ts:
--------------------------------------------------------------------------------
1 | import type { Locale, LocaleCode } from "../types/locale";
2 | import { LocaleContext } from "./context";
3 | import { useContext, useMemo } from "react";
4 |
5 | export type LocaleComponentToken = Exclude;
6 |
7 | type UsedLocale = [Locale[C], LocaleCode];
8 |
9 | export const useLocale = (
10 | componentName: C,
11 | ): UsedLocale => {
12 | const localeContextValue = useContext(LocaleContext);
13 |
14 | const locale = useMemo(() => {
15 | return localeContextValue[componentName];
16 | }, [componentName, localeContextValue]);
17 |
18 | return [locale, localeContextValue.locale];
19 | };
20 |
--------------------------------------------------------------------------------
/src/components/icon/icons/editor/superscript.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const Superscript = withIcon(({ size }) => {
5 | return (
6 |
18 | );
19 | });
20 |
21 | export default Superscript;
22 |
--------------------------------------------------------------------------------
/src/components/quote/styles.ts:
--------------------------------------------------------------------------------
1 | import { create as $create } from "@stylexjs/stylex";
2 | import { sizes, spacing } from "../theme/tokens.stylex";
3 | import { type ThemeColorVariable } from "../../hooks/use-theme-color-vars";
4 |
5 | const styles = $create({
6 | quote: {
7 | // reset styles
8 | margin: spacing.none,
9 |
10 | // apply styles
11 | position: "relative",
12 | paddingInlineStart: spacing.medium,
13 |
14 | "::before": {
15 | content: '""',
16 | position: "absolute",
17 | insetBlock: 0,
18 | insetInlineStart: 0,
19 | width: sizes.xxxxxxxxxxsmall,
20 | backgroundColor: "var(--color-outline)" satisfies ThemeColorVariable,
21 | },
22 | },
23 | });
24 |
25 | export default styles;
26 |
--------------------------------------------------------------------------------
/src/components/icon/icons/editor/insert-link.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const InsertLink = withIcon(({ size }) => {
5 | return (
6 |
18 | );
19 | });
20 |
21 | export default InsertLink;
22 |
--------------------------------------------------------------------------------
/src/components/icon/icons/editor/subscript.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const Subscript = withIcon(({ size }) => {
5 | return (
6 |
18 | );
19 | });
20 |
21 | export default Subscript;
22 |
--------------------------------------------------------------------------------
/src/components/icon/icons/hardware/smart_toy.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/icon/icons/navigation/more-horiz.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const MoreHoriz = withIcon(({ size }) => {
5 | return (
6 |
18 | );
19 | });
20 |
21 | export default MoreHoriz;
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | musae
2 |
3 | ## Introduction
4 |
5 | Next-generation UI Component suite for `React`.
6 |
7 | ## 📦 Install
8 |
9 | ```bash
10 | ## use npm
11 | npm install musae
12 |
13 | ## use pnpm
14 | pnpm add musae
15 |
16 | ## use yarn
17 | yarn add musae
18 | ```
19 |
20 | ## Overview
21 |
22 | `musae` is a complete UI suite for `React` consisting of a rich set of UI components, icons, blocks, and application templates.
23 |
24 | ## Theming
25 |
26 | `musae` has powerful theme customization based on CSS-in-JS.
27 |
28 | ## 🔨 Usage
29 |
30 | ```tsx
31 | import React from "react";
32 | import { Button } from "musae";
33 | import "musae/styles.css";
34 |
35 | const App = () => ;
36 |
37 | export default App;
38 | ```
39 |
--------------------------------------------------------------------------------
/src/hooks/use-container.ts:
--------------------------------------------------------------------------------
1 | import { isDomUsable, isFunction } from "@aiszlab/relax";
2 | import type { PortalProps } from "../types/portal";
3 | import { useMemo } from "react";
4 |
5 | /**
6 | * @description
7 | * container
8 | */
9 | export const useContainer = ({
10 | container,
11 | useBody = true,
12 | }: {
13 | container: PortalProps["container"];
14 | useBody?: boolean;
15 | }) => {
16 | const _container =
17 | (isFunction(container) ? container() : container) ??
18 | (isDomUsable() && useBody ? document.body : null);
19 |
20 | const isDocumentBody = useMemo(() => {
21 | return isDomUsable() && _container === document.body;
22 | }, [_container]);
23 |
24 | return {
25 | container: _container,
26 | isDocumentBody,
27 | };
28 | };
29 |
--------------------------------------------------------------------------------
/src/components/icon/icons/image/edit.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const Edit = withIcon(({ size }) => {
5 | return (
6 |
18 | );
19 | });
20 |
21 | export default Edit;
22 |
--------------------------------------------------------------------------------
/src/types/loading.ts:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from "react";
2 | import type { ComponentProps } from "./element";
3 |
4 | type Size = "small" | "medium" | "large";
5 |
6 | /**
7 | * @author murukal
8 | *
9 | * @description
10 | * loading props
11 | */
12 | export type LoadingProps = ComponentProps & {
13 | /**
14 | * @description
15 | * size
16 | * @default "medium"
17 | */
18 | size?: Size;
19 |
20 | /**
21 | * @description
22 | * overlay shown
23 | * @default true
24 | */
25 | overlay?: boolean;
26 |
27 | /**
28 | * @description
29 | * children
30 | * @default void 0
31 | */
32 | children?: ReactNode;
33 |
34 | /**
35 | * @description
36 | * loading
37 | * @default true
38 | */
39 | loading?: boolean;
40 | };
41 |
--------------------------------------------------------------------------------
/src/types/progress.ts:
--------------------------------------------------------------------------------
1 | import type { RequiredIn } from "@aiszlab/relax/types";
2 | import type { ComponentProps } from "./element";
3 |
4 | type Variant = "linear" | "circular";
5 |
6 | /**
7 | * @description
8 | * `Progress` props
9 | */
10 | export type ProgressProps = ComponentProps & {
11 | /**
12 | * @description
13 | * variant
14 | */
15 | variant?: Variant;
16 |
17 | /**
18 | * @description
19 | * value
20 | */
21 | value?: number;
22 | };
23 |
24 | /**
25 | * @description
26 | * `Circular` Props
27 | */
28 | export type CircularProps = RequiredIn<
29 | Pick,
30 | "value"
31 | >;
32 |
33 | /**
34 | * @description
35 | * `Linear` Props
36 | */
37 | export type LinearProps = CircularProps;
38 |
--------------------------------------------------------------------------------
/src/components/bench/context.ts:
--------------------------------------------------------------------------------
1 | import { using } from "@aiszlab/relax/react";
2 |
3 | /**
4 | * @description class names
5 | */
6 | export const CLASS_NAMES = {
7 | bench: "bench",
8 | heading: "bench__heading",
9 | header: "bench__header",
10 | trailing: "bench__header-trailing",
11 | sidebar: "bench__sidebar",
12 | expander: "bench__expander",
13 | main: "bench__main",
14 | };
15 |
16 | /**
17 | * @description global store
18 | */
19 | export const useStore = using<{
20 | isCollapsed: boolean;
21 | collapse: VoidFunction;
22 | expand: VoidFunction;
23 | }>((setState) => ({
24 | isCollapsed: false,
25 | collapse: () => setState((prev) => ({ ...prev, isCollapsed: true })),
26 | expand: () => setState((prev) => ({ ...prev, isCollapsed: false })),
27 | }));
28 |
--------------------------------------------------------------------------------
/src/components/icon/icons/navigation/cancel.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const Cancel = withIcon(({ size }) => {
5 | return (
6 |
18 | );
19 | });
20 |
21 | export default Cancel;
22 |
--------------------------------------------------------------------------------
/src/components/icon/icons/hardware/earbuds_battery.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/types/badge.ts:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from "react";
2 | import type { ComponentProps } from "../types/element";
3 |
4 | type Placement = "top-right" | "top-left" | "bottom-right" | "bottom-left";
5 |
6 | /**
7 | * @description
8 | * badge props
9 | */
10 | export type BadgeProps = ComponentProps & {
11 | /**
12 | * @description
13 | * children
14 | * @requires
15 | */
16 | children: ReactNode;
17 |
18 | /**
19 | * @description
20 | * content
21 | * @default void 0
22 | */
23 | content?: ReactNode;
24 |
25 | /**
26 | * @description
27 | * invisible
28 | * @default false
29 | */
30 | invisible?: boolean;
31 |
32 | /**
33 | * @description
34 | * placement
35 | * @default "top-right"
36 | */
37 | placement?: Placement;
38 | };
39 |
--------------------------------------------------------------------------------
/src/components/tree/context.ts:
--------------------------------------------------------------------------------
1 | import { Key, createContext } from "react";
2 | import { ContextValue } from "../../types/tree";
3 |
4 | /**
5 | * @description
6 | * class names
7 | */
8 | const CLASS_NAMES = {
9 | tree: "tree",
10 | list: "tree__list",
11 | listHidden: "tree__list--hidden",
12 | holder: "tree__holder",
13 | node: "tree__node",
14 | title: "tree__node-title",
15 | expander: "tree__node-expander",
16 | checkbox: "tree__node-checkbox",
17 | };
18 |
19 | const Context = createContext({
20 | checkedKeys: new Set(),
21 | expandedKeys: new Set(),
22 | selectedKeys: new Set(),
23 | selectable: true,
24 | classNames: CLASS_NAMES,
25 | });
26 |
27 | export default Context;
28 | export { CLASS_NAMES };
29 |
--------------------------------------------------------------------------------
/stories/layout.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "@storybook/react-vite";
2 | import { Layout } from "../dist";
3 | import React from "react";
4 |
5 | const meta: Meta = {
6 | title: "layout",
7 | component: Layout,
8 | parameters: {},
9 | tags: ["autodocs"],
10 | argTypes: {},
11 | };
12 |
13 | export default meta;
14 | type Story = StoryObj;
15 |
16 | export const Normal: Story = {
17 | args: {
18 | children: [
19 | heading,
20 | header,
21 | sidebar,
22 | main,
23 | footer,
24 | ],
25 | },
26 | };
27 |
--------------------------------------------------------------------------------
/src/components/icon/icons/action/translate.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const Translate = withIcon(({ size }) => {
5 | return (
6 |
18 | );
19 | });
20 |
21 | export default Translate;
22 |
--------------------------------------------------------------------------------
/src/components/icon/icons/alert/add-alert.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const AddAlert = withIcon(({ size }) => {
5 | return (
6 |
12 | );
13 | });
14 |
15 | export default AddAlert;
16 |
--------------------------------------------------------------------------------
/src/utils/react.ts:
--------------------------------------------------------------------------------
1 | import { Partialable } from "@aiszlab/relax/types";
2 | import { Children, isValidElement, type ReactNode } from "react";
3 |
4 | interface ElementProps {
5 | children?: ReactNode;
6 | }
7 |
8 | /**
9 | * @description
10 | * get the string of component children
11 | */
12 | export const toReactNodeText = (children: ReactNode): Partialable => {
13 | const _children = Children.toArray(children);
14 |
15 | for (const child of _children) {
16 | if (typeof child === "string" || typeof child === "number") {
17 | return child.toString();
18 | }
19 |
20 | if (isValidElement(child)) {
21 | const textInChild = toReactNodeText(child.props.children);
22 |
23 | if (textInChild) {
24 | return textInChild;
25 | }
26 | }
27 | }
28 | };
29 |
--------------------------------------------------------------------------------
/src/types/time-picker.ts:
--------------------------------------------------------------------------------
1 | import type { Dayjs } from "dayjs";
2 | import type { ComponentProps } from "./element";
3 |
4 | /**
5 | * @description
6 | * time picker props
7 | */
8 | export interface TimePickerProps extends ComponentProps {
9 | /**
10 | * @description
11 | * value
12 | * @default void 0
13 | */
14 | value?: Dayjs;
15 |
16 | /**
17 | * @description
18 | * change handler
19 | * @default void 0
20 | */
21 | onChange?: (value: Dayjs) => void;
22 | }
23 |
24 | /**
25 | * @description
26 | * panel props
27 | */
28 | export type PanelProps = Pick;
29 |
30 | /**
31 | * @description
32 | * panel ref
33 | */
34 | export type PanelRef = {
35 | /**
36 | * @description
37 | * value reset handler
38 | */
39 | reset: () => void;
40 | };
41 |
--------------------------------------------------------------------------------
/src/components/form/list/index.tsx:
--------------------------------------------------------------------------------
1 | import { type TypedFormList, type FormListProps } from "../../../types/form";
2 | import { type FieldsValue } from "../../../utils/form";
3 | import React from "react";
4 | import { List } from "./list";
5 | import Item from "../item";
6 | import { Item as ListItem } from "./item";
7 |
8 | /**
9 | * wrapped `Form.List` Component
10 | */
11 | function _List({
12 | children,
13 | ...itemProps
14 | }: FormListProps) {
15 | // no render, return null
16 | if (!children) return null;
17 |
18 | return (
19 | -
20 |
{children}
21 |
22 | );
23 | }
24 |
25 | const TypedList: TypedFormList = Object.assign(_List, {
26 | Item: ListItem,
27 | });
28 |
29 | export default TypedList;
30 |
--------------------------------------------------------------------------------
/src/types/ripple.ts:
--------------------------------------------------------------------------------
1 | import type { Key } from "react";
2 |
3 | /**
4 | * @description
5 | * ripple
6 | */
7 | export type Ripple = {
8 | /**
9 | * @description
10 | * uuid,for list render
11 | */
12 | key: Key;
13 |
14 | /**
15 | * @description
16 | * trigger position x
17 | */
18 | x: number;
19 |
20 | /**
21 | * @description
22 | * trigger position y
23 | */
24 | y: number;
25 |
26 | /**
27 | * @description
28 | * ripple size
29 | */
30 | size: number;
31 | };
32 |
33 | /**
34 | * @description
35 | * ripple props
36 | */
37 | export type RippleProps = {
38 | /**
39 | * @description
40 | * rendered ripples
41 | */
42 | ripples: Ripple[];
43 |
44 | /**
45 | * @description
46 | * clear ripple handler
47 | */
48 | onClear: (key: Key) => void;
49 | };
50 |
--------------------------------------------------------------------------------
/src/components/menu/context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from "react";
2 | import { type ContextValue } from "../../types/menu";
3 |
4 | /**
5 | * @description
6 | * class names
7 | */
8 | export const CLASS_NAMES = {
9 | menu: "menu",
10 | horizontal: "menu--horizontal",
11 | group: "menu__group",
12 | hidden: "menu__group--hidden",
13 | collapser: "menu__collapser",
14 | item: "menu__item",
15 | } as const;
16 |
17 | /**
18 | * @author murukal
19 | *
20 | * @description
21 | * menu context for all menu group or menu item
22 | */
23 | export const Context = createContext({
24 | selectedKeys: new Set(),
25 | expandedKeys: new Set(),
26 | click: () => {},
27 | toggle: () => {},
28 | collect: () => {},
29 | size: "medium",
30 | classNames: CLASS_NAMES,
31 | });
32 |
--------------------------------------------------------------------------------
/src/components/icon/icons/editor/attch-file.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const AttachFile = withIcon(({ size }) => {
5 | return (
6 |
18 | );
19 | });
20 |
21 | export default AttachFile;
22 |
--------------------------------------------------------------------------------
/src/types/waterfall.ts:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from "react";
2 | import type { ComponentProps } from "./element";
3 | import type { Gutter } from "../hooks/use-gutters";
4 |
5 | /**
6 | * @description
7 | * waterfall props
8 | */
9 | export type WaterfallProps = ComponentProps & {
10 | /**
11 | * @description
12 | * columns
13 | * @default 4
14 | */
15 | columns?: number;
16 |
17 | /**
18 | * @description
19 | * gutter
20 | * @default 8
21 | */
22 | gutter?: Gutter;
23 |
24 | /**
25 | * @description
26 | * items
27 | * @default void 0
28 | */
29 | children?: Exclude>[];
30 |
31 | /**
32 | * @description
33 | * sequential
34 | * use list order rather than add to the shortest column
35 | * @default false
36 | */
37 | sequential?: boolean;
38 | };
39 |
--------------------------------------------------------------------------------
/src/components/icon/icons/alert/notification-important.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const NotificationImportant = withIcon(({ size }) => {
5 | return (
6 |
12 | );
13 | });
14 |
15 | export default NotificationImportant;
16 |
--------------------------------------------------------------------------------
/src/components/icon/icons/editor/format-bold.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const FormatBold = withIcon(({ size }) => {
5 | return (
6 |
18 | );
19 | });
20 |
21 | export default FormatBold;
22 |
--------------------------------------------------------------------------------
/src/components/slider/handle.tsx:
--------------------------------------------------------------------------------
1 | import { create as $create, props as $props } from "@stylexjs/stylex";
2 | import { sizes } from "../theme/tokens.stylex";
3 | import { useContext } from "react";
4 | import Context from "./context";
5 | import { stringify } from "@aiszlab/relax/class-name";
6 | import React from "react";
7 |
8 | const _styles = $create({
9 | default: {
10 | width: sizes.xxxxxxxxxsmall,
11 | height: sizes.xxlarge,
12 | borderRadius: sizes.infinity,
13 | backgroundColor: "var(--color-primary)",
14 | },
15 | });
16 |
17 | /**
18 | * @description 滑块句柄
19 | */
20 | const Handle = () => {
21 | const { classNames } = useContext(Context);
22 | const styled = $props(_styles.default);
23 |
24 | return ;
25 | };
26 |
27 | export default Handle;
28 |
--------------------------------------------------------------------------------
/src/components/tooltip/tooltip.tsx:
--------------------------------------------------------------------------------
1 | import type { TooltipProps } from "../../types/tooltip";
2 | import React from "react";
3 | import { Popover } from "../popover";
4 | import { stringify } from "@aiszlab/relax/class-name";
5 | import { useClassNames } from "../../hooks/use-class-names";
6 | import { CLASS_NAMES } from "./context";
7 |
8 | const Tooltip = ({ children, className, style, title }: TooltipProps) => {
9 | const classNames = useClassNames(CLASS_NAMES);
10 |
11 | // when `title` is invalid, use children only
12 | if (!title) {
13 | return children;
14 | }
15 |
16 | // `Tooltip` title is used into `Popover` content!!! not a bug!
17 | return (
18 |
19 | {children}
20 |
21 | );
22 | };
23 |
24 | export default Tooltip;
25 |
--------------------------------------------------------------------------------
/src/components/popover/hooks.ts:
--------------------------------------------------------------------------------
1 | import { toArray } from "@aiszlab/relax";
2 | import { useMemo } from "react";
3 | import type { TriggerBy } from "../../types/popover";
4 |
5 | /**
6 | * @description
7 | * used triggers
8 | */
9 | export const useTriggerBy = (triggerBy: TriggerBy | TriggerBy[]) => {
10 | const _triggerBy = useMemo(() => new Set(toArray(triggerBy)), [triggerBy]);
11 |
12 | const isHoverable = useMemo(() => _triggerBy.has("hover"), [_triggerBy]);
13 |
14 | const isFocusable = useMemo(() => _triggerBy.has("focus"), [_triggerBy]);
15 |
16 | const isClickable = useMemo(() => _triggerBy.has("click"), [_triggerBy]);
17 |
18 | const isContextMenuable = useMemo(() => _triggerBy.has("contextMenu"), [_triggerBy]);
19 |
20 | return {
21 | isHoverable,
22 | isFocusable,
23 | isClickable,
24 | isContextMenuable,
25 | };
26 | };
27 |
--------------------------------------------------------------------------------
/src/components/form/field/supporting.tsx:
--------------------------------------------------------------------------------
1 | import React, { type ReactNode } from "react";
2 | import { create as $create, props as $props } from "@stylexjs/stylex";
3 | import { useTheme } from "../../theme";
4 | import { spacing } from "../../theme/tokens.stylex";
5 |
6 | const styles = $create({
7 | supporting: {
8 | color: "var(--color-secondary)",
9 | marginBlock: spacing.xxxxxsmall,
10 | },
11 | });
12 |
13 | const Supporting = ({ children }: { children?: ReactNode }) => {
14 | const theme = useTheme();
15 |
16 | const styled = $props(styles.supporting);
17 |
18 | return (
19 |
26 | {children}
27 |
28 | );
29 | };
30 |
31 | export default Supporting;
32 |
--------------------------------------------------------------------------------
/src/types/divider.ts:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from "react";
2 | import type { ComponentProps } from "./element";
3 | import type { Gutter } from "../hooks/use-gutters";
4 |
5 | export type Align = "center" | "left" | "right";
6 |
7 | export type Orientation = "horizontal" | "vertical";
8 |
9 | /**
10 | * @description
11 | * divider props
12 | */
13 | export interface DividerProps extends ComponentProps {
14 | /**
15 | * @description
16 | * children
17 | * @default void 0
18 | */
19 | children?: ReactNode;
20 |
21 | /**
22 | * @description
23 | * align
24 | * @default "center"
25 | */
26 | align?: Align;
27 |
28 | /**
29 | * @description
30 | * orientation
31 | * @default "horizontal"
32 | */
33 | orientation?: Orientation;
34 |
35 | /**
36 | * @description
37 | * margin
38 | */
39 | margin?: Gutter;
40 | }
41 |
--------------------------------------------------------------------------------
/src/components/icon/icons/hardware/keyboard_command_key.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/icon/icons/image/bedtime.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const Bedtime = withIcon(({ size }) => {
5 | return (
6 |
18 | );
19 | });
20 |
21 | export default Bedtime;
22 |
--------------------------------------------------------------------------------
/src/components/icon/icons/device/dark-mode.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const DarkMode = withIcon(({ size }) => {
5 | return (
6 |
18 | );
19 | });
20 |
21 | export default DarkMode;
22 |
--------------------------------------------------------------------------------
/src/types/popconfirm.ts:
--------------------------------------------------------------------------------
1 | import type { DOMAttributes, ReactNode, RefAttributes } from "react";
2 | import type { PopoverProps } from "../components/popover";
3 | import type { ComponentProps } from "./element";
4 |
5 | export type ChildProps = Pick, "onClick"> & RefAttributes;
6 |
7 | /**
8 | * @description
9 | * popconfirm props
10 | */
11 | export type PopconfirmProps = Pick<
12 | PopoverProps>,
13 | "placement" | "title" | "content" | "offset"
14 | > &
15 | ComponentProps & {
16 | /**
17 | * @description
18 | * confirm handler
19 | */
20 | onConfirm?: () => void;
21 |
22 | /**
23 | * @description
24 | * cancel handler
25 | */
26 | onCancel?: () => void;
27 |
28 | /**
29 | * @description
30 | * children
31 | */
32 | children?: ReactNode;
33 | };
34 |
--------------------------------------------------------------------------------
/src/components/icon/icons/action/visibility.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const Visibility = withIcon(({ size }) => {
5 | return (
6 |
12 | );
13 | });
14 |
15 | export default Visibility;
16 |
--------------------------------------------------------------------------------
/src/components/icon/icons/hardware/videogame_asset_off.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/icon/icons/file/file-upload.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const FileUpload = withIcon(({ size }) => {
5 | return (
6 |
18 | );
19 | });
20 |
21 | export default FileUpload;
22 |
--------------------------------------------------------------------------------
/src/types/tag.ts:
--------------------------------------------------------------------------------
1 | import type { MouseEvent, ReactNode } from "react";
2 | import type { ComponentProps } from "./element";
3 |
4 | type Size = "small" | "medium" | "large";
5 |
6 | /**
7 | * @description
8 | * tag props
9 | */
10 | export type TagProps = ComponentProps & {
11 | /**
12 | * @description
13 | * children
14 | * @default void 0
15 | */
16 | children?: ReactNode;
17 |
18 | /**
19 | * @description
20 | * size
21 | * @default "medium"
22 | */
23 | size?: Size;
24 |
25 | /**
26 | * @description
27 | * if current tag is closable
28 | * @default false
29 | */
30 | closable?: boolean;
31 |
32 | /**
33 | * @description
34 | * close handler
35 | */
36 | onClose?: (event: MouseEvent) => void;
37 |
38 | /**
39 | * @description
40 | * leading node
41 | * @default void 0
42 | */
43 | leading?: ReactNode;
44 | };
45 |
--------------------------------------------------------------------------------
/src/components/icon/icons/alert/auto-delete.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const AutoDelete = withIcon(({ size }) => {
5 | return (
6 |
14 | );
15 | });
16 |
17 | export default AutoDelete;
18 |
--------------------------------------------------------------------------------
/src/components/form/hooks/use-watch.ts:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { FORM_TOKEN, type FieldsValue } from "../../../utils/form";
3 | import { useFormContext } from "../context";
4 | import { useMounted } from "@aiszlab/relax";
5 | import type { UsedForm } from "../../../types/form";
6 |
7 | /**
8 | * @description watch form item
9 | */
10 | export const useWatch = (
11 | name: FieldKey,
12 | usedForm?: UsedForm,
13 | ) => {
14 | const [value, setValue] = useState();
15 | const { form } = useFormContext();
16 |
17 | useMounted(() => {
18 | if (!name) return;
19 |
20 | const unregister = (usedForm?.[FORM_TOKEN] ?? form)?.watch(name, (_changedValue) => {
21 | setValue(_changedValue);
22 | });
23 |
24 | return () => {
25 | unregister?.();
26 | };
27 | });
28 |
29 | return value;
30 | };
31 |
--------------------------------------------------------------------------------
/src/types/textarea.ts:
--------------------------------------------------------------------------------
1 | import type { TextareaHTMLAttributes } from "react";
2 | import type { ComponentProps } from "./element";
3 |
4 | /**
5 | * @description
6 | * textarea props
7 | */
8 | export type TextareaProps = ComponentProps &
9 | Pick, "onBlur" | "placeholder"> & {
10 | /**
11 | * @description
12 | * value
13 | */
14 | value?: string;
15 |
16 | /**
17 | * @description
18 | * invalid
19 | * @default false
20 | */
21 | invalid?: boolean;
22 |
23 | /**
24 | * @description
25 | * value change handler
26 | */
27 | onChange?: (value: string) => void;
28 |
29 | /**
30 | * @description
31 | * resize
32 | * when `true`, show `resize`
33 | * @default true
34 | */
35 | resize?: boolean;
36 |
37 | /**
38 | * border
39 | */
40 | border?: boolean;
41 | };
42 |
--------------------------------------------------------------------------------
/src/components/theme/theme-provider.tsx:
--------------------------------------------------------------------------------
1 | import React, { useMemo } from "react";
2 | import type { Props, Theme } from "../../types/theme";
3 | import { Context, PALETTE, useSwitchable } from "./hooks";
4 | import { merge } from "@aiszlab/relax";
5 |
6 | /**
7 | * @author murukal
8 | *
9 | * @description
10 | * theme provider
11 | * if user provider theme, we will merge it with presets theme
12 | */
13 | const ThemeProvider = ({ theme: _theme, children }: Props) => {
14 | const theme = useMemo(() => {
15 | if (!_theme) {
16 | return {
17 | palette: PALETTE,
18 | };
19 | }
20 |
21 | return merge(_theme, {
22 | palette: PALETTE,
23 | });
24 | }, [_theme]);
25 |
26 | const { mode, toggle, colors } = useSwitchable({ theme });
27 |
28 | return {children};
29 | };
30 |
31 | export default ThemeProvider;
32 |
--------------------------------------------------------------------------------
/src/types/clock.ts:
--------------------------------------------------------------------------------
1 | import type { ComponentProps } from "./element";
2 |
3 | export type TimeUnit = "hour" | "minute" | "second";
4 |
5 | type Value = [number, number, number];
6 |
7 | /**
8 | * @description
9 | * clock props
10 | */
11 | export type ClockProps = ComponentProps & {
12 | /**
13 | * @description
14 | * value
15 | * @default void 0
16 | */
17 | value?: Value;
18 |
19 | /**
20 | * @description
21 | * change handler
22 | * @default void 0
23 | */
24 | onChange?: (value: Value) => void;
25 | };
26 |
27 | /**
28 | * @description
29 | * column props
30 | */
31 | export interface ColumnProps {
32 | /**
33 | * @description
34 | * value
35 | */
36 | value?: number;
37 |
38 | /**
39 | * @description
40 | * unit
41 | */
42 | unit: TimeUnit;
43 |
44 | /**
45 | * @description
46 | * change handler
47 | */
48 | onChange?: (value: number) => void;
49 | }
50 |
--------------------------------------------------------------------------------
/src/components/time-picker/hooks.ts:
--------------------------------------------------------------------------------
1 | import { useControlledState } from "@aiszlab/relax";
2 | import type { TimePickerProps } from "../../types/time-picker";
3 | import dayjs from "dayjs";
4 | import { type RefObject, useCallback } from "react";
5 | import type { PickerRef } from "../../types/picker";
6 | import type { Nullable } from "@aiszlab/relax/types";
7 |
8 | /**
9 | * @description
10 | * value
11 | */
12 | export const useValue = ([valueInProps, pickerRef]: [
13 | TimePickerProps["value"],
14 | RefObject>,
15 | ]) => {
16 | const [value, setValue] = useControlledState(valueInProps, { defaultState: dayjs() });
17 |
18 | const onChange = useCallback["onChange"]>(
19 | (value) => {
20 | setValue(value);
21 | pickerRef.current?.close();
22 | },
23 | [setValue, pickerRef],
24 | );
25 |
26 | return {
27 | value,
28 | onChange,
29 | };
30 | };
31 |
--------------------------------------------------------------------------------
/src/components/tour/hooks.ts:
--------------------------------------------------------------------------------
1 | import { useCounter } from "@aiszlab/relax";
2 | import type { TourStep } from "../../types/tour";
3 | import { useEffect } from "react";
4 |
5 | /**
6 | * @description
7 | * use step
8 | */
9 | export const useStep = ({ steps, open }: { steps: TourStep[]; open: boolean }) => {
10 | const [stepAt, { add, subtract, reset }] = useCounter(0, { min: 0, max: steps.length - 1 });
11 | const step = steps[stepAt];
12 | const hasNext = stepAt < steps.length - 1;
13 | const hasPrev = stepAt > 0;
14 |
15 | const next = () => {
16 | add();
17 | };
18 |
19 | const prev = () => {
20 | subtract();
21 | };
22 |
23 | useEffect(() => {
24 | if (open) {
25 | reset();
26 | return;
27 | }
28 | // eslint-disable-next-line react-hooks/exhaustive-deps
29 | }, [open]);
30 |
31 | return {
32 | step,
33 | hasNext,
34 | hasPrev,
35 | next,
36 | prev,
37 | };
38 | };
39 |
--------------------------------------------------------------------------------
/src/components/icon/icons/hardware/headset_off.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/icon/icons/hardware/developer_board_off.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/date-picker/hooks.ts:
--------------------------------------------------------------------------------
1 | import { useControlledState } from "@aiszlab/relax";
2 | import type { DatePickerProps } from "../../types/date-picker";
3 | import { type RefObject, useCallback } from "react";
4 | import type { PickerRef } from "../../types/picker";
5 | import type { Nullable } from "@aiszlab/relax/types";
6 |
7 | /**
8 | * @description
9 | * value
10 | */
11 | export const useValue = ([_value, _change, _ref]: [
12 | DatePickerProps["value"],
13 | DatePickerProps["onChange"],
14 | RefObject>,
15 | ]) => {
16 | const [value, setValue] = useControlledState(_value);
17 |
18 | // change handler
19 | const onChange = useCallback["onChange"]>(
20 | (_value) => {
21 | setValue(_value);
22 | _change?.(_value);
23 | _ref.current?.close();
24 | },
25 | [_change, setValue, _ref],
26 | );
27 |
28 | return {
29 | value,
30 | onChange,
31 | };
32 | };
33 |
--------------------------------------------------------------------------------
/src/components/icon/icons/action/preview.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const Preview = withIcon(({ size }) => {
5 | return (
6 |
18 | );
19 | });
20 |
21 | export default Preview;
22 |
--------------------------------------------------------------------------------
/src/components/radio/group.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useMemo } from "react";
2 | import { Context } from "./context";
3 | import type { ContextValue, RadioGroupProps } from "../../types/radio";
4 | import { useControlledState } from "@aiszlab/relax";
5 |
6 | const Group = ({ disabled = false, children, ...props }: RadioGroupProps) => {
7 | // controlled value
8 | const [value, setValue] = useControlledState(props.value);
9 |
10 | // value change handler
11 | const change = useCallback(
12 | (value) => {
13 | setValue(value);
14 | },
15 | [setValue],
16 | );
17 |
18 | // context value
19 | const contextValue = useMemo(
20 | () => ({
21 | value,
22 | change,
23 | isDisabled: disabled,
24 | }),
25 | [value, change, disabled],
26 | );
27 |
28 | return {children};
29 | };
30 |
31 | export default Group;
32 |
--------------------------------------------------------------------------------
/src/components/number-input/number-input.tsx:
--------------------------------------------------------------------------------
1 | import React, { useMemo } from "react";
2 | import { Input } from "../input";
3 | import { useEvent, useFocus } from "@aiszlab/relax";
4 | import { useValue } from "./hooks";
5 | import type { NumberInputProps } from "../../types/number-input";
6 |
7 | const NumberInput = ({ value: __value, formatter: _formatter }: NumberInputProps) => {
8 | const [isFocused, focusProps] = useFocus();
9 | const { value: _value, change } = useValue({ value: __value });
10 |
11 | // formatter
12 | const formatter = useEvent((value?: string) => {
13 | if (!_formatter) return _value;
14 | formatter(value);
15 | });
16 |
17 | const value = useMemo(() => {
18 | if (isFocused) {
19 | return _value;
20 | }
21 | return formatter(_value);
22 | }, [isFocused, formatter, _value]);
23 |
24 | return ;
25 | };
26 |
27 | export default NumberInput;
28 |
--------------------------------------------------------------------------------
/src/components/icon/icons/action/zoom-out.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const ZoomOut = withIcon(({ size }) => {
5 | return (
6 |
12 | );
13 | });
14 |
15 | export default ZoomOut;
16 |
--------------------------------------------------------------------------------
/src/components/icon/icons/content/link-off.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withIcon } from "../../hoc";
3 |
4 | const LinkOff = withIcon(({ size }) => {
5 | return (
6 |
18 | );
19 | });
20 |
21 | export default LinkOff;
22 |
--------------------------------------------------------------------------------
/src/components/kbd/utils.ts:
--------------------------------------------------------------------------------
1 | import type { KbdKey } from "../../types/kbd";
2 |
3 | export const KBD_KEYS: Record = {
4 | command: "⌘",
5 | shift: "⇧",
6 | ctrl: "⌃",
7 | option: "⌥",
8 | enter: "↵",
9 | delete: "⌫",
10 | escape: "⎋",
11 | tab: "⇥",
12 | capslock: "⇪",
13 | up: "↑",
14 | right: "→",
15 | down: "↓",
16 | left: "←",
17 | pageup: "⇞",
18 | pagedown: "⇟",
19 | home: "↖",
20 | end: "↘",
21 | help: "?",
22 | space: "␣",
23 | };
24 |
25 | export const KBD_LABELS: Record = {
26 | command: "Command",
27 | shift: "Shift",
28 | ctrl: "Control",
29 | option: "Option",
30 | enter: "Enter",
31 | delete: "Delete",
32 | escape: "Escape",
33 | tab: "Tab",
34 | capslock: "Caps Lock",
35 | up: "Up",
36 | right: "Right",
37 | down: "Down",
38 | left: "Left",
39 | pageup: "Page Up",
40 | pagedown: "Page Down",
41 | home: "Home",
42 | end: "End",
43 | help: "Help",
44 | space: "Space",
45 | };
46 |
--------------------------------------------------------------------------------
/stories/upload.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "@storybook/react-vite";
2 | import { Upload } from "../dist";
3 |
4 | const meta: Meta = {
5 | title: "upload",
6 | component: Upload,
7 | parameters: {},
8 | tags: ["autodocs"],
9 | argTypes: {},
10 | };
11 |
12 | export default meta;
13 | type Story = StoryObj;
14 |
15 | export const Normal: Story = {
16 | args: {
17 | renderItem: "picture",
18 | value: [
19 | {
20 | status: "success",
21 | url: "https://fantu-1304340057.cos.ap-shanghai.myqcloud.com/stack-logos/4eddf664-1bb3-4cc1-800d-518aa5e884fe",
22 | },
23 | ],
24 | multiple: true,
25 | },
26 | };
27 |
28 | export const PictureFallback: Story = {
29 | args: {
30 | renderItem: "picture",
31 | value: [
32 | {
33 | status: "success",
34 | url: "invalid-url",
35 | },
36 | ],
37 | multiple: true,
38 | },
39 | };
40 |
--------------------------------------------------------------------------------
/src/components/config/provider.tsx:
--------------------------------------------------------------------------------
1 | import React, { useMemo, useRef } from "react";
2 | import Context from "./context";
3 | import { Holder, type HolderRef } from "../notification";
4 | import type { ConfigProps } from "../../types/config";
5 | import { LocaleContext, DEFAULT_LOCALE } from "../../locale";
6 | import { merge } from "@aiszlab/relax";
7 |
8 | const ConfigProvider = ({ children, prefix = "musae", locale: _locale }: ConfigProps) => {
9 | const notifierRef = useRef(null);
10 |
11 | const locale = useMemo(() => {
12 | return merge(DEFAULT_LOCALE, _locale ?? {});
13 | }, [_locale]);
14 |
15 | return (
16 |
22 |
23 | {children}
24 |
25 |
26 |
27 | );
28 | };
29 |
30 | export default ConfigProvider;
31 |
--------------------------------------------------------------------------------