@sakura-ui/sakura-ui 0.1.5 → 0.1.7
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.
- package/package.json +4 -4
- package/packages/config/package.json +1 -1
- package/packages/config/src/index.ts +165 -10
- package/packages/core/package.json +1 -1
- package/packages/core/src/components/Button.tsx +2 -3
- package/packages/core/src/components/Heading.tsx +18 -16
- package/packages/core/src/components/IconButton.tsx +2 -3
- package/packages/forms/dist/components/Checkbox.d.ts.map +1 -1
- package/packages/forms/dist/components/FieldsetControl.d.ts.map +1 -1
- package/packages/forms/dist/components/Input.d.ts +5 -0
- package/packages/forms/dist/components/Input.d.ts.map +1 -0
- package/packages/forms/dist/components/LabelControl.d.ts.map +1 -1
- package/packages/forms/dist/components/Radio.d.ts.map +1 -1
- package/packages/forms/dist/components/Select.d.ts.map +1 -1
- package/packages/forms/dist/components/Textarea.d.ts.map +1 -1
- package/packages/forms/dist/components/controlled/InputControl.d.ts +10 -0
- package/packages/forms/dist/components/controlled/InputControl.d.ts.map +1 -0
- package/packages/forms/dist/components/controlled/index.d.ts +1 -1
- package/packages/forms/dist/components/controlled/index.d.ts.map +1 -1
- package/packages/forms/dist/components/index.d.ts +1 -1
- package/packages/forms/dist/components/index.d.ts.map +1 -1
- package/packages/forms/dist/index.cjs.js +42 -32
- package/packages/forms/dist/index.cjs.js.map +1 -1
- package/packages/forms/dist/index.d.ts +2 -2
- package/packages/forms/dist/index.d.ts.map +1 -1
- package/packages/forms/dist/index.es.js +407 -416
- package/packages/forms/dist/index.es.js.map +1 -1
- package/packages/forms/dist/utils/{index.d.ts → class.d.ts} +1 -1
- package/packages/forms/dist/utils/class.d.ts.map +1 -0
- package/packages/forms/package.json +1 -1
- package/packages/forms/src/components/Checkbox.tsx +1 -1
- package/packages/forms/src/components/FieldsetControl.tsx +5 -3
- package/packages/forms/src/components/{Text.tsx → Input.tsx} +2 -2
- package/packages/forms/src/components/LabelControl.tsx +4 -5
- package/packages/forms/src/components/Radio.tsx +1 -1
- package/packages/forms/src/components/controlled/InputControl.tsx +40 -0
- package/packages/forms/src/components/controlled/index.ts +1 -1
- package/packages/forms/src/components/index.ts +1 -1
- package/packages/forms/src/index.ts +2 -2
- package/packages/forms/tests/{Text.test.tsx → Input.test.tsx} +7 -7
- package/packages/forms/tests/LabelControl.test.tsx +7 -7
- package/packages/forms/dist/components/Text.d.ts +0 -5
- package/packages/forms/dist/components/Text.d.ts.map +0 -1
- package/packages/forms/dist/components/controlled/TextControl.d.ts +0 -10
- package/packages/forms/dist/components/controlled/TextControl.d.ts.map +0 -1
- package/packages/forms/dist/utils/index.d.ts.map +0 -1
- package/packages/forms/src/components/controlled/TextControl.tsx +0 -39
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { LabelControl } from '../LabelControl'
|
|
3
|
+
import { Input } from '../Input'
|
|
4
|
+
|
|
5
|
+
export interface InputControlProps
|
|
6
|
+
extends React.ComponentPropsWithoutRef<'input'> {
|
|
7
|
+
labelText: string
|
|
8
|
+
helperText?: string
|
|
9
|
+
errorMessage?: string
|
|
10
|
+
isInvalid?: boolean
|
|
11
|
+
isRequired?: boolean
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export const InputControl = React.forwardRef<
|
|
15
|
+
HTMLInputElement,
|
|
16
|
+
InputControlProps
|
|
17
|
+
>((props, ref) => {
|
|
18
|
+
const {
|
|
19
|
+
className,
|
|
20
|
+
labelText,
|
|
21
|
+
helperText,
|
|
22
|
+
errorMessage,
|
|
23
|
+
isInvalid,
|
|
24
|
+
isRequired,
|
|
25
|
+
...restProps
|
|
26
|
+
} = props
|
|
27
|
+
|
|
28
|
+
return (
|
|
29
|
+
<LabelControl
|
|
30
|
+
className={className}
|
|
31
|
+
labelText={labelText}
|
|
32
|
+
helperText={helperText}
|
|
33
|
+
errorMessage={errorMessage}
|
|
34
|
+
isInvalid={isInvalid}
|
|
35
|
+
isRequired={isRequired}
|
|
36
|
+
>
|
|
37
|
+
<Input ref={ref} {...restProps} />
|
|
38
|
+
</LabelControl>
|
|
39
|
+
)
|
|
40
|
+
})
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { CheckboxGroup } from './CheckboxGroup'
|
|
2
2
|
export { RadioGroup } from './RadioGroup'
|
|
3
3
|
export { SelectControl } from './SelectControl'
|
|
4
|
-
export {
|
|
4
|
+
export { InputControl } from './InputControl'
|
|
5
5
|
export { TextareaControl } from './TextareaControl'
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { Checkbox } from './Checkbox'
|
|
2
2
|
export { Radio } from './Radio'
|
|
3
3
|
export { Select } from './Select'
|
|
4
|
-
export {
|
|
4
|
+
export { Input } from './Input'
|
|
5
5
|
export { Textarea } from './Textarea'
|
|
6
6
|
export { LabelControl } from './LabelControl'
|
|
7
7
|
export { FieldsetControl } from './FieldsetControl'
|
|
@@ -2,7 +2,7 @@ export {
|
|
|
2
2
|
Checkbox,
|
|
3
3
|
Radio,
|
|
4
4
|
Select,
|
|
5
|
-
|
|
5
|
+
Input,
|
|
6
6
|
Textarea,
|
|
7
7
|
LabelControl,
|
|
8
8
|
FieldsetControl
|
|
@@ -12,6 +12,6 @@ export {
|
|
|
12
12
|
CheckboxGroup,
|
|
13
13
|
RadioGroup,
|
|
14
14
|
SelectControl,
|
|
15
|
-
|
|
15
|
+
InputControl,
|
|
16
16
|
TextareaControl
|
|
17
17
|
} from './components/controlled'
|
|
@@ -2,13 +2,13 @@ import * as React from 'react'
|
|
|
2
2
|
import { render, screen } from '@testing-library/react'
|
|
3
3
|
import '@testing-library/jest-dom'
|
|
4
4
|
|
|
5
|
-
import { LabelControl,
|
|
5
|
+
import { LabelControl, Input } from '../src'
|
|
6
6
|
|
|
7
7
|
describe('should derive values from surrounding LabelControl', () => {
|
|
8
8
|
test('renders Text component vol1', async () => {
|
|
9
9
|
render(
|
|
10
10
|
<LabelControl labelText="test">
|
|
11
|
-
<
|
|
11
|
+
<Input />
|
|
12
12
|
</LabelControl>
|
|
13
13
|
)
|
|
14
14
|
|
|
@@ -20,7 +20,7 @@ describe('should derive values from surrounding LabelControl', () => {
|
|
|
20
20
|
test('renders Text component vol2', async () => {
|
|
21
21
|
render(
|
|
22
22
|
<LabelControl labelText="test" helperText="helper" errorMessage="error">
|
|
23
|
-
<
|
|
23
|
+
<Input />
|
|
24
24
|
</LabelControl>
|
|
25
25
|
)
|
|
26
26
|
|
|
@@ -35,7 +35,7 @@ describe('should derive values from surrounding LabelControl', () => {
|
|
|
35
35
|
test('renders Text component vol3', async () => {
|
|
36
36
|
render(
|
|
37
37
|
<LabelControl labelText="test">
|
|
38
|
-
<
|
|
38
|
+
<Input />
|
|
39
39
|
</LabelControl>
|
|
40
40
|
)
|
|
41
41
|
|
|
@@ -50,7 +50,7 @@ describe('should derive values from surrounding LabelControl', () => {
|
|
|
50
50
|
test('renders Text component vol4', async () => {
|
|
51
51
|
render(
|
|
52
52
|
<LabelControl labelText="test" isInvalid>
|
|
53
|
-
<
|
|
53
|
+
<Input />
|
|
54
54
|
</LabelControl>
|
|
55
55
|
)
|
|
56
56
|
|
|
@@ -66,7 +66,7 @@ describe('should derive values from surrounding LabelControl', () => {
|
|
|
66
66
|
test('renders Text component vol5', async () => {
|
|
67
67
|
render(
|
|
68
68
|
<LabelControl labelText="test" isRequired>
|
|
69
|
-
<
|
|
69
|
+
<Input defaultValue="test value" />
|
|
70
70
|
</LabelControl>
|
|
71
71
|
)
|
|
72
72
|
|
|
@@ -82,7 +82,7 @@ describe('should derive values from surrounding LabelControl', () => {
|
|
|
82
82
|
test('renders Text component vol6', async () => {
|
|
83
83
|
render(
|
|
84
84
|
<LabelControl labelText="test" isRequired>
|
|
85
|
-
<
|
|
85
|
+
<Input />
|
|
86
86
|
</LabelControl>
|
|
87
87
|
)
|
|
88
88
|
|
|
@@ -2,7 +2,7 @@ import * as React from 'react'
|
|
|
2
2
|
import { render, screen } from '@testing-library/react'
|
|
3
3
|
import '@testing-library/jest-dom'
|
|
4
4
|
|
|
5
|
-
import { LabelControl, Select,
|
|
5
|
+
import { LabelControl, Select, Input, Textarea } from '../src'
|
|
6
6
|
|
|
7
7
|
describe('LabelControl', () => {
|
|
8
8
|
test('renders LabelControl component vol1', async () => {
|
|
@@ -57,7 +57,7 @@ describe('LabelControl', () => {
|
|
|
57
57
|
</Select>
|
|
58
58
|
</LabelControl>
|
|
59
59
|
<LabelControl labelText="test2">
|
|
60
|
-
<
|
|
60
|
+
<Input defaultValue="1" />
|
|
61
61
|
</LabelControl>
|
|
62
62
|
<LabelControl labelText="test3">
|
|
63
63
|
<Textarea defaultValue="1" />
|
|
@@ -90,7 +90,7 @@ describe('LabelControl', () => {
|
|
|
90
90
|
</Select>
|
|
91
91
|
</LabelControl>
|
|
92
92
|
<LabelControl labelText="test2" htmlFor="id2">
|
|
93
|
-
<
|
|
93
|
+
<Input defaultValue="1" />
|
|
94
94
|
</LabelControl>
|
|
95
95
|
<LabelControl labelText="test3" htmlFor="id3">
|
|
96
96
|
<Textarea defaultValue="1" />
|
|
@@ -103,10 +103,10 @@ describe('LabelControl', () => {
|
|
|
103
103
|
expect(select).toHaveValue('1')
|
|
104
104
|
expect(select).toHaveAttribute('id', 'id1')
|
|
105
105
|
|
|
106
|
-
const
|
|
107
|
-
expect(
|
|
108
|
-
expect(
|
|
109
|
-
expect(
|
|
106
|
+
const input = screen.getByLabelText(/test2/)
|
|
107
|
+
expect(input).toBeInTheDocument()
|
|
108
|
+
expect(input).toHaveValue('1')
|
|
109
|
+
expect(input).toHaveAttribute('id', 'id2')
|
|
110
110
|
|
|
111
111
|
const textarea = screen.getByLabelText(/test3/)
|
|
112
112
|
expect(textarea).toBeInTheDocument()
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/components/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC;CAAG;AAE7E,eAAO,MAAM,IAAI,oFAsChB,CAAA"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export interface TextControlProps extends React.ComponentPropsWithoutRef<'input'> {
|
|
3
|
-
labelText: string;
|
|
4
|
-
helperText?: string;
|
|
5
|
-
errorMessage?: string;
|
|
6
|
-
isInvalid?: boolean;
|
|
7
|
-
isRequired?: boolean;
|
|
8
|
-
}
|
|
9
|
-
export declare const TextControl: React.ForwardRefExoticComponent<TextControlProps & React.RefAttributes<HTMLInputElement>>;
|
|
10
|
-
//# sourceMappingURL=TextControl.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TextControl.d.ts","sourceRoot":"","sources":["../../../src/components/controlled/TextControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC;IAC/C,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,eAAO,MAAM,WAAW,2FAyBvB,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,EAAE,kBAAmB,GAAG,EAAE,WAAyC,CAAA"}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { LabelControl } from '../LabelControl'
|
|
3
|
-
import { Text } from '../Text'
|
|
4
|
-
|
|
5
|
-
export interface TextControlProps
|
|
6
|
-
extends React.ComponentPropsWithoutRef<'input'> {
|
|
7
|
-
labelText: string
|
|
8
|
-
helperText?: string
|
|
9
|
-
errorMessage?: string
|
|
10
|
-
isInvalid?: boolean
|
|
11
|
-
isRequired?: boolean
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
export const TextControl = React.forwardRef<HTMLInputElement, TextControlProps>(
|
|
15
|
-
(props, ref) => {
|
|
16
|
-
const {
|
|
17
|
-
className,
|
|
18
|
-
labelText,
|
|
19
|
-
helperText,
|
|
20
|
-
errorMessage,
|
|
21
|
-
isInvalid,
|
|
22
|
-
isRequired,
|
|
23
|
-
...restProps
|
|
24
|
-
} = props
|
|
25
|
-
|
|
26
|
-
return (
|
|
27
|
-
<LabelControl
|
|
28
|
-
className={className}
|
|
29
|
-
labelText={labelText}
|
|
30
|
-
helperText={helperText}
|
|
31
|
-
errorMessage={errorMessage}
|
|
32
|
-
isInvalid={isInvalid}
|
|
33
|
-
isRequired={isRequired}
|
|
34
|
-
>
|
|
35
|
-
<Text ref={ref} {...restProps} />
|
|
36
|
-
</LabelControl>
|
|
37
|
-
)
|
|
38
|
-
}
|
|
39
|
-
)
|