@digo-labs/常见
每一个组织的基础 @digo-labs/* 软件包:共享公用事业,类型,Zod schemas, AWS RE26品牌常数,被整理的图标集,React hooks(@digo-labs/common/hooks),以及全球CSS(音标,字体, typo-* 财务报告和审定财务报表 cs-* 公用事业).
如何是观此相. 这个带包的向导船,因此与您所安装的版本相匹配;站点描述了最新的发布. 类型 node_modules/@digo-labs/common/dist/*.d.ts 如果他们不同意,是准确的,是赢的。 更深的页面 : https://design.digo-labs.com/docs/guide/package-common (中文(简体) )。 。 。 .
npm install @digo-labs/common
公用事业
import { cn, tryCatch, CommonHelpers } from '@digo-labs/common';
const [data, error] = await tryCatch(fetch(url).then(r => r.json()));
if (error) return;
<div className={cn('typo-label typo-3 text-neutral-11', isActive && 'text-accent-11', className)} />
tryCatch<T, E = Error>(promise): Promise<Result<T, E>>: 将承诺变成[data, null] | [null, error]tu. 它需要一个承诺,而不是一个功能.cn(...inputs)数字 :clsx加号tailwind-merge,扩展为typo-1.typo-18, (中文(简体) ),typo-weight-*财务报告和审定财务报表typo-header|label|body|code正确合并 。 每个都用className。 。 。 .- 静态助教课程(称为
CommonHelpers.method():CommonHelpers编号(clamp, (中文(简体) ),lerp, (中文(简体) ),lerpArray, (中文(简体) ),getRandomInteger, (中文(简体) ),createRandom(seed), (中文(简体) ),formatNumberTwoDigits),颜色(hexToRgb, (中文(简体) ),hexToRgbArray, (中文(简体) ),rgbArrayToHex, (中文(简体) ),getLuminance), CSS变量(getCssVariable, (中文(简体) ),setCssVariable),文件和图像(getImagePayloadFromFile, (中文(简体) ),getImagePayloadFromUrl, (中文(简体) ),getFileFromImagePayload, (中文(简体) ),getFileFromUrl, (中文(简体) ),compressImage, (中文(简体) ),preloadImage(s), (中文(简体) ),removeBackground, (中文(简体) ),openFileSelector, (中文(简体) ),downloadURI, (中文(简体) ),downloadCsvFromUrl),剪贴板(copyToClipboard, (中文(简体) ),getTextFromClipboard页:1generateUUID, (中文(简体) ),getTimeFormatted, (中文(简体) ),getLastUpdated, (中文(简体) ),getUniqueIdInList, (中文(简体) ),setTabName, (中文(简体) ),scrollToBottom) (中文(简体) ).StringHelpers(长弦)compress*编号 :decompress*, (中文(简体) ),blobToBase64, (中文(简体) ),base64ToBlob, (中文(简体) ),hashCode, (中文(简体) ),getFirstLetter) (中文(简体) ).LocalStorage编号 :SessionStorage数字 :setValue<T>(key, value)财务报告和审定财务报表loadValue<T>(key, defaultValue)JSON进出.IconHelpers(单位:千美元)getIcon, (中文(简体) ),getCategories, (中文(简体) ),getByCategory以图示集为主;CuratedIcons是图标名称的结合.- 使用的平台助手
@digo-labs/services后端 :AppConfigHelpers, (中文(简体) ),AuthTierHelpers, (中文(简体) ),StorageAccessHelpers, (中文(简体) ),RealtimeHelpers应用软件很少直接调用.
类型和计划
- 共享类型 :
Result, (中文(简体) ),Time, (中文(简体) ),Size, (中文(简体) ),Position, (中文(简体) ),Bounds, (中文(简体) ),Vector3, (中文(简体) ),Side, (中文(简体) ),Align, (中文(简体) ),Alignment, (中文(简体) ),Orientation, (中文(简体) ),Breakpoint, (中文(简体) ),GradientStop, (中文(简体) ),Random。 。 。 . - 授权和访问 :
AuthTier(单位:千美元)'public' | 'user' | 'org' | 'admin', (中文(简体) ),AUTH_PROJECTS, (中文(简体) ),AuthProject, (中文(简体) ),TableAccessRule, (中文(简体) ),StorageRules, (中文(简体) ),ChannelRules。 。 。 . - 常见表格:
StyleRecord(共享资源)styles页:1. - Zod schemas与后端共享,每个后端都有其推断类型:原始人(
filePayloadSchema编号 :FilePayload, (中文(简体) ),imagePayloadSchema编号 :ImagePayload,......),大赦国际(EtextBodySchema, (中文(简体) ),imageGenerateBodySchema, (中文(简体) ),videoGenerateBodySchema, (中文(简体) ),audioSpeechBodySchema,.),AI工作(英语:aiJobCreateBodySchema, (中文(简体) ),AiJobStatus),设备,实例(...)InstanceRecord, (中文(简体) ),instanceCreateBodySchema,.),存储,websocket,DMX. 搜索.d.ts精确名称的文件. - 实例 :
InstanceHelpers(单位:千美元)getScope, (中文(简体) ),parseScope, (中文(简体) ),getStoragePrefix, (中文(简体) ),toStoragePath, (中文(简体) ),fromStoragePath, (中文(简体) ),isSlug, (中文(简体) ),DEFAULT_INSTANCE(单位:千美元)'main', (中文(简体) ),DIGO_INSTANCE_HEADER。 。 。 .AppConfigHelpers.getInstanceFromHost('jon.tattoo-studio.digo-labs.com')实值'jon'。 。 。 . - Websocket 类型 :
WebsocketHubMessage, (中文(简体) ),WebsocketConnectionConfig, (中文(简体) ),WebsocketClientEvent, (中文(简体) ),WebSocketHubEvent。 。 。 . - 常数 :
BREAKPOINTS, (中文(简体) ),BACKEND_URL, (中文(简体) ),WS_URL, (中文(简体) ),FILES_URL, (中文(简体) ),AWS_DEFAULT_REGION。 CDN 资产 URL :IMAGES, (中文(简体) ),VIDEOS, (中文(简体) ),MODELS, (中文(简体) ),FONT_FACES。 。 。 .
反应钩: @digo-labs/common/hooks
一个单独的条目, 所以导入的服务器 @digo-labs/common 永远不要装入反应或动作.
useElementSize<T>()数字 :{ ref, width, height },保持当前状态ResizeObserver。 。 。 .useMediaQuery(query): 媒体查询是否匹配。 使用断点( E)'md', (中文(简体) ),'max-md', (中文(简体) ),'sm:max-lg', (中文(简体) ),{ min, max, pointer }或原始查询.useIsMobile()实值useMediaQuery('max-md')。 。 。 .useMotionReduced():当系统要求减少运动或<MotionConfig reducedMotion="always">从motion/react包接组件.
AWS RE26 品牌常数
仅针对 AWS 事件应用 。 在那些应用中,品牌是严格的:这些值是参考值,从不重划或重新取出. 使用它们的组件在 @digo-labs/aws。 。 。 .
AWS_PALETTE:品牌颜色(orange, (中文(简体) ),yellow, (中文(简体) ),pink, (中文(简体) ),purple, (中文(简体) ),blue, (中文(简体) ),green,每个带Light, (中文(简体) ),Muted, (中文(简体) ),Dark变体). 类型AwsPaletteColor。 。 。 .AWS_DURATIONS(单位:千美元)enter, (中文(简体) ),beat, (中文(简体) ),hold, (中文(简体) ),hop,以秒计)和AWS_EASINGS(单位:千美元)expo, (中文(简体) ),circle,作为立方体-贝氏tuple,AWS_TRANSITIONS(单位:千美元)enter在圆上,move财务报告和审定财务报表shift(关于展览)和AWS_INSTANT(零期限过渡,为减少运动).- 格来:
AWS_GLYPHS(SVG路径),AWS_GLYPH_VIEWBOX, (中文(简体) ),AWS_GLYPH_FAMILIES(单位:千美元)scale, (中文(简体) ),connect, (中文(简体) ),spark, (中文(简体) ),pivot,第1至3阶段,AWS_GLYPH_FAMILY_NAMES财务报告和审定财务报表AWS_GLYPH_STAGES(家庭和阶段作为清单). AWS_SHAPE_ANIMATIONS: CDN上每个glyph家族的Lottie文件.- 布局和运动数据 :
AWS_UNIT(基块大小,48个),AWS_BLOCK_GROUPS, (中文(简体) ),AWS_PATTERNS, (中文(简体) ),AWS_PATTERN_DEFAULTS, (中文(简体) ),AWS_TEXTURE_DEFAULTS, (中文(简体) ),AWS_TEXTURE_MOTION。 。 。 . AwsHelpers.shape | block | group | pattern | texture: 组件后面的数学(例如AwsHelpers.pattern.compile(data, loop)) (中文(简体) ).
品牌规则和视觉: https://dedesign.digo-labs.com/library/aws/aws-founders (中文(简体) )
CSS: 请检查DATE=中的日期值 (帮助) CSS: @digo-labs/common/index.css
尾风 V4 样式表 。 它定义:
- 默认符号, 因此公用设施工作时没有主题预设: 颜色缩放
neutral, (中文(简体) ),accent, (中文(简体) ),error, (中文(简体) ),success, (中文(简体) ),warning, (中文(简体) ),info(步骤1至12,加上α)*A-1.*A-12, (中文(简体) ),shadows-*, (中文(简体) ),--radius财务报告和审定财务报表rounded-*步骤,shadow-xs|s|m|l|xl,和打字变量(--typo-header-font, (中文(简体) ),--typo-body-weight. . . . . . . ,--typo-scale-factor) (中文(简体) ). - 字体家族为
font-*水电费(font-geist, (中文(简体) ),font-geist-mono, (中文(简体) ),font-ember-display,与(.)@font-face规则加载从cdn.digo-labs.comAWS Ember 现代面孔@digo-labs/common/aws-fonts.css,此文件导入和@digo-labs/aws/styles.css进口也一样. - 类型学设施:
typo-header, (中文(简体) ),typo-label, (中文(简体) ),typo-body, (中文(简体) ),typo-code(家庭、体重、跟踪、领导),typo-1.typo-18(规模,缩放--typo-scale-factor, (中文(简体) ),typo-weight-100.typo-weight-900。 。 。 . - 布局和国家公用事业:
flex-col-center, (中文(简体) ),flex-row-center, (中文(简体) ),cs-focus, (中文(简体) ),cs-disabled, (中文(简体) ),cs-invalid, (中文(简体) ),cs-transition, (中文(简体) ),cs-page-container, (中文(简体) ),cs-page-grid, (中文(简体) ),cs-dots, (中文(简体) ),cs-stripes, (中文(简体) ),no-scrollbar和更多(搜索)@utility页:1. - 图标通过
@iconify/tailwind4(单位:千美元)icon-[set--name]和(或)tailwindcss-animate。 。 。 .
如果应用程序也使用 @digo-labs/ui导入 @digo-labs/ui/styles.css 相反: 它已经包含此文件 .
@import 'tailwindcss';
@import '@digo-labs/common/index.css';
抓到他们了
- 导入
tailwindcss在此文件之前: 它使用@theme财务报告和审定财务报表@utility,它只在Tailwind v4建筑内工作. - 默认的符号是暗相(
neutral-1实值#111111, (中文(简体) ),neutral-12实值#eeeeee)和底地层油漆body与他们。 没有预设的应用程序是黑暗的;光模式需要预设从@digo-labs/ui。 。 。 . - 基础层显示
transition-colors duration-200关于每个元素(*) (中文(简体) ). 颜色变化您自己驱动( 扫描覆盖, 帧精确动画) 时长可达 200 ms; 覆盖到transition-none这很重要. Icon名称没有在编组中 直接通过作为一个类。 一个生的icon-[mdi--home]必须在应用程序源中字面显示, 所以 Tailwind 生成它 .CommonHelpers.removeBackground负载@imgly/background-removal(ONNX型号)第一呼叫;它很重,所以只按需要呼叫.