From 77f505dcede981a7679606b14c01a93803804c26 Mon Sep 17 00:00:00 2001 From: Nathan Evans Date: Fri, 25 Aug 2023 13:59:52 -0700 Subject: [PATCH] Filter chips (#212) * Add generic Chips component * Changeset * Addres comments, split out Chip * Fix headers --- .yarn/versions/4b5fabc8.yml | 3 + .../docs/markdown/components.chip.md | 11 + .../markdown/components.chipitem.canclose.md | 11 + .../markdown/components.chipitem.iconname.md | 11 + .../docs/markdown/components.chipitem.key.md | 11 + .../docs/markdown/components.chipitem.md | 21 + .../docs/markdown/components.chipitem.text.md | 11 + .../markdown/components.chipitemprops.item.md | 11 + .../docs/markdown/components.chipitemprops.md | 21 + .../components.chipitemprops.onclick.md | 11 + .../components.chipitemprops.onclose.md | 11 + .../components.chipitemprops.styles.md | 11 + .../docs/markdown/components.chips.md | 11 + .../markdown/components.chipsprops.items.md | 11 + .../docs/markdown/components.chipsprops.md | 21 + .../markdown/components.chipsprops.onclick.md | 11 + .../markdown/components.chipsprops.onclose.md | 11 + .../markdown/components.chipsprops.styles.md | 11 + .../markdown/components.chipsstyles.item.md | 11 + .../docs/markdown/components.chipsstyles.md | 19 + .../markdown/components.chipsstyles.root.md | 11 + .../markdown/components.chipstyles.close.md | 11 + .../markdown/components.chipstyles.icon.md | 11 + .../docs/markdown/components.chipstyles.md | 20 + .../markdown/components.chipstyles.root.md | 11 + .../components/docs/markdown/components.md | 7 + .../docs/report/components.api.json | 629 ++++++++++++++++++ .../components/docs/report/components.api.md | 76 +++ packages/components/src/Chips/Chip.hooks.ts | 22 + packages/components/src/Chips/Chip.styles.ts | 53 ++ packages/components/src/Chips/Chip.tsx | 33 + .../components/src/Chips/Chips.stories.tsx | 133 ++++ packages/components/src/Chips/Chips.styles.ts | 27 + packages/components/src/Chips/Chips.tsx | 34 + packages/components/src/Chips/Chips.types.ts | 37 ++ packages/components/src/index.ts | 3 + 36 files changed, 1368 insertions(+) create mode 100644 .yarn/versions/4b5fabc8.yml create mode 100644 packages/components/docs/markdown/components.chip.md create mode 100644 packages/components/docs/markdown/components.chipitem.canclose.md create mode 100644 packages/components/docs/markdown/components.chipitem.iconname.md create mode 100644 packages/components/docs/markdown/components.chipitem.key.md create mode 100644 packages/components/docs/markdown/components.chipitem.md create mode 100644 packages/components/docs/markdown/components.chipitem.text.md create mode 100644 packages/components/docs/markdown/components.chipitemprops.item.md create mode 100644 packages/components/docs/markdown/components.chipitemprops.md create mode 100644 packages/components/docs/markdown/components.chipitemprops.onclick.md create mode 100644 packages/components/docs/markdown/components.chipitemprops.onclose.md create mode 100644 packages/components/docs/markdown/components.chipitemprops.styles.md create mode 100644 packages/components/docs/markdown/components.chips.md create mode 100644 packages/components/docs/markdown/components.chipsprops.items.md create mode 100644 packages/components/docs/markdown/components.chipsprops.md create mode 100644 packages/components/docs/markdown/components.chipsprops.onclick.md create mode 100644 packages/components/docs/markdown/components.chipsprops.onclose.md create mode 100644 packages/components/docs/markdown/components.chipsprops.styles.md create mode 100644 packages/components/docs/markdown/components.chipsstyles.item.md create mode 100644 packages/components/docs/markdown/components.chipsstyles.md create mode 100644 packages/components/docs/markdown/components.chipsstyles.root.md create mode 100644 packages/components/docs/markdown/components.chipstyles.close.md create mode 100644 packages/components/docs/markdown/components.chipstyles.icon.md create mode 100644 packages/components/docs/markdown/components.chipstyles.md create mode 100644 packages/components/docs/markdown/components.chipstyles.root.md create mode 100644 packages/components/src/Chips/Chip.hooks.ts create mode 100644 packages/components/src/Chips/Chip.styles.ts create mode 100644 packages/components/src/Chips/Chip.tsx create mode 100644 packages/components/src/Chips/Chips.stories.tsx create mode 100644 packages/components/src/Chips/Chips.styles.ts create mode 100644 packages/components/src/Chips/Chips.tsx create mode 100644 packages/components/src/Chips/Chips.types.ts diff --git a/.yarn/versions/4b5fabc8.yml b/.yarn/versions/4b5fabc8.yml new file mode 100644 index 00000000..717d8948 --- /dev/null +++ b/.yarn/versions/4b5fabc8.yml @@ -0,0 +1,3 @@ +releases: + "@essex/components": minor + essex-toolkit-stories: patch diff --git a/packages/components/docs/markdown/components.chip.md b/packages/components/docs/markdown/components.chip.md new file mode 100644 index 00000000..9b271147 --- /dev/null +++ b/packages/components/docs/markdown/components.chip.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@essex/components](./components.md) > [Chip](./components.chip.md) + +## Chip variable + +Signature: + +```typescript +Chip: React.FC +``` diff --git a/packages/components/docs/markdown/components.chipitem.canclose.md b/packages/components/docs/markdown/components.chipitem.canclose.md new file mode 100644 index 00000000..467e3004 --- /dev/null +++ b/packages/components/docs/markdown/components.chipitem.canclose.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@essex/components](./components.md) > [ChipItem](./components.chipitem.md) > [canClose](./components.chipitem.canclose.md) + +## ChipItem.canClose property + +Signature: + +```typescript +canClose?: boolean; +``` diff --git a/packages/components/docs/markdown/components.chipitem.iconname.md b/packages/components/docs/markdown/components.chipitem.iconname.md new file mode 100644 index 00000000..56e40bc1 --- /dev/null +++ b/packages/components/docs/markdown/components.chipitem.iconname.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@essex/components](./components.md) > [ChipItem](./components.chipitem.md) > [iconName](./components.chipitem.iconname.md) + +## ChipItem.iconName property + +Signature: + +```typescript +iconName?: string; +``` diff --git a/packages/components/docs/markdown/components.chipitem.key.md b/packages/components/docs/markdown/components.chipitem.key.md new file mode 100644 index 00000000..81b42dc9 --- /dev/null +++ b/packages/components/docs/markdown/components.chipitem.key.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@essex/components](./components.md) > [ChipItem](./components.chipitem.md) > [key](./components.chipitem.key.md) + +## ChipItem.key property + +Signature: + +```typescript +key: string; +``` diff --git a/packages/components/docs/markdown/components.chipitem.md b/packages/components/docs/markdown/components.chipitem.md new file mode 100644 index 00000000..b722710a --- /dev/null +++ b/packages/components/docs/markdown/components.chipitem.md @@ -0,0 +1,21 @@ + + +[Home](./index.md) > [@essex/components](./components.md) > [ChipItem](./components.chipitem.md) + +## ChipItem interface + +Signature: + +```typescript +export interface ChipItem +``` + +## Properties + +| Property | Modifiers | Type | Description | +| --- | --- | --- | --- | +| [canClose?](./components.chipitem.canclose.md) | | boolean | (Optional) | +| [iconName?](./components.chipitem.iconname.md) | | string | (Optional) | +| [key](./components.chipitem.key.md) | | string | | +| [text?](./components.chipitem.text.md) | | string | (Optional) | + diff --git a/packages/components/docs/markdown/components.chipitem.text.md b/packages/components/docs/markdown/components.chipitem.text.md new file mode 100644 index 00000000..773940e8 --- /dev/null +++ b/packages/components/docs/markdown/components.chipitem.text.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@essex/components](./components.md) > [ChipItem](./components.chipitem.md) > [text](./components.chipitem.text.md) + +## ChipItem.text property + +Signature: + +```typescript +text?: string; +``` diff --git a/packages/components/docs/markdown/components.chipitemprops.item.md b/packages/components/docs/markdown/components.chipitemprops.item.md new file mode 100644 index 00000000..30b7922f --- /dev/null +++ b/packages/components/docs/markdown/components.chipitemprops.item.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@essex/components](./components.md) > [ChipItemProps](./components.chipitemprops.md) > [item](./components.chipitemprops.item.md) + +## ChipItemProps.item property + +Signature: + +```typescript +item: ChipItem; +``` diff --git a/packages/components/docs/markdown/components.chipitemprops.md b/packages/components/docs/markdown/components.chipitemprops.md new file mode 100644 index 00000000..7bfcecc5 --- /dev/null +++ b/packages/components/docs/markdown/components.chipitemprops.md @@ -0,0 +1,21 @@ + + +[Home](./index.md) > [@essex/components](./components.md) > [ChipItemProps](./components.chipitemprops.md) + +## ChipItemProps interface + +Signature: + +```typescript +export interface ChipItemProps +``` + +## Properties + +| Property | Modifiers | Type | Description | +| --- | --- | --- | --- | +| [item](./components.chipitemprops.item.md) | | [ChipItem](./components.chipitem.md) | | +| [onClick?](./components.chipitemprops.onclick.md) | | () => void | (Optional) | +| [onClose?](./components.chipitemprops.onclose.md) | | () => void | (Optional) | +| [styles?](./components.chipitemprops.styles.md) | | [ChipsStyles](./components.chipsstyles.md) | (Optional) | + diff --git a/packages/components/docs/markdown/components.chipitemprops.onclick.md b/packages/components/docs/markdown/components.chipitemprops.onclick.md new file mode 100644 index 00000000..cf7a0ba0 --- /dev/null +++ b/packages/components/docs/markdown/components.chipitemprops.onclick.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@essex/components](./components.md) > [ChipItemProps](./components.chipitemprops.md) > [onClick](./components.chipitemprops.onclick.md) + +## ChipItemProps.onClick property + +Signature: + +```typescript +onClick?: () => void; +``` diff --git a/packages/components/docs/markdown/components.chipitemprops.onclose.md b/packages/components/docs/markdown/components.chipitemprops.onclose.md new file mode 100644 index 00000000..3c38d5a6 --- /dev/null +++ b/packages/components/docs/markdown/components.chipitemprops.onclose.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@essex/components](./components.md) > [ChipItemProps](./components.chipitemprops.md) > [onClose](./components.chipitemprops.onclose.md) + +## ChipItemProps.onClose property + +Signature: + +```typescript +onClose?: () => void; +``` diff --git a/packages/components/docs/markdown/components.chipitemprops.styles.md b/packages/components/docs/markdown/components.chipitemprops.styles.md new file mode 100644 index 00000000..2144887d --- /dev/null +++ b/packages/components/docs/markdown/components.chipitemprops.styles.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@essex/components](./components.md) > [ChipItemProps](./components.chipitemprops.md) > [styles](./components.chipitemprops.styles.md) + +## ChipItemProps.styles property + +Signature: + +```typescript +styles?: ChipsStyles; +``` diff --git a/packages/components/docs/markdown/components.chips.md b/packages/components/docs/markdown/components.chips.md new file mode 100644 index 00000000..5a79eb67 --- /dev/null +++ b/packages/components/docs/markdown/components.chips.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@essex/components](./components.md) > [Chips](./components.chips.md) + +## Chips variable + +Signature: + +```typescript +Chips: React.FC +``` diff --git a/packages/components/docs/markdown/components.chipsprops.items.md b/packages/components/docs/markdown/components.chipsprops.items.md new file mode 100644 index 00000000..7daef3de --- /dev/null +++ b/packages/components/docs/markdown/components.chipsprops.items.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@essex/components](./components.md) > [ChipsProps](./components.chipsprops.md) > [items](./components.chipsprops.items.md) + +## ChipsProps.items property + +Signature: + +```typescript +items: ChipItem[]; +``` diff --git a/packages/components/docs/markdown/components.chipsprops.md b/packages/components/docs/markdown/components.chipsprops.md new file mode 100644 index 00000000..b3737977 --- /dev/null +++ b/packages/components/docs/markdown/components.chipsprops.md @@ -0,0 +1,21 @@ + + +[Home](./index.md) > [@essex/components](./components.md) > [ChipsProps](./components.chipsprops.md) + +## ChipsProps interface + +Signature: + +```typescript +export interface ChipsProps +``` + +## Properties + +| Property | Modifiers | Type | Description | +| --- | --- | --- | --- | +| [items](./components.chipsprops.items.md) | | [ChipItem](./components.chipitem.md)\[\] | | +| [onClick?](./components.chipsprops.onclick.md) | | (key: string) => void | (Optional) | +| [onClose?](./components.chipsprops.onclose.md) | | (key: string) => void | (Optional) | +| [styles?](./components.chipsprops.styles.md) | | [ChipsStyles](./components.chipsstyles.md) | (Optional) | + diff --git a/packages/components/docs/markdown/components.chipsprops.onclick.md b/packages/components/docs/markdown/components.chipsprops.onclick.md new file mode 100644 index 00000000..93721773 --- /dev/null +++ b/packages/components/docs/markdown/components.chipsprops.onclick.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@essex/components](./components.md) > [ChipsProps](./components.chipsprops.md) > [onClick](./components.chipsprops.onclick.md) + +## ChipsProps.onClick property + +Signature: + +```typescript +onClick?: (key: string) => void; +``` diff --git a/packages/components/docs/markdown/components.chipsprops.onclose.md b/packages/components/docs/markdown/components.chipsprops.onclose.md new file mode 100644 index 00000000..b25779ce --- /dev/null +++ b/packages/components/docs/markdown/components.chipsprops.onclose.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@essex/components](./components.md) > [ChipsProps](./components.chipsprops.md) > [onClose](./components.chipsprops.onclose.md) + +## ChipsProps.onClose property + +Signature: + +```typescript +onClose?: (key: string) => void; +``` diff --git a/packages/components/docs/markdown/components.chipsprops.styles.md b/packages/components/docs/markdown/components.chipsprops.styles.md new file mode 100644 index 00000000..08730058 --- /dev/null +++ b/packages/components/docs/markdown/components.chipsprops.styles.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@essex/components](./components.md) > [ChipsProps](./components.chipsprops.md) > [styles](./components.chipsprops.styles.md) + +## ChipsProps.styles property + +Signature: + +```typescript +styles?: ChipsStyles; +``` diff --git a/packages/components/docs/markdown/components.chipsstyles.item.md b/packages/components/docs/markdown/components.chipsstyles.item.md new file mode 100644 index 00000000..a7f7bf4e --- /dev/null +++ b/packages/components/docs/markdown/components.chipsstyles.item.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@essex/components](./components.md) > [ChipsStyles](./components.chipsstyles.md) > [item](./components.chipsstyles.item.md) + +## ChipsStyles.item property + +Signature: + +```typescript +item?: ChipStyles; +``` diff --git a/packages/components/docs/markdown/components.chipsstyles.md b/packages/components/docs/markdown/components.chipsstyles.md new file mode 100644 index 00000000..a7610d0b --- /dev/null +++ b/packages/components/docs/markdown/components.chipsstyles.md @@ -0,0 +1,19 @@ + + +[Home](./index.md) > [@essex/components](./components.md) > [ChipsStyles](./components.chipsstyles.md) + +## ChipsStyles interface + +Signature: + +```typescript +export interface ChipsStyles +``` + +## Properties + +| Property | Modifiers | Type | Description | +| --- | --- | --- | --- | +| [item?](./components.chipsstyles.item.md) | | [ChipStyles](./components.chipstyles.md) | (Optional) | +| [root?](./components.chipsstyles.root.md) | | React.CSSProperties | (Optional) | + diff --git a/packages/components/docs/markdown/components.chipsstyles.root.md b/packages/components/docs/markdown/components.chipsstyles.root.md new file mode 100644 index 00000000..7357b95d --- /dev/null +++ b/packages/components/docs/markdown/components.chipsstyles.root.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@essex/components](./components.md) > [ChipsStyles](./components.chipsstyles.md) > [root](./components.chipsstyles.root.md) + +## ChipsStyles.root property + +Signature: + +```typescript +root?: React.CSSProperties; +``` diff --git a/packages/components/docs/markdown/components.chipstyles.close.md b/packages/components/docs/markdown/components.chipstyles.close.md new file mode 100644 index 00000000..fd05dd79 --- /dev/null +++ b/packages/components/docs/markdown/components.chipstyles.close.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@essex/components](./components.md) > [ChipStyles](./components.chipstyles.md) > [close](./components.chipstyles.close.md) + +## ChipStyles.close property + +Signature: + +```typescript +close?: IButtonStyles; +``` diff --git a/packages/components/docs/markdown/components.chipstyles.icon.md b/packages/components/docs/markdown/components.chipstyles.icon.md new file mode 100644 index 00000000..b895c80b --- /dev/null +++ b/packages/components/docs/markdown/components.chipstyles.icon.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@essex/components](./components.md) > [ChipStyles](./components.chipstyles.md) > [icon](./components.chipstyles.icon.md) + +## ChipStyles.icon property + +Signature: + +```typescript +icon?: IIconStyles; +``` diff --git a/packages/components/docs/markdown/components.chipstyles.md b/packages/components/docs/markdown/components.chipstyles.md new file mode 100644 index 00000000..c71a8b37 --- /dev/null +++ b/packages/components/docs/markdown/components.chipstyles.md @@ -0,0 +1,20 @@ + + +[Home](./index.md) > [@essex/components](./components.md) > [ChipStyles](./components.chipstyles.md) + +## ChipStyles interface + +Signature: + +```typescript +export interface ChipStyles +``` + +## Properties + +| Property | Modifiers | Type | Description | +| --- | --- | --- | --- | +| [close?](./components.chipstyles.close.md) | | IButtonStyles | (Optional) | +| [icon?](./components.chipstyles.icon.md) | | IIconStyles | (Optional) | +| [root?](./components.chipstyles.root.md) | | React.CSSProperties | (Optional) | + diff --git a/packages/components/docs/markdown/components.chipstyles.root.md b/packages/components/docs/markdown/components.chipstyles.root.md new file mode 100644 index 00000000..c617ca55 --- /dev/null +++ b/packages/components/docs/markdown/components.chipstyles.root.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@essex/components](./components.md) > [ChipStyles](./components.chipstyles.md) > [root](./components.chipstyles.root.md) + +## ChipStyles.root property + +Signature: + +```typescript +root?: React.CSSProperties; +``` diff --git a/packages/components/docs/markdown/components.md b/packages/components/docs/markdown/components.md index 71217c19..70a29cf5 100644 --- a/packages/components/docs/markdown/components.md +++ b/packages/components/docs/markdown/components.md @@ -36,6 +36,11 @@ | Interface | Description | | --- | --- | +| [ChipItem](./components.chipitem.md) | | +| [ChipItemProps](./components.chipitemprops.md) | | +| [ChipsProps](./components.chipsprops.md) | | +| [ChipsStyles](./components.chipsstyles.md) | | +| [ChipStyles](./components.chipstyles.md) | | | [ClippedGraphProps](./components.clippedgraphprops.md) | | | [CollapsiblePanelContainerProps](./components.collapsiblepanelcontainerprops.md) | The container that will have multiple CollapsiblePanel as children, passing the last and first params automatically. | | [CollapsiblePanelProps](./components.collapsiblepanelprops.md) | Props for the CollapsiblePanel | @@ -72,6 +77,8 @@ | Variable | Description | | --- | --- | | [ButtonChoiceGroup](./components.buttonchoicegroup.md) | ButtonChoiceGroup is a ChoiceGroup component that renders as buttons instead of radios. | +| [Chip](./components.chip.md) | | +| [Chips](./components.chips.md) | | | [ClippedGraph](./components.clippedgraph.md) | Creates a line chart that handles extreme distributions with a few clipping/wrapping strategies. The "clipped graph" concept was presented by Haihan Lin at VIS2019. https://vdl.sci.utah.edu/publications/2019\_infovis\_clipped\_graphs/ This chart can also produce a horizon plot, or be formatted to look like a sparkline. For examples of these variants, see the visual sandbox: https://visualsandbox.azurewebsites.net/\#/experiments/clipped-graphs | | [CollapsiblePanel](./components.collapsiblepanel.md) | CollapsiblePanel displays a Header and its child that collapse and expands with keyboard arrows, space, enter or onclick showing the 'hidden' rendering | | [CollapsiblePanelContainer](./components.collapsiblepanelcontainer.md) | Receives an array of CollapsiblePanel as children to render it with first and last props calculating it automatically | diff --git a/packages/components/docs/report/components.api.json b/packages/components/docs/report/components.api.json index dda792d3..bc3470f2 100644 --- a/packages/components/docs/report/components.api.json +++ b/packages/components/docs/report/components.api.json @@ -208,6 +208,635 @@ "endIndex": 5 } }, + { + "kind": "Variable", + "canonicalReference": "@essex/components!Chip:var", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "Chip: " + }, + { + "kind": "Reference", + "text": "React.FC", + "canonicalReference": "@types/react!~React.FC:type" + }, + { + "kind": "Content", + "text": "<" + }, + { + "kind": "Reference", + "text": "ChipItemProps", + "canonicalReference": "@essex/components!ChipItemProps:interface" + }, + { + "kind": "Content", + "text": ">" + } + ], + "isReadonly": true, + "releaseTag": "Public", + "name": "Chip", + "variableTypeTokenRange": { + "startIndex": 1, + "endIndex": 5 + } + }, + { + "kind": "Interface", + "canonicalReference": "@essex/components!ChipItem:interface", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "export interface ChipItem " + } + ], + "releaseTag": "Public", + "name": "ChipItem", + "preserveMemberOrder": false, + "members": [ + { + "kind": "PropertySignature", + "canonicalReference": "@essex/components!ChipItem#canClose:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "canClose?: " + }, + { + "kind": "Content", + "text": "boolean" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": true, + "releaseTag": "Public", + "name": "canClose", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + } + }, + { + "kind": "PropertySignature", + "canonicalReference": "@essex/components!ChipItem#iconName:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "iconName?: " + }, + { + "kind": "Content", + "text": "string" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": true, + "releaseTag": "Public", + "name": "iconName", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + } + }, + { + "kind": "PropertySignature", + "canonicalReference": "@essex/components!ChipItem#key:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "key: " + }, + { + "kind": "Content", + "text": "string" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": false, + "releaseTag": "Public", + "name": "key", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + } + }, + { + "kind": "PropertySignature", + "canonicalReference": "@essex/components!ChipItem#text:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "text?: " + }, + { + "kind": "Content", + "text": "string" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": true, + "releaseTag": "Public", + "name": "text", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + } + } + ], + "extendsTokenRanges": [] + }, + { + "kind": "Interface", + "canonicalReference": "@essex/components!ChipItemProps:interface", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "export interface ChipItemProps " + } + ], + "releaseTag": "Public", + "name": "ChipItemProps", + "preserveMemberOrder": false, + "members": [ + { + "kind": "PropertySignature", + "canonicalReference": "@essex/components!ChipItemProps#item:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "item: " + }, + { + "kind": "Reference", + "text": "ChipItem", + "canonicalReference": "@essex/components!ChipItem:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": false, + "releaseTag": "Public", + "name": "item", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + } + }, + { + "kind": "PropertySignature", + "canonicalReference": "@essex/components!ChipItemProps#onClick:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "onClick?: " + }, + { + "kind": "Content", + "text": "() => void" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": true, + "releaseTag": "Public", + "name": "onClick", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + } + }, + { + "kind": "PropertySignature", + "canonicalReference": "@essex/components!ChipItemProps#onClose:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "onClose?: " + }, + { + "kind": "Content", + "text": "() => void" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": true, + "releaseTag": "Public", + "name": "onClose", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + } + }, + { + "kind": "PropertySignature", + "canonicalReference": "@essex/components!ChipItemProps#styles:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "styles?: " + }, + { + "kind": "Reference", + "text": "ChipsStyles", + "canonicalReference": "@essex/components!ChipsStyles:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": true, + "releaseTag": "Public", + "name": "styles", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + } + } + ], + "extendsTokenRanges": [] + }, + { + "kind": "Variable", + "canonicalReference": "@essex/components!Chips:var", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "Chips: " + }, + { + "kind": "Reference", + "text": "React.FC", + "canonicalReference": "@types/react!~React.FC:type" + }, + { + "kind": "Content", + "text": "<" + }, + { + "kind": "Reference", + "text": "ChipsProps", + "canonicalReference": "@essex/components!ChipsProps:interface" + }, + { + "kind": "Content", + "text": ">" + } + ], + "isReadonly": true, + "releaseTag": "Public", + "name": "Chips", + "variableTypeTokenRange": { + "startIndex": 1, + "endIndex": 5 + } + }, + { + "kind": "Interface", + "canonicalReference": "@essex/components!ChipsProps:interface", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "export interface ChipsProps " + } + ], + "releaseTag": "Public", + "name": "ChipsProps", + "preserveMemberOrder": false, + "members": [ + { + "kind": "PropertySignature", + "canonicalReference": "@essex/components!ChipsProps#items:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "items: " + }, + { + "kind": "Reference", + "text": "ChipItem", + "canonicalReference": "@essex/components!ChipItem:interface" + }, + { + "kind": "Content", + "text": "[]" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": false, + "releaseTag": "Public", + "name": "items", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 3 + } + }, + { + "kind": "PropertySignature", + "canonicalReference": "@essex/components!ChipsProps#onClick:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "onClick?: " + }, + { + "kind": "Content", + "text": "(key: string) => void" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": true, + "releaseTag": "Public", + "name": "onClick", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + } + }, + { + "kind": "PropertySignature", + "canonicalReference": "@essex/components!ChipsProps#onClose:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "onClose?: " + }, + { + "kind": "Content", + "text": "(key: string) => void" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": true, + "releaseTag": "Public", + "name": "onClose", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + } + }, + { + "kind": "PropertySignature", + "canonicalReference": "@essex/components!ChipsProps#styles:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "styles?: " + }, + { + "kind": "Reference", + "text": "ChipsStyles", + "canonicalReference": "@essex/components!ChipsStyles:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": true, + "releaseTag": "Public", + "name": "styles", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + } + } + ], + "extendsTokenRanges": [] + }, + { + "kind": "Interface", + "canonicalReference": "@essex/components!ChipsStyles:interface", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "export interface ChipsStyles " + } + ], + "releaseTag": "Public", + "name": "ChipsStyles", + "preserveMemberOrder": false, + "members": [ + { + "kind": "PropertySignature", + "canonicalReference": "@essex/components!ChipsStyles#item:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "item?: " + }, + { + "kind": "Reference", + "text": "ChipStyles", + "canonicalReference": "@essex/components!ChipStyles:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": true, + "releaseTag": "Public", + "name": "item", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + } + }, + { + "kind": "PropertySignature", + "canonicalReference": "@essex/components!ChipsStyles#root:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "root?: " + }, + { + "kind": "Reference", + "text": "React.CSSProperties", + "canonicalReference": "@types/react!~React.CSSProperties:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": true, + "releaseTag": "Public", + "name": "root", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + } + } + ], + "extendsTokenRanges": [] + }, + { + "kind": "Interface", + "canonicalReference": "@essex/components!ChipStyles:interface", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "export interface ChipStyles " + } + ], + "releaseTag": "Public", + "name": "ChipStyles", + "preserveMemberOrder": false, + "members": [ + { + "kind": "PropertySignature", + "canonicalReference": "@essex/components!ChipStyles#close:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "close?: " + }, + { + "kind": "Reference", + "text": "IButtonStyles", + "canonicalReference": "@fluentui/react!IButtonStyles:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": true, + "releaseTag": "Public", + "name": "close", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + } + }, + { + "kind": "PropertySignature", + "canonicalReference": "@essex/components!ChipStyles#icon:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "icon?: " + }, + { + "kind": "Reference", + "text": "IIconStyles", + "canonicalReference": "@fluentui/react!IIconStyles:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": true, + "releaseTag": "Public", + "name": "icon", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + } + }, + { + "kind": "PropertySignature", + "canonicalReference": "@essex/components!ChipStyles#root:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "root?: " + }, + { + "kind": "Reference", + "text": "React.CSSProperties", + "canonicalReference": "@types/react!~React.CSSProperties:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": true, + "releaseTag": "Public", + "name": "root", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + } + } + ], + "extendsTokenRanges": [] + }, { "kind": "Variable", "canonicalReference": "@essex/components!ClippedGraph:var", diff --git a/packages/components/docs/report/components.api.md b/packages/components/docs/report/components.api.md index ca1d11a5..03ba389d 100644 --- a/packages/components/docs/report/components.api.md +++ b/packages/components/docs/report/components.api.md @@ -9,6 +9,7 @@ import type { CSSProperties } from 'react'; import type { FC } from 'react'; import type { IButtonProps } from '@fluentui/react'; +import type { IButtonStyles } from '@fluentui/react'; import type { ICheckboxProps } from '@fluentui/react'; import type { IChoiceGroupProps } from '@fluentui/react'; import type { IColorPickerProps } from '@fluentui/react'; @@ -21,6 +22,7 @@ import type { IContextualMenuProps } from '@fluentui/react'; import type { IDropdownOption } from '@fluentui/react'; import type { IDropdownProps } from '@fluentui/react'; import type { IIconProps } from '@fluentui/react'; +import type { IIconStyles } from '@fluentui/react'; import type { ILabelProps } from '@fluentui/react'; import type { ILinkProps } from '@fluentui/react'; import type { INavProps } from '@fluentui/react'; @@ -40,6 +42,80 @@ import type { default as React_2 } from 'react'; // @public export const ButtonChoiceGroup: React.FC; +// Warning: (ae-missing-release-tag) "Chip" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public (undocumented) +export const Chip: React.FC; + +// Warning: (ae-missing-release-tag) "ChipItem" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public (undocumented) +export interface ChipItem { + // (undocumented) + canClose?: boolean; + // (undocumented) + iconName?: string; + // (undocumented) + key: string; + // (undocumented) + text?: string; +} + +// Warning: (ae-missing-release-tag) "ChipItemProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public (undocumented) +export interface ChipItemProps { + // (undocumented) + item: ChipItem; + // (undocumented) + onClick?: () => void; + // (undocumented) + onClose?: () => void; + // (undocumented) + styles?: ChipsStyles; +} + +// Warning: (ae-missing-release-tag) "Chips" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public (undocumented) +export const Chips: React.FC; + +// Warning: (ae-missing-release-tag) "ChipsProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public (undocumented) +export interface ChipsProps { + // (undocumented) + items: ChipItem[]; + // (undocumented) + onClick?: (key: string) => void; + // (undocumented) + onClose?: (key: string) => void; + // (undocumented) + styles?: ChipsStyles; +} + +// Warning: (ae-missing-release-tag) "ChipsStyles" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public (undocumented) +export interface ChipsStyles { + // (undocumented) + item?: ChipStyles; + // (undocumented) + root?: React.CSSProperties; +} + +// Warning: (ae-missing-release-tag) "ChipStyles" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public (undocumented) +export interface ChipStyles { + // (undocumented) + close?: IButtonStyles; + // (undocumented) + icon?: IIconStyles; + // (undocumented) + root?: React.CSSProperties; +} + // Warning: (ae-missing-release-tag) "ClippedGraph" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public diff --git a/packages/components/src/Chips/Chip.hooks.ts b/packages/components/src/Chips/Chip.hooks.ts new file mode 100644 index 00000000..c6304f7a --- /dev/null +++ b/packages/components/src/Chips/Chip.hooks.ts @@ -0,0 +1,22 @@ +/*! + * Copyright (c) Microsoft. All rights reserved. + * Licensed under the MIT license. See LICENSE file in the project. + */ +import type { ChipStyles } from './Chips.types.js' +import type { IIconProps } from '@fluentui/react' + +import { useMemo } from 'react' + +export function useCloseIconProps(styles: ChipStyles): IIconProps { + return useMemo( + () => ({ + iconName: 'Cancel', + styles: { + root: { + fontSize: styles?.root?.fontSize || 12, + }, + }, + }), + [styles], + ) +} diff --git a/packages/components/src/Chips/Chip.styles.ts b/packages/components/src/Chips/Chip.styles.ts new file mode 100644 index 00000000..3b779da9 --- /dev/null +++ b/packages/components/src/Chips/Chip.styles.ts @@ -0,0 +1,53 @@ +/*! + * Copyright (c) Microsoft. All rights reserved. + * Licensed under the MIT license. See LICENSE file in the project. + */ +import type { ChipStyles } from './Chips.types.js' + +import { useTheme } from '@fluentui/react' +import { merge } from 'lodash-es' +import { useMemo } from 'react' + +export function useChipStyles(styles?: ChipStyles): ChipStyles { + const theme = useTheme() + return useMemo( + () => ({ + root: { + gap: 8, + alignItems: 'center', + display: 'flex', + padding: '2px 6px', + borderRadius: 6, + border: `1px solid ${theme.palette.neutralSecondary}`, + ...styles?.root, + }, + icon: styles?.icon, + close: merge( + { + root: { + borderRadius: 0, + padding: 0, + margin: 0, + marginLeft: 4, + width: 16, + height: 24, + fontSize: 12, + color: theme.palette.neutralSecondary, + }, + rootHovered: { + color: theme.palette.themePrimary, + background: 'transparent', + }, + rootPressed: { + background: 'transparent', + }, + icon: { + margin: 0, + }, + }, + styles?.close, + ), + }), + [theme, styles], + ) +} diff --git a/packages/components/src/Chips/Chip.tsx b/packages/components/src/Chips/Chip.tsx new file mode 100644 index 00000000..06a5e6a5 --- /dev/null +++ b/packages/components/src/Chips/Chip.tsx @@ -0,0 +1,33 @@ +/*! + * Copyright (c) Microsoft. All rights reserved. + * Licensed under the MIT license. See LICENSE file in the project. + */ + +import { useCloseIconProps } from './Chip.hooks.js' +import { useChipStyles } from './Chip.styles.js' +import type { ChipItemProps } from './Chips.types.js' +import { Icon, IconButton } from '@fluentui/react' +import { memo } from 'react' + +export const Chip: React.FC = memo(function Chip({ + item, + styles, + onClose, + onClick, +}): JSX.Element { + const _styles = useChipStyles(styles) + const closeProps = useCloseIconProps(_styles) + return ( +
+ {item.iconName && } + {item.text &&
{item.text}
} + {item.canClose && ( + + )} +
+ ) +}) diff --git a/packages/components/src/Chips/Chips.stories.tsx b/packages/components/src/Chips/Chips.stories.tsx new file mode 100644 index 00000000..d4e18a58 --- /dev/null +++ b/packages/components/src/Chips/Chips.stories.tsx @@ -0,0 +1,133 @@ +/*! + * Copyright (c) Microsoft. All rights reserved. + * Licensed under the MIT license. See LICENSE file in the project. + */ +import { ActionButton } from '@fluentui/react' +import { useCallback, useState } from 'react' + +import { Chips } from './Chips.js' +import type { ChipsProps } from './Chips.types.js' + +const meta = { + title: '@essex:components/Chips', + component: Chips, +} +export default meta + +const PrimaryComponent: React.FC = (args) => { + const [items, setItems] = useState(args.items) + const handleClickAdd = useCallback(() => { + const rando = Math.round(Math.random() * 1000) + console.log('adding chip', rando) + setItems((prev) => [ + ...prev, + { + key: `${rando}`, + text: `Chip ${rando}`, + canClose: true, + }, + ]) + }, []) + const handleClose = useCallback((key: string) => { + console.log('removing chip', key) + setItems((prev) => prev.filter((i) => i.key !== key)) + }, []) + const handleClickChip = useCallback( + (key: string) => console.log('clicked chip', key), + [], + ) + return ( +
+ +
+ + Add chip + +
+
+ ) +} + +const defaultChips = [ + { + key: 'chip-1', + text: 'Chip 1', + iconName: 'Calendar', + canClose: true, + }, + { + key: 'chip-2', + text: 'Chip 2', + canClose: true, + }, + { + key: 'chip-6', + iconName: 'TextDocument', + canClose: true, + }, + { + key: 'chip-3', + text: 'Chip 3', + iconName: 'Filter', + }, + { + key: 'chip-4', + text: 'Chip 4', + }, + { + key: 'chip-5', + iconName: 'Home', + }, +] + +export const Primary = { + render: (args: ChipsProps) => , + args: { + items: defaultChips, + }, +} + +export const Customized = { + render: (args: ChipsProps) => , + args: { + items: defaultChips, + styles: { + root: { + border: '1px solid orange', + background: 'aliceblue', + padding: 8, + fontSize: 24, + borderRadius: 12, + }, + item: { + background: 'coral', + padding: 12, + borderRadius: 12, + }, + icon: { + root: { + color: 'white', + }, + }, + close: { + root: { + color: 'white', + }, + }, + }, + }, +} diff --git a/packages/components/src/Chips/Chips.styles.ts b/packages/components/src/Chips/Chips.styles.ts new file mode 100644 index 00000000..edc29d62 --- /dev/null +++ b/packages/components/src/Chips/Chips.styles.ts @@ -0,0 +1,27 @@ +/*! + * Copyright (c) Microsoft. All rights reserved. + * Licensed under the MIT license. See LICENSE file in the project. + */ +import { useChipStyles } from './Chip.styles.js' +import type { ChipsStyles } from './Chips.types.js' + +import { useTheme } from '@fluentui/react' +import { useMemo } from 'react' + +export function useChipsStyles(styles?: ChipsStyles): ChipsStyles { + const theme = useTheme() + const itemStyles = useChipStyles(styles?.item) + return useMemo( + () => ({ + root: { + display: 'flex', + gap: 8, + color: theme.palette.neutralPrimary, + cursor: 'pointer', + ...styles?.root, + }, + item: itemStyles, + }), + [theme, styles, itemStyles], + ) +} diff --git a/packages/components/src/Chips/Chips.tsx b/packages/components/src/Chips/Chips.tsx new file mode 100644 index 00000000..4e2e39e3 --- /dev/null +++ b/packages/components/src/Chips/Chips.tsx @@ -0,0 +1,34 @@ +/*! + * Copyright (c) Microsoft. All rights reserved. + * Licensed under the MIT license. See LICENSE file in the project. + */ + +import { Chip } from './Chip.js' +import { useChipsStyles } from './Chips.styles.js' +import type { ChipsProps } from './Chips.types.js' +import { memo } from 'react' + +export const Chips: React.FC = memo(function Chips({ + items, + styles, + onClose, + onClick, +}): JSX.Element { + const _styles = useChipsStyles(styles) + return ( +
+ {items.map((item) => { + const handleClick = () => onClick?.(item.key) + const handleClose = () => onClose?.(item.key) + return ( + + ) + })} +
+ ) +}) diff --git a/packages/components/src/Chips/Chips.types.ts b/packages/components/src/Chips/Chips.types.ts new file mode 100644 index 00000000..faae636b --- /dev/null +++ b/packages/components/src/Chips/Chips.types.ts @@ -0,0 +1,37 @@ +/*! + * Copyright (c) Microsoft. All rights reserved. + * Licensed under the MIT license. See LICENSE file in the project. + */ +import type { IButtonStyles, IIconStyles } from '@fluentui/react' + +export interface ChipItem { + key: string + text?: string + iconName?: string + canClose?: boolean +} + +export interface ChipStyles { + root?: React.CSSProperties + icon?: IIconStyles + close?: IButtonStyles +} + +export interface ChipsStyles { + root?: React.CSSProperties + item?: ChipStyles +} + +export interface ChipsProps { + items: ChipItem[] + onClick?: (key: string) => void + onClose?: (key: string) => void + styles?: ChipsStyles +} + +export interface ChipItemProps { + item: ChipItem + onClick?: () => void + onClose?: () => void + styles?: ChipsStyles +} diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index ae8325af..733e68cc 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -3,6 +3,9 @@ * Licensed under the MIT license. See LICENSE file in the project. */ export * from './ButtonChoiceGroup/ButtonChoiceGroup.js' +export * from './Chips/Chips.js' +export * from './Chips/Chip.js' +export * from './Chips/Chips.types.js' export * from './ClippedGraph/ClippedGraph.js' export * from './CollapsiblePanel/CollapsiblePanel.js' export * from './CollapsiblePanel/CollapsiblePanel.types.js'