Skip to content

Commit 8c2e365

Browse files
author
sakal
committed
fix: path to library
init: readme test: deploy npm package Signed-off-by: sakal <[email protected]>
1 parent cedc479 commit 8c2e365

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

74 files changed

+5083
-43
lines changed

‎README.md

Lines changed: 122 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,122 @@
1-
# Collection of input fields for React
2-
________________________________________________________
1+
# React Input UI Collection
2+
____________________________________________________
3+
[DEMO](https://sakalx.github.io/react-input-collection/)
4+
>Note: **React version 16.8.0**
5+
____________________________________________________
6+
Inspiration from [codrops](https://tympanus.net/codrops/2015/03/18/inspiration-text-input-effects-2/)
7+
>Form inputs offer a great opportunity to add some subtle and interesting effects to a web page. They are elements that your user will interact with at some point and making them fun to use can enhance the experience. We are used to the default form resembling its paper counterpart but in the digital world we can be more creative
8+
9+
### List of components :
10+
1. InputAkira
11+
1. InputIchiro
12+
1. InputJiro
13+
1. InputKuro
14+
1. InputMadoka
15+
1. InputMaterial
16+
1. InputMinoru
17+
1. InputNao
18+
1. InputSoda
19+
1. InputYoko
20+
21+
#### Example
22+
```javascript
23+
import React, {useState} from 'react';
24+
import {InputAkira} from 'react-input-ui';
25+
26+
function App() {
27+
const [value, setValue] = useState('');
28+
29+
return (
30+
<InputAkira
31+
label={'Akira UI'}
32+
placeholder='type...'
33+
onChanhe={setValue}
34+
value={value}
35+
/>
36+
)
37+
}
38+
```
39+
40+
#### Example with custom style
41+
```javascript
42+
import React, {useState} from 'react';
43+
import {InputAkira} from 'react-input-ui';
44+
45+
function App() {
46+
const [value, setValue] = useState('');
47+
48+
return (
49+
<InputAkira
50+
label={'Akira UI'}
51+
placeholder='type...'
52+
onChanhe={setValue}
53+
value={value}
54+
style={{margin: '25px'}}
55+
className={'custom-class'}
56+
/>
57+
)
58+
}
59+
```
60+
61+
#### Example for validation field
62+
> If field not valid set property error to **true**
63+
> If field valid set property error to **false**
64+
> If don't need validation set property error to **null**
65+
```javascript
66+
import React, {useState} from 'react';
67+
import {InputAkira} from 'react-input-ui';
68+
69+
function App() {
70+
const [value, setValue] = useState('');
71+
const [error, setError] = useState(null);
72+
73+
const handleChange = e => {
74+
setValue(e.target.value);
75+
};
76+
77+
const handleFocus = () => {
78+
setError(null);
79+
};
80+
81+
const handleSubmit = () => {
82+
setError(!!value.length > 2);
83+
}
84+
85+
return (
86+
<div>
87+
<InputAkira
88+
label={'Akira UI'}
89+
placeholder='type...'
90+
onChange={handleChange}
91+
onFocus={handleFocus}
92+
value={value}
93+
error={error}
94+
/>
95+
<button onClick={handleSubmit}>SUBMIT</button>
96+
</div>
97+
)
98+
}
99+
```
100+
101+
import InputAkira, {theme as akiraTheme} from '../../src/components/akira';
102+
103+
#### Example for change theme
104+
```javascript
105+
import React, {useState} from 'react';
106+
import {InputAkira} from 'react-input-ui';
107+
108+
function App() {
109+
const [value, setValue] = useState('');
110+
111+
return (
112+
<InputAkira
113+
label={'Akira UI'}
114+
placeholder='type...'
115+
onChanhe={setValue}
116+
value={value}
117+
style={{margin: '25px'}}
118+
className={'custom-class'}
119+
/>
120+
)
121+
}
122+
```

‎collection/akira/index.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
"use strict";
2+
3+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4+
5+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6+
7+
Object.defineProperty(exports, "__esModule", {
8+
value: true
9+
});
10+
exports.default = exports.theme = void 0;
11+
12+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13+
14+
var _react = _interopRequireWildcard(require("react"));
15+
16+
var _inputCore = _interopRequireDefault(require("../input-core"));
17+
18+
var _theme = _interopRequireDefault(require("../theme"));
19+
20+
require("./style.css");
21+
22+
var cssId = 'i-akiraUI';
23+
24+
function InputAkira(props) {
25+
return _react.default.createElement(_inputCore.default, (0, _extends2.default)({
26+
cssId: cssId
27+
}, props));
28+
}
29+
30+
var theme = (0, _theme.default)(cssId);
31+
exports.theme = theme;
32+
33+
var _default = (0, _react.memo)(InputAkira);
34+
35+
exports.default = _default;

‎src/components/akira/style.css renamed to ‎collection/akira/style.css

File renamed without changes.

‎collection/components/akira/index.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
"use strict";
2+
3+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4+
5+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6+
7+
Object.defineProperty(exports, "__esModule", {
8+
value: true
9+
});
10+
exports.default = exports.theme = void 0;
11+
12+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13+
14+
var _react = _interopRequireWildcard(require("react"));
15+
16+
var _inputCore = _interopRequireDefault(require("../../input-core"));
17+
18+
var _theme = _interopRequireDefault(require("../../theme"));
19+
20+
require("./style.css");
21+
22+
var cssId = 'i-akiraUI';
23+
24+
function InputAkira(props) {
25+
return _react.default.createElement(_inputCore.default, (0, _extends2.default)({
26+
cssId: cssId
27+
}, props));
28+
}
29+
30+
var theme = (0, _theme.default)(cssId);
31+
exports.theme = theme;
32+
33+
var _default = (0, _react.memo)(InputAkira);
34+
35+
exports.default = _default;

‎collection/components/akira/style.css

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
:root {
2+
--i-akiraUI-activeTextColor: #101010;
3+
--i-akiraUI-focusColor: #2196f3;
4+
--i-akiraUI-hoverColor: #252525;
5+
--i-akiraUI-mainColor: #727272;
6+
}
7+
8+
.i-akiraUI {
9+
border: none;
10+
padding: 0;
11+
position: relative;
12+
}
13+
14+
15+
.i-akiraUI__input {
16+
-o-transition: box-shadow .3s ease-in-out;
17+
-webkit-appearance: none;
18+
-webkit-box-shadow: none;
19+
-webkit-box-sizing: border-box;
20+
-webkit-transition: -webkit-box-shadow .3s ease-in-out;
21+
background: transparent;
22+
border-bottom: 1px solid var(--i-akiraUI-mainColor);
23+
border-left: none;
24+
border-radius: 0;
25+
border-right: none;
26+
border-top: none;
27+
box-shadow: none;
28+
box-sizing: border-box;
29+
color: var(--i-akiraUI-mainColor);
30+
cursor: text;
31+
outline: none;
32+
padding: .9em;
33+
transition: -webkit-box-shadow .3s ease-in-out;
34+
transition: box-shadow .3s ease-in-out;
35+
width: 100%;
36+
}
37+
38+
.i-akiraUI__input:hover {
39+
border-bottom-color: var(--i-akiraUI-hoverColor);
40+
color: var(--i-akiraUI-hoverColor);
41+
}
42+
43+
.i-akiraUI__input:focus {
44+
-webkit-box-shadow: 0 -1.5em 0 0 var(--i-akiraUI-focusColor), inset 0 0 0 .2em var(--i-akiraUI-focusColor);
45+
border-bottom: 1px solid var(--i-akiraUI-focusColor);
46+
box-shadow: 0 -1.5em 0 0 var(--i-akiraUI-focusColor), inset 0 0 0 .2em var(--i-akiraUI-focusColor);
47+
color: var(--i-akiraUI-activeTextColor);
48+
}
49+
50+
51+
/*Label*/
52+
.i-akiraUI__label {
53+
-khtml-user-select: none;
54+
-moz-osx-font-smoothing: grayscale;
55+
-moz-user-select: none;
56+
-ms-user-select: none;
57+
-o-transition: all .3s ease-in-out;
58+
-o-transition-property: bottom, left, font-size;
59+
-webkit-font-smoothing: antialiased;
60+
-webkit-touch-callout: none;
61+
-webkit-transition: all .3s ease-in-out;
62+
-webkit-transition-property: bottom, left, font-size;
63+
-webkit-user-select: none;
64+
bottom: 5px;
65+
color: var(--i-akiraUI-mainColor);
66+
left: 0;
67+
pointer-events: none;
68+
position: absolute;
69+
transition: all .3s ease-in-out;
70+
transition-property: bottom, left, font-size;
71+
user-select: none;
72+
}
73+
74+
.i-akiraUI__input:hover ~ .i-akiraUI__label {
75+
color: var(--i-akiraUI-hoverColor);
76+
}
77+
78+
.i-akiraUI__input:focus ~ .i-akiraUI__label {
79+
color: whitesmoke; /* FIXME */
80+
}
81+
82+
.i-akiraUI__input:focus ~ .i-akiraUI__label,
83+
.i-akiraUI__input:not([value=""]) ~ .i-akiraUI__label {
84+
bottom: 100%;
85+
font-size: small;
86+
left: 3px;
87+
}
88+
89+
90+
/*Placeholder*/
91+
.i-akiraUI__input::-webkit-input-placeholder {
92+
-webkit-transition: color .3s ease-in-out;
93+
-o-transition: color .3s ease-in-out;
94+
transition: color .3s ease-in-out;
95+
}
96+
97+
.i-akiraUI__input:-ms-input-placeholder {
98+
-webkit-transition: color .3s ease-in-out;
99+
-o-transition: color .3s ease-in-out;
100+
transition: color .3s ease-in-out;
101+
}
102+
103+
.i-akiraUI__input::-ms-input-placeholder {
104+
-webkit-transition: color .3s ease-in-out;
105+
-o-transition: color .3s ease-in-out;
106+
transition: color .3s ease-in-out;
107+
}
108+
109+
.i-akiraUI__input::placeholder {
110+
-webkit-transition: color .3s ease-in-out;
111+
-o-transition: color .3s ease-in-out;
112+
transition: color .3s ease-in-out;
113+
}
114+
115+
.i-akiraUI__input::-webkit-input-placeholder {
116+
-webkit-transition: color .3s ease-in-out;
117+
-o-transition: color .3s ease-in-out;
118+
transition: color .3s ease-in-out;
119+
}
120+
121+
.i-akiraUI__input::-ms-input-placeholder {
122+
-webkit-transition: color .3s ease-in-out;
123+
-o-transition: color .3s ease-in-out;
124+
transition: color .3s ease-in-out;
125+
}
126+
127+
.i-akiraUI__input:not(:focus)::-webkit-input-placeholder {
128+
color: transparent;
129+
}
130+
131+
.i-akiraUI__input:not(:focus):-ms-input-placeholder {
132+
color: transparent;
133+
}
134+
135+
.i-akiraUI__input:not(:focus)::-ms-input-placeholder {
136+
color: transparent;
137+
}
138+
139+
140+
.i-akiraUI__input:not(:focus)::placeholder {
141+
color: transparent;
142+
}
143+
144+
.i-akiraUI__input:not(:focus)::-webkit-input-placeholder {
145+
color: transparent;
146+
}
147+
148+
.i-akiraUI__input:not(:focus)::-ms-input-placeholder {
149+
color: transparent;
150+
}
151+
152+
.i-akiraUI__input:not(:focus)::-moz-placeholder {
153+
color: transparent;
154+
}

‎collection/components/ichiro/index.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
"use strict";
2+
3+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4+
5+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6+
7+
Object.defineProperty(exports, "__esModule", {
8+
value: true
9+
});
10+
exports.default = exports.theme = void 0;
11+
12+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13+
14+
var _react = _interopRequireWildcard(require("react"));
15+
16+
var _inputCore = _interopRequireDefault(require("../../input-core"));
17+
18+
var _theme = _interopRequireDefault(require("../../theme"));
19+
20+
require("./style.css");
21+
22+
var cssId = 'i-ichiroUI';
23+
24+
function InputIchiro(props) {
25+
return _react.default.createElement(_inputCore.default, (0, _extends2.default)({
26+
cssId: cssId
27+
}, props), _react.default.createElement("hr", {
28+
className: "".concat(cssId, "__underline")
29+
}));
30+
}
31+
32+
var theme = (0, _theme.default)(cssId);
33+
exports.theme = theme;
34+
35+
var _default = (0, _react.memo)(InputIchiro);
36+
37+
exports.default = _default;

‎src/components/ichiro/style.css renamed to ‎collection/components/ichiro/style.css

File renamed without changes.

0 commit comments

Comments
 (0)