_hublib-web/packages/tach-typography/README.md

@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)

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

1. Bump version in packages/tach-typography/package.json.
2. Build package artifacts:

yarn workspace @hublib-web/tach-typography build

3. Commit release files:

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:

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
• Git installation

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>
);

Markdown as a prop (keeps existing API):

<TachTypography.Text.AccentH1 markdownEnabled>
  **Bold** _italic_ [Docs](https://example.com)
</TachTypography.Text.AccentH1>

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 {}

Markdown in Angular:

<tach-typography variant="Body" [markdownEnabled]="true" [markdown]="'**Bold** _italic_'"></tach-typography>

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