mirror of
https://github.com/hanzoai/o11y-components.git
synced 2026-10-30 14:54:15 +00:00
zeekay
bbf9df17da
Button and DataTable rendered `className="animate-fast-spin"`. Nothing in the library defines that class. `.animate-fast-spin` in button.module.scss is a CSS Module, so it compiles to a hashed name the literal string never matches — the utility that actually animated anything came from the consumer's tailwind build via @signozhq/tailwind-config. Every consumer without that config got a frozen loader icon, and the two tests that "covered" it asserted on the class string rather than on any style, so they passed either way. The animation now lives in one place, lib/spin.module.scss, imported by both callers. The animation name is written bare rather than inside a var() fallback: CSS Modules rewrites `@keyframes spin` to a scoped name and only rewrites references it can see, so the previous `var(--x, spin 0.7s ...)` form left the reference pointing at a name that no longer existed. Duration stays overridable via --spin-duration, which is the part worth tuning. Verified in dist: the emitted keyframes and the animation shorthand now carry the same scoped name. Also off tailwind here: - pin-list's collapsing section used the `overflow-hidden` utility to clip its own height animation; that clip is now a modifier in pin-list.module.scss. - every JSDoc @example that taught tailwind is converted to React style objects and icon `size` props. Examples ship in .d.ts, so a tailwind snippet here becomes tailwind in a consumer's app. Skeleton was built by vite and shipped in dist but missing from package.json exports, README and intro.mdx, so `@signozhq/ui/skeleton` was unimportable and four repo tests were red. Added. Suite is 347/347.
102 lines
3.3 KiB
Plaintext
102 lines
3.3 KiB
Plaintext
import { Meta } from '@storybook/addon-docs/blocks';
|
|
|
|
<Meta title="Intro" />
|
|
|
|
# Signoz Components Library
|
|
|
|
React component library powered by Turborepo, React, and Storybook.
|
|
|
|
## Install & Use
|
|
|
|
To use the Signoz components library, you need to install the following packages:
|
|
|
|
```sh
|
|
pnpm add @signozhq/design-tokens @signozhq/ui
|
|
```
|
|
|
|
In your app's main CSS file (e.g. `index.css` or `global.css`), import the following css:
|
|
|
|
```css
|
|
@import "@signozhq/design-tokens/dist/style.css";
|
|
@import '@signozhq/design-tokens/dist/themes/signoz-tokens.css';
|
|
```
|
|
|
|
Then you need to add the data attribute in your element `body` or `html` to select the theme:
|
|
|
|
```html
|
|
<html lang="en" data-theme="default">
|
|
```
|
|
|
|
If you want to toggle/change between themes, you just need to update the value of the attribute `data-theme`.
|
|
|
|
> **tip**: Take a look at [./apps/docs/blue-demo.css](./apps/docs/blue-demo.css) to learn how to create a new theme.
|
|
|
|
### How to use with Tailwind
|
|
|
|
In case you want to have our design tokens exposed directly to Tailwind, you can install the following package:
|
|
|
|
```sh
|
|
pnpm add @signozhq/tailwind-config
|
|
```
|
|
|
|
And then import the following css:
|
|
|
|
```css
|
|
@import 'tailwindcss';
|
|
@config "@signozhq/tailwind-config";
|
|
@import '@signozhq/tailwind-config/global.css';
|
|
```
|
|
|
|
## Storybook
|
|
|
|
To learn more about the available components, take a look at: https://periscope.signoz.io/
|
|
|
|
## Available Packages
|
|
|
|
| Package | Description |
|
|
| --------------------------- | ----------------------------------------------------------------- |
|
|
| `@signozhq/tailwind-config` | Tailwind config, design tokens, and `global.css` (required first) |
|
|
| `@signozhq/ui` | All UI components (single package with subpath exports) |
|
|
|
|
All components live in `@signozhq/ui`. Import by subpath:
|
|
|
|
```ts
|
|
import { AlertDialog } from '@signozhq/ui';
|
|
import { AnnouncementBanner } from '@signozhq/ui';
|
|
import { Avatar } from '@signozhq/ui';
|
|
import { Badge } from '@signozhq/ui';
|
|
import { Breadcrumb } from '@signozhq/ui';
|
|
import { Button } from '@signozhq/ui';
|
|
import { Calendar } from '@signozhq/ui';
|
|
import { Callout } from '@signozhq/ui';
|
|
import { Checkbox } from '@signozhq/ui';
|
|
import { Combobox } from '@signozhq/ui';
|
|
import { Command } from '@signozhq/ui';
|
|
import { DatePicker } from '@signozhq/ui';
|
|
import { Dialog } from '@signozhq/ui';
|
|
import { Divider } from '@signozhq/ui';
|
|
import { Drawer } from '@signozhq/ui';
|
|
import { DropdownMenu } from '@signozhq/ui';
|
|
import { Input } from '@signozhq/ui';
|
|
import { InputNumber } from '@signozhq/ui';
|
|
import { Kbd } from '@signozhq/ui';
|
|
import { Pagination } from '@signozhq/ui';
|
|
import { Progress } from '@signozhq/ui';
|
|
import { PinList } from '@signozhq/ui';
|
|
import { Popover } from '@signozhq/ui';
|
|
import { RadioGroup } from '@signozhq/ui';
|
|
import { ResizablePanelGroup } from '@signozhq/ui';
|
|
import { Select } from '@signozhq/ui';
|
|
import { Skeleton } from '@signozhq/ui';
|
|
import { Slider } from '@signozhq/ui';
|
|
import { Switch } from '@signozhq/ui';
|
|
import { Table } from '@signozhq/ui';
|
|
import { Tabs } from '@signozhq/ui';
|
|
import { TextEllipsis } from '@signozhq/ui';
|
|
import { Toaster } from '@signozhq/ui';
|
|
import { Toggle } from '@signozhq/ui';
|
|
import { ToggleGroup } from '@signozhq/ui';
|
|
import { Tooltip } from '@signozhq/ui';
|
|
import { Typography } from '@signozhq/ui';
|
|
```
|