1.8.8 • Published 11 months ago

@oykos-development/devkit-react-ts-styled-components v1.8.8

Weekly downloads
-
License
ISC
Repository
github
Last release
11 months ago

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:

NameType(s)DefaultDescription
dataAccordionData[]Array of AccordionData object.
customIconReactElement<ChevronUpIcon/>SVG element
themeDefaultThemeobjectIf applied, custom theme is used
styleCSSPropertiesobjectThe 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:

NameType(s)DefaultDescription
contentReactNodeThe 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.
iconJSX.Element or React.ReactNodeDOM element
descriptionReactNodeSome description text aligned below the content
closeIconbooleantrueIf false, close icon is removed
onClose(e?: React.MouseEvent<any>) => anyCallback fired when the component requests to be closed (closeIcon is clicked)
themeDefaultThemeobjectIf applied, custom theme is used
styleCSSPropertiesobjectThe 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:

NameType(s)DefaultDescription
nameReactNode or stringThe display name of user in component. Can be DOM element or string.
emailReactNode or stringThe display email of user in component. Can be DOM element or string.
size'xs' 'sm' 'md' 'lg' 'xl''xl'The size of the component.
srcstringThe src attribute for the img element.
altstringThe alt attribute for the img element.
statusIconbooleantrueIf false, status(online/offline) icon is removed.
supportingTextbooleantrueIf false, supporting text(name & email) is removed.
onlinebooleantrueSwitch to offline/online status.
themeDefaultThemeobjectIf applied, custom theme is used
styleCSSPropertiesobjectThe 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="sinisa.becic@oykos.me" 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:

NameType(s)DefaultDescription
contentReactNode or stringThe 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.
themeDefaultThemeobjectIf applied, custom theme is used
styleCSSPropertiesobjectThe 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:

NameType(s)DefaultDescription
itemsItem[]Array of items.
separatorReactElementCustom separator element.
onClick(e?: MouseEvent<HTMLAnchorElement>) => anyonClick event.
themeDefaultThemeobjectIf applied, custom theme is used.
styleCSSPropertiesobjectThe 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:

NameType(s)DefaultDescription
contentReactNode or stringThe 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>) => voidonClick event.
customContentReactNode or stringIf is set, **content** will be overwritten.
disabledbooleanfalseIf true, the component is disabled.
themeDefaultThemeobjectIf applied, custom theme is used
styleCSSPropertiesobjectThe 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:

NameType(s)DefaultDescription
size'sm' 'md''sm'The size of the component.
checkedbooleanfalseIf true, the component is checked.
onClick(e: MouseEvent<HTMLElement, MouseEvent>) => voidonClick event.
disabledbooleanfalseIf true, the component is disabled.
themeDefaultThemeobjectIf applied, custom theme is used
styleCSSPropertiesobjectThe 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:

NameType(s)DefaultDescription
dateFormat'dd/MM/yyyy' 'MM/dd/yyyy' 'yyyy/MM/dd' 'yyyy/dd/MM'The date format.
errorstringIf error prop is applied, the input will indicate an error.
onChange(date: Date) => voidonChange event.
disabledbooleanfalseIf true, the component is disabled.
themeDefaultThemeobjectIf applied, custom theme is used
styleCSSPropertiesobjectThe 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:

NameType(s)DefaultDescription
widthstringThe width of the component.
heightstringThe height of the component.
colorstringThe color of the component.
themeDefaultThemeobjectIf applied, custom theme is used.
styleCSSPropertiesobjectThe 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:

NameType(s)DefaultDescription
optionsValueType[]Array of dropdown items.
defaultValueValueTypeThe default value. Use when the component is not controlled.
valueValueTypeThe value of the input element.
labelstringThe text displayed above the input.
noOptionsTextstringNo items message displayed on menu.
placeholderstringThe short hint displayed in the input before the user enters a value.
leftOptionIconReactElementThe icon element rendered within the dropdown on left side.
rightOptionIconReactElementThe icon element rendered within the dropdown on the right side.
controlIconReactElementThe icon element rendered within the dropdown.
menuIsOpenbooleanIf true, menu is open.
isMultibooleanfalseIf true, dropdown becomes a multi-select menu.
isSearchablebooleanfalseIf true, you can search items from the menu.
showArrowbooleantrueIf false, arrow icon is removed.
isDisabledbooleanfalseIf true, the component is disabled.
onChange(e: ValueType) => voidonChange event.
onBlur() => voidonBlur event.
onFocus() => voidonFocus event.
themeDefaultThemeobjectIf applied, custom theme is used.
styleCSSPropertiesobjectThe 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:

NameType(s)DefaultDescription
variant'primary' 'secondary''primary'The variant to use.
multiplebooleanfalseIf true, you can select multiple files.
noteReactNode or JSX.Element or stringThe note is content on drop zone. **Example:** "Select a file or drag and drop here"
hintReactNode or JSX.Element or stringThe hint is content on drop zone positioned below the note.
onUpload(files: FileList) => voidonUpload event.
customContentReactNode or JSX.Element or stringCustom content of drop zone.
buttonVariant'primary' 'secondary' 'tertiary'Button variant to use.
iconJSX.Element or ReactElementDOM element
themeDefaultThemeobjectIf applied, custom theme is used
styleCSSPropertiesobjectThe 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:

NameType(s)DefaultDescription
widthstringThe width of the icon.
heightstringThe height of the icon.
fillstringThe color of the component.
strokestringThe stroke of the component.
onClick((e?: MouseEvent<any, MouseEvent>) => any)onClick event.
position'absolute' 'relative''relative'Position of the icon.
themeDefaultThemeobjectIf applied, custom theme is used.
styleCSSPropertiesobjectThe 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:

NameType(s)DefaultDescription
placeholderstringThe short hint displayed in the input before the user enters a value.
namestringName attribute of the input element.
valuestringThe value of the input element.
labelstringThe text displayed above the input.
errorstringError message.
hintstringMessage below the input field.
idstringThe id of the input element.
typestringType of the input element.
leftContentReactElementThe content rendered within the dropdown on left side.
rightContentReactElementThe content rendered within the dropdown on right side.
textareabooleanfalseIf true, the input is transforming to textarea.
disabledbooleanfalseIf true, the component is disabled.
inputRefRef<HTMLInputElement>Pass a ref to the input element.
inputMode'text' 'none' 'tel' 'url' 'email' 'numeric' 'decimal'
maxLengthnumber'Maximum length of characters.
rowsnumber'Number of rows to display when textarea option is set to true.
colsnumber'Number of cols to display when textarea option is set to true.
patternstring'
onChangeChangeEventHandler<any>onChange event.
onBlurFocusEventHandleronBlur event.
onFocusFocusEventHandleronFocus event.
themeDefaultThemeobjectIf applied, custom theme is used.
styleCSSPropertiesobjectThe 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:

NameType(s)DefaultDescription
contentReactNode or stringThe content rendered within the leading badge.
badgeContentReactNode or stringThe 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.
themeDefaultThemeobjectIf applied, custom theme is used
styleCSSPropertiesobjectThe 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:

NameType(s)DefaultDescription
variant'one' 'two'The variant to use.
widthstringThe width of the primary circle spinner.
heightstringThe height of the primary circle spinner.
primaryColorstringThe primary color of the component.
secondaryColorstringThe secondary color of the component.
primaryWidthstringThe width of the secondary circle spinner.
secondaryHeightstringThe height of the secondary circle spinner.
themeDefaultThemeobjectIf 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:

NameType(s)DefaultDescription
variant'light' 'dark''light'The variant to use.
titlestringModal title.
contentstring or ReactElementThe content rendered within the modal.
openbooleanIf true, the component will be shown.
onCloseanyonClose event.
themeDefaultThemeobjectIf applied, custom theme is used.
styleCSSPropertiesobjectThe 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:

NameType(s)DefaultDescription
variant'dotted' 'filled' 'outlined' 'underlined''filled'The variant to use.
itemsPerPagenumberThe total items per pages.
pageCountnumberThe total number of pages.
pageRangeDisplayednumber3
displayPagesbooleantrue
marginPagesDisplayednumber3
previousLabelstring or ReactElementThe previous label content rendered within the component.
nextLabelstring or ReactElementThe next label content rendered within the component.
fullWidthbooleantrueIf true component width will be 100%.
renderPaginationText((selected: number, total: number) => string)Render the pagination text.
onChange(page: number) => voidonChange event.
themeDefaultThemeobjectIf applied, custom theme is used.
styleCSSPropertiesobjectThe 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:

NameType(s)DefaultDescription
type'numeric' 'password''password'The input type to use.
handleInput(value: string) => voidHandle input function.
lengthnumber4A 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:

NameType(s)DefaultDescription
size'sm' 'md''sm'The size of the component.
onClick(event: MouseEvent<HTMLElement, MouseEvent>) => voidonClick event.
disabledbooleanfalseIf true, the component is disabled.
themeDefaultThemeobjectIf applied, custom theme is used.
styleCSSPropertiesobjectThe 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:

NameType(s)DefaultDescription
size'sm' 'md''md'The size of the component.
contentReactNode or stringThe content rendered within the switch button.
onChange((e: ChangeEvent<HTMLInputElement>) => void)onChange event.
disabledbooleanfalseIf true, the component is disabled.
themeDefaultThemeobjectIf applied, custom theme is used.
styleCSSPropertiesobjectThe 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:

NameType(s)DefaultDescription
titleElementReactElementThe titleElement rendered within the table.
headerContentJSX.Element or JSX.Element[]The headerContent rendered within the table.
bodyContentJSX.Element or JSX.Element[]The bodyContent rendered within the table.
noDataMessagestringCustom message if there is no data in table.
themeDefaultThemeobjectIf applied, custom theme is used.
styleCSSPropertiesobjectThe 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:

NameType(s)DefaultDescription
tabsTab[]Array of dropdown items.
onChange((tab: Tab) => void)onChange event.
themeDefaultThemeobjectIf applied, custom theme is used.
styleCSSPropertiesobjectThe 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:

NameType(s)DefaultDescription
contentstring or ReactElementThe content rendered within the tooltip.
variant'standard' 'filled''standard'The tooltip variant to use.
position'bottom' 'left' 'right' 'top' 'topLeft' 'topRight'Tooltip placement.
titlestringTooltip title.
arrowbooleanIf true, adds an arrow to the tooltip.
themeDefaultThemeobjectIf applied, custom theme is used.
styleCSSPropertiesobjectThe 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:

NameType(s)DefaultDescription
contentReactNode or stringThe 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.
themeDefaultThemeobjectIf applied, custom theme is used.
styleCSSPropertiesobjectThe 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" />
    );
}
1.8.8

11 months ago

1.8.5

2 years ago

1.8.2

2 years ago

1.8.1

2 years ago

1.8.0

2 years ago

1.7.10

2 years ago

1.7.9

2 years ago

1.8.4

2 years ago

1.8.3

2 years ago

1.7.8

2 years ago

1.6.4

2 years ago

1.6.3

2 years ago

1.6.2

2 years ago

1.6.1

2 years ago

1.6.0

2 years ago

1.7.7

2 years ago

1.7.6

2 years ago

1.7.5

2 years ago

1.7.4

2 years ago

1.7.2

2 years ago

1.7.1

2 years ago

1.7.0

2 years ago

1.6.9

2 years ago

1.6.8

2 years ago

1.6.7

2 years ago

1.6.6

2 years ago

1.6.5

2 years ago

1.2.0

2 years ago

1.4.6

2 years ago

1.2.8

2 years ago

1.4.5

2 years ago

1.2.7

2 years ago

1.4.4

2 years ago

1.2.6

2 years ago

1.4.3

2 years ago

1.2.5

2 years ago

1.4.2

2 years ago

1.2.4

2 years ago

1.4.1

2 years ago

1.2.3

2 years ago

1.4.0

2 years ago

1.2.2

2 years ago

1.2.1

2 years ago

1.3.10

2 years ago

1.5.9

2 years ago

1.5.8

2 years ago

1.5.7

2 years ago

1.3.9

2 years ago

1.5.6

2 years ago

1.3.8

2 years ago

1.2.10

2 years ago

1.5.5

2 years ago

1.3.7

2 years ago

1.5.4

2 years ago

1.3.6

2 years ago

1.5.3

2 years ago

1.3.5

2 years ago

1.5.2

2 years ago

1.3.4

2 years ago

1.5.1

2 years ago

1.3.3

2 years ago

1.5.0

2 years ago

1.3.2

2 years ago

1.3.1

2 years ago

1.3.0

2 years ago

1.4.9

2 years ago

1.4.8

2 years ago

1.4.10

2 years ago

1.4.7

2 years ago

1.2.9

2 years ago

1.0.10

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago