@symbo.ls/preview 0.0.97 → 2.0.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.
Files changed (216) hide show
  1. package/README.md +19 -0
  2. package/app.webmanifest +4 -0
  3. package/index.html +14 -4
  4. package/netlify.toml +19 -0
  5. package/package.json +32 -32
  6. package/protect-pwd.js +65 -0
  7. package/src/animations.js +71 -0
  8. package/src/app.js +68 -30
  9. package/src/assets/dots.png +0 -0
  10. package/src/assets/dotsDark.png +0 -0
  11. package/src/config/index.js +31 -12
  12. package/src/config/theme.js +71 -1
  13. package/src/data/Symbols.sketch +0 -0
  14. package/src/data/_Symbols.sketch/document.json +1 -0
  15. package/src/data/_Symbols.sketch/fonts/6c9956fc8970ec3d8268c3f286afe19d954fc40b +0 -0
  16. package/src/data/_Symbols.sketch/fonts/750e9b005158d57108ebbcf288e2582f078d6735 +0 -0
  17. package/src/data/_Symbols.sketch/fonts/86c45cb69ad4ba2a8e6d0b81f20964b33f4eca6c +0 -0
  18. package/src/data/_Symbols.sketch/fonts/f97cec7aed309ec77b4fd3005d1a3e0d86c2a7b9 +0 -0
  19. package/src/data/_Symbols.sketch/images/0427bc225ee7dc33db78252defd5b2e4cd5b7467.png +0 -0
  20. package/src/data/_Symbols.sketch/images/0c4846cdd2f11ffb23c9ce063380fc934f7a11ea.png +0 -0
  21. package/src/data/_Symbols.sketch/images/55d3f5e93869fbd70e8dfbca1ce3dfa0cc9f2dbe.png +0 -0
  22. package/src/data/_Symbols.sketch/images/67ae1583a9d77eec7106f5016f48b5594a02b3f6.png +0 -0
  23. package/src/data/_Symbols.sketch/images/7152b3ea22388d53052d0212995a1805527ea862.png +0 -0
  24. package/src/data/_Symbols.sketch/images/72f1896a8462385fd596bc35f240382ba15814fc.png +0 -0
  25. package/src/data/_Symbols.sketch/images/73e4245b1f867343001657193ff2318c9cf2ef53.png +0 -0
  26. package/src/data/_Symbols.sketch/images/7b89dae77676fb4cfd072e0830cff9c27afd11c6.png +0 -0
  27. package/src/data/_Symbols.sketch/images/811e2b516575d3b4e7709dfef6369bce7dae0a26.png +0 -0
  28. package/src/data/_Symbols.sketch/images/82d006789579f2ee1fa45c9116f7cd7dd1bcbe37.png +0 -0
  29. package/src/data/_Symbols.sketch/images/8a896270aa4da8e2401d0ea76e46dc9b9125e59a.png +0 -0
  30. package/src/data/_Symbols.sketch/images/966688c4a579283836f15ab69c8b76e11b236ff5.png +0 -0
  31. package/src/data/_Symbols.sketch/images/b903a498e1d438e8bb12de5422f732c717b79eff.png +0 -0
  32. package/src/data/_Symbols.sketch/images/b9f3cae81a855e21ae75185dcb6ae6551c5447f1.png +0 -0
  33. package/src/data/_Symbols.sketch/images/cd0f908410abf4cad7a4501539eb0711c41a182f.png +0 -0
  34. package/src/data/_Symbols.sketch/images/d54f15f130ba4f1d4ad56f03c01ac06fe0ab4f56.png +0 -0
  35. package/src/data/_Symbols.sketch/images/df5a20029363f95abc58b2c8972e1417d84c8aa7.png +0 -0
  36. package/src/data/_Symbols.sketch/images/e889546970c931244400c2f70412c39123029cb3.png +0 -0
  37. package/src/data/_Symbols.sketch/images/f420a7a2beb15bee5d2ecbba8f296c6d4b22dfa3.png +0 -0
  38. package/src/data/_Symbols.sketch/meta.json +1 -0
  39. package/src/data/_Symbols.sketch/pages/31D11772-FB33-42EC-A3CC-79F63922E04D.json +1 -0
  40. package/src/data/_Symbols.sketch/pages/35BD91AD-F0ED-4002-891D-F1B3250E88C1.json +1 -0
  41. package/src/data/_Symbols.sketch/pages/4831AF31-ECB8-4DA6-B4D0-C1095D42146C.json +1 -0
  42. package/src/data/_Symbols.sketch/pages/6FCC0155-B3F4-4792-892E-523D45315AFD.json +1 -0
  43. package/src/data/_Symbols.sketch/pages/7996D5DD-C5B2-4EE7-9DE8-2C05E2ACA9F3.json +1 -0
  44. package/src/data/_Symbols.sketch/pages/B314C0F3-0038-473F-A127-536AF28E5272.json +1 -0
  45. package/src/data/_Symbols.sketch/pages/B6798E64-F7E9-40F5-9BD0-88A548478438.json +1 -0
  46. package/src/data/_Symbols.sketch/pages/B9B28DF3-EDC2-4D5B-A412-12B3B2E7DE58.json +1 -0
  47. package/src/data/_Symbols.sketch/pages/CA6E47E4-DAF7-4D1D-8DDC-D5A60508D9A0.json +1 -0
  48. package/src/data/_Symbols.sketch/pages/D6F5EB10-9D31-47AC-9077-1CE8CB2C2448.json +1 -0
  49. package/src/data/_Symbols.sketch/previews/preview.png +0 -0
  50. package/src/data/_Symbols.sketch/user.json +1 -0
  51. package/src/data/categories.js +44 -0
  52. package/src/data/components/button-archived/index.js +63 -0
  53. package/src/data/components/button-archived/style.js +5 -0
  54. package/src/data/components/button-circle/index.js +54 -0
  55. package/src/data/components/button-contacts/index.js +56 -0
  56. package/src/data/components/button-contacts/style.js +13 -0
  57. package/src/data/components/button-download/index.js +63 -0
  58. package/src/data/components/button-pro/index.js +98 -0
  59. package/src/data/components/button-pro/style.js +19 -0
  60. package/src/data/components/button-theme-switcher/index.js +104 -0
  61. package/src/data/components/button-theme-switcher/style.js +16 -0
  62. package/src/data/components/button-user/index.js +82 -0
  63. package/src/data/components/button-user/style.js +25 -0
  64. package/src/data/components/datepicker/index.js +40 -0
  65. package/src/data/components/datepicker/style.js +4 -0
  66. package/src/data/components/dropdown-list/index.js +56 -0
  67. package/src/data/components/field/index.js +40 -0
  68. package/src/data/components/index.js +34 -0
  69. package/src/data/components/label/index.js +40 -0
  70. package/src/data/components/notification/index.js +55 -0
  71. package/src/data/components/notification/style.js +20 -0
  72. package/src/data/components/pills/index.js +37 -0
  73. package/src/data/components/tooltip/index.js +38 -0
  74. package/src/data/index.js +3 -0
  75. package/src/data/library/button-circle/index.js +52 -0
  76. package/src/data/library/button-join/index.js +61 -0
  77. package/src/data/library/family-bundle/index.js +99 -0
  78. package/src/data/library/family-bundle/style.js +27 -0
  79. package/src/data/library/index.js +15 -0
  80. package/src/data/library/join-class/index.js +45 -0
  81. package/src/data/library/parent-mode/index.js +69 -0
  82. package/src/data/library/parent-mode/style.js +25 -0
  83. package/src/index.html +57 -0
  84. package/src/index.js +7 -0
  85. package/src/pages/Account/index.js +147 -17
  86. package/src/pages/Account/{__/setUpProject.js → setUpProject.js} +10 -10
  87. package/src/pages/Color/colors.js +58 -0
  88. package/src/pages/Color/documentThemes.js +101 -0
  89. package/src/pages/Color/index.js +10 -7
  90. package/src/pages/Color/style.js +7 -0
  91. package/src/pages/Color/themes.js +117 -23
  92. package/src/pages/ColorEditor/colorTone.js +163 -0
  93. package/src/pages/{Theme → ColorEditor}/friendTheme.js +3 -3
  94. package/src/pages/ColorEditor/index.js +178 -0
  95. package/src/pages/{Theme → ColorEditor}/interactivity.js +7 -6
  96. package/src/pages/{Theme → ColorEditor}/style.js +12 -1
  97. package/src/pages/{Theme → ColorEditor}/themingTools.js +12 -12
  98. package/src/pages/Editor/index.js +9 -7
  99. package/src/pages/Editor/layers.js +14 -14
  100. package/src/pages/Editor/scene.js +9 -7
  101. package/src/pages/Editor/tools.js +22 -22
  102. package/{.legacy → src/pages/Export}/_tools_old.js +6 -7
  103. package/src/pages/Export/const.js +4 -3
  104. package/src/pages/Export/description.js +87 -58
  105. package/src/pages/Export/header.js +37 -0
  106. package/src/pages/Export/index.js +39 -48
  107. package/src/pages/Export/scene.js +61 -98
  108. package/src/pages/Export/state.js +5 -11
  109. package/src/pages/Export/style.js +28 -0
  110. package/src/pages/Export/tools.js +86 -41
  111. package/src/pages/Icons/index.js +69 -73
  112. package/src/pages/Icons/style.js +18 -0
  113. package/src/pages/Library/index.js +47 -24
  114. package/src/pages/Library/style.js +43 -0
  115. package/src/pages/PageProto.js +26 -0
  116. package/src/pages/Shapes/index.js +204 -54
  117. package/src/pages/Shapes/style.js +28 -0
  118. package/src/pages/Spaces/boxModel.js +3 -0
  119. package/src/pages/Spaces/index.js +47 -23
  120. package/{.legacy → src/pages/Spaces}/preview.js +14 -14
  121. package/src/pages/Spaces/sequence.js +1 -30
  122. package/src/pages/Spaces/state.js +14 -12
  123. package/{.legacy → src/pages/Spaces}/style.js +3 -0
  124. package/src/pages/Typography/docFonts.js +128 -0
  125. package/src/pages/Typography/docStyles.js +97 -0
  126. package/src/pages/Typography/index.js +36 -28
  127. package/src/pages/Typography/shared.js +3 -2
  128. package/src/pages/Typography/state.js +8 -9
  129. package/src/pages/Typography/style.js +11 -0
  130. package/src/pages/Typography/typeScale.js +82 -63
  131. package/src/pages/index.js +23 -15
  132. package/src/protect.js +114 -0
  133. package/src/state.js +3 -0
  134. package/src/style.js +12 -15
  135. package/src/test.js +30 -0
  136. package/svgSprite.config.js +1 -2
  137. package/test/index.test.js +5 -0
  138. package/.legacy/index copy.js +0 -45
  139. package/.vscode/extensions.json +0 -5
  140. package/index.js +0 -44
  141. package/src/assets/dark.png +0 -0
  142. package/src/assets/mask1.png +0 -0
  143. package/src/assets/mask2.png +0 -0
  144. package/src/assets/shapes.png +0 -0
  145. package/src/assets/space.png +0 -0
  146. package/src/assets/type.png +0 -0
  147. package/src/components/Aside.js +0 -101
  148. package/src/components/Banner.js +0 -58
  149. package/src/components/ColorText.js +0 -29
  150. package/src/components/ColorsPalette.js +0 -69
  151. package/src/components/ColumnParagrphs.js +0 -23
  152. package/src/components/ContinueButton.js +0 -14
  153. package/src/components/DesignComponent.js +0 -80
  154. package/src/components/FontText.js +0 -193
  155. package/src/components/Header.js +0 -50
  156. package/src/components/HeaderHeading.js +0 -23
  157. package/src/components/IconsGroup.js +0 -60
  158. package/src/components/Page.js +0 -135
  159. package/src/components/ResponsivePreview.js +0 -44
  160. package/src/components/Route.js +0 -1
  161. package/src/components/ShapePreview.js +0 -63
  162. package/src/components/ShapeSet.js +0 -85
  163. package/src/components/SlidersWithResponsive.js +0 -23
  164. package/src/components/SpacingButton/actionButtons.js +0 -41
  165. package/src/components/SpacingButton/dropdown.js +0 -114
  166. package/src/components/SpacingButton/index.js +0 -248
  167. package/src/components/SpacingButton/props.js +0 -45
  168. package/src/components/SpacingPreview.js +0 -154
  169. package/src/components/SpacingTable.js +0 -210
  170. package/src/components/ThemeButtons.js +0 -42
  171. package/src/components/UploadImage.js +0 -61
  172. package/src/components/Widget.js +0 -1
  173. package/src/components/index.js +0 -25
  174. package/src/pages/Account/__/index.js +0 -241
  175. package/src/pages/Color/globalThemes.js +0 -30
  176. package/src/pages/Color/palette.js +0 -35
  177. package/src/pages/Components/grid.js +0 -99
  178. package/src/pages/Components/index.js +0 -37
  179. package/src/pages/Components/sidebar.js +0 -28
  180. package/src/pages/Components/style.js +0 -16
  181. package/src/pages/DesignSystem/Dashboard/banners.js +0 -38
  182. package/src/pages/DesignSystem/Dashboard/designElements.js +0 -124
  183. package/src/pages/DesignSystem/Dashboard/index.js +0 -22
  184. package/src/pages/DesignSystem/Dashboard/quickstart.js +0 -86
  185. package/src/pages/DesignSystem/Dashboard/state.js +0 -118
  186. package/src/pages/DesignSystem/Dashboard/summary.js +0 -40
  187. package/src/pages/DesignSystem/index.js +0 -187
  188. package/src/pages/Export/gist.js +0 -23
  189. package/src/pages/Fonts/fontFaces.js +0 -50
  190. package/src/pages/Fonts/fontFamilies.js +0 -47
  191. package/src/pages/Fonts/index.js +0 -15
  192. package/src/pages/Fonts/state.js +0 -5
  193. package/src/pages/Init/ChooseEnvironment.js +0 -104
  194. package/src/pages/Init/CreateDocumentTheme.js +0 -166
  195. package/src/pages/Init/CreatePalette.js +0 -72
  196. package/src/pages/Init/FontText.js +0 -23
  197. package/src/pages/Init/Personalize/fields.js +0 -109
  198. package/src/pages/Init/Personalize/icon.js +0 -42
  199. package/src/pages/Init/Personalize/index.js +0 -37
  200. package/src/pages/Init/index.js +0 -36
  201. package/src/pages/Library/disabled.js +0 -38
  202. package/src/pages/MediaQuery/index.js +0 -46
  203. package/src/pages/MediaQuery/lists.js +0 -285
  204. package/src/pages/MediaQuery/state.js +0 -150
  205. package/src/pages/MediaQuery/typeScale.js +0 -69
  206. package/src/pages/Shapes/shapeSet.js +0 -133
  207. package/src/pages/State/index.js +0 -86
  208. package/src/pages/Theme/index.js +0 -197
  209. package/src/pages/Theme/preview.js +0 -153
  210. package/src/pages/Typography/collection.js +0 -110
  211. package/src/pages/Typography/documentStyles.js +0 -125
  212. package/src/pages/Typography/rangeButtons.js +0 -58
  213. package/src/pages/Typography/stylesHelpers.js +0 -30
  214. /package/{.legacy/boxModel.js → src/data/favorites.js} +0 -0
  215. /package/{.legacy/sequence.js → src/data/filters.js} +0 -0
  216. /package/src/pages/{Theme → ColorEditor}/ntc.js +0 -0
package/README.md ADDED
@@ -0,0 +1,19 @@
1
+ # Fucking editor!
2
+ Example dev setup (boilerplate) to use [DOMQL](https://github.com/rackai/domql). You can also check live editor [Playground](https://github.com/rackai/playground).
3
+
4
+ ### Setup
5
+
6
+ 1. Clone the repo
7
+ ```
8
+ git clone git@github.com:rackai/editor.git
9
+ ```
10
+
11
+ 2. Install scripts
12
+ ```
13
+ yarn
14
+ ```
15
+
16
+ 3. Run the project
17
+ ```
18
+ yarn start
19
+ ```
package/app.webmanifest ADDED
@@ -0,0 +1,4 @@
1
+ {
2
+ "display": "standalone",
3
+ "scope": "https://editor.symbols.app/"
4
+ }
package/index.html CHANGED
@@ -1,12 +1,22 @@
1
1
  <html background="#000">
2
2
  <head>
3
- <title>Symbols preview</title>
3
+ <title>Symbols Editor</title>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
5
5
  <meta name="apple-mobile-web-app-capable" content="yes">
6
6
 
7
7
  <meta charset="UTF-8">
8
+
9
+ <meta name="author" content="SymbolsApp">
10
+ <meta name="keywords" content="UIkit, Design System, Platform, Javascript, CSS, Less, Sass, Component, React, Angular, Vue, Svelte, HTML, Haml, Jade, Bootstrap, Semantic UI, Material, ">
11
+ <meta name="description" content="Introducing a highly customizable UI kit to decorate your app from scratch. Our space shares all the tools and supplies to design desired components. ">
12
+
13
+ <meta name="apple-mobile-web-app-title" content="Symbols">
14
+ <meta name="apple-mobile-web-app-capable" content="yes">
15
+ <meta name="apple-mobile-web-app-status-bar-style" content="default">
16
+
17
+ <link rel="manifest" href="./app.webmanifest" crossorigin="use-credentials">
8
18
  </head>
9
- <body background="#000">
10
- <script src="./index.js"></script>
19
+ <body>
20
+ <script src="./protect-pwd.js"></script>
11
21
  </body>
12
- </html>
22
+ </html>
package/netlify.toml ADDED
@@ -0,0 +1,19 @@
1
+ [[redirects]]
2
+ from = "*"
3
+ to = "/index.html"
4
+ status = 200
5
+
6
+ [[redirects]]
7
+ from = "/*"
8
+ to = "/index.html"
9
+ status = 200
10
+
11
+ [[redirects]]
12
+ from = "/*/*"
13
+ to = "/index.html"
14
+ status = 200
15
+
16
+ [[redirects]]
17
+ from = "/*/*/*"
18
+ to = "/index.html"
19
+ status = 200
package/package.json CHANGED
@@ -2,45 +2,45 @@
2
2
  "name": "@symbo.ls/preview",
3
3
  "description": "",
4
4
  "author": "",
5
- "version": "0.0.97",
6
- "main": "src/app.js",
5
+ "version": "2.0.7",
6
+ "repository": "https://github.com/symbo-ls/preview",
7
+ "main": "src/index.js",
7
8
  "scripts": {
8
- "link:all": "yarn link smbls domql css-in-props @symbo.ls/icons @symbo.ls/config @symbo.ls/components @symbo.ls/scratch @symbo.ls/playground @symbo.ls/utils @symbo.ls/init @symbo.ls/config-default @domql/router @domql/utils @domql/router",
9
- "clean": "rm -rf .cache dist",
10
- "clean:modules": "rm -rf node_modules/**/node_modules/@symbo.ls node_modules/**/node_modules/@domql node_modules/**/node_modules/domql node_modules/**/node_modules/smbls",
11
- "prestart": "yarn clean && yarn clean:modules",
12
- "start": "parcel index.html --port 1200 --no-cache",
13
- "prebuild": "rm -rf .cache dist",
14
- "build": "parcel build index.html",
15
- "reinstall": "rm -rf node_modules/@symbo.ls node_modules/@domql node_modules/domql node_modules/smbls dist yarn.lock .cache && yarn"
16
- },
17
- "targets": {
18
- "main": {
19
- "context": "browser",
20
- "outputFormat": "commonjs",
21
- "includeNodeModules": true
22
- }
9
+ "prestart": "rm -rf .cache",
10
+ "start": "parcel src/index.html --no-cache",
11
+ "start:protected": "npm run prestart && yarn start",
12
+ "prebuild": "rm -rf dist",
13
+ "build": "parcel build index.html --no-cache",
14
+ "build:protected": "npm run prebuild && yarn build --no-source-maps --no-content-hash",
15
+ "reinstall": "rm yarn.lock && rm -rf node_modules/@rackai && yarn",
16
+ "test": "yarn standard && jest --coverage --coverageReporters=text-lcov | coveralls",
17
+ "test-watch": "jest --watch"
23
18
  },
24
19
  "dependencies": {
25
- "@domql/router": "latest",
26
- "@domql/tags": "latest",
27
- "@symbo.ls/components": "latest",
28
- "@symbo.ls/icons": "latest",
29
- "@symbo.ls/init": "latest",
30
- "@symbo.ls/scratch": "latest",
31
- "@symbo.ls/temp-db": "latest",
32
- "@symbo.ls/utils": "latest"
20
+ "@symbo.ls/all": "latest",
21
+ "@symbo.ls/auth": "latest",
22
+ "@symbo.ls/fetch": "latest",
23
+ "@symbo.ls/loader": "latest",
24
+ "domql-preview": "domql/domql"
33
25
  },
34
26
  "devDependencies": {
35
- "domql": "^1.5.35",
36
- "@babel/core": "^7.11.5",
37
- "babel-eslint": "^10.0.3",
38
- "eslint": "^6.1.0",
39
- "parcel-bundler": "^1.12.4",
27
+ "@babel/core": "^7.0.0",
28
+ "@emotion/css": "^11.5.0",
29
+ "@babel/eslint-parser": "^7.5.4",
30
+ "coveralls": "^3.0.5",
31
+ "eslint": "^8.9.0",
32
+ "eslint-plugin-jest": "^22.14.1",
33
+ "jest": "^26.1.0",
34
+ "parcel-bundler": "^1.12.3",
40
35
  "parcel-plugin-svg-sprite": "^1.4.1",
41
- "standard": "^13.1.0"
36
+ "standard": "^16.0.4"
37
+ },
38
+ "jest": {
39
+ "collectCoverageFrom": [
40
+ "src/**/*.js"
41
+ ]
42
42
  },
43
43
  "standard": {
44
- "parser": "babel-eslint"
44
+ "parser": "@babel/eslint-parser"
45
45
  }
46
46
  }
package/protect-pwd.js ADDED
@@ -0,0 +1,65 @@
1
+ 'use strict'
2
+
3
+ import './src/config'
4
+
5
+ import DOM from 'domql-preview'
6
+ import App from './src/app'
7
+ import { getCookie, setCookie } from 'domql-preview/packages/cookie'
8
+
9
+ const KEY = '9EC6CB2A5122F61B0A5E4211B6C1F8E5F3708E0276DA2F23159AE7987EE74298'
10
+ const KEY2 = 'F6CC5B085B61387AC2C125BD1289137D02BC58A07AF9A766FA0DE45E0E5066F8'
11
+
12
+ async function sha256 (message) {
13
+ const msgBuffer = new TextEncoder('utf-8').encode(message)
14
+ const hashBuffer = await window.crypto.subtle.digest('SHA-256', msgBuffer)
15
+ const hashArray = Array.from(new Uint8Array(hashBuffer))
16
+ const hashHex = hashArray.map(b => ('00' + b.toString(16)).slice(-2)).join('')
17
+ return hashHex
18
+ }
19
+
20
+ const protect = {
21
+ style: {
22
+ position: 'absolute',
23
+ left: '50%',
24
+ top: '50%',
25
+ width: '45%',
26
+ minWidth: 300,
27
+ transform: 'translate3d(-50%, -50%, 1px)',
28
+ fontSize: 18,
29
+ color: 'black',
30
+ background: 'white',
31
+ padding: 26
32
+ },
33
+
34
+ label: {
35
+ tag: 'label',
36
+ div: 'Password Protected',
37
+ input: {
38
+ tag: 'input',
39
+ attr: { type: 'password', autofocus: true },
40
+ style: {
41
+ padding: 10,
42
+ marginTop: 10,
43
+ width: '100%'
44
+ },
45
+ on: {
46
+ keyup: (event, element) => {
47
+ var { node } = element
48
+ var { value } = node
49
+ sha256(value).then(hash => {
50
+ var passph = hash.toUpperCase()
51
+ if (passph === KEY || passph === KEY2) {
52
+ setCookie('hash', passph, 3)
53
+ protect.remove()
54
+ DOM.create(App)
55
+ }
56
+ })
57
+ }
58
+ }
59
+ }
60
+ }
61
+ }
62
+
63
+ const hash = getCookie('hash')
64
+ if (hash === KEY || hash === KEY2) DOM.create(App)
65
+ else DOM.create(protect)
package/src/animations.js ADDED
@@ -0,0 +1,71 @@
1
+ 'use strict'
2
+
3
+ import { keyframes } from '@emotion/css'
4
+
5
+ export const isVisible = q => (q ? {
6
+ visibility: 'visible',
7
+ opacity: 1
8
+ } : {
9
+ visibility: 'hidden',
10
+ opacity: 0
11
+ })
12
+
13
+ export const transition = (t = 350) => ({
14
+ transition: `${t}ms`,
15
+ transitionProperties: 'opacity, visibility'
16
+ })
17
+
18
+ export const fadeIn = keyframes`
19
+ from {
20
+ opacity: 0;
21
+ }
22
+ to {
23
+ opacity: 1;
24
+ }
25
+ `
26
+
27
+ export const fadeInUp = keyframes`
28
+ from {
29
+ transform: translate3d(0,20px,0);
30
+ opacity: 0;
31
+ }
32
+ to {
33
+ transform: translate3d(0,0,0);
34
+ opacity: 1;
35
+ }
36
+ `
37
+
38
+ export const fadeInUpLong = keyframes`
39
+ from {
40
+ transform: translate3d(0,40px,0);
41
+ opacity: 0;
42
+ }
43
+ to {
44
+ transform: translate3d(0,0,0);
45
+ opacity: 1;
46
+ }
47
+ `
48
+
49
+ export const circleDown = keyframes`
50
+ from {
51
+ transform: translate3d(-50%, -60%, 0);
52
+ opacity: 0;
53
+ }
54
+ to {
55
+ transform: translate3d(-50%, -50%, 0);
56
+ opacity: 1;
57
+ }
58
+ `
59
+
60
+ export const animationSettings = {
61
+ name: fadeInUp,
62
+ duration: '950ms'
63
+ }
64
+
65
+ export const animateOnLoad = (condition, { name, duration, delay } = animationSettings) => (condition ? {
66
+ animationName: name || animationSettings.name,
67
+ animationDuration: duration || animationSettings.duration,
68
+ animationDelay: delay || animationSettings.delay,
69
+ animationTimingFunction: 'ease',
70
+ animationFillMode: 'both'
71
+ } : null)
package/src/app.js CHANGED
@@ -2,51 +2,89 @@
2
2
 
3
3
  import './config'
4
4
  import style from './style'
5
+ import state from './state'
5
6
 
6
- import { Flex } from '@symbo.ls/components'
7
+ import 'domql-preview/packages/emotion'
8
+ import router from 'domql-preview/packages/router'
9
+
10
+ import { HeaderOfMember, Shape } from '@symbo.ls/all'
7
11
 
8
12
  import {
9
- Init,
10
- Components,
11
- DesignSystem,
12
13
  Export,
13
14
  Library,
14
- State,
15
- Account
15
+ Color,
16
+ ColorEditor,
17
+ Shapes,
18
+ Spaces,
19
+ Icons,
20
+ Typography
16
21
  } from './pages'
17
22
 
18
- const SUB_ROUTES = {}
19
- Object.keys(DesignSystem.routes).map(route => {
20
- SUB_ROUTES[route] = {
21
- extend: DesignSystem,
22
- page: {
23
- DesignSystemNavbar: {},
24
- Page: {
25
- extend: DesignSystem.routes[route]
23
+ import { animateOnLoad, fadeIn } from './animations'
24
+
25
+ const app = {
26
+ key: 'app',
27
+ style,
28
+
29
+ proto: Shape,
30
+
31
+ state,
32
+ props: {
33
+ theme: 'document'
34
+ },
35
+
36
+ class: {
37
+ animation: (el, s) => animateOnLoad(true, { name: fadeIn })
38
+ },
39
+
40
+ _header: {
41
+ style: {
42
+ position: 'sticky',
43
+ width: '100%',
44
+ top: 0,
45
+ zIndex: 1
46
+ },
47
+
48
+ define: { isFloating: param => param },
49
+
50
+ content: {
51
+ proto: HeaderOfMember,
52
+
53
+ nav: {
54
+ 1: null
26
55
  }
27
56
  }
28
- }
29
- })
30
-
31
- const App = {
32
- extend: Flex,
33
-
34
- props: style,
57
+ },
35
58
 
59
+ define: { routes: param => param },
36
60
  routes: {
37
- '/init': Init,
38
- '/account': Account,
39
61
  '/library': Library,
40
- '/design-system': DesignSystem,
41
- '/components': Components,
42
62
  '/component': Export,
43
- '/state': State,
44
- ...SUB_ROUTES
63
+ '/colors': Color,
64
+ '/theme': ColorEditor,
65
+ '/shapes': Shapes,
66
+ '/spaces': Spaces,
67
+ '/icons': Icons,
68
+ '/typography': Typography
45
69
  },
46
70
 
47
- content: {},
71
+ content: {
72
+ style: { position: 'relative' }
73
+ },
48
74
 
49
- Modal: {}
75
+ on: {
76
+ render: (el, s) => router(el, window.location.pathname, {}),
77
+ scroll: (ev, el) => {
78
+ const { scrollTop } = el.node
79
+ const isFloating = scrollTop > 0
80
+ if (isFloating !== el.props.isFloating) {
81
+ el.props.isFloating = isFloating
82
+ // el._header.update()
83
+ }
84
+ }
85
+ }
50
86
  }
51
87
 
52
- export default App
88
+ window.onpopstate = e => router(app, window.location.pathname, {}, 0, false)
89
+
90
+ export default app
package/src/assets/dots.png ADDED
Binary file
package/src/assets/dotsDark.png ADDED
Binary file
package/src/config/index.js CHANGED
@@ -1,19 +1,38 @@
1
1
  'use strict'
2
2
 
3
- import { init } from '@symbo.ls/components'
3
+ import CONFIG from '@symbo.ls/config'
4
+ import { set, setEach, RESET, FONT_FAMILY, FONT, getFontFace, getFontFamily } from '@symbo.ls/scratch'
5
+ import { injectGlobal } from '@emotion/css'
4
6
 
7
+ import { merge } from 'domql-preview/src/utils/object'
8
+ import { EDITOR_THEMES, COMPONENT_THEMES } from './theme'
5
9
  import { EDITOR_COLORS } from './color'
6
- import { COMPONENT_THEMES, EDITOR_THEMES } from './theme'
7
-
8
- const PREVIEW_CONF = {
9
- color: {
10
- blue2: '#4676EC',
11
- ...EDITOR_COLORS
12
- },
13
- theme: {
14
- ...EDITOR_THEMES,
15
- ...COMPONENT_THEMES
10
+
11
+ export const applyConfig = (userConfig) => {
12
+ let DATA = CONFIG
13
+ if (userConfig) DATA = merge(CONFIG, userConfig)
14
+
15
+ DATA.FONT_FAMILY.EditorFamily.default = true
16
+
17
+ set(DATA)
18
+ setEach('color', EDITOR_COLORS)
19
+ setEach('theme', COMPONENT_THEMES)
20
+ setEach('theme', EDITOR_THEMES)
21
+
22
+ const FontFace = getFontFace(FONT)
23
+ const family = getFontFamily(FONT_FAMILY)
24
+
25
+ injectGlobal(RESET)
26
+ injectGlobal(FontFace)
27
+ injectGlobal(`
28
+ body,
29
+ input,
30
+ select {
31
+ font-family: ${family};
16
32
  }
33
+ `)
17
34
  }
18
35
 
19
- export default init(PREVIEW_CONF)
36
+ applyConfig()
37
+
38
+ export default CONFIG
package/src/config/theme.js CHANGED
@@ -1,13 +1,83 @@
1
1
  'use strict'
2
2
 
3
+ import dots from '../assets/dots.png'
4
+ import dotsDark from '../assets/dotsDark.png'
5
+
6
+ const MODAL = {
7
+ modalFade: {
8
+ color: 'white',
9
+ backdropFilter: 'blur(3px)',
10
+ backgroundColor: 'modalFade 0.75'
11
+ },
12
+ modalBackground: {
13
+ color: 'white',
14
+ backgroundColor: 'modalBackground'
15
+ }
16
+ }
17
+
18
+ const SCENE = {
19
+ darkScene: {
20
+ backgroundColor: 'white 0.02',
21
+ '> div': { backgroundImage: `url(${dots})` }
22
+ },
23
+ lightScene: {
24
+ backgroundColor: 'white',
25
+ '> div': { backgroundImage: `url(${dotsDark})` }
26
+ }
27
+ }
28
+
29
+ const DROPDOWN = {
30
+ dropdownItem: {
31
+ color: 'white 0.65',
32
+ state: {
33
+ hover: {
34
+ color: 'white',
35
+ background: 'gradient-light-active'
36
+ },
37
+ active: {
38
+ color: 'white',
39
+ background: 'gradient-light-active'
40
+ }
41
+ }
42
+ },
43
+ dropdownItemActive: {
44
+ color: 'white',
45
+ background: 'gradient-light-active'
46
+ }
47
+ }
48
+
3
49
  export const EDITOR_THEMES = {
50
+ header: {
51
+ color: 'white',
52
+ backgroundColor: 'black 0.85',
53
+ borderColor: 'white 0.09',
54
+ backdropFilter: 'blur(3px)'
55
+ },
56
+
4
57
  shape: {
5
58
  background: 'shapeColor',
6
59
  border: 'none'
7
- }
60
+ },
61
+
62
+ ...MODAL,
63
+ ...SCENE,
64
+ ...DROPDOWN
8
65
  }
9
66
 
10
67
  export const COMPONENT_THEMES = {
68
+ lightDark: {
69
+ background: 'white',
70
+ color: 'darkPurple',
71
+ variants: {
72
+ inverse: true
73
+ }
74
+ },
75
+
76
+ alert: {
77
+ background: 'yellow',
78
+ color: 'black'
79
+ },
80
+
11
81
  label: {
12
82
  background: 'brown',
13
83
  color: 'white'
package/src/data/Symbols.sketch ADDED
Binary file