108 lines
2.3 KiB
Markdown
108 lines
2.3 KiB
Markdown
# @hublib-web/tach-typography
|
|
|
|
Typography package with shared tokens and framework adapters:
|
|
|
|
- `react` adapter based on `antd/Typography`
|
|
- `angular` adapter based on `ng-zorro-antd/typography`
|
|
|
|
## Install from Git (SSH tag)
|
|
|
|
```bash
|
|
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
|
|
|
|
```bash
|
|
yarn add @hublib-web/tach-typography
|
|
```
|
|
|
|
## Release this package
|
|
|
|
1. Bump `version` in `packages/tach-typography/package.json`.
|
|
2. Build package artifacts:
|
|
|
|
```bash
|
|
yarn workspace @hublib-web/tach-typography build
|
|
```
|
|
|
|
3. Commit release files:
|
|
|
|
```bash
|
|
git add packages/tach-typography/package.json packages/tach-typography/dist
|
|
git commit -m "release(tach-typography): v0.2.0"
|
|
```
|
|
|
|
4. Create and push tag:
|
|
|
|
```bash
|
|
git tag -a tach-typography-v0.2.0 -m "@hublib-web/tach-typography v0.2.0"
|
|
git push origin main --follow-tags
|
|
```
|
|
|
|
Detailed docs:
|
|
|
|
- [Release policy](../../docs/release-policy.md)
|
|
- [Git installation](../../docs/git-installation.md)
|
|
|
|
## React usage (Ant Design)
|
|
|
|
```tsx
|
|
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)
|
|
|
|
```ts
|
|
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:
|
|
|
|
```bash
|
|
yarn workspace @hublib-web/tach-typography storybook
|
|
```
|
|
|
|
Build static Storybook:
|
|
|
|
```bash
|
|
yarn workspace @hublib-web/tach-typography storybook:build
|
|
```
|