Skip to content
This repository has been archived by the owner on Oct 23, 2023. It is now read-only.

Commit

Permalink
feat: move to self contained .alva files
Browse files Browse the repository at this point in the history
  • Loading branch information
marionebl committed May 24, 2018
1 parent 48f5163 commit ca886c8
Show file tree
Hide file tree
Showing 75 changed files with 2,376 additions and 3,734 deletions.
8 changes: 8 additions & 0 deletions src/alva-util/guess-name.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export function guessName(id: string): string {
const guessedName = id
.replace(/[_-]+/, ' ')
.replace(/([a-z])([A-Z])/g, '$1 $2')
.toLowerCase();

return guessedName.substring(0, 1).toUpperCase() + guessedName.substring(1);
}
1 change: 1 addition & 0 deletions src/alva-util/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './guess-name';
34 changes: 13 additions & 21 deletions src/component/chrome/chrome-container.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,27 @@ import Chrome from '../../lsg/patterns/chrome';
import { CopySize as FontSize } from '../../lsg/patterns/copy';
import { observer } from 'mobx-react';
import { OverviewSwitchContainer } from './overview-switch-container';
import { Page } from '../../store/page/page';
import { PageRef } from '../../store/page/page-ref';
import * as React from 'react';
import { AlvaView, Store } from '../../store/store';
import { Page, ViewStore } from '../../store';
import * as Types from '../../store/types';
import { ViewSwitch, ViewTitle } from '../../lsg/patterns/view-switch';

@observer
export class ChromeContainer extends React.Component {
protected store = Store.getInstance();
protected store = ViewStore.getInstance();

protected getCurrentPage(): Page | undefined {
return this.store.getCurrentPage();
}

protected openPage(page: PageRef | undefined): void {
if (page) {
this.store.openPage(page.getId());
}
return;
}

public render(): JSX.Element {
let nextPage: PageRef | undefined;
let previousPage: PageRef | undefined;
let nextPage: Page | undefined;
let previousPage: Page | undefined;

const currentPage = this.getCurrentPage();
const project = currentPage ? currentPage.getProject() : undefined;
const pages = project ? project.getPageRefs() : [];
const currentIndex = currentPage ? pages.indexOf(currentPage.getPageRef()) : 0;
const project = this.store.getCurrentProject();
const pages = project ? project.getPages() : [];
const currentIndex = currentPage ? pages.indexOf(currentPage) : 0;

if (currentIndex > 0) {
previousPage = pages[currentIndex - 1];
Expand All @@ -42,23 +34,23 @@ export class ChromeContainer extends React.Component {

return (
<Chrome>
{this.store.getActiveView() === AlvaView.PageDetail ? (
{this.store.getActiveView() === Types.AlvaView.PageDetail ? (
<OverviewSwitchContainer />
) : (
<div />
)}
{this.store.getActiveView() === AlvaView.PageDetail && (
{this.store.getActiveView() === Types.AlvaView.PageDetail && (
<ViewSwitch
fontSize={FontSize.M}
justify="center"
leftVisible={Boolean(previousPage)}
rightVisible={Boolean(nextPage)}
onLeftClick={() => this.openPage(previousPage)}
onRightClick={() => this.openPage(nextPage)}
// onLeftClick={() => /* this.openPage(previousPage) */}
// onRightClick={() => /* this.openPage(nextPage) */}
title={currentPage ? currentPage.getName() : ''}
/>
)}
{this.store.getActiveView() === AlvaView.Pages && (
{this.store.getActiveView() === Types.AlvaView.Pages && (
<ViewTitle
fontSize={FontSize.M}
justify="center"
Expand Down
17 changes: 11 additions & 6 deletions src/component/chrome/overview-switch-container.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,27 @@
import { observer } from 'mobx-react';
import { Project } from '../../store/project';
import * as React from 'react';
import { AlvaView, Store } from '../../store/store';
import { ViewStore } from '../../store';
import * as Types from '../../store/types';
import { ViewButton } from '../../lsg/patterns/view-switch';

@observer
export class OverviewSwitchContainer extends React.Component {
public render(): JSX.Element | null {
const store = Store.getInstance();
const project: Project | undefined = store.getCurrentProject();
const store = ViewStore.getInstance();
const project = store.getCurrentProject();
const page = store.getCurrentPage();

if (!project || !page) {
return null;
}

const title = store.getActiveView() === AlvaView.Pages ? `Show "${page.getName()}"` : 'Pages';
const next = store.getActiveView() === AlvaView.Pages ? AlvaView.PageDetail : AlvaView.Pages;
const title =
store.getActiveView() === Types.AlvaView.Pages ? `Show "${page.getName()}"` : 'Pages';

const next =
store.getActiveView() === Types.AlvaView.Pages
? Types.AlvaView.PageDetail
: Types.AlvaView.Pages;

return <ViewButton onClick={() => store.setActiveView(next)} title={title} />;
}
Expand Down
176 changes: 69 additions & 107 deletions src/component/container/app.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import AddButton from '../../lsg/patterns/add-button';
import { ChromeContainer } from '../chrome/chrome-container';
import { remote } from 'electron';
import { ipcRenderer } from 'electron';
import { ElementList } from '../../component/container/element-list';
import ElementPane from '../../lsg/patterns/panes/element-pane';
import * as FsExtra from 'fs-extra';
import globalStyles from '../../lsg/patterns/global-styles';
import { IconName, IconRegistry } from '../../lsg/patterns/icons';
import Layout, {
Expand All @@ -14,62 +13,33 @@ import Layout, {
SideBar
} from '../../lsg/patterns/layout';
import { createMenu } from '../../electron/menu';
import * as MobX from 'mobx';
import { ServerMessageType } from '../../message';
import { observer } from 'mobx-react';
import { PageListContainer } from '../page-list/page-list-container';
import { PageListPreview } from '../page-list/page-list-preview';
import * as Path from 'path';
import { PatternListContainer } from './pattern-list';
import PatternsPane from '../../lsg/patterns/panes/patterns-pane';
import { PreviewPaneWrapper } from '../../component/container/preview-pane-wrapper';
import * as Process from 'process';
import { PropertyList } from './property-list';
import PropertyPane from '../../lsg/patterns/panes/property-pane';
import * as React from 'react';
import { SplashScreen } from './splash-screen';
import { AlvaView, RightPane, Store } from '../../store/store';
import { ViewStore } from '../../store';
import { AlvaView, RightPane } from '../../store/types';
import * as uuid from 'uuid';

globalStyles();

const store = Store.getInstance();

@observer
export class App extends React.Component {
private static PATTERN_LIST_ID = 'patternlist';
private static PROPERTIES_LIST_ID = 'propertieslist';
@MobX.observable protected activeTab: string = App.PATTERN_LIST_ID;

private ctrlDown: boolean = false;

private shiftDown: boolean = false;

public componentDidMount(): void {
createMenu();
this.redirectUndoRedo();
}

// TODO: Should move to store
protected createNewSpace(): void {
let appPath: string = remote.app.getAppPath().replace('.asar', '.asar.unpacked');
if (appPath.indexOf('node_modules') >= 0) {
appPath = Process.cwd();
}

const designkitPath = Path.join(appPath, 'build', 'designkit');
remote.dialog.showOpenDialog(
{ properties: ['openDirectory', 'createDirectory'] },
filePaths => {
if (filePaths.length <= 0) {
return;
}

FsExtra.copySync(designkitPath, Path.join(filePaths[0], 'designkit'));
store.openStyleguide(`${filePaths[0]}/designkit`);
store.openFirstPage();
}
);
}

private getDevTools(): React.StatelessComponent | null {
try {
const DevToolsExports = require('mobx-react-devtools');
Expand All @@ -79,22 +49,6 @@ export class App extends React.Component {
}
}

protected get isPatternListVisible(): boolean {
return this.activeTab === App.PATTERN_LIST_ID;
}

protected get isPropertiesListVisible(): boolean {
return this.activeTab === App.PROPERTIES_LIST_ID;
}

// TODO: Should move to store
protected openSpace(): void {
remote.dialog.showOpenDialog({ properties: ['openDirectory'] }, filePaths => {
store.openStyleguide(filePaths[0]);
store.openFirstPage();
});
}

private redirectUndoRedo(): void {
document.body.onkeydown = event => {
if (event.keyCode === 16) {
Expand All @@ -104,9 +58,9 @@ export class App extends React.Component {
} else if (this.ctrlDown && event.keyCode === 90) {
event.preventDefault();
if (this.shiftDown) {
Store.getInstance().redo();
ViewStore.getInstance().redo();
} else {
Store.getInstance().undo();
ViewStore.getInstance().undo();
}

return false;
Expand All @@ -125,70 +79,78 @@ export class App extends React.Component {
}

public render(): JSX.Element {
const project = store.getCurrentProject();
const store = ViewStore.getInstance();
const DevTools = this.getDevTools();

return (
<Layout direction={LayoutDirection.Column}>
<ChromeContainer />
<MainArea>
{!project && (
{store.getActiveView() === AlvaView.SplashScreen && (
<SplashScreen
onPrimaryButtonClick={() => this.createNewSpace()}
onSecondaryButtonClick={() => this.openSpace()}
onPrimaryButtonClick={() => {
ipcRenderer.send('message', {
type: ServerMessageType.CreateNewFileRequest,
id: uuid.v4()
});
}}
onSecondaryButtonClick={() => {
ipcRenderer.send('message', {
type: ServerMessageType.OpenFileRequest,
id: uuid.v4()
});
}}
/>
)}
{project &&
store.getActiveView() === AlvaView.Pages && (
<PageListPreview>
<PageListContainer />
</PageListPreview>
)}
{project &&
store.getActiveView() === AlvaView.PageDetail && (
<React.Fragment>
<SideBar
side={LayoutSide.Left}
direction={LayoutDirection.Column}
onClick={() => store.setSelectedElement()}
border={LayoutBorder.Side}
>
<ElementPane>
<ElementList />
</ElementPane>
<AddButton
active={store.getRightPane() === RightPane.Patterns}
label="Add Elements"
onClick={e => {
e.stopPropagation();
store.setRightPane(RightPane.Patterns);
store.setSelectedElement();
}}
/>
</SideBar>
<PreviewPaneWrapper
key="center"
id="preview"
previewFrame={`http://localhost:${store.getServerPort()}/preview.html`}
{store.getActiveView() === AlvaView.Pages && (
<PageListPreview>
<PageListContainer />
</PageListPreview>
)}
{store.getActiveView() === AlvaView.PageDetail && (
<React.Fragment>
<SideBar
side={LayoutSide.Left}
direction={LayoutDirection.Column}
onClick={() => store.setSelectedElement()}
border={LayoutBorder.Side}
>
<ElementPane>
<ElementList />
</ElementPane>
<AddButton
active={store.getRightPane() === RightPane.Patterns}
label="Add Elements"
onClick={e => {
e.stopPropagation();
store.setRightPane(RightPane.Patterns);
store.setSelectedElement();
}}
/>
<SideBar
side={LayoutSide.Right}
direction={LayoutDirection.Column}
border={LayoutBorder.Side}
>
{store.getRightPane() === RightPane.Properties && (
<PropertyPane>
<PropertyList />
</PropertyPane>
)}
{store.getRightPane() === RightPane.Patterns && (
<PatternsPane>
<PatternListContainer />
</PatternsPane>
)}
</SideBar>
</React.Fragment>
)}
</SideBar>
<PreviewPaneWrapper
key="center"
id="preview"
previewFrame={`http://localhost:${store.getServerPort()}/preview.html`}
/>
<SideBar
side={LayoutSide.Right}
direction={LayoutDirection.Column}
border={LayoutBorder.Side}
>
{store.getRightPane() === RightPane.Properties && (
<PropertyPane>
<PropertyList />
</PropertyPane>
)}
{store.getRightPane() === RightPane.Patterns && (
<PatternsPane>
<PatternListContainer />
</PatternsPane>
)}
</SideBar>
</React.Fragment>
)}
</MainArea>
<IconRegistry names={IconName} />
{DevTools ? <DevTools /> : null}
Expand Down
Loading

0 comments on commit ca886c8

Please sign in to comment.