diff --git a/README.md b/README.md
index 5b16e8e..944fde7 100644
--- a/README.md
+++ b/README.md
@@ -44,6 +44,18 @@ It correctly bundles React in production mode and optimizes the build for the be
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
+## CSS naming convention
+
+
+```css
+/*-- For CSS Modules --*/
+
+.beautiful_input {} /* Block */
+.beautiful_input.ivalid_txt {} /* Element */
+.beautiful_input.m_invalid {} /* Modificator */
+.beautiful_input.--large {} /* Size Modificator */
+```
+
## ESLint Notes
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
diff --git a/package.json b/package.json
index 6d519bb..00d57e5 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
"storybook": "^7.5.1",
"storybook-addon-pseudo-states": "2.1.2",
"typescript": "^5.0.2",
+ "typescript-plugin-css-modules": "5.0.2",
"vite": "^4.4.5"
},
"readme": "ERROR: No README data found!",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a508034..76161f9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -103,6 +103,9 @@ devDependencies:
typescript:
specifier: ^5.0.2
version: 5.2.2
+ typescript-plugin-css-modules:
+ specifier: 5.0.2
+ version: 5.0.2(typescript@5.2.2)
vite:
specifier: ^4.4.5
version: 4.4.9(@types/node@20.8.4)(sass@1.67.0)
@@ -114,6 +117,10 @@ packages:
engines: {node: '>=0.10.0'}
dev: true
+ /@adobe/css-tools@4.3.1:
+ resolution: {integrity: sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg==}
+ dev: true
+
/@ampproject/remapping@2.2.1:
resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==}
engines: {node: '>=6.0.0'}
@@ -4316,6 +4323,18 @@ packages:
resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
dev: true
+ /@types/postcss-modules-local-by-default@4.0.1:
+ resolution: {integrity: sha512-8Vf6MA7x68/XKCgIOFGGDtkfKzcIp0LuQcYGUqG+Ip1kIDIlTekH1u147obRXXSdv44q9HtT2sJQGWQkzLjMuQ==}
+ dependencies:
+ postcss: 8.4.30
+ dev: true
+
+ /@types/postcss-modules-scope@3.0.3:
+ resolution: {integrity: sha512-VfPns6aDJt/Bp3dvjnkgbsOfJQLMldZjWT+rnOH/QVSgfutgVEH6fUf2SPLN47lhUjp7ejoC9BUdrjx8m94IUg==}
+ dependencies:
+ postcss: 8.4.30
+ dev: true
+
/@types/prettier@2.7.3:
resolution: {integrity: sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==}
dev: true
@@ -5439,6 +5458,12 @@ packages:
engines: {node: '>= 0.6'}
dev: true
+ /copy-anything@2.0.6:
+ resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==}
+ dependencies:
+ is-what: 3.14.1
+ dev: true
+
/core-js-compat@3.32.2:
resolution: {integrity: sha512-+GjlguTDINOijtVRUxrQOv3kfu9rl+qPNdX2LTbJ/ZyVTuxK+ksVSAGX1nHstu4hrv1En/uPTtWgq2gI5wt4AQ==}
dependencies:
@@ -5472,6 +5497,12 @@ packages:
postcss: 8.4.30
dev: true
+ /cssesc@3.0.0:
+ resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+ engines: {node: '>=4'}
+ hasBin: true
+ dev: true
+
/csstype@3.1.2:
resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
dev: true
@@ -5495,6 +5526,19 @@ packages:
ms: 2.0.0
dev: true
+ /debug@3.2.7:
+ resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+ requiresBuild: true
+ peerDependencies:
+ supports-color: '*'
+ peerDependenciesMeta:
+ supports-color:
+ optional: true
+ dependencies:
+ ms: 2.1.3
+ dev: true
+ optional: true
+
/debug@4.3.4:
resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
engines: {node: '>=6.0'}
@@ -5800,6 +5844,15 @@ packages:
hasBin: true
dev: true
+ /errno@0.1.8:
+ resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
+ hasBin: true
+ requiresBuild: true
+ dependencies:
+ prr: 1.0.1
+ dev: true
+ optional: true
+
/error-ex@1.3.2:
resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
dependencies:
@@ -6769,6 +6822,24 @@ packages:
safer-buffer: 2.1.2
dev: true
+ /iconv-lite@0.6.3:
+ resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+ engines: {node: '>=0.10.0'}
+ requiresBuild: true
+ dependencies:
+ safer-buffer: 2.1.2
+ dev: true
+ optional: true
+
+ /icss-utils@5.1.0(postcss@8.4.30):
+ resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
+ engines: {node: ^10 || ^12 || >= 14}
+ peerDependencies:
+ postcss: ^8.1.0
+ dependencies:
+ postcss: 8.4.30
+ dev: true
+
/ieee754@1.2.1:
resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
dev: true
@@ -6778,6 +6849,14 @@ packages:
engines: {node: '>= 4'}
dev: true
+ /image-size@0.5.5:
+ resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==}
+ engines: {node: '>=0.10.0'}
+ hasBin: true
+ requiresBuild: true
+ dev: true
+ optional: true
+
/immutable@4.3.4:
resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==}
dev: true
@@ -7071,6 +7150,10 @@ packages:
get-intrinsic: 1.2.1
dev: true
+ /is-what@3.14.1:
+ resolution: {integrity: sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==}
+ dev: true
+
/is-windows@0.2.0:
resolution: {integrity: sha512-n67eJYmXbniZB7RF4I/FTjK1s6RPOCTxhYrVYLRaCt3lF0mpWZPKr3T2LSZAqyjQsxR2qMmGYXXzK0YWwcPM1Q==}
engines: {node: '>=0.10.0'}
@@ -7892,6 +7975,26 @@ packages:
dotenv-expand: 10.0.0
dev: true
+ /less@4.2.0:
+ resolution: {integrity: sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==}
+ engines: {node: '>=6'}
+ hasBin: true
+ dependencies:
+ copy-anything: 2.0.6
+ parse-node-version: 1.0.1
+ tslib: 2.6.2
+ optionalDependencies:
+ errno: 0.1.8
+ graceful-fs: 4.2.11
+ image-size: 0.5.5
+ make-dir: 2.1.0
+ mime: 1.6.0
+ needle: 3.2.0
+ source-map: 0.6.1
+ transitivePeerDependencies:
+ - supports-color
+ dev: true
+
/leven@3.1.0:
resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
engines: {node: '>=6'}
@@ -7905,6 +8008,11 @@ packages:
type-check: 0.4.0
dev: true
+ /lilconfig@2.1.0:
+ resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
+ engines: {node: '>=10'}
+ dev: true
+
/lines-and-columns@1.2.4:
resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
dev: true
@@ -7931,6 +8039,10 @@ packages:
p-locate: 5.0.0
dev: true
+ /lodash.camelcase@4.3.0:
+ resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
+ dev: true
+
/lodash.debounce@4.0.8:
resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
dev: true
@@ -8213,6 +8325,20 @@ packages:
resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
dev: true
+ /needle@3.2.0:
+ resolution: {integrity: sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==}
+ engines: {node: '>= 4.4.x'}
+ hasBin: true
+ requiresBuild: true
+ dependencies:
+ debug: 3.2.7
+ iconv-lite: 0.6.3
+ sax: 1.3.0
+ transitivePeerDependencies:
+ - supports-color
+ dev: true
+ optional: true
+
/negotiator@0.6.3:
resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
engines: {node: '>= 0.6'}
@@ -8500,6 +8626,11 @@ packages:
lines-and-columns: 1.2.4
dev: true
+ /parse-node-version@1.0.1:
+ resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
+ engines: {node: '>= 0.10'}
+ dev: true
+
/parse-passwd@1.0.0:
resolution: {integrity: sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==}
engines: {node: '>=0.10.0'}
@@ -8639,6 +8770,54 @@ packages:
postcss: 8.4.30
dev: true
+ /postcss-load-config@3.1.4(postcss@8.4.30):
+ resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
+ engines: {node: '>= 10'}
+ peerDependencies:
+ postcss: '>=8.0.9'
+ ts-node: '>=9.0.0'
+ peerDependenciesMeta:
+ postcss:
+ optional: true
+ ts-node:
+ optional: true
+ dependencies:
+ lilconfig: 2.1.0
+ postcss: 8.4.30
+ yaml: 1.10.2
+ dev: true
+
+ /postcss-modules-extract-imports@3.0.0(postcss@8.4.30):
+ resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==}
+ engines: {node: ^10 || ^12 || >= 14}
+ peerDependencies:
+ postcss: ^8.1.0
+ dependencies:
+ postcss: 8.4.30
+ dev: true
+
+ /postcss-modules-local-by-default@4.0.3(postcss@8.4.30):
+ resolution: {integrity: sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==}
+ engines: {node: ^10 || ^12 || >= 14}
+ peerDependencies:
+ postcss: ^8.1.0
+ dependencies:
+ icss-utils: 5.1.0(postcss@8.4.30)
+ postcss: 8.4.30
+ postcss-selector-parser: 6.0.13
+ postcss-value-parser: 4.2.0
+ dev: true
+
+ /postcss-modules-scope@3.0.0(postcss@8.4.30):
+ resolution: {integrity: sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==}
+ engines: {node: ^10 || ^12 || >= 14}
+ peerDependencies:
+ postcss: ^8.1.0
+ dependencies:
+ postcss: 8.4.30
+ postcss-selector-parser: 6.0.13
+ dev: true
+
/postcss-scss@4.0.9(postcss@8.4.30):
resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
engines: {node: '>=12.0'}
@@ -8648,6 +8827,18 @@ packages:
postcss: 8.4.30
dev: true
+ /postcss-selector-parser@6.0.13:
+ resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
+ engines: {node: '>=4'}
+ dependencies:
+ cssesc: 3.0.0
+ util-deprecate: 1.0.2
+ dev: true
+
+ /postcss-value-parser@4.2.0:
+ resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+ dev: true
+
/postcss@8.4.30:
resolution: {integrity: sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==}
engines: {node: ^10 || ^12 || >=14}
@@ -8770,6 +8961,12 @@ packages:
resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
dev: true
+ /prr@1.0.1:
+ resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
+ requiresBuild: true
+ dev: true
+ optional: true
+
/pump@2.0.1:
resolution: {integrity: sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==}
dependencies:
@@ -9161,6 +9358,10 @@ packages:
engines: {node: '>=0.10.5'}
dev: true
+ /reserved-words@0.1.2:
+ resolution: {integrity: sha512-0S5SrIUJ9LfpbVl4Yzij6VipUdafHrOTzvmfazSw/jeZrZtQK303OPZW+obtkaw7jQlTQppy0UvZWm9872PbRw==}
+ dev: true
+
/resolve-cwd@3.0.0:
resolution: {integrity: sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==}
engines: {node: '>=8'}
@@ -9277,6 +9478,16 @@ packages:
source-map-js: 1.0.2
dev: true
+ /sax@1.2.4:
+ resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
+ dev: true
+
+ /sax@1.3.0:
+ resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==}
+ requiresBuild: true
+ dev: true
+ optional: true
+
/scheduler@0.23.0:
resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
dependencies:
@@ -9431,6 +9642,11 @@ packages:
engines: {node: '>=0.10.0'}
dev: true
+ /source-map@0.7.4:
+ resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
+ engines: {node: '>= 8'}
+ dev: true
+
/space-separated-tokens@1.1.5:
resolution: {integrity: sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==}
dev: true
@@ -9608,6 +9824,11 @@ packages:
ansi-regex: 6.0.1
dev: true
+ /strip-bom@3.0.0:
+ resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+ engines: {node: '>=4'}
+ dev: true
+
/strip-bom@4.0.0:
resolution: {integrity: sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==}
engines: {node: '>=8'}
@@ -9630,6 +9851,19 @@ packages:
engines: {node: '>=8'}
dev: true
+ /stylus@0.59.0:
+ resolution: {integrity: sha512-lQ9w/XIOH5ZHVNuNbWW8D822r+/wBSO/d6XvtyHLF7LW4KaCIDeVbvn5DF8fGCJAUCwVhVi/h6J0NUcnylUEjg==}
+ hasBin: true
+ dependencies:
+ '@adobe/css-tools': 4.3.1
+ debug: 4.3.4
+ glob: 7.2.3
+ sax: 1.2.4
+ source-map: 0.7.4
+ transitivePeerDependencies:
+ - supports-color
+ dev: true
+
/supports-color@5.5.0:
resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
engines: {node: '>=4'}
@@ -9812,6 +10046,15 @@ packages:
engines: {node: '>=6.10'}
dev: true
+ /tsconfig-paths@4.2.0:
+ resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
+ engines: {node: '>=6'}
+ dependencies:
+ json5: 2.2.3
+ minimist: 1.2.8
+ strip-bom: 3.0.0
+ dev: true
+
/tslib@1.14.1:
resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
dev: true
@@ -9895,6 +10138,33 @@ packages:
resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
dev: true
+ /typescript-plugin-css-modules@5.0.2(typescript@5.2.2):
+ resolution: {integrity: sha512-ej/Og4Y8mF+43P14P9Ik1MGqNXcXBVgO1TltkESegdnZsaaRXnaJ5CoJmTPRkg25ysQlOV6P94wNhI4VxIzlkw==}
+ peerDependencies:
+ typescript: '>=4.0.0'
+ dependencies:
+ '@types/postcss-modules-local-by-default': 4.0.1
+ '@types/postcss-modules-scope': 3.0.3
+ dotenv: 16.3.1
+ icss-utils: 5.1.0(postcss@8.4.30)
+ less: 4.2.0
+ lodash.camelcase: 4.3.0
+ postcss: 8.4.30
+ postcss-load-config: 3.1.4(postcss@8.4.30)
+ postcss-modules-extract-imports: 3.0.0(postcss@8.4.30)
+ postcss-modules-local-by-default: 4.0.3(postcss@8.4.30)
+ postcss-modules-scope: 3.0.0(postcss@8.4.30)
+ reserved-words: 0.1.2
+ sass: 1.67.0
+ source-map-js: 1.0.2
+ stylus: 0.59.0
+ tsconfig-paths: 4.2.0
+ typescript: 5.2.2
+ transitivePeerDependencies:
+ - supports-color
+ - ts-node
+ dev: true
+
/typescript@5.2.2:
resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==}
engines: {node: '>=14.17'}
@@ -10373,6 +10643,11 @@ packages:
resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
dev: true
+ /yaml@1.10.2:
+ resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
+ engines: {node: '>= 6'}
+ dev: true
+
/yargs-parser@18.1.3:
resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
engines: {node: '>=6'}
diff --git a/src/components/input/Input.stories.ts b/src/components/input/Input.stories.ts
index 5610f7e..644b636 100644
--- a/src/components/input/Input.stories.ts
+++ b/src/components/input/Input.stories.ts
@@ -32,32 +32,41 @@ export const Primary: Story = {
export const Secondary: Story = {
args: {
label: 'Secondary input label',
- placeholder: 'placeholder',
+ placeholder: 'Placeholder',
id: 'button-label',
},
};
export const Large: Story = {
args: {
- size: 'large',
+ size: 'lg',
label: 'Large input label',
- placeholder: 'placeholder',
+ placeholder: 'Placeholder',
id: 'button-label',
},
};
export const Medium: Story = {
args: {
- size: 'medium',
+ size: 'md',
label: 'Medium input label',
id: 'button-label',
- placeholder: 'placeholder',
+ placeholder: 'Placeholder',
+ },
+};
+
+export const Invalid: Story = {
+ args: {
+ label: 'Medium input label',
+ id: 'button-label',
+ placeholder: 'Placeholder',
+ validationMessage: 'Username is already taken',
},
};
export const Small: Story = {
args: {
- size: 'small',
+ size: 'sm',
label: 'Button',
placeholder: 'placeholder',
id: 'button-label',
diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
index 341a190..3807a01 100644
--- a/src/components/input/Input.tsx
+++ b/src/components/input/Input.tsx
@@ -9,9 +9,21 @@ interface InputProps {
autoFocus?: boolean;
placeholder?: string;
className?: string;
- size?: 'small' | 'medium' | 'large';
+ size?: 'sm' | 'md' | 'lg';
+ validationMessage?: string;
}
+const getCssNameBySize = (size: 'sm' | 'md' | 'lg') => {
+ switch (size) {
+ case 'sm':
+ return '--small';
+ case 'md':
+ return '--medium';
+ case 'lg':
+ return '--large';
+ }
+};
+
export const Input = ({
type,
minLength,
@@ -19,19 +31,36 @@ export const Input = ({
label,
autoFocus,
placeholder,
- size = 'medium',
-}: InputProps) => (
- <>
-
- >
-);
+ className,
+ size = 'md',
+ validationMessage,
+}: InputProps) => {
+ const $size = getCssNameBySize(size);
+ return (
+ <>
+
+ >
+ );
+};
diff --git a/src/components/input/input.module.scss b/src/components/input/input.module.scss
index 77e956f..5ea8fed 100644
--- a/src/components/input/input.module.scss
+++ b/src/components/input/input.module.scss
@@ -1,6 +1,7 @@
-.base {
+.default {
transition: border 0.3s;
box-sizing: border-box;
+ outline: none;
border: 1px solid rgb(225, 231, 234);
border-radius: 30px;
padding: 17px 24px;
@@ -8,18 +9,25 @@
font-size: 1rem;
&:focus {
- outline: none;
border: 1px solid rgb(155, 161, 165);
}
}
-.small {
+.m_invalid {
+ border: 1px solid rgb(255, 124, 124);
+
+ &:focus {
+ border: 1px solid rgb(255, 0, 0);
+ }
+}
+
+.--small {
padding: 12px 18px;
}
-.medium {
+.--medium {
padding: 17px 24px;
}
-.large {
+.--large {
padding: 23px 32px;
}
@@ -33,24 +41,29 @@
color: rgb(155, 161, 165);
}
- &Text {
+ &_txt {
position: relative;
bottom: -0.4rem;
background: #fff;
padding: 0 10px 0 (24+1px);
font-size: 0.9rem;
- &.small {
+ & .--small {
bottom: -0.4rem;
padding: 0 10px 0 (18+1px);
}
- &.medium {
+ & .--medium {
bottom: -0.4rem;
padding: 0 10px 0 (24+1px);
}
- &.large {
+ & .--large {
bottom: -0.4rem;
padding: 0 10px 0 (32+1px);
}
}
}
+
+.invalid_txt {
+ padding: 3px 10px 0 (24+1px);
+ color: red;
+}
diff --git a/tsconfig.json b/tsconfig.json
index cdd2139..fa03658 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,7 +23,8 @@
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
- "noFallthroughCasesInSwitch": true
+ "noFallthroughCasesInSwitch": true,
+ "plugins": [{ "name": "typescript-plugin-css-modules" }]
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]