react-miui 0.0.1 → 0.3.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 (352) hide show
  1. package/CHANGELOG.md +46 -0
  2. package/README.md +10 -1
  3. package/assets/back.svg +1 -0
  4. package/dist/components/form/Checkbox.module.scss +13 -6
  5. package/dist/components/form/Toggle.d.ts +8 -0
  6. package/dist/components/form/Toggle.d.ts.map +1 -0
  7. package/dist/components/form/Toggle.js +40 -0
  8. package/dist/components/form/Toggle.js.map +1 -0
  9. package/dist/components/form/Toggle.module.scss +46 -0
  10. package/dist/components/icons/Back.d.ts +7 -0
  11. package/dist/components/icons/Back.d.ts.map +1 -0
  12. package/dist/components/icons/Back.js +13 -0
  13. package/dist/components/icons/Back.js.map +1 -0
  14. package/dist/components/icons/Checkmark.d.ts.map +1 -1
  15. package/dist/components/icons/Checkmark.js.map +1 -1
  16. package/dist/components/icons/Icon.d.ts +12 -0
  17. package/dist/components/icons/Icon.d.ts.map +1 -0
  18. package/dist/components/icons/Icon.js +40 -0
  19. package/dist/components/icons/Icon.js.map +1 -0
  20. package/dist/components/layout/header/Header.d.ts +13 -0
  21. package/dist/components/layout/header/Header.d.ts.map +1 -0
  22. package/dist/components/layout/header/Header.js +43 -0
  23. package/dist/components/layout/header/Header.js.map +1 -0
  24. package/dist/components/layout/header/Header.module.scss +89 -0
  25. package/dist/components/layout/header/HeaderIconAction.d.ts +17 -0
  26. package/dist/components/layout/header/HeaderIconAction.d.ts.map +1 -0
  27. package/dist/components/layout/header/HeaderIconAction.js +40 -0
  28. package/dist/components/layout/header/HeaderIconAction.js.map +1 -0
  29. package/dist/components/layout/header/HeaderIconAction.module.scss +22 -0
  30. package/dist/components/layout/header/StickyHeader.d.ts +10 -0
  31. package/dist/components/layout/header/StickyHeader.d.ts.map +1 -0
  32. package/dist/components/layout/header/StickyHeader.js +34 -0
  33. package/dist/components/layout/header/StickyHeader.js.map +1 -0
  34. package/dist/components/layout/header/StickyHeader.module.scss +18 -0
  35. package/dist/components/layout/list/Item.d.ts +14 -0
  36. package/dist/components/layout/list/Item.d.ts.map +1 -0
  37. package/dist/components/layout/list/Item.js +50 -0
  38. package/dist/components/layout/list/Item.js.map +1 -0
  39. package/dist/components/layout/list/Item.module.scss +23 -0
  40. package/dist/components/layout/list/List.d.ts +4 -0
  41. package/dist/components/layout/list/List.d.ts.map +1 -0
  42. package/dist/components/layout/list/List.js +13 -0
  43. package/dist/components/layout/list/List.js.map +1 -0
  44. package/dist/components/layout/list/List.module.scss +4 -0
  45. package/dist/components/ui/action/Action.d.ts +17 -0
  46. package/dist/components/ui/action/Action.d.ts.map +1 -0
  47. package/dist/components/ui/action/Action.js +44 -0
  48. package/dist/components/ui/action/Action.js.map +1 -0
  49. package/dist/components/ui/action/Action.module.scss +26 -0
  50. package/dist/components/ui/action/EqualActions.d.ts +7 -0
  51. package/dist/components/ui/action/EqualActions.d.ts.map +1 -0
  52. package/dist/components/ui/action/EqualActions.js +23 -0
  53. package/dist/components/ui/action/EqualActions.js.map +1 -0
  54. package/dist/components/ui/action/EqualActions.module.scss +6 -0
  55. package/dist/components/ui/button/Button.d.ts +8 -0
  56. package/dist/components/ui/button/Button.d.ts.map +1 -0
  57. package/dist/components/ui/button/Button.js +20 -0
  58. package/dist/components/ui/button/Button.js.map +1 -0
  59. package/dist/components/ui/button/Button.module.scss +25 -0
  60. package/dist/components/ui/directionPad/Button.d.ts +7 -0
  61. package/dist/components/ui/directionPad/Button.d.ts.map +1 -0
  62. package/dist/components/ui/directionPad/Button.js +14 -0
  63. package/dist/components/ui/directionPad/Button.js.map +1 -0
  64. package/dist/components/ui/directionPad/Middle.d.ts +8 -0
  65. package/dist/components/ui/directionPad/Middle.d.ts.map +1 -0
  66. package/dist/components/ui/directionPad/Middle.js +13 -0
  67. package/dist/components/ui/directionPad/Middle.js.map +1 -0
  68. package/dist/components/ui/directionPad/Pad.d.ts +12 -0
  69. package/dist/components/ui/directionPad/Pad.d.ts.map +1 -0
  70. package/dist/components/ui/directionPad/Pad.js +23 -0
  71. package/dist/components/ui/directionPad/Pad.js.map +1 -0
  72. package/dist/components/ui/directionPad/Pad.module.scss +45 -0
  73. package/dist/demo/Demo.d.ts.map +1 -1
  74. package/dist/demo/Demo.js +2 -1
  75. package/dist/demo/Demo.js.map +1 -1
  76. package/dist/demo/Main.d.ts.map +1 -1
  77. package/dist/demo/Main.js +36 -8
  78. package/dist/demo/Main.js.map +1 -1
  79. package/dist/demo/Main.module.scss +13 -0
  80. package/dist/demo/Menu.d.ts +6 -1
  81. package/dist/demo/Menu.d.ts.map +1 -1
  82. package/dist/demo/Menu.js +20 -4
  83. package/dist/demo/Menu.js.map +1 -1
  84. package/dist/demo/Menu.module.scss +30 -8
  85. package/dist/demo/components/form/Checkbox.d.ts.map +1 -1
  86. package/dist/demo/components/form/Checkbox.js +3 -2
  87. package/dist/demo/components/form/Checkbox.js.map +1 -1
  88. package/dist/demo/components/form/Toggle.d.ts +4 -0
  89. package/dist/demo/components/form/Toggle.d.ts.map +1 -0
  90. package/dist/demo/components/form/Toggle.js +65 -0
  91. package/dist/demo/components/form/Toggle.js.map +1 -0
  92. package/dist/demo/components/form/Toggle.module.scss +5 -0
  93. package/dist/demo/components/layout/header/Header.d.ts +8 -0
  94. package/dist/demo/components/layout/header/Header.d.ts.map +1 -0
  95. package/dist/demo/components/layout/header/Header.js +60 -0
  96. package/dist/demo/components/layout/header/Header.js.map +1 -0
  97. package/dist/demo/components/layout/header/StickyHeader.d.ts +9 -0
  98. package/dist/demo/components/layout/header/StickyHeader.d.ts.map +1 -0
  99. package/dist/demo/components/layout/header/StickyHeader.js +73 -0
  100. package/dist/demo/components/layout/header/StickyHeader.js.map +1 -0
  101. package/dist/demo/components/layout/list/List.Item.d.ts +4 -0
  102. package/dist/demo/components/layout/list/List.Item.d.ts.map +1 -0
  103. package/dist/demo/components/layout/list/List.Item.js +42 -0
  104. package/dist/demo/components/layout/list/List.Item.js.map +1 -0
  105. package/dist/demo/components/layout/list/List.Item.module.scss +3 -0
  106. package/dist/demo/components/ui/action/Action.d.ts +8 -0
  107. package/dist/demo/components/ui/action/Action.d.ts.map +1 -0
  108. package/dist/demo/components/ui/action/Action.js +83 -0
  109. package/dist/demo/components/ui/action/Action.js.map +1 -0
  110. package/dist/demo/components/ui/action/ActionDemo.module.scss +3 -0
  111. package/dist/demo/components/ui/button/ButtonDemo.d.ts +4 -0
  112. package/dist/demo/components/ui/button/ButtonDemo.d.ts.map +1 -0
  113. package/dist/demo/components/ui/button/ButtonDemo.js +20 -0
  114. package/dist/demo/components/ui/button/ButtonDemo.js.map +1 -0
  115. package/dist/demo/components/ui/directionPad/Pad.d.ts +4 -0
  116. package/dist/demo/components/ui/directionPad/Pad.d.ts.map +1 -0
  117. package/dist/demo/components/ui/directionPad/Pad.js +49 -0
  118. package/dist/demo/components/ui/directionPad/Pad.js.map +1 -0
  119. package/dist/demo/components/ui/icons/Icons.d.ts +4 -0
  120. package/dist/demo/components/ui/icons/Icons.d.ts.map +1 -0
  121. package/dist/demo/components/ui/icons/Icons.js +20 -0
  122. package/dist/demo/components/ui/icons/Icons.js.map +1 -0
  123. package/dist/demo/components/ui/icons/Icons.module.scss +4 -0
  124. package/dist/demo/componentsMap.d.ts +13 -0
  125. package/dist/demo/componentsMap.d.ts.map +1 -0
  126. package/dist/demo/componentsMap.js +112 -0
  127. package/dist/demo/componentsMap.js.map +1 -0
  128. package/dist/demo/utils/makeVariants.d.ts +3 -0
  129. package/dist/demo/utils/makeVariants.d.ts.map +1 -0
  130. package/dist/demo/utils/makeVariants.js +14 -0
  131. package/dist/demo/utils/makeVariants.js.map +1 -0
  132. package/dist/global.scss +34 -13
  133. package/dist/index.d.ts +8 -1
  134. package/dist/index.d.ts.map +1 -1
  135. package/dist/index.js +8 -1
  136. package/dist/index.js.map +1 -1
  137. package/dist/pages/_app.d.ts.map +1 -1
  138. package/dist/pages/_app.js +5 -1
  139. package/dist/pages/_app.js.map +1 -1
  140. package/dist/pages/react-miui.d.ts +4 -0
  141. package/dist/pages/react-miui.d.ts.map +1 -0
  142. package/dist/pages/react-miui.js +11 -0
  143. package/dist/pages/react-miui.js.map +1 -0
  144. package/dist/types.d.ts +4 -0
  145. package/dist/types.d.ts.map +1 -0
  146. package/dist/types.js +3 -0
  147. package/dist/types.js.map +1 -0
  148. package/docs/assets/js/search.js +1 -1
  149. package/docs/assets/js/search.json +1 -1
  150. package/docs/enums/ICON.html +182 -0
  151. package/docs/index.html +38 -5
  152. package/docs/modules/StickyHeader.html +159 -0
  153. package/docs/modules.html +121 -5
  154. package/docs/pages/Tutorials/Test.html +6 -3
  155. package/esm/components/form/Checkbox.module.scss +13 -6
  156. package/esm/components/form/Toggle.d.ts +8 -0
  157. package/esm/components/form/Toggle.d.ts.map +1 -0
  158. package/esm/components/form/Toggle.js +15 -0
  159. package/esm/components/form/Toggle.js.map +1 -0
  160. package/esm/components/form/Toggle.module.scss +46 -0
  161. package/esm/components/icons/Back.d.ts +7 -0
  162. package/esm/components/icons/Back.d.ts.map +1 -0
  163. package/esm/components/icons/Back.js +7 -0
  164. package/esm/components/icons/Back.js.map +1 -0
  165. package/esm/components/icons/Checkmark.d.ts.map +1 -1
  166. package/esm/components/icons/Checkmark.js.map +1 -1
  167. package/esm/components/icons/Icon.d.ts +12 -0
  168. package/esm/components/icons/Icon.d.ts.map +1 -0
  169. package/esm/components/icons/Icon.js +21 -0
  170. package/esm/components/icons/Icon.js.map +1 -0
  171. package/esm/components/layout/header/Header.d.ts +13 -0
  172. package/esm/components/layout/header/Header.d.ts.map +1 -0
  173. package/esm/components/layout/header/Header.js +37 -0
  174. package/esm/components/layout/header/Header.js.map +1 -0
  175. package/esm/components/layout/header/Header.module.scss +89 -0
  176. package/esm/components/layout/header/HeaderIconAction.d.ts +17 -0
  177. package/esm/components/layout/header/HeaderIconAction.d.ts.map +1 -0
  178. package/esm/components/layout/header/HeaderIconAction.js +23 -0
  179. package/esm/components/layout/header/HeaderIconAction.js.map +1 -0
  180. package/esm/components/layout/header/HeaderIconAction.module.scss +22 -0
  181. package/esm/components/layout/header/StickyHeader.d.ts +10 -0
  182. package/esm/components/layout/header/StickyHeader.d.ts.map +1 -0
  183. package/esm/components/layout/header/StickyHeader.js +28 -0
  184. package/esm/components/layout/header/StickyHeader.js.map +1 -0
  185. package/esm/components/layout/header/StickyHeader.module.scss +18 -0
  186. package/esm/components/layout/list/Item.d.ts +14 -0
  187. package/esm/components/layout/list/Item.d.ts.map +1 -0
  188. package/esm/components/layout/list/Item.js +33 -0
  189. package/esm/components/layout/list/Item.js.map +1 -0
  190. package/esm/components/layout/list/Item.module.scss +23 -0
  191. package/esm/components/layout/list/List.d.ts +4 -0
  192. package/esm/components/layout/list/List.d.ts.map +1 -0
  193. package/esm/components/layout/list/List.js +7 -0
  194. package/esm/components/layout/list/List.js.map +1 -0
  195. package/esm/components/layout/list/List.module.scss +4 -0
  196. package/esm/components/ui/action/Action.d.ts +17 -0
  197. package/esm/components/ui/action/Action.d.ts.map +1 -0
  198. package/esm/components/ui/action/Action.js +27 -0
  199. package/esm/components/ui/action/Action.js.map +1 -0
  200. package/esm/components/ui/action/Action.module.scss +26 -0
  201. package/esm/components/ui/action/EqualActions.d.ts +7 -0
  202. package/esm/components/ui/action/EqualActions.d.ts.map +1 -0
  203. package/esm/components/ui/action/EqualActions.js +17 -0
  204. package/esm/components/ui/action/EqualActions.js.map +1 -0
  205. package/esm/components/ui/action/EqualActions.module.scss +6 -0
  206. package/esm/components/ui/button/Button.d.ts +8 -0
  207. package/esm/components/ui/button/Button.d.ts.map +1 -0
  208. package/esm/components/ui/button/Button.js +14 -0
  209. package/esm/components/ui/button/Button.js.map +1 -0
  210. package/esm/components/ui/button/Button.module.scss +25 -0
  211. package/esm/components/ui/directionPad/Button.d.ts +7 -0
  212. package/esm/components/ui/directionPad/Button.d.ts.map +1 -0
  213. package/esm/components/ui/directionPad/Button.js +8 -0
  214. package/esm/components/ui/directionPad/Button.js.map +1 -0
  215. package/esm/components/ui/directionPad/Middle.d.ts +8 -0
  216. package/esm/components/ui/directionPad/Middle.d.ts.map +1 -0
  217. package/esm/components/ui/directionPad/Middle.js +7 -0
  218. package/esm/components/ui/directionPad/Middle.js.map +1 -0
  219. package/esm/components/ui/directionPad/Pad.d.ts +12 -0
  220. package/esm/components/ui/directionPad/Pad.d.ts.map +1 -0
  221. package/esm/components/ui/directionPad/Pad.js +17 -0
  222. package/esm/components/ui/directionPad/Pad.js.map +1 -0
  223. package/esm/components/ui/directionPad/Pad.module.scss +45 -0
  224. package/esm/demo/Demo.d.ts.map +1 -1
  225. package/esm/demo/Demo.js +2 -1
  226. package/esm/demo/Demo.js.map +1 -1
  227. package/esm/demo/Main.d.ts.map +1 -1
  228. package/esm/demo/Main.js +37 -9
  229. package/esm/demo/Main.js.map +1 -1
  230. package/esm/demo/Main.module.scss +13 -0
  231. package/esm/demo/Menu.d.ts +6 -1
  232. package/esm/demo/Menu.d.ts.map +1 -1
  233. package/esm/demo/Menu.js +20 -4
  234. package/esm/demo/Menu.js.map +1 -1
  235. package/esm/demo/Menu.module.scss +30 -8
  236. package/esm/demo/components/form/Checkbox.d.ts.map +1 -1
  237. package/esm/demo/components/form/Checkbox.js +4 -3
  238. package/esm/demo/components/form/Checkbox.js.map +1 -1
  239. package/esm/demo/components/form/Toggle.d.ts +4 -0
  240. package/esm/demo/components/form/Toggle.d.ts.map +1 -0
  241. package/esm/demo/components/form/Toggle.js +40 -0
  242. package/esm/demo/components/form/Toggle.js.map +1 -0
  243. package/esm/demo/components/form/Toggle.module.scss +5 -0
  244. package/esm/demo/components/layout/header/Header.d.ts +8 -0
  245. package/esm/demo/components/layout/header/Header.d.ts.map +1 -0
  246. package/esm/demo/components/layout/header/Header.js +50 -0
  247. package/esm/demo/components/layout/header/Header.js.map +1 -0
  248. package/esm/demo/components/layout/header/StickyHeader.d.ts +9 -0
  249. package/esm/demo/components/layout/header/StickyHeader.d.ts.map +1 -0
  250. package/esm/demo/components/layout/header/StickyHeader.js +62 -0
  251. package/esm/demo/components/layout/header/StickyHeader.js.map +1 -0
  252. package/esm/demo/components/layout/list/List.Item.d.ts +4 -0
  253. package/esm/demo/components/layout/list/List.Item.d.ts.map +1 -0
  254. package/esm/demo/components/layout/list/List.Item.js +17 -0
  255. package/esm/demo/components/layout/list/List.Item.js.map +1 -0
  256. package/esm/demo/components/layout/list/List.Item.module.scss +3 -0
  257. package/esm/demo/components/ui/action/Action.d.ts +8 -0
  258. package/esm/demo/components/ui/action/Action.d.ts.map +1 -0
  259. package/esm/demo/components/ui/action/Action.js +73 -0
  260. package/esm/demo/components/ui/action/Action.js.map +1 -0
  261. package/esm/demo/components/ui/action/ActionDemo.module.scss +3 -0
  262. package/esm/demo/components/ui/button/ButtonDemo.d.ts +4 -0
  263. package/esm/demo/components/ui/button/ButtonDemo.d.ts.map +1 -0
  264. package/esm/demo/components/ui/button/ButtonDemo.js +14 -0
  265. package/esm/demo/components/ui/button/ButtonDemo.js.map +1 -0
  266. package/esm/demo/components/ui/directionPad/Pad.d.ts +4 -0
  267. package/esm/demo/components/ui/directionPad/Pad.d.ts.map +1 -0
  268. package/esm/demo/components/ui/directionPad/Pad.js +27 -0
  269. package/esm/demo/components/ui/directionPad/Pad.js.map +1 -0
  270. package/esm/demo/components/ui/icons/Icons.d.ts +4 -0
  271. package/esm/demo/components/ui/icons/Icons.d.ts.map +1 -0
  272. package/esm/demo/components/ui/icons/Icons.js +14 -0
  273. package/esm/demo/components/ui/icons/Icons.js.map +1 -0
  274. package/esm/demo/components/ui/icons/Icons.module.scss +4 -0
  275. package/esm/demo/componentsMap.d.ts +13 -0
  276. package/esm/demo/componentsMap.d.ts.map +1 -0
  277. package/esm/demo/componentsMap.js +109 -0
  278. package/esm/demo/componentsMap.js.map +1 -0
  279. package/esm/demo/utils/makeVariants.d.ts +3 -0
  280. package/esm/demo/utils/makeVariants.d.ts.map +1 -0
  281. package/esm/demo/utils/makeVariants.js +11 -0
  282. package/esm/demo/utils/makeVariants.js.map +1 -0
  283. package/esm/global.scss +34 -13
  284. package/esm/index.d.ts +8 -1
  285. package/esm/index.d.ts.map +1 -1
  286. package/esm/index.js +8 -1
  287. package/esm/index.js.map +1 -1
  288. package/esm/pages/_app.d.ts.map +1 -1
  289. package/esm/pages/_app.js +5 -1
  290. package/esm/pages/_app.js.map +1 -1
  291. package/esm/pages/react-miui.d.ts +4 -0
  292. package/esm/pages/react-miui.d.ts.map +1 -0
  293. package/esm/pages/react-miui.js +6 -0
  294. package/esm/pages/react-miui.js.map +1 -0
  295. package/esm/types.d.ts +4 -0
  296. package/esm/types.d.ts.map +1 -0
  297. package/esm/types.js +2 -0
  298. package/esm/types.js.map +1 -0
  299. package/package.json +9 -7
  300. package/src/components/form/Checkbox.module.scss +13 -6
  301. package/src/components/form/Toggle.module.scss +46 -0
  302. package/src/components/form/Toggle.tsx +33 -0
  303. package/src/components/icons/Back.tsx +15 -0
  304. package/src/components/icons/Checkmark.tsx +5 -2
  305. package/src/components/icons/Icon.tsx +30 -0
  306. package/src/components/layout/header/Header.module.scss +89 -0
  307. package/src/components/layout/header/Header.tsx +65 -0
  308. package/src/components/layout/header/HeaderIconAction.module.scss +22 -0
  309. package/src/components/layout/header/HeaderIconAction.tsx +49 -0
  310. package/src/components/layout/header/StickyHeader.module.scss +18 -0
  311. package/src/components/layout/header/StickyHeader.tsx +54 -0
  312. package/src/components/layout/list/Item.module.scss +23 -0
  313. package/src/components/layout/list/Item.tsx +50 -0
  314. package/src/components/layout/list/List.module.scss +4 -0
  315. package/src/components/layout/list/List.tsx +11 -0
  316. package/src/components/ui/action/Action.module.scss +26 -0
  317. package/src/components/ui/action/Action.tsx +58 -0
  318. package/src/components/ui/action/EqualActions.module.scss +6 -0
  319. package/src/components/ui/action/EqualActions.tsx +30 -0
  320. package/src/components/ui/button/Button.module.scss +25 -0
  321. package/src/components/ui/button/Button.tsx +25 -0
  322. package/src/components/ui/directionPad/Button.tsx +15 -0
  323. package/src/components/ui/directionPad/Middle.tsx +16 -0
  324. package/src/components/ui/directionPad/Pad.module.scss +45 -0
  325. package/src/components/ui/directionPad/Pad.tsx +35 -0
  326. package/src/demo/Demo.tsx +2 -1
  327. package/src/demo/Main.module.scss +13 -0
  328. package/src/demo/Main.tsx +53 -10
  329. package/src/demo/Menu.module.scss +30 -8
  330. package/src/demo/Menu.tsx +33 -7
  331. package/src/demo/components/form/Checkbox.tsx +7 -3
  332. package/src/demo/components/form/Toggle.module.scss +5 -0
  333. package/src/demo/components/form/Toggle.tsx +59 -0
  334. package/src/demo/components/layout/header/Header.tsx +119 -0
  335. package/src/demo/components/layout/header/StickyHeader.tsx +85 -0
  336. package/src/demo/components/layout/list/List.Item.module.scss +3 -0
  337. package/src/demo/components/layout/list/List.Item.tsx +23 -0
  338. package/src/demo/components/ui/action/Action.tsx +112 -0
  339. package/src/demo/components/ui/action/ActionDemo.module.scss +3 -0
  340. package/src/demo/components/ui/button/ButtonDemo.tsx +18 -0
  341. package/src/demo/components/ui/directionPad/Pad.tsx +40 -0
  342. package/src/demo/components/ui/icons/Icons.module.scss +4 -0
  343. package/src/demo/components/ui/icons/Icons.tsx +25 -0
  344. package/src/demo/componentsMap.ts +144 -0
  345. package/src/demo/utils/makeVariants.ts +13 -0
  346. package/src/global.scss +34 -13
  347. package/src/index.ts +11 -1
  348. package/src/pages/_app.tsx +7 -1
  349. package/src/pages/react-miui.tsx +12 -0
  350. package/src/types.ts +7 -0
  351. package/.postcssrc +0 -9
  352. package/src/pages/index.html +0 -14
package/src/global.scss CHANGED
@@ -1,15 +1,18 @@
1
- // Font-size ratio: 1,6 (666?)
2
- // Border ratio: 2,6666
3
- // Dimensions ratio: 3
4
-
5
1
  // @TODO prefix variable names
6
2
  :root {
3
+ --ratio-dimensions: 3;
4
+ --ratio-border: 2.666666;
5
+ --ratio-font: 1.666666;
6
+
7
7
  --main-color: #008ad2; // used
8
8
  --main-color-alt: #006AA9;
9
9
 
10
10
  --active-bg: #d3d3d3;
11
11
  --inactive-bg: #d3d3d3; // used
12
12
 
13
+ --toggle-handle-bg: #e0e0e0;
14
+ --toggle-handle-border: #cdcdcd;
15
+
13
16
  --icon: #636363;
14
17
  --border: #d5d5d5;
15
18
  --button-border: #bababa;
@@ -18,17 +21,35 @@
18
21
  --header-bg: #efeff0;
19
22
  --header-text: #484848;
20
23
 
21
- --toolbar--border: #ababab;
22
- --toolbar--bg: #f8f8f8;
24
+ --toolbar-border: #ababab;
25
+ --toolbar-bg: #f8f8f8;
23
26
 
24
- --color1: #00aeeb;
25
- --color2: #9d6ee5;
26
- --color3: #00c293;
27
- --color4: #ff5290;
28
- --color5: #ff7259;
29
- --color6: #4083f7;
27
+ // Shades: https://maketintsandshades.com/#038bf4,ff7200,7357e8,3ec234,3ec234,ff388f,ea2700
28
+ --blue1: #038bf4;
29
+ --orange1: #ff7200;
30
+ --orange1-darker: #cc5b00;
31
+ --purple1: #7357e8;
32
+ --green1: #3ec234;
33
+ --green1-darker: #38af2f;
34
+ --pink1: #ff388f;
35
+ --red1: #ea2700;
36
+
37
+ --grey1: #737373;
38
+
39
+ --focus-color: #dcaf00;
30
40
  }
31
41
 
32
- *:focus { // @TODO take care of focus
42
+ *:focus {
33
43
  outline: none!important;
34
44
  }
45
+
46
+ *:focus-visible:focus-visible {
47
+ outline: none!important;
48
+ border-color: var(--focus-color);
49
+ background-color: var(--focus-bg-set);
50
+ }
51
+
52
+
53
+ body {
54
+ font-size: 15px;
55
+ }
package/src/index.ts CHANGED
@@ -1 +1,11 @@
1
- export * from "./components/form/Checkbox";
1
+ export * from "./components/form/Checkbox.js";
2
+
3
+ export * from "./components/icons/Icon.js";
4
+
5
+ export * from "./components/layout/header/Header.js";
6
+ export * from "./components/layout/header/StickyHeader.js";
7
+ export * from "./components/layout/list/List.js";
8
+ export * from "./components/layout/list/Item.js";
9
+
10
+ export * from "./components/ui/button/Button.js";
11
+ export * from "./components/ui/directionPad/Pad.js";
package/src/pages/_app.tsx CHANGED
@@ -1,11 +1,17 @@
1
1
  import React from "react";
2
+ import Head from "next/head";
2
3
  import type { AppProps } from "next/app";
3
4
 
4
5
  import "../global.scss";
5
6
  import "../demo-global.scss";
6
7
 
7
8
  const MyApp = ({ Component, pageProps }: AppProps) => (
8
- <Component {...pageProps} />
9
+ <>
10
+ <Head>
11
+ <title>MIUI in React</title>
12
+ </Head>
13
+ <Component {...pageProps} />
14
+ </>
9
15
  );
10
16
 
11
17
  export default MyApp;
package/src/pages/react-miui.tsx ADDED
@@ -0,0 +1,12 @@
1
+ import React from "react";
2
+
3
+ const ReactMiuiPage = () => {
4
+ // @TODO nicer UI, add back button etc
5
+ return (
6
+ <div>
7
+ Hi. This is an example page to demonstrate application level routing.
8
+ </div>
9
+ );
10
+ };
11
+
12
+ export default ReactMiuiPage;
package/src/types.ts ADDED
@@ -0,0 +1,7 @@
1
+ import type React from "react";
2
+
3
+ type AnyComponent = React.ComponentClass | React.FC | React.VFC;
4
+
5
+ export type {
6
+ AnyComponent,
7
+ };
package/.postcssrc DELETED
@@ -1,9 +0,0 @@
1
- {
2
- "modules": true,
3
- "plugins": {
4
- "postcss-modules": {
5
- "generateScopedName": "_[name]__[local]"
6
- },
7
- "postcss-nested": true
8
- }
9
- }
package/src/pages/index.html DELETED
@@ -1,14 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport"
6
- content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
8
- <title>Library demo</title>
9
- </head>
10
- <body>
11
- <div id="root"></div>
12
- <script src="./index.tsx"></script>
13
- </body>
14
- </html>