Skip to content

Commit

Permalink
feat: add filterNames prop to filter design tokens in DesignTokenDocB…
Browse files Browse the repository at this point in the history
…lock
  • Loading branch information
simeon-raykov committed Dec 13, 2024
1 parent 636b0c7 commit 9203ea6
Show file tree
Hide file tree
Showing 8 changed files with 11,392 additions and 7,915 deletions.
16 changes: 15 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -287,7 +287,21 @@ import { CircleColorPresenter } from './CircleColorPresenter';
/>;
```

Check the [demo file](https://github.com/UX-and-I/storybook-design-token/blob/v3/addon/src/stories/Introduction.mdx) for usage examples.
### Custom filters

The `filterNames` prop allows you to filter the design tokens displayed in the `DesignTokenDocBlock` by variable names. Use this to focus on a subset of tokens in your Storybook documentation.

```tsx
// colors.stories.mdx

import { DesignTokenDocBlock } from 'storybook-design-token';

<DesignTokenDocBlock
filterNames={['--b100']}
categoryName="Colors"
viewType="card"
/>;
```

## Browser support

Expand Down
6 changes: 6 additions & 0 deletions addon/src/components/DesignTokenDocBlock.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export interface DesignTokenDocBlockProps {
maxHeight?: number;
showValueColumn?: boolean;
viewType: TokenViewType;
filterNames?: string[];
/**
* @default true
*/
Expand All @@ -38,6 +39,7 @@ const Card = styled.div(() => ({
}));

export const DesignTokenDocBlock = ({
filterNames,
categoryName,
maxHeight = 600,
showValueColumn = true,
Expand All @@ -59,6 +61,7 @@ export const DesignTokenDocBlock = ({

return (
<DesignTokenDocBlockView
filterNames={filterNames}
categories={tab.categories}
viewType={viewType}
maxHeight={maxHeight}
Expand Down Expand Up @@ -86,6 +89,7 @@ function DesignTokenDocBlockView({
showSearch,
pageSize,
presenters,
filterNames,
}: DesignTokenDocBlockViewProps) {
const { searchText, setSearchText, categories } = useTokenSearch(
categoriesProp ?? []
Expand All @@ -110,11 +114,13 @@ function DesignTokenDocBlockView({
readonly
showValueColumn={showValueColumn}
presenters={presenters}
filterNames={filterNames}
/>
</Card>
)}
{viewType === "card" && (
<TokenCards
filterNames={filterNames}
categories={categories}
padded={false}
readonly
Expand Down
12 changes: 4 additions & 8 deletions addon/src/components/TokenCards.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { ClipboardButton } from "./ClipboardButton";
import { PresenterMapType, TokenPreview } from "./TokenPreview";
import { TokenValue } from "./TokenValue";
import { ToolButton } from "./ToolButton";
import { useFilteredTokens } from "../hooks/useFilteredTokens";

interface TokenCardsProps {
categories: Category[];
Expand All @@ -24,6 +25,7 @@ interface TokenCardsProps {
showValueColumn?: boolean;
pageSize?: number;
presenters?: PresenterMapType;
filterNames?: string[];
}

export const TokenCards = ({
Expand All @@ -33,6 +35,7 @@ export const TokenCards = ({
showValueColumn = true,
pageSize = 50,
presenters,
filterNames,
}: TokenCardsProps) => {
const [tokenValueOverwrites, setTokenValueOverwrites] = useState<{
[tokenName: string]: any;
Expand Down Expand Up @@ -108,14 +111,7 @@ export const TokenCards = ({
[]
);

const tokens = useMemo(
() =>
categories.reduce(
(tokens, category) => [...tokens, ...category.tokens],
[] as Token[]
),
[categories]
);
const tokens = useFilteredTokens(categories, filterNames);

const pages = useMemo(() => Math.ceil(tokens.length / pageSize), [tokens]);

Expand Down
1 change: 1 addition & 0 deletions addon/src/components/TokenTab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ interface TokenTabProps {
showSearch?: boolean;
pageSize?: number;
presenters?: PresenterMapType;
filterNames?: string[];
}

export function TokenTab({
Expand Down
13 changes: 5 additions & 8 deletions addon/src/components/TokenTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import {
WithTooltip,
} from "@storybook/components";
import { styled } from "@storybook/theming";
import { useFilteredTokens } from "../hooks/useFilteredTokens";

import { Category } from "../types/category.types";
import { Token } from "../types/token.types";
import { ClipboardButton } from "./ClipboardButton";
Expand All @@ -22,6 +24,7 @@ interface TokenTableProps {
readonly?: boolean;
showValueColumn?: boolean;
presenters?: PresenterMapType;
filterNames?: string[];
}

export const TokenTable = ({
Expand All @@ -30,6 +33,7 @@ export const TokenTable = ({
readonly,
showValueColumn = true,
presenters,
filterNames,
}: TokenTableProps) => {
const [tokenValueOverwrites, setTokenValueOverwrites] = useState<{
[tokenName: string]: any;
Expand All @@ -40,14 +44,7 @@ export const TokenTable = ({
const parentRef = useRef<HTMLDivElement | null>(null);
const theadRef = useRef<HTMLTableSectionElement | null>(null);

const tokens = useMemo(
() =>
categories.reduce(
(tokens, category) => [...tokens, ...category.tokens],
[] as Token[]
),
[categories]
);
const tokens = useFilteredTokens(categories, filterNames);

const rowVirtualizer = useVirtual({
size: tokens.length,
Expand Down
20 changes: 20 additions & 0 deletions addon/src/hooks/useFilteredTokens.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { useMemo } from "react";
import { Token } from "../types/token.types";
import { Category } from "../types/category.types";

export const useFilteredTokens = (
categories: Category[],
filterNames?: string[]
): Token[] => {
return useMemo(() => {
const allTokens = categories.flatMap((category) => category.tokens);

const uniqueTokens = allTokens.filter(
(token, index, self) =>
self.findIndex((t) => t.name === token.name) === index &&
(!filterNames || filterNames.includes(token.name))
);

return uniqueTokens;
}, [categories, filterNames]);
};
8 changes: 8 additions & 0 deletions addon/src/stories/Introduction.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,11 @@ Display design token documentation generated from your stylesheets and icon file
viewType="card"
presenters={{ Color: CircleColorPresenter }}
/>

## Colors with Custom filter

<DesignTokenDocBlock
filterNames={["--b100"]}
categoryName="Colors"
viewType="card"
/>
Loading

0 comments on commit 9203ea6

Please sign in to comment.