From a18e8ac1e8b40866cdb4a9668fd1630de5b49334 Mon Sep 17 00:00:00 2001 From: Tilman Frick Date: Mon, 28 Jan 2019 18:23:49 +0100 Subject: [PATCH] feat: add library store (#733) * feat: add library store * feat: wire up data from package * fix: remove unneeded text color * fix: rewire update logic * fix: avoid webpack eval * fix: propagate projectViewMode via project/:id/store * fix: be defensive about meta data * feat: open guide on click * feat: add fallback image for libraries * feat: fetch libraries from npm * chore: copy vendor files to nccbuild * style: remove debris * feat: begin library store data modelling * feat: wire up recommendations to messaging * fix: provide backward-compatible mkdir * feat: allow updates from disk * feat: make installed libraries toggleable * feat: prepare npm updates * feat: allow switching from remote to local install type * feat: allow switching from local to remote install type * feat: redispatch npm updates appropriately * fix: dedupe update/connect transactions based on npm name * fix: adjust wording * feat: add option to set library displayName * feat: add library homepage * style: simplify layout mechanics * fix: simplify library meta data * fix: remove faulty memoization * fix: retain optimization * fix: avoid null pointer errors * fix: remove details arrow * fix: write packageFile on import * fix: remove stray log * feat: fetch library meta data from npm * chore: remove console.log * fix: remove library menu ftb * chore: remove console.log * feat: check for remote library updates * fix: allow up and downgrades * fix: avoid submit loops * feat: show update indicator * feat: highlight updatable libraries * feat: add option to check for updates * feat: add link to library store * fix: fix minor visual bugs * feat: add option to view website * fix: resolve npm tags correctly * refactor: lift installed detail state to LibraryStore * feat: show only update if > 0 are available * fix: toggle libraries only on summary click * fix: abort on failure * fix: disable entire title on library store * fix: abstract updateAvailable computation * chore: remove material design ftb * fix: add active state for links with icons * WIP fix: add migrator for library name and description * fix: laxen our way out of some ts corners * fix: sand some rough edges * feat: open remote files, e.g. website example on splashscreen * fix: harden packageFile passing * chore: factor out alva ui components * fix: trigger remote file request correctly with node hosts * fix: allow remote updates for recommended store items * feat: indicate update target version * chore: pass around component artifacts * fix: adjust library image height * fix: avoid jumping button heights * fix: remove faulty meta data * chore: avoid unnecessary work when building site * fix: find vendor dir correctly * fix: ensure vendored yarn is executable * chore: avoid duplication * fix: expose more data when fetch fails * chore: expose more data for fetch errors * fix: switch to fork from execa --- .circleci/config.yml | 46 +- package.json | 10 +- packages/components/index.d.ts | 1 + packages/components/index.js | 1 + packages/components/package.json | 39 + .../src}/add-button/demo.tsx | 0 .../src}/add-button/index.tsx | 0 .../src}/add-button/pattern.json | 0 packages/components/src/badge-icon/demo.tsx | 10 + packages/components/src/badge-icon/index.tsx | 25 + .../components/src/badge-icon/pattern.json | 8 + .../src}/button-group/index.tsx | 0 .../src}/button/demo.tsx | 0 .../src}/button/index.tsx | 67 +- .../src}/button/pattern.json | 0 .../src}/chrome-button/demo.tsx | 0 .../src}/chrome-button/index.tsx | 0 .../src}/chrome-button/pattern.json | 0 .../src}/chrome/demo.tsx | 0 .../src}/chrome/index.tsx | 0 .../src}/chrome/pattern.json | 0 .../src}/colors/index.tsx | 6 +- .../src}/colors/pattern.json | 0 .../src}/copy/demo.tsx | 0 .../src}/copy/index.tsx | 10 +- .../src}/copy/pattern.json | 0 .../src}/create-select/create-select.tsx | 0 .../src}/create-select/index.tsx | 0 .../src}/demo-container.tsx | 0 .../src}/drag-area/demo.tsx | 0 .../src}/drag-area/drag-area.tsx | 0 .../src}/drag-area/index.tsx | 0 .../src}/drag-area/pattern.json | 0 .../src}/drag-area/target-signal.tsx | 0 .../src}/editable-title/demo.tsx | 0 .../src}/editable-title/index.tsx | 0 .../src}/editable-title/pattern.json | 0 .../src}/element-slot/demo.tsx | 0 .../src}/element-slot/element-slot.tsx | 0 .../src}/element-slot/index.tsx | 0 .../src}/element-slot/pattern.json | 0 .../src}/element/demo.tsx | 0 .../src}/element/element.tsx | 0 .../src}/element/index.tsx | 0 .../src}/element/pattern.json | 0 .../src}/empty-state/demo.tsx | 0 .../src}/empty-state/index.tsx | 2 +- .../src}/empty-state/pattern.json | 0 packages/components/src/flex.tsx | 56 + .../src}/fonts/index.tsx | 0 .../src}/fonts/pattern.json | 0 .../src}/global-styles.tsx | 0 .../src}/headline/demo.tsx | 0 .../src}/headline/index.tsx | 0 .../src}/headline/pattern.json | 0 .../src}/icons/demo.tsx | 0 .../src}/icons/index.tsx | 0 .../src}/icons/pattern.json | 0 .../src}/image/demo.tsx | 0 .../src}/image/index.tsx | 0 .../src}/image/pattern.json | 0 .../components => components/src}/index.ts | 7 +- .../components/src/input-button/index.tsx | 51 + .../src}/item/index.ts | 0 .../src}/item/item.styles.ts | 0 .../src}/item/item.tsx | 0 .../src}/layout-switch/index.tsx | 0 .../src}/layout-switch/layout-switch.tsx | 0 .../src}/layout-switch/pattern.json | 0 .../src}/layout/demo.tsx | 0 .../src}/layout/index.tsx | 2 +- .../src}/layout/pattern.json | 0 packages/components/src/library-box/demo.tsx | 31 + packages/components/src/library-box/index.tsx | 1 + .../src/library-box/library-box.tsx | 155 + .../src/library-box/library-image.tsx | 75 + .../components/src/library-box/pattern.json | 8 + packages/components/src/link-icon/demo.tsx | 15 + packages/components/src/link-icon/index.tsx | 53 + .../components/src/link-icon/pattern.json | 7 + .../src}/link/demo.tsx | 0 .../src}/link/index.tsx | 0 .../src}/link/pattern.json | 0 .../src}/list/demo.tsx | 0 .../src}/list/index.tsx | 0 .../src}/list/pattern.json | 0 .../src}/overlay/demo.tsx | 0 .../src}/overlay/index.tsx | 0 .../src}/overlay/pattern.json | 0 .../src}/page-tile/demo.tsx | 0 .../src}/page-tile/index.tsx | 0 .../src}/page-tile/pattern.json | 0 .../src}/panes/element-pane/index.tsx | 0 .../src}/panes/index.ts | 0 .../src}/panes/patterns-pane/index.tsx | 2 +- .../src}/panes/preview-pane/index.tsx | 0 .../src}/panes/project-pane/index.tsx | 0 .../src}/panes/property-pane/index.tsx | 0 .../src}/pattern-list/demo.tsx | 0 .../src}/pattern-list/index.tsx | 0 .../src}/pattern-list/pattern.json | 0 .../src}/property-box/index.tsx | 0 .../src}/property-box/pattern.json | 0 .../src}/property-details/demo.tsx | 0 .../src}/property-details/index.tsx | 0 .../src}/property-details/pattern.json | 0 .../src}/property-input/index.tsx | 7 +- .../src}/property-item-asset/demo.tsx | 0 .../src}/property-item-asset/index.tsx | 0 .../src}/property-item-asset/pattern.json | 0 .../src}/property-item-boolean/demo.tsx | 0 .../src}/property-item-boolean/index.tsx | 0 .../src}/property-item-boolean/pattern.json | 0 .../src}/property-item-number/demo.tsx | 0 .../src}/property-item-number/index.tsx | 0 .../src}/property-item-number/pattern.json | 0 .../property-item-number.test.tsx | 0 .../property-item-number.tsx | 0 .../src}/property-item-radiogroup/demo.tsx | 0 .../src}/property-item-radiogroup/index.tsx | 0 .../property-item-radiogroup/pattern.json | 0 .../src}/property-item-select/demo.tsx | 0 .../src}/property-item-select/index.tsx | 0 .../src}/property-item-select/pattern.json | 0 .../src}/property-item-string/demo.tsx | 0 .../src}/property-item-string/index.tsx | 2 +- .../src}/property-item-string/pattern.json | 0 .../src}/property-item/index.tsx | 0 .../property-item/property-description.tsx | 0 .../src}/property-item/property-item.tsx | 0 .../src}/property-item/property-label.tsx | 0 .../src}/property-reference/index.tsx | 0 .../src}/search/demo.tsx | 0 .../src}/search/index.tsx | 0 .../src}/search/pattern.json | 0 .../src}/select/demo.tsx | 0 .../src}/select/index.tsx | 0 .../src}/select/pattern.json | 0 .../src}/space/demo.tsx | 0 .../src}/space/index.tsx | 10 +- .../src}/space/pattern.json | 0 .../src}/splash-screen/index.tsx | 0 .../src}/splash-screen/pattern.json | 0 .../splash-screen/splash-screen.styles.ts | 0 .../src}/splash-screen/splash-screen.tsx | 0 .../src}/tab-switch.tsx | 10 +- packages/components/src/tab/demo.tsx | 10 + packages/components/src/tab/index.tsx | 30 + packages/components/src/tab/pattern.json | 7 + .../src}/teaser/demo.tsx | 0 .../src}/teaser/index.tsx | 0 .../src}/teaser/pattern.json | 0 .../src}/teaser/teaser.tsx | 0 .../src}/update-badge/index.ts | 0 .../src}/update-badge/update-badge.styles.tsx | 0 .../src}/update-badge/update-badge.tsx | 0 .../src}/view-switch/demo.tsx | 0 .../src}/view-switch/index.tsx | 11 +- .../src}/view-switch/pattern.json | 0 packages/components/tsconfig.json | 18 + packages/core/package.json | 18 +- packages/core/package.ncc.json | 3 +- packages/core/src/adapters/browser-adapter.ts | 4 + .../electron-adapter/electron-adapter.test.ts | 6 +- .../electron-adapter/electron-adapter.ts | 25 +- .../electron-adapter/electron-main-menu.ts | 1 - packages/core/src/adapters/node-adapter.ts | 12 + packages/core/src/alva-util/index.ts | 1 + packages/core/src/alva-util/mkdirp.ts | 30 + packages/core/src/alva-util/target.ts | 2 +- packages/core/src/analyzer/get-package.ts | 153 + .../typescript-react-analyzer.ts | 15 +- packages/core/src/bin/analyze.ts | 12 +- packages/core/src/bin/static/build.ts | 1 + packages/core/src/compiler/create-compiler.ts | 2 +- packages/core/src/compiler/meetalva-loader.ts | 84 - packages/core/src/components/led/demo.tsx | 13 - packages/core/src/components/led/led.tsx | 82 - packages/core/src/components/led/pattern.json | 8 - .../components/panes/element-pane/demo.tsx | 2 - .../panes/element-pane/pattern.json | 7 - .../components/panes/patterns-pane/demo.tsx | 2 - .../panes/patterns-pane/pattern.json | 7 - .../components/panes/preview-pane/demo.tsx | 2 - .../panes/preview-pane/pattern.json | 7 - .../components/panes/project-pane/demo.tsx | 2 - .../panes/project-pane/pattern.json | 7 - .../components/panes/property-pane/demo.tsx | 2 - .../panes/property-pane/pattern.json | 7 - packages/core/src/components/tslint.json | 6 - packages/core/src/container/app.tsx | 4 +- .../src/container/chrome/chrome-container.tsx | 187 +- .../src/container/chrome/chrome-switch.tsx | 162 +- .../src/container/connect-pane-container.tsx | 2 +- .../src/container/dragged-element-image.tsx | 2 +- .../editable-title-container.tsx | 2 +- .../core/src/container/element-drag-image.tsx | 2 +- .../element-list/element-container.tsx | 4 +- .../element-list/element-list.test.tsx | 5 +- .../container/element-list/element-list.tsx | 71 +- .../element-list/element-slot-container.tsx | 2 +- .../container/library-settings-container.tsx | 138 - .../src/container/library-store-container.tsx | 369 + .../library-store-item-container.tsx | 185 + packages/core/src/container/match.tsx | 32 + .../core/src/container/menu/context-menu.tsx | 2 +- packages/core/src/container/menu/menu.tsx | 2 +- .../page-list/page-list-container.tsx | 2 +- .../page-list/page-tile-container.tsx | 2 +- .../src/container/pane-development-editor.tsx | 2 +- .../pattern-list/pattern-item-container.tsx | 2 +- .../pattern-list/pattern-list-container.tsx | 20 +- .../src/container/preview-pane-wrapper.tsx | 52 +- .../container/project-settings-container.tsx | 81 - .../core/src/container/properties-switch.tsx | 41 - .../property-list/action-payload-input.tsx | 14 +- .../property-list/action-payload-select.tsx | 2 +- .../property-list/property-item-asset.tsx | 2 +- .../property-list/property-item-boolean.tsx | 2 +- .../property-list/property-item-enum.tsx | 2 +- .../property-list/property-item-event.tsx | 36 +- .../property-list/property-item-number.tsx | 2 +- .../property-item-radio-group.tsx | 2 +- .../property-list/property-item-string.tsx | 2 +- .../property-list/property-list-virtual.tsx | 2 +- .../container/property-list/property-list.tsx | 12 +- .../container/property-list/property-row.tsx | 2 +- .../property-unknown-editor-skeleton.tsx | 2 +- .../property-list/property-unknown-editor.tsx | 2 +- .../property-list/reference-select.tsx | 8 +- .../src/container/property-list/reference.tsx | 2 +- .../core/src/container/recent-files-list.tsx | 2 +- .../src/container/splash-screen-container.tsx | 9 +- .../core/src/container/splash-screen-view.tsx | 6 +- .../container/user-store-property-select.tsx | 2 +- packages/core/src/container/view-details.tsx | 132 +- packages/core/src/container/when.tsx | 41 + packages/core/src/hosts/browser-host.tsx | 1 + .../src/hosts/electron-host/create-window.ts | 3 +- .../src/hosts/electron-host/electron-host.ts | 6 + packages/core/src/hosts/node-host/index.ts | 2 + packages/core/src/matchers/browser.ts | 1 + .../connect-npm-pattern-library-request.ts | 135 + .../connect-pattern-library-request.ts | 74 +- packages/core/src/matchers/index.ts | 3 + .../src/matchers/open-remote-file-request.ts | 38 + .../update-npm-pattern-library-request.ts | 115 + .../update-pattern-library-request.ts | 62 +- packages/core/src/menu/index.ts | 1 - packages/core/src/menu/library-menu.ts | 73 - packages/core/src/message/message.ts | 88 +- .../core/src/migrator/abstract-migration.ts | 5 +- .../src/migrator/fixtures/v1-designkit.alva | 2330 + packages/core/src/migrator/fixtures/v1.alva | 696 + .../core/src/migrator/migration-v0-v1.test.ts | 34 +- packages/core/src/migrator/migration-v0-v1.ts | 5 +- .../core/src/migrator/migration-v1-v2.test.ts | 83 + packages/core/src/migrator/migration-v1-v2.ts | 46 + packages/core/src/migrator/migrator.ts | 8 +- packages/core/src/model/alva-app.ts | 47 +- .../core/src/model/element/element.test.ts | 2 +- packages/core/src/model/element/element.ts | 2 +- packages/core/src/model/index.ts | 1 + packages/core/src/model/library-data.ts | 32 + packages/core/src/model/library-store-item.ts | 369 + packages/core/src/model/library-store.ts | 124 + packages/core/src/model/page/page.ts | 2 +- .../builtin-pattern-library.ts | 2 +- .../core/src/model/pattern-library/builtin.ts | 707 - .../model/pattern-library/pattern-library.ts | 141 +- .../model/pattern-property/enum-property.ts | 2 +- packages/core/src/model/project.ts | 24 +- packages/core/src/preview/preview.ts | 1 + packages/core/src/renderer/create-handlers.ts | 9 +- .../connect-pattern-library.ts | 31 +- .../src/renderer/message-handlers/index.ts | 2 +- .../update-pattern-library.ts | 41 +- ...request.ts => updating-pattern-library.ts} | 10 +- .../core/src/renderer/renderer-document.ts | 1 + packages/core/src/renderer/renderer.tsx | 39 +- packages/core/src/server/routes/index.ts | 1 + packages/core/src/server/routes/main.tsx | 4 +- .../core/src/server/routes/project-store.ts | 36 + packages/core/src/server/routes/project.ts | 6 +- packages/core/src/server/server.ts | 3 + packages/core/src/store/view-store.ts | 13 +- packages/core/src/types/hosts.ts | 1 + packages/core/src/types/pattern-property.ts | 2 +- packages/core/src/types/serialized-model.ts | 61 +- packages/core/src/types/types.ts | 19 +- packages/core/tsconfig.json | 7 +- packages/core/vendor/yarn.js | 142057 +++++++++++++++ packages/essentials/package.json | 4 + packages/essentials/src/analysis.ts | 459 +- patternplate.config.js | 30 +- webpack.config.js | 6 +- yarn.lock | 60 + 297 files changed, 148925 insertions(+), 2217 deletions(-) create mode 100644 packages/components/index.d.ts create mode 100644 packages/components/index.js create mode 100644 packages/components/package.json rename packages/{core/src/components => components/src}/add-button/demo.tsx (100%) rename packages/{core/src/components => components/src}/add-button/index.tsx (100%) rename packages/{core/src/components => components/src}/add-button/pattern.json (100%) create mode 100644 packages/components/src/badge-icon/demo.tsx create mode 100644 packages/components/src/badge-icon/index.tsx create mode 100644 packages/components/src/badge-icon/pattern.json rename packages/{core/src/components => components/src}/button-group/index.tsx (100%) rename packages/{core/src/components => components/src}/button/demo.tsx (100%) rename packages/{core/src/components => components/src}/button/index.tsx (69%) rename packages/{core/src/components => components/src}/button/pattern.json (100%) rename packages/{core/src/components => components/src}/chrome-button/demo.tsx (100%) rename packages/{core/src/components => components/src}/chrome-button/index.tsx (100%) rename packages/{core/src/components => components/src}/chrome-button/pattern.json (100%) rename packages/{core/src/components => components/src}/chrome/demo.tsx (100%) rename packages/{core/src/components => components/src}/chrome/index.tsx (100%) rename packages/{core/src/components => components/src}/chrome/pattern.json (100%) rename packages/{core/src/components => components/src}/colors/index.tsx (83%) rename packages/{core/src/components => components/src}/colors/pattern.json (100%) rename packages/{core/src/components => components/src}/copy/demo.tsx (100%) rename packages/{core/src/components => components/src}/copy/index.tsx (85%) rename packages/{core/src/components => components/src}/copy/pattern.json (100%) rename packages/{core/src/components => components/src}/create-select/create-select.tsx (100%) rename packages/{core/src/components => components/src}/create-select/index.tsx (100%) rename packages/{core/src/components => components/src}/demo-container.tsx (100%) rename packages/{core/src/components => components/src}/drag-area/demo.tsx (100%) rename packages/{core/src/components => components/src}/drag-area/drag-area.tsx (100%) rename packages/{core/src/components => components/src}/drag-area/index.tsx (100%) rename packages/{core/src/components => components/src}/drag-area/pattern.json (100%) rename packages/{core/src/components => components/src}/drag-area/target-signal.tsx (100%) rename packages/{core/src/components => components/src}/editable-title/demo.tsx (100%) rename packages/{core/src/components => components/src}/editable-title/index.tsx (100%) rename packages/{core/src/components => components/src}/editable-title/pattern.json (100%) rename packages/{core/src/components => components/src}/element-slot/demo.tsx (100%) rename packages/{core/src/components => components/src}/element-slot/element-slot.tsx (100%) rename packages/{core/src/components => components/src}/element-slot/index.tsx (100%) rename packages/{core/src/components => components/src}/element-slot/pattern.json (100%) rename packages/{core/src/components => components/src}/element/demo.tsx (100%) rename packages/{core/src/components => components/src}/element/element.tsx (100%) rename packages/{core/src/components => components/src}/element/index.tsx (100%) rename packages/{core/src/components => components/src}/element/pattern.json (100%) rename packages/{core/src/components => components/src}/empty-state/demo.tsx (100%) rename packages/{core/src/components => components/src}/empty-state/index.tsx (98%) rename packages/{core/src/components => components/src}/empty-state/pattern.json (100%) create mode 100644 packages/components/src/flex.tsx rename packages/{core/src/components => components/src}/fonts/index.tsx (100%) rename packages/{core/src/components => components/src}/fonts/pattern.json (100%) rename packages/{core/src/components => components/src}/global-styles.tsx (100%) rename packages/{core/src/components => components/src}/headline/demo.tsx (100%) rename packages/{core/src/components => components/src}/headline/index.tsx (100%) rename packages/{core/src/components => components/src}/headline/pattern.json (100%) rename packages/{core/src/components => components/src}/icons/demo.tsx (100%) rename packages/{core/src/components => components/src}/icons/index.tsx (100%) rename packages/{core/src/components => components/src}/icons/pattern.json (100%) rename packages/{core/src/components => components/src}/image/demo.tsx (100%) rename packages/{core/src/components => components/src}/image/index.tsx (100%) rename packages/{core/src/components => components/src}/image/pattern.json (100%) rename packages/{core/src/components => components/src}/index.ts (89%) create mode 100644 packages/components/src/input-button/index.tsx rename packages/{core/src/components => components/src}/item/index.ts (100%) rename packages/{core/src/components => components/src}/item/item.styles.ts (100%) rename packages/{core/src/components => components/src}/item/item.tsx (100%) rename packages/{core/src/components => components/src}/layout-switch/index.tsx (100%) rename packages/{core/src/components => components/src}/layout-switch/layout-switch.tsx (100%) rename packages/{core/src/components => components/src}/layout-switch/pattern.json (100%) rename packages/{core/src/components => components/src}/layout/demo.tsx (100%) rename packages/{core/src/components => components/src}/layout/index.tsx (98%) rename packages/{core/src/components => components/src}/layout/pattern.json (100%) create mode 100644 packages/components/src/library-box/demo.tsx create mode 100644 packages/components/src/library-box/index.tsx create mode 100644 packages/components/src/library-box/library-box.tsx create mode 100644 packages/components/src/library-box/library-image.tsx create mode 100644 packages/components/src/library-box/pattern.json create mode 100644 packages/components/src/link-icon/demo.tsx create mode 100644 packages/components/src/link-icon/index.tsx create mode 100644 packages/components/src/link-icon/pattern.json rename packages/{core/src/components => components/src}/link/demo.tsx (100%) rename packages/{core/src/components => components/src}/link/index.tsx (100%) rename packages/{core/src/components => components/src}/link/pattern.json (100%) rename packages/{core/src/components => components/src}/list/demo.tsx (100%) rename packages/{core/src/components => components/src}/list/index.tsx (100%) rename packages/{core/src/components => components/src}/list/pattern.json (100%) rename packages/{core/src/components => components/src}/overlay/demo.tsx (100%) rename packages/{core/src/components => components/src}/overlay/index.tsx (100%) rename packages/{core/src/components => components/src}/overlay/pattern.json (100%) rename packages/{core/src/components => components/src}/page-tile/demo.tsx (100%) rename packages/{core/src/components => components/src}/page-tile/index.tsx (100%) rename packages/{core/src/components => components/src}/page-tile/pattern.json (100%) rename packages/{core/src/components => components/src}/panes/element-pane/index.tsx (100%) rename packages/{core/src/components => components/src}/panes/index.ts (100%) rename packages/{core/src/components => components/src}/panes/patterns-pane/index.tsx (93%) rename packages/{core/src/components => components/src}/panes/preview-pane/index.tsx (100%) rename packages/{core/src/components => components/src}/panes/project-pane/index.tsx (100%) rename packages/{core/src/components => components/src}/panes/property-pane/index.tsx (100%) rename packages/{core/src/components => components/src}/pattern-list/demo.tsx (100%) rename packages/{core/src/components => components/src}/pattern-list/index.tsx (100%) rename packages/{core/src/components => components/src}/pattern-list/pattern.json (100%) rename packages/{core/src/components => components/src}/property-box/index.tsx (100%) rename packages/{core/src/components => components/src}/property-box/pattern.json (100%) rename packages/{core/src/components => components/src}/property-details/demo.tsx (100%) rename packages/{core/src/components => components/src}/property-details/index.tsx (100%) rename packages/{core/src/components => components/src}/property-details/pattern.json (100%) rename packages/{core/src/components => components/src}/property-input/index.tsx (94%) rename packages/{core/src/components => components/src}/property-item-asset/demo.tsx (100%) rename packages/{core/src/components => components/src}/property-item-asset/index.tsx (100%) rename packages/{core/src/components => components/src}/property-item-asset/pattern.json (100%) rename packages/{core/src/components => components/src}/property-item-boolean/demo.tsx (100%) rename packages/{core/src/components => components/src}/property-item-boolean/index.tsx (100%) rename packages/{core/src/components => components/src}/property-item-boolean/pattern.json (100%) rename packages/{core/src/components => components/src}/property-item-number/demo.tsx (100%) rename packages/{core/src/components => components/src}/property-item-number/index.tsx (100%) rename packages/{core/src/components => components/src}/property-item-number/pattern.json (100%) rename packages/{core/src/components => components/src}/property-item-number/property-item-number.test.tsx (100%) rename packages/{core/src/components => components/src}/property-item-number/property-item-number.tsx (100%) rename packages/{core/src/components => components/src}/property-item-radiogroup/demo.tsx (100%) rename packages/{core/src/components => components/src}/property-item-radiogroup/index.tsx (100%) rename packages/{core/src/components => components/src}/property-item-radiogroup/pattern.json (100%) rename packages/{core/src/components => components/src}/property-item-select/demo.tsx (100%) rename packages/{core/src/components => components/src}/property-item-select/index.tsx (100%) rename packages/{core/src/components => components/src}/property-item-select/pattern.json (100%) rename packages/{core/src/components => components/src}/property-item-string/demo.tsx (100%) rename packages/{core/src/components => components/src}/property-item-string/index.tsx (94%) rename packages/{core/src/components => components/src}/property-item-string/pattern.json (100%) rename packages/{core/src/components => components/src}/property-item/index.tsx (100%) rename packages/{core/src/components => components/src}/property-item/property-description.tsx (100%) rename packages/{core/src/components => components/src}/property-item/property-item.tsx (100%) rename packages/{core/src/components => components/src}/property-item/property-label.tsx (100%) rename packages/{core/src/components => components/src}/property-reference/index.tsx (100%) rename packages/{core/src/components => components/src}/search/demo.tsx (100%) rename packages/{core/src/components => components/src}/search/index.tsx (100%) rename packages/{core/src/components => components/src}/search/pattern.json (100%) rename packages/{core/src/components => components/src}/select/demo.tsx (100%) rename packages/{core/src/components => components/src}/select/index.tsx (100%) rename packages/{core/src/components => components/src}/select/pattern.json (100%) rename packages/{core/src/components => components/src}/space/demo.tsx (100%) rename packages/{core/src/components => components/src}/space/index.tsx (92%) rename packages/{core/src/components => components/src}/space/pattern.json (100%) rename packages/{core/src/components => components/src}/splash-screen/index.tsx (100%) rename packages/{core/src/components => components/src}/splash-screen/pattern.json (100%) rename packages/{core/src/components => components/src}/splash-screen/splash-screen.styles.ts (100%) rename packages/{core/src/components => components/src}/splash-screen/splash-screen.tsx (100%) rename packages/{core/src/components => components/src}/tab-switch.tsx (87%) create mode 100644 packages/components/src/tab/demo.tsx create mode 100644 packages/components/src/tab/index.tsx create mode 100644 packages/components/src/tab/pattern.json rename packages/{core/src/components => components/src}/teaser/demo.tsx (100%) rename packages/{core/src/components => components/src}/teaser/index.tsx (100%) rename packages/{core/src/components => components/src}/teaser/pattern.json (100%) rename packages/{core/src/components => components/src}/teaser/teaser.tsx (100%) rename packages/{core/src/components => components/src}/update-badge/index.ts (100%) rename packages/{core/src/components => components/src}/update-badge/update-badge.styles.tsx (100%) rename packages/{core/src/components => components/src}/update-badge/update-badge.tsx (100%) rename packages/{core/src/components => components/src}/view-switch/demo.tsx (100%) rename packages/{core/src/components => components/src}/view-switch/index.tsx (94%) rename packages/{core/src/components => components/src}/view-switch/pattern.json (100%) create mode 100644 packages/components/tsconfig.json create mode 100644 packages/core/src/alva-util/mkdirp.ts create mode 100644 packages/core/src/analyzer/get-package.ts delete mode 100644 packages/core/src/compiler/meetalva-loader.ts delete mode 100644 packages/core/src/components/led/demo.tsx delete mode 100644 packages/core/src/components/led/led.tsx delete mode 100644 packages/core/src/components/led/pattern.json delete mode 100644 packages/core/src/components/panes/element-pane/demo.tsx delete mode 100644 packages/core/src/components/panes/element-pane/pattern.json delete mode 100644 packages/core/src/components/panes/patterns-pane/demo.tsx delete mode 100644 packages/core/src/components/panes/patterns-pane/pattern.json delete mode 100644 packages/core/src/components/panes/preview-pane/demo.tsx delete mode 100644 packages/core/src/components/panes/preview-pane/pattern.json delete mode 100644 packages/core/src/components/panes/project-pane/demo.tsx delete mode 100644 packages/core/src/components/panes/project-pane/pattern.json delete mode 100644 packages/core/src/components/panes/property-pane/demo.tsx delete mode 100644 packages/core/src/components/panes/property-pane/pattern.json delete mode 100644 packages/core/src/components/tslint.json delete mode 100644 packages/core/src/container/library-settings-container.tsx create mode 100644 packages/core/src/container/library-store-container.tsx create mode 100644 packages/core/src/container/library-store-item-container.tsx create mode 100644 packages/core/src/container/match.tsx delete mode 100644 packages/core/src/container/project-settings-container.tsx delete mode 100644 packages/core/src/container/properties-switch.tsx create mode 100644 packages/core/src/container/when.tsx create mode 100644 packages/core/src/matchers/connect-npm-pattern-library-request.ts create mode 100644 packages/core/src/matchers/open-remote-file-request.ts create mode 100644 packages/core/src/matchers/update-npm-pattern-library-request.ts delete mode 100644 packages/core/src/menu/library-menu.ts create mode 100644 packages/core/src/migrator/fixtures/v1-designkit.alva create mode 100644 packages/core/src/migrator/fixtures/v1.alva create mode 100644 packages/core/src/migrator/migration-v1-v2.test.ts create mode 100644 packages/core/src/migrator/migration-v1-v2.ts create mode 100644 packages/core/src/model/library-data.ts create mode 100644 packages/core/src/model/library-store-item.ts create mode 100644 packages/core/src/model/library-store.ts delete mode 100644 packages/core/src/model/pattern-library/builtin.ts rename packages/core/src/renderer/message-handlers/{connect-pattern-library-request.ts => updating-pattern-library.ts} (70%) create mode 100644 packages/core/src/server/routes/project-store.ts create mode 100755 packages/core/vendor/yarn.js diff --git a/.circleci/config.yml b/.circleci/config.yml index 88033e617..d8c0907a7 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -1,6 +1,24 @@ version: 2.1 commands: + build_electron: + description: "Perform an electron-build of @meetalva/core" + parameters: + args: + type: string + steps: + - run: + name: Copy Scripts + command: lerna run copy:scripts --stream + + - run: + name: Copy Vendors + command: lerna run copy:vendor --stream + + - run: + name: Publish Release + command: alva-release --project packages/core/nccbuild << parameters.args >> + setup: description: "Set up the repo to work on" parameters: @@ -26,6 +44,7 @@ commands: - save_cache: paths: - node_modules + - packages/components/node_modules - packages/core/node_modules - packages/tools/node_modules key: v5-dependencies-<< parameters.key >>-{{ checksum "yarn.lock" }} @@ -61,6 +80,7 @@ jobs: - save_cache: paths: - node_modules + - packages/components/node_modules - packages/core/node_modules - packages/tools/node_modules key: v5-dependencies-macos-{{ checksum "yarn.lock" }} @@ -117,6 +137,7 @@ jobs: - persist_to_workspace: root: ~/repo paths: + - packages/components/lib - packages/core/lib - packages/essentials/lib - packages/site/lib @@ -218,13 +239,8 @@ jobs: - attach_workspace: at: ~/repo - - run: - name: Copy Scripts - command: lerna run copy:scripts - - - run: - name: Publish Release - command: alva-release --project packages/core/nccbuild + - build_electron: + args: '' linux: docker: @@ -243,9 +259,8 @@ jobs: name: Copy Scripts command: lerna run copy:scripts - - run: - name: Publish Release - command: alva-release --project packages/core/nccbuild + - build_electron: + args: '' windows: docker: @@ -260,13 +275,8 @@ jobs: - attach_workspace: at: ~/repo - - run: - name: Copy Scripts - command: lerna run copy:scripts - - - run: - name: Publish Release - command: alva-release --project packages/core/nccbuild -- --win + - build_electron: + args: '-- --win' site: docker: @@ -295,7 +305,7 @@ jobs: - run: name: Create static site - command: patternplate build --out=./.static --base=/ + command: NODE_DENV=production patternplate build --out=./.static --base=/ - run: name: Deploy to static hosting diff --git a/package.json b/package.json index 44c6f37f3..56f3b39af 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "lint": "tslint --project . -c tslint.json 'src/**/*.ts'", "precommit": "lint-staged", "watch": "lerna run watch --stream", - "analyse:essentials": "alva analyze --out=packages/essentials/src/analysis.ts --in=packages/essentials/package.json" + "analyze:essentials": "alva analyze --out=packages/essentials/src/analysis.ts --in=packages/essentials/package.json" }, "repository": { "type": "git", @@ -43,6 +43,8 @@ "@meetalva/core": "0.9.2", "@meetalva/site": "0.8.1", "@meetalva/tools": "0.8.1", + "@patternplate/cli": "^3.2.6", + "@patternplate/render-styled-components": "2.5.18", "@types/jest": "22.2.2", "husky": "0.14.3", "jest": "^23.6.0", @@ -51,12 +53,12 @@ "lerna": "^3.6.0", "lint-staged": "7.0.4", "prettier": "1.12.0", - "typescript": "3.2.2", "ts-jest": "^23.10.5", "tslint": "5.11.0", - "tslint-config-prettier": "1.15.0" + "tslint-config-prettier": "1.15.0", + "typescript": "3.2.2" }, - "homepage": "https://meetalva.github.io/", + "homepage": "https://meetalva.io/", "workspaces": [ "packages/*" ], diff --git a/packages/components/index.d.ts b/packages/components/index.d.ts new file mode 100644 index 000000000..f41a696fd --- /dev/null +++ b/packages/components/index.d.ts @@ -0,0 +1 @@ +export * from './lib'; diff --git a/packages/components/index.js b/packages/components/index.js new file mode 100644 index 000000000..bb0a047c4 --- /dev/null +++ b/packages/components/index.js @@ -0,0 +1 @@ +module.exports = require('./lib'); diff --git a/packages/components/package.json b/packages/components/package.json new file mode 100644 index 000000000..2f5f43a93 --- /dev/null +++ b/packages/components/package.json @@ -0,0 +1,39 @@ +{ + "name": "@meetalva/components", + "version": "1.0.0", + "description": "Alva UI components", + "repository": { + "type": "git", + "url": "git+https://github.com/meetalva/alva.git" + }, + "author": { + "email": "hey@meetalva.io", + "name": "Meet Alva Team", + "url": "https://meetalva.io/" + }, + "license": "MIT", + "bugs": { + "url": "https://github.com/meetalva/alva/issues" + }, + "devDependencies": { + "react-testing-library": "5.4.0", + "ts-jest": "^23.10.5", + "ts-loader": "4.4.1" + }, + "dependencies": { + "@types/feather-icons": "4.7.0", + "@types/react": "16.7.18", + "@types/react-dom": "16.0.7", + "@types/react-textarea-autosize": "4.3.3", + "@types/styled-components": "4.0.3", + "feather-icons": "4.7.3", + "react": "16.7.0", + "react-dom": "16.4.2", + "react-feather": "^1.1.5", + "react-select": "2.0.0-beta.6", + "react-textarea-autosize": "7.0.4", + "react-virtualized": "^9.21.0", + "tag-hoc": "1.0.0" + }, + "homepage": "https://meetalva.github.io/" + } diff --git a/packages/core/src/components/add-button/demo.tsx b/packages/components/src/add-button/demo.tsx similarity index 100% rename from packages/core/src/components/add-button/demo.tsx rename to packages/components/src/add-button/demo.tsx diff --git a/packages/core/src/components/add-button/index.tsx b/packages/components/src/add-button/index.tsx similarity index 100% rename from packages/core/src/components/add-button/index.tsx rename to packages/components/src/add-button/index.tsx diff --git a/packages/core/src/components/add-button/pattern.json b/packages/components/src/add-button/pattern.json similarity index 100% rename from packages/core/src/components/add-button/pattern.json rename to packages/components/src/add-button/pattern.json diff --git a/packages/components/src/badge-icon/demo.tsx b/packages/components/src/badge-icon/demo.tsx new file mode 100644 index 000000000..481eaa355 --- /dev/null +++ b/packages/components/src/badge-icon/demo.tsx @@ -0,0 +1,10 @@ +import * as React from 'react'; +import DemoContainer from '../demo-container'; +import { BadgeIcon } from './'; +import { Color } from '../colors'; + +export default (): JSX.Element => ( + + 3 + +); diff --git a/packages/components/src/badge-icon/index.tsx b/packages/components/src/badge-icon/index.tsx new file mode 100644 index 000000000..5b30accf7 --- /dev/null +++ b/packages/components/src/badge-icon/index.tsx @@ -0,0 +1,25 @@ +import * as React from 'react'; +import styled from 'styled-components'; +import { Color } from '../colors'; + +export interface BadgeIconProps { + color: Color; +} + +const StyledBadge = styled.div` + display: flex; + height: 15px; + width: 15px; + padding-top: 1px; + box-sizing: border-box; + justify-content: center; + font-weight: bold; + font-size: 10px; + border-radius: 50%; + background: ${(props: BadgeIconProps) => props.color}; + color: ${Color.White}; +`; + +export const BadgeIcon: React.StatelessComponent = props => { + return {props.children}; +}; diff --git a/packages/components/src/badge-icon/pattern.json b/packages/components/src/badge-icon/pattern.json new file mode 100644 index 000000000..a9ac9085b --- /dev/null +++ b/packages/components/src/badge-icon/pattern.json @@ -0,0 +1,8 @@ +{ + "name": "badge-icon", + "displayName": "Badge Icon", + "description": "Counts e.g. notifications", + "flag": "alpha", + "version": "1.0.0", + "tags": ["atom"] + } diff --git a/packages/core/src/components/button-group/index.tsx b/packages/components/src/button-group/index.tsx similarity index 100% rename from packages/core/src/components/button-group/index.tsx rename to packages/components/src/button-group/index.tsx diff --git a/packages/core/src/components/button/demo.tsx b/packages/components/src/button/demo.tsx similarity index 100% rename from packages/core/src/components/button/demo.tsx rename to packages/components/src/button/demo.tsx diff --git a/packages/core/src/components/button/index.tsx b/packages/components/src/button/index.tsx similarity index 69% rename from packages/core/src/components/button/index.tsx rename to packages/components/src/button/index.tsx index fb66a288b..ffd90e359 100644 --- a/packages/core/src/components/button/index.tsx +++ b/packages/components/src/button/index.tsx @@ -6,6 +6,7 @@ import styled from 'styled-components'; export interface ButtonProps { children?: React.ReactNode; disabled?: boolean; + disabledAppearance?: boolean; /** @description For dark backgrounds */ inverted?: boolean; onClick?: React.MouseEventHandler; @@ -15,9 +16,11 @@ export interface ButtonProps { buttonRole?: ButtonRole; /** @description Spatial weight @default */ size?: ButtonSize; - textColor?: Color; + color?: string; as?: keyof JSX.IntrinsicElements; style?: React.CSSProperties; + className?: string; + type?: 'submit' | 'button'; } export enum ButtonOrder { @@ -53,9 +56,9 @@ const toPadding = (sizes: SpaceSize[]) => sizes.map(s => `${getSpace(s)}px`).joi const BUTTON_PADDING = (props: ButtonProps): string => { switch (props.size) { case ButtonSize.Small: - return toPadding([SpaceSize.XXS, SpaceSize.M]); + return toPadding([SpaceSize.XXS, SpaceSize.XS]); case ButtonSize.Medium: - return toPadding([SpaceSize.XS, SpaceSize.L]); + return toPadding([SpaceSize.XS, SpaceSize.M]); case ButtonSize.Large: default: return toPadding([SpaceSize.M, SpaceSize.XXXL]); @@ -95,40 +98,58 @@ const SizedBaseButton = styled(DecoratedBaseButton)` flex-grow: ${BUTTON_GROW}; `; -const StyledPrimaryButton = styled(SizedBaseButton)` +const primaryFill = (props: ButtonProps) => + props.disabled || props.disabledAppearance ? Color.Grey60 : Color.Blue20; +const primaryFillActive = (props: ButtonProps) => + props.disabled || props.disabledAppearance ? Color.Grey60 : Color.Blue; + +const StyledPrimaryButton = + styled(SizedBaseButton) < + ButtonProps > + ` display: flex; justify-content: center; align-items: center; align-content: center; text-align: center; - background: ${props => (props.inverted ? Color.White : Color.Blue20)}; - border-color: ${props => (props.inverted ? Color.White : Color.Blue20)}; - color: ${props => (props.inverted ? Color.Blue20 : Color.White)}; + background: ${props => (props.inverted ? Color.White : primaryFill(props))}; + border-color: transparent; + color: ${props => (props.inverted ? primaryFill(props) : Color.White)}; &:active { - background: ${props => (props.inverted ? '' : Color.Blue)}; - border-color: ${props => (props.inverted ? '' : Color.Blue)}; + background: ${props => (props.inverted ? '' : primaryFillActive(props))}; + border-color: ${props => (props.inverted ? '' : primaryFillActive(props))}; opacity: ${props => (props.inverted ? 0.8 : 1)}; } `; -const StyledSecondaryButton = styled(SizedBaseButton)` +const secondaryFill = (props: ButtonProps) => (props.color ? props.color : Color.Grey50); +const secondaryFillActive = (props: ButtonProps) => + props.disabled || props.disabledAppearance ? secondaryFill(props) : Color.Black; + +const StyledSecondaryButton = + styled(SizedBaseButton) < + ButtonProps > + ` display: flex; justify-content: center; align-items: center; align-content: center; text-align: center; background: transparent; - border-color: ${Color.Grey50}; - color: ${Color.Grey50}; + border-color: ${secondaryFill}; + color: ${secondaryFill}; &:active { - border-color: ${Color.Black}; - color: ${Color.Black}; + border-color: ${secondaryFillActive}; + color: ${secondaryFillActive}; } `; -const StyledTertiaryButton = styled(SizedBaseButton)` +const StyledTertiaryButton = + styled(SizedBaseButton) < + ButtonProps > + ` display: flex; justify-content: center; align-items: center; @@ -162,20 +183,22 @@ const getComponent = (props: ButtonProps): AnyButton => { }; export const Button: React.StatelessComponent = props => { - const Component = getComponent(props); + const Component = getComponent(props) as any; return ( {props.children} diff --git a/packages/core/src/components/button/pattern.json b/packages/components/src/button/pattern.json similarity index 100% rename from packages/core/src/components/button/pattern.json rename to packages/components/src/button/pattern.json diff --git a/packages/core/src/components/chrome-button/demo.tsx b/packages/components/src/chrome-button/demo.tsx similarity index 100% rename from packages/core/src/components/chrome-button/demo.tsx rename to packages/components/src/chrome-button/demo.tsx diff --git a/packages/core/src/components/chrome-button/index.tsx b/packages/components/src/chrome-button/index.tsx similarity index 100% rename from packages/core/src/components/chrome-button/index.tsx rename to packages/components/src/chrome-button/index.tsx diff --git a/packages/core/src/components/chrome-button/pattern.json b/packages/components/src/chrome-button/pattern.json similarity index 100% rename from packages/core/src/components/chrome-button/pattern.json rename to packages/components/src/chrome-button/pattern.json diff --git a/packages/core/src/components/chrome/demo.tsx b/packages/components/src/chrome/demo.tsx similarity index 100% rename from packages/core/src/components/chrome/demo.tsx rename to packages/components/src/chrome/demo.tsx diff --git a/packages/core/src/components/chrome/index.tsx b/packages/components/src/chrome/index.tsx similarity index 100% rename from packages/core/src/components/chrome/index.tsx rename to packages/components/src/chrome/index.tsx diff --git a/packages/core/src/components/chrome/pattern.json b/packages/components/src/chrome/pattern.json similarity index 100% rename from packages/core/src/components/chrome/pattern.json rename to packages/components/src/chrome/pattern.json diff --git a/packages/core/src/components/colors/index.tsx b/packages/components/src/colors/index.tsx similarity index 83% rename from packages/core/src/components/colors/index.tsx rename to packages/components/src/colors/index.tsx index 0ec954aea..4ad92fa65 100644 --- a/packages/core/src/components/colors/index.tsx +++ b/packages/components/src/colors/index.tsx @@ -1,6 +1,7 @@ export enum Color { Black = 'rgb(1, 12, 22)', - BlackAlpha13 = 'rgba(0, 0, 0, .13)', + BlackAlpha15 = 'rgba(0, 0, 0, .15)', + BlackAlpha50 = 'rgba(0, 0, 0, .5)', Blue = 'rgb(0, 112, 214)', BlueAlpha40 = 'rgba(0, 112, 214, .4)', Blue20 = 'rgb(51, 141, 222)', @@ -8,7 +9,7 @@ export enum Color { Blue60 = 'rgb(153, 198, 239)', Blue80 = 'rgb(212, 226, 242)', Blue90 = 'rgb(222, 236, 252)', - Green = 'rgb(91, 226, 122)', + Green = 'rgb(50, 180, 150)', SignalGreen = 'rgb(31, 163, 133)', Grey10 = 'rgb(30, 32, 36)', Grey20 = 'rgb(52, 61, 69)', @@ -19,6 +20,7 @@ export enum Color { Grey90 = 'rgb(229, 230, 231)', Grey97 = 'rgb(247, 247, 247)', Orange = 'rgb(255, 127, 115)', + Yellow = 'rgb(251, 186, 80)', Red = 'rgb(187, 50, 94)', White = 'rgb(255, 255, 255)', WhiteAlpha75 = 'rgba(255, 255, 255, .75)' diff --git a/packages/core/src/components/colors/pattern.json b/packages/components/src/colors/pattern.json similarity index 100% rename from packages/core/src/components/colors/pattern.json rename to packages/components/src/colors/pattern.json diff --git a/packages/core/src/components/copy/demo.tsx b/packages/components/src/copy/demo.tsx similarity index 100% rename from packages/core/src/components/copy/demo.tsx rename to packages/components/src/copy/demo.tsx diff --git a/packages/core/src/components/copy/index.tsx b/packages/components/src/copy/index.tsx similarity index 85% rename from packages/core/src/components/copy/index.tsx rename to packages/components/src/copy/index.tsx index 9d7de46d0..acd7417bf 100644 --- a/packages/core/src/components/copy/index.tsx +++ b/packages/components/src/copy/index.tsx @@ -7,6 +7,7 @@ export interface CopyProps { textColor?: Color; children?: React.ReactNode; cut?: boolean; + className?: string; } export interface StyledCopyProps { @@ -25,7 +26,7 @@ const StyledCopy = StyledCopyProps > ` margin: 0; - line-height: 1.5; + line-height: 1.4; cursor: default; ${props => (typeof props.size !== 'undefined' ? `font-size: ${props.size}px;` : 'font-size: 12px')}; ${props => (typeof props.textColor !== 'undefined' ? `color: ${props.textColor};` : '')}; @@ -35,7 +36,12 @@ const StyledCopy = `; export const Copy: React.StatelessComponent = props => ( - + {props.children} ); diff --git a/packages/core/src/components/copy/pattern.json b/packages/components/src/copy/pattern.json similarity index 100% rename from packages/core/src/components/copy/pattern.json rename to packages/components/src/copy/pattern.json diff --git a/packages/core/src/components/create-select/create-select.tsx b/packages/components/src/create-select/create-select.tsx similarity index 100% rename from packages/core/src/components/create-select/create-select.tsx rename to packages/components/src/create-select/create-select.tsx diff --git a/packages/core/src/components/create-select/index.tsx b/packages/components/src/create-select/index.tsx similarity index 100% rename from packages/core/src/components/create-select/index.tsx rename to packages/components/src/create-select/index.tsx diff --git a/packages/core/src/components/demo-container.tsx b/packages/components/src/demo-container.tsx similarity index 100% rename from packages/core/src/components/demo-container.tsx rename to packages/components/src/demo-container.tsx diff --git a/packages/core/src/components/drag-area/demo.tsx b/packages/components/src/drag-area/demo.tsx similarity index 100% rename from packages/core/src/components/drag-area/demo.tsx rename to packages/components/src/drag-area/demo.tsx diff --git a/packages/core/src/components/drag-area/drag-area.tsx b/packages/components/src/drag-area/drag-area.tsx similarity index 100% rename from packages/core/src/components/drag-area/drag-area.tsx rename to packages/components/src/drag-area/drag-area.tsx diff --git a/packages/core/src/components/drag-area/index.tsx b/packages/components/src/drag-area/index.tsx similarity index 100% rename from packages/core/src/components/drag-area/index.tsx rename to packages/components/src/drag-area/index.tsx diff --git a/packages/core/src/components/drag-area/pattern.json b/packages/components/src/drag-area/pattern.json similarity index 100% rename from packages/core/src/components/drag-area/pattern.json rename to packages/components/src/drag-area/pattern.json diff --git a/packages/core/src/components/drag-area/target-signal.tsx b/packages/components/src/drag-area/target-signal.tsx similarity index 100% rename from packages/core/src/components/drag-area/target-signal.tsx rename to packages/components/src/drag-area/target-signal.tsx diff --git a/packages/core/src/components/editable-title/demo.tsx b/packages/components/src/editable-title/demo.tsx similarity index 100% rename from packages/core/src/components/editable-title/demo.tsx rename to packages/components/src/editable-title/demo.tsx diff --git a/packages/core/src/components/editable-title/index.tsx b/packages/components/src/editable-title/index.tsx similarity index 100% rename from packages/core/src/components/editable-title/index.tsx rename to packages/components/src/editable-title/index.tsx diff --git a/packages/core/src/components/editable-title/pattern.json b/packages/components/src/editable-title/pattern.json similarity index 100% rename from packages/core/src/components/editable-title/pattern.json rename to packages/components/src/editable-title/pattern.json diff --git a/packages/core/src/components/element-slot/demo.tsx b/packages/components/src/element-slot/demo.tsx similarity index 100% rename from packages/core/src/components/element-slot/demo.tsx rename to packages/components/src/element-slot/demo.tsx diff --git a/packages/core/src/components/element-slot/element-slot.tsx b/packages/components/src/element-slot/element-slot.tsx similarity index 100% rename from packages/core/src/components/element-slot/element-slot.tsx rename to packages/components/src/element-slot/element-slot.tsx diff --git a/packages/core/src/components/element-slot/index.tsx b/packages/components/src/element-slot/index.tsx similarity index 100% rename from packages/core/src/components/element-slot/index.tsx rename to packages/components/src/element-slot/index.tsx diff --git a/packages/core/src/components/element-slot/pattern.json b/packages/components/src/element-slot/pattern.json similarity index 100% rename from packages/core/src/components/element-slot/pattern.json rename to packages/components/src/element-slot/pattern.json diff --git a/packages/core/src/components/element/demo.tsx b/packages/components/src/element/demo.tsx similarity index 100% rename from packages/core/src/components/element/demo.tsx rename to packages/components/src/element/demo.tsx diff --git a/packages/core/src/components/element/element.tsx b/packages/components/src/element/element.tsx similarity index 100% rename from packages/core/src/components/element/element.tsx rename to packages/components/src/element/element.tsx diff --git a/packages/core/src/components/element/index.tsx b/packages/components/src/element/index.tsx similarity index 100% rename from packages/core/src/components/element/index.tsx rename to packages/components/src/element/index.tsx diff --git a/packages/core/src/components/element/pattern.json b/packages/components/src/element/pattern.json similarity index 100% rename from packages/core/src/components/element/pattern.json rename to packages/components/src/element/pattern.json diff --git a/packages/core/src/components/empty-state/demo.tsx b/packages/components/src/empty-state/demo.tsx similarity index 100% rename from packages/core/src/components/empty-state/demo.tsx rename to packages/components/src/empty-state/demo.tsx diff --git a/packages/core/src/components/empty-state/index.tsx b/packages/components/src/empty-state/index.tsx similarity index 98% rename from packages/core/src/components/empty-state/index.tsx rename to packages/components/src/empty-state/index.tsx index c25d0f76f..912a0a9f1 100644 --- a/packages/core/src/components/empty-state/index.tsx +++ b/packages/components/src/empty-state/index.tsx @@ -16,7 +16,7 @@ const StyledEmptyState = styled.div` text-align: center; padding: ${getSpace(SpaceSize.XXXL)}px ${getSpace(SpaceSize.XXXL)}px ${getSpace(SpaceSize.XXXL + SpaceSize.XXL)}px; - height: 100%; + min-height: 100%; display: flex; flex-direction: column; justify-content: center; diff --git a/packages/core/src/components/empty-state/pattern.json b/packages/components/src/empty-state/pattern.json similarity index 100% rename from packages/core/src/components/empty-state/pattern.json rename to packages/components/src/empty-state/pattern.json diff --git a/packages/components/src/flex.tsx b/packages/components/src/flex.tsx new file mode 100644 index 000000000..c260ba8b1 --- /dev/null +++ b/packages/components/src/flex.tsx @@ -0,0 +1,56 @@ +import * as React from 'react'; + +export interface FlexProps { + flex?: boolean; + flexDirection?: FlexDirection; + justifyContent?: FlexJustifyContent; + alignItems?: FlexAlignItems; + flexWrap?: boolean; + flexBasis?: number; + flexGrow?: number; + flexShrink?: number; + children?: React.ReactNode; + style?: React.CSSProperties; +} + +export enum FlexDirection { + Row = 'row', + Column = 'column' +} + +export enum FlexJustifyContent { + FlexStart = 'flex-start', + Center = 'center', + FlexEnd = 'flex-end', + SpaceBetween = 'space-between', + SpaceAround = 'space-around', + SpaceEvenly = 'space-evenly' +} + +export enum FlexAlignItems { + FlexStart = 'flex-start', + Center = 'center', + FlexEnd = 'flex-end', + Stretch = 'stretch', + Baseline = 'baseline' +} + +export const Flex: React.SFC = props => { + return ( +
+ {props.children} +
+ ); +}; diff --git a/packages/core/src/components/fonts/index.tsx b/packages/components/src/fonts/index.tsx similarity index 100% rename from packages/core/src/components/fonts/index.tsx rename to packages/components/src/fonts/index.tsx diff --git a/packages/core/src/components/fonts/pattern.json b/packages/components/src/fonts/pattern.json similarity index 100% rename from packages/core/src/components/fonts/pattern.json rename to packages/components/src/fonts/pattern.json diff --git a/packages/core/src/components/global-styles.tsx b/packages/components/src/global-styles.tsx similarity index 100% rename from packages/core/src/components/global-styles.tsx rename to packages/components/src/global-styles.tsx diff --git a/packages/core/src/components/headline/demo.tsx b/packages/components/src/headline/demo.tsx similarity index 100% rename from packages/core/src/components/headline/demo.tsx rename to packages/components/src/headline/demo.tsx diff --git a/packages/core/src/components/headline/index.tsx b/packages/components/src/headline/index.tsx similarity index 100% rename from packages/core/src/components/headline/index.tsx rename to packages/components/src/headline/index.tsx diff --git a/packages/core/src/components/headline/pattern.json b/packages/components/src/headline/pattern.json similarity index 100% rename from packages/core/src/components/headline/pattern.json rename to packages/components/src/headline/pattern.json diff --git a/packages/core/src/components/icons/demo.tsx b/packages/components/src/icons/demo.tsx similarity index 100% rename from packages/core/src/components/icons/demo.tsx rename to packages/components/src/icons/demo.tsx diff --git a/packages/core/src/components/icons/index.tsx b/packages/components/src/icons/index.tsx similarity index 100% rename from packages/core/src/components/icons/index.tsx rename to packages/components/src/icons/index.tsx diff --git a/packages/core/src/components/icons/pattern.json b/packages/components/src/icons/pattern.json similarity index 100% rename from packages/core/src/components/icons/pattern.json rename to packages/components/src/icons/pattern.json diff --git a/packages/core/src/components/image/demo.tsx b/packages/components/src/image/demo.tsx similarity index 100% rename from packages/core/src/components/image/demo.tsx rename to packages/components/src/image/demo.tsx diff --git a/packages/core/src/components/image/index.tsx b/packages/components/src/image/index.tsx similarity index 100% rename from packages/core/src/components/image/index.tsx rename to packages/components/src/image/index.tsx diff --git a/packages/core/src/components/image/pattern.json b/packages/components/src/image/pattern.json similarity index 100% rename from packages/core/src/components/image/pattern.json rename to packages/components/src/image/pattern.json diff --git a/packages/core/src/components/index.ts b/packages/components/src/index.ts similarity index 89% rename from packages/core/src/components/index.ts rename to packages/components/src/index.ts index 0172ba65f..7d92bdbf2 100644 --- a/packages/core/src/components/index.ts +++ b/packages/components/src/index.ts @@ -1,4 +1,5 @@ export * from './add-button'; +export * from './badge-icon'; export * from './button'; export * from './button-group'; export * from './chrome'; @@ -11,16 +12,19 @@ export * from './editable-title'; export * from './element'; export * from './element-slot'; export * from './empty-state'; +export * from './flex'; export * from './fonts'; export * from './global-styles'; export * from './headline'; export * from './icons'; +export * from './input-button'; export * from './item'; export * from './image'; export * from './layout'; export * from './layout-switch'; -export * from './led/led'; +export * from './library-box'; export * from './link'; +export * from './link-icon'; export * from './list'; export * from './overlay'; export * from './page-tile'; @@ -41,6 +45,7 @@ export * from './search'; export * from './select'; export * from './space'; export * from './splash-screen'; +export * from './tab'; export * from './tab-switch'; export * from './teaser'; export * from './update-badge'; diff --git a/packages/components/src/input-button/index.tsx b/packages/components/src/input-button/index.tsx new file mode 100644 index 000000000..b75a80bcb --- /dev/null +++ b/packages/components/src/input-button/index.tsx @@ -0,0 +1,51 @@ +import * as React from 'react'; +import styled from 'styled-components'; +import { Button, ButtonSize } from '../button'; +import { PropertyInputStyles } from '../property-input'; + +const StyledWrapper = styled.div` + position: relative; + width: 100%; + display: flex; +`; + +const StyledInput = styled.input` + ${PropertyInputStyles}; + border-top-right-radius: 0; + border-bottom-right-radius: 0; +`; + +const StyledButton = styled(Button)` + flex-shrink: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +`; + +export interface InputButtonProps { + className?: string; + onBlur?: React.FocusEventHandler; + onChange?: React.ChangeEventHandler; + onSubmit?: React.FormEventHandler; + placeholder?: string; + value?: string; + isValid: () => boolean; +} + +export const InputButton: React.SFC = props => ( + + + + {props.children} + + +); diff --git a/packages/core/src/components/item/index.ts b/packages/components/src/item/index.ts similarity index 100% rename from packages/core/src/components/item/index.ts rename to packages/components/src/item/index.ts diff --git a/packages/core/src/components/item/item.styles.ts b/packages/components/src/item/item.styles.ts similarity index 100% rename from packages/core/src/components/item/item.styles.ts rename to packages/components/src/item/item.styles.ts diff --git a/packages/core/src/components/item/item.tsx b/packages/components/src/item/item.tsx similarity index 100% rename from packages/core/src/components/item/item.tsx rename to packages/components/src/item/item.tsx diff --git a/packages/core/src/components/layout-switch/index.tsx b/packages/components/src/layout-switch/index.tsx similarity index 100% rename from packages/core/src/components/layout-switch/index.tsx rename to packages/components/src/layout-switch/index.tsx diff --git a/packages/core/src/components/layout-switch/layout-switch.tsx b/packages/components/src/layout-switch/layout-switch.tsx similarity index 100% rename from packages/core/src/components/layout-switch/layout-switch.tsx rename to packages/components/src/layout-switch/layout-switch.tsx diff --git a/packages/core/src/components/layout-switch/pattern.json b/packages/components/src/layout-switch/pattern.json similarity index 100% rename from packages/core/src/components/layout-switch/pattern.json rename to packages/components/src/layout-switch/pattern.json diff --git a/packages/core/src/components/layout/demo.tsx b/packages/components/src/layout/demo.tsx similarity index 100% rename from packages/core/src/components/layout/demo.tsx rename to packages/components/src/layout/demo.tsx diff --git a/packages/core/src/components/layout/index.tsx b/packages/components/src/layout/index.tsx similarity index 98% rename from packages/core/src/components/layout/index.tsx rename to packages/components/src/layout/index.tsx index f09d4123c..dffaecf38 100644 --- a/packages/core/src/components/layout/index.tsx +++ b/packages/components/src/layout/index.tsx @@ -76,7 +76,7 @@ export const Layout = styled.div` flex-wrap: ${(props: LayoutProps) => (props.wrap === LayoutWrap.Wrap ? 'wrap' : 'nowrap')}; border-width: 0; border-style: solid; - border-color: ${Color.BlackAlpha13}; + border-color: ${Color.BlackAlpha15}; border-right-width: ${props => props.side === LayoutSide.Left && props.border === LayoutBorder.Side ? 1 : 0}px; border-left-width: ${props => diff --git a/packages/core/src/components/layout/pattern.json b/packages/components/src/layout/pattern.json similarity index 100% rename from packages/core/src/components/layout/pattern.json rename to packages/components/src/layout/pattern.json diff --git a/packages/components/src/library-box/demo.tsx b/packages/components/src/library-box/demo.tsx new file mode 100644 index 000000000..aeaaeafd2 --- /dev/null +++ b/packages/components/src/library-box/demo.tsx @@ -0,0 +1,31 @@ +import { Color } from '../colors'; +import DemoContainer from '../demo-container'; +import { LibraryBox, LibraryBoxState, LibraryBoxSize } from './index'; +import { Button, ButtonOrder, ButtonSize } from '../button'; +import * as React from 'react'; + +const LibraryBoxDemo: React.StatelessComponent = (): JSX.Element => ( + + + Already installed + + } + version="v1" + /> + +); + +export default LibraryBoxDemo; diff --git a/packages/components/src/library-box/index.tsx b/packages/components/src/library-box/index.tsx new file mode 100644 index 000000000..3e942f402 --- /dev/null +++ b/packages/components/src/library-box/index.tsx @@ -0,0 +1 @@ +export * from './library-box'; diff --git a/packages/components/src/library-box/library-box.tsx b/packages/components/src/library-box/library-box.tsx new file mode 100644 index 000000000..0953bf952 --- /dev/null +++ b/packages/components/src/library-box/library-box.tsx @@ -0,0 +1,155 @@ +// tslint:disable-next-line:no-submodule-imports +import * as ReactDOMServer from 'react-dom/server'; +import * as React from 'react'; +import styled from 'styled-components'; +import { Color } from '../colors'; +import { Headline } from '../headline'; +import { Copy, CopySize } from '../copy'; +import { getSpace, SpaceSize, Space } from '../space'; +import { LibraryImage } from './library-image'; + +export enum LibraryBoxState { + Idle, + Progress +} + +export enum LibraryBoxSize { + Medium, + Large +} + +export interface LibraryBoxProps { + color?: string; + image?: string; + name?: string; + description?: string; + details?: React.ReactNode; + install?: React.ReactNode; + version?: React.ReactNode; + state: LibraryBoxState; + size: LibraryBoxSize; +} + +const StyledBox = + styled.div < + LibraryBoxProps > + ` + width: 348px; + background: ${props => (props.color ? props.color : Color.Grey20)}; + border-radius: 6px; + box-shadow: 0 0 24px 0 ${Color.BlackAlpha15}; + color: ${Color.White}; + text-align: left; + margin: ${getSpace(SpaceSize.S)}px ${getSpace(SpaceSize.XS)}px; + user-select: none; + transition: box-shadow 0.2s; + overflow: hidden; +`; + +const IMAGE = (props: LibraryBoxProps) => (props.image ? props.image : toDataUrl()); + +const StyledImage = styled.div` + height: 140px; + width: 100%; + background-image: url('${IMAGE}'); + background-size: cover; + background-position: center; + border-radius: 6px 6px 0 0; +`; + +const StyledDetails = styled.div` + min-height: 200px; + display: flex; + flex-direction: column; + justify-content: space-between; + box-sizing: border-box; +`; + +const Translucent = styled.div` + opacity: 0.75; +`; + +const StyledInstallContainer = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +`; + +const StyledTop = styled.div` + padding: ${getSpace(SpaceSize.L)}px ${getSpace(SpaceSize.XL)}px 0; +`; + +const Loader = styled.div` + width: 100%; + height: 2px; + overflow: hidden; + position: absolute; + left: 0; + top: 0; + + &:after { + content: ''; + display: block; + width: 20px; + height: 100%; + background: ${Color.White}; + animation: load 1.5s infinite ease; + transform: scaleX(1); + transform-origin: 0 0; + } + + @keyframes load { + 0% { + margin-left: -20px; + } + 50% { + transform: scaleX(5); + } + 100% { + margin-left: 100%; + } + } +`; + +const StyledBottom = styled.div` + position: relative; + padding: 0 ${getSpace(SpaceSize.XL)}px; + border-radius: 0 0 6px 6px; +`; + +export const LibraryBox: React.StatelessComponent = (props): JSX.Element => ( + + {props.size === LibraryBoxSize.Large && ( + + )} + + + {props.name} + + + {props.description} + + {props.details} + + + + + {props.state === LibraryBoxState.Progress && } + + + {props.install} + + {props.version} + + + + + + +); + +function toDataUrl(element: JSX.Element): string { + const svg = ReactDOMServer.renderToString(element); + return `data:image/svg+xml;utf8,${svg}`; +} diff --git a/packages/components/src/library-box/library-image.tsx b/packages/components/src/library-box/library-image.tsx new file mode 100644 index 000000000..32841edc5 --- /dev/null +++ b/packages/components/src/library-box/library-image.tsx @@ -0,0 +1,75 @@ +import * as React from 'react'; + +export interface LibraryImageProps { + bg?: string; + fg?: string; +} + +export const LibraryImage: React.SFC = props => { + const bg = props.bg || '#1E2024'; + const fg = props.fg || '#47525B'; + + return ( + + + + + + + + + + + + + + + + ); +}; diff --git a/packages/components/src/library-box/pattern.json b/packages/components/src/library-box/pattern.json new file mode 100644 index 000000000..cd192bf1b --- /dev/null +++ b/packages/components/src/library-box/pattern.json @@ -0,0 +1,8 @@ +{ + "name": "library-box", + "displayName": "Library Box", + "description": "Represent a library", + "flag": "alpha", + "version": "1.0.0", + "tags": ["atom"] + } diff --git a/packages/components/src/link-icon/demo.tsx b/packages/components/src/link-icon/demo.tsx new file mode 100644 index 000000000..523295792 --- /dev/null +++ b/packages/components/src/link-icon/demo.tsx @@ -0,0 +1,15 @@ +import { Color } from '../colors'; +import DemoContainer from '../demo-container'; +import { LinkIcon } from './index'; +import * as React from 'react'; +import { CopySize } from '../copy'; + +const LinkIconDemo: React.StatelessComponent = (): JSX.Element => ( + + + Link + + +); + +export default LinkIconDemo; diff --git a/packages/components/src/link-icon/index.tsx b/packages/components/src/link-icon/index.tsx new file mode 100644 index 000000000..02a358170 --- /dev/null +++ b/packages/components/src/link-icon/index.tsx @@ -0,0 +1,53 @@ +import { Color } from '../colors'; +import { fonts } from '../fonts'; +import * as React from 'react'; +import styled from 'styled-components'; +import { Copy, CopySize } from '../copy'; +import { IconSize } from '../icons'; +import { Space, SpaceSize } from '../space'; +import * as ColorTool from 'color'; +const Icon = require('react-feather'); + +export interface LinkIconProps { + children?: React.ReactNode; + color?: Color; + icon: string; + onClick?: React.MouseEventHandler; + size: CopySize; + rotate?: boolean; +} + +const StyledLink = styled.div` + display: flex; + color: ${(props: LinkIconProps) => props.color}; + ${(props: LinkIconProps) => + props.size === CopySize.M && + ` + align-items: center; + `}; + + &:active { + color: ${new ColorTool((props: LinkIconProps) => props.color).darken(0.25).toString()}; + } +`; + +export const LinkIcon: React.SFC = props => { + const IconImage = Icon.hasOwnProperty(props.icon) ? Icon[props.icon] : Icon.Box; + + return ( + + + + {props.children} + + ); +}; + +function getIconSize(copySize: CopySize): IconSize { + switch (copySize) { + case CopySize.S: + return IconSize.XS; + case CopySize.M: + return IconSize.S; + } +} diff --git a/packages/components/src/link-icon/pattern.json b/packages/components/src/link-icon/pattern.json new file mode 100644 index 000000000..d1d696205 --- /dev/null +++ b/packages/components/src/link-icon/pattern.json @@ -0,0 +1,7 @@ +{ + "name": "link-icon", + "displayName": "Link with Icon", + "flag": "alpha", + "version": "1.0.0", + "tags": ["link", "link-icon"] + } diff --git a/packages/core/src/components/link/demo.tsx b/packages/components/src/link/demo.tsx similarity index 100% rename from packages/core/src/components/link/demo.tsx rename to packages/components/src/link/demo.tsx diff --git a/packages/core/src/components/link/index.tsx b/packages/components/src/link/index.tsx similarity index 100% rename from packages/core/src/components/link/index.tsx rename to packages/components/src/link/index.tsx diff --git a/packages/core/src/components/link/pattern.json b/packages/components/src/link/pattern.json similarity index 100% rename from packages/core/src/components/link/pattern.json rename to packages/components/src/link/pattern.json diff --git a/packages/core/src/components/list/demo.tsx b/packages/components/src/list/demo.tsx similarity index 100% rename from packages/core/src/components/list/demo.tsx rename to packages/components/src/list/demo.tsx diff --git a/packages/core/src/components/list/index.tsx b/packages/components/src/list/index.tsx similarity index 100% rename from packages/core/src/components/list/index.tsx rename to packages/components/src/list/index.tsx diff --git a/packages/core/src/components/list/pattern.json b/packages/components/src/list/pattern.json similarity index 100% rename from packages/core/src/components/list/pattern.json rename to packages/components/src/list/pattern.json diff --git a/packages/core/src/components/overlay/demo.tsx b/packages/components/src/overlay/demo.tsx similarity index 100% rename from packages/core/src/components/overlay/demo.tsx rename to packages/components/src/overlay/demo.tsx diff --git a/packages/core/src/components/overlay/index.tsx b/packages/components/src/overlay/index.tsx similarity index 100% rename from packages/core/src/components/overlay/index.tsx rename to packages/components/src/overlay/index.tsx diff --git a/packages/core/src/components/overlay/pattern.json b/packages/components/src/overlay/pattern.json similarity index 100% rename from packages/core/src/components/overlay/pattern.json rename to packages/components/src/overlay/pattern.json diff --git a/packages/core/src/components/page-tile/demo.tsx b/packages/components/src/page-tile/demo.tsx similarity index 100% rename from packages/core/src/components/page-tile/demo.tsx rename to packages/components/src/page-tile/demo.tsx diff --git a/packages/core/src/components/page-tile/index.tsx b/packages/components/src/page-tile/index.tsx similarity index 100% rename from packages/core/src/components/page-tile/index.tsx rename to packages/components/src/page-tile/index.tsx diff --git a/packages/core/src/components/page-tile/pattern.json b/packages/components/src/page-tile/pattern.json similarity index 100% rename from packages/core/src/components/page-tile/pattern.json rename to packages/components/src/page-tile/pattern.json diff --git a/packages/core/src/components/panes/element-pane/index.tsx b/packages/components/src/panes/element-pane/index.tsx similarity index 100% rename from packages/core/src/components/panes/element-pane/index.tsx rename to packages/components/src/panes/element-pane/index.tsx diff --git a/packages/core/src/components/panes/index.ts b/packages/components/src/panes/index.ts similarity index 100% rename from packages/core/src/components/panes/index.ts rename to packages/components/src/panes/index.ts diff --git a/packages/core/src/components/panes/patterns-pane/index.tsx b/packages/components/src/panes/patterns-pane/index.tsx similarity index 93% rename from packages/core/src/components/panes/patterns-pane/index.tsx rename to packages/components/src/panes/patterns-pane/index.tsx index 1ea3147f9..b1bbeb008 100644 --- a/packages/core/src/components/panes/patterns-pane/index.tsx +++ b/packages/components/src/panes/patterns-pane/index.tsx @@ -9,7 +9,7 @@ const StyledPatternsPane = styled.div` padding: 0 ${getSpace(SpaceSize.M)}px; overflow-y: auto; height: 100%; - border-top: 1px solid ${Color.BlackAlpha13}; + border-top: 1px solid ${Color.BlackAlpha15}; @media screen and (-webkit-min-device-pixel-ratio: 2) { border-top-width: 0.5px; diff --git a/packages/core/src/components/panes/preview-pane/index.tsx b/packages/components/src/panes/preview-pane/index.tsx similarity index 100% rename from packages/core/src/components/panes/preview-pane/index.tsx rename to packages/components/src/panes/preview-pane/index.tsx diff --git a/packages/core/src/components/panes/project-pane/index.tsx b/packages/components/src/panes/project-pane/index.tsx similarity index 100% rename from packages/core/src/components/panes/project-pane/index.tsx rename to packages/components/src/panes/project-pane/index.tsx diff --git a/packages/core/src/components/panes/property-pane/index.tsx b/packages/components/src/panes/property-pane/index.tsx similarity index 100% rename from packages/core/src/components/panes/property-pane/index.tsx rename to packages/components/src/panes/property-pane/index.tsx diff --git a/packages/core/src/components/pattern-list/demo.tsx b/packages/components/src/pattern-list/demo.tsx similarity index 100% rename from packages/core/src/components/pattern-list/demo.tsx rename to packages/components/src/pattern-list/demo.tsx diff --git a/packages/core/src/components/pattern-list/index.tsx b/packages/components/src/pattern-list/index.tsx similarity index 100% rename from packages/core/src/components/pattern-list/index.tsx rename to packages/components/src/pattern-list/index.tsx diff --git a/packages/core/src/components/pattern-list/pattern.json b/packages/components/src/pattern-list/pattern.json similarity index 100% rename from packages/core/src/components/pattern-list/pattern.json rename to packages/components/src/pattern-list/pattern.json diff --git a/packages/core/src/components/property-box/index.tsx b/packages/components/src/property-box/index.tsx similarity index 100% rename from packages/core/src/components/property-box/index.tsx rename to packages/components/src/property-box/index.tsx diff --git a/packages/core/src/components/property-box/pattern.json b/packages/components/src/property-box/pattern.json similarity index 100% rename from packages/core/src/components/property-box/pattern.json rename to packages/components/src/property-box/pattern.json diff --git a/packages/core/src/components/property-details/demo.tsx b/packages/components/src/property-details/demo.tsx similarity index 100% rename from packages/core/src/components/property-details/demo.tsx rename to packages/components/src/property-details/demo.tsx diff --git a/packages/core/src/components/property-details/index.tsx b/packages/components/src/property-details/index.tsx similarity index 100% rename from packages/core/src/components/property-details/index.tsx rename to packages/components/src/property-details/index.tsx diff --git a/packages/core/src/components/property-details/pattern.json b/packages/components/src/property-details/pattern.json similarity index 100% rename from packages/core/src/components/property-details/pattern.json rename to packages/components/src/property-details/pattern.json diff --git a/packages/core/src/components/property-input/index.tsx b/packages/components/src/property-input/index.tsx similarity index 94% rename from packages/core/src/components/property-input/index.tsx rename to packages/components/src/property-input/index.tsx index b5d907073..dbbeade64 100644 --- a/packages/core/src/components/property-input/index.tsx +++ b/packages/components/src/property-input/index.tsx @@ -6,9 +6,6 @@ import styled, { css } from 'styled-components'; import { ChevronUp, ChevronDown } from 'react-feather'; import { IconSize } from '../icons'; -const INPUT_PADDING_RIGHT = (props: PropertyInputProps) => - props.type && props.type === PropertyInputType.Number ? 0 : getSpace(SpaceSize.S); - export const PropertyInputStyles = css` display: block; box-sizing: border-box; @@ -16,7 +13,7 @@ export const PropertyInputStyles = css` height: 30px; border: 0.5px solid ${Color.Grey90}; padding-top: ${getSpace(SpaceSize.XS)}px; - padding-right: ${INPUT_PADDING_RIGHT}px; + padding-right: ${getSpace(SpaceSize.S)}px; padding-bottom: ${getSpace(SpaceSize.XS)}px; padding-left: ${getSpace(SpaceSize.XS + SpaceSize.XXS)}px; @media screen and (-webkit-min-device-pixel-ratio: 2) { @@ -100,6 +97,8 @@ const StyledClicker = styled.div` const StyledInput = styled.input` ${PropertyInputStyles}; + ${(props: PropertyInputProps) => + props.type && props.type === PropertyInputType.Number && 'padding-right: 0;'}; `; export interface PropertyInputProps { diff --git a/packages/core/src/components/property-item-asset/demo.tsx b/packages/components/src/property-item-asset/demo.tsx similarity index 100% rename from packages/core/src/components/property-item-asset/demo.tsx rename to packages/components/src/property-item-asset/demo.tsx diff --git a/packages/core/src/components/property-item-asset/index.tsx b/packages/components/src/property-item-asset/index.tsx similarity index 100% rename from packages/core/src/components/property-item-asset/index.tsx rename to packages/components/src/property-item-asset/index.tsx diff --git a/packages/core/src/components/property-item-asset/pattern.json b/packages/components/src/property-item-asset/pattern.json similarity index 100% rename from packages/core/src/components/property-item-asset/pattern.json rename to packages/components/src/property-item-asset/pattern.json diff --git a/packages/core/src/components/property-item-boolean/demo.tsx b/packages/components/src/property-item-boolean/demo.tsx similarity index 100% rename from packages/core/src/components/property-item-boolean/demo.tsx rename to packages/components/src/property-item-boolean/demo.tsx diff --git a/packages/core/src/components/property-item-boolean/index.tsx b/packages/components/src/property-item-boolean/index.tsx similarity index 100% rename from packages/core/src/components/property-item-boolean/index.tsx rename to packages/components/src/property-item-boolean/index.tsx diff --git a/packages/core/src/components/property-item-boolean/pattern.json b/packages/components/src/property-item-boolean/pattern.json similarity index 100% rename from packages/core/src/components/property-item-boolean/pattern.json rename to packages/components/src/property-item-boolean/pattern.json diff --git a/packages/core/src/components/property-item-number/demo.tsx b/packages/components/src/property-item-number/demo.tsx similarity index 100% rename from packages/core/src/components/property-item-number/demo.tsx rename to packages/components/src/property-item-number/demo.tsx diff --git a/packages/core/src/components/property-item-number/index.tsx b/packages/components/src/property-item-number/index.tsx similarity index 100% rename from packages/core/src/components/property-item-number/index.tsx rename to packages/components/src/property-item-number/index.tsx diff --git a/packages/core/src/components/property-item-number/pattern.json b/packages/components/src/property-item-number/pattern.json similarity index 100% rename from packages/core/src/components/property-item-number/pattern.json rename to packages/components/src/property-item-number/pattern.json diff --git a/packages/core/src/components/property-item-number/property-item-number.test.tsx b/packages/components/src/property-item-number/property-item-number.test.tsx similarity index 100% rename from packages/core/src/components/property-item-number/property-item-number.test.tsx rename to packages/components/src/property-item-number/property-item-number.test.tsx diff --git a/packages/core/src/components/property-item-number/property-item-number.tsx b/packages/components/src/property-item-number/property-item-number.tsx similarity index 100% rename from packages/core/src/components/property-item-number/property-item-number.tsx rename to packages/components/src/property-item-number/property-item-number.tsx diff --git a/packages/core/src/components/property-item-radiogroup/demo.tsx b/packages/components/src/property-item-radiogroup/demo.tsx similarity index 100% rename from packages/core/src/components/property-item-radiogroup/demo.tsx rename to packages/components/src/property-item-radiogroup/demo.tsx diff --git a/packages/core/src/components/property-item-radiogroup/index.tsx b/packages/components/src/property-item-radiogroup/index.tsx similarity index 100% rename from packages/core/src/components/property-item-radiogroup/index.tsx rename to packages/components/src/property-item-radiogroup/index.tsx diff --git a/packages/core/src/components/property-item-radiogroup/pattern.json b/packages/components/src/property-item-radiogroup/pattern.json similarity index 100% rename from packages/core/src/components/property-item-radiogroup/pattern.json rename to packages/components/src/property-item-radiogroup/pattern.json diff --git a/packages/core/src/components/property-item-select/demo.tsx b/packages/components/src/property-item-select/demo.tsx similarity index 100% rename from packages/core/src/components/property-item-select/demo.tsx rename to packages/components/src/property-item-select/demo.tsx diff --git a/packages/core/src/components/property-item-select/index.tsx b/packages/components/src/property-item-select/index.tsx similarity index 100% rename from packages/core/src/components/property-item-select/index.tsx rename to packages/components/src/property-item-select/index.tsx diff --git a/packages/core/src/components/property-item-select/pattern.json b/packages/components/src/property-item-select/pattern.json similarity index 100% rename from packages/core/src/components/property-item-select/pattern.json rename to packages/components/src/property-item-select/pattern.json diff --git a/packages/core/src/components/property-item-string/demo.tsx b/packages/components/src/property-item-string/demo.tsx similarity index 100% rename from packages/core/src/components/property-item-string/demo.tsx rename to packages/components/src/property-item-string/demo.tsx diff --git a/packages/core/src/components/property-item-string/index.tsx b/packages/components/src/property-item-string/index.tsx similarity index 94% rename from packages/core/src/components/property-item-string/index.tsx rename to packages/components/src/property-item-string/index.tsx index 2c667203b..807800d05 100644 --- a/packages/core/src/components/property-item-string/index.tsx +++ b/packages/components/src/property-item-string/index.tsx @@ -19,7 +19,7 @@ export interface PropertyItemStringProps { } // tslint:disable-next-line:no-any -export const LinkIcon: StyledComponentClass<{}, {}, any> = styled(Link2)` +export const PropertyLinkIcon: StyledComponentClass<{}, {}, any> = styled(Link2)` position: absolute; top: 15px; transform: translateY(-50%); diff --git a/packages/core/src/components/property-item-string/pattern.json b/packages/components/src/property-item-string/pattern.json similarity index 100% rename from packages/core/src/components/property-item-string/pattern.json rename to packages/components/src/property-item-string/pattern.json diff --git a/packages/core/src/components/property-item/index.tsx b/packages/components/src/property-item/index.tsx similarity index 100% rename from packages/core/src/components/property-item/index.tsx rename to packages/components/src/property-item/index.tsx diff --git a/packages/core/src/components/property-item/property-description.tsx b/packages/components/src/property-item/property-description.tsx similarity index 100% rename from packages/core/src/components/property-item/property-description.tsx rename to packages/components/src/property-item/property-description.tsx diff --git a/packages/core/src/components/property-item/property-item.tsx b/packages/components/src/property-item/property-item.tsx similarity index 100% rename from packages/core/src/components/property-item/property-item.tsx rename to packages/components/src/property-item/property-item.tsx diff --git a/packages/core/src/components/property-item/property-label.tsx b/packages/components/src/property-item/property-label.tsx similarity index 100% rename from packages/core/src/components/property-item/property-label.tsx rename to packages/components/src/property-item/property-label.tsx diff --git a/packages/core/src/components/property-reference/index.tsx b/packages/components/src/property-reference/index.tsx similarity index 100% rename from packages/core/src/components/property-reference/index.tsx rename to packages/components/src/property-reference/index.tsx diff --git a/packages/core/src/components/search/demo.tsx b/packages/components/src/search/demo.tsx similarity index 100% rename from packages/core/src/components/search/demo.tsx rename to packages/components/src/search/demo.tsx diff --git a/packages/core/src/components/search/index.tsx b/packages/components/src/search/index.tsx similarity index 100% rename from packages/core/src/components/search/index.tsx rename to packages/components/src/search/index.tsx diff --git a/packages/core/src/components/search/pattern.json b/packages/components/src/search/pattern.json similarity index 100% rename from packages/core/src/components/search/pattern.json rename to packages/components/src/search/pattern.json diff --git a/packages/core/src/components/select/demo.tsx b/packages/components/src/select/demo.tsx similarity index 100% rename from packages/core/src/components/select/demo.tsx rename to packages/components/src/select/demo.tsx diff --git a/packages/core/src/components/select/index.tsx b/packages/components/src/select/index.tsx similarity index 100% rename from packages/core/src/components/select/index.tsx rename to packages/components/src/select/index.tsx diff --git a/packages/core/src/components/select/pattern.json b/packages/components/src/select/pattern.json similarity index 100% rename from packages/core/src/components/select/pattern.json rename to packages/components/src/select/pattern.json diff --git a/packages/core/src/components/space/demo.tsx b/packages/components/src/space/demo.tsx similarity index 100% rename from packages/core/src/components/space/demo.tsx rename to packages/components/src/space/demo.tsx diff --git a/packages/core/src/components/space/index.tsx b/packages/components/src/space/index.tsx similarity index 92% rename from packages/core/src/components/space/index.tsx rename to packages/components/src/space/index.tsx index 867480c9c..fd183b381 100644 --- a/packages/core/src/components/space/index.tsx +++ b/packages/components/src/space/index.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import styled from 'styled-components'; export interface SpaceProps { + as?: string; children?: React.ReactNode; className?: string; inside?: boolean; @@ -10,6 +11,7 @@ export interface SpaceProps { sizeLeft?: SpaceSize; sizeRight?: SpaceSize; sizeTop?: SpaceSize; + style?: React.CSSProperties; } export interface StyledSpaceProps { @@ -104,7 +106,13 @@ export const Space: React.StatelessComponent = props => { ); return ( - + {props.children} ); diff --git a/packages/core/src/components/space/pattern.json b/packages/components/src/space/pattern.json similarity index 100% rename from packages/core/src/components/space/pattern.json rename to packages/components/src/space/pattern.json diff --git a/packages/core/src/components/splash-screen/index.tsx b/packages/components/src/splash-screen/index.tsx similarity index 100% rename from packages/core/src/components/splash-screen/index.tsx rename to packages/components/src/splash-screen/index.tsx diff --git a/packages/core/src/components/splash-screen/pattern.json b/packages/components/src/splash-screen/pattern.json similarity index 100% rename from packages/core/src/components/splash-screen/pattern.json rename to packages/components/src/splash-screen/pattern.json diff --git a/packages/core/src/components/splash-screen/splash-screen.styles.ts b/packages/components/src/splash-screen/splash-screen.styles.ts similarity index 100% rename from packages/core/src/components/splash-screen/splash-screen.styles.ts rename to packages/components/src/splash-screen/splash-screen.styles.ts diff --git a/packages/core/src/components/splash-screen/splash-screen.tsx b/packages/components/src/splash-screen/splash-screen.tsx similarity index 100% rename from packages/core/src/components/splash-screen/splash-screen.tsx rename to packages/components/src/splash-screen/splash-screen.tsx diff --git a/packages/core/src/components/tab-switch.tsx b/packages/components/src/tab-switch.tsx similarity index 87% rename from packages/core/src/components/tab-switch.tsx rename to packages/components/src/tab-switch.tsx index f44a48cfb..c273bfa32 100644 --- a/packages/core/src/components/tab-switch.tsx +++ b/packages/components/src/tab-switch.tsx @@ -9,12 +9,6 @@ export interface TabSwitchProps { label: string; onClick?: React.MouseEventHandler; title: string; - type: TabSwitchType; -} - -export enum TabSwitchType { - Toggle, - Tab } export enum TabSwitchState { @@ -31,8 +25,7 @@ const StyledTabSwitch = styled.div` height: 100%; align-items: center; justify-content: center; - - width: ${(props: TabSwitchProps) => (props.type === TabSwitchType.Tab ? '50%' : 'auto')}; + width: auto; background: ${(props: TabSwitchProps) => props.active === TabSwitchState.Active ? Color.Blue80 : 'transparent'}; @@ -53,7 +46,6 @@ export const TabSwitch: React.SFC = props => ( diff --git a/packages/components/src/tab/demo.tsx b/packages/components/src/tab/demo.tsx new file mode 100644 index 000000000..f3ef23b9f --- /dev/null +++ b/packages/components/src/tab/demo.tsx @@ -0,0 +1,10 @@ +import * as React from 'react'; +import DemoContainer from '../demo-container'; +import { Tab } from './'; + +export default (): JSX.Element => ( + + Demo + Demo + +); diff --git a/packages/components/src/tab/index.tsx b/packages/components/src/tab/index.tsx new file mode 100644 index 000000000..48b8979f1 --- /dev/null +++ b/packages/components/src/tab/index.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; +import styled from 'styled-components'; +import { Color } from '../colors'; +import { getSpace, SpaceSize } from '../space'; +import { Copy, CopySize } from '../copy'; + +export interface TabProps { + active?: boolean; + onClick?: React.MouseEventHandler; +} + +const StyledTab = styled.div` + border-bottom: 3px solid ${(props: TabProps) => (props.active ? Color.Blue20 : 'transparent')}; + color: ${(props: TabProps) => (props.active ? Color.Blue : Color.Grey36)}; + display: flex; + justify-content: center; + align-items: center; + height: 100%; + box-sizing: border-box; + padding-top: ${getSpace(SpaceSize.XXS)}px; + margin: 0 ${getSpace(SpaceSize.XS)}px 0; + + &:active { + color: ${(props: TabProps) => (props.active ? Color.Blue : Color.Grey20)}; + } +`; + +export const Tab: React.StatelessComponent = props => { + return {props.children}; +}; diff --git a/packages/components/src/tab/pattern.json b/packages/components/src/tab/pattern.json new file mode 100644 index 000000000..2b2f11f5e --- /dev/null +++ b/packages/components/src/tab/pattern.json @@ -0,0 +1,7 @@ +{ + "name": "tab", + "displayName": "Tab", + "flag": "alpha", + "version": "1.0.0", + "tags": ["atom"] + } diff --git a/packages/core/src/components/teaser/demo.tsx b/packages/components/src/teaser/demo.tsx similarity index 100% rename from packages/core/src/components/teaser/demo.tsx rename to packages/components/src/teaser/demo.tsx diff --git a/packages/core/src/components/teaser/index.tsx b/packages/components/src/teaser/index.tsx similarity index 100% rename from packages/core/src/components/teaser/index.tsx rename to packages/components/src/teaser/index.tsx diff --git a/packages/core/src/components/teaser/pattern.json b/packages/components/src/teaser/pattern.json similarity index 100% rename from packages/core/src/components/teaser/pattern.json rename to packages/components/src/teaser/pattern.json diff --git a/packages/core/src/components/teaser/teaser.tsx b/packages/components/src/teaser/teaser.tsx similarity index 100% rename from packages/core/src/components/teaser/teaser.tsx rename to packages/components/src/teaser/teaser.tsx diff --git a/packages/core/src/components/update-badge/index.ts b/packages/components/src/update-badge/index.ts similarity index 100% rename from packages/core/src/components/update-badge/index.ts rename to packages/components/src/update-badge/index.ts diff --git a/packages/core/src/components/update-badge/update-badge.styles.tsx b/packages/components/src/update-badge/update-badge.styles.tsx similarity index 100% rename from packages/core/src/components/update-badge/update-badge.styles.tsx rename to packages/components/src/update-badge/update-badge.styles.tsx diff --git a/packages/core/src/components/update-badge/update-badge.tsx b/packages/components/src/update-badge/update-badge.tsx similarity index 100% rename from packages/core/src/components/update-badge/update-badge.tsx rename to packages/components/src/update-badge/update-badge.tsx diff --git a/packages/core/src/components/view-switch/demo.tsx b/packages/components/src/view-switch/demo.tsx similarity index 100% rename from packages/core/src/components/view-switch/demo.tsx rename to packages/components/src/view-switch/demo.tsx diff --git a/packages/core/src/components/view-switch/index.tsx b/packages/components/src/view-switch/index.tsx similarity index 94% rename from packages/core/src/components/view-switch/index.tsx rename to packages/components/src/view-switch/index.tsx index 550cfdee8..fbde79938 100644 --- a/packages/core/src/components/view-switch/index.tsx +++ b/packages/components/src/view-switch/index.tsx @@ -2,7 +2,6 @@ import { Color } from '../colors'; import { CopySize } from '../copy'; import { IconProps, IconSize } from '../icons'; import * as React from 'react'; -import { EditableTitleState } from '../../types'; import { getSpace, SpaceSize } from '../space'; import styled from 'styled-components'; @@ -11,9 +10,15 @@ const tag = require('tag-hoc').default; export type JustifyType = 'start' | 'center' | 'end' | 'stretch'; +export enum ViewSwitchTitleState { + Neutral = 'Neutral', + Editable = 'Editable', + Editing = 'Editing' +} + export interface ViewEditableTitleProps { fontSize?: CopySize; - nameState: EditableTitleState; + nameState: ViewSwitchTitleState | 'Neutral' | 'Editabe' | 'Editing'; title: string; onBlur?: React.FocusEventHandler; onChange?: React.ChangeEventHandler; @@ -113,7 +118,7 @@ const StyledInput = styled.input` export const ViewEditableTitle: React.SFC = (props): JSX.Element => ( - {props.nameState === EditableTitleState.Editing ? ( + {props.nameState === ViewSwitchTitleState.Editing ? ( (MT.OpenFileRequest, Matchers.openFileRequest(context)); + app.match( + MT.OpenRemoteFileRequest, + Matchers.openRemoteFileRequest(context) + ); } app.match(MT.ExportHtmlProject, Matchers.exportHtmlProject(context)); diff --git a/packages/core/src/adapters/electron-adapter/electron-adapter.test.ts b/packages/core/src/adapters/electron-adapter/electron-adapter.test.ts index 37bb2f30e..17f416a26 100644 --- a/packages/core/src/adapters/electron-adapter/electron-adapter.test.ts +++ b/packages/core/src/adapters/electron-adapter/electron-adapter.test.ts @@ -3,6 +3,7 @@ import { ElectronAdapter } from './electron-adapter'; import { AlvaServer } from '../../server'; import * as M from '../../message'; import * as Matchers from '../../matchers'; +import * as T from '../../types'; jest.mock('mobx'); jest.mock('./electron-updater'); @@ -77,7 +78,8 @@ test('reacts to pattern library update request', async () => { id: uuid.v4(), payload: { libId: uuid.v4(), - projectId: uuid.v4() + projectId: uuid.v4(), + installType: T.PatternLibraryInstallType.Local } }; server.sender.send(reqMsg); @@ -93,7 +95,7 @@ test('creates new splashscreen on start', async () => { expect((server as any).host.createWindow).toHaveBeenCalled(); }); -test('create no splashscreen on start with filePath', async () => { +test('creates no splashscreen on start with filePath', async () => { const server = await AlvaServer.fromHosts({} as any); const adapter = new ElectronAdapter({ server, forceUpdates: false }); diff --git a/packages/core/src/adapters/electron-adapter/electron-adapter.ts b/packages/core/src/adapters/electron-adapter/electron-adapter.ts index 2ef115f90..7135f9c17 100644 --- a/packages/core/src/adapters/electron-adapter/electron-adapter.ts +++ b/packages/core/src/adapters/electron-adapter/electron-adapter.ts @@ -12,6 +12,7 @@ import * as uuid from 'uuid'; import * as Url from 'url'; import { HostWindowVariant } from '../../types'; import * as Mobx from 'mobx'; +import * as RouteParser from 'route-parser'; const throat = require('throat'); @@ -78,6 +79,10 @@ export class ElectronAdapter { } }); + sender.match( + MT.ConnectNpmPatternLibraryRequest, + Matchers.connectNpmPatternLibrary(context) + ); sender.match( MT.ConnectPatternLibraryRequest, Matchers.connectPatternLibrary(context) @@ -86,6 +91,10 @@ export class ElectronAdapter { MT.UpdatePatternLibraryRequest, Matchers.updatePatternLibrary(context) ); + sender.match( + MT.UpdateNpmPatternLibraryRequest, + Matchers.updateNpmPatternLibrary(context) + ); sender.match(MT.Copy, Matchers.copy(context)); sender.match(MT.Cut, Matchers.cut(context)); sender.match( @@ -110,6 +119,11 @@ export class ElectronAdapter { }) ); + sender.match( + MT.OpenRemoteFileRequest, + Matchers.openRemoteFileRequest(context) + ); + sender.match(MT.OpenWindow, Matchers.openWindow(context)); sender.match(MT.Paste, Matchers.paste(context)); sender.match(MT.Save, Matchers.save(context, { passive: false })); @@ -351,19 +365,20 @@ export class ElectronAdapter { private async getProjectWindows(): Promise< { project: Project; window: Electron.BrowserWindow }[] > { + const projectRoute = new RouteParser('/project/:id(/store)'); + return (await Promise.all( Array.from((await this.getAppWindows()).values()).map(async win => { const parsed = Url.parse(win.webContents.getURL()); - if (!parsed.pathname || !parsed.pathname.startsWith('/project')) { + const match = projectRoute.match(parsed.pathname || ''); + + if (!match || !match.id) { return; } - const fragments = parsed.pathname.split('/').filter(Boolean); - const id = fragments[fragments.length - 1]; - return { window: win, - project: await this.server.dataHost.getProject(id) + project: await this.server.dataHost.getProject(match.id) }; }) )).filter( diff --git a/packages/core/src/adapters/electron-adapter/electron-main-menu.ts b/packages/core/src/adapters/electron-adapter/electron-main-menu.ts index 0037a339e..d5e7b7aa7 100644 --- a/packages/core/src/adapters/electron-adapter/electron-main-menu.ts +++ b/packages/core/src/adapters/electron-adapter/electron-main-menu.ts @@ -101,7 +101,6 @@ export class ElectronMainMenu { Menu.appMenu(ctx), Menu.fileMenu(ctx), Menu.editMenu(ctx), - Menu.libraryMenu(ctx), Menu.viewMenu(ctx), Menu.windowMenu(ctx), Menu.helpMenu(ctx) diff --git a/packages/core/src/adapters/node-adapter.ts b/packages/core/src/adapters/node-adapter.ts index 3b5ab58e5..e16098bc7 100644 --- a/packages/core/src/adapters/node-adapter.ts +++ b/packages/core/src/adapters/node-adapter.ts @@ -41,6 +41,10 @@ export class NodeAdapter { ); sender.match(MT.OpenExternalURL, Matchers.openExternalUrl(context)); sender.match(MT.OpenFileRequest, Matchers.openFileRequest(context)); + sender.match( + MT.OpenRemoteFileRequest, + Matchers.openRemoteFileRequest(context) + ); sender.match(MT.OpenWindow, Matchers.openWindow(context)); sender.match(MT.Paste, Matchers.paste(context)); sender.match(MT.Save, Matchers.save(context, { passive: false })); @@ -54,6 +58,14 @@ export class NodeAdapter { sender.match(MT.SaveResult, () => this.dataHost.checkProjects()); sender.match(MT.UseFileResponse, () => this.dataHost.checkProjects()); + sender.match( + MT.ConnectNpmPatternLibraryRequest, + Matchers.connectNpmPatternLibrary(context) + ); + sender.match( + MT.UpdateNpmPatternLibraryRequest, + Matchers.updateNpmPatternLibrary(context) + ); Mobx.autorun(async () => { sender.send({ diff --git a/packages/core/src/alva-util/index.ts b/packages/core/src/alva-util/index.ts index e3b8dd2fc..74264980b 100644 --- a/packages/core/src/alva-util/index.ts +++ b/packages/core/src/alva-util/index.ts @@ -2,6 +2,7 @@ export * from './compute-difference'; export * from './drag-and-drop'; export * from './ensure-array'; export * from './new-issue-url'; +export * from './mkdirp'; export * from './guess-name'; export * from './noop'; export * from './parse-json'; diff --git a/packages/core/src/alva-util/mkdirp.ts b/packages/core/src/alva-util/mkdirp.ts new file mode 100644 index 000000000..508156b9f --- /dev/null +++ b/packages/core/src/alva-util/mkdirp.ts @@ -0,0 +1,30 @@ +import * as Fs from 'fs'; +import * as Util from 'util'; +import * as Path from 'path'; + +const promisify = require('util.promisify') as typeof Util.promisify; + +export async function mkdirp(dir: string, opts: { fs: typeof Fs }): Promise { + const mkdir = promisify(opts.fs.mkdir).bind(opts.fs); + const stat = promisify(opts.fs.stat).bind(opts.fs); + + try { + await mkdir(dir); + } catch (err) { + switch (err.code) { + case 'ENOENT': + await mkdirp(Path.dirname(dir), opts); + await mkdirp(dir, opts); + break; + default: + try { + const stats = await stat(dir); + if (!stats.isDirectory()) { + throw err; + } + } catch (statErr) { + throw err; + } + } + } +} diff --git a/packages/core/src/alva-util/target.ts b/packages/core/src/alva-util/target.ts index efbbb53d6..97584f82c 100644 --- a/packages/core/src/alva-util/target.ts +++ b/packages/core/src/alva-util/target.ts @@ -1,6 +1,6 @@ import * as Model from '../model'; import * as Store from '../store'; -import * as Components from '../components'; +import * as Components from '@meetalva/components'; export function above(node: EventTarget, selector: string): HTMLElement | null { let el = node as HTMLElement; diff --git a/packages/core/src/analyzer/get-package.ts b/packages/core/src/analyzer/get-package.ts new file mode 100644 index 000000000..836d80ca6 --- /dev/null +++ b/packages/core/src/analyzer/get-package.ts @@ -0,0 +1,153 @@ +import * as npa from 'npm-package-arg'; +import * as Fs from 'fs'; +import * as Path from 'path'; +import * as semver from 'semver'; +import { mkdirp } from '../alva-util'; +import * as ChildProcess from 'child_process'; +import { copy } from 'fs-extra'; + +const pacote = require('pacote'); +const resolvePkg = require('resolve-pkg'); + +const ARGS = [ + '--exact', + '--ignore-scripts', + '--no-lockfile', + '--non-interactive', + '--no-bin-links', + '--ignore-engines', + '--skip-integrity-check' +]; + +const TYPES = ['version', 'tag', 'range']; + +export interface PackageResult { + cwd: string; + path: string; + version: string; + name: string; +} + +function fork(command: string, args: string[], opts: ChildProcess.ForkOptions): Promise { + return new Promise((resolve, reject) => { + const cp = ChildProcess.fork(command, args, { ...opts, stdio: 'pipe' }); + const err: string[] = []; + const out: string[] = []; + + if (cp.stdout !== null) { + cp.stdout.on('data', data => out.push(data)); + } + + if (cp.stderr !== null) { + cp.stderr.on('data', data => err.push(data)); + } + + cp.once('error', reject); + + cp.once('exit', code => { + if (code !== 0) { + return reject( + `${command} exited with code ${code}: ${out.join('\n')} ${err.join('\n')}` + ); + } + + resolve(out.join('\n')); + }); + }); +} + +export async function getPackage( + raw: string, + opts: { cwd: string; appPath: string } +): Promise { + try { + const parsed = npa(raw); + + if (!TYPES.includes(parsed.type)) { + return new Error( + `${parsed.type} npm references are not supported. Specify one of ${TYPES.join(', ')}` + ); + } + + const version = await getVersion(parsed); + + if (!version) { + return new Error(`could not determine version for ${raw}`); + } + + const id = [parsed.name, version].join('@'); + + const vendorDir = getVendorDir(opts); + const yarn = Path.join(vendorDir, 'yarn.js'); + const cwd = Path.join(opts.cwd, id); + + await mkdirp(Path.join(cwd), { fs: Fs }); + await fork(yarn, ['add', id, ...ARGS], { cwd }); + + return { + cwd, + path: await resolvePkg(`${parsed.name}/package.json`, { cwd }), + version, + name: parsed.name! + }; + } catch (err) { + err.message = [err.message, err.stdout, err.sterr, err.cwd ? `cwd: ${err.cwd}` : ''] + .filter(Boolean) + .join('\n'); + return err; + } +} + +async function getVersion(name: npa.Result): Promise { + if (name.type === 'version') { + return name.fetchSpec!; + } + + const packument = await pacote.packument(name.name); + + if (name.type === 'tag') { + const version = packument['dist-tags'][name.fetchSpec!]; + + if (typeof version !== 'string') { + throw new Error(`Could not determine version of ${name.name} for tag ${name.fetchSpec}`); + } + + return version; + } + + if (name.type === 'range') { + const versions = Object.keys(packument.versions).sort(semver.compare); + const spec = typeof name.fetchSpec === 'string' ? name.fetchSpec : 'latest'; + const version = semver.maxSatisfying(versions, spec); + + if (typeof version !== 'string') { + throw new Error( + `Could not find matching version of ${name.name} for range ${name.fetchSpec}` + ); + } + + return version; + } +} + +function getVendorDir(opts: { cwd: string; appPath: string }): string { + const vendors = [ + Path.join(opts.appPath.replace('app.asar', 'app.asar.unpacked'), 'vendor'), + Path.join(__dirname, 'vendor'), + Path.join(__dirname, '..', '..', 'vendor') + ]; + + const vendor = vendors.find(dir => { + try { + return Fs.existsSync(dir) && Fs.statSync(dir).isDirectory(); + } catch (err) { + return false; + } + }); + + if (!vendor) { + throw new Error(`Could not find vendor directory at ${vendors.join(', ')}`); + } + + return vendor; +} diff --git a/packages/core/src/analyzer/typescript-react-analyzer/typescript-react-analyzer.ts b/packages/core/src/analyzer/typescript-react-analyzer/typescript-react-analyzer.ts index a9e18104a..3830724c4 100644 --- a/packages/core/src/analyzer/typescript-react-analyzer/typescript-react-analyzer.ts +++ b/packages/core/src/analyzer/typescript-react-analyzer/typescript-react-analyzer.ts @@ -70,6 +70,10 @@ export async function analyze( const patterns = await analyzePatterns({ pkgPath, options, pkg, cwd }); const getBundle = async () => { + if (patterns.length === 0) { + return ''; + } + const compiler = await createPatternCompiler(patterns, { cwd, id }); const stats = await Util.promisify(compiler.run).bind(compiler)(); @@ -98,17 +102,15 @@ export async function analyze( return { type: Types.LibraryAnalysisResultType.Success, result: { - id, bundle: await getBundle(), - name: pkg.name || 'Unnamed Library', - description: pkg.description || '', + id, + packageFile: pkg, + path: pkgPath, patterns: patterns.map(p => ({ path: p.path, pattern: p.pattern, properties: p.properties.map(prop => prop.property) - })), - path: pkgPath, - version: pkg.version || '1.0.0' + })) } }; } catch (error) { @@ -315,6 +317,7 @@ async function findPatternCandidates({ pkg: any; }): Promise { const entry = Path.join(cwd, getTypingsEntry(pkg)); + const declarationsList = getImportsFromPath(entry, { extensions: ['.d.ts'], deep: true, diff --git a/packages/core/src/bin/analyze.ts b/packages/core/src/bin/analyze.ts index b5784f5b4..b162e258d 100644 --- a/packages/core/src/bin/analyze.ts +++ b/packages/core/src/bin/analyze.ts @@ -25,7 +25,7 @@ async function main() { const cwd = flags.cwd || process.cwd(); const path = Path.resolve(cwd, flags.in); - const outPath = flags.out ? Path.resolve(cwd, flags.out) : undefined; + const outPath = flags.out ? Path.resolve(cwd, flags.out) : ''; const previousLibrary = Fs.existsSync(outPath) ? Model.PatternLibrary.from( @@ -46,11 +46,11 @@ async function main() { } const project = Model.Project.create({ name: 'Project', draft: true, path: 'project' }); - const library = Model.PatternLibrary.fromAnalysis( - analysis.result, - { project }, - { analyzeBuiltins: true } - ); + const library = Model.PatternLibrary.fromAnalysis(analysis.result, { + project, + analyzeBuiltins: true, + installType: Types.PatternLibraryInstallType.Local + }); await writeFile( outPath, diff --git a/packages/core/src/bin/static/build.ts b/packages/core/src/bin/static/build.ts index b36804300..9c68f0085 100644 --- a/packages/core/src/bin/static/build.ts +++ b/packages/core/src/bin/static/build.ts @@ -24,6 +24,7 @@ export async function build({ payload: { host: Types.HostType.Browser, view: project ? Types.AlvaView.PageDetail : Types.AlvaView.SplashScreen, + projectViewMode: Types.ProjectViewMode.Design, project } }); diff --git a/packages/core/src/compiler/create-compiler.ts b/packages/core/src/compiler/create-compiler.ts index eeb059960..7d8b47a53 100644 --- a/packages/core/src/compiler/create-compiler.ts +++ b/packages/core/src/compiler/create-compiler.ts @@ -1,9 +1,9 @@ import { compilerSafeName } from './compiler-safe-name'; import * as Path from 'path'; import * as webpack from 'webpack'; -import { ufs } from 'unionfs'; import * as Fs from 'fs'; +const { ufs } = require('unionfs'); const MemoryFs = require('memory-fs'); export interface CompilerPattern { diff --git a/packages/core/src/compiler/meetalva-loader.ts b/packages/core/src/compiler/meetalva-loader.ts deleted file mode 100644 index c714f9432..000000000 --- a/packages/core/src/compiler/meetalva-loader.ts +++ /dev/null @@ -1,84 +0,0 @@ -export default function alvaEntryLoader() { - const options = getOptions(this); - const components = JSON.parse(options.components); - - return Object.keys(components) - .map(name => createExport(name, components[name])) - .join('\n'); -} - -function createExport(name, id) { - return `module.exports[${JSON.stringify(name)}] = require(${JSON.stringify(id)})`; -} - -function getOptions(loaderContext) { - const query = loaderContext.query; - - if (typeof query === 'string' && query !== '') { - return parseQuery(loaderContext.query); - } - - if (!query || typeof query !== 'object') { - // Not object-like queries are not supported. - return null; - } - - return query; -} - -const specialValues = { - null: null, - true: true, - false: false -}; - -function parseQuery(query) { - if (query.substr(0, 1) !== '?') { - throw new Error("A valid query string passed to parseQuery should begin with '?'"); - } - - query = query.substr(1); - - if (!query) { - return {}; - } - - const queryArgs = query.split(/[,&]/g); - const result = {}; - - queryArgs.forEach(arg => { - const idx = arg.indexOf('='); - - if (idx >= 0) { - let name = arg.substr(0, idx); - let value = decodeURIComponent(arg.substr(idx + 1)); - - if (specialValues.hasOwnProperty(value)) { - value = specialValues[value]; - } - - if (name.substr(-2) === '[]') { - name = decodeURIComponent(name.substr(0, name.length - 2)); - - if (!Array.isArray(result[name])) { - result[name] = []; - } - - result[name].push(value); - } else { - name = decodeURIComponent(name); - result[name] = value; - } - } else { - if (arg.substr(0, 1) === '-') { - result[decodeURIComponent(arg.substr(1))] = false; - } else if (arg.substr(0, 1) === '+') { - result[decodeURIComponent(arg.substr(1))] = true; - } else { - result[decodeURIComponent(arg)] = true; - } - } - }); - - return result; -} diff --git a/packages/core/src/components/led/demo.tsx b/packages/core/src/components/led/demo.tsx deleted file mode 100644 index 7d9e41a7c..000000000 --- a/packages/core/src/components/led/demo.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import DemoContainer from '../demo-container'; -import { Led, LedColor } from './led'; -import * as React from 'react'; - -export default function LedDemo(): JSX.Element { - return ( - - - - - - ); -} diff --git a/packages/core/src/components/led/led.tsx b/packages/core/src/components/led/led.tsx deleted file mode 100644 index 650c86575..000000000 --- a/packages/core/src/components/led/led.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import { Color } from '../colors'; -import * as React from 'react'; -import * as Space from '../space'; -import styled from 'styled-components'; - -export enum LedColor { - Grey, - Orange, - Green, - Red -} - -export interface LedProps { - ledColor: LedColor; - label?: string; -} - -export const Led: React.SFC = props => ( - - - - - {props.label && {props.label}} - -); - -const COLOR = (props: LedProps): string => { - switch (props.ledColor) { - case LedColor.Green: - return Color.SignalGreen; - case LedColor.Orange: - return Color.Orange; - case LedColor.Red: - return Color.Red; - case LedColor.Grey: - return Color.Grey50; - } -}; - -const StyledLedOuterContainer = styled.div` - display: flex; - align-items: center; - margin: ${Space.getSpace(Space.SpaceSize.S)}px 0; -`; - -const StyledLedContainer = styled.div` - position: relative; - display: flex; - align-items: center; - justify-content: center; - width: 15px; - height: 15px; - &::before { - position: absolute; - z-index: 1; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - content: ''; - width: 75%; - height: 75%; - filter: blur(3px); - opacity: 0.6; - background-color: ${COLOR}; - mix-blend-mode: multiply; - } -`; - -const StyledLedLabel = styled.div` - color: ${COLOR}; - margin-left: ${Space.getSpace(Space.SpaceSize.XS)}px; -`; - -const StyledLed = styled.div` - position: relative; - z-index: 2; - width: 50%; - height: 50%; - border-radius: 50%; - background-color: ${COLOR}; - border: 0.5px solid rgba(0, 0, 0, 0.4); -`; diff --git a/packages/core/src/components/led/pattern.json b/packages/core/src/components/led/pattern.json deleted file mode 100644 index 92467e686..000000000 --- a/packages/core/src/components/led/pattern.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "displayName": "LED", - "description": "Signal states", - "main": "./led", - "name": "led", - "flag": "alpha", - "version": "1.0.0" - } diff --git a/packages/core/src/components/panes/element-pane/demo.tsx b/packages/core/src/components/panes/element-pane/demo.tsx deleted file mode 100644 index de0a5d1fb..000000000 --- a/packages/core/src/components/panes/element-pane/demo.tsx +++ /dev/null @@ -1,2 +0,0 @@ -// tslint:disable-next-line:no-empty -export default () => {}; diff --git a/packages/core/src/components/panes/element-pane/pattern.json b/packages/core/src/components/panes/element-pane/pattern.json deleted file mode 100644 index a223de218..000000000 --- a/packages/core/src/components/panes/element-pane/pattern.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "name": "element-pane", - "displayName": "Element Pane", - "flag": "alpha", - "version": "1.0.0", - "tags": ["atom", "element-pane"] - } diff --git a/packages/core/src/components/panes/patterns-pane/demo.tsx b/packages/core/src/components/panes/patterns-pane/demo.tsx deleted file mode 100644 index de0a5d1fb..000000000 --- a/packages/core/src/components/panes/patterns-pane/demo.tsx +++ /dev/null @@ -1,2 +0,0 @@ -// tslint:disable-next-line:no-empty -export default () => {}; diff --git a/packages/core/src/components/panes/patterns-pane/pattern.json b/packages/core/src/components/panes/patterns-pane/pattern.json deleted file mode 100644 index 0a2bd4c7f..000000000 --- a/packages/core/src/components/panes/patterns-pane/pattern.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "name": "patterns-pane", - "displayName": "Patterns Pane", - "flag": "alpha", - "version": "1.0.0", - "tags": ["atom", "patterns-pane"] - } diff --git a/packages/core/src/components/panes/preview-pane/demo.tsx b/packages/core/src/components/panes/preview-pane/demo.tsx deleted file mode 100644 index de0a5d1fb..000000000 --- a/packages/core/src/components/panes/preview-pane/demo.tsx +++ /dev/null @@ -1,2 +0,0 @@ -// tslint:disable-next-line:no-empty -export default () => {}; diff --git a/packages/core/src/components/panes/preview-pane/pattern.json b/packages/core/src/components/panes/preview-pane/pattern.json deleted file mode 100644 index c4b15c10f..000000000 --- a/packages/core/src/components/panes/preview-pane/pattern.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "name": "preview-pane", - "displayName": "Preview Pane", - "flag": "alpha", - "version": "1.0.0", - "tags": ["atom", "preview-pane"] - } diff --git a/packages/core/src/components/panes/project-pane/demo.tsx b/packages/core/src/components/panes/project-pane/demo.tsx deleted file mode 100644 index de0a5d1fb..000000000 --- a/packages/core/src/components/panes/project-pane/demo.tsx +++ /dev/null @@ -1,2 +0,0 @@ -// tslint:disable-next-line:no-empty -export default () => {}; diff --git a/packages/core/src/components/panes/project-pane/pattern.json b/packages/core/src/components/panes/project-pane/pattern.json deleted file mode 100644 index 63787b281..000000000 --- a/packages/core/src/components/panes/project-pane/pattern.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "name": "project-pane", - "displayName": "Project Pane", - "flag": "alpha", - "version": "1.0.0", - "tags": ["atom", "project-pane"] - } diff --git a/packages/core/src/components/panes/property-pane/demo.tsx b/packages/core/src/components/panes/property-pane/demo.tsx deleted file mode 100644 index de0a5d1fb..000000000 --- a/packages/core/src/components/panes/property-pane/demo.tsx +++ /dev/null @@ -1,2 +0,0 @@ -// tslint:disable-next-line:no-empty -export default () => {}; diff --git a/packages/core/src/components/panes/property-pane/pattern.json b/packages/core/src/components/panes/property-pane/pattern.json deleted file mode 100644 index 51025c818..000000000 --- a/packages/core/src/components/panes/property-pane/pattern.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "name": "property-pane", - "displayName": "Property Pane", - "flag": "alpha", - "version": "1.0.0", - "tags": ["atom", "property-pane"] - } diff --git a/packages/core/src/components/tslint.json b/packages/core/src/components/tslint.json deleted file mode 100644 index 070b7386d..000000000 --- a/packages/core/src/components/tslint.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "../../tslint.json", - "rules": { - "no-default-export": false - } -} diff --git a/packages/core/src/container/app.tsx b/packages/core/src/container/app.tsx index ca0554ecd..84e778af7 100644 --- a/packages/core/src/container/app.tsx +++ b/packages/core/src/container/app.tsx @@ -1,6 +1,6 @@ import { AppView } from './app-view'; import { ChromeContainer } from './chrome/chrome-container'; -import * as Components from '../components'; +import * as Components from '@meetalva/components'; import * as MobxReact from 'mobx-react'; import * as React from 'react'; import * as Types from '../types'; @@ -49,11 +49,9 @@ export class App extends React.Component {