= (args) => (
11 |
12 |
13 | Link
14 |
15 | Link
16 |
17 | )
18 |
--------------------------------------------------------------------------------
/apps/storybook/stories/loading/loading.stories.tsx:
--------------------------------------------------------------------------------
1 | import { Meta, StoryFn } from "@storybook/react"
2 | import { Loading, LoadingProps } from "@illa-design/react"
3 |
4 | export default {
5 | title: "GENERAL/Loading",
6 | component: Loading,
7 | } as Meta
8 |
9 | const Template: StoryFn = (args) => {
10 | return
11 | }
12 |
13 | export const Basic = Template.bind({})
14 |
--------------------------------------------------------------------------------
/apps/storybook/stories/popconfirm/popconfirm.stories.tsx:
--------------------------------------------------------------------------------
1 | import { Meta, StoryFn } from "@storybook/react"
2 | import { Button, PopConfirm, PopconfirmProps } from "@illa-design/react"
3 |
4 | //👇 This default export determines where your story goes in the story list
5 | export default {
6 | title: "FEEDBACK/PopConfirm",
7 | component: PopConfirm,
8 | argTypes: {
9 | icon: {
10 | control: false,
11 | },
12 | },
13 | } as Meta
14 |
15 | export const Basic: StoryFn = (args) => (
16 |
17 |
18 |
19 |
20 |
17 |
18 |
19 |
20 |
9 | {value}
10 |
11 | )
12 | }
13 |
--------------------------------------------------------------------------------
/packages/slider/src/content.ts:
--------------------------------------------------------------------------------
1 | export const DefaultWidth = 240
2 | export enum BarLocation {
3 | LEFT = "left",
4 | RIGHT = "right",
5 | }
6 |
--------------------------------------------------------------------------------
/packages/slider/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./interface"
2 | export * from "./slider"
3 |
--------------------------------------------------------------------------------
/packages/slider/src/tick.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react"
2 | import { SliderTick } from "./interface"
3 | import { applyTick, applyTickContainer, applyBgColor } from "./style"
4 | export const Tick: FC = (props) => {
5 | const {
6 | left,
7 | leftValue,
8 | rightValue,
9 | currentWidth,
10 | disabled,
11 | colorScheme,
12 | value,
13 | } = props
14 | const rightBound = currentWidth - rightValue >= left
15 | const background = applyBgColor(
16 | colorScheme,
17 | !(leftValue <= left && rightBound && !disabled),
18 | )
19 | return (
20 |
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/packages/slider/src/useElementSize.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react"
2 |
3 | export const useElementSize = (
4 | ref: React.MutableRefObject,
5 | ) => {
6 | const [width, setWidth] = useState(0)
7 |
8 | useEffect(() => {
9 | if (ref.current) {
10 | const observer = new ResizeObserver((entries) => {
11 | const { width } = entries[0].contentRect
12 | setWidth(width)
13 | })
14 | observer.observe(ref.current)
15 | return () => {
16 | if (ref.current) {
17 | observer.unobserve(ref.current)
18 | }
19 | }
20 | }
21 | }, [ref])
22 |
23 | return width
24 | }
25 |
--------------------------------------------------------------------------------
/packages/slider/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/packages/slider/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": [
4 | "./src"
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/packages/space/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 |
--------------------------------------------------------------------------------
/packages/space/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./space"
2 | export * from "./interface"
3 |
--------------------------------------------------------------------------------
/packages/space/src/interface.ts:
--------------------------------------------------------------------------------
1 | import { HTMLAttributes } from "react"
2 | import { BoxProps } from "@illa-design/theme"
3 |
4 | export type SpaceSize = "mini" | "small" | "medium" | "large" | string
5 | export type SpaceAlign = "start" | "center" | "end" | "baseline"
6 | export type SpaceDirection = "vertical" | "horizontal"
7 |
8 | export interface SpaceProps extends HTMLAttributes, BoxProps {
9 | size?: SpaceSize | SpaceSize[]
10 | align?: SpaceAlign
11 | direction?: SpaceDirection
12 | divider?: boolean
13 | wrap?: boolean
14 | }
15 |
--------------------------------------------------------------------------------
/packages/space/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/packages/space/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": [
4 | "./src"
5 | ]
6 | }
--------------------------------------------------------------------------------
/packages/spin/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 |
--------------------------------------------------------------------------------
/packages/spin/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./spin"
2 | export * from "./interface"
3 |
--------------------------------------------------------------------------------
/packages/spin/src/interface.ts:
--------------------------------------------------------------------------------
1 | import { HTMLAttributes, ReactNode } from "react"
2 | import { BoxProps } from "@illa-design/theme"
3 |
4 | export type SpinSize = "small" | "medium" | "large"
5 |
6 | export type SpinColorScheme =
7 | | string
8 | | "white"
9 | | "blackAlpha"
10 | | "gray"
11 | | "grayBlue"
12 | | "red"
13 | | "orange"
14 | | "yellow"
15 | | "green"
16 | | "blue"
17 | | "cyan"
18 | | "purple"
19 | | "techPink"
20 | | "techPurple"
21 |
22 | export interface SpinProps extends HTMLAttributes, BoxProps {
23 | block?: boolean
24 | loading?: boolean
25 | size?: SpinSize
26 | icon?: ReactNode
27 | element?: ReactNode
28 | tip?: string | ReactNode
29 | colorScheme?: SpinColorScheme
30 | }
31 |
--------------------------------------------------------------------------------
/packages/spin/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/packages/spin/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": [
4 | "./src"
5 | ]
6 | }
--------------------------------------------------------------------------------
/packages/statistic/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
--------------------------------------------------------------------------------
/packages/statistic/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./statistic"
2 | export * from "./interface"
3 | export * from "./countdown"
4 |
--------------------------------------------------------------------------------
/packages/statistic/src/util.ts:
--------------------------------------------------------------------------------
1 | const units: [string, number][] = [
2 | ["Y", 1000 * 60 * 60 * 24 * 365], // years
3 | ["M", 1000 * 60 * 60 * 24 * 30], // months
4 | ["D", 1000 * 60 * 60 * 24], // days
5 | ["H", 1000 * 60 * 60], // hours
6 | ["m", 1000 * 60], // minutes
7 | ["s", 1000], // seconds
8 | ["S", 1], // million seconds
9 | ]
10 |
11 | // thx ant
12 | export function getDateString(millisecond: number, format: string) {
13 | let leftMillisecond: number = millisecond
14 | return units.reduce((current, [name, unit]) => {
15 | if (current.indexOf(name) !== -1) {
16 | const value = Math.floor(leftMillisecond / unit)
17 | leftMillisecond -= value * unit
18 | return current.replace(new RegExp(`${name}+`, "g"), (match: string) => {
19 | const len = match.length
20 | return value.toString().padStart(len, "0")
21 | })
22 | }
23 | return current
24 | }, format)
25 | }
26 |
--------------------------------------------------------------------------------
/packages/statistic/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/packages/statistic/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": [
4 | "./src"
5 | ]
6 | }
--------------------------------------------------------------------------------
/packages/steps/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
--------------------------------------------------------------------------------
/packages/steps/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./steps"
2 | export * from "./interface"
3 |
--------------------------------------------------------------------------------
/packages/steps/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/packages/steps/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": [
4 | "./src"
5 | ]
6 | }
--------------------------------------------------------------------------------
/packages/switch/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./interface"
2 | export * from "./switch"
3 |
--------------------------------------------------------------------------------
/packages/switch/src/interface.ts:
--------------------------------------------------------------------------------
1 | import { ButtonHTMLAttributes, MouseEvent, ReactNode } from "react"
2 | import { BoxProps } from "@illa-design/theme"
3 |
4 | export type SwitchColorScheme =
5 | | "white"
6 | | "blackAlpha"
7 | | "gray"
8 | | "red"
9 | | "orange"
10 | | "yellow"
11 | | "green"
12 | | "blue"
13 | | "cyan"
14 | | "purple"
15 | | "grayBlue"
16 | | "techPurple"
17 | | "techPink"
18 | | string
19 |
20 | export type SwitchSize = "medium" | "large"
21 |
22 | export interface SwitchProps
23 | extends Omit, "onChange">,
24 | BoxProps {
25 | colorScheme?: SwitchColorScheme
26 | disabled?: boolean
27 | size?: SwitchSize
28 | checkedText?: string | ReactNode
29 | uncheckedText?: string | ReactNode
30 | uncheckedIcon?: ReactNode
31 | checkedIcon?: ReactNode
32 | defaultChecked?: boolean
33 | checked?: boolean
34 | onChange?: (value: boolean, event: MouseEvent) => void
35 | }
36 |
--------------------------------------------------------------------------------
/packages/switch/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/packages/switch/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": [
4 | "./src"
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/packages/system/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 |
--------------------------------------------------------------------------------
/packages/system/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./omit"
2 | export * from "./use-merge-value"
3 | export * from "./is"
4 | export * from "./raf"
5 | export * from "./throttle-by-raf"
6 | export * from "./keycode"
7 | export * from "./easing"
8 | export * from "./dayjs"
9 | export * from "./utils"
10 | export * from "./merge-ref"
11 | export * from "./style"
12 | export * from "./use-previous"
13 |
--------------------------------------------------------------------------------
/packages/system/src/keycode.ts:
--------------------------------------------------------------------------------
1 | // keycode definition
2 |
3 | export const KeyCode = {
4 | Enter: 13,
5 | Esc: 27,
6 | ArrowLeft: 37,
7 | ArrowUp: 38,
8 | ArrowRight: 39,
9 | ArrowDown: 40,
10 | }
11 |
--------------------------------------------------------------------------------
/packages/system/src/omit.ts:
--------------------------------------------------------------------------------
1 | // thx arco.design
2 | // delete keys from object
3 | export function omit(
4 | obj: T,
5 | keys: Array,
6 | ): Omit {
7 | const clone = {
8 | ...obj,
9 | }
10 | keys.forEach((key) => {
11 | if ((key as K) in clone) {
12 | delete clone[key as K]
13 | }
14 | })
15 | return clone
16 | }
17 |
--------------------------------------------------------------------------------
/packages/system/src/pick.ts:
--------------------------------------------------------------------------------
1 | // pick item from object
2 | export default function pick(
3 | obj: T,
4 | keys: Array,
5 | ): Pick {
6 | const clone = {} as Pick
7 | keys.forEach((key) => {
8 | const k = key as K
9 | if ((key as K) in obj) {
10 | clone[k] = obj[k]
11 | }
12 | })
13 | return clone
14 | }
15 |
16 | export function pickDataAttributes(
17 | obj: Record,
18 | ): Record {
19 | const clone = {} as Record
20 |
21 | obj &&
22 | Object.keys(obj).forEach((key) => {
23 | const k = String(key)
24 | if (k.indexOf("data-") === 0) {
25 | clone[k] = obj[k]
26 | }
27 | if (k.indexOf("aria-") === 0) {
28 | clone[k] = obj[k]
29 | }
30 | })
31 |
32 | return clone
33 | }
34 |
--------------------------------------------------------------------------------
/packages/system/src/style.ts:
--------------------------------------------------------------------------------
1 | interface StyleObj extends CSSStyleDeclaration {
2 | [index: string]: any
3 | }
4 |
5 | /**
6 | * Get element style value, e.g. width, margin-left..
7 | *
8 | */
9 | export function getStyle(
10 | element: HTMLElement,
11 | prop: string,
12 | pseudoElement: string | null = null,
13 | ): string {
14 | if (!element || !prop) {
15 | return ""
16 | }
17 |
18 | let style = (element.style as StyleObj)[prop]
19 |
20 | try {
21 | if (document.defaultView) {
22 | const computedStyles = document.defaultView.getComputedStyle(
23 | element,
24 | pseudoElement,
25 | )
26 | return style || (computedStyles as StyleObj)[prop] || ""
27 | }
28 | } catch (e) {
29 | return style
30 | }
31 |
32 | return ""
33 | }
34 |
--------------------------------------------------------------------------------
/packages/system/src/throttle-by-raf.ts:
--------------------------------------------------------------------------------
1 | // thx arco.design
2 | import { raf, caf } from "./raf"
3 |
4 | export function throttleByRaf(cb: (...args: any[]) => void) {
5 | let timer: null | number = null
6 |
7 | const throttle = function (...args: any[]) {
8 | timer && caf(timer)
9 | timer = raf(() => {
10 | cb(...args)
11 | timer = null
12 | })
13 | }
14 |
15 | throttle.cancel = () => {
16 | caf(timer)
17 | timer = null
18 | }
19 |
20 | return throttle
21 | }
22 |
--------------------------------------------------------------------------------
/packages/system/src/use-previous.ts:
--------------------------------------------------------------------------------
1 | import { ComponentState, PropsWithoutRef, useEffect, useRef } from "react"
2 |
3 | export function usePrevious(value: PropsWithoutRef | ComponentState) {
4 | const ref = useRef()
5 | useEffect(() => {
6 | ref.current = value
7 | })
8 | return ref.current
9 | }
10 |
--------------------------------------------------------------------------------
/packages/system/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/packages/system/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": [
4 | "./src"
5 | ]
6 | }
--------------------------------------------------------------------------------
/packages/table/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
--------------------------------------------------------------------------------
/packages/table/src/filterFn.ts:
--------------------------------------------------------------------------------
1 | import { FilterOptionsMap } from "./utils"
2 | import { CustomFilterFn, FilterOptions } from "./interface"
3 | import { isObject, isString } from "@illa-design/system"
4 |
5 | export function isTableFilterFn(value: string): value is CustomFilterFn {
6 | return value in FilterOptionsMap
7 | }
8 |
9 | export function isFilterOption(option: unknown): option is FilterOptions {
10 | return (
11 | isObject(option) &&
12 | "id" in option &&
13 | isString(option.id) &&
14 | "filterFn" in option &&
15 | isTableFilterFn(option.filterFn) &&
16 | "value" in option
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/packages/table/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./table"
2 | export * from "./interface"
3 | export * from "./style"
4 | export * from "./tbody"
5 | export * from "./td"
6 | export * from "./tfoot"
7 | export * from "./th"
8 | export * from "./thead"
9 | export * from "./tr"
10 | export * from "./table-data"
11 | export * from "./filterFn"
12 |
--------------------------------------------------------------------------------
/packages/table/src/react-table.d.ts:
--------------------------------------------------------------------------------
1 | import type { RowData, CellContext } from "@tanstack/react-table"
2 | import "@tanstack/react-table"
3 | import { SerializedStyles } from "@emotion/react"
4 |
5 | declare module "@tanstack/react-table" {
6 | interface ColumnMeta {
7 | custom?: boolean
8 | style?: SerializedStyles
9 | getBackgroundColor?: (
10 | props: CellContext,
11 | ) => string | undefined
12 | getRenderedValueAsString?: (props: CellContext) => string
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/packages/table/src/table-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from "react"
2 | import { TableContextProps } from "./interface"
3 |
4 | export const TableContext = createContext(
5 | undefined,
6 | )
7 |
8 | TableContext.displayName = "TableContext"
9 |
--------------------------------------------------------------------------------
/packages/table/src/table-data.ts:
--------------------------------------------------------------------------------
1 | export interface TableData {}
2 |
--------------------------------------------------------------------------------
/packages/table/src/table.tsx:
--------------------------------------------------------------------------------
1 | import { TableProps } from "./interface"
2 | import { TableData } from "./table-data"
3 | import { RenderDirectTable } from "./render-direct-table"
4 | import { RenderDataDrivenTable } from "./render-data-driven-table"
5 |
6 | export function Table(
7 | props: TableProps,
8 | ) {
9 | const {
10 | columns,
11 | data,
12 | onSortingChange,
13 | onColumnSizingChange,
14 | onColumnFiltersChange,
15 | onRowSelectionChange,
16 | onPaginationChange,
17 | ...otherProps
18 | } = props
19 | if (columns == undefined || data == undefined) {
20 | return RenderDirectTable(otherProps)
21 | } else {
22 | return RenderDataDrivenTable(props)
23 | }
24 | }
25 |
26 | Table.displayName = "Table"
27 |
--------------------------------------------------------------------------------
/packages/table/src/tbody.tsx:
--------------------------------------------------------------------------------
1 | import { forwardRef } from "react"
2 | import { TBodyProps } from "./interface"
3 | import { css } from "@emotion/react"
4 | import { applyBoxStyle, deleteCssProps } from "@illa-design/theme"
5 |
6 | export const TBody = forwardRef(
7 | (props, ref) => {
8 | const { ...otherProps } = props
9 | return (
10 |
15 | )
16 | },
17 | )
18 |
19 | TBody.displayName = "TBody"
20 |
--------------------------------------------------------------------------------
/packages/table/src/tfoot.tsx:
--------------------------------------------------------------------------------
1 | import { forwardRef, useContext } from "react"
2 | import { TFootProps } from "./interface"
3 | import { css } from "@emotion/react"
4 | import { TableContext } from "./table-context"
5 | import { applyBoxStyle, deleteCssProps } from "@illa-design/theme"
6 |
7 | export const TFoot = forwardRef(
8 | (props, ref) => {
9 | const { ...otherProps } = props
10 | const tableContext = useContext(TableContext)
11 | return tableContext?.showFooter ? (
12 |
17 | ) : null
18 | },
19 | )
20 |
21 | TFoot.displayName = "TFoot"
22 |
--------------------------------------------------------------------------------
/packages/table/src/thead.tsx:
--------------------------------------------------------------------------------
1 | import { forwardRef, useContext } from "react"
2 | import { THeadProps } from "./interface"
3 | import { css } from "@emotion/react"
4 | import { TableContext } from "./table-context"
5 | import { applyBoxStyle, deleteCssProps } from "@illa-design/theme"
6 | import { applyPinedStyle, applyResizerTableHeaderStyle } from "./style"
7 |
8 | export const Thead = forwardRef(
9 | (props, ref) => {
10 | const { pinedHeader, ...otherProps } = props
11 | const tableContext = useContext(TableContext)
12 |
13 | return tableContext?.showHeader ? (
14 |
23 | ) : null
24 | },
25 | )
26 |
27 | Thead.displayName = "Thead"
28 |
--------------------------------------------------------------------------------
/packages/table/src/tr.tsx:
--------------------------------------------------------------------------------
1 | import { forwardRef, useContext } from "react"
2 | import { TrProps } from "./interface"
3 | import { applyBoxStyle, deleteCssProps } from "@illa-design/theme"
4 | import { TableContext } from "./table-context"
5 | import {
6 | applyBgHoverStyle,
7 | applyNormalStyle,
8 | applySelectedStyle,
9 | } from "./style"
10 |
11 | export const Tr = forwardRef((props, ref) => {
12 | const { hoverable, selected, ...otherProps } = props
13 | const context = useContext(TableContext)
14 |
15 | return (
16 | |
26 | )
27 | })
28 |
29 | Tr.displayName = "Tr"
30 |
--------------------------------------------------------------------------------
/packages/table/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/packages/table/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": [
4 | "./src"
5 | ]
6 | }
--------------------------------------------------------------------------------
/packages/tabs/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 |
--------------------------------------------------------------------------------
/packages/tabs/src/constants.ts:
--------------------------------------------------------------------------------
1 | export const SCROLL_ICON_WIDTH = 12
2 |
--------------------------------------------------------------------------------
/packages/tabs/src/context/context.tsx:
--------------------------------------------------------------------------------
1 | import { FC, createContext } from "react"
2 | import { TabsProps } from "../interface"
3 | import { ProviderProps, Inject } from "./interface"
4 |
5 | export const TabContext = createContext(
6 | {} as Inject & ProviderProps & TabsProps,
7 | )
8 |
9 | export const TabsProvider: FC = (props) => {
10 | const { children, ...data } = props
11 |
12 | return (
13 | {children}
14 | )
15 | }
16 |
17 | TabsProvider.displayName = "TabsProvider"
18 |
--------------------------------------------------------------------------------
/packages/tabs/src/context/interface.ts:
--------------------------------------------------------------------------------
1 | import { ReactNode } from "react"
2 |
3 | export interface ProviderProps {
4 | selectedKey?: string
5 | handleSelectTab: (key: string | undefined) => void
6 | handleDeleteTab: (key: string | undefined) => void
7 | }
8 |
9 | export interface Inject {
10 | children?: ReactNode
11 | }
12 |
--------------------------------------------------------------------------------
/packages/tabs/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./tabs"
2 | export * from "./interface"
3 | export * from "./tab-pane"
4 |
--------------------------------------------------------------------------------
/packages/tabs/src/utils.ts:
--------------------------------------------------------------------------------
1 | import { TabPosition } from "./interface"
2 |
3 | export const isHorizontalLayout = (tabPosition?: TabPosition) => {
4 | return tabPosition === "left" || tabPosition === "right"
5 | }
6 |
--------------------------------------------------------------------------------
/packages/tabs/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/packages/tabs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": [
4 | "./src"
5 | ]
6 | }
--------------------------------------------------------------------------------
/packages/tag/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 |
--------------------------------------------------------------------------------
/packages/tag/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./tag"
2 | export * from "./interface"
3 |
--------------------------------------------------------------------------------
/packages/tag/src/interface.ts:
--------------------------------------------------------------------------------
1 | import { HTMLAttributes, ReactNode, SyntheticEvent } from "react"
2 | import { BoxProps } from "@illa-design/theme"
3 |
4 | export type TagColorScheme =
5 | | string
6 | | "white"
7 | | "blackAlpha"
8 | | "gray"
9 | | "grayBlue"
10 | | "red"
11 | | "orange"
12 | | "yellow"
13 | | "green"
14 | | "blue"
15 | | "cyan"
16 | | "purple"
17 | | "techPurple"
18 | | "techPink"
19 |
20 | export type TagVariant = "outline" | "fill" | "light"
21 |
22 | export type TagSize = "small" | "medium" | "large"
23 |
24 | export interface TagProps extends HTMLAttributes, BoxProps {
25 | clickable?: boolean
26 | colorScheme?: TagColorScheme
27 | size?: TagSize
28 | variant?: TagVariant
29 | visible?: boolean
30 | closable?: boolean
31 | icon?: ReactNode
32 | onClose?: (event: SyntheticEvent) => void
33 | }
34 |
--------------------------------------------------------------------------------
/packages/tag/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/packages/tag/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": [
4 | "./src"
5 | ]
6 | }
--------------------------------------------------------------------------------
/packages/theme/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 |
--------------------------------------------------------------------------------
/packages/theme/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./global-color"
2 | export * from "./interface"
3 | export * from "./color-palette"
4 | export * from "./style"
5 | export * from "./z-index"
6 |
--------------------------------------------------------------------------------
/packages/theme/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/packages/theme/src/z-index.ts:
--------------------------------------------------------------------------------
1 | export const zIndex = {
2 | auto: "auto",
3 | hide: -1,
4 | base: 0,
5 | inputFocus: 2,
6 | tabs: 2,
7 | button: 2,
8 | modal: 1000,
9 | drawer: 1001,
10 | notification: 1002,
11 | message: 1003,
12 | table: 1,
13 | }
14 |
--------------------------------------------------------------------------------
/packages/theme/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": [
4 | "./src"
5 | ]
6 | }
--------------------------------------------------------------------------------
/packages/time-picker/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
--------------------------------------------------------------------------------
/packages/time-picker/src/context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from "react"
2 |
3 | type TimezoneContext = {
4 | utcOffset?: number
5 | timezone?: string
6 | }
7 |
8 | export const PickerContext = createContext({})
9 |
--------------------------------------------------------------------------------
/packages/time-picker/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./interface"
2 | export * from "./single-picker"
3 | export * from "./range-picker"
4 | export * from "./popup/interface"
5 | export * from "./popup/time-picker-body"
6 | export * from "./popup/range-picker-body"
7 |
--------------------------------------------------------------------------------
/packages/time-picker/src/popup/utils.ts:
--------------------------------------------------------------------------------
1 | import { getColumnsFromFormat } from "../utils"
2 |
3 | export const isUse12Hours = (format: string, use12Hours?: boolean) => {
4 | return use12Hours || getColumnsFromFormat(format).use12Hours
5 | }
6 |
7 | export const getHoursShowList = (step: number = 1, use12Hours?: boolean) => {
8 | const list: number[] = []
9 | for (let i = 0; i < (use12Hours ? 12 : 24); i += step) {
10 | list.push(i)
11 | }
12 | if (use12Hours) {
13 | list[0] = 12
14 | }
15 | return list
16 | }
17 |
18 | export const getMinutesShowList = (step: number = 1) => {
19 | const list: number[] = []
20 | for (let i = 0; i < 60; i += step) {
21 | list.push(i)
22 | }
23 | return list
24 | }
25 |
26 | export const getSecondsShowList = (step: number = 1) => {
27 | const list: number[] = []
28 | for (let i = 0; i < 60; i += step) {
29 | list.push(i)
30 | }
31 | return list
32 | }
33 |
--------------------------------------------------------------------------------
/packages/time-picker/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/packages/time-picker/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": [
4 | "./src"
5 | ]
6 | }
--------------------------------------------------------------------------------
/packages/timeline/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 |
--------------------------------------------------------------------------------
/packages/timeline/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./timeline"
2 | export * from "./interface"
3 | export * from "./timelineItem"
4 |
--------------------------------------------------------------------------------
/packages/timeline/src/timeline-context.tsx:
--------------------------------------------------------------------------------
1 | import { createContext } from "react"
2 | import { TimelineContextProps } from "./interface"
3 |
4 | export const TimelineContext = createContext(
5 | undefined,
6 | )
7 |
8 | TimelineContext.displayName = "TimelineContext"
9 |
--------------------------------------------------------------------------------
/packages/timeline/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": [
4 | "./src"
5 | ]
6 | }
--------------------------------------------------------------------------------
/packages/trigger/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 |
--------------------------------------------------------------------------------
/packages/trigger/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./trigger"
2 | export * from "./interface"
3 | export * from "./trigger-provider"
4 | export * from "./trigger-context"
5 |
--------------------------------------------------------------------------------
/packages/trigger/src/triangle.tsx:
--------------------------------------------------------------------------------
1 | import { createIcon } from "@illa-design/icon"
2 |
3 | export const TriangleTop = createIcon({
4 | title: "TriangleIconTop",
5 | viewBox: "0 0 8 4",
6 | d: "M8 0H0L3.29289 3.29289C3.68342 3.68342 4.31658 3.68342 4.70711 3.29289L8 0Z",
7 | })
8 |
9 | export const TriangleBottom = createIcon({
10 | title: "TriangleIconBottom",
11 | viewBox: "0 0 8 4",
12 | d: "M8 4H0L3.29289 0.707107C3.68342 0.316583 4.31658 0.316583 4.70711 0.707107L8 4Z",
13 | })
14 |
15 | export const TriangleLeft = createIcon({
16 | title: "TriangleIconLeft",
17 | viewBox: "0 0 4 8",
18 | d: "M0 8V0L3.29289 3.29289C3.68342 3.68342 3.68342 4.31658 3.29289 4.70711L0 8Z",
19 | })
20 |
21 | export const TriangleRight = createIcon({
22 | title: "TriangleIconRight",
23 | viewBox: "0 0 4 8",
24 | d: "M4.00098 8V0L0.707366 3.29281C0.316726 3.68335 0.316726 4.31665 0.707366 4.70719L4.00098 8Z",
25 | })
26 |
--------------------------------------------------------------------------------
/packages/trigger/src/trigger-context.tsx:
--------------------------------------------------------------------------------
1 | import { TriggerContext } from "./interface"
2 | import { createContext } from "react"
3 |
4 | export const TriggerProviderContext = createContext({
5 | renderInBody: true,
6 | zIndex: 5,
7 | } as TriggerContext)
8 |
9 | TriggerProviderContext.displayName = "TriggerProviderContext"
10 |
--------------------------------------------------------------------------------
/packages/trigger/src/trigger-provider.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react"
2 | import { TriggerContext } from "./interface"
3 | import { TriggerProviderContext } from "./trigger-context"
4 |
5 | export const TriggerProvider: FC = (props) => {
6 | const { renderInBody, zIndex } = props
7 |
8 | return (
9 |
10 | {props.children}
11 |
12 | )
13 | }
14 |
15 | TriggerProvider.displayName = "TriggerProvider"
16 |
--------------------------------------------------------------------------------
/packages/trigger/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/packages/trigger/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": [
4 | "./src"
5 | ]
6 | }
--------------------------------------------------------------------------------
/packages/typography/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 |
--------------------------------------------------------------------------------
/packages/typography/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./text"
2 | export * from "./ellipsis-config"
3 | export * from "./copyable-config"
4 | export * from "./heading"
5 | export * from "./paragraph"
6 | export * from "./typography"
7 | export * from "./interface"
8 |
--------------------------------------------------------------------------------
/packages/typography/src/paragraph-style.ts:
--------------------------------------------------------------------------------
1 | import { css, SerializedStyles } from "@emotion/react"
2 |
3 | export function applyParagraphContainer(indent: boolean): SerializedStyles {
4 | if (indent) {
5 | return css`
6 | text-indent: 2em;
7 | font-size: 14px;
8 | line-height: 24px;
9 | `
10 | } else {
11 | return css`
12 | font-size: 14px;
13 | line-height: 24px;
14 | `
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/packages/typography/src/text-style.ts:
--------------------------------------------------------------------------------
1 | import { css } from "@emotion/react"
2 |
3 | export const textStyle = css`
4 | line-height: 1.6;
5 | `
6 |
--------------------------------------------------------------------------------
/packages/typography/src/typography.tsx:
--------------------------------------------------------------------------------
1 | import { forwardRef } from "react"
2 | import { applyTypoContainer } from "./typograph-style"
3 | import { applyBoxStyle, deleteCssProps } from "@illa-design/theme"
4 | import { TypographyProps } from "./interface"
5 |
6 | export const Typography = forwardRef(
7 | (props, ref) => {
8 | return (
9 |
14 | {props.children}
15 |
16 | )
17 | },
18 | )
19 |
20 | Typography.displayName = "Typography"
21 |
--------------------------------------------------------------------------------
/packages/typography/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/packages/typography/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": [
4 | "./src"
5 | ]
6 | }
--------------------------------------------------------------------------------
/packages/upload/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
--------------------------------------------------------------------------------
/packages/upload/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./upload"
2 | export * from "./interface"
3 |
--------------------------------------------------------------------------------
/packages/upload/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": [
4 | "./src"
5 | ]
6 | }
--------------------------------------------------------------------------------
/plop-templates/component/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
--------------------------------------------------------------------------------
/plop-templates/component/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @illa-design/{{lowerCase name}}
2 |
--------------------------------------------------------------------------------
/plop-templates/component/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./{{lowerCase name}}"
2 | export * from "./interface"
3 | export * from "./style"
--------------------------------------------------------------------------------
/plop-templates/component/src/interface.ts:
--------------------------------------------------------------------------------
1 | import { HTMLAttributes, MouseEvent, ReactNode } from "react"
2 |
3 | export interface {{properCase name}}Props {
4 | }
5 |
--------------------------------------------------------------------------------
/plop-templates/component/src/style.ts:
--------------------------------------------------------------------------------
1 | import { css } from "@emotion/react"
2 |
3 | export function apply{{properCase name}}(){
4 |
5 | }
--------------------------------------------------------------------------------
/plop-templates/component/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/plop-templates/component/src/{{dashCase name}}.tsx:
--------------------------------------------------------------------------------
1 | import { forwardRef } from "react"
2 | import { {{properCase name}}Props } from "./interface"
3 |
4 | export const {{properCase name}} = forwardRef((props, ref) => {
5 |
6 | return (
7 |
8 | )
9 | })
10 |
11 | {{properCase name}}.displayName = "{{properCase name}}"
12 |
--------------------------------------------------------------------------------
/plop-templates/component/stories/{{dashCase name}}.stories.tsx:
--------------------------------------------------------------------------------
1 | import { Meta, StoryFn } from "@storybook/react"
2 | import { {{properCase name}}, {{properCase name}}Props } from "../src"
3 |
4 | export default {
5 | title: "{{type}}/{{properCase name}}",
6 | component: {{properCase name}},
7 | } as Meta
8 |
9 | export const Basic: StoryFn<{{properCase name}}Props> = (args) => {
10 | return (
11 | <{{properCase name}} {...args} />
12 | )
13 | }
14 |
--------------------------------------------------------------------------------
/plop-templates/component/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": [
4 | "./src"
5 | ]
6 | }
--------------------------------------------------------------------------------
/plop-templates/icon/icon.tsx:
--------------------------------------------------------------------------------
1 | import { createIcon } from "../create-icon"
2 |
3 | export const {{ properCase name }}Icon = createIcon({
4 | title: "{{properCase name}}Icon",
5 | viewBox: "0 0 16 16",
6 | path: (
7 | /*
8 | * You should remove this comment.
9 | *
10 | * 1. Copy all paths from svg icon into here, you may need to use `<>` to wrap multi path
11 | * 2. Replace `viewBox` props with svg icon's `viewBox`
12 | * 3. Rename `kebabCase` to `camelCase`. e.g. stroke-width -> strokeWidth
13 | * 4. Check this icon in storybook
14 | *
15 | * Done!
16 | */
17 | ),
18 | })
19 |
20 | {{properCase name}}Icon.displayName = "{{properCase name}}Icon"
21 |
--------------------------------------------------------------------------------
/plop-templates/icon/story.tsx:
--------------------------------------------------------------------------------
1 | import { StoryFn } from "@storybook/react";
2 |
3 | export const {{properCase name}}: StoryFn = (props: IconProps) => (
4 | <{{properCase name}}Icon {...props} />
5 | )
6 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | # all packages in direct subdirs of packages/
3 | - "packages/*"
4 | - "apps/*"
5 |
--------------------------------------------------------------------------------
/setup-jest.js:
--------------------------------------------------------------------------------
1 | class IntersectionObserver {
2 | observe = jest.fn()
3 | disconnect = jest.fn()
4 | unobserve = jest.fn()
5 | }
6 |
7 | Object.defineProperty(global, "IntersectionObserver", {
8 | writable: true,
9 | configurable: true,
10 | value: IntersectionObserver,
11 | })
12 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "useDefineForClassFields": true,
5 | "lib": [
6 | "DOM",
7 | "DOM.Iterable",
8 | "ESNext"
9 | ],
10 | "allowJs": false,
11 | "skipLibCheck": false,
12 | "esModuleInterop": true,
13 | "allowSyntheticDefaultImports": true,
14 | "strict": true,
15 | "forceConsistentCasingInFileNames": true,
16 | "module": "ESNext",
17 | "moduleResolution": "Node",
18 | "resolveJsonModule": true,
19 | "isolatedModules": true,
20 | "jsx": "react-jsx",
21 | "jsxImportSource": "@emotion/react"
22 | },
23 | "exclude": [
24 | "node_modules",
25 | "plop-templates",
26 | ]
27 | }
28 |
--------------------------------------------------------------------------------
/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://turbo.build/schema.json",
3 | "extends": ["//"],
4 | "pipeline": {
5 | "build": {
6 | "outputs": ["dist/**"],
7 | "dependsOn": ["^build"],
8 | "inputs": ["src/**/*.tsx", "src/**/*.ts"]
9 | },
10 | "bs": {},
11 | "dev": {
12 | "cache": false,
13 | "persistent": true
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------