Skip to content

Commit

Permalink
Redesign create project and do minor ui changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@rahulyadav-57
rahulyadav-57 committed Nov 10, 2023
1 parent 10c5c51 commit 208aa6c
Show file tree
Hide file tree
Showing 14 changed files with 239 additions and 125 deletions.
70 changes: 68 additions & 2 deletions src/components/project/NewProject/NewProject.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,82 @@

cursor: pointer;
}

.btnActionContainer {
margin-bottom: 1rem;
}
.btnAction {
width: 100%;
height: 2.5rem;
font-weight: 600;
svg {
width: 1rem;
height: 1rem;
}
}

.fileUploadLabel {
font-size: 0.85rem;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
margin: 1rem 0;
.icon {
font-size: 1.2rem;
}
span {
opacity: 0.8;
}
}

.optionSelection {
[class*='ant-radio-group'] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
[class*='ant-radio-button-wrapper'] {
border: 0 !important;
text-align: center;
color: #fff;
border-radius: var(--border-radius);
&:not(.ant-radio-button-wrapper-checked) {
background-color: rgba(46, 46, 51, 0.5);
}
&::before {
display: none !important;
}
span {
color: #fff;
}

[class*='ant-radio-button-checked'] {
border: solid 1px transparent;
background-image: linear-gradient(rgb(20, 20, 20), rgb(20, 20, 20)),
var(--primary-gradient);
background-origin: border-box;
background-clip: content-box, border-box;
border-radius: var(--border-radius);

&::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: #000;
z-index: -1;
border-radius: inherit;
}
}
}
}

.title {
text-align: center;
display: block;
font-size: 1.3rem;
font-size: 1.1rem;
}
.newIcon {
width: 1.1rem;
Expand All @@ -24,5 +89,6 @@
.form {
margin-top: 1.5rem;
.formItem {
margin-bottom: 1rem;
}
}
179 changes: 73 additions & 106 deletions src/components/project/NewProject/NewProject.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import AppIcon from '@/components/ui/icon';
import AppIcon, { AppIconType } from '@/components/ui/icon';
import { useWorkspaceActions } from '@/hooks/workspace.hooks';
import { UploadOutlined } from '@ant-design/icons';
import { Button, Form, Input, Modal, Radio, Upload, message } from 'antd';
import { useForm } from 'antd/lib/form/Form';
import { FC, useEffect, useState } from 'react';
Expand All @@ -17,9 +16,20 @@ import s from './NewProject.module.scss';
interface Props {
className?: string;
ui?: 'icon' | 'button';
projectType?: 'default' | 'local' | 'git';
label?: string;
icon?: AppIconType;
heading?: string;
}

const NewProject: FC<Props> = ({ className = '', ui = 'icon' }) => {
const NewProject: FC<Props> = ({
className = '',
ui = 'icon',
projectType = 'default',
label = 'Create',
icon = 'Plus',
heading = 'New Project',
}) => {
const [isActive, setIsActive] = useState(false);
const { projects } = useWorkspaceActions();
const { createProject } = useProjectActions();
Expand All @@ -38,16 +48,6 @@ const NewProject: FC<Props> = ({ className = '', ui = 'icon' }) => {
const templatedList = [
{ label: 'Blank Contract', value: 'tonBlank' },
{ label: 'Counter Contract', value: 'tonCounter' },
// { label: 'NFT Contract', value: 'nft', lang: 'tact' },

{ label: 'Import Contract', value: 'import' },

// { label: 'Chat Bot Contract', value: 'chatBot' },
];

const importOptions = [
{ label: 'From Github', value: 'github', default: true },
{ label: 'From local', value: 'local' },
];

const onFormFinish = async (values: any) => {
Expand All @@ -60,14 +60,14 @@ const NewProject: FC<Props> = ({ className = '', ui = 'icon' }) => {
throw `Project '${projectName}' already exists`;
}

if (importType === 'github') {
if (projectType === 'git') {
files = await downloadRepo(githubUrl);
}

const projectId = await createProject(
projectName,
language,
values.template,
values.template || 'import',
values?.file?.file,
files
);
Expand All @@ -77,7 +77,7 @@ const NewProject: FC<Props> = ({ className = '', ui = 'icon' }) => {
Analytics.track('Create project', {
platform: 'IDE',
type: `TON - ${language}`,
sourceType: importType,
sourceType: projectType,
template: values.template,
});
message.success(`Project '${projectName}' created`);
Expand Down Expand Up @@ -118,61 +118,6 @@ const NewProject: FC<Props> = ({ className = '', ui = 'icon' }) => {
setIsActive(false);
};

const projectImport = (fieldGetter: any) => (
<div className="">
<Form.Item
label="Import Type"
name="importType"
className={s.formItem}
rules={[{ required: true }]}
>
<Radio.Group options={importOptions} optionType="button" />
</Form.Item>
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) =>
prevValues.importType !== currentValues.importType
}
>
{() =>
fieldGetter('importType') === 'local' ? (
<Form.Item
label="Select contract zip file"
name="file"
className={s.formItem}
rules={[{ required: true }]}
>
<Upload
accept=".zip"
multiple={false}
maxCount={1}
beforeUpload={(file) => {
return false;
}}
>
<Button icon={<UploadOutlined />}>Select File</Button>
</Upload>
</Form.Item>
) : (
<Form.Item
label="Github Repository URL"
name="githubUrl"
className={s.formItem}
rules={[
{
required: true,
message: 'Please input your Github Repository URL',
},
]}
>
<Input placeholder="Ex. https://github.com/nujan-io/ton-contracts/" />
</Form.Item>
)
}
</Form.Item>
</div>
);

useEffect(() => {
EventEmitter.on('ONBOARDOING_NEW_PROJECT', () => {
setIsActive(true);
Expand All @@ -184,12 +129,12 @@ const NewProject: FC<Props> = ({ className = '', ui = 'icon' }) => {

return (
<>
<Tooltip title="New Project" placement="bottom">
<Tooltip title={heading} placement="bottom">
<div
className={`${s.root} ${className} onboarding-new-project}`}
className={`${s.root} ${className} onboarding-new-project`}
onClick={() => setIsActive(true)}
>
{ui === 'icon' && <AppIcon name="Plus" className={s.newIcon} />}
{ui === 'icon' && <AppIcon name={icon} className={s.newIcon} />}
{ui === 'button' && (
<Button
type="primary"
Expand All @@ -207,72 +152,94 @@ const NewProject: FC<Props> = ({ className = '', ui = 'icon' }) => {
onCancel={closeModal}
footer={null}
>
<span className={s.title}>New Project</span>
<span className={s.title}>{heading}</span>
<Form
form={form}
className={s.form}
className={`${s.form} app-form`}
layout="vertical"
onFinish={onFormFinish}
autoComplete="off"
initialValues={{ template: 'tonCounter', language: 'tact' }}
requiredMark="optional"
onFieldsChange={(changedField) => {
if (changedField[0].value === 'import') {
form.setFieldsValue({ importType: 'github' });
}
}}
>
<div className="top-header">
<Form.Item
label="Name"
name="name"
className={s.formItem}
rules={[
{ required: true, message: 'Please input your project name!' },
]}
>
<Input placeholder="Ex. Counter" />
<Input placeholder="Project name" />
</Form.Item>

<Form.Item
label="Language"
name="language"
className={s.formItem}
className={`${s.formItem} ${s.optionSelection}`}
rules={[{ required: true }]}
>
<Radio.Group options={language} optionType="button" />
</Form.Item>
</div>

<Form.Item
label="Select Template/Import"
name="template"
className={`${s.formItem} template-selector`}
>
<Radio.Group options={templatedList} optionType="button" />
</Form.Item>
{projectType === 'default' && (
<Form.Item
label="Select Template"
name="template"
className={`${s.formItem} ${s.optionSelection} template-selector`}
>
<Radio.Group options={templatedList} optionType="button" />
</Form.Item>
)}

<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) =>
prevValues.template !== currentValues.template
}
>
{({ getFieldValue }) =>
getFieldValue('template') === 'import'
? projectImport(getFieldValue)
: null
}
</Form.Item>
{projectType === 'local' && (
<Form.Item
label="Select contract zip file"
name="file"
className={s.formItem}
rules={[{ required: true }]}
>
<Upload.Dragger
accept=".zip"
multiple={false}
maxCount={1}
beforeUpload={(file) => {
return false;
}}
>
<div className={s.fileUploadLabel}>
<AppIcon name="Download" className={s.icon} />
<b>Choose a file</b> <span>or drag it here</span>
</div>
</Upload.Dragger>
</Form.Item>
)}

{projectType === 'git' && (
<Form.Item
label="Github Repository URL"
name="githubUrl"
className={s.formItem}
rules={[
{
required: true,
message: 'Please input your Github Repository URL',
},
]}
>
<Input placeholder="Ex. https://github.com/nujan-io/ton-contracts/" />
</Form.Item>
)}

<Form.Item>
<Form.Item className={s.btnActionContainer}>
<Button
className={s.btnAction}
className={`${s.btnAction} ant-btn-primary-gradient item-center-align`}
loading={isLoading}
type="primary"
htmlType="submit"
>
Create
<AppIcon name={icon} /> {label}
</Button>
</Form.Item>
</Form>
Expand Down
3 changes: 3 additions & 0 deletions src/components/ui/icon/AppIconList.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ export { default as Build } from './Build';
export { default as Close } from './Close';
export { default as Code } from './Code';
export { default as GitHub } from './Github';
export { default as Import } from './Import';
export { default as Info } from './Info';
export { default as NewFile } from './NewFile';
export { default as NewFolder } from './NewFolder';
Expand All @@ -11,3 +12,5 @@ export { default as Rocket } from './Rocket';
export { default as Setting } from './Setting';
export { default as Telegram } from './Telegram';
export { default as Test } from './Test';


Loading

0 comments on commit 208aa6c

Please sign in to comment.