Skip to content

Commit 982c6e0

Browse files
jsajaljsajal
authored
Merge pull request #47 from FlowTestAI/ui-new-theme
Adding new theme and completing UI flow for Tab bar and directory act…
2 parents 5f7e245 + c9b5c0b commit 982c6e0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+1096
-736
lines changed

‎.eslintrc.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,7 @@ module.exports = {
2121
sourceType: 'module',
2222
},
2323
plugins: ['react', 'react-hooks', 'prettier'],
24-
rules: {
25-
'react/prop-types': 'off', // keeping off for first phase
26-
'no-unused-vars': 'off', // Getting a lot of Error for: '_' is assigned a value but never used no-unused-vars. For now disabling this because need to understand more about the use '_'.
27-
},
24+
rules: {},
2825
settings: {
2926
'import/resolver': {
3027
node: {

‎jsconfig.json‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
{
22
"compilerOptions": {
3-
"baseUrl": "src"
3+
"baseUrl": "src",
4+
"target": "es5",
5+
"lib": [
6+
"dom",
7+
"dom.iterable",
8+
"esnext"
9+
]
410
},
5-
"include": ["src"]
6-
}
11+
"include": [
12+
"src"
13+
]
14+
}

‎package.json‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,21 +13,24 @@
1313
"@testing-library/user-event": "^13.5.0",
1414
"@tippyjs/react": "^4.2.6",
1515
"allotment": "^1.20.0",
16+
"autoprefixer": "^10.4.18",
1617
"axios": "^1.5.1",
1718
"eslint-import-resolver-alias": "^1.1.2",
1819
"eslint-plugin-import": "^2.29.1",
1920
"notistack": "^3.0.1",
21+
"postcss": "^8.4.35",
2022
"react": "^18.2.0",
2123
"react-dom": "^18.2.0",
2224
"react-edit-text": "^5.1.1",
2325
"react-icons": "^5.0.1",
2426
"react-perfect-scrollbar": "^1.5.8",
2527
"react-router": "^6.15.0",
26-
"react-router-dom": "^6.15.0",
28+
"react-router-dom": "^6.22.2",
2729
"react-scripts": "5.0.1",
2830
"react-tooltip": "^5.26.2",
2931
"reactflow": "^11.8.3",
3032
"socket.io-client": "^4.7.4",
33+
"tailwindcss": "^3.4.1",
3134
"web-vitals": "^2.1.4",
3235
"zustand": "^4.5.0"
3336
},
@@ -61,18 +64,16 @@
6164
]
6265
},
6366
"devDependencies": {
67+
"@tailwindcss/typography": "^0.5.10",
6468
"@types/node": "20.11.5",
65-
"autoprefixer": "^10.4.17",
66-
"daisyui": "^4.6.2",
69+
"daisyui": "^4.7.2",
6770
"eslint": "^8.56.0",
6871
"eslint-config-prettier": "^9.1.0",
6972
"eslint-plugin-import-alias": "^1.2.0",
7073
"eslint-plugin-prettier": "^5.1.3",
7174
"eslint-plugin-react": "^7.33.2",
7275
"eslint-plugin-react-hooks": "^4.6.0",
73-
"postcss": "^8.4.33",
7476
"prettier": "^3.2.5",
75-
"prettier-plugin-tailwindcss": "^0.5.11",
76-
"tailwindcss": "^3.4.1"
77+
"prettier-plugin-tailwindcss": "^0.5.11"
7778
}
7879
}

‎postcss.config.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
export const plugins = {
2-
tailwindcss: {},
3-
autoprefixer: {},
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
46
};

‎src/components/atoms/EditableTextItem.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
import React from 'react';
2+
import { PropTypes } from 'prop-types';
23
import { EditText } from 'react-edit-text';
34
import 'react-edit-text/dist/index.css';
45

56
const EditableTextItem = ({ initialText }) => {
67
// ToDo: Fix: as of now it is taking empty value which should not be the case
7-
return <EditText name='editText' className='tw-text-xl' defaultValue={initialText} placeholder={initialText} />;
8+
return <EditText name='editText' className='text-xl' defaultValue={initialText} placeholder={initialText} />;
9+
};
10+
11+
// https://legacy.reactjs.org/docs/typechecking-with-proptypes.html
12+
EditableTextItem.propTypes = {
13+
initialText: PropTypes.string.isRequired,
814
};
915

1016
export default EditableTextItem;

‎src/components/atoms/FlowTab.js‎

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,43 @@
11
import React from 'react';
2-
import { ShareIcon } from '@heroicons/react/20/solid';
2+
import { XMarkIcon } from '@heroicons/react/24/outline';
3+
import { useTabStore } from 'stores/TabStore';
34

45
const FlowTab = () => {
6+
const tabs = useTabStore((state) => state.tabs);
7+
const setFocusTab = useTabStore((state) => state.setFocusTab);
8+
const focusTabId = useTabStore((state) => state.focusTabId);
9+
const closeTab = useTabStore((state) => state.closeTab);
10+
const activeTabStyles =
11+
'before:absolute before:h-[0.25rem] before:w-full before:bg-slate-300 before:content-[""] before:bottom-0 before:left-0';
12+
const tabCommonStyles =
13+
'tab flex items-center gap-x-2 border-r border-neutral-300 bg-transparent pr-0 tracking-[0.15em] transition duration-500 ease-in text-sm';
514
return (
6-
<div className='tw-border-[rgba(128, 128, 128, 0.35)] tw-flex tw-items-center tw-gap-x-2 tw-border-r tw-px-8 tw-py-4'>
7-
<ShareIcon className='tw-h-5 tw-w-5' />
8-
New Flow
15+
<div role='tablist' className='tabs tabs-lg'>
16+
{tabs.map((tab, index) => {
17+
return (
18+
<a
19+
role='tab'
20+
className={`${tabCommonStyles} ${focusTabId === tab.id ? activeTabStyles : ''}`}
21+
key={index}
22+
data-id={tab.id}
23+
data-collection-id={tab.collectionId}
24+
onClick={() => {
25+
setFocusTab(tab.id);
26+
console.log(`CLICKED THE ${tab.id}`);
27+
}}
28+
>
29+
{tab.name}
30+
<div
31+
className='flex h-full items-center px-2 hover:rounded hover:rounded-l-none hover:bg-slate-200'
32+
onClick={() => {
33+
closeTab(tab.id, tab.collectionId);
34+
}}
35+
>
36+
<XMarkIcon className='h-4 w-4' />
37+
</div>
38+
</a>
39+
);
40+
})}
941
</div>
1042
);
1143
};

‎src/components/atoms/SelectAuthKeys.js‎

Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,38 +7,31 @@ const SelectAuthKeys = () => {
77
const [selected, setSelected] = useState(authKeys[0]);
88
return (
99
<Listbox value={selected} onChange={setSelected}>
10-
<div className='tw-relative tw-rounded tw-border tw-border-solid tw-border-[#94a3b8]'>
11-
<Listbox.Button className='tw-sm:text-sm tw-relative tw-w-full tw-cursor-default tw-rounded-lg tw-bg-white tw-py-2 tw-pl-3 tw-pr-10 tw-text-left'>
12-
<span className='tw-block tw-truncate'>{selected.name}</span>
13-
<span className='flex tw-pointer-events-none tw-absolute tw-right-2 tw-top-3 tw-items-center tw-pr-2'>
14-
<ChevronUpDownIcon className='tw-h-5 tw-w-5 tw-text-gray-400' aria-hidden='true' />
10+
<div className='relative rounded border border-solid border-[#94a3b8]'>
11+
<Listbox.Button className='relative w-full py-2 pl-3 pr-10 text-left bg-white rounded-lg cursor-default sm:text-sm'>
12+
<span className='block truncate'>{selected.name}</span>
13+
<span className='absolute flex items-center pr-2 pointer-events-none right-2 top-3'>
14+
<ChevronUpDownIcon className='w-5 h-5 text-gray-400' aria-hidden='true' />
1515
</span>
1616
</Listbox.Button>
17-
<Transition
18-
as={Fragment}
19-
leave='tw-transition tw-ease-in tw-duration-100'
20-
leaveFrom='tw-opacity-100'
21-
leaveTo='tw-opacity-0'
22-
>
23-
<Listbox.Options className='tw-sm:text-sm z-10 tw-absolute tw-z-10 tw-mt-1 tw-max-h-60 tw-w-full tw-overflow-auto tw-rounded-md tw-bg-white tw-py-1 tw-text-base tw-shadow-lg tw-ring-1 tw-ring-black/5'>
17+
<Transition as={Fragment} leave='transition ease-in duration-100' leaveFrom='opacity-100' leaveTo='opacity-0'>
18+
<Listbox.Options className='absolute z-10 w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg sm:text-sm max-h-60 ring-1 ring-black/5'>
2419
{authKeys.map((authKey, authKeyIdx) => (
2520
<Listbox.Option
2621
key={authKeyIdx}
2722
className={({ active }) =>
28-
`tw-relative tw-cursor-default tw-select-none tw-py-2 tw-pl-10 tw-pr-4 ${
29-
active ? 'tw-bg-amber-100 tw-text-amber-900' : 'tw-text-gray-900'
23+
`relative cursor-default select-none py-2 pl-10 pr-4 ${
24+
active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
3025
}`
3126
}
3227
value={authKey}
3328
>
3429
{({ selected }) => (
3530
<>
36-
<span className={`tw-block tw-truncate ${selected ? 'tw-font-medium' : 'tw-font-normal'}`}>
37-
{authKey.name}
38-
</span>
31+
<span className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>{authKey.name}</span>
3932
{selected ? (
40-
<span className='tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-items-center tw-pl-3 tw-text-amber-600'>
41-
<CheckIcon className='tw-h-5 tw-w-5' aria-hidden='true' />
33+
<span className='absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600'>
34+
<CheckIcon className='w-5 h-5' aria-hidden='true' />
4235
</span>
4336
) : null}
4437
</>

‎src/components/atoms/SelectEnvironment.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React, { Fragment, useState } from 'react';
2+
import { Listbox, Transition } from '@headlessui/react';
3+
import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid';
4+
import { Square3Stack3DIcon } from '@heroicons/react/24/outline';
5+
6+
const environments = [
7+
{
8+
id: 'feebd601-63c5-4a4f-8def-1dde4f317567',
9+
createdAt: 1710096201431,
10+
modifiedAt: 1710096201431,
11+
name: 'test.env',
12+
pathname:
13+
'/Users/sirachit/Desktop/Personal Devo/FlowTest/test/folder-test/Simple API overview/environments/test.env',
14+
variables: { k1: 'v1', k2: 'v2', k3: 'v3' },
15+
},
16+
{
17+
id: 'feebd601-63c5-4a4f-8def-1dde4f317567',
18+
createdAt: 1710096202431,
19+
modifiedAt: 1710096202431,
20+
name: 'test2.env',
21+
pathname:
22+
'/Users/sirachit/Desktop/Personal Devo/FlowTest/test/folder-test/Simple API overview/environments/test2.env',
23+
variables: { k1: 'v1', k2: 'v2', k3: 'v3' },
24+
},
25+
];
26+
27+
const SelectEnvironment = () => {
28+
const [selected, setSelected] = useState(null);
29+
return (
30+
<Listbox value={selected} onChange={setSelected}>
31+
<div className='relative flex h-full pl-4 border-l border-neutral-300'>
32+
<Listbox.Button className='flex items-center justify-between gap-4 cursor-default sm:text-sm'>
33+
<Square3Stack3DIcon className='w-4 h-4' />
34+
<div className='min-w-32'>{selected ? selected : 'Select environment'}</div>
35+
<ChevronUpDownIcon className='w-5 h-5' aria-hidden='true' />
36+
</Listbox.Button>
37+
<Transition as={Fragment} leave='transition ease-in duration-100' leaveFrom='opacity-100' leaveTo='opacity-0'>
38+
<Listbox.Options className='absolute right-0 z-10 w-full py-1 mt-1 overflow-auto text-base bg-white rounded shadow-lg top-12 max-h-60 ring-1 ring-black/5 sm:text-sm'>
39+
{environments.map((environment, environmentIndex) => (
40+
<Listbox.Option
41+
key={environmentIndex}
42+
className={({ active }) =>
43+
`relative cursor-default select-none py-2 pl-10 pr-4 ${
44+
active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
45+
}`
46+
}
47+
value={environment.name}
48+
>
49+
{({ selected }) => (
50+
<>
51+
<span className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>
52+
{environment.name}
53+
</span>
54+
{selected ? (
55+
<span className='absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600'>
56+
<CheckIcon className='w-5 h-5' aria-hidden='true' />
57+
</span>
58+
) : null}
59+
</>
60+
)}
61+
</Listbox.Option>
62+
))}
63+
</Listbox.Options>
64+
</Transition>
65+
</div>
66+
</Listbox>
67+
);
68+
};
69+
70+
export default SelectEnvironment;

‎src/components/atoms/common/Button.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from 'react';
2+
import { PropTypes } from 'prop-types';
3+
4+
// ToDo: can be more generalized
5+
const Button = ({ children, btnType, isDisabled, onClickHandle, fullWidth }) => {
6+
const primaryStyles = 'bg-cyan-950 text-white border-cyan-950 border hover:bg-slate-50 hover:text-cyan-950';
7+
const secondaryStyles = ''; // ToDo
8+
const tertiaryStyles = 'border border-cyan-950 text-cyan-950 hover:bg-cyan-950 bg-slate-50 hover:text-white';
9+
const infoStyles = 'bg-sky-600 text-white border border-sky-600 hover:bg-slate-50 hover:text-sky-600';
10+
const successStyles = 'bg-green-600 text-white border border-green-600 hover:bg-slate-50 hover:text-green-600';
11+
const warningStyles = 'bg-amber-600 text-white border border-amber-600 hover:bg-slate-50 hover:text-amber-600';
12+
const errorStyles = 'bg-red-600 text-white border border-red-600 hover:bg-slate-50 hover:text-red-600';
13+
const btnStyles = {
14+
primary: primaryStyles,
15+
secondary: secondaryStyles,
16+
tertiary: tertiaryStyles,
17+
info: infoStyles,
18+
success: successStyles,
19+
warning: warningStyles,
20+
error: errorStyles,
21+
};
22+
/**
23+
* ToDo: as of now button on hover becomes outline buttons but
24+
* button type should be primary, secondary, tertiary, disable, accent, link
25+
* button secondary type can be outline, may be
26+
* button state should be info, success, error (will be same as cancel or close), warning
27+
*/
28+
const commonStyles = `inline-flex items-center justify-center gap-2 whitespace-nowrap rounded px-4 py-2 transition ${fullWidth ? 'w-full' : ''}`;
29+
return (
30+
<button className={`${btnStyles[btnType]} ${commonStyles}`} disabled={isDisabled} onClick={onClickHandle}>
31+
{children}
32+
</button>
33+
);
34+
};
35+
36+
Button.propTypes = {
37+
children: PropTypes.node.isRequired,
38+
btnType: PropTypes.string.isRequired,
39+
isDisabled: PropTypes.boolean.isRequired,
40+
onClickHandle: PropTypes.func,
41+
fullWidth: PropTypes.boolean,
42+
};
43+
export default Button;

‎src/components/atoms/flow/FlowNode.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ const FlowNode = ({ children, title, handleLeft, handleLeftData, handleRight, ha
77
{handleLeft ? <Handle type={handleLeftData?.type} position={Position.Left} /> : ''}
88
<div
99
className={`${
10-
children ? 'tw-flex-col tw-px-4 tw-py-2' : 'tw-items-center tw-justify-center tw-px-6 tw-py-4'
11-
} tw-flex tw-rounded-md tw-border-2 tw-border-neutral-200 tw-bg-white`}
10+
children ? 'flex-col px-4 py-2' : 'items-center justify-center px-6 py-4'
11+
} flex rounded-md border-2 border-neutral-200 bg-white`}
1212
>
13-
<h3 className={`${children ? 'tw-mb-4' : ''} tw-text-base tw-font-semibold`}>{title}</h3>
13+
<h3 className={`${children ? 'mb-4' : ''} text-base font-semibold`}>{title}</h3>
1414
{children}
1515
</div>
1616
{handleRight ? (

0 commit comments

Comments
 (0)