In this PR I have changed some of the jsx files to tsx file.
I'm starting off with the "leafs" so that migration of the rest will be
easier, hopefully.
What I'm basically doing is taking a jsx file, copy paste it into:
https://mskelton.dev/ratchet
And after that I'm fixing the types as needed.
It's not a very long process.
Hopefully more PRs will follow and this will be over soon.
I don't plan to migrate the storybook as I generally don't understand
why is it useful, I'll open an issue to see if anyone thinks
differently.
This completes the migration to typescript of all the non react
components code.
The only changes introduced besides types are the type checks using
`"something" in object` which narrows down types in typescript.
This migrates some utilities classes from javascript to typescript.
Nothing special about the migration, mainly added types and made sure
the code adheres to the strict mode.
I have picked some small files so git doesn't think they are the same
since they are "very different".
I hope that in later PRs, when migrating lager files this won't be an
issues.
This is basically the content of #841 with the code review changes and
relevant fixes to tests/driver code to pass the tests.
CC: @ShellyDCMS
After this we should lint the project and add the lint to the CI to make
sure it doesn't break.
---------
Co-authored-by: ShellyDCMS <60476837+ShellyDCMS@users.noreply.github.com>
Co-authored-by: shelly_goldblit <shelly_goldblit@dell.com>
Resolves#803
This is an initial commit to allow migrating to typescript bit by bit.
It introduces vite.
It removes all the webpack configuration (which I have no clue what all
the profiling are needed for, and couldn't find anything in the readme).
It also changes a single file from javascript to typescript:
`urlopen.js` -> `urlopen.ts`
Which was done manually, later on I'll see if I can automate most of the
migration.
For now, everything seems to work as expected.
I also upgrades storybook to use vite and renames the stories to jsx (I
honestly don't know why this complexity is needed here, but I'll keep it
for now).
cc: @damianstasik
This does the following:
1. Moves the WDIO code from javascript to typescript
2. Moves to use files that are `cy.ts` instead of `index.js`
3. Replace e2e to use cypress
4. Introduce back some skipped tests
This is in continue to the conversation here:
https://github.com/HarelM/editor/pull/3
Before:
```
"spec" Reporter:
------------------------------------------------------------------
[chrome 120.0.6099.71 linux #0-0] Running: chrome (v120.0.6099.71) on linux
[chrome 120.0.6099.71 linux #0-0] Session ID: ee9a87bcfce007ac7721929c6e6234d0
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] » /test/functional/index.js
[chrome 120.0.6099.71 linux #0-0] maputnik
[chrome 120.0.6099.71 linux #0-0] history
[chrome 120.0.6099.71 linux #0-0] - undo/redo
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] layers
[chrome 120.0.6099.71 linux #0-0] ops
[chrome 120.0.6099.71 linux #0-0] ✓ delete
[chrome 120.0.6099.71 linux #0-0] ✓ duplicate
[chrome 120.0.6099.71 linux #0-0] ✓ hide
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] background
[chrome 120.0.6099.71 linux #0-0] ✓ add
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] modify
[chrome 120.0.6099.71 linux #0-0] layer
[chrome 120.0.6099.71 linux #0-0] - expand/collapse
[chrome 120.0.6099.71 linux #0-0] ✓ id
[chrome 120.0.6099.71 linux #0-0] ✓ min-zoom
[chrome 120.0.6099.71 linux #0-0] ✓ max-zoom
[chrome 120.0.6099.71 linux #0-0] ✓ comments
[chrome 120.0.6099.71 linux #0-0] - color
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] filter
[chrome 120.0.6099.71 linux #0-0] - expand/collapse
[chrome 120.0.6099.71 linux #0-0] - compound filter
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] paint
[chrome 120.0.6099.71 linux #0-0] - expand/collapse
[chrome 120.0.6099.71 linux #0-0] - color
[chrome 120.0.6099.71 linux #0-0] - pattern
[chrome 120.0.6099.71 linux #0-0] - opacity
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] json-editor
[chrome 120.0.6099.71 linux #0-0] - expand/collapse
[chrome 120.0.6099.71 linux #0-0] - modify
[chrome 120.0.6099.71 linux #0-0] - parse error
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] fill
[chrome 120.0.6099.71 linux #0-0] ✓ add
[chrome 120.0.6099.71 linux #0-0] - change source
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] line
[chrome 120.0.6099.71 linux #0-0] ✓ add
[chrome 120.0.6099.71 linux #0-0] - groups
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] symbol
[chrome 120.0.6099.71 linux #0-0] ✓ add
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] raster
[chrome 120.0.6099.71 linux #0-0] ✓ add
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] circle
[chrome 120.0.6099.71 linux #0-0] ✓ add
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] fill extrusion
[chrome 120.0.6099.71 linux #0-0] ✓ add
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] groups
[chrome 120.0.6099.71 linux #0-0] ✓ simple
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] map
[chrome 120.0.6099.71 linux #0-0] zoom level
[chrome 120.0.6099.71 linux #0-0] - via url
[chrome 120.0.6099.71 linux #0-0] - via map controls
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] modals
[chrome 120.0.6099.71 linux #0-0] open
[chrome 120.0.6099.71 linux #0-0] ✓ close
[chrome 120.0.6099.71 linux #0-0] - upload
[chrome 120.0.6099.71 linux #0-0] ✓ load from url
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] shortcuts
[chrome 120.0.6099.71 linux #0-0] ✓ open/close
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] export
[chrome 120.0.6099.71 linux #0-0] ✓ close
[chrome 120.0.6099.71 linux #0-0] - download
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] sources
[chrome 120.0.6099.71 linux #0-0] - active sources
[chrome 120.0.6099.71 linux #0-0] - public source
[chrome 120.0.6099.71 linux #0-0] - add new source
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] inspect
[chrome 120.0.6099.71 linux #0-0] ✓ toggle
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] style settings
[chrome 120.0.6099.71 linux #0-0] ✓ name
[chrome 120.0.6099.71 linux #0-0] ✓ owner
[chrome 120.0.6099.71 linux #0-0] ✓ sprite url
[chrome 120.0.6099.71 linux #0-0] ✓ glyphs url
[chrome 120.0.6099.71 linux #0-0] ✓ maptiler access token
[chrome 120.0.6099.71 linux #0-0] ✓ thunderforest access token
[chrome 120.0.6099.71 linux #0-0] ✓ style renderer
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] sources
[chrome 120.0.6099.71 linux #0-0] - toggle
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] screenshots
[chrome 120.0.6099.71 linux #0-0] ✓ front_page
[chrome 120.0.6099.71 linux #0-0] ✓ open
[chrome 120.0.6099.71 linux #0-0] ✓ export
[chrome 120.0.6099.71 linux #0-0] ✓ sources
[chrome 120.0.6099.71 linux #0-0] ✓ style settings
[chrome 120.0.6099.71 linux #0-0] ✓ inspect
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] accessibility
[chrome 120.0.6099.71 linux #0-0] skip links
[chrome 120.0.6099.71 linux #0-0] ✓ skip link to layer list
[chrome 120.0.6099.71 linux #0-0] ✓ skip link to layer editor
[chrome 120.0.6099.71 linux #0-0] ✓ skip link to map view
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] keyboard
[chrome 120.0.6099.71 linux #0-0] shortcuts
[chrome 120.0.6099.71 linux #0-0] ✓ ESC should unfocus
[chrome 120.0.6099.71 linux #0-0] ✓ '?' should show shortcuts modal
[chrome 120.0.6099.71 linux #0-0] ✓ 'o' should show open modal
[chrome 120.0.6099.71 linux #0-0] ✓ 'e' should show export modal
[chrome 120.0.6099.71 linux #0-0] ✓ 'd' should show sources modal
[chrome 120.0.6099.71 linux #0-0] ✓ 's' should show settings modal
[chrome 120.0.6099.71 linux #0-0] - 'i' should change map to inspect mode
[chrome 120.0.6099.71 linux #0-0] ✓ 'm' should focus map
[chrome 120.0.6099.71 linux #0-0] ✓ '!' should show debug modal
[chrome 120.0.6099.71 linux #0-0]
[chrome 120.0.6099.71 linux #0-0] 44 passing (58.8s)
[chrome 120.0.6099.71 linux #0-0] 23 skipped
```
After:
```
accessibility
skip links
- skip link to layer list
- skip link to layer editor
- skip link to map view
history
✓ undo/redo (4894ms)
keyboard
shortcuts
✓ ESC should unfocus (1912ms)
✓ '?' should show shortcuts modal (458ms)
✓ 'o' should show open modal (710ms)
✓ 'e' should show export modal (692ms)
✓ 'd' should show sources modal (588ms)
✓ 's' should show settings modal (894ms)
✓ 'i' should change map to inspect mode (804ms)
✓ 'm' should focus map (837ms)
✓ '!' should show debug modal (607ms)
layers
ops
✓ delete (4313ms)
✓ duplicate (1780ms)
✓ hide (1862ms)
background
✓ add (1675ms)
modify
layer
- expand/collapse
✓ id (3735ms)
✓ min-zoom (2209ms)
✓ max-zoom (2127ms)
✓ comments (2515ms)
✓ color (2022ms)
filter
- expand/collapse
- compound filter
paint
- expand/collapse
- color
- pattern
- opacity
json-editor
- expand/collapse
- modify
- parse error
fill
✓ add (1831ms)
- change source
line
✓ add (1844ms)
✓ groups (687ms)
symbol
✓ add (2035ms)
raster
✓ add (1814ms)
circle
✓ add (1867ms)
fill extrusion
✓ add (1963ms)
groups
✓ simple (2653ms)
map
zoom level
✓ via url (2279ms)
✓ via map controls (733ms)
modals
open
✓ close (2519ms)
- upload
✓ load from url (1557ms)
shortcuts
✓ open/close (1136ms)
export
✓ close (755ms)
- download
sources
- active sources
- public source
- add new source
inspect
✓ toggle (1020ms)
style settings
✓ name (1085ms)
✓ owner (1060ms)
✓ sprite url (1214ms)
✓ glyphs url (1553ms)
✓ maptiler access token (1111ms)
✓ thunderforest access token (1102ms)
✓ style renderer (922ms)
sources
- toggle
Spec Tests Passing Failing Pending Skipped
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ ✔ accessibility.cy.ts 52ms 3 - - 3 - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ ✔ history.cy.ts 00:06 1 1 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ ✔ keyboard.cy.ts 00:10 9 9 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ ✔ layers.cy.ts 00:39 28 17 - 11 - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ ✔ map.cy.ts 00:04 2 2 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ ✔ modals.cy.ts 00:16 18 12 - 6 - │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
✔ All specs passed! 01:18 61 41 - 20 -
```
---------
Co-authored-by: Yuri Astrakhan <yuriastrakhan@gmail.com>
It required converting mocha tests code into async since [@wdio/sync is
deprecated](https://webdriver.io/docs/sync-vs-async/) starting with
node v16.
It removed the dependency on fibers and on [node-gyp + python](https://
webdriver.io/docs/sync-vs-async/#common-issues-in-sync-mode) indirectly
though which is a great thing.
Also moved away from node-sass to sass since [node-sass is deprecated]
(https://sass-lang.com/blog/libsass-is-deprecated).
- Moved all components into a single directory like nextjs
- Made component names consistent with each other
- Made component names consistent with their export class names
- Added storybook for a few components with the aim to extend this further.
