2.3 KiB
2.3 KiB
@hublib-web/tach-typography
Typography package with shared tokens and framework adapters:
reactadapter based onantd/Typographyangularadapter based onng-zorro-antd/typography
Install from Git (SSH tag)
yarn add "@hublib-web/tach-typography@git+ssh://git@github.com/ORG/REPO.git#workspace=@hublib-web/tach-typography&tag=tach-typography-v0.2.0"
Install inside this monorepo
yarn add @hublib-web/tach-typography
Release this package
- Bump
versioninpackages/tach-typography/package.json. - Build package artifacts:
yarn workspace @hublib-web/tach-typography build
- Commit release files:
git add packages/tach-typography/package.json packages/tach-typography/dist
git commit -m "release(tach-typography): v0.2.0"
- Create and push tag:
git tag -a tach-typography-v0.2.0 -m "@hublib-web/tach-typography v0.2.0"
git push origin main --follow-tags
Detailed docs:
React usage (Ant Design)
import "@hublib-web/tach-typography/styles.css";
import { TachTypography } from "@hublib-web/tach-typography/react";
export const Example = () => (
<TachTypography.Text.Body color="link" weight="bold" ellipsis={{ rows: 1 }}>
Hello from React + AntD
</TachTypography.Text.Body>
);
Angular usage (NG-ZORRO)
import { Component } from "@angular/core";
import { TachTypographyComponent } from "@hublib-web/tach-typography/angular";
@Component({
selector: "app-example",
standalone: true,
imports: [TachTypographyComponent],
template: `
<tach-typography
variant="Body"
color="link"
weight="bold"
[nzProps]="{ nzCopyable: true, nzType: 'secondary' }"
>
Hello from Angular + NG-ZORRO
</tach-typography>
<tach-typography
as="a"
variant="Body"
color="link"
[hostProps]="{ href: '/docs', target: '_blank', rel: 'noopener noreferrer' }"
[nzProps]="{ nzType: 'secondary' }"
>
Open docs
</tach-typography>
`,
})
export class ExampleComponent {}
Storybook (dev/design system)
Run from repository root:
yarn workspace @hublib-web/tach-typography storybook
Build static Storybook:
yarn workspace @hublib-web/tach-typography storybook:build