9 | {children}
10 |
11 | );
12 | };
13 |
--------------------------------------------------------------------------------
/webpack.main.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | /**
3 | * This is the main entry point for your application, it's the first file
4 | * that runs in the main process.
5 | */
6 | entry: './src/index.ts',
7 | // Put your normal webpack config below here
8 | module: {
9 | rules: require('./webpack.rules'),
10 | },
11 | resolve: {
12 | extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json']
13 | },
14 | };
--------------------------------------------------------------------------------
/src/manager/components/ComponentGenBlock/ComponentPreview.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { MarkdownWrapper } from '../../../common/MarkdownWrapper';
3 |
4 | export const ComponentPreview = ({ componentCode }: { componentCode: string }) => {
5 | return (
6 | <>
7 | Component Preview:
8 |
13 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/src/common/SplashScreen/Splash.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import * as ReactDOM from 'react-dom';
3 | import './splash.css';
4 |
5 | const Splash = () => {
6 | return (
7 | <>
8 | Reactirator
9 |
10 |
11 | );
12 | };
13 |
14 | function render() {
15 | ReactDOM.render(-
7 | {Object.entries(scripts).map((script, i) => {
8 | return
8 |
12 |
13 |
14 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/src/manager/components/pages/TasksPage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { TasksList } from '../TasksBlock/TasksList';
3 | import { TasksDevelopmentPane } from '../TasksBlock/TasksDevelopmentPane';
4 |
5 | export const TasksPage = () => {
6 | return (
7 | <>
8 |
9 |
11 | Tasks:
9 |
10 |
13 |
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/src/common/card.css:
--------------------------------------------------------------------------------
1 | .card {
2 | background: white;
3 | border: 1px solid #eaeaea;
4 | border-radius: 5px;
5 | text-align: left;
6 | padding: 1rem 2rem;
7 | flex: 1 1;
8 | display: flex;
9 | flex-direction: column;
10 | transition: box-shadow 0.2s ease, border 0.2s ease;
11 | }
12 |
13 | .card.lg {
14 | padding: 3rem;
15 | }
16 |
17 | .card:hover {
18 | transition: box-shadow 0.2s ease;
19 | box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
20 | border: 1px solid transparent;
21 | }
22 |
--------------------------------------------------------------------------------
/src/creator/components/Buttons/index.tsx:
--------------------------------------------------------------------------------
1 | export { ButtonAddPackage } from './ButtonAddPackage';
2 | export { ButtonCreation } from './ButtonCreation';
3 | export { ButtonRemovePackage } from './ButtonRemovePackage';
4 | export { ButtonRemoveScript } from './ButtonRemoveScript';
5 | export { ButtonSaveReadme } from './ButtonSaveReadme';
6 | export { ButtonGithubLogin } from './ButtonGithubLogin';
7 | export { ButtonRemoveFile } from './ButtonRemoveFile';
8 | export { ButtonEditFilename } from './ButtonEditFilename';
9 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "allowJs": true,
4 | "module": "commonjs",
5 | "skipLibCheck": true,
6 | "esModuleInterop": true,
7 | "noImplicitAny": true,
8 | "sourceMap": true,
9 | "baseUrl": ".",
10 | "outDir": "dist",
11 | "moduleResolution": "node",
12 | "resolveJsonModule": true,
13 | "paths": {
14 | "*": ["node_modules/*"]
15 | },
16 | "jsx": "react"
17 | },
18 | "include": [
19 | "src/**/*"
20 | , "build_msi.ts" ]
21 | }
22 |
--------------------------------------------------------------------------------
/src/creator/components/ScriptBlock/ScriptItem.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ButtonRemoveScript } from '../Buttons';
3 |
4 | export const ScriptItem = ({ script }: { script: any[] }) => {
5 | return (
6 |
13 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/src/creator/components/pages/DetailsPage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { formInputType } from '../../helpers/types';
4 |
5 | import { GithubSection } from '../GithubBlock';
6 | import { DetailsForm } from '../DetailsBlock';
7 |
8 | export const DetailsPage = ({
9 | input,
10 | setInput,
11 | }: {
12 | input: formInputType;
13 | setInput: (input: formInputType) => void;
14 | }) => {
15 | return (
16 | {JSON.stringify(packageJson, null, 2)}
14 |
17 |
20 | );
21 | };
22 |
--------------------------------------------------------------------------------
/src/creator/components/PackageManagerBlock/index.tsx:
--------------------------------------------------------------------------------
1 | export { ItemPackage } from './ItemPackage';
2 | export { ItemPackageFound } from './ItemPackageFound';
3 | export { ItemPackageTooltip } from './ItemPackageTooltip';
4 | export { ListPackages } from './ListPackages';
5 | export { ListPackagesSelected } from './ListPackagesSelected';
6 | export { ListPackagesFound } from './ListPackagesFound';
7 | export { SearchPackages } from './SearchPackages';
8 | export { CardDependencies } from './CardDependencies';
9 | export { PackagesManager } from './PackagesManager';
10 | export { DependencyModalCreator } from './DependencyModalCreator';
11 |
--------------------------------------------------------------------------------
/src/creator/components/pages/PackagesPage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { useDependencies } from '../Contexts/dependenciesProvider';
4 |
5 | import { Title } from '../../../common/Typo';
6 | import { PackagesManager } from '../PackageManagerBlock';
7 |
8 | export const PackagesPage = () => {
9 | const { listPackages, dispatch } = useDependencies();
10 |
11 | return (
12 |
13 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/src/manager/components/TasksBlock/TasksList.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useAppSelector } from '../../../hooks';
3 | import { TasksItem } from './TasksItem';
4 |
5 | export const TasksList = () => {
6 | const scripts = useAppSelector((state) => state.tasks.tasks);
7 | const startScript = useAppSelector((state) => state.project.scriptDev);
8 |
9 | return (
10 | -
11 | {Object.keys(scripts)
12 | .filter((ele) => ele !== startScript)
13 | .map((ele, i) => (
14 |
9 |
20 | );
21 | };
22 |
--------------------------------------------------------------------------------
/src/analytics/mixpanel.service.ts:
--------------------------------------------------------------------------------
1 | import mixpanel from 'mixpanel-browser';
2 | import { nanoid } from 'nanoid';
3 | import electronStore from './electron-store.service';
4 |
5 | type MixpanelEvent = 'app-launch' | 'new-project' | 'project-open';
6 |
7 | const API_KEY = '4423465541cae31b055ca3980d5f8663';
8 |
9 | mixpanel.init(API_KEY);
10 |
11 | export const mixpanelTracker = (event: MixpanelEvent, data?: any) => {
12 | let userId = electronStore.get('uid');
13 | if (!userId) {
14 | userId = nanoid(12);
15 | electronStore.set('uid', userId);
16 | }
17 | mixpanel.identify(userId as string);
18 | data === null ? mixpanel.track(event) : mixpanel.track(event, { ...data });
19 | };
20 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | .input {
6 | @apply block text-gray-700 text-center bg-gray-100 border border-gray-300 rounded-md py-2 px-3 placeholder-gray-500 focus:outline-none focus:bg-gray-50 focus:text-gray-900 focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-sm;
7 | }
8 |
9 | /* dark:placeholder-gray-400 dark:text-gray-50 dark:border-gray-600 dark:bg-gray-600 dark:focus:ring-1
10 | dark:focus:ring-indigo-500 dark:focus:bg-gray-900 dark:focus:border-transparent; */
11 |
12 | body {
13 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
14 | }
15 |
--------------------------------------------------------------------------------
/src/manager/components/pages/DependenciesPage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { DependenciesList, DependenciesSearch, DependencySelectedCard } from '../DependenciesBlock';
4 |
5 | export const DependenciesPage = () => {
6 | return (
7 | {children}
11 |
8 |
19 | );
20 | };
21 |
--------------------------------------------------------------------------------
/src/utils/runCmd.ts:
--------------------------------------------------------------------------------
1 | import child_process from 'child_process';
2 |
3 | export const runCmd = (cmd: string): PromiseDependencies:
10 |
11 |
18 |
12 |
14 |
15 |
17 |
13 |
18 | );
19 | };
20 |
21 | export const TreemapMemoized = React.memo(Treemap);
22 | */
23 |
--------------------------------------------------------------------------------
/src/store.ts:
--------------------------------------------------------------------------------
1 | import { configureStore } from '@reduxjs/toolkit';
2 | import dependenciesSlice from './slices/dependenciesSlice';
3 | import projectReducer from './slices/projectSlice';
4 | import projectSrcSlice from './slices/projectSrcSlice';
5 | import taskSlice from './slices/taskSlice';
6 |
7 | export const store = configureStore({
8 | reducer: {
9 | project: projectReducer,
10 | tasks: taskSlice,
11 | dependencies: dependenciesSlice,
12 | projectSrc: projectSrcSlice,
13 | },
14 | });
15 |
16 | // Infer the `RootState` and `AppDispatch` types from the store itself
17 | export type RootState = ReturnType
14 |
17 | Treemap (TODO)
15 | 16 |
20 |
27 | );
28 | };
29 |
--------------------------------------------------------------------------------
/src/creator/components/GithubBlock/GithubSection.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 |
3 | import { useGithub } from '../Contexts/GithubProvider';
4 | import { GithubForm } from './GithubForm';
5 | import { ButtonGithubLogin } from '../Buttons';
6 | import { Title } from '../../../common/Typo';
7 |
8 | export const GithubSection = () => {
9 | const [loading, setLoading] = useState(false);
10 | const { github } = useGithub();
11 |
12 | if (loading)
13 | return (
14 |
15 |
17 | );
18 | return (
19 | Authentication...
16 |
20 |
23 | );
24 | };
25 |
--------------------------------------------------------------------------------
/src/creator/components/pages/ArchitecturePage.tsx:
--------------------------------------------------------------------------------
1 | import React, { Dispatch } from 'react';
2 | import { structureStateType } from '../../helpers/types';
3 |
4 | import { CreateComponent, CreateFolder, TreeFolder } from '../ArchitectureBlock';
5 |
6 | export const ArchitecturePage = ({
7 | structure,
8 | dispatch,
9 | }: {
10 | structure: structureStateType;
11 | dispatch: Dispatch
15 |
23 | );
24 | };
25 |
--------------------------------------------------------------------------------
/src/creator/components/PackageManagerBlock/PackagesManager.tsx:
--------------------------------------------------------------------------------
1 | import React, { Dispatch } from 'react';
2 |
3 | import { actionPackageType, depStateType } from '../../helpers/types';
4 | import { LoadingPackageProvider } from '../Contexts/LoadingPackageProvider';
5 |
6 | import { SearchPackages } from './SearchPackages';
7 | import { ListPackages } from './ListPackages';
8 |
9 | export const PackagesManager = ({
10 | listPackages,
11 | dispatchPackages,
12 | }: {
13 | listPackages: depStateType;
14 | dispatchPackages: Dispatch
16 |
18 |
19 |
22 |
19 |
22 |
20 |
26 | );
27 | };
28 |
--------------------------------------------------------------------------------
/src/creator/components/ReadmeBlock/ReadmeSection.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { ReadmeEdit } from './ReadmeEdit';
3 | import { ReadmeHeader } from './ReadmeHeader';
4 | import { ReadmePreview } from './ReadmePreview';
5 |
6 | export const ReadmeSection = ({
7 | readme,
8 | setReadme,
9 | }: {
10 | readme: string;
11 | setReadme: (input: any) => void;
12 | }) => {
13 | const [tab, setTab] = useState21 | {data.name}@{data.version} 22 |
23 |{data.description}
24 |Npm score: {data.score.toPrecision(3)}
25 |
20 |
29 | );
30 | };
31 |
--------------------------------------------------------------------------------
/src/creator/helpers/steps.ts:
--------------------------------------------------------------------------------
1 | export const stepsCRA = [
2 | { index: 0, name: 'Overview', href: '/creator', status: 'current' },
3 | { index: 1, name: 'Features', href: '/creator/features', status: 'upcoming' },
4 | { index: 2, name: 'Packages', href: '/creator/packages', status: 'upcoming' },
5 | { index: 3, name: 'Components', href: '/creator/components', status: 'upcoming' },
6 | { index: 4, name: 'Installation', href: '/creator/installation', status: 'upcoming' },
7 | ];
8 |
9 | export const stepsVite = [
10 | { index: 0, name: 'Overview', href: '/creatorVite', status: 'current' },
11 | { index: 1, name: 'Features', href: '/creatorVite/features', status: 'upcoming' },
12 | { index: 2, name: 'Packages', href: '/creatorVite/packages', status: 'upcoming' },
13 | { index: 3, name: 'Components', href: '/creatorVite/components', status: 'upcoming' },
14 | { index: 4, name: 'Installation', href: '/creatorVite/installation', status: 'upcoming' },
15 | ];
16 |
--------------------------------------------------------------------------------
/src/creator/components/PackageManagerBlock/CardDependencies.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ClipLoader from 'react-spinners/ClipLoader';
3 |
4 | import { useLoading } from '../Contexts/LoadingPackageProvider';
5 | import { Card } from '../../../common/Card';
6 |
7 | export const CardDependencies = ({
8 | children,
9 | title,
10 | listPackages,
11 | }: {
12 | children: React.ReactNode;
13 | title: string;
14 | listPackages: { name: string; size: number }[];
15 | }) => {
16 | const { loading } = useLoading();
17 |
18 | return (
19 |
22 | {tab === 'Edit' ? (
23 |
28 |
21 |
28 | 22 | {title} ({listPackages.length}) : 23 |
24 |
25 | {loading ?
27 |
8 |
20 | );
21 | };
22 |
--------------------------------------------------------------------------------
/src/creator/components/ReadmeBlock/ReadmeEdit.tsx:
--------------------------------------------------------------------------------
1 | import React, { ChangeEvent } from 'react';
2 |
3 | export const ReadmeEdit = ({
4 | readme,
5 | setReadme,
6 | }: {
7 | readme: string;
8 | setReadme: (input: any) => void;
9 | }) => {
10 | const handleChange = (e: ChangeEventOpen a project.
10 |Pick a React project and start working.
11 |
12 |
16 | Open project
17 |
18 |
19 |
16 |
27 |
28 | );
29 | };
30 |
--------------------------------------------------------------------------------
/src/creator/components/Contexts/GithubProvider.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, createContext, useContext } from 'react';
2 | import { ReactNode } from 'react-markdown';
3 |
4 | export type GithubStateType = {
5 | token: string;
6 | reponame: string;
7 | visibility: 'public' | 'private';
8 | };
9 |
10 | type GithubContextType = {
11 | github: GithubStateType;
12 | setGithub: (github: GithubStateType) => void;
13 | };
14 |
15 | const initialState: GithubStateType = {
16 | token: '',
17 | reponame: '',
18 | visibility: 'public',
19 | };
20 |
21 | const githubContext = createContext
17 | {listFeatures.map((feature) => (
18 |
25 |
28 | ))}
29 |
30 | );
31 | };
32 |
--------------------------------------------------------------------------------
/src/creator/components/Buttons/ButtonEditFilename.tsx:
--------------------------------------------------------------------------------
1 | import React, { MouseEvent } from 'react';
2 |
3 | export const ButtonEditFilename = ({ setIsEdit }: { setIsEdit: (isEdit: boolean) => void }) => {
4 | const editNameItem = (e: MouseEvent{feature.title}
26 | {feature.description}
27 | -
12 | {Object.entries(dependencies.dependencies).map((ele) => (
13 |
17 |
32 | );
33 | };
34 |
--------------------------------------------------------------------------------
/src/creator/components/PackageCharts/PackagesSize.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import listDepsSize from '../../../utils/listDepsSize';
3 | import { depStateType } from '../../helpers/types';
4 | import { ChartSize } from '.';
5 |
6 | export const PackagesSize = ({
7 | listPackages,
8 | baseSize,
9 | }: {
10 | listPackages: depStateType;
11 | baseSize: number;
12 | }) => {
13 | const [depsSize, setDepsSize] = useState(0);
14 | const [devDepsSize, setDevDepsSize] = useState(0);
15 |
16 | useEffect(() => {
17 | setDepsSize(listDepsSize(listPackages.dependencies));
18 | setDevDepsSize(listDepsSize(listPackages.devDependencies));
19 | }, [listPackages]);
20 |
21 | return (
22 | -
19 | {rootItem.map((ele) => (
20 |
23 |
26 | );
27 | };
28 |
29 | export const PackagesSizeMemoized = React.memo(PackagesSize);
30 |
--------------------------------------------------------------------------------
/src/manager/components/TasksBlock/TaskStatut.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BadgeCheckIcon, CogIcon, ExclamationIcon } from '@heroicons/react/outline';
3 | import { taskStateType } from '../../helpers/types';
4 |
5 | const displayStateIcon = (taskState: string) => {
6 | switch (taskState) {
7 | case 'Success':
8 | return ;
9 | case 'Error':
10 | return ;
11 | case 'Pending':
12 | return ;
13 | }
14 | };
15 |
16 | const statusText: RecordInstall size (kb) :
24 |Idle
;
25 | } else {
26 | return (
27 |
28 | {displayStateIcon(taskState)}
29 | {statusText[taskState]}
30 |
31 | );
32 | }
33 | };
34 |
--------------------------------------------------------------------------------
/src/manager/components/DependenciesBlock/ListDependenciesFound.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef, useState } from 'react';
2 |
3 | import { dependencyFoundType } from '../../../manager/helpers/types';
4 | import { useModal } from '../../../hooks/useModal';
5 |
6 | import { DependencyItemFound } from './DependencyItemFound';
7 | import { DependencyModal } from './DependencyModal';
8 |
9 | export const ListDependenciesFound = ({ results }: { results: dependencyFoundType[] }) => {
10 | const [open, toggleModal] = useModal();
11 | const [depData, setDepData] = useState-
20 | {results.map((ele: dependencyFoundType) => (
21 |
36 | {
37 | // @ts-ignore
38 |
46 | );
47 | };
48 |
--------------------------------------------------------------------------------
/src/manager/components/Terminal/TerminalOutput.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef } from 'react';
2 | import { XTerm } from 'xterm-for-react';
3 | import { FitAddon } from 'xterm-addon-fit';
4 | import { useAppSelector } from '../../../hooks';
5 |
6 | type terminalOutputProps = {
7 | taskName: string;
8 | inModal?: boolean;
9 | };
10 |
11 | export const TerminalOutput = React.memo-
24 | {listPackages.length === 0 && (
25 |
Empty list
26 | )}
27 | {listPackages.map((ele, index) => (
28 |
34 | {children}
35 |
36 | );
37 | },
38 | };
39 |
40 | export const MarkdownWrapper = ({ content }: { content: string }) => {
41 | return (
42 |
33 | {children}
34 |
35 | );
36 | },
37 | };
38 |
39 | export const MarkdownWrapper = ({ content }: { content: string }) => {
40 | return (
41 |
11 |
33 | );
34 | };
35 |
--------------------------------------------------------------------------------
/src/creator/helpers/initialPackageJson.ts:
--------------------------------------------------------------------------------
1 | export const initialPackageJsonCRA = {
2 | name: '',
3 | version: '0.1.0',
4 | description: '',
5 | private: true,
6 | dependencies: {
7 | '@testing-library/jest-dom': '',
8 | '@testing-library/react': '',
9 | '@testing-library/user-event': '',
10 | react: '',
11 | 'react-dom': '',
12 | 'react-scripts': '',
13 | 'web-vitals': '',
14 | },
15 | scripts: {
16 | start: 'react-scripts start',
17 | build: 'react-scripts build',
18 | test: 'react-scripts test',
19 | eject: 'react-scripts eject',
20 | },
21 | eslintConfig: {
22 | extends: ['react-app', 'react-app/jest'],
23 | },
24 | browserslist: {
25 | production: ['>0.2%', 'not dead', 'not op_mini all'],
26 | development: ['last 1 chrome version', 'last 1 firefox version', 'last 1 safari version'],
27 | },
28 | devDependencies: {},
29 | };
30 |
31 | export const initialPackageJsonVite = {
32 | name: '',
33 | private: true,
34 | version: '0.1.0',
35 | type: 'module',
36 | scripts: {
37 | dev: 'vite',
38 | build: 'tsc && vite build',
39 | preview: 'vite preview',
40 | },
41 | dependencies: {
42 | react: '',
43 | 'react-dom': '',
44 | },
45 | devDependencies: {
46 | '@types/react': '',
47 | '@types/react-dom': '',
48 | '@vitejs/plugin-react': '',
49 | typescript: '',
50 | vite: '',
51 | },
52 | };
53 |
--------------------------------------------------------------------------------
/src/slices/projectSlice.ts:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line import/named
2 | import { createSlice, PayloadAction } from '@reduxjs/toolkit';
3 | import { projectStateType } from '../manager/helpers/types';
4 |
5 | const initialState: projectStateType = {
6 | projectName: '',
7 | projectPath: '',
8 | starter: '',
9 | scriptDev: '',
10 | isTypescript: false,
11 | loading: true,
12 | };
13 |
14 | export const projectSlice = createSlice({
15 | name: 'project',
16 | initialState,
17 | reducers: {
18 | resetProject: (state) => {
19 | state.loading = initialState.loading;
20 | state.projectName = initialState.projectName;
21 | state.projectPath = initialState.projectPath;
22 | state.starter = initialState.starter;
23 | state.scriptDev = initialState.scriptDev;
24 | state.isTypescript = initialState.isTypescript;
25 | },
26 | initProject: (state: projectStateType, action: PayloadActionReadme.md
12 |
13 |
22 |
31 |
32 |
16 |
38 | );
39 | };
40 |
--------------------------------------------------------------------------------
/src/creator/components/PackageManagerBlock/ItemPackage.tsx:
--------------------------------------------------------------------------------
1 | import React, { Dispatch } from 'react';
2 | import { Draggable } from 'react-beautiful-dnd';
3 | import { actionPackageType } from '../../helpers/types';
4 | import { ButtonRemovePackage } from '../Buttons';
5 |
6 | export const ItemPackage = ({
7 | type,
8 | packageName,
9 | index,
10 | dispatchPackages,
11 | }: {
12 | type: 'dependencies' | 'devDependencies';
13 | packageName: string;
14 | index: number;
15 | dispatchPackages: Dispatch
17 |
37 |
18 |
36 |
19 | Score:
20 |
35 | -
21 |
- 22 | Quality:{' '} 23 | {scoreDetail.quality.toFixed(3)} 24 | 25 |
- 26 | Popularity:{' '} 27 | {scoreDetail.popularity.toFixed(3)} 28 | 29 |
- 30 | Maintenance:{' '} 31 | {scoreDetail.maintenance.toFixed(3)} 32 | 33 |
{packageName}
35 | -
29 | {results.map((ele) => (
30 |
18 |
19 |
22 |
23 |
26 |
27 |
32 |
33 | );
34 | };
35 |
36 | const componentOptionsList = [
37 | {
38 | name: '',
39 | input: '',
40 | },
41 | ];
42 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | lerna-debug.log*
8 |
9 | package-lock.json
10 |
11 | # Diagnostic reports (https://nodejs.org/api/report.html)
12 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
13 |
14 | # Runtime data
15 | pids
16 | *.pid
17 | *.seed
18 | *.pid.lock
19 | .DS_Store
20 |
21 | # Directory for instrumented libs generated by jscoverage/JSCover
22 | lib-cov
23 |
24 | # Coverage directory used by tools like istanbul
25 | coverage
26 | *.lcov
27 |
28 | # nyc test coverage
29 | .nyc_output
30 |
31 | # node-waf configuration
32 | .lock-wscript
33 |
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 |
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 |
41 | # TypeScript v1 declaration files
42 | typings/
43 |
44 | # TypeScript cache
45 | *.tsbuildinfo
46 |
47 | # Optional npm cache directory
48 | .npm
49 |
50 | # Optional eslint cache
51 | .eslintcache
52 |
53 | # Optional REPL history
54 | .node_repl_history
55 |
56 | # Output of 'npm pack'
57 | *.tgz
58 |
59 | # Yarn Integrity file
60 | .yarn-integrity
61 |
62 | # dotenv environment variables file
63 | .env
64 | .env.test
65 |
66 | # parcel-bundler cache (https://parceljs.org/)
67 | .cache
68 |
69 | # next.js build output
70 | .next
71 |
72 | # nuxt.js build output
73 | .nuxt
74 |
75 | # vuepress build output
76 | .vuepress/dist
77 |
78 | # Serverless directories
79 | .serverless/
80 |
81 | # FuseBox cache
82 | .fusebox/
83 |
84 | # DynamoDB Local files
85 | .dynamodb/
86 |
87 | # Webpack
88 | .webpack/
89 |
90 | # Electron-Forge
91 | out/
92 |
93 | # Msi installer
94 | windows_installer
--------------------------------------------------------------------------------
/src/creator/components/PackageManagerBlock/ItemPackageFound.tsx:
--------------------------------------------------------------------------------
1 | import React, { Dispatch } from 'react';
2 | import { actionPackageType, packageFoundType } from '../../helpers/types';
3 | import { usePackageJson } from '../Contexts/PackageJsonProvider';
4 | import { dependencyFoundType } from '../../../manager/helpers/types';
5 |
6 | type propsType = {
7 | packageData: packageFoundType;
8 | dispatchPackages: DispatchFunction component
20 | Lorem dolor sit amet consectetur adipisicing elit.
21 | Styled component
24 | Lorem ipsum dolor sit amet adipisicing elit.
25 | Typescript
28 |
29 | Lorem ipsum dolor sit amet consectetur adipisicing elit.
30 |
31 |
33 | {packageData.name}
34 |
35 | ) : (
36 |
40 | {packageData.name}
41 |
42 | )}
43 |
13 |
28 |
41 | );
42 | };
43 |
--------------------------------------------------------------------------------
/src/__test__/e2e/main.test.ts:
--------------------------------------------------------------------------------
1 | import { ElectronApplication, Page } from 'playwright';
2 | import { test, expect } from '@playwright/test';
3 | import { startApp } from '../helpersElectron';
4 |
5 | let electronApp: ElectronApplication;
6 | let appWindow: Page;
7 |
8 | test.beforeEach(async () => {
9 | const startAppResponse = await startApp();
10 | electronApp = startAppResponse.electronApp;
11 | appWindow = startAppResponse.appWindow;
12 | });
13 |
14 | test.afterEach(async () => {
15 | await electronApp.close();
16 | });
17 |
18 | test.describe('app renders correctly', () => {
19 | test('display the correct window', async () => {
20 | const title = await appWindow.title();
21 | expect(title).toBe('Reactirator');
22 | });
23 |
24 | test('renders the menu', async () => {
25 | await expect(appWindow.locator('text=New Project')).toBeVisible();
26 | await expect(appWindow.locator('text=Open project')).toBeVisible();
27 | });
28 | });
29 |
30 | test.describe('creator part functions correctly', () => {
31 | test('display the creator part', async () => {
32 | const buttonCreator = appWindow.locator('text=New Project');
33 | buttonCreator.click();
34 | await appWindow.waitForSelector('text=Creation process');
35 | expect(appWindow.locator('text=Creation process')).toBeVisible();
36 | });
37 | });
38 |
39 | /*
40 | test.describe('manager part functions correctly', () => {
41 | test('display the manager part', async () => {
42 | const buttonManager = appWindow.locator('text=Open project');
43 | buttonManager.click();
44 | await appWindow.waitForSelector('text=Tasks:');
45 | const titlePage = appWindow.locator('text=Tasks:');
46 | expect(titlePage).toBeVisible();
47 | })
48 | });
49 | */
50 |
--------------------------------------------------------------------------------
/src/creator/reducers/dependenciesReducer.ts:
--------------------------------------------------------------------------------
1 | import { actionPackageType, depStateType } from '../helpers/types';
2 |
3 | const dependenciesReducer = (state: depStateType, { type, payload }: actionPackageType) => {
4 | switch (type) {
5 | case 'ADD':
6 | if (payload.destination === 'dependencies') {
7 | state['dependencies'].push({
8 | name: payload.name,
9 | size: payload.size,
10 | version: payload.version,
11 | dependencies: payload.dependencies,
12 | });
13 | return { ...state };
14 | } else {
15 | state['devDependencies'].push({
16 | name: payload.name,
17 | size: payload.size,
18 | version: payload.version,
19 | dependencies: payload.dependencies,
20 | });
21 | return { ...state };
22 | }
23 | case 'REMOVE':
24 | if (payload.destination === 'dependencies') {
25 | const newDeps = state['dependencies'].filter((ele: any) => ele.name !== payload.name);
26 | return { ...state, dependencies: newDeps };
27 | } else {
28 | const newDeps = state['devDependencies'].filter((ele: any) => ele.name !== payload.name);
29 | return { ...state, devDependencies: newDeps };
30 | }
31 | case 'CHANGE_TYPE': {
32 | // @ts-ignore
33 | const dep = state[payload.source].find((ele) => ele.name === payload.name);
34 | // @ts-ignore
35 | const newDeps = state[payload.source].filter((ele) => ele.name !== payload.name);
36 | // @ts-ignore
37 | state[payload.destination].push(dep);
38 | return { ...state, [payload.source]: newDeps };
39 | }
40 | default:
41 | throw new Error();
42 | }
43 | };
44 |
45 | export default dependenciesReducer;
46 |
--------------------------------------------------------------------------------
/src/manager/components/TasksBlock/TasksItem.tsx:
--------------------------------------------------------------------------------
1 | import { ipcRenderer } from 'electron';
2 | import React, { useEffect } from 'react';
3 | import { useAppSelector } from '../../../hooks';
4 | import { useModal } from '../../../hooks/useModal';
5 |
6 | import { Card } from '../../../common/Card';
7 | import { TaskSwitch } from './TaskSwitch';
8 | import { TaskModal } from './TaskModal';
9 | import { TaskStatut } from './TaskStatut';
10 |
11 | export const TasksItem = ({ taskName }: { taskName: string }) => {
12 | const [open, toggleModal] = useModal();
13 | const task = useAppSelector((state) => state.tasks.tasks[taskName]);
14 |
15 | useEffect(() => {
16 | if (!task.enabled && task.taskState === 'Pending') {
17 | ipcRenderer.send('kill-process', { taskName: taskName });
18 | }
19 | }, [task.enabled]);
20 |
21 | return (
22 | Create a project.
29 |Get started with a fresh new React project.
30 |
31 |
38 |
40 |
24 |
40 |
25 | {taskName}
26 |
27 |
28 |
30 |
31 |
37 |
38 |
9 |
10 |
11 | )
12 | };`;
13 |
14 | case 'rcc':
15 | return `import React, { Component } from 'react';
16 |
17 | export default class ${name} extends Component {
18 | render() {
19 | return (
20 |
21 |
22 |
23 | )
24 | }
25 | };`;
26 |
27 | case 'rfce':
28 | return `import React from 'react';
29 |
30 | function ${name}() {
31 | return
32 | };
33 |
34 | export default ${name};`;
35 |
36 | case 'rafc':
37 | return `import React from 'react';
38 |
39 | export const ${name} = () => {
40 | return (
41 |
42 |
43 |
44 | )
45 | };`;
46 |
47 | case 'rafce':
48 | return `import React from 'react';
49 |
50 | const ${name} = () => {
51 | return
52 | };
53 |
54 | export default ${name};`;
55 |
56 | case 'rafcp':
57 | return `import React from 'react';
58 | import PropTypes from 'prop-types'
59 |
60 | const ${name} = props => {
61 | return (
62 |
63 | )
64 | }
65 |
66 | ${name}.propTypes = {}
67 |
68 | export default ${name}`;
69 |
70 | case 'rmc':
71 | return `import React, { memo } from 'react';
72 |
73 | const ${name} = memo(() => {
74 | return (
75 |
76 | )
77 | });
78 |
79 | export default ${name};`;
80 |
81 | default:
82 | console.log('Error unknown component case');
83 | }
84 | };
85 |
86 | export default createTemplateComponent;
87 |
--------------------------------------------------------------------------------
/src/common/Input.tsx:
--------------------------------------------------------------------------------
1 | import React, { ChangeEventHandler } from 'react';
2 |
3 | type inputProps = {
4 | className?: string;
5 | value?: string;
6 | name?: string;
7 | id?: string;
8 | placeholder?: string;
9 | type?: string;
10 | onChange?: ChangeEventHandler
35 |
49 | );
50 | };
51 |
--------------------------------------------------------------------------------
/src/manager/components/HeaderManager.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { useAppSelector } from '../../hooks';
4 |
5 | export const HeaderManager = ({
6 | projectName,
7 | taskState,
8 | }: {
9 | projectName: string;
10 | taskState: string;
11 | }) => {
12 | const starterName = useAppSelector((state) => state.project.starter);
13 |
14 | const pathToLogo = (starterName: string) => {
15 | if (starterName === 'CRA') {
16 | return '../assets/logo_starter/cra.svg';
17 | }
18 | if (starterName === 'next') {
19 | return '../assets/logo_starter/nextjs.svg';
20 | }
21 | if (starterName === 'gatsby') {
22 | return '../assets/logo_starter/gatsby.png';
23 | }
24 | if (starterName === 'remix') {
25 | return '../assets/logo_starter/remix.svg';
26 | }
27 | if (starterName === 'vite') {
28 | return '../assets/logo_starter/vite.svg';
29 | }
30 | };
31 |
32 | return (
33 | Component generator
36 |
37 | Select folder
38 | {location && (
39 |
47 |
40 | Location:{' '}
41 |
42 | {location}
43 |
44 |
45 | )}
46 |
34 | {starterName !== '' && (
35 | })
36 | )}
37 | {projectName}
38 |
53 | );
54 | };
55 |
--------------------------------------------------------------------------------
/src/creator/Creator.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useReducer } from 'react';
2 | import { Route, useRouteMatch } from 'react-router-dom';
3 |
4 | import { formInputType } from './helpers/types';
5 | import { initialState } from './helpers/initialState';
6 | import initialStructure from './helpers/initialStructure';
7 | import structureReducer from './reducers/structureReducer';
8 |
9 | import { PackagesPage } from './components/pages/PackagesPage';
10 | import { ArchitecturePage } from './components/pages/ArchitecturePage';
11 | import { DetailsPage } from './components/pages/DetailsPage';
12 | import { FeaturesPage } from './components/pages/FeaturesPage';
13 | import { LayoutCreator } from './components/LayoutCreator';
14 | import { InstallationPage } from './components/pages/InstallationPage';
15 |
16 | const Creator = () => {
17 | const [input, setInput] = useState
39 |
40 |
45 |
50 |
51 |
52 |
19 |
50 | );
51 | };
52 |
--------------------------------------------------------------------------------
/src/manager/components/ComponentGenBlock/ComponentSwitch.tsx:
--------------------------------------------------------------------------------
1 | import { Switch } from '@headlessui/react';
2 | import React, { ReactNode } from 'react';
3 | import { formCompType } from '../../helpers/types';
4 |
5 | export const ComponentSwitch = ({
6 | children,
7 | name,
8 | setInput,
9 | input,
10 | }: {
11 | children: ReactNode;
12 | name: string;
13 | setInput: (input: formCompType) => void;
14 | input: any;
15 | }) => {
16 | const handleChange = async () => {
17 | setInput({ ...input, [name]: !input[name] });
18 | };
19 |
20 | return (
21 |
20 |
24 |
25 | Menu
26 |
27 |
28 |
29 | 
30 |
31 |
30 |
32 |
34 | Creation process
33 |
35 |
37 | {children}
38 |
39 |
41 |
23 |
24 | {children}
25 |
26 |
31 | Enable
32 |
36 |
43 |
48 |
49 |
50 | Scripts edit
32 | 53 |
19 |
62 | );
63 | };
64 |
--------------------------------------------------------------------------------
/src/manager/components/TasksBlock/TasksDevelopmentPane.tsx:
--------------------------------------------------------------------------------
1 | // import { shell } from 'electron';
2 | import React from 'react';
3 | import launchEditor from 'react-dev-utils/launchEditor';
4 |
5 | import { useAppSelector } from '../../../hooks';
6 |
7 | import { Card } from '../../../common/Card';
8 | import { TerminalOutput } from '../Terminal';
9 | import { TaskMainSwitch } from './TaskSwitch';
10 |
11 | export const TasksDevelopmentPane = () => {
12 | const startScript = useAppSelector((state) => state.project.scriptDev);
13 | const projectPath = useAppSelector((state) => state.project.projectPath);
14 | const redirectToEditor = () => {
15 | launchEditor(projectPath, 1, 1);
16 | };
17 |
18 | return (
19 |
20 |
23 |
32 |
33 |
34 |
61 |
35 |
60 |
36 |
43 |
46 |
47 |
48 |
55 |
58 |
59 |
21 |
52 |
22 |
48 | Development server
23 |
24 |
26 |
47 |
49 |
51 |
7 |
54 | );
55 | };
56 |
--------------------------------------------------------------------------------
/src/creator/components/ReadmeBlock/markdown.css:
--------------------------------------------------------------------------------
1 | /* Additional vertical padding used by kbd tag. */
2 | .py-05 {
3 | padding-top: 0.125rem;
4 | padding-bottom: 0.125rem;
5 | }
6 |
7 | .markdown {
8 | @apply leading-normal break-words text-white;
9 | }
10 |
11 | .markdown > * + * {
12 | @apply mt-0 mb-4;
13 | }
14 |
15 | .markdown li + li {
16 | @apply mt-1;
17 | }
18 |
19 | .markdown li > p + p {
20 | @apply mt-6;
21 | }
22 |
23 | .markdown strong {
24 | @apply font-semibold;
25 | }
26 |
27 | .markdown a {
28 | @apply text-indigo-500 font-semibold;
29 | }
30 |
31 | .markdown strong a {
32 | @apply font-bold;
33 | }
34 |
35 | .markdown h1 {
36 | @apply leading-tight border-b text-4xl font-semibold text-white mb-4 mt-6 pb-2;
37 | }
38 |
39 | .markdown h2 {
40 | @apply leading-tight border-b text-2xl font-semibold text-white mb-4 mt-6 pb-2;
41 | }
42 |
43 | .markdown h3 {
44 | @apply leading-snug text-lg font-semibold mb-4 text-white mt-6;
45 | }
46 |
47 | .markdown h4 {
48 | @apply leading-none text-base font-semibold mb-4 text-white mt-6;
49 | }
50 |
51 | .markdown h5 {
52 | @apply leading-tight text-sm font-semibold mb-4 mt-6;
53 | }
54 |
55 | .markdown h6 {
56 | @apply leading-tight text-sm font-semibold text-white mb-4 mt-6;
57 | }
58 |
59 | .markdown blockquote {
60 | @apply text-base border-l-4 border-gray-300 pl-4 pr-4 text-white;
61 | }
62 |
63 | .markdown code {
64 | @apply font-mono text-sm inline rounded px-1 py-5;
65 | }
66 |
67 | .markdown pre {
68 | @apply rounded p-4;
69 | }
70 |
71 | .markdown pre code {
72 | @apply block p-0 overflow-visible rounded-none;
73 | }
74 |
75 | .markdown ul {
76 | @apply text-base pl-8 list-disc;
77 | }
78 |
79 | .markdown ol {
80 | @apply text-base pl-8 list-decimal;
81 | }
82 |
83 | .markdown kbd {
84 | @apply text-xs inline-block rounded border px-1 py-0 align-middle font-normal font-mono shadow;
85 | }
86 |
87 | .markdown table {
88 | @apply text-base border-gray-200;
89 | }
90 |
91 | .markdown th {
92 | @apply border py-1 px-3;
93 | }
94 |
95 | .markdown td {
96 | @apply border py-1 px-3;
97 | }
98 |
99 | /* Override pygments style background color. */
100 | .markdown .highlight pre {
101 | @apply bg-gray-200 border-gray-500 !important;
102 | }
103 |
--------------------------------------------------------------------------------
/src/creator/components/pages/SuccessPage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import launchEditor from 'react-dev-utils/launchEditor';
3 | import { Link } from 'react-router-dom';
4 | import { ArrowLeftIcon } from '@heroicons/react/outline';
5 |
6 | export const SuccessPage = ({ location }: { location: { pathname: string; state: string } }) => {
7 | const projectPath = location.state;
8 |
9 | const redirectToEditor = () => {
10 | try {
11 | launchEditor(projectPath, 1, 1);
12 | } catch (error) {
13 | console.log(error);
14 | }
15 | };
16 |
17 | return (
18 |
8 |
53 |
9 |
10 |
13 |
14 |
15 |
16 |
33 |
51 |
52 |
19 |
57 | );
58 | };
59 |
--------------------------------------------------------------------------------
/src/__test__/integration/details.test.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @jest-environment jsdom
3 | */
4 | import React, { useReducer, useState } from 'react';
5 | import { cleanup, render, screen, fireEvent } from '@testing-library/react';
6 | import '@testing-library/jest-dom/extend-expect';
7 |
8 | import initialPackageJson from '../../creator/helpers/initialPackageJson';
9 | import initialState from '../../creator/helpers/initialState';
10 |
11 | import jsonPackageReducer from '../../creator/reducers/jsonPackageReducer';
12 | import { PackageJsonProvider } from '../../creator/components/Contexts/PackageJsonProvider';
13 | import { CardPackageJson } from '../../creator/components/PackageJsonBlock';
14 | import { DetailsForm } from '../../creator/components/DetailsBlock';
15 |
16 | afterEach(cleanup);
17 |
18 | describe('change information about the project', () => {
19 | it('should render the details form', () => {
20 | const tree = render(
20 |
56 |
21 |
55 | Congratulation !
22 |
23 | 
24 |
25 |
24 | Your project has been created successfully.
26 | 47 | 51 | 52 | Menu 53 | 54 |
54 |
55 |
61 |
62 |
68 |
69 |
39 |
40 | {children}
41 |
42 |
47 | Run
48 |
52 |
59 |
64 |
65 |
66 |
63 |
76 | );
77 | };
78 |
--------------------------------------------------------------------------------
/src/creator/helpers/featuresLists.ts:
--------------------------------------------------------------------------------
1 | import { featureType } from './types';
2 |
3 | export const featuresListCRA: featureType[] = [
4 | {
5 | title: 'Typescript',
6 | description: 'A strongly typed programming language.',
7 | name: 'typescript',
8 | packageName: 'typescript',
9 | link: 'https://www.typescriptlang.org/',
10 | },
11 | {
12 | title: 'Flow',
13 | description: 'A Static Type Checker for JavaScript.',
14 | name: 'flow',
15 | packageName: 'flow-bin',
16 | link: 'https://flow.org/',
17 | },
18 | {
19 | title: 'Prettier',
20 | description: 'An opinionated code formatter.',
21 | name: 'prettier',
22 | packageName: 'prettier',
23 | link: 'https://prettier.io/',
24 | },
25 | {
26 | title: 'Bundle analyze',
27 | description: 'Visualize size of files with an interactive zoomable treemap.',
28 | name: 'sourcemapexplorer',
29 | packageName: 'source-map-explorer',
30 | link: 'https://github.com/danvk/source-map-explorer',
31 | },
32 | {
33 | title: 'Storybook',
34 | description: 'A tool for building UI components and pages in isolation.',
35 | name: 'storybook',
36 | packageName: 'storybook',
37 | link: 'https://storybook.js.org/',
38 | },
39 | {
40 | title: 'Tailwindcss',
41 | description: 'A utility-first CSS framework.',
42 | name: 'tailwind',
43 | packageName: 'tailwind',
44 | link: 'https://tailwindcss.com/',
45 | },
46 | {
47 | title: 'Bootstrap',
48 | description: 'CSS Framework for developing responsive websites.',
49 | name: 'bootstrap',
50 | packageName: 'bootstrap',
51 | link: 'https://getbootstrap.com/',
52 | },
53 | {
54 | title: 'Css reset',
55 | description: 'Reset stylesheet to reduce browser inconsistencies.',
56 | name: 'normalize',
57 | packageName: 'normalize.css',
58 | link: 'https://necolas.github.io/normalize.css/',
59 | },
60 | ];
61 |
62 | export const featuresListVite: featureType[] = [
63 | {
64 | title: 'Typescript',
65 | description: 'A strongly typed programming language.',
66 | name: 'typescript',
67 | packageName: 'typescript',
68 | link: 'https://www.typescriptlang.org/',
69 | },
70 | {
71 | title: 'Prettier',
72 | description: 'An opinionated code formatter.',
73 | name: 'prettier',
74 | packageName: 'prettier',
75 | link: 'https://prettier.io/',
76 | },
77 | {
78 | title: 'Tailwindcss',
79 | description: 'A utility-first CSS framework.',
80 | name: 'tailwind',
81 | packageName: 'tailwind',
82 | link: 'https://tailwindcss.com/',
83 | },
84 | {
85 | title: 'Bootstrap',
86 | description: 'CSS Framework for developing responsive websites.',
87 | name: 'bootstrap',
88 | packageName: 'bootstrap',
89 | link: 'https://getbootstrap.com/',
90 | },
91 | ];
92 |
--------------------------------------------------------------------------------
/src/creator/components/StepControlButtons.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/solid';
3 | import { useLocation, useHistory } from 'react-router-dom';
4 |
5 | import { starterType } from '../helpers/types';
6 | import { stepsCRA, stepsVite } from '../helpers/steps';
7 |
8 | export const StepControlButtons = ({ starter }: { starter: starterType }) => {
9 | const location = useLocation();
10 | const history = useHistory();
11 | const [steps, setSteps] = useState(starter === 'cra' ? [...stepsCRA] : [...stepsVite]);
12 | const [stepsUrl, setStepsUrl] = useState({
13 | previousStep: '',
14 | nextStep: '',
15 | });
16 |
17 | useEffect(() => {
18 | const currentStepIndex = steps.find((ele) => ele.href === location.pathname).index;
19 | const nextStep = steps.find((ele) => ele.index === currentStepIndex + 1)?.href;
20 | const previousStep = steps.find((ele) => ele.index === currentStepIndex - 1)?.href;
21 | setStepsUrl({ previousStep: previousStep, nextStep: nextStep });
22 | }, [location.pathname]);
23 |
24 | const goNext = () => {
25 | history.push(stepsUrl.nextStep);
26 | };
27 |
28 | const goBack = () => {
29 | history.push(stepsUrl.previousStep);
30 | };
31 |
32 | return (
33 |
34 | {location.pathname !== '/creator' && location.pathname !== '/creatorVite' && (
35 |
46 | )}
47 | {location.pathname !== '/creator/installation' &&
48 | location.pathname !== '/creatorVite/installation' && (
49 |
60 | )}
61 |
62 | );
63 | };
64 |
--------------------------------------------------------------------------------
/src/assets/logo_starter/remix.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/creator/components/DetailsBlock/DetailsForm.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef } from 'react';
2 |
3 | import { formInputType } from '../../helpers/types';
4 |
5 | import { usePackageJson } from '../Contexts/PackageJsonProvider';
6 | import { TextArea, Input } from '../../../common/Input';
7 | import { Title } from '../../../common/Typo';
8 |
9 | export const DetailsForm = ({
10 | input,
11 | setInput,
12 | }: {
13 | input: formInputType;
14 | setInput: (input: formInputType) => void;
15 | }) => {
16 | const { packageJson, dispatchJson } = usePackageJson();
17 |
18 | const appname_ref = useRef
64 |
65 |
66 |
74 | {isOpen &&
37 |
89 | );
90 | };
91 |
--------------------------------------------------------------------------------
/src/creator/helpers/types.ts:
--------------------------------------------------------------------------------
1 | export type formInputType = {
2 | appname: string;
3 | description: string;
4 | version: string;
5 | typescript: boolean;
6 | prettier: boolean;
7 | flow: boolean;
8 | tailwind: boolean;
9 | bootstrap: boolean;
10 | reactbootstrap?: boolean;
11 | materialui?: boolean;
12 | styledcomponents?: boolean;
13 | normalize: boolean;
14 | reactrouter?: boolean;
15 | proptypes?: boolean;
16 | sourcemapexplorer: boolean;
17 | storybook?: boolean;
18 | };
19 |
20 | export type actionPackageType = {
21 | type: 'CHANGE_TYPE' | 'ADD' | 'REMOVE';
22 | payload: {
23 | destination: 'dependencies' | 'devDependencies';
24 | source?: string;
25 | name: string;
26 | size?: number;
27 | version?: string;
28 | dependencies?: string[];
29 | };
30 | };
31 |
32 | export type actionJsonType =
33 | | {
34 | type: 'CHANGE_INFO';
35 | payload: {
36 | name: string;
37 | version: string;
38 | description: string;
39 | };
40 | }
41 | | {
42 | type: 'CHANGE_SCRIPTS';
43 | payload: {
44 | scripts: string;
45 | };
46 | }
47 | | {
48 | type: 'ADD' | 'REMOVE';
49 | payload: {
50 | category: string;
51 | name: string;
52 | version?: string;
53 | description?: string;
54 | scripts?: string;
55 | };
56 | }
57 | | {
58 | type: string;
59 | payload: {
60 | category?: string;
61 | name?: string;
62 | version: string;
63 | description?: string;
64 | scripts?: string;
65 | };
66 | };
67 |
68 | export type listPackageType = packageFoundType[];
69 |
70 | export type packageFoundType = {
71 | name: string;
72 | version: string;
73 | description: string;
74 | score: number;
75 | };
76 |
77 | export type depStateType = {
78 | dependencies: { name: string; size: number; version: string; dependencies: string[] }[];
79 | devDependencies: { name: string; size: number; version: string; dependencies: string[] }[];
80 | };
81 |
82 | export type FileStructureType = {
83 | id: string;
84 | name: string;
85 | ancestor: string;
86 | isFolder: boolean;
87 | mode?: string;
88 | path: string;
89 | };
90 |
91 | export type structureStateType = FileStructureType[];
92 |
93 | export type AuthOptions = {
94 | hostname: string;
95 | clientId: string;
96 | clientSecret: string;
97 | };
98 |
99 | /**
100 | * The name of the tool to generate a react project, only CRA (create-react-app) or vite are supported at this time
101 | */
102 | export type starterType = 'vite' | 'cra';
103 |
104 | /**
105 | * The structure to display each features (e.g tailwind, typescript) which can be installed in a project from the feature page.
106 | */
107 | export type featureType = {
108 | title: string;
109 | description: string;
110 | name: string;
111 | packageName: string;
112 | link: string;
113 | };
114 |
--------------------------------------------------------------------------------
/src/manager/components/DependenciesBlock/DependenciesSearch.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useRef, useEffect, MouseEvent } from 'react';
2 | import { SearchIcon } from '@heroicons/react/outline';
3 |
4 | import { searchPackages } from '../../../services/package.service';
5 | import { dependencyFoundType } from '../../../manager/helpers/types';
6 |
7 | import { Card } from '../../../common/Card';
8 | import { Input } from '../../../common/Input';
9 | import { ListDependenciesFound } from './ListDependenciesFound';
10 |
11 | export const DependenciesSearch = () => {
12 | const [input, setInput] = useState
39 |
42 |
55 |
43 |
53 |
54 |
56 |
59 |
72 |
60 |
70 |
71 |
73 |
76 |
88 |
77 |
86 |
87 |
63 |
79 | Add packages
64 |
65 |
77 | {isOpen &&
66 |
67 |
68 |
76 |
24 |
25 | {mode}
26 |
27 |
28 |
29 |
30 |
31 |
38 |
39 | {modeList.map((ele, i) => (
40 |
43 | classNames(
44 | active ? 'text-white bg-indigo-600' : 'text-gray-900',
45 | 'relative cursor-default select-none py-2 pl-3 pr-9'
46 | )
47 | }
48 | value={ele}
49 | >
50 | {({ active, selected }) => (
51 | <>
52 |
58 | {ele}
59 |
60 |
61 | {selected ? (
62 |
68 |
69 |
70 | ) : null}
71 |
72 | )}
73 |
74 | ))}
75 |
76 |
77 |
78 |
79 | )}
80 |