@oykos-development/devkit-react-ts-styled-components

Devkit Client Library for React Styled Components

This module represents a customized, tailor made library of reusable components. Goal of this module is to make front-end development faster and more scalable, by reducing time and effort needed to create the same components all over again and just focusing on the implementation and business logic of the application. On the other side, second main goal of this module is to eliminate the need for importing large, not-so-optimized and hard to learn libraries and modules such as MaterialUI, TailwindCSS etc. This library uses open-source, public NPM module @oykos-development/devkit-react-ts-styled-components, found at https://www.npmjs.com/package/@oykos-development/devkit-react-ts-styled-components

Setup

• Run the command npm install in order to install all required node_modules
• Run command npm run prepare in order to set up Husky commands for pre-commit and pre-push

Development

Branches are created only from develop branch, after pulling the latest changes.

develop branch is merged to main only when the code is ready to be bundled and released.

• To run Storybook and test components locally, run the command: npm run storybook:dev
• To update Typescript types, run the command: npm run ts:declarations

Open http://localhost:3000 with your browser to see the result.

Branch naming convention

1. state the type of change you are making: build, fix, refactor, feat
2. add forward slash /
3. state the task ID (if applicable) - TSK-123
4. add 2-3 words separated by - that describe changes you are making
5. Example: fix/TSK-123-fixing-border-radius

Commit & Push

We use the same convention as for Branch naming.

Only difference is that we use : instead of / in the commit message. And we describe in the message what we did without - between words.

Example: fix: changed border radius from 4px to 2px

NOTE #1: When you want to make commit, please run npm run git:commit if it's not run automatically by Husky for any reason.

NOTE #2: When you want to push the branch, please run npm run git:pull-request if it's not run automatically by Husky for any reason.

This ensures we use the same style of writing code and thus avoid unnecessary styling changes and merge issues.

Installation

To use our devkit, you can install it via npm and yarn:

npm:

npm install @oykos-development/devkit-react-ts-styled-components

yarn:

yarn add @oykos-development/devkit-react-ts-styled-components

Accordion

The Accordion element that allows the user to toggle between hiding and displaying content in a vertical list or panel format.

interface AccordionData {
  title: ReactNode | JSX.Element | string;
  content?: ReactNode | JSX.Element | string;
  customIcon?: ReactElement;
  style?: CSSProperties;
  theme?: DefaultTheme;
}

It has the following props:

Name	Type(s)	Default	Description
data	AccordionData[]		Array of AccordionData object.
customIcon	ReactElement	<ChevronUpIcon/>	SVG element
theme	DefaultTheme	object	If applied, custom theme is used
style	CSSProperties	object	The system prop that allows defining system overrides as well as additional CSS styles.

Example usage:

import { Accordion } from '@oykos-development/devkit-react-ts-styled-components';

function MyComponent() {
    const accordionData = [
        {
            title: <Typography variant={"bodySmall"} content={"Accordion Title"} />,
            content:  <Typography variant={"bodySmall"} content={"Lorem ipsum dolor sit amet consequuntur a culpa itaque!"} style={{ color: "#616161" }} />
        },
        {
            title: <Typography variant={"bodySmall"} content={"Accordion 1"} />,
            content: <Typography variant={"bodySmall"} content={"Accordion 1 content."} style={{ color: "#616161" }} />,
        },
    ];    
    
  return (
    <Accordion data={accordionData} />
  );
}

Alert

The Alert component is a super cool component that can be used for notification purpose. It has the following props:

Name	Type(s)	Default	Description
content	ReactNode		The content of the component. Can be DOM element or string
variant	'primary' 'error' 'success' 'info'	'success'	The variant to use. Default value is success
size	'sm' 'md' 'lg'	'md'	The size of the component.
icon	JSX.Element or React.ReactNode		DOM element
description	ReactNode		Some description text aligned below the content
closeIcon	boolean	true	If false, close icon is removed
onClose	(e?: React.MouseEvent<any>) => any		Callback fired when the component requests to be closed (closeIcon is clicked)
theme	DefaultTheme	object	If applied, custom theme is used
style	CSSProperties	object	The system prop that allows defining system overrides as well as additional CSS styles.

Example usage:

import { Alert } from '@oykos-development/devkit-react-ts-styled-components';

function MyComponent() {
  return (
    <Alert variant="success" content="Some content" size="md" />
  );
}

Avatar

Avatar component is commonly used to show circular user profile pictures in applications, providing a visually appealing way to represent users. These avatars use images as their content, typically user profile pictures or object image which can represent actions, statuses, or objects in the user interface. It has the following props:

Name	Type(s)	Default	Description
name	ReactNode or string		The display name of user in component. Can be DOM element or string.
email	ReactNode or string		The display email of user in component. Can be DOM element or string.
size	'xs' 'sm' 'md' 'lg' 'xl'	'xl'	The size of the component.
src	string		The src attribute for the img element.
alt	string		The alt attribute for the img element.
statusIcon	boolean	true	If false, status(online/offline) icon is removed.
supportingText	boolean	true	If false, supporting text(name & email) is removed.
online	boolean	true	Switch to offline/online status.
theme	DefaultTheme	object	If applied, custom theme is used
style	CSSProperties	object	The system prop that allows defining system overrides as well as additional CSS styles.

Example usage:

import { Avatar } from '@oykos-development/devkit-react-ts-styled-components';

function MyComponent() {
  return (
    <Avatar size="xl" name="Sinisa Becic" email="[e-mail]" src="https://eu.ui-avatars.com/api/?name=Sinisa+Becic" />
  );
}

Badge

The Badge component is a versatile element that can be used to display notifications, provide additional information, highlight content, and customize visual styles within an application. It has the following props:

Name	Type(s)	Default	Description
content	ReactNode or string		The content rendered within the badge.
variant	'primary' 'error' 'success' 'info' 'warning' 'secondary'	'primary'	The variant to use.
size	'sm' 'md' 'lg'	'md'	The size of the component.
theme	DefaultTheme	object	If applied, custom theme is used
style	CSSProperties	object	The system prop that allows defining system overrides as well as additional CSS styles.

Example usage:

import { Badge } from '@oykos-development/devkit-react-ts-styled-components';

function MyComponent() {
  return (
    <Badge variant="warning" content="Some content" size="xs" />
  );
}

Breadcrumbs

The Breadcrumbs component that helps users visualize a page's location within the hierarchical structure of a website or web application.

interface Item {
  name: string;
  to: string;
  icon?: ReactElement;
}

This component has the following props:

Name	Type(s)	Default	Description
items	Item[]		Array of items.
separator	ReactElement		Custom separator element.
onClick	(e?: MouseEvent<HTMLAnchorElement>) => any		onClick event.
theme	DefaultTheme	object	If applied, custom theme is used.
style	CSSProperties	object	The system prop that allows defining system overrides as well as additional CSS styles.

Example usage:

import { Breadcrumbs } from '@oykos-development/devkit-react-ts-styled-components';

function MyComponent() {

  const links = [
    { name: "link1", to: "" },
    { name: "link2", to: "" },
    { name: "link3", to: "" },
    { name: "link4", to: "" },
    { name: "link5", to: "" },
  ];

  return (
    <Breadcumbs items={links} separator={<span>&gt;</span>} />
  );
}

Button

The Button is a reusable component with customizable properties, making it easier to maintain a consistent look and feel across your application. Also you can pass event handlers, attributes, and styles through props. This component has the following props:

Name	Type(s)	Default	Description
content	ReactNode or string		The content rendered within the button.
variant	'primary' 'secondary' 'tertiary'	'primary'	The variant to use.
size	'xs' 'sm' 'md' 'lg' 'xl'	'lg'	The size of the component.
onClick	(e?: MouseEvent<HTMLButtonElement>) => void		onClick event.
customContent	ReactNode or string		If is set, content will be overwritten.
disabled	boolean	false	If true, the component is disabled.
theme	DefaultTheme	object	If applied, custom theme is used
style	CSSProperties	object	The system prop that allows defining system overrides as well as additional CSS styles.

Example usage:

import { Button } from '@oykos-development/devkit-react-ts-styled-components';

function MyComponent() {
  return (
    <Button variant="tertiary" content="Some content" size="md" />
  );
}

Checkbox

The possibilities of the Checkbox component from the devkit refer to the different ways you can customize, style, and use the Checkbox component to create a rich and engaging user experience. This component has the following props:

Name	Type(s)	Default	Description
size	'sm' 'md'	'sm'	The size of the component.
checked	boolean	false	If true, the component is checked.
onClick	(e: MouseEvent<HTMLElement, MouseEvent>) => void		onClick event.
disabled	boolean	false	If true, the component is disabled.
theme	DefaultTheme	object	If applied, custom theme is used
style	CSSProperties	object	The system prop that allows defining system overrides as well as additional CSS styles.

Example usage:

import { Checkbox } from '@oykos-development/devkit-react-ts-styled-components';

function MyComponent() {
  return (
    <Checkbox size="md" />
  );
}

Datepicker

A simple and reusable Datepicker component for React. In this table will be showed some of basic props:

Name	Type(s)	Default	Description
dateFormat	'dd/MM/yyyy' 'MM/dd/yyyy' 'yyyy/MM/dd' 'yyyy/dd/MM'		The date format.
error	string		If error prop is applied, the input will indicate an error.
onChange	(date: Date) => void		onChange event.
disabled	boolean	false	If true, the component is disabled.
theme	DefaultTheme	object	If applied, custom theme is used
style	CSSProperties	object	The system prop that allows defining system overrides as well as additional CSS styles.

Note: This component is essentially 'react-datepicker' module, but additionally customized and optimized for our devkit. If you want to explore the other features(props, events etc.) go here.

Example usage:

import { Datepicker } from '@oykos-development/devkit-react-ts-styled-components';

function MyComponent() {
  return (
    <Datepicker dateFormat='dd/MM/yyyy' />
  );
}

Divider

The Divider component is a simple yet versatile UI element that can be used to visually separate content in a list or layout. This component includes the following props:

Name	Type(s)	Default	Description
width	string		The width of the component.
height	string		The height of the component.
color	string		The color of the component.
theme	DefaultTheme	object	If applied, custom theme is used.
style	CSSProperties	object	The system prop that allows defining system overrides as well as additional CSS styles.

Example usage:

import { Divider } from '@oykos-development/devkit-react-ts-styled-components';

function MyComponent() {
  return (
    <Divider width="240px" height="1px" />
  );
}

Dropdown

A reusable Dropdown component allows you to create a customizable and flexible dropdown menu that can be used throughout your application.

type ValueType = { value: string | number; label: string };

This component has the following props:

Name	Type(s)	Default	Description
options	ValueType[]		Array of dropdown items.
defaultValue	ValueType		The default value. Use when the component is not controlled.
value	ValueType		The value of the input element.
label	string		The text displayed above the input.
noOptionsText	string		No items message displayed on menu.
placeholder	string		The short hint displayed in the input before the user enters a value.
leftOptionIcon	ReactElement		The icon element rendered within the dropdown on left side.
rightOptionIcon	ReactElement		The icon element rendered within the dropdown on the right side.
controlIcon	ReactElement		The icon element rendered within the dropdown.
menuIsOpen	boolean		If true, menu is open.
isMulti	boolean	false	If true, dropdown becomes a multi-select menu.
isSearchable	boolean	false	If true, you can search items from the menu.
showArrow	boolean	true	If false, arrow icon is removed.
isDisabled	boolean	false	If true, the component is disabled.
onChange	(e: ValueType) => void		onChange event.
onBlur	() => void		onBlur event.
onFocus	() => void		onFocus event.
theme	DefaultTheme	object	If applied, custom theme is used.
style	CSSProperties	object	The system prop that allows defining system overrides as well as additional CSS styles.

Example usage:

import { Dropdown, CircleCheckIcon } from '@oykos-development/devkit-react-ts-styled-components';

function MyComponent() {

    const icon = <CircleCheckIcon fill="grey" size="24px" />;

    return (
        <Dropdown label="Dropdown label" leftOptionIcon={icon} controlIcon={icon} placeholder="Select item" />
    );
}

File Upload

FileUpload component allows you to create a customizable and flexible file upload feature that can be used throughout your application. This component has the following props:

Name	Type(s)	Default	Description
variant	'primary' 'secondary'	'primary'	The variant to use.
multiple	boolean	false	If true, you can select multiple files.
note	ReactNode or JSX.Element or string		The note is content on drop zone. Example: "Select a file or drag and drop here"
hint	ReactNode or JSX.Element or string		The hint is content on drop zone positioned below the note.
onUpload	(files: FileList) => void		onUpload event.
customContent	ReactNode or JSX.Element or string		Custom content of drop zone.
buttonVariant	'primary' 'secondary' 'tertiary'		Button variant to use.
icon	JSX.Element or ReactElement		DOM element
theme	DefaultTheme	object	If applied, custom theme is used
style	CSSProperties	object	The system prop that allows defining system overrides as well as additional CSS styles.

Example usage:

import { FileUpload } from '@oykos-development/devkit-react-ts-styled-components';

function MyComponent() {

    const onFileUpload = (acceptedFiles) => {
        console.log("File(s) uploaded:", acceptedFiles);
    };

    return (
        <FileUpload onUpload={onFileUpload} note="Select a file or drag and drop here" hint="JPG, PNG or PDF, file size no more than 10MB" />
    );
}

Icons

Standardized icons exported as React components. This component has the following props:

Name	Type(s)	Default	Description
width	string		The width of the icon.
height	string		The height of the icon.
fill	string		The color of the component.
stroke	string		The stroke of the component.
onClick	((e?: MouseEvent<any, MouseEvent>) => any)		onClick event.
position	'absolute' 'relative'	'relative'	Position of the icon.
theme	DefaultTheme	object	If applied, custom theme is used.
style	CSSProperties	object	The system prop that allows defining system overrides as well as additional CSS styles.

Example usage:

import { ChevronUpIcon } from '@oykos-development/devkit-react-ts-styled-components';

function MyComponent() {

    return (
        <ChevronUpIcon width="100px" height="100px" />
    );
}

Input

This component streamlines the implementation of various input types, styles, event handlers, validation, and accessibility features in a React application. This component has the following props:

Name	Type(s)	Default	Description
placeholder	string		The short hint displayed in the input before the user enters a value.
name	string		Name attribute of the input element.
value	string		The value of the input element.
label	string		The text displayed above the input.
error	string		Error message.
hint	string		Message below the input field.
id	string		The id of the input element.
type	string		Type of the input element.
leftContent	ReactElement		The content rendered within the dropdown on left side.
rightContent	ReactElement		The content rendered within the dropdown on right side.
textarea	boolean	false	If true, the input is transforming to textarea.
disabled	boolean	false	If true, the component is disabled.
inputRef	Ref<HTMLInputElement>		Pass a ref to the input element.
inputMode	'text' 'none' 'tel' 'url' 'email' 'numeric' 'decimal'
maxLength	number'		Maximum length of characters.
rows	number'		Number of rows to display when textarea option is set to true.
cols	number'		Number of cols to display when textarea option is set to true.
pattern	string'
onChange	ChangeEventHandler<any>		onChange event.
onBlur	FocusEventHandler		onBlur event.
onFocus	FocusEventHandler		onFocus event.
theme	DefaultTheme	object	If applied, custom theme is used.
style	CSSProperties	object	The system prop that allows defining system overrides as well as additional CSS styles.

Example usage:

import { Input } from '@oykos-development/devkit-react-ts-styled-components';

function MyComponent() {
    return (
        <Input placeholder="Type here..." />
    );
}

Leading badge

This component is additional kind of badge component. It has the following props:

Name	Type(s)	Default	Description
content	ReactNode or string		The content rendered within the leading badge.
badgeContent	ReactNode or string		The badge content rendered within the badge.
variant	'primary' 'error' 'success' 'warning'	'primary'	The variant to use.
leadingBadgeTheme	'medium' 'dark' 'light'	'light'	The theme variant to use.
size	'md' 'lg'	'md'	The size of the component.
theme	DefaultTheme	object	If applied, custom theme is used
style	CSSProperties	object	The system prop that allows defining system overrides as well as additional CSS styles.

Example usage:

import { LeadingBadge } from '@oykos-development/devkit-react-ts-styled-components';

function MyComponent() {
    return (
        <LeadingBadge variant="success" leadingBadgeTheme="dark" size="lg"  badgeContent="This is badge content" content="Some content" />
    );
}

Loader

Loader component used to indicate that some processing is ongoing and the current page, tab, section, etc. It has the following props:

Name	Type(s)	Default	Description
variant	'one' 'two'		The variant to use.
width	string		The width of the primary circle spinner.
height	string		The height of the primary circle spinner.
primaryColor	string		The primary color of the component.
secondaryColor	string		The secondary color of the component.
primaryWidth	string		The width of the secondary circle spinner.
secondaryHeight	string		The height of the secondary circle spinner.
theme	DefaultTheme	object	If applied, custom theme is used.

Example usage:

import { Loader } from '@oykos-development/devkit-react-ts-styled-components';

function MyComponent() {
    return (
        <Loader variant="one" width="100px" height="100px" primaryColor="#b2a422" secondaryColor="#7199aa" />
    );
}

Modal

Modal component is a self-contained, customizable, and reusable piece of devkit that can be used to display information or require user interaction. It has the following props:

Name	Type(s)	Default	Description
variant	'light' 'dark'	'light'	The variant to use.
title	string		Modal title.
content	string or ReactElement		The content rendered within the modal.
open	boolean		If true, the component will be shown.
onClose	any		onClose event.
theme	DefaultTheme	object	If applied, custom theme is used.
style	CSSProperties	object	The system prop that allows defining system overrides as well as additional CSS styles.

Example usage:

import { Modal, Typography } from '@oykos-development/devkit-react-ts-styled-components';

const customContent = (
    <>
        <div style={{ padding: "2em 0.5em", width: "300px" }}>
            <Typography content="This is modal content." variant="bodyLarge" />
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <Typography content="This is footer text." variant="bodyMedium" />
            <div style={{ display: "flex", gap: "0.5em" }}>
                <button>Ok</button>
                <button>Cancel</button>
            </div>
        </div>
    </>
);

function MyComponent() {
    return (
        <Modal title="Modal title" content={customContent} />
    );
}

Pagination

A good reusable pagination component should allow users to navigate between pages easily, either by going to the next or previous page or jumping to a specific page. It has the following props:

Name	Type(s)	Default	Description
variant	'dotted' 'filled' 'outlined' 'underlined'	'filled'	The variant to use.
itemsPerPage	number		The total items per pages.
pageCount	number		The total number of pages.
pageRangeDisplayed	number	3
displayPages	boolean	true
marginPagesDisplayed	number	3
previousLabel	string or ReactElement		The previous label content rendered within the component.
nextLabel	string or ReactElement		The next label content rendered within the component.
fullWidth	boolean	true	If true component width will be 100%.
renderPaginationText	((selected: number, total: number) => string)		Render the pagination text.
onChange	(page: number) => void		onChange event.
theme	DefaultTheme	object	If applied, custom theme is used.
style	CSSProperties	object	The system prop that allows defining system overrides as well as additional CSS styles.

Example usage:

import { Pagination } from '@oykos-development/devkit-react-ts-styled-components';

function MyComponent() {
    const leftIcon = (
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M12.8334 7H1.16675M1.16675 7L7.00008 12.8333M1.16675 7L7.00008 1.16667"
                stroke="#616161"
                strokeWidth="1.67"
                strokeLinecap="round"
                strokeLinejoin="round"
            />
        </svg>
    );

    const rightIcon = (
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M1.16666 7H12.8333M12.8333 7L7 1.16667M12.8333 7L7 12.8333"
                stroke="#616161"
                strokeWidth="1.67"
                strokeLinecap="round"
                strokeLinejoin="round"
            />
        </svg>
    );

    const customPreviousLabel = (
        <p style={{ display: "flex", alignItems: "center", gap: "0.5em", margin: 0 }}>
            {leftIcon}
            Previous
        </p>
    );

    const customNextLabel = (
        <p style={{ display: "flex", alignItems: "center", gap: "0.5em", margin: 0 }}>
            {rightIcon}
            Next
        </p>
    );

    return (
        <Pagination itemsPerPage={4} pageRangeDisplayed={3} previousLabel={customPreviousLabel} nextLabel={customNextLabel} />
    );
}

PIN input

A user interface component that is specifically designed to handle input of PIN (Personal Identification Number) or OTP (One-Time Password) codes. It has the following props:

Name	Type(s)	Default	Description
type	'numeric' 'password'	'password'	The input type to use.
handleInput	(value: string) => void		Handle input function.
length	number	4	A length of characters.

Example usage:

import { Pin } from '@oykos-development/devkit-react-ts-styled-components';

function MyComponent() {
    return (
        <Pin />
    );
}

Radio

This component allows to manage radio button inputs, enabling users to make single-option selections from a list. It has the following props:

Name	Type(s)	Default	Description
size	'sm' 'md'	'sm'	The size of the component.
onClick	(event: MouseEvent<HTMLElement, MouseEvent>) => void		onClick event.
disabled	boolean	false	If true, the component is disabled.
theme	DefaultTheme	object	If applied, custom theme is used.
style	CSSProperties	object	The system prop that allows defining system overrides as well as additional CSS styles.

Example usage:

import { Radio } from '@oykos-development/devkit-react-ts-styled-components';

function MyComponent() {
    return (
        <Radio size="md" />
    );
}

Switch

Component that enables toggling between two states, such as on and off. It has the following props:

Name	Type(s)	Default	Description
size	'sm' 'md'	'md'	The size of the component.
content	ReactNode or string		The content rendered within the switch button.
onChange	((e: ChangeEvent<HTMLInputElement>) => void)		onChange event.
disabled	boolean	false	If true, the component is disabled.
theme	DefaultTheme	object	If applied, custom theme is used.
style	CSSProperties	object	The system prop that allows defining system overrides as well as additional CSS styles.

Example usage:

import { Switch, Typography } from '@oykos-development/devkit-react-ts-styled-components';

function MyComponent() {

    const customText = <Typography content={"Remember me"} style={{ marginLeft: "0.7rem" }} />;

    return (
        <Switch content={customText} />
    );
}

Table

Component designed to display data in a tabular format, making it easy for users to scan and find patterns or insights. It has the following props:

Name	Type(s)	Default	Description
titleElement	ReactElement		The titleElement rendered within the table.
headerContent	JSX.Element or JSX.Element[]		The headerContent rendered within the table.
bodyContent	JSX.Element or JSX.Element[]		The bodyContent rendered within the table.
noDataMessage	string		Custom message if there is no data in table.
theme	DefaultTheme	object	If applied, custom theme is used.
style	CSSProperties	object	The system prop that allows defining system overrides as well as additional CSS styles.

Example usage:

import { Table, CircleCheckIcon } from '@oykos-development/devkit-react-ts-styled-components';

function MyComponent() {

    const tableHeadings = ["City", "Code", "Latitude", "Longitude"];

    const tableData = [
        { city: "London", code: "UK", latitude: 51.5285578, longitude: -0.2420242 },
        { city: "Manchester", code: "UK", latitude: 53.4722249, longitude: -2.2936739 },
    ];

    const titleElement = (
        <div>
            <h3 style={{ margin: 0, marginBottom: "0.25em" }}>This is table title</h3>
            <p style={{ margin: 0 }}>Additional content...</p>
        </div>
    );

    const headerContent = (
        <tr>
            {tableHeadings.map((heading, index) => (
                <th key={index}>
                    <div>
                        <span>{heading}</span>
                        <CircleCheckIcon size="1em" onClick={() => alert("Icon is clicked")} style={{ cursor: "pointer" }} />
                    </div>
                </th>
            ))}
        </tr>
    );

    const bodyContent = tableData.map((data, index) => (
        <tr key={index}>
            <td>{data.city}</td>
            <td>{data.code}</td>
            <td>{data.latitude}</td>
            <td>{data.longitude}</td>
        </tr>
    ));

    return (
        <Table titleElement={titleElement} headerContent={headerContent} bodyContent={bodyContent} />
    );
}

Tabs

Component designed to break up complex interfaces into manageable subsections, allowing users to quickly switch between different categories of content.

interface Tab {
    id: number | string;
    title: string;
    disabled?: boolean;
}

This component has the following props:

Name	Type(s)	Default	Description
tabs	Tab[]		Array of dropdown items.
onChange	((tab: Tab) => void)		onChange event.
theme	DefaultTheme	object	If applied, custom theme is used.
style	CSSProperties	object	The system prop that allows defining system overrides as well as additional CSS styles.

Example usage:

import { Tabs } from '@oykos-development/devkit-react-ts-styled-components';

function MyComponent() {

    const tabsArr = [
        { id: 1, title: "Tab 1" },
        { id: 2, title: "Tab 2" },
        { id: 3, title: "Tab 3" },
        { id: 4, title: "Tab 4" },
    ];

    return (
        <Tabs tabs={tabsArr} />
    );
}

Tooltip

Component that displays informative text when users hover over, focus on, or tap an element. It has the following props:

Name	Type(s)	Default	Description
content	string or ReactElement		The content rendered within the tooltip.
variant	'standard' 'filled'	'standard'	The tooltip variant to use.
position	'bottom' 'left' 'right' 'top' 'topLeft' 'topRight'		Tooltip placement.
title	string		Tooltip title.
arrow	boolean		If true, adds an arrow to the tooltip.
theme	DefaultTheme	object	If applied, custom theme is used.
style	CSSProperties	object	The system prop that allows defining system overrides as well as additional CSS styles.

Example usage:

import { Tooltip } from '@oykos-development/devkit-react-ts-styled-components';

function MyComponent() {

    const customTitle = "Tooltip title";
    const customContent = "This is a tooltip";

    return (
        <Tooltip title={customTitle} content={customContent}>
            <span>Hover over me!</span>
        </Tooltip>
    );
}

Typography

Component that helps present design and content as clearly and efficiently as possible by providing a consistent set of text styles and sizes across the application. It has the following props:

Name	Type(s)	Default	Description
content	ReactNode or string		The content rendered within the typography.
variant	'h1' 'h2' 'h3' 'h4' 'h5' 'h6' 'bodyLarge' 'bodyMedium' 'bodySmall' 'linkLarge' 'linkMedium' 'linkSmall' 'caption' 'code' 'helperText'	'bodyMedium'	The typography variant to use.
onClick	((e?: MouseEvent<any, MouseEvent>) => any)		onClick event.
theme	DefaultTheme	object	If applied, custom theme is used.
style	CSSProperties	object	The system prop that allows defining system overrides as well as additional CSS styles.

Example usage:

import { Typography } from '@oykos-development/devkit-react-ts-styled-components';

function MyComponent() {
    return (
        <Typography variant="h1" content="Headline" />
    );
}