Skip to content

Commit 75d51d2

Browse files
LinhatranLinhatran
committed
replaced blue logo with current logo
2 parents 29cc537 + ffa8422 commit 75d51d2

File tree

8 files changed

+236
-13
lines changed

8 files changed

+236
-13
lines changed

‎README.md

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/team-reactype/ReacType/pulls)
77
![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)
8-
// ADD RELEASE ICON HERE
8+
![Version 5.0](https://img.shields.io/badge/Release-5.0-lightgrey.svg)
99

1010
**ReacType** is a visual prototyping tool for developers employing **React** component architecture alongside the comprehensive type-checking of **TypeScript**.
1111
In other words, **you can draw prototypes and export React / TypeScript code!**
@@ -28,7 +28,7 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
2828

2929
- **Linux users**: Run the application as a super user in order to read and write files.
3030

31-
![Gif of adding](https://i.imgur.com/Ioqkr00.gif)
31+
![Gif of adding](https://i.imgur.com/d1oHiTm.gif)
3232

3333
### How to use
3434

@@ -73,6 +73,12 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
7373

7474
[Jin Soo Lim](https://www.linkedin.com/in/jin-soo-lim-3a567b1b3/) [@jinsoolim](https://github.com/jinsoolim)
7575

76+
[Julie Wu](https://www.linkedin.com/in/jwuarchitect/) [@yutingwu4](https://github.com/yutingwu4)
77+
78+
[Linh Tran](https://www.linkedin.com/in/linhtran51/) [@Linhatran](https://github.com/Linhatran)
79+
80+
[Luke Madden](https://www.linkedin.com/in/lukemadden/) [@lukemadden](https://github.com/lukemadden)
81+
7682
[Mitchel Severe](https://www.linkedin.com/in/misevere/) [@mitchelsevere](https://github.com/mitchelsevere)
7783

7884
[Natalie Vick](https://www.linkedin.com/in/vicknatalie/) [@natattackvick](https://github.com/natattackvick)
@@ -115,9 +121,9 @@ npm run prod
115121
npm run dev
116122
```
117123

118-
- Please note that the development build is not connected to the production server. `npm run dev` should spin up the development server from the server folder of this repo. For additional information, the readme is [here](https://github.com/open-source-labs/ReacType/blob/master/server/README.md). Alternatively, you can also select "Continue as guest" on the log-in page of the app to not use any features that rely on the server (authentication and saving project data.)
124+
- Please note that the development build is not connected to the production server. `npm run dev` should spin up the development server from the server folder of this repo. For additional information, the readme is [here](https://github.com/open-source-labs/ReacType/blob/master/server/README.md). Alternatively, you can select "Continue as guest" on the login page of the app, which will not use any features that rely on the server (authentication and saving project data.)
119125

120-
## To Run Your Exported Next.js Project
126+
## To Run Your Exported Next.js or Gatsby.js Project
121127

122128
- Open exported project directory
123129
- Install dependencies

‎app/src/components/right/ComponentPanel.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -303,8 +303,8 @@ const useStyles = makeStyles({
303303
alignItems: 'center',
304304
textAlign: 'center',
305305
width: '500px',
306-
backgroundColor: 'red',
307-
border: '5px solid red'
306+
backgroundColor: '#186BB4',
307+
border: '5px solid #186BB4'
308308
},
309309
panelSubheader: {
310310
textAlign: 'center',

‎app/src/helperFunctions/generateCode.ts

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,8 @@ const generateUnformattedCode = (
121121
if (projectType === 'Next.js') {
122122
return `<div><Link href="/${child.name}"><a>${child.name}</a></Link></div>`
123123
} else if (projectType === 'Gatsby.js') {
124-
return `<div><Link to="/${child.name}">${child.name}</Link>`
124+
return `<div><Link to="/${child.name}">${child.name}</Link></div>`
125+
// return `<div><Link href="/${child.name}"><a>${child.name}</a></Link></div>`
125126
} else return `<div><a>${child.name}</a></div>`
126127
}
127128
})
@@ -236,10 +237,9 @@ const generateUnformattedCode = (
236237
} else {
237238
return `
238239
import React, { useState } from 'react';
240+
${importsMapped}
239241
import { StaticQuery, graphql } from 'gatsby';
240242
${links ? `import { Link } from 'gatsby'` : ``}
241-
242-
${importsMapped}
243243
244244
245245
const ${currentComponent.name} = (props): JSX.Element => {
@@ -282,10 +282,12 @@ const formatCode = (code: string) => {
282282
jsxBracketSameLine: true,
283283
parser: 'babel'
284284
});
285-
} else {
285+
286+
} else if (process.env.NODE_ENV === 'production') {
286287
return window.api.formatCode(code);
288+
} else {
289+
return code;
287290
}
288-
// return code;
289291

290292
};
291293

‎app/src/public/icons/png/512x512.png

-86.5 KB
Loading

‎app/src/utils/createGatsbyApp.util.ts

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
// Create all files necessary to run a gatsby.js application
2+
3+
import createGatsbyFiles from './createGatsbyFiles.util';
4+
import { Component } from '../interfaces/Interfaces';
5+
6+
const camelToKebab= (camel:string) => {
7+
return camel.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
8+
};
9+
10+
const compToCSS = (component: Component) => {
11+
const name = component.name;
12+
const styleObj = component.style;
13+
let cssClass = `
14+
.${name} {
15+
`;
16+
Object.keys(styleObj).forEach(property => {
17+
let cssStyle = `${camelToKebab(property)}: ${styleObj[property]};
18+
`;
19+
cssClass += cssStyle;
20+
})
21+
cssClass += `}
22+
`;
23+
return cssClass;
24+
}
25+
26+
//createPackage
27+
export const createPackage = (path, appName) => {
28+
const filePath = `${path}/${appName}/package.json`;
29+
const data = `
30+
{
31+
"name": "reactype-gatsby",
32+
"version": "1.0.0",
33+
"description": "",
34+
"scripts": {
35+
"dev": "gatsby develop",
36+
"build": "gatsby build",
37+
"start": "npm run dev"
38+
},
39+
"dependencies": {
40+
"gatsby": "^2.26.1",
41+
"react": "16.13.1",
42+
"react-dom": "16.13.1"
43+
},
44+
"devDependencies": {
45+
"@types/node": "^14.0.20",
46+
"@types/react": "^16.9.41",
47+
"typescript": "^3.9.6"
48+
}
49+
}
50+
`;
51+
window.api.writeFile(filePath, data, err => {
52+
if (err) {
53+
console.log('package.json error:', err.message);
54+
} else {
55+
console.log('package.json written successfully');
56+
}
57+
});
58+
};
59+
//createTSConfig (empty)
60+
export const createTsConfig = (path, appName) => {
61+
const filePath = `${path}/${appName}/tsconfig.json`;
62+
//running 'gatsby dev' will autopopulate this with default values
63+
window.api.writeFile(filePath, '', err => {
64+
if (err) {
65+
console.log('TSConfig error:', err.message);
66+
} else {
67+
console.log('TSConfig written successfully');
68+
}
69+
});
70+
};
71+
72+
//createDefaultCSS
73+
export const createDefaultCSS = (path, appName, components) => {
74+
const filePath = `${path}/${appName}/global.css`;
75+
let data = `
76+
#__gatsby div {
77+
box-sizing: border-box;
78+
width: 100%;
79+
border: 1px solid rgba(0,0,0,0.25);
80+
padding: 12px;
81+
text-align: center;
82+
font-family: Helvetica, Arial;
83+
}
84+
`;
85+
components.forEach(comp => {
86+
data += compToCSS(comp);
87+
})
88+
window.api.writeFile(filePath, data, err => {
89+
if (err) {
90+
console.log('global.css error:', err.message);
91+
} else {
92+
console.log('global.css written successfully');
93+
}
94+
});
95+
}
96+
97+
export const initFolders = (path:string, appName: string) => {
98+
let dir = path;
99+
let dirPages;
100+
let dirComponents;
101+
dir = `${dir}/${appName}`;
102+
if (!window.api.existsSync(dir)) {
103+
window.api.mkdirSync(dir);
104+
window.api.mkdirSync(`${dir}/src`)
105+
dirPages = `${dir}/src/pages`;
106+
window.api.mkdirSync(dirPages);
107+
dirComponents = `${dir}/src/components`;
108+
window.api.mkdirSync(dirComponents);
109+
}
110+
};
111+
112+
//createBaseTsx
113+
export const createBaseTsx = (path, appName) => {
114+
115+
const filePath:string = `${path}/${appName}/src/pages/_app.tsx`;
116+
const data:string = `
117+
import React from 'react';
118+
import '../global.css';
119+
120+
const Base = ({ Component }):JSX.Element => {
121+
return (
122+
<>
123+
<Component />
124+
</>
125+
)
126+
}
127+
128+
export default Base;
129+
`;
130+
window.api.writeFile(filePath, data, err => {
131+
if (err) {
132+
console.log('_app.tsx error:', err.message);
133+
} else {
134+
console.log('_app.tsx written successfully');
135+
}
136+
});
137+
};
138+
139+
async function createGatsbyAppUtil({
140+
path,
141+
appName,
142+
components,
143+
rootComponents
144+
}: {
145+
path: string;
146+
appName: string;
147+
components: Component[];
148+
rootComponents: number[];
149+
}) {
150+
console.log('in the createGatsbyApplication util');
151+
152+
await initFolders(path, appName);
153+
await createBaseTsx(path, appName);
154+
await createDefaultCSS(path, appName, components);
155+
await createPackage(path, appName);
156+
await createTsConfig(path, appName);
157+
await createGatsbyFiles(components, path, appName, rootComponents);
158+
159+
}
160+
export default createGatsbyAppUtil;

‎app/src/utils/createGatsbyFiles.util.ts

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
// Create all component files for a Gatsby.js application
2+
// this function is identical to the Next.js function
3+
// "Root" level components are stored in a pages directory
4+
// all other components will be in a components directory
5+
6+
import { Component } from '../interfaces/Interfaces';
7+
8+
const isRoot = (component: Component, rootArray: number[]) => {
9+
return rootArray.includes(component.id) ? true : false;
10+
};
11+
12+
const createGatsbyFiles = (
13+
components: Component[],
14+
path: string,
15+
appName: string,
16+
rootComponents: number[]
17+
) => {
18+
let dir = path;
19+
dir = `${dir}/${appName}`;
20+
21+
const promises: Array<any> = [];
22+
components.forEach((component: Component) => {
23+
let code: string;
24+
let fileName: string;
25+
if (isRoot(component, rootComponents)) {
26+
if (component.id === 1) {
27+
// first root component must be index.tsx
28+
fileName = `${dir}/src/pages/index.tsx`;
29+
} else {
30+
fileName = `${dir}/src/pages/${component.name}.tsx`;
31+
}
32+
} else {
33+
fileName = `${dir}/src/components/${component.name}.tsx`;
34+
}
35+
const newPromise = new Promise((resolve, reject) => {
36+
window.api.writeFileSync(fileName, component.code, (err: any) => {
37+
if (err) return reject(err.message);
38+
return resolve(path);
39+
});
40+
});
41+
42+
promises.push(newPromise);
43+
});
44+
return Promise.all(promises);
45+
};
46+
47+
export default createGatsbyFiles;

‎app/src/utils/exportProject.util.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import createApplicationUtil from './createApplication.util';
22
import createNextApp from './createNextApp.util';
33
import createFiles from './createFiles.util';
4+
import createGatsbyApp from './createGatsbyApp.util';
45

56
// When a user clicks the "Export project" function from the app, this function is invoked
67
const exportProject = (
@@ -20,10 +21,13 @@ const exportProject = (
2021
else if (genOption === 0) {
2122
createFiles(components, path, appName, false);
2223
} // Create fully functional Next.js and Gatsby.js application files
23-
else if (genOption === 1 && (projectType === 'Next.js' || projectType === 'Gatsby.js')) {
24+
else if (genOption === 1 && projectType === 'Next.js') {
2425
createNextApp({ path, appName, components, rootComponents }).catch(err =>
2526
console.log(err)
2627
);
28+
} else if (genOption === 1 && projectType === 'Gatsby.js') {
29+
createGatsbyApp({ path, appName, components, rootComponents }).catch(err =>
30+
console.log(err));
2731
}
2832
};
2933

‎package.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
{
22
"name": "reactype",
3-
"version": "4.0.0",
3+
"version": "5.0.0",
44
"description": "Prototyping tool for React/Typescript Applications.",
55
"private": true,
66
"main": "app/electron/main.js",
77
"author": "OS Labs",
88
"contributors": [
99
"Aaron Bumanglag",
1010
"Adam Singer",
11+
"Alex Wolinsky",
1112
"Andrew Cho",
1213
"Brian Han",
1314
"Charles Finocchiaro",
@@ -18,6 +19,9 @@
1819
"Fredo Chen",
1920
"Jesse Zuniga",
2021
"Jin Soo Lim",
22+
"Julie Wu",
23+
"Linh Tran",
24+
"Luke Madden",
2125
"Mitchel Severe",
2226
"Natalie Vick",
2327
"Sean Sadykoff",

0 commit comments

Comments
 (0)