@chayns-components/core

# @chayns-components/core React component package providing 46 documented components for chayns applications. Documented components: `Accordion`, `AmountControl`, `AnimatedNumber`, `Badge`, `Button`, `Checkbox`, `ComboBox`, `ContentCard`, `ContextMenu`, `ExpandableContent`, `FileInput`, `FileList`, `FileSelect`, `Filter`, `FilterButtons`, `GridImage`, `GroupedImage`, `HighlightSlider`, `Icon`, `Input`, `List`, `Masonry`, `MentionFinder`, `MultiActionButton`, `NumberInput`, `Popup`, `ProgressBar`, `RadioButton`, `ScrollView`, `SearchBox`, `SearchInput`, `SelectButton`, `SetupWizard`, `SetupWizardItem`, `SharingBar`, `SharingButton`, `Signature`, `Skeleton`, `Slider`, `SliderButton`, `SmallWaitCursor`, `TagInput`, `TextArea`, `Tooltip`, `Truncation`, `VerificationBadge`. ## Import ```ts import { Accordion, AmountControl, AnimatedNumber } from '@chayns-components/core'; ``` ## Typical Usage ```tsx <Accordion /> ``` ## Components - `Accordion` - `AmountControl` - `AnimatedNumber` - `Badge` - `Button` - `Checkbox` - `ComboBox` - `ContentCard` - `ContextMenu` - `ExpandableContent` - `FileInput` - `FileList` - `FileSelect` - `Filter` - `FilterButtons` - `GridImage` - `GroupedImage` - `HighlightSlider` - `Icon` - `Input` - `List` - `Masonry` - `MentionFinder` - `MultiActionButton` - `NumberInput` - `Popup` - `ProgressBar` - `RadioButton` - `ScrollView` - `SearchBox` - `SearchInput` - `SelectButton` - `SetupWizard` - `SetupWizardItem` - `SharingBar` - `SharingButton` - `Signature` - `Skeleton` - `Slider` - `SliderButton` - `SmallWaitCursor` - `TagInput` - `TextArea` - `Tooltip` - `Truncation` - `VerificationBadge` ## Accordion `Accordion` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { Accordion } from '@chayns-components/core'; ``` ### Examples #### Dynamic Loading Template ```tsx <Accordion /> ``` #### General ```tsx <Accordion title={'Lorem ipsum dolor sit amet, consetetur sadipscing elitr'} > { <AccordionContent> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </AccordionContent> } </Accordion> ``` #### Controlled Accordion ```tsx <Accordion title={'Lorem ipsum dolor sit amet, consetetur sadipscing elitr'} > { <AccordionContent> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </AccordionContent> } </Accordion> ``` #### Multiple Accordions ```tsx <Accordion /> ``` #### Dynamic Loading ```tsx <Accordion /> ``` #### Wrapped Accordions ```tsx <Accordion title={'Lorem ipsum dolor sit amet'} > { [ <AccordionContent> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor si amet. </AccordionContent>, <AccordionGroup> <Accordion key="first" title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua" > <AccordionContent> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </AccordionContent> </Accordion> <Accordion key="second" title="Justo duo dolores et ea rebum"> <AccordionContent> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </AccordionContent> <AccordionGroup> <Accordion key="first_wrapped" title="At vero eos et accusam"> <AccordionContent> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </AccordionContent> </Accordion> <Accordion key="second_wrapped" title="Justo duo dolores et ea rebum"> <AccordionContent> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </AccordionContent> <AccordionGroup> <Accordion key="first_deep_wrapped" title="At vero eos et accusam"> <AccordionContent> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </AccordionContent> </Accordion> <Accordion key="first_deep_wrapped" title="Justo duo dolores et ea rebum" > <AccordionContent> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </AccordionContent> </Accordion> </AccordionGroup> </Accordion> </AccordionGroup> </Accordion> </AccordionGroup>, ] } </Accordion> ``` #### Accordion With Badge ```tsx <Accordion rightElement={<Badge>10.000 Euro</Badge>} title={'Lorem ipsum dolor sit amet'} > { <AccordionContent> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </AccordionContent> } </Accordion> ``` #### Accordion With Title Element ```tsx <Accordion title={'Lorem ipsum dolor sit amet'} titleElement={<Icon icons={['fa fa-download']} />} > { <AccordionContent> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </AccordionContent> } </Accordion> ``` #### Accordion With Search ```tsx <Accordion onSearchChange={() => {}} searchPlaceholder={'Suchen'} title={'Lorem ipsum dolor sit amet'} > { <AccordionContent> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </AccordionContent> } </Accordion> ``` #### Accordion With Badge And Search ```tsx <Accordion onSearchChange={() => {}} rightElement={<Badge>124</Badge>} searchPlaceholder={'Suchen'} title={'Lorem ipsum dolor sit amet'} > { <AccordionContent> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </AccordionContent> } </Accordion> ``` #### Disabled Accordion ```tsx <Accordion isDisabled title={'Lorem ipsum dolor sit amet'} > { <AccordionContent> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </AccordionContent> } </Accordion> ``` #### Scrollable Accordion ```tsx <Accordion bodyMaxHeight={200} onBodyScroll={console.debug} title={'Lorem ipsum dolor sit amet'} > { <AccordionContent> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </AccordionContent> } </Accordion> ``` #### With Accordion Items ```tsx <Accordion title={'Lorem ipsum dolor sit amet'} > { <> <AccordionItem>Lorem ipsum dolor sit amet</AccordionItem> <AccordionItem>Consetetur sadipscing elitr</AccordionItem> <AccordionItem>Sed diam nonumy eirmod tempor invidunt ut labore</AccordionItem> <AccordionItem>Et dolore magna aliquyam erat</AccordionItem> <AccordionGroup isWrapped> <Accordion key="first" title="At vero eos et accusam"> <AccordionItem>Consetetur sadipscing elitr</AccordionItem> <AccordionItem>Sed diam nonumy eirmod tempor invidunt ut labore</AccordionItem> </Accordion> </AccordionGroup> </> } </Accordion> ``` #### Input As Title ```tsx <Accordion title={'Lorem ipsum'} onTitleInputChange={undefined} titleInputProps={{ rightElement: ( <div style={{ backgroundColor: '#3377b6', height: '42px', width: '42px', display: 'flex', alignItems: 'center', justifyContent: 'center', }} > <Icon icons={['ts-calling-code']} size={25} color={'white'} /> </div> ), }} > { <AccordionContent> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </AccordionContent> } </Accordion> ``` #### Wrapped Accordion With List Items ```tsx <Accordion title={'Lorem ipsum dolor sit amet'} > { <> <List> <ListItem images={[locationImages[0] ?? '']} title="Tolor tantem"> <ListItemContent>Consetetur sadipscing elitr</ListItemContent> </ListItem> <ListItem images={[locationImages[0] ?? '']} shouldHideIndicator title="Tolor tantem" > <ListItemContent>Consetetur sadipscing elitr</ListItemContent> </ListItem> <ListItem title="Tolor tantem"> <ListItemContent>Consetetur sadipscing elitr</ListItemContent> </ListItem> <ListItem shouldHideIndicator title="Tolor tantem"> <ListItemContent>Consetetur sadipscing elitr</ListItemContent> </ListItem> </List> <AccordionGroup isWrapped> <Accordion title="Lorem ipsum"> <List> <ListItem images={[locationImages[0] ?? '']} title="Tolor tantem"> <ListItemContent>Consetetur sadipscing elitr</ListItemContent> </ListItem> <ListItem images={[locationImages[0] ?? '']} shouldHideIndicator title="Tolor tantem" > <ListItemContent>Consetetur sadipscing elitr</ListItemContent> </ListItem> <ListItem title="Tolor tantem"> <ListItemContent>Consetetur sadipscing elitr</ListItemContent> </ListItem> <ListItem shouldHideIndicator title="Tolor tantem"> <ListItemContent>Consetetur sadipscing elitr</ListItemContent> </ListItem> </List> </Accordion> <Accordion title="Lorem ipsum sit dolor atem"> <AccordionGroup isWrapped> <Accordion title="Dolor sit amet"> <List> <ListItem images={[locationImages[0] ?? '']} title="Tolor tantem"> <ListItemContent>Consetetur sadipscing elitr</ListItemContent> </ListItem> <ListItem images={[locationImages[0] ?? '']} shouldHideIndicator title="Tolor tantem" > <ListItemContent>Consetetur sadipscing elitr</ListItemContent> </ListItem> <ListItem title="Tolor tantem"> <ListItemContent>Consetetur sadipscing elitr</ListItemContent> </ListItem> <ListItem shouldHideIndicator title="Tolor tantem"> <ListItemContent>Consetetur sadipscing elitr</ListItemContent> </ListItem> </List> </Accordion> </AccordionGroup> </Accordion> </AccordionGroup> </> } </Accordion> ``` #### Hidden Bottom Lines ```tsx <Accordion /> ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `Accordion` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## AmountControl `AmountControl` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { AmountControl } from '@chayns-components/core'; ``` ### Examples #### General ```tsx <AmountControl /> ``` #### With Label ```tsx <AmountControl label={'1,43'} /> ``` #### With Max Amount ```tsx <AmountControl maxAmount={1} /> ``` #### Reset Amount ```tsx <AmountControl /> ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `AmountControl` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## AnimatedNumber `AnimatedNumber` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { AnimatedNumber } from '@chayns-components/core'; ``` ### Examples #### General ```tsx <AnimatedNumber value={935936} /> ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `AnimatedNumber` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## Badge `Badge` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { Badge } from '@chayns-components/core'; ``` ### Examples #### General ```tsx <Badge> {'10.000 Euro'} </Badge> ``` #### Single Number ```tsx <Badge backgroundColor={'#ff0000'} fontColor={'#ffffff'} > {'4'} </Badge> ``` #### Empty ```tsx <Badge> {undefined} </Badge> ``` #### Border ```tsx <Badge design={BadgeDesign.BORDER} > {'SYSTEM'} </Badge> ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `Badge` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## Button `Button` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { Button } from '@chayns-components/core'; ``` ### Examples #### General ```tsx <Button isDisabled={false} isSecondary={false} shouldStopPropagation={false} > {'Click me!'} </Button> ``` #### Icon Button ```tsx <Button isDisabled={false} isSecondary={false} shouldStopPropagation={false} icon={'fa fa-rocket'} /> ``` #### Button With Icon ```tsx <Button isDisabled={false} isSecondary={false} shouldStopPropagation={false} icon={'fa fa-rocket'} > {'Click me!'} </Button> ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `Button` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## Checkbox `Checkbox` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { Checkbox } from '@chayns-components/core'; ``` ### Examples #### General ```tsx <Checkbox> {'Try me out!'} </Checkbox> ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `Checkbox` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## ComboBox `ComboBox` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { ComboBox } from '@chayns-components/core'; ``` ### Examples #### General ```tsx <ComboBox lists={[ { list: [ { text: 'Margherita', value: 1, }, ], }, ]} placeholder={'Select Pizza'} /> ``` #### Custom ```tsx <ComboBox lists={[ { list: [ { icons: ['fa fa-users'], imageUrl: 'https://picsum.photos/200', rightElement: <Badge>7</Badge>, text: 'Allgemein', value: 1, }, { icons: ['fa fa-user'], imageUrl: 'https://picsum.photos/200', rightElement: <Badge>33</Badge>, text: 'Persönlich', value: 2, }, { icons: ['fa fa-hashtag-lock'], imageUrl: 'https://picsum.photos/200', rightElement: <Badge>1</Badge>, text: 'Die Doppelnull-Crew', value: 3, }, { icons: ['fa fa-question-circle'], imageUrl: 'https://picsum.photos/200', rightElement: <Badge>12</Badge>, text: 'Bereich mit Hilfe & FAQ', value: 4, }, { icons: ['fa fa-sign-out-alt'], imageUrl: 'https://picsum.photos/200', rightElement: <Badge>10</Badge>, text: 'Abmelden', value: 5, }, ], }, ]} placeholder={'Auswählen'} direction={DropdownDirection.BOTTOM_LEFT} shouldDropDownUseMaxItemWidth shouldShowTransparentBackground shouldUseCurrentItemWidth /> ``` #### Own Width ```tsx <ComboBox lists={[ { list: [ { text: 'Margherita', value: 1, }, ], }, ]} placeholder={'Select Pizza'} bodyWidth={300} direction={DropdownDirection.LEFT} shouldUseFullWidth /> ``` #### With Prefix ```tsx <ComboBox lists={[ { list: [ { text: 'Margherita', value: 1, }, ], }, ]} placeholder={'Select Pizza'} prefix={'Von'} /> ``` #### With Images ```tsx <ComboBox lists={[ { list: [ { imageUrl: 'https://picsum.photos/200', text: 'Schnellstart', value: 0, }, { imageUrl: 'https://picsum.photos/200', text: 'Flexibles Design', value: 1, }, { imageUrl: 'https://picsum.photos/200', text: 'Intuitive Bedienung', value: 2, }, { imageUrl: 'https://picsum.photos/200', text: 'Integration', value: 3, }, { imageUrl: 'https://picsum.photos/200', text: 'Navigation', value: 4, }, ], }, ]} placeholder={'Select Pizza'} selectedItem={{ imageUrl: 'https://picsum.photos/200', text: 'Flexibles Design', value: 1, }} /> ``` #### With Suffix Elements ```tsx <ComboBox lists={[ { list: [ { imageUrl: 'https://picsum.photos/200', suffixElement: <Icon icons={['fal fa-image']} />, text: 'Schnellstart', value: 0, }, { imageUrl: 'https://picsum.photos/200', text: 'Flexibles Design', value: 1, }, { imageUrl: 'https://picsum.photos/200', text: 'Intuitive Bedienung', suffixElement: <Icon icons={['fa fa-user']} />, value: 2, }, { imageUrl: 'https://picsum.photos/200', text: 'Integration', value: 3, }, { imageUrl: 'https://picsum.photos/200', text: 'Navigation', value: 4, }, ], }, ]} placeholder={'Select Pizza'} selectedItem={{ imageUrl: 'https://picsum.photos/200', text: 'Intuitive Bedienung', suffixElement: <Icon icons={['far fa-user']} />, value: 2, }} /> ``` #### With Icons ```tsx <ComboBox lists={[ { list: [ { icons: ['ts-calling-code'], text: 'Schnellstart', value: 0, }, { icons: ['ts-calling-code'], text: 'Flexibles Design', value: 1, }, { icons: ['ts-calling-code'], text: 'Intuitive Bedienung', value: 2, }, { icons: ['ts-calling-code'], text: 'Integration', value: 3, }, { icons: ['ts-calling-code'], text: 'Navigation', value: 4, }, ], }, ]} placeholder={'Select Pizza'} selectedItem={{ icons: ['ts-calling-code'], text: 'Flexibles Design', value: 1, }} /> ``` #### With Groups ```tsx <ComboBox lists={[ { groupName: 'Autos', list: [ { text: 'Audi', value: 0, }, { text: 'BMW', value: 1, }, { text: 'Toyota', value: 2, }, { text: 'Volkswagen', value: 3, }, { text: 'Nissan', value: 4, }, ], }, { groupName: 'Fußballvereine', list: [ { text: 'Bayern München', value: 0, }, { text: 'Dortmund', value: 1, }, { text: 'Real Madrid', value: 2, }, { text: 'Man City', value: 3, }, { text: 'Barcelona', value: 4, }, ], }, ]} placeholder={'Select Pizza'} /> ``` #### With Subtext ```tsx <ComboBox lists={[ { list: [ { imageUrl: 'https://tsimg.cloud/PM4-7NBYY/profile_w128.png', value: 'PM4-7NBYY', text: 'David Rechenberg, 39 Jahre', subtext: 'Mathelehrer', }, { imageUrl: 'https://tsimg.cloud/9JC-14TQZ/profile_w128.png', value: '9JC-14TQZ', text: 'Gerhard Kaiser, 55 Jahre', subtext: 'Geschichtslehrer', }, { imageUrl: 'https://tsimg.cloud/AFQ-2VL54/profile_w128.png', value: 'AFQ-2VL54', text: 'Claudia Schreiber, 57 Jahre', subtext: 'Deutschlehrerin', }, { imageUrl: 'https://tsimg.cloud/FCB-GEU25/profile_w128.png', value: 'FCB-GEU25', text: 'Lukas Waldmann, 24 Jahre', subtext: 'Biologielehrer', }, { imageUrl: 'https://tsimg.cloud/R3U-8B6ZJ/profile_w128.png', value: 'R3U-8B6ZJ', text: 'Emily Taylor, 29 Jahre', subtext: 'Englischlehrerin', }, { imageUrl: 'https://tsimg.cloud/TER-1VS4Q/profile_w128.png', value: 'TER-1VS4Q', text: 'Paul Bitner, 28 Jahre', subtext: 'Informatiklehrer', }, { imageUrl: 'https://tsimg.cloud/IFZ-HFCC6/profile_w128.png', value: 'IFZ-HFCC6', text: 'Rudi Ratlos, 20 Jahre', subtext: 'Informatik-Referent', }, ], }, ]} placeholder={'Agent wählen'} shouldShowBigImage shouldShowClearIcon shouldShowRoundImage shouldUseFullWidth /> ``` #### With Big Image ```tsx <ComboBox lists={[ { list: [ { imageUrl: 'https://tsimg.cloud/6C8-5QJDF/profile_w128.png', value: '6C8-5QJDF', text: 'Albert, 55 Jahre', }, { imageUrl: 'https://tsimg.cloud/DFU-I2R6I/profile_w128.png', value: 'DFU-I2R6I', text: 'Anna, 30 Jahre', }, { imageUrl: 'https://tsimg.cloud/SY9-LT5TA/profile_w128.png', value: 'SY9-LT5TA', text: 'Elisabeth, 80 Jahre', }, { imageUrl: 'https://tsimg.cloud/BGJ-DTZBH/profile_w128.png', value: 'BGJ-DTZBH', text: 'Jonas, 20 Jahre', }, { imageUrl: 'https://tsimg.cloud/672-9GQ3J/profile_w128.png', value: '672-9GQ3J', text: 'Lisa, 10 Jahre', }, { imageUrl: 'https://tsimg.cloud/CVW-MDH7R/profile_w128.png', value: 'CVW-MDH7R', text: 'Stefan, 35 Jahre', subtext: 'Informatiklehrer', }, ], }, ]} placeholder={'Agent wählen'} shouldShowBigImage shouldShowClearIcon shouldShowRoundImage shouldUseFullWidth /> ``` #### With Input ```tsx <ComboBox lists={[ { list: [ { text: '12px', value: 0, }, { text: '13px', value: 1, }, { text: '14px', value: 2, }, { text: '15px', value: 3, }, { text: '16px', value: 4, }, { text: '20px', value: 5, }, { text: '24px', value: 6, }, ], }, ]} placeholder={'Fontsize'} /> ``` #### With Text Style ```tsx <ComboBox lists={[ { list: [ { text: 'Normal', value: 0, }, { text: 'Headline 1', value: 1, textStyles: { tagName: 'h1', styles: { margin: 0 }, }, }, { text: 'Headline 2', value: 2, textStyles: { tagName: 'h2', styles: { margin: 0 }, }, }, { text: 'Headline 3', value: 3, textStyles: { tagName: 'h3', styles: { margin: 0 }, }, }, { text: 'headline 4', value: 4, textStyles: { tagName: 'h4', styles: { margin: 0 }, }, }, { text: 'Footer', value: 5, textStyles: { tagName: 'footer', styles: { margin: 0 }, }, }, ], }, ]} placeholder={'Fontsize'} /> ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `ComboBox` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## ContentCard `ContentCard` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { ContentCard } from '@chayns-components/core'; ``` ### Examples #### General ```tsx <ContentCard> {'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.'} </ContentCard> ``` #### Content Card With Input ```tsx <ContentCard> { <> <span> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </span> <div style={{ height: '10px' }} /> <Input placeholder="Your advertisement could be here..." /> <div style={{ height: '10px' }} /> <span> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. </span> </> } </ContentCard> ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `ContentCard` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## ContextMenu `ContextMenu` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { ContextMenu } from '@chayns-components/core'; ``` ### Examples #### General ```tsx <ContextMenu items={[ { icons: ['fa fa-pencil'], key: 'rename', onClick: () => alert('Option "Umbenennen" wurde geklickt...'), text: 'Umbenennen', }, { icons: ['fa fa-eye'], key: 'show', onClick: () => alert('Option "Einblenden" wurde geklickt...'), text: 'Einblenden', }, { icons: ['fa fa-trash'], key: 'delete', onClick: () => alert('Option "Löschen" wurde geklickt...'), text: 'Löschen', }, ]} /> ``` #### With Spacer ```tsx <ContextMenu items={[ { icons: ['fa fa-pencil'], key: 'rename', onClick: () => alert('Option "Umbenennen" wurde geklickt...'), text: 'Umbenennen', }, { icons: ['fa fa-eye'], key: 'show', onClick: () => alert('Option "Einblenden" wurde geklickt...'), text: 'Einblenden', shouldShowSpacer: true, }, { icons: ['fa fa-trash'], key: 'delete', onClick: () => alert('Option "Löschen" wurde geklickt...'), text: 'Löschen', }, ]} /> ``` #### Without Icons ```tsx <ContextMenu items={[ { key: 'rename', onClick: () => alert('Option "Umbenennen" wurde geklickt...'), text: 'Umbenennen', }, { key: 'show', onClick: () => alert('Option "Einblenden" wurde geklickt...'), text: 'Einblenden', }, { key: 'delete', onClick: () => alert('Option "Löschen" wurde geklickt...'), text: 'Löschen', }, ]} /> ``` #### With YOffset ```tsx <ContextMenu yOffset={12} /> ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `ContextMenu` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## ExpandableContent `ExpandableContent` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { ExpandableContent } from '@chayns-components/core'; ``` ### Examples #### General ```tsx <ExpandableContent> { 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec nisi vel nulla tincidunt facilisis. Nullam fringilla eu felis at sollicitudin. Aliquam et urna augue. Praesent rhoncus hendrerit molestie. Vestibulum non faucibus mauris. In bibendum ultricies pulvinar. Duis in nisi lacinia, maximus dolor sit amet, pharetra neque. Quisque vulputate semper eleifend. Quisque imperdiet dolor faucibus, lobortis quam et, consectetur dui. Nunc at aliquam odio, vel luctus magna. Cras at ante at nunc volutpat aliquam. Integer ex nunc, pellentesque ac pharetra eu, porttitor eu mi.\n' + '\n' + 'Vestibulum mollis sagittis maximus. Nulla facilisi. Curabitur accumsan ipsum laoreet ipsum rutrum, id vehicula lectus cursus. Donec sit amet eros sed quam suscipit sodales. Phasellus faucibus fermentum sagittis. Vestibulum non orci quis nisl aliquet pharetra. Donec massa dui, consectetur sit amet metus ac, mattis semper nulla. Suspendisse ut quam a enim egestas gravida at sed sapien. Duis id mi id nisl pellentesque ornare quis non nibh. Fusce pellentesque, leo interdum rutrum maximus, libero purus auctor velit, at sodales nulla elit ut est. Nam tellus lacus, tristique et nulla sed, mollis vulputate mi. Donec tempor non magna id ornare. Integer facilisis lacus urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc nec leo in nulla faucibus facilisis at nec dolor.' } </ExpandableContent> ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `ExpandableContent` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## FileInput `FileInput` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { FileInput } from '@chayns-components/core'; ``` ### Examples #### General ```tsx <FileInput /> ``` #### With Image Selection ```tsx <FileInput imageSelectPlaceholder={'Bild auswählen'} /> ``` #### With Files ```tsx <FileInput files={[ { id: '2733zgetfvedjh4wetrf23w', name: 'Eine Datei', size: 34, mimeType: 'image/png', }, { id: '34zh34rdchg26zth5erfdzjzg', name: 'Test Datei', size: 23, mimeType: 'image/png', }, ]} /> ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `FileInput` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## FileList `FileList` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { FileList } from '@chayns-components/core'; ``` ### Examples #### General ```tsx <FileList files={[ { id: '1', name: 'file1', size: 20, mimeType: 'text/plain' }, { id: '2', name: 'file2', size: 20, mimeType: 'text/plain' }, { id: '3', name: 'file3', size: 20, mimeType: 'text/plain' }, { id: '4', name: 'file4', size: 20, mimeType: 'text/plain' }, ]} /> ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `FileList` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## FileSelect `FileSelect` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { FileSelect } from '@chayns-components/core'; ``` ### Examples #### General ```tsx <FileSelect /> ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `FileSelect` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## Filter `Filter` is exported