27 | {children}
28 |
29 | );
30 | };
31 |
--------------------------------------------------------------------------------
/src/components/Blocks/Badge/Badge.module.css:
--------------------------------------------------------------------------------
1 | .wrapper--number {
2 | display: inline-flex;
3 | align-items: center;
4 | justify-content: center;
5 |
6 | height: 20px;
7 | min-width: 20px;
8 |
9 | margin: 0 6px;
10 | padding: 0 5px;
11 |
12 | box-sizing: border-box;
13 | border-radius: 20px;
14 | }
15 |
16 | .wrapper--large {
17 | height: 24px;
18 | padding: 0 6px;
19 | }
20 |
21 | .wrapper--dot {
22 | display: inline-block;
23 |
24 | width: 6px;
25 | height: 6px;
26 |
27 | margin: 7px;
28 | border-radius: 50%;
29 | }
30 |
31 | .wrapper--primary {
32 | color: var(--tgui--button_text_color);
33 | background: var(--tgui--button_color);
34 | }
35 |
36 | .wrapper--critical {
37 | color: var(--tgui--button_text_color);
38 | background: var(--tgui--destructive_text_color);
39 | }
40 |
41 | .wrapper--secondary {
42 | color: var(--tgui--link_color);
43 | background: var(--tgui--secondary_fill);
44 | }
45 |
46 | .wrapper--gray {
47 | color: var(--tgui--plain_foreground);
48 | background: var(--tgui--plain_background);
49 | }
50 |
51 | .wrapper--white {
52 | color: var(--tgui--link_color);
53 | background: var(--tgui--white);
54 | }
55 |
56 |
--------------------------------------------------------------------------------
/src/components/Blocks/Badge/Badge.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { Badge } from './Badge';
4 |
5 | const meta = {
6 | title: 'Blocks/Badge',
7 | component: Badge,
8 | } satisfies Meta
25 | -
30 |
26 | {hasChildren && {children} }
27 | {(!hasChildren || platform === 'ios') &&
29 | );
30 | };
31 |
--------------------------------------------------------------------------------
/src/components/Blocks/Cell/hooks/useTypographyCellComponents.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useCallback } from 'react';
4 |
5 | import { usePlatform } from 'hooks/usePlatform';
6 |
7 | import { Caption } from 'components/Typography/Caption/Caption';
8 | import { Subheadline } from 'components/Typography/Subheadline/Subheadline';
9 | import { Text } from 'components/Typography/Text/Text';
10 | import { TypographyProps } from 'components/Typography/Typography';
11 |
12 | export const useTypographyCellComponents = () => {
13 | const platform = usePlatform();
14 | const isIOS = platform === 'ios';
15 |
16 | const Title = useCallback((props: TypographyProps) => {
17 | if (isIOS) {
18 | return
10 | {children}
11 |
12 | );
13 |
--------------------------------------------------------------------------------
/src/components/Blocks/Image/Image.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | position: relative;
3 | background-color: var(--tgui--tertiary_bg_color);
4 |
5 | display: flex;
6 | align-items: center;
7 | justify-content: center;
8 |
9 | box-shadow: 0 0 0 1px var(--tgui--outline);
10 | }
11 |
12 | .image {
13 | position: absolute;
14 | display: block;
15 | width: 100%;
16 | height: 100%;
17 | object-fit: cover;
18 | visibility: hidden;
19 | border-radius: inherit;
20 | }
21 |
22 | .wrapper--loaded .image {
23 | visibility: visible;
24 | }
25 |
26 | .fallback {
27 | position: absolute;
28 | display: flex;
29 | align-items: center;
30 | justify-content: center;
31 | }
32 |
--------------------------------------------------------------------------------
/src/components/Blocks/Image/components/ImageBadge/ImageBadge.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | position: absolute;
3 | right: -12px;
4 | top: -12px;
5 | }
6 |
--------------------------------------------------------------------------------
/src/components/Blocks/Image/components/ImageBadge/ImageBadge.tsx:
--------------------------------------------------------------------------------
1 | import styles from './ImageBadge.module.css';
2 |
3 | import { classNames } from 'helpers/classNames';
4 |
5 | import { Badge, BadgeProps } from 'components/Blocks/Badge/Badge';
6 |
7 | export interface ImageBadgeProps extends BadgeProps {}
8 |
9 | export const ImageBadge = ({ type, className, ...restProps }: ImageBadgeProps) => {
10 | if (type !== 'number') {
11 | console.error('[ImageBadge]: Component supports only type="number"');
12 | return null;
13 | }
14 |
15 | return (
16 |
27 |
29 | ),
30 | } satisfies Story;
31 |
--------------------------------------------------------------------------------
/src/components/Blocks/List/List.module.css:
--------------------------------------------------------------------------------
1 | .wrapper > :not(:last-child) {
2 | margin-bottom: 12px;
3 | }
4 |
5 | .wrapper--ios {
6 | padding: 10px 18px;
7 | box-sizing: border-box;
8 | }
9 |
--------------------------------------------------------------------------------
/src/components/Blocks/List/List.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { hideControls } from 'storybook/controls';
3 |
4 | import { Section } from 'components';
5 | import { Input } from 'components/Form';
6 | import { List } from './List';
7 |
8 | const meta = {
9 | title: 'Blocks/List',
10 | component: List,
11 | argTypes: hideControls('children'),
12 | } satisfies Meta-
33 |
-
34 |
22 |
24 | ),
25 | ],
26 | } satisfies Story;
27 |
--------------------------------------------------------------------------------
/src/components/Blocks/Section/components/SectionHeader/SectionHeader.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | padding: 20px 24px 4px 22px;
3 | color: var(--tgui--link_color);
4 | }
5 |
6 | .wrapper--large {
7 | padding-left: 24px;
8 | color: var(--tgui--text_color);
9 | }
10 |
11 | .wrapper--ios {
12 | padding: 16px 16px 8px 16px;
13 | color: var(--tgui--section_header_text_color);
14 | }
15 |
16 | .wrapper--ios.wrapper--large {
17 | padding: 0 0 12px;
18 | color: var(--tgui--text_color);
19 | }
20 |
--------------------------------------------------------------------------------
/src/components/Blocks/Section/components/SectionHeader/SectionHeader.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { setControlsTypes } from 'storybook/controls';
3 |
4 | import { SectionHeader } from './SectionHeader';
5 |
6 | const meta = {
7 | title: 'Blocks/Section/Section.Header',
8 | component: SectionHeader,
9 | argTypes: setControlsTypes(['children'], 'text'),
10 | } satisfies Meta
19 | {Array.from({ length: count }, (_, i) => (
20 |
26 | ))}
27 |
28 | );
29 |
--------------------------------------------------------------------------------
/src/components/Blocks/Timeline/Timeline.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | display: flex;
3 | flex-direction: column;
4 | gap: 24px;
5 | padding: 32px 44px;
6 | margin: 0;
7 | }
8 |
9 | .wrapper--horizontal {
10 | flex-direction: row;
11 | }
12 |
--------------------------------------------------------------------------------
/src/components/Blocks/Timeline/Timeline.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { hideControls } from 'storybook/controls';
3 |
4 | import { Timeline } from './Timeline';
5 |
6 | const meta = {
7 | title: 'Blocks/Timeline',
8 | component: Timeline,
9 | argTypes: hideControls('children'),
10 | } satisfies Meta17 |
18 |
19 | 20 | ), 21 | decorators: [ 22 | (StoryComponent) => ( 23 |
27 |
29 | ),
30 | ],
31 | } satisfies Story;
32 |
--------------------------------------------------------------------------------
/src/components/Feedback/CircularProgress/helpers/getCircleAttributes.ts:
--------------------------------------------------------------------------------
1 | export const getCircleAttributes = (size: 'small' | 'medium' | 'large') => {
2 | switch (size) {
3 | case 'large':
4 | return {
5 | size: 56,
6 | strokeWidth: 4,
7 | radius: 18,
8 | };
9 |
10 | case 'medium':
11 | return {
12 | size: 36,
13 | strokeWidth: 3,
14 | radius: 14,
15 | };
16 |
17 | case 'small':
18 | return {
19 | size: 28,
20 | strokeWidth: 3,
21 | radius: 10,
22 | };
23 |
24 | default:
25 | return undefined;
26 | }
27 | };
28 |
--------------------------------------------------------------------------------
/src/components/Feedback/Progress/Progress.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | overflow: hidden;
3 | position: relative;
4 | height: 4px;
5 | border-radius: 2px;
6 | }
7 |
8 | .wrapper--base::after {
9 | content: '';
10 | position: absolute;
11 | inset: 0;
12 | opacity: .4;
13 | background: var(--tgui--link_color);
14 | }
15 |
16 | .progress {
17 | position: absolute;
18 | block-size: 100%;
19 | border-radius: inherit;
20 | transition: width 0.2s ease;
21 | background: var(--tgui--link_color);
22 | z-index: var(--tgui--z-index--simple);
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/Feedback/Progress/Progress.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { Progress } from './Progress';
4 |
5 | const meta = {
6 | title: 'Feedback/Progress',
7 | component: Progress,
8 | } satisfies Meta
21 |
22 |
23 |
24 |
25 | 26 |
27 | ),
28 | } satisfies Story;
29 |
--------------------------------------------------------------------------------
/src/components/Feedback/Skeleton/Skeleton.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | position: relative;
3 | }
4 |
5 | .wrapper--visible::before,
6 | .wrapper--visible::after {
7 | content: '';
8 | position: absolute;
9 | inset: 0;
10 | z-index: var(--tgui--z-index--simple);
11 | }
12 |
13 | .wrapper::before {
14 | background: var(--tgui--secondary_bg_color);
15 | }
16 |
17 | .wrapper:not(.wrapper--noAnimation)::after {
18 | z-index: var(--tgui--z-index--skeleton);
19 | background-color: var(--tgui--bg_color);
20 | animation: fade 1.8s linear infinite;
21 | }
22 |
23 | @keyframes fade {
24 | 0%, 100% {
25 | opacity: .4;
26 | }
27 |
28 | 50% {
29 | opacity: .7;
30 | }
31 | }
32 |
33 |
--------------------------------------------------------------------------------
/src/components/Feedback/Skeleton/Skeleton.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { Cell } from 'components/Blocks/Cell/Cell';
4 | import { Skeleton } from './Skeleton';
5 |
6 | const meta = {
7 | title: 'Feedback/Skeleton',
8 | component: Skeleton,
9 | } satisfies Meta22 |
23 |
24 |
25 | 26 |
22 |
23 | | Hello!!!! |
24 |
25 |
26 | ),
27 | } satisfies Story;
28 |
--------------------------------------------------------------------------------
/src/components/Feedback/Skeleton/Skeleton.tsx:
--------------------------------------------------------------------------------
1 | import { HTMLAttributes } from 'react';
2 | import styles from './Skeleton.module.css';
3 |
4 | import { classNames } from 'helpers/classNames';
5 |
6 | export interface SkeletonProps extends HTMLAttributes
33 | {children}
34 |
35 | );
36 |
--------------------------------------------------------------------------------
/src/components/Feedback/Snackbar/components/SnackbarButton/SnackbarButton.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | border: none;
3 | padding: 0;
4 | color: var(--tgui--toast_accent_color);
5 | background: transparent;
6 | }
7 |
--------------------------------------------------------------------------------
/src/components/Feedback/Snackbar/components/SnackbarButton/SnackbarButton.tsx:
--------------------------------------------------------------------------------
1 | import { ButtonHTMLAttributes } from 'react';
2 | import styles from './SnackbarButton.module.css';
3 |
4 | import { classNames } from 'helpers/classNames';
5 |
6 | import { Tappable } from 'components/Service/Tappable/Tappable';
7 |
8 | export interface SnackbarButtonProps extends ButtonHTMLAttributes
22 |
23 |
24 |
25 |
26 | ),
27 | };
28 |
--------------------------------------------------------------------------------
/src/components/Feedback/Spinner/components/BaseSpinner/BaseSpinner.tsx:
--------------------------------------------------------------------------------
1 | import { SpinnerProps } from 'components/Feedback/Spinner/Spinner';
2 | import { IconLarge } from './icons/large';
3 | import { IconMedium } from './icons/medium';
4 | import { IconSmall } from './icons/small';
5 |
6 | interface BaseSpinnerProps {
7 | size: SpinnerProps['size'];
8 | }
9 |
10 | const componentBySize = {
11 | s: IconSmall,
12 | m: IconMedium,
13 | l: IconLarge,
14 | };
15 |
16 | const rotateCenterBySize = {
17 | s: 12,
18 | m: 18,
19 | l: 22,
20 | };
21 |
22 | export const BaseSpinner = ({ size }: BaseSpinnerProps) => {
23 | const Component = componentBySize[size];
24 | const rotateCenter = rotateCenterBySize[size];
25 |
26 | return (
27 | 23 |
24 |
25 |
17 |
18 |
19 |
20 |
21 |
22 | |
23 | First radio
24 | |
25 |
26 |
27 | ),
28 | } satisfies Story;
29 |
--------------------------------------------------------------------------------
/src/components/Feedback/index.tsx:
--------------------------------------------------------------------------------
1 | export type { CircularProgressProps } from './CircularProgress/CircularProgress';
2 | export { CircularProgress } from './CircularProgress/CircularProgress';
3 | export type { ProgressProps } from './Progress/Progress';
4 | export { Progress } from './Progress/Progress';
5 | export type { SkeletonProps } from './Skeleton/Skeleton';
6 | export { Skeleton } from './Skeleton/Skeleton';
7 | export type { SnackbarProps } from './Snackbar/Snackbar';
8 | export { Snackbar } from './Snackbar/Snackbar';
9 | export type { SpinnerProps } from './Spinner/Spinner';
10 | export { Spinner } from './Spinner/Spinner';
11 | export type { SpoilerProps } from './Spoiler/Spoiler';
12 | export { Spoiler } from './Spoiler/Spoiler';
13 |
--------------------------------------------------------------------------------
/src/components/Form/Checkbox/Checkbox.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | cursor: pointer;
3 | position: relative;
4 | }
5 |
6 | .wrapper--disabled {
7 | cursor: default;
8 | opacity: .3;
9 | }
10 |
11 | .icon {
12 | display: block;
13 | color: var(--tgui--outline);
14 | }
15 |
16 | .checkedIcon {
17 | position: absolute;
18 | top: 0;
19 | opacity: 0;
20 | color: var(--tgui--link_color);
21 | transition: opacity .15s ease-out;
22 | }
23 |
24 | .input:checked ~ .checkedIcon {
25 | opacity: 1;
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/Form/Checkbox/Checkbox.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { Cell, Placeholder } from 'components';
4 | import { Checkbox } from './Checkbox';
5 |
6 | const meta = {
7 | title: 'Form/Checkbox',
8 | component: Checkbox,
9 | } satisfies Meta21 |
-
20 |
-
31 |
24 | {children}
25 |
27 |
28 |
29 | {label}
30 |
31 |
32 | ));
33 |
--------------------------------------------------------------------------------
/src/components/Form/FormInput/components/FormInputTitle.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { usePlatform } from 'hooks/usePlatform';
4 |
5 | import { Caption } from 'components/Typography/Caption/Caption';
6 | import { Subheadline } from 'components/Typography/Subheadline/Subheadline';
7 | import { TypographyProps } from 'components/Typography/Typography';
8 |
9 | export const FormInputTitle = ({ ...restProps }: TypographyProps) => {
10 | const platform = usePlatform();
11 |
12 | if (platform === 'ios') {
13 | return
19 |
21 | ),
22 | ],
23 | } satisfies Story;
24 |
--------------------------------------------------------------------------------
/src/components/Form/PinInput/components/PinInputButton/PinInputButton.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | width: var(--tgui--pin_input--button-width);
3 | height: 56px;
4 |
5 | padding: 0;
6 |
7 | border: none;
8 | border-radius: 16px;
9 | color: var(--tgui--text_color);
10 | background: var(--tgui--tertiary_bg_color);
11 | }
12 |
13 | .wrapper--ios {
14 | width: 76px;
15 | height: 76px;
16 |
17 | border-radius: 50%;
18 | }
19 |
--------------------------------------------------------------------------------
/src/components/Form/PinInput/components/PinInputButton/PinInputButton.tsx:
--------------------------------------------------------------------------------
1 | import { ButtonHTMLAttributes } from 'react';
2 | import styles from './PinInputButton.module.css';
3 |
4 | import { classNames } from 'helpers/classNames';
5 | import { usePlatform } from 'hooks/usePlatform';
6 |
7 | import { Tappable } from 'components/Service/Tappable/Tappable';
8 | import { LargeTitle } from 'components/Typography/LargeTitle/LargeTitle';
9 | import { Title } from 'components/Typography/Title/Title';
10 | import { TypographyProps } from 'components/Typography/Typography';
11 |
12 | export interface PinInputButtonProps extends ButtonHTMLAttributes-
22 |
26 |
21 |
22 |
23 |
24 |
25 |
26 | 22 |
23 |
24 |
25 |
-
20 |
24 |
20 |
21 |
24 |
25 |
26 |
29 |
30 |
31 | ),
32 | } satisfies Story;
33 |
34 |
--------------------------------------------------------------------------------
/src/components/Layout/Tabbar/Tabbar.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | display: flex;
3 | justify-items: stretch;
4 |
5 | box-shadow: 0 -1px 0 var(--tgui--divider);
6 | background: var(--tgui--surface_primary);
7 | padding: 0 16px;
8 | }
9 |
10 | .wrapper--ios {
11 | padding: 0;
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/Layout/Tabbar/components/TabbarItem/TabbarItem.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | display: flex;
3 | align-items: center;
4 | justify-content: center;
5 | flex-direction: column;
6 | gap: 6px;
7 |
8 | flex: 1 0 0;
9 | max-inline-size: 100%;
10 | min-inline-size: 0;
11 |
12 | padding: 12px 16px 16px;
13 | margin: 0;
14 | border: none;
15 | background: transparent;
16 |
17 | transition: .15s ease-out;
18 | color: var(--tgui--secondary_hint_color);
19 | }
20 |
21 | .wrapper--ios {
22 | padding: 8px 12px 4px;
23 | gap: 4px;
24 | }
25 |
26 | .wrapper--selected {
27 | color: var(--tgui--link_color);
28 | }
29 |
30 | .wrapper--selected:not(.wrapper--ios) .icon {
31 | background: var(--tgui--secondary_fill);
32 | }
33 |
34 | .icon {
35 | display: flex;
36 | justify-content: center;
37 | min-width: 64px;
38 | padding: 2px 10px;
39 | border-radius: 35px;
40 | }
41 |
42 | .wrapper--ios .icon {
43 | padding: 0;
44 | }
45 |
46 | .text {
47 | white-space: nowrap;
48 | max-inline-size: 100%;
49 | overflow: hidden;
50 | text-overflow: ellipsis;
51 | }
52 |
--------------------------------------------------------------------------------
/src/components/Layout/Tabbar/components/TabbarItem/TabbarItem.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { Icon28Devices } from 'icons/28/devices';
3 | import { hideControls } from 'storybook/controls';
4 |
5 | import { TabbarItem, TabbarItemProps } from './TabbarItem';
6 |
7 | const meta = {
8 | title: 'Layout/Tabbar/Tabbar.Item',
9 | component: TabbarItem,
10 | argTypes: hideControls('children'),
11 | } satisfies Meta-
17 |
18 | | Divider is under |
19 | Divider is above |
21 |
22 | 14 | ); 15 | -------------------------------------------------------------------------------- /src/components/Misc/index.tsx: -------------------------------------------------------------------------------- 1 | export type { DividerProps } from './Divider/Divider'; 2 | export { Divider } from './Divider/Divider'; 3 | -------------------------------------------------------------------------------- /src/components/Navigation/Breadcrumbs/Breadcrumbs.module.css: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | display: flex; 3 | align-items: center; 4 | } 5 | 6 | .divider { 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | 11 | width: 24px; 12 | height: 20px; 13 | 14 | margin: 0 -6px; 15 | color: var(--tgui--divider); 16 | } 17 | 18 | .chevron { 19 | color: var(--tgui--link_color); 20 | } 21 | -------------------------------------------------------------------------------- /src/components/Navigation/Breadcrumbs/components/BreadCrumbsItem/BreadCrumbsItem.module.css: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | cursor: pointer; 3 | padding: 8px 10px; 4 | border-radius: 8px; 5 | 6 | text-decoration: none; 7 | transition: opacity .15s ease-out; 8 | color: var(--tgui--hint_color); 9 | } 10 | 11 | .wrapper:active { 12 | opacity: .5; 13 | } 14 | 15 | @media (hover: hover) and (pointer: fine) { 16 | .wrapper:hover { 17 | background: var(--tgui--tertiary_bg_color); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/components/Navigation/Breadcrumbs/components/BreadCrumbsItem/BreadCrumbsItem.tsx: -------------------------------------------------------------------------------- 1 | import { AllHTMLAttributes, ElementType } from 'react'; 2 | import styles from './BreadCrumbsItem.module.css'; 3 | 4 | import { classNames } from 'helpers/classNames'; 5 | 6 | import { Subheadline } from 'components/Typography/Subheadline/Subheadline'; 7 | 8 | export interface BreadCrumbsItemProps extends AllHTMLAttributes
24 |
32 | {before}
33 |
34 | {platform === 'ios' &&
36 | {after}
37 |
38 | 26 |
30 |
47 |
51 |
` HTML tag, providing semantic meaning and ensuring good SEO practices,
14 | * but can be customized as needed.
15 | */
16 | export const Headline = ({ className, Component, ...restProps }: HeadlineProps) => (
17 | ;
11 |
12 | export default meta;
13 |
14 | type Story = StoryObj;
15 |
16 | export const Playground: Story = {
17 | args: {
18 | plain: false,
19 | },
20 | render: (args) => (
21 | <>
22 |
23 | Large Title · Regular
24 |
25 |
26 | Large Title · Semibold
27 |
28 |
29 | Large Title · Bold
30 |
31 |
32 | ),
33 | };
34 |
--------------------------------------------------------------------------------
/src/components/Typography/LargeTitle/LargeTitle.tsx:
--------------------------------------------------------------------------------
1 | import styles from './LargeTitle.module.css';
2 |
3 | import { classNames } from 'helpers/classNames';
4 |
5 | import { Typography, TypographyProps } from '../Typography';
6 |
7 | export type LargeTitleProps = TypographyProps;
8 |
9 | /**
10 | * The LargeTitle component is designed for prominent display text, typically used for major headings
11 | * or titles within an application. It encapsulates the Typography component's features, offering
12 | * extensive styling and semantic customization options while defaulting to an `` HTML element.
13 | * This choice of default component underscores the importance and hierarchy of the text it encapsulates,
14 | * making it suitable for primary page titles or significant headings.
15 | */
16 | export const LargeTitle = ({ className, Component, ...restProps }: LargeTitleProps) => (
17 | ;
11 |
12 | export default meta;
13 |
14 | type Story = StoryObj;
15 |
16 | export const Playground: Story = {
17 | render: (args) => (
18 | <>
19 |
20 | Text · Regular
21 |
22 |
23 |
24 | Text · Semibold
25 |
26 |
27 |
28 | Text · Bold
29 |
30 |
31 | ),
32 | };
33 |
--------------------------------------------------------------------------------
/src/components/Typography/Text/Text.tsx:
--------------------------------------------------------------------------------
1 | import { forwardRef } from 'react';
2 | import styles from './Text.module.css';
3 |
4 | import { classNames } from 'helpers/classNames';
5 |
6 | import { Typography, TypographyProps } from '../Typography';
7 |
8 | export type TextProps = Omit
9 |
10 | /**
11 | * Text component is designed for general-purpose text rendering,
12 | * offering a wide range of typographic options. It extends the Typography
13 | * component, inheriting its flexibility and styling capabilities.
14 | * This component is ideal for paragraphs, labels, or any textual content, providing
15 | * consistent styling across the application.
16 | */
17 | export const Text = forwardRef(({
18 | weight,
19 | className,
20 | Component,
21 | ...restProps
22 | }: TextProps, ref) => (
23 | = T[keyof T];
2 |
3 | export const Keys = {
4 | ENTER: 'Enter',
5 | SPACE: 'Space',
6 | TAB: 'Tab',
7 | ESCAPE: 'Escape',
8 | HOME: 'Home',
9 | END: 'End',
10 | BACKSPACE: 'Backspace',
11 | ARROW_LEFT: 'ArrowLeft',
12 | ARROW_RIGHT: 'ArrowRight',
13 | ARROW_UP: 'ArrowUp',
14 | ARROW_DOWN: 'ArrowDown',
15 | PAGE_UP: 'PageUp',
16 | PAGE_DOWN: 'PageDown',
17 | } as const;
18 |
19 | export type KeysValues = ValuesOfObject;
20 |
21 | export const getHorizontalSideByKey = (
22 | keys: Extract,
23 | ) => {
24 | switch (keys) {
25 | case Keys.ARROW_UP:
26 | case Keys.ARROW_LEFT:
27 | return 'left';
28 | case Keys.ARROW_DOWN:
29 | case Keys.ARROW_RIGHT:
30 | return 'right';
31 |
32 | default:
33 | return undefined;
34 | }
35 | };
36 |
--------------------------------------------------------------------------------
/src/helpers/array.ts:
--------------------------------------------------------------------------------
1 | export const range = (startPosition: number, endPosition: number) => {
2 | const length = endPosition - startPosition + 1;
3 | return Array.from({ length }, (_, i) => startPosition + i);
4 | };
5 |
--------------------------------------------------------------------------------
/src/helpers/chunk.ts:
--------------------------------------------------------------------------------
1 | export const createChunks = (array: T[], chunkSize: number): T[][] => {
2 | const chunks = [];
3 |
4 | for (let i = 0; i < array.length; i += chunkSize) {
5 | chunks.push(array.slice(i, i + chunkSize));
6 | }
7 |
8 | return chunks;
9 | };
10 |
--------------------------------------------------------------------------------
/src/helpers/classNames.ts:
--------------------------------------------------------------------------------
1 | interface ClassNamesDictionary {
2 | [index: string]: boolean | undefined | null;
3 | }
4 |
5 | export type ClassName = string | number | ClassNamesDictionary | boolean | undefined | null;
6 |
7 | export function classNames(...args: ClassName[]): string {
8 | const result: string[] = [];
9 |
10 | args.forEach((item): void => {
11 | if (!item) {
12 | return;
13 | }
14 |
15 | switch (typeof item) {
16 | case 'string':
17 | result.push(item);
18 | break;
19 |
20 | case 'object':
21 | Object.keys(item).forEach((key: string) => {
22 | if (item[key]) {
23 | result.push(key);
24 | }
25 | });
26 | break;
27 |
28 | default:
29 | result.push(`${item}`);
30 | }
31 | });
32 |
33 | return result.join(' ');
34 | }
35 |
--------------------------------------------------------------------------------
/src/helpers/color.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-bitwise */
2 | export const hexToRGB = (hex: string): [number, number, number] => {
3 | let fullHex = hex;
4 |
5 | // If hex is short, make it double
6 | if (hex.length === 4) {
7 | fullHex = hex.replace(/([^#])/g, '$1$1');
8 | }
9 |
10 | const bigint = parseInt(fullHex.replace('#', ''), 16);
11 | const channelR = bigint >> 16;
12 | const channelG = bigint >> 8;
13 |
14 | return [
15 | channelR & 255,
16 | channelG & 255,
17 | bigint & 255,
18 | ];
19 | };
20 | /* eslint-enable no-bitwise */
21 |
--------------------------------------------------------------------------------
/src/helpers/dom.ts:
--------------------------------------------------------------------------------
1 | import { isHTMLElement } from '@floating-ui/utils/dom';
2 |
3 | export const canUseDOM = (() =>
4 | !!(typeof window !== 'undefined' && window.document && window.document.createElement))();
5 |
6 | export const getHTMLElementByChildren = (children: HTMLCollection, index: number) => {
7 | const foundEl = children[index];
8 | return isHTMLElement(foundEl) ? foundEl : null;
9 | };
10 |
11 | export const getHTMLElementSiblingByDirection = (
12 | el: T,
13 | direction: 'left' | 'right',
14 | ) => {
15 | let siblingEl: Element | null = null;
16 | switch (direction) {
17 | case 'left':
18 | siblingEl = el.previousElementSibling;
19 | break;
20 | case 'right':
21 | siblingEl = el.nextElementSibling;
22 | break;
23 |
24 | default:
25 | return null;
26 | }
27 |
28 | return isHTMLElement(siblingEl) ? siblingEl : null;
29 | };
30 |
31 |
--------------------------------------------------------------------------------
/src/helpers/equal.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-explicit-any */
2 |
3 | import { isObjectLike } from './object';
4 |
5 | export const isEqual = (value: any, other: any): boolean => {
6 | if (value === other) {
7 | return true;
8 | }
9 |
10 | if (value == null || other == null || (!isObjectLike(value) && !isObjectLike(other))) {
11 | return false;
12 | }
13 |
14 | if (isObjectLike(value) && isObjectLike(other)) {
15 | if (Object.keys(value).length !== Object.keys(other).length) {
16 | return false;
17 | }
18 |
19 | // eslint-disable-next-line no-restricted-syntax
20 | for (const prop in value) {
21 | if (Object.prototype.hasOwnProperty.call(value, prop) && Object.prototype.hasOwnProperty.call(other, prop)) {
22 | if (!isEqual(value[prop], other[prop])) {
23 | return false;
24 | }
25 | } else {
26 | return false;
27 | }
28 | }
29 |
30 | return true;
31 | }
32 |
33 | return false;
34 | };
35 |
36 |
--------------------------------------------------------------------------------
/src/helpers/function.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-explicit-any */
2 |
3 | export const callMultiple =
4 | (...fns: any) =>
5 | (...args: any) =>
6 | fns.filter((f: any) => typeof f === 'function').forEach((f: any) => f(...args));
7 |
--------------------------------------------------------------------------------
/src/helpers/math.ts:
--------------------------------------------------------------------------------
1 | export const clamp = (value: number, min: number, max: number) => {
2 | return Math.max(min, Math.min(value, max));
3 | };
4 |
--------------------------------------------------------------------------------
/src/helpers/object.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-explicit-any */
2 |
3 | export const isObjectLike = (object: any): boolean => {
4 | return typeof object === 'object' && object !== null;
5 | };
6 |
--------------------------------------------------------------------------------
/src/helpers/react/children.ts:
--------------------------------------------------------------------------------
1 | // Code from library from react-children-utilities
2 | // @see https://github.com/fernandopasik/react-children-utilities/tree/main
3 |
4 | import { Children, isValidElement, ReactNode } from 'react';
5 |
6 | export const childToString = (child?: ReactNode): string => {
7 | if (typeof child === 'undefined' || child === null || typeof child === 'boolean') {
8 | return '';
9 | }
10 |
11 | if (JSON.stringify(child) === '{}') {
12 | return '';
13 | }
14 |
15 | return (child as number | string).toString();
16 | };
17 |
18 | export const getTextFromChildren = (children: ReactNode | ReactNode[]): string => {
19 | if (!(children instanceof Array) && !isValidElement(children)) {
20 | return childToString(children);
21 | }
22 |
23 | return Children.toArray(children).reduce((text: string, child: ReactNode): string => {
24 | let newText = '';
25 | const isValidElementResult = isValidElement<{ children?: ReactNode | ReactNode[] }>(child);
26 | const hasChildren = isValidElementResult && 'children' in child.props;
27 |
28 | if (isValidElementResult && hasChildren) {
29 | newText = getTextFromChildren(child.props.children);
30 | } else if (isValidElementResult && !hasChildren) {
31 | newText = '';
32 | } else {
33 | newText = childToString(child);
34 | }
35 |
36 | return text.concat(newText);
37 | }, '');
38 | };
39 |
--------------------------------------------------------------------------------
/src/helpers/react/node.ts:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 |
3 | export const hasReactNode = (value: ReactNode): boolean => {
4 | return value !== undefined && value !== false && value !== null && value !== '';
5 | };
6 |
7 | export function isPrimitiveReactNode(node: ReactNode): boolean {
8 | return typeof node === 'string' || typeof node === 'number';
9 | }
10 |
--------------------------------------------------------------------------------
/src/helpers/react/refs.ts:
--------------------------------------------------------------------------------
1 | import { MutableRefObject, Ref, RefObject } from 'react';
2 |
3 | export const setRef = (element: T, ref?: Ref): void => {
4 | if (ref) {
5 | if (typeof ref === 'function') {
6 | ref(element);
7 | } else {
8 | // eslint-disable-next-line no-param-reassign
9 | (ref as MutableRefObject).current = element;
10 | }
11 | }
12 | };
13 |
14 | export const multipleRef = (...refs: Array | undefined>): RefObject => {
15 | let current: T | null = null;
16 | return {
17 | get current() {
18 | return current;
19 | },
20 | set current(element) {
21 | current = element;
22 | refs.forEach((ref) => ref && setRef(element, ref));
23 | },
24 | };
25 | };
26 |
--------------------------------------------------------------------------------
/src/helpers/telegram.ts:
--------------------------------------------------------------------------------
1 | import { canUseDOM } from 'helpers/dom';
2 |
3 | import { Telegram } from '@twa-dev/types';
4 |
5 | declare global {
6 | interface Window {
7 | Telegram?: Telegram;
8 | }
9 | }
10 |
11 | export const getTelegramData = () => {
12 | if (!canUseDOM) {
13 | return undefined;
14 | }
15 |
16 | return window.Telegram?.WebApp;
17 | };
18 |
--------------------------------------------------------------------------------
/src/hooks/useAppRootContext.ts:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useContext } from 'react';
4 |
5 | import { AppRootContext } from 'components/Service/AppRoot/AppRootContext';
6 |
7 | export const useAppRootContext = () => {
8 | const appRootContext = useContext(AppRootContext);
9 |
10 | if (!appRootContext.isRendered) {
11 | throw new Error('[TGUI] Wrap your app with component');
12 | }
13 |
14 | return appRootContext;
15 | };
16 |
--------------------------------------------------------------------------------
/src/hooks/useEnhancedEffect.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useLayoutEffect } from 'react';
2 |
3 | import { canUseDOM } from 'helpers/dom';
4 |
5 | /**
6 | * A version of `useLayoutEffect` that does not show a warning when server-side rendering.
7 | * This is useful for effects that are only needed for client-side rendering but not for SSR.
8 | */
9 | export const useEnhancedEffect = canUseDOM ? useLayoutEffect : useEffect;
10 |
--------------------------------------------------------------------------------
/src/hooks/useExternalRefs.ts:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { MutableRefObject, Ref, useMemo, useRef } from 'react';
4 |
5 | import { setRef } from 'helpers/react/refs';
6 |
7 | export function useExternRef(
8 | ...externRefs: Array | undefined | false>
9 | ): MutableRefObject {
10 | const stableRef = useRef(null);
11 |
12 | return useMemo(
13 | () => ({
14 | get current() {
15 | return stableRef.current;
16 | },
17 | set current(el) {
18 | stableRef.current = el;
19 | externRefs.forEach((ref) => {
20 | if (ref) {
21 | setRef(el, ref);
22 | }
23 | });
24 | },
25 | }),
26 | externRefs,
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/src/hooks/useGlobalClicks.ts:
--------------------------------------------------------------------------------
1 | import { RefObject } from 'react';
2 |
3 | import { useEnhancedEffect } from 'hooks/useEnhancedEffect';
4 |
5 | import { isElement } from '@floating-ui/utils/dom';
6 |
7 | /**
8 | * Function helps to handle global clicks outside the given refs
9 | * If the click is outside the given refs, the callback will be called
10 | */
11 | export const useGlobalClicks = <
12 | T extends RefObject | undefined | null,
13 | ElementType extends Element = Element,
14 | >(
15 | callback: (event: MouseEvent) => void,
16 | ...refs: T[]
17 | ) => {
18 | useEnhancedEffect(() => {
19 | const hasNotNullRefs = refs.some((ref) => ref && ref.current !== null);
20 | if (!document || !hasNotNullRefs) {
21 | return () => {};
22 | }
23 |
24 | const handleClick = (event: MouseEvent) => {
25 | const targetEl = event.target;
26 | const isClickInsideGivenRefs =
27 | isElement(targetEl) &&
28 | refs.some((ref) => ref && ref.current && ref.current.contains(targetEl));
29 |
30 | !isClickInsideGivenRefs && callback(event);
31 | };
32 |
33 | document.addEventListener('click', handleClick, {
34 | passive: true,
35 | capture: true,
36 | });
37 |
38 | return () => document.removeEventListener('click', handleClick, true);
39 | }, [document, callback, ...refs]);
40 | };
41 |
--------------------------------------------------------------------------------
/src/hooks/useObjectMemo.ts:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useRef } from 'react';
4 |
5 | import { isEqual } from 'helpers/equal';
6 |
7 | export const useObjectMemo = (object: T): T => {
8 | const cache = useRef(object);
9 |
10 | if (!isEqual(cache.current, object)) {
11 | cache.current = object;
12 | }
13 |
14 | return cache.current;
15 | };
16 |
17 |
--------------------------------------------------------------------------------
/src/hooks/usePlatform.ts:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useAppRootContext } from 'hooks/useAppRootContext';
4 |
5 | import { AppRootContextInterface } from 'components/Service/AppRoot/AppRootContext';
6 |
7 | export const usePlatform = (): NonNullable => {
8 | const context = useAppRootContext();
9 | return context.platform || 'base';
10 | };
11 |
--------------------------------------------------------------------------------
/src/hooks/useTimeout.ts:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useCallback, useRef } from 'react';
4 |
5 | import { useEnhancedEffect } from 'hooks/useEnhancedEffect';
6 |
7 | export const useTimeout = (callbackFunction: () => void, duration: number) => {
8 | const options = useRef({ callbackFunction, duration });
9 |
10 | useEnhancedEffect(() => {
11 | options.current.callbackFunction = callbackFunction;
12 | options.current.duration = duration;
13 | }, [callbackFunction, duration]);
14 |
15 | const timeout = useRef>();
16 |
17 | const clear = useCallback(() => clearTimeout(timeout?.current), []);
18 |
19 | const set = useCallback(() => {
20 | clear();
21 | timeout.current = setTimeout(options.current.callbackFunction, options.current.duration);
22 | }, [clear]);
23 |
24 | return { set, clear };
25 | };
26 |
--------------------------------------------------------------------------------
/src/icons/12/quote.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon12Quote = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/16/cancel.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon16Cancel = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/16/chevron.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon16Chevron = ({ ...restProps }: Icon) => (
4 |
7 | );
8 |
--------------------------------------------------------------------------------
/src/icons/20/chevron_down.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon20ChevronDown = ({ ...restProps }: Icon) => (
4 |
9 |
10 | );
11 |
--------------------------------------------------------------------------------
/src/icons/20/select.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon20Select = ({ ...restProps }: Icon) => (
4 |
13 | );
14 |
--------------------------------------------------------------------------------
/src/icons/20/select_ios.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon20SelectIOS = ({ ...restProps }: Icon) => (
4 |
10 | );
11 |
--------------------------------------------------------------------------------
/src/icons/24/cancel.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon24Cancel = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/24/chat.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon24Chat = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/24/chevron_down.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon24ChevronDown = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/24/chevron_left.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon24ChevronLeft = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/24/chevron_right.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon24ChevronRight = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/24/close.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon24Close = ({ ...restProps }: Icon) => (
4 |
19 | );
20 |
--------------------------------------------------------------------------------
/src/icons/24/person_remove.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon24PersonRemove = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/24/sun_low.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon24SunLow = ({ ...restProps }: Icon) => (
4 |
17 | );
18 |
--------------------------------------------------------------------------------
/src/icons/28/add_circle.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon28AddCircle = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/28/archive.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon28Archive = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/28/attach.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon28Attach = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/28/chat.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon28Chat = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/28/close.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon28Close = ({ ...restProps }: Icon) => (
4 |
18 | );
19 |
--------------------------------------------------------------------------------
/src/icons/28/close_ambient.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon28CloseAmbient = ({ ...restProps }: Icon) => (
4 |
18 | );
19 |
--------------------------------------------------------------------------------
/src/icons/28/devices.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon28Devices = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/28/edit.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon28Edit = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/28/heart.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon28Heart = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/28/stats.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon28Stats = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components';
2 |
--------------------------------------------------------------------------------
/src/storybook/controls.ts:
--------------------------------------------------------------------------------
1 | type ControlTypes = 'text' | null;
2 |
3 | export const setControlsTypes = (controls: string[], type: ControlTypes) => {
4 | return controls.reduce>((acc, control) => {
7 | acc[control] = {
8 | control: { type },
9 | };
10 |
11 | return acc;
12 | }, {});
13 | };
14 |
15 | export const hideControls = (...controls: string[]) => {
16 | return setControlsTypes(controls, null);
17 | };
18 |
19 | export const textControl = {
20 | type: 'text',
21 | };
22 |
23 | export const hiddenControl = {
24 | type: null,
25 | };
26 |
--------------------------------------------------------------------------------
/src/types/Icon.ts:
--------------------------------------------------------------------------------
1 | import { SVGProps } from 'react';
2 |
3 | export interface Icon extends SVGProps {
4 | title?: string
5 | }
6 |
--------------------------------------------------------------------------------
/tsconfig.dist.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "rootDir": "./src",
5 | "outDir": "dist",
6 | "declarationMap": true
7 | },
8 | "include": ["src/**/*.ts*"],
9 | "exclude": [
10 | "node_modules",
11 | "src/**/*.stories.ts*",
12 | "src/**/*.test.ts*",
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "jsx": "react-jsx",
4 | "lib": ["dom", "es2015"],
5 | "module": "commonjs",
6 | "baseUrl": ".",
7 | "paths": {
8 | "*": ["./src/*"]
9 | },
10 | "outDir": "./dist",
11 | "esModuleInterop": true,
12 | "forceConsistentCasingInFileNames": true,
13 | "strict": true,
14 | "skipLibCheck": true,
15 | },
16 | "include": [
17 | "**/*.tsx",
18 | "**/*.ts",
19 | "**/*.js",
20 | ".eslintrc.js"
21 | ],
22 | "exclude": [
23 | "node_modules",
24 | "dist"
25 | ],
26 | "files": [
27 | "./types/declarations.d.ts"
28 | ]
29 | }
30 |
--------------------------------------------------------------------------------
/types/declarations.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.module.css' {
2 | const classes: { readonly [key: string]: string };
3 | export default classes;
4 | }
5 |
6 | declare module '*.svg' {
7 | import { FunctionComponent, SVGProps } from 'react';
8 |
9 | export const ReactComponent: FunctionComponent & { title?: string }>;
10 |
11 | const src: string;
12 | export default src;
13 | }
14 |
--------------------------------------------------------------------------------
` HTML element.
13 | * This choice of default component underscores the importance and hierarchy of the text it encapsulates,
14 | * making it suitable for primary page titles or significant headings.
15 | */
16 | export const LargeTitle = ({ className, Component, ...restProps }: LargeTitleProps) => (
17 | ;
11 |
12 | export default meta;
13 |
14 | type Story = StoryObj;
15 |
16 | export const Playground: Story = {
17 | render: (args) => (
18 | <>
19 |
20 | Text · Regular
21 |
22 |
23 |
24 | Text · Semibold
25 |
26 |
27 |
28 | Text · Bold
29 |
30 |
31 | ),
32 | };
33 |
--------------------------------------------------------------------------------
/src/components/Typography/Text/Text.tsx:
--------------------------------------------------------------------------------
1 | import { forwardRef } from 'react';
2 | import styles from './Text.module.css';
3 |
4 | import { classNames } from 'helpers/classNames';
5 |
6 | import { Typography, TypographyProps } from '../Typography';
7 |
8 | export type TextProps = Omit
9 |
10 | /**
11 | * Text component is designed for general-purpose text rendering,
12 | * offering a wide range of typographic options. It extends the Typography
13 | * component, inheriting its flexibility and styling capabilities.
14 | * This component is ideal for paragraphs, labels, or any textual content, providing
15 | * consistent styling across the application.
16 | */
17 | export const Text = forwardRef(({
18 | weight,
19 | className,
20 | Component,
21 | ...restProps
22 | }: TextProps, ref) => (
23 | = T[keyof T];
2 |
3 | export const Keys = {
4 | ENTER: 'Enter',
5 | SPACE: 'Space',
6 | TAB: 'Tab',
7 | ESCAPE: 'Escape',
8 | HOME: 'Home',
9 | END: 'End',
10 | BACKSPACE: 'Backspace',
11 | ARROW_LEFT: 'ArrowLeft',
12 | ARROW_RIGHT: 'ArrowRight',
13 | ARROW_UP: 'ArrowUp',
14 | ARROW_DOWN: 'ArrowDown',
15 | PAGE_UP: 'PageUp',
16 | PAGE_DOWN: 'PageDown',
17 | } as const;
18 |
19 | export type KeysValues = ValuesOfObject;
20 |
21 | export const getHorizontalSideByKey = (
22 | keys: Extract,
23 | ) => {
24 | switch (keys) {
25 | case Keys.ARROW_UP:
26 | case Keys.ARROW_LEFT:
27 | return 'left';
28 | case Keys.ARROW_DOWN:
29 | case Keys.ARROW_RIGHT:
30 | return 'right';
31 |
32 | default:
33 | return undefined;
34 | }
35 | };
36 |
--------------------------------------------------------------------------------
/src/helpers/array.ts:
--------------------------------------------------------------------------------
1 | export const range = (startPosition: number, endPosition: number) => {
2 | const length = endPosition - startPosition + 1;
3 | return Array.from({ length }, (_, i) => startPosition + i);
4 | };
5 |
--------------------------------------------------------------------------------
/src/helpers/chunk.ts:
--------------------------------------------------------------------------------
1 | export const createChunks = (array: T[], chunkSize: number): T[][] => {
2 | const chunks = [];
3 |
4 | for (let i = 0; i < array.length; i += chunkSize) {
5 | chunks.push(array.slice(i, i + chunkSize));
6 | }
7 |
8 | return chunks;
9 | };
10 |
--------------------------------------------------------------------------------
/src/helpers/classNames.ts:
--------------------------------------------------------------------------------
1 | interface ClassNamesDictionary {
2 | [index: string]: boolean | undefined | null;
3 | }
4 |
5 | export type ClassName = string | number | ClassNamesDictionary | boolean | undefined | null;
6 |
7 | export function classNames(...args: ClassName[]): string {
8 | const result: string[] = [];
9 |
10 | args.forEach((item): void => {
11 | if (!item) {
12 | return;
13 | }
14 |
15 | switch (typeof item) {
16 | case 'string':
17 | result.push(item);
18 | break;
19 |
20 | case 'object':
21 | Object.keys(item).forEach((key: string) => {
22 | if (item[key]) {
23 | result.push(key);
24 | }
25 | });
26 | break;
27 |
28 | default:
29 | result.push(`${item}`);
30 | }
31 | });
32 |
33 | return result.join(' ');
34 | }
35 |
--------------------------------------------------------------------------------
/src/helpers/color.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-bitwise */
2 | export const hexToRGB = (hex: string): [number, number, number] => {
3 | let fullHex = hex;
4 |
5 | // If hex is short, make it double
6 | if (hex.length === 4) {
7 | fullHex = hex.replace(/([^#])/g, '$1$1');
8 | }
9 |
10 | const bigint = parseInt(fullHex.replace('#', ''), 16);
11 | const channelR = bigint >> 16;
12 | const channelG = bigint >> 8;
13 |
14 | return [
15 | channelR & 255,
16 | channelG & 255,
17 | bigint & 255,
18 | ];
19 | };
20 | /* eslint-enable no-bitwise */
21 |
--------------------------------------------------------------------------------
/src/helpers/dom.ts:
--------------------------------------------------------------------------------
1 | import { isHTMLElement } from '@floating-ui/utils/dom';
2 |
3 | export const canUseDOM = (() =>
4 | !!(typeof window !== 'undefined' && window.document && window.document.createElement))();
5 |
6 | export const getHTMLElementByChildren = (children: HTMLCollection, index: number) => {
7 | const foundEl = children[index];
8 | return isHTMLElement(foundEl) ? foundEl : null;
9 | };
10 |
11 | export const getHTMLElementSiblingByDirection = (
12 | el: T,
13 | direction: 'left' | 'right',
14 | ) => {
15 | let siblingEl: Element | null = null;
16 | switch (direction) {
17 | case 'left':
18 | siblingEl = el.previousElementSibling;
19 | break;
20 | case 'right':
21 | siblingEl = el.nextElementSibling;
22 | break;
23 |
24 | default:
25 | return null;
26 | }
27 |
28 | return isHTMLElement(siblingEl) ? siblingEl : null;
29 | };
30 |
31 |
--------------------------------------------------------------------------------
/src/helpers/equal.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-explicit-any */
2 |
3 | import { isObjectLike } from './object';
4 |
5 | export const isEqual = (value: any, other: any): boolean => {
6 | if (value === other) {
7 | return true;
8 | }
9 |
10 | if (value == null || other == null || (!isObjectLike(value) && !isObjectLike(other))) {
11 | return false;
12 | }
13 |
14 | if (isObjectLike(value) && isObjectLike(other)) {
15 | if (Object.keys(value).length !== Object.keys(other).length) {
16 | return false;
17 | }
18 |
19 | // eslint-disable-next-line no-restricted-syntax
20 | for (const prop in value) {
21 | if (Object.prototype.hasOwnProperty.call(value, prop) && Object.prototype.hasOwnProperty.call(other, prop)) {
22 | if (!isEqual(value[prop], other[prop])) {
23 | return false;
24 | }
25 | } else {
26 | return false;
27 | }
28 | }
29 |
30 | return true;
31 | }
32 |
33 | return false;
34 | };
35 |
36 |
--------------------------------------------------------------------------------
/src/helpers/function.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-explicit-any */
2 |
3 | export const callMultiple =
4 | (...fns: any) =>
5 | (...args: any) =>
6 | fns.filter((f: any) => typeof f === 'function').forEach((f: any) => f(...args));
7 |
--------------------------------------------------------------------------------
/src/helpers/math.ts:
--------------------------------------------------------------------------------
1 | export const clamp = (value: number, min: number, max: number) => {
2 | return Math.max(min, Math.min(value, max));
3 | };
4 |
--------------------------------------------------------------------------------
/src/helpers/object.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-explicit-any */
2 |
3 | export const isObjectLike = (object: any): boolean => {
4 | return typeof object === 'object' && object !== null;
5 | };
6 |
--------------------------------------------------------------------------------
/src/helpers/react/children.ts:
--------------------------------------------------------------------------------
1 | // Code from library from react-children-utilities
2 | // @see https://github.com/fernandopasik/react-children-utilities/tree/main
3 |
4 | import { Children, isValidElement, ReactNode } from 'react';
5 |
6 | export const childToString = (child?: ReactNode): string => {
7 | if (typeof child === 'undefined' || child === null || typeof child === 'boolean') {
8 | return '';
9 | }
10 |
11 | if (JSON.stringify(child) === '{}') {
12 | return '';
13 | }
14 |
15 | return (child as number | string).toString();
16 | };
17 |
18 | export const getTextFromChildren = (children: ReactNode | ReactNode[]): string => {
19 | if (!(children instanceof Array) && !isValidElement(children)) {
20 | return childToString(children);
21 | }
22 |
23 | return Children.toArray(children).reduce((text: string, child: ReactNode): string => {
24 | let newText = '';
25 | const isValidElementResult = isValidElement<{ children?: ReactNode | ReactNode[] }>(child);
26 | const hasChildren = isValidElementResult && 'children' in child.props;
27 |
28 | if (isValidElementResult && hasChildren) {
29 | newText = getTextFromChildren(child.props.children);
30 | } else if (isValidElementResult && !hasChildren) {
31 | newText = '';
32 | } else {
33 | newText = childToString(child);
34 | }
35 |
36 | return text.concat(newText);
37 | }, '');
38 | };
39 |
--------------------------------------------------------------------------------
/src/helpers/react/node.ts:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 |
3 | export const hasReactNode = (value: ReactNode): boolean => {
4 | return value !== undefined && value !== false && value !== null && value !== '';
5 | };
6 |
7 | export function isPrimitiveReactNode(node: ReactNode): boolean {
8 | return typeof node === 'string' || typeof node === 'number';
9 | }
10 |
--------------------------------------------------------------------------------
/src/helpers/react/refs.ts:
--------------------------------------------------------------------------------
1 | import { MutableRefObject, Ref, RefObject } from 'react';
2 |
3 | export const setRef = (element: T, ref?: Ref): void => {
4 | if (ref) {
5 | if (typeof ref === 'function') {
6 | ref(element);
7 | } else {
8 | // eslint-disable-next-line no-param-reassign
9 | (ref as MutableRefObject).current = element;
10 | }
11 | }
12 | };
13 |
14 | export const multipleRef = (...refs: Array | undefined>): RefObject => {
15 | let current: T | null = null;
16 | return {
17 | get current() {
18 | return current;
19 | },
20 | set current(element) {
21 | current = element;
22 | refs.forEach((ref) => ref && setRef(element, ref));
23 | },
24 | };
25 | };
26 |
--------------------------------------------------------------------------------
/src/helpers/telegram.ts:
--------------------------------------------------------------------------------
1 | import { canUseDOM } from 'helpers/dom';
2 |
3 | import { Telegram } from '@twa-dev/types';
4 |
5 | declare global {
6 | interface Window {
7 | Telegram?: Telegram;
8 | }
9 | }
10 |
11 | export const getTelegramData = () => {
12 | if (!canUseDOM) {
13 | return undefined;
14 | }
15 |
16 | return window.Telegram?.WebApp;
17 | };
18 |
--------------------------------------------------------------------------------
/src/hooks/useAppRootContext.ts:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useContext } from 'react';
4 |
5 | import { AppRootContext } from 'components/Service/AppRoot/AppRootContext';
6 |
7 | export const useAppRootContext = () => {
8 | const appRootContext = useContext(AppRootContext);
9 |
10 | if (!appRootContext.isRendered) {
11 | throw new Error('[TGUI] Wrap your app with component');
12 | }
13 |
14 | return appRootContext;
15 | };
16 |
--------------------------------------------------------------------------------
/src/hooks/useEnhancedEffect.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useLayoutEffect } from 'react';
2 |
3 | import { canUseDOM } from 'helpers/dom';
4 |
5 | /**
6 | * A version of `useLayoutEffect` that does not show a warning when server-side rendering.
7 | * This is useful for effects that are only needed for client-side rendering but not for SSR.
8 | */
9 | export const useEnhancedEffect = canUseDOM ? useLayoutEffect : useEffect;
10 |
--------------------------------------------------------------------------------
/src/hooks/useExternalRefs.ts:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { MutableRefObject, Ref, useMemo, useRef } from 'react';
4 |
5 | import { setRef } from 'helpers/react/refs';
6 |
7 | export function useExternRef(
8 | ...externRefs: Array | undefined | false>
9 | ): MutableRefObject {
10 | const stableRef = useRef(null);
11 |
12 | return useMemo(
13 | () => ({
14 | get current() {
15 | return stableRef.current;
16 | },
17 | set current(el) {
18 | stableRef.current = el;
19 | externRefs.forEach((ref) => {
20 | if (ref) {
21 | setRef(el, ref);
22 | }
23 | });
24 | },
25 | }),
26 | externRefs,
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/src/hooks/useGlobalClicks.ts:
--------------------------------------------------------------------------------
1 | import { RefObject } from 'react';
2 |
3 | import { useEnhancedEffect } from 'hooks/useEnhancedEffect';
4 |
5 | import { isElement } from '@floating-ui/utils/dom';
6 |
7 | /**
8 | * Function helps to handle global clicks outside the given refs
9 | * If the click is outside the given refs, the callback will be called
10 | */
11 | export const useGlobalClicks = <
12 | T extends RefObject | undefined | null,
13 | ElementType extends Element = Element,
14 | >(
15 | callback: (event: MouseEvent) => void,
16 | ...refs: T[]
17 | ) => {
18 | useEnhancedEffect(() => {
19 | const hasNotNullRefs = refs.some((ref) => ref && ref.current !== null);
20 | if (!document || !hasNotNullRefs) {
21 | return () => {};
22 | }
23 |
24 | const handleClick = (event: MouseEvent) => {
25 | const targetEl = event.target;
26 | const isClickInsideGivenRefs =
27 | isElement(targetEl) &&
28 | refs.some((ref) => ref && ref.current && ref.current.contains(targetEl));
29 |
30 | !isClickInsideGivenRefs && callback(event);
31 | };
32 |
33 | document.addEventListener('click', handleClick, {
34 | passive: true,
35 | capture: true,
36 | });
37 |
38 | return () => document.removeEventListener('click', handleClick, true);
39 | }, [document, callback, ...refs]);
40 | };
41 |
--------------------------------------------------------------------------------
/src/hooks/useObjectMemo.ts:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useRef } from 'react';
4 |
5 | import { isEqual } from 'helpers/equal';
6 |
7 | export const useObjectMemo = (object: T): T => {
8 | const cache = useRef(object);
9 |
10 | if (!isEqual(cache.current, object)) {
11 | cache.current = object;
12 | }
13 |
14 | return cache.current;
15 | };
16 |
17 |
--------------------------------------------------------------------------------
/src/hooks/usePlatform.ts:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useAppRootContext } from 'hooks/useAppRootContext';
4 |
5 | import { AppRootContextInterface } from 'components/Service/AppRoot/AppRootContext';
6 |
7 | export const usePlatform = (): NonNullable => {
8 | const context = useAppRootContext();
9 | return context.platform || 'base';
10 | };
11 |
--------------------------------------------------------------------------------
/src/hooks/useTimeout.ts:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useCallback, useRef } from 'react';
4 |
5 | import { useEnhancedEffect } from 'hooks/useEnhancedEffect';
6 |
7 | export const useTimeout = (callbackFunction: () => void, duration: number) => {
8 | const options = useRef({ callbackFunction, duration });
9 |
10 | useEnhancedEffect(() => {
11 | options.current.callbackFunction = callbackFunction;
12 | options.current.duration = duration;
13 | }, [callbackFunction, duration]);
14 |
15 | const timeout = useRef>();
16 |
17 | const clear = useCallback(() => clearTimeout(timeout?.current), []);
18 |
19 | const set = useCallback(() => {
20 | clear();
21 | timeout.current = setTimeout(options.current.callbackFunction, options.current.duration);
22 | }, [clear]);
23 |
24 | return { set, clear };
25 | };
26 |
--------------------------------------------------------------------------------
/src/icons/12/quote.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon12Quote = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/16/cancel.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon16Cancel = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/16/chevron.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon16Chevron = ({ ...restProps }: Icon) => (
4 |
7 | );
8 |
--------------------------------------------------------------------------------
/src/icons/20/chevron_down.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon20ChevronDown = ({ ...restProps }: Icon) => (
4 |
9 |
10 | );
11 |
--------------------------------------------------------------------------------
/src/icons/20/select.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon20Select = ({ ...restProps }: Icon) => (
4 |
13 | );
14 |
--------------------------------------------------------------------------------
/src/icons/20/select_ios.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon20SelectIOS = ({ ...restProps }: Icon) => (
4 |
10 | );
11 |
--------------------------------------------------------------------------------
/src/icons/24/cancel.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon24Cancel = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/24/chat.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon24Chat = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/24/chevron_down.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon24ChevronDown = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/24/chevron_left.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon24ChevronLeft = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/24/chevron_right.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon24ChevronRight = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/24/close.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon24Close = ({ ...restProps }: Icon) => (
4 |
19 | );
20 |
--------------------------------------------------------------------------------
/src/icons/24/person_remove.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon24PersonRemove = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/24/sun_low.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon24SunLow = ({ ...restProps }: Icon) => (
4 |
17 | );
18 |
--------------------------------------------------------------------------------
/src/icons/28/add_circle.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon28AddCircle = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/28/archive.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon28Archive = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/28/attach.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon28Attach = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/28/chat.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon28Chat = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/28/close.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon28Close = ({ ...restProps }: Icon) => (
4 |
18 | );
19 |
--------------------------------------------------------------------------------
/src/icons/28/close_ambient.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon28CloseAmbient = ({ ...restProps }: Icon) => (
4 |
18 | );
19 |
--------------------------------------------------------------------------------
/src/icons/28/devices.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon28Devices = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/28/edit.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon28Edit = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/28/heart.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon28Heart = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/icons/28/stats.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'types/Icon';
2 |
3 | export const Icon28Stats = ({ ...restProps }: Icon) => (
4 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components';
2 |
--------------------------------------------------------------------------------
/src/storybook/controls.ts:
--------------------------------------------------------------------------------
1 | type ControlTypes = 'text' | null;
2 |
3 | export const setControlsTypes = (controls: string[], type: ControlTypes) => {
4 | return controls.reduce>((acc, control) => {
7 | acc[control] = {
8 | control: { type },
9 | };
10 |
11 | return acc;
12 | }, {});
13 | };
14 |
15 | export const hideControls = (...controls: string[]) => {
16 | return setControlsTypes(controls, null);
17 | };
18 |
19 | export const textControl = {
20 | type: 'text',
21 | };
22 |
23 | export const hiddenControl = {
24 | type: null,
25 | };
26 |
--------------------------------------------------------------------------------
/src/types/Icon.ts:
--------------------------------------------------------------------------------
1 | import { SVGProps } from 'react';
2 |
3 | export interface Icon extends SVGProps {
4 | title?: string
5 | }
6 |
--------------------------------------------------------------------------------
/tsconfig.dist.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "rootDir": "./src",
5 | "outDir": "dist",
6 | "declarationMap": true
7 | },
8 | "include": ["src/**/*.ts*"],
9 | "exclude": [
10 | "node_modules",
11 | "src/**/*.stories.ts*",
12 | "src/**/*.test.ts*",
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "jsx": "react-jsx",
4 | "lib": ["dom", "es2015"],
5 | "module": "commonjs",
6 | "baseUrl": ".",
7 | "paths": {
8 | "*": ["./src/*"]
9 | },
10 | "outDir": "./dist",
11 | "esModuleInterop": true,
12 | "forceConsistentCasingInFileNames": true,
13 | "strict": true,
14 | "skipLibCheck": true,
15 | },
16 | "include": [
17 | "**/*.tsx",
18 | "**/*.ts",
19 | "**/*.js",
20 | ".eslintrc.js"
21 | ],
22 | "exclude": [
23 | "node_modules",
24 | "dist"
25 | ],
26 | "files": [
27 | "./types/declarations.d.ts"
28 | ]
29 | }
30 |
--------------------------------------------------------------------------------
/types/declarations.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.module.css' {
2 | const classes: { readonly [key: string]: string };
3 | export default classes;
4 | }
5 |
6 | declare module '*.svg' {
7 | import { FunctionComponent, SVGProps } from 'react';
8 |
9 | export const ReactComponent: FunctionComponent & { title?: string }>;
10 |
11 | const src: string;
12 | export default src;
13 | }
14 |
--------------------------------------------------------------------------------
23 |
27 |