@new_york_style/project-template-ui 1.0.1 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +30 -0
  2. package/dist/index.d.mts +111 -36
  3. package/dist/index.d.ts +111 -36
  4. package/dist/index.js +262 -69
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +236 -65
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +22 -12
package/README.md ADDED
@@ -0,0 +1,30 @@
1
+ # project-template-ui
2
+
3
+ React UI kit на базе `antd` с экспортируемыми обертками компонентов и системой дизайн-токенов.
4
+
5
+ ## Быстрый старт
6
+
7
+ ```bash
8
+ npm install
9
+ npm run build
10
+ npm test
11
+ npm run storybook
12
+ ```
13
+
14
+ ### Доступные команды
15
+
16
+ - `npm run build` - сборка библиотеки (tsup)
17
+ - `npm run test` - запуск Jest
18
+ - `npm run storybook` - Storybook dev сервер (порт `6006`)
19
+ - `npm run build-storybook` - сборка Storybook
20
+ - `npm run prettier:format` / `npm run prettier:check` - форматирование/проверка
21
+
22
+ ## Структура
23
+
24
+ - `src/components/*` - компоненты и их `*.stories.tsx` + тесты в `__tests__/`
25
+ - `src/theme/*` - дизайн-токены и `UiProvider`
26
+ - `src/index.ts` - публичные экспорты пакета
27
+
28
+ ## Тема
29
+
30
+ Общий провайдер `UiProvider` поддерживает переопределение токенов через проп `tokens` (см. `src/theme/ui-provider.tsx`).
package/dist/index.d.mts CHANGED
@@ -1,44 +1,127 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as antd from 'antd';
3
- import { ButtonProps, DividerProps, FlexProps, InputProps } from 'antd';
4
- import * as antd_es_input_OTP from 'antd/es/input/OTP';
3
+ import { ButtonProps, DividerProps, DrawerProps, FlexProps, InputProps, PopoverProps, ResultProps, SegmentedProps, SelectProps, SpinProps, StatisticProps, TabsProps } from 'antd';
4
+ import * as antd_es_form_context from 'antd/es/form/context';
5
+ import * as antd_es_form from 'antd/es/form';
6
+ import * as antd_es_form_FormItem from 'antd/es/form/FormItem';
7
+ import * as _rc_component_form from '@rc-component/form';
8
+ import * as antd_es_form_hooks_useFormInstance from 'antd/es/form/hooks/useFormInstance';
9
+ import * as antd_es_form_Form from 'antd/es/form/Form';
5
10
  import * as react from 'react';
6
11
  import { ReactNode } from 'react';
12
+ import * as _rc_component_form_lib_interface from '@rc-component/form/lib/interface';
13
+ import * as antd_es_input_OTP from 'antd/es/input/OTP';
7
14
  import * as antd_es_input_TextArea from 'antd/es/input/TextArea';
8
15
  import * as antd_es_input from 'antd/es/input';
16
+ import { LinkProps } from 'antd/es/typography/Link';
17
+ import { ParagraphProps } from 'antd/es/typography/Paragraph';
18
+ import { TextProps } from 'antd/es/typography/Text';
19
+ import { TitleProps } from 'antd/es/typography/Title';
20
+
21
+ type TButtonProps = ButtonProps;
22
+ declare const Button: (props: TButtonProps) => react_jsx_runtime.JSX.Element;
23
+
24
+ type TDividerProps = DividerProps;
25
+ declare const Divider: (props: TDividerProps) => react_jsx_runtime.JSX.Element;
26
+
27
+ type TDrawerProps = DrawerProps;
28
+ declare const Drawer: (props: TDrawerProps) => react_jsx_runtime.JSX.Element;
29
+
30
+ type TFlexProps = FlexProps;
31
+ declare const Flex: (props: TFlexProps) => react_jsx_runtime.JSX.Element;
9
32
 
10
- type TProps$3 = ButtonProps;
11
- declare const Button: (props: TProps$3) => react_jsx_runtime.JSX.Element;
33
+ declare const Form: (<Values = any>(props: React.PropsWithChildren<antd.FormProps<Values>> & React.RefAttributes<_rc_component_form_lib_interface.FormRef<Values>>) => React.ReactElement) & Pick<react.FC<{}>, "displayName"> & {
34
+ useForm: typeof antd_es_form_Form.useForm;
35
+ useFormInstance: typeof antd_es_form_hooks_useFormInstance.default;
36
+ useWatch: typeof _rc_component_form.useWatch;
37
+ Item: (<Values = any>(props: antd.FormItemProps<Values>) => React.ReactElement) & {
38
+ useStatus: () => {
39
+ status?: antd_es_form_FormItem.ValidateStatus;
40
+ errors: React.ReactNode[];
41
+ warnings: React.ReactNode[];
42
+ };
43
+ };
44
+ List: react.FC<antd_es_form.FormListProps>;
45
+ ErrorList: react.FC<antd_es_form.ErrorListProps>;
46
+ Provider: typeof antd_es_form_context.FormProvider;
47
+ };
12
48
 
13
- type TProps$2 = DividerProps;
14
- declare const Divider: (props: TProps$2) => react_jsx_runtime.JSX.Element;
49
+ declare const ICON_NAMES: {
50
+ readonly bulbLightning: react.FC<react.SVGProps<SVGSVGElement>>;
51
+ readonly burger: react.FC<react.SVGProps<SVGSVGElement>>;
52
+ readonly home: react.FC<react.SVGProps<SVGSVGElement>>;
53
+ readonly logo: react.FC<react.SVGProps<SVGSVGElement>>;
54
+ readonly moon: react.FC<react.SVGProps<SVGSVGElement>>;
55
+ readonly profile: react.FC<react.SVGProps<SVGSVGElement>>;
56
+ };
57
+ type TIconName = keyof typeof ICON_NAMES;
15
58
 
16
- type TProps$1 = FlexProps;
17
- declare const Flex: (props: TProps$1) => react_jsx_runtime.JSX.Element;
59
+ type TIconProps = {
60
+ name: TIconName;
61
+ size?: number | string;
62
+ color?: string;
63
+ };
64
+ declare const Icon: ({ color, name, size }: TIconProps) => react_jsx_runtime.JSX.Element;
18
65
 
19
- type TProps = InputProps;
66
+ type TInputProps = InputProps;
20
67
  declare const Input: {
21
- (props: TProps): react_jsx_runtime.JSX.Element;
68
+ (props: TInputProps): react_jsx_runtime.JSX.Element;
22
69
  TextArea: react.ForwardRefExoticComponent<antd_es_input.TextAreaProps & react.RefAttributes<antd_es_input_TextArea.TextAreaRef>>;
23
70
  Search: react.ForwardRefExoticComponent<antd_es_input.SearchProps & react.RefAttributes<antd.InputRef>>;
24
71
  Password: react.ForwardRefExoticComponent<antd_es_input.PasswordProps & react.RefAttributes<antd.InputRef>>;
25
72
  OTP: react.ForwardRefExoticComponent<antd_es_input_OTP.OTPProps & react.RefAttributes<antd_es_input_OTP.OTPRef>>;
26
73
  };
27
74
 
28
- type TDesignTokens = {
29
- colors: {
30
- textPrimary: string;
31
- textSecondary: string;
32
- textDisabled: string;
33
- backgroundPrimary: string;
34
- backgroundSecondary: string;
35
- backgroundElevated: string;
36
- borderPrimary: string;
37
- borderSecondary: string;
38
- accentPrimary: string;
39
- accentHover: string;
40
- accentActive: string;
41
- };
75
+ type TPopoverProps = PopoverProps;
76
+ declare const Popover: (props: TPopoverProps) => react_jsx_runtime.JSX.Element;
77
+
78
+ type TResultProps = ResultProps;
79
+ declare const Result: ({ ...restProps }: TResultProps) => react_jsx_runtime.JSX.Element;
80
+
81
+ type TSegmentedProps = SegmentedProps;
82
+ declare const Segmented: (props: TSegmentedProps) => react_jsx_runtime.JSX.Element;
83
+
84
+ type TSelectProps = SelectProps;
85
+ declare const Select: (props: TSelectProps) => react_jsx_runtime.JSX.Element;
86
+
87
+ type TSpinProps = SpinProps;
88
+ declare const Spin: (props: TSpinProps) => react_jsx_runtime.JSX.Element;
89
+
90
+ type TStatisticProps = StatisticProps;
91
+ declare const Statistic: {
92
+ (props: TStatisticProps): react_jsx_runtime.JSX.Element;
93
+ Timer: react.FC<antd.StatisticTimerProps>;
94
+ };
95
+
96
+ type TTabsProps = TabsProps;
97
+ declare const Tabs: (props: TTabsProps) => react_jsx_runtime.JSX.Element;
98
+
99
+ type TParagraphProps = ParagraphProps;
100
+ type TTextProps = TextProps;
101
+ type TTitleProps = TitleProps;
102
+ type TLinkProps = LinkProps;
103
+ declare const Typography: {
104
+ Link: (props: TLinkProps) => react_jsx_runtime.JSX.Element;
105
+ Paragraph: (props: TParagraphProps) => react_jsx_runtime.JSX.Element;
106
+ Text: (props: TTextProps) => react_jsx_runtime.JSX.Element;
107
+ Title: (props: TTitleProps) => react_jsx_runtime.JSX.Element;
108
+ };
109
+
110
+ type TColorsPalette = {
111
+ textPrimary: string;
112
+ textSecondary: string;
113
+ textDisabled: string;
114
+ backgroundPrimary: string;
115
+ backgroundSecondary: string;
116
+ backgroundElevated: string;
117
+ borderPrimary: string;
118
+ borderSecondary: string;
119
+ accentPrimary: string;
120
+ accentHover: string;
121
+ accentActive: string;
122
+ };
123
+ declare const designTokens: TColorsPalette;
124
+ declare const layoutTokens: {
42
125
  spacing: {
43
126
  xs: number;
44
127
  sm: number;
@@ -57,21 +140,13 @@ type TDesignTokens = {
57
140
  lg: number;
58
141
  xl: number;
59
142
  };
60
- breakpoints: {
61
- phone: number;
62
- tablet: number;
63
- tabletLg: number;
64
- desktop: number;
65
- desktopLg: number;
66
- desktopXl: number;
67
- };
68
143
  };
69
- declare const designTokens: TDesignTokens;
70
144
 
71
145
  type TUiProviderProps = {
72
146
  children: ReactNode;
73
- tokens?: Partial<TDesignTokens>;
147
+ tokens?: Partial<TColorsPalette>;
148
+ language?: 'ru' | 'en';
74
149
  };
75
- declare const UiProvider: ({ children, tokens }: TUiProviderProps) => react_jsx_runtime.JSX.Element;
150
+ declare const UiProvider: ({ children, language, tokens }: TUiProviderProps) => react_jsx_runtime.JSX.Element;
76
151
 
77
- export { Button, Divider, Flex, Input, type TDesignTokens, type TUiProviderProps, UiProvider, designTokens };
152
+ export { Button, Divider, Drawer, Flex, Form, Icon, Input, Popover, Result, Segmented, Select, Spin, Statistic, type TButtonProps, type TColorsPalette, type TDividerProps, type TDrawerProps, type TFlexProps, type TIconName, type TIconProps, type TInputProps, type TLinkProps, type TParagraphProps, type TPopoverProps, type TResultProps, type TSegmentedProps, type TSelectProps, type TSpinProps, type TStatisticProps, type TTabsProps, type TTextProps, type TTitleProps, type TUiProviderProps, Tabs, Typography, UiProvider, designTokens, layoutTokens };
package/dist/index.d.ts CHANGED
@@ -1,44 +1,127 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as antd from 'antd';
3
- import { ButtonProps, DividerProps, FlexProps, InputProps } from 'antd';
4
- import * as antd_es_input_OTP from 'antd/es/input/OTP';
3
+ import { ButtonProps, DividerProps, DrawerProps, FlexProps, InputProps, PopoverProps, ResultProps, SegmentedProps, SelectProps, SpinProps, StatisticProps, TabsProps } from 'antd';
4
+ import * as antd_es_form_context from 'antd/es/form/context';
5
+ import * as antd_es_form from 'antd/es/form';
6
+ import * as antd_es_form_FormItem from 'antd/es/form/FormItem';
7
+ import * as _rc_component_form from '@rc-component/form';
8
+ import * as antd_es_form_hooks_useFormInstance from 'antd/es/form/hooks/useFormInstance';
9
+ import * as antd_es_form_Form from 'antd/es/form/Form';
5
10
  import * as react from 'react';
6
11
  import { ReactNode } from 'react';
12
+ import * as _rc_component_form_lib_interface from '@rc-component/form/lib/interface';
13
+ import * as antd_es_input_OTP from 'antd/es/input/OTP';
7
14
  import * as antd_es_input_TextArea from 'antd/es/input/TextArea';
8
15
  import * as antd_es_input from 'antd/es/input';
16
+ import { LinkProps } from 'antd/es/typography/Link';
17
+ import { ParagraphProps } from 'antd/es/typography/Paragraph';
18
+ import { TextProps } from 'antd/es/typography/Text';
19
+ import { TitleProps } from 'antd/es/typography/Title';
20
+
21
+ type TButtonProps = ButtonProps;
22
+ declare const Button: (props: TButtonProps) => react_jsx_runtime.JSX.Element;
23
+
24
+ type TDividerProps = DividerProps;
25
+ declare const Divider: (props: TDividerProps) => react_jsx_runtime.JSX.Element;
26
+
27
+ type TDrawerProps = DrawerProps;
28
+ declare const Drawer: (props: TDrawerProps) => react_jsx_runtime.JSX.Element;
29
+
30
+ type TFlexProps = FlexProps;
31
+ declare const Flex: (props: TFlexProps) => react_jsx_runtime.JSX.Element;
9
32
 
10
- type TProps$3 = ButtonProps;
11
- declare const Button: (props: TProps$3) => react_jsx_runtime.JSX.Element;
33
+ declare const Form: (<Values = any>(props: React.PropsWithChildren<antd.FormProps<Values>> & React.RefAttributes<_rc_component_form_lib_interface.FormRef<Values>>) => React.ReactElement) & Pick<react.FC<{}>, "displayName"> & {
34
+ useForm: typeof antd_es_form_Form.useForm;
35
+ useFormInstance: typeof antd_es_form_hooks_useFormInstance.default;
36
+ useWatch: typeof _rc_component_form.useWatch;
37
+ Item: (<Values = any>(props: antd.FormItemProps<Values>) => React.ReactElement) & {
38
+ useStatus: () => {
39
+ status?: antd_es_form_FormItem.ValidateStatus;
40
+ errors: React.ReactNode[];
41
+ warnings: React.ReactNode[];
42
+ };
43
+ };
44
+ List: react.FC<antd_es_form.FormListProps>;
45
+ ErrorList: react.FC<antd_es_form.ErrorListProps>;
46
+ Provider: typeof antd_es_form_context.FormProvider;
47
+ };
12
48
 
13
- type TProps$2 = DividerProps;
14
- declare const Divider: (props: TProps$2) => react_jsx_runtime.JSX.Element;
49
+ declare const ICON_NAMES: {
50
+ readonly bulbLightning: react.FC<react.SVGProps<SVGSVGElement>>;
51
+ readonly burger: react.FC<react.SVGProps<SVGSVGElement>>;
52
+ readonly home: react.FC<react.SVGProps<SVGSVGElement>>;
53
+ readonly logo: react.FC<react.SVGProps<SVGSVGElement>>;
54
+ readonly moon: react.FC<react.SVGProps<SVGSVGElement>>;
55
+ readonly profile: react.FC<react.SVGProps<SVGSVGElement>>;
56
+ };
57
+ type TIconName = keyof typeof ICON_NAMES;
15
58
 
16
- type TProps$1 = FlexProps;
17
- declare const Flex: (props: TProps$1) => react_jsx_runtime.JSX.Element;
59
+ type TIconProps = {
60
+ name: TIconName;
61
+ size?: number | string;
62
+ color?: string;
63
+ };
64
+ declare const Icon: ({ color, name, size }: TIconProps) => react_jsx_runtime.JSX.Element;
18
65
 
19
- type TProps = InputProps;
66
+ type TInputProps = InputProps;
20
67
  declare const Input: {
21
- (props: TProps): react_jsx_runtime.JSX.Element;
68
+ (props: TInputProps): react_jsx_runtime.JSX.Element;
22
69
  TextArea: react.ForwardRefExoticComponent<antd_es_input.TextAreaProps & react.RefAttributes<antd_es_input_TextArea.TextAreaRef>>;
23
70
  Search: react.ForwardRefExoticComponent<antd_es_input.SearchProps & react.RefAttributes<antd.InputRef>>;
24
71
  Password: react.ForwardRefExoticComponent<antd_es_input.PasswordProps & react.RefAttributes<antd.InputRef>>;
25
72
  OTP: react.ForwardRefExoticComponent<antd_es_input_OTP.OTPProps & react.RefAttributes<antd_es_input_OTP.OTPRef>>;
26
73
  };
27
74
 
28
- type TDesignTokens = {
29
- colors: {
30
- textPrimary: string;
31
- textSecondary: string;
32
- textDisabled: string;
33
- backgroundPrimary: string;
34
- backgroundSecondary: string;
35
- backgroundElevated: string;
36
- borderPrimary: string;
37
- borderSecondary: string;
38
- accentPrimary: string;
39
- accentHover: string;
40
- accentActive: string;
41
- };
75
+ type TPopoverProps = PopoverProps;
76
+ declare const Popover: (props: TPopoverProps) => react_jsx_runtime.JSX.Element;
77
+
78
+ type TResultProps = ResultProps;
79
+ declare const Result: ({ ...restProps }: TResultProps) => react_jsx_runtime.JSX.Element;
80
+
81
+ type TSegmentedProps = SegmentedProps;
82
+ declare const Segmented: (props: TSegmentedProps) => react_jsx_runtime.JSX.Element;
83
+
84
+ type TSelectProps = SelectProps;
85
+ declare const Select: (props: TSelectProps) => react_jsx_runtime.JSX.Element;
86
+
87
+ type TSpinProps = SpinProps;
88
+ declare const Spin: (props: TSpinProps) => react_jsx_runtime.JSX.Element;
89
+
90
+ type TStatisticProps = StatisticProps;
91
+ declare const Statistic: {
92
+ (props: TStatisticProps): react_jsx_runtime.JSX.Element;
93
+ Timer: react.FC<antd.StatisticTimerProps>;
94
+ };
95
+
96
+ type TTabsProps = TabsProps;
97
+ declare const Tabs: (props: TTabsProps) => react_jsx_runtime.JSX.Element;
98
+
99
+ type TParagraphProps = ParagraphProps;
100
+ type TTextProps = TextProps;
101
+ type TTitleProps = TitleProps;
102
+ type TLinkProps = LinkProps;
103
+ declare const Typography: {
104
+ Link: (props: TLinkProps) => react_jsx_runtime.JSX.Element;
105
+ Paragraph: (props: TParagraphProps) => react_jsx_runtime.JSX.Element;
106
+ Text: (props: TTextProps) => react_jsx_runtime.JSX.Element;
107
+ Title: (props: TTitleProps) => react_jsx_runtime.JSX.Element;
108
+ };
109
+
110
+ type TColorsPalette = {
111
+ textPrimary: string;
112
+ textSecondary: string;
113
+ textDisabled: string;
114
+ backgroundPrimary: string;
115
+ backgroundSecondary: string;
116
+ backgroundElevated: string;
117
+ borderPrimary: string;
118
+ borderSecondary: string;
119
+ accentPrimary: string;
120
+ accentHover: string;
121
+ accentActive: string;
122
+ };
123
+ declare const designTokens: TColorsPalette;
124
+ declare const layoutTokens: {
42
125
  spacing: {
43
126
  xs: number;
44
127
  sm: number;
@@ -57,21 +140,13 @@ type TDesignTokens = {
57
140
  lg: number;
58
141
  xl: number;
59
142
  };
60
- breakpoints: {
61
- phone: number;
62
- tablet: number;
63
- tabletLg: number;
64
- desktop: number;
65
- desktopLg: number;
66
- desktopXl: number;
67
- };
68
143
  };
69
- declare const designTokens: TDesignTokens;
70
144
 
71
145
  type TUiProviderProps = {
72
146
  children: ReactNode;
73
- tokens?: Partial<TDesignTokens>;
147
+ tokens?: Partial<TColorsPalette>;
148
+ language?: 'ru' | 'en';
74
149
  };
75
- declare const UiProvider: ({ children, tokens }: TUiProviderProps) => react_jsx_runtime.JSX.Element;
150
+ declare const UiProvider: ({ children, language, tokens }: TUiProviderProps) => react_jsx_runtime.JSX.Element;
76
151
 
77
- export { Button, Divider, Flex, Input, type TDesignTokens, type TUiProviderProps, UiProvider, designTokens };
152
+ export { Button, Divider, Drawer, Flex, Form, Icon, Input, Popover, Result, Segmented, Select, Spin, Statistic, type TButtonProps, type TColorsPalette, type TDividerProps, type TDrawerProps, type TFlexProps, type TIconName, type TIconProps, type TInputProps, type TLinkProps, type TParagraphProps, type TPopoverProps, type TResultProps, type TSegmentedProps, type TSelectProps, type TSpinProps, type TStatisticProps, type TTabsProps, type TTextProps, type TTitleProps, type TUiProviderProps, Tabs, Typography, UiProvider, designTokens, layoutTokens };