Skip to content

Commit

Permalink
feat: 🔥 added file format section
Browse files Browse the repository at this point in the history
added file format section
  • Loading branch information
amir-ben-shimol committed Jun 4, 2022
1 parent b50cd06 commit 3bb2214
Show file tree
Hide file tree
Showing 55 changed files with 1,415 additions and 3,193 deletions.
11 changes: 6 additions & 5 deletions apps/frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"dependencies": {
"@types/react": "18.0.9",
"@types/react-dom": "18.0.4",
"@uiw/react-textarea-code-editor": "2.0.2",
"i18next": "21.8.3",
"react": "18.1.0",
"react-dom": "18.1.0",
Expand Down Expand Up @@ -48,14 +49,14 @@
"eslint-plugin-react-hooks": "4.5.0",
"eslint-plugin-unused-imports": "2.0.0",
"hygen": "6.2.0",
"prettier": "2.6.2",
"postcss": "8.4.14",
"prettier": "2.6.2",
"sass": "1.52.1",
"tsconfig-paths-webpack-plugin": "3.5.2",
"stylelint": "14.8.3",
"stylelint-config-prettier-scss": "0.0.1",
"stylelint-config-recess-order": "3.0.0",
"stylelint-config-standard-scss": "3.0.0"
"stylelint-config-standard-scss": "3.0.0",
"tsconfig-paths-webpack-plugin": "3.5.2"
},
"peerDependencies": {
"@babel/core": "7.18.0",
Expand All @@ -64,7 +65,7 @@
"@types/node": "17.0.35",
"@typescript-eslint/parser": "5.25.0",
"eslint": "8.16.0",
"prettier": "2.6.2",
"postcss": "8.4.14"
"postcss": "8.4.14",
"prettier": "2.6.2"
}
}
19 changes: 19 additions & 0 deletions apps/frontend/src/assets/icons.ts
Original file line number Diff line number Diff line change
Expand Up @@ -227,6 +227,25 @@ const icons = {
</defs>
`,
],

edit: [
'28 28',
`
<path d="M6.28673 25.3427L6.43915 25.2798L6.55552 25.163L23.2776 8.37765L23.8551 7.79797L23.2781 7.21773L20.789 4.71437L20.2063 4.12834L19.6233 4.71409L2.91717 21.4995L2.8101 21.607L2.7485 21.7458L1.28053 25.0515L1.27396 25.0663L1.26798 25.0813C1.18397 25.2925 1.14987 25.5356 1.20389 25.7892C1.25683 26.0376 1.38182 26.2377 1.52196 26.3904L1.52361 26.3922C1.66531 26.5456 1.85589 26.6908 2.1021 26.7677C2.35582 26.8469 2.60924 26.8347 2.83688 26.7632L2.87098 26.7525L2.90403 26.7388L6.28673 25.3427ZM23.3727 7.12541L23.9461 7.70209L24.529 7.135L25.9969 5.7068L25.997 5.70688L26.0066 5.69721C26.4685 5.23273 26.7978 4.66902 26.8195 4.01223C26.8524 3.35318 26.5742 2.7841 26.1238 2.32884L25.6816 1.86828L25.672 1.85822L25.662 1.84849C25.1985 1.39743 24.618 1.1292 23.9508 1.18511L23.9489 1.18528C23.3326 1.23841 22.7944 1.55168 22.3369 1.9855L22.3298 1.99226L22.3228 1.99918L20.8708 3.44343L20.288 4.02311L20.8676 4.606L23.3727 7.12541Z" stroke-width="1.64427"/>
`,
],
lockIcon: [
'16 22',
`
<path d="M2.63198 22H13.368C14.2576 22 14.9186 21.7804 15.3512 21.3412C15.7837 20.9098 16 20.2353 16 19.3176V11.5176C16 10.6078 15.7837 9.93726 15.3512 9.50588C14.9186 9.07451 14.2576 8.85882 13.368 8.85882H2.63198C1.75873 8.85882 1.10176 9.07451 0.661056 9.50588C0.220352 9.93726 0 10.6078 0 11.5176V19.3176C0 20.2353 0.220352 20.9098 0.661056 21.3412C1.10176 21.7804 1.75873 22 2.63198 22ZM2.85233 20.1647C2.59118 20.1647 2.39531 20.098 2.26473 19.9647C2.13415 19.8392 2.06886 19.6275 2.06886 19.3294V11.5059C2.06886 11.2078 2.13415 11 2.26473 10.8824C2.39531 10.7569 2.59118 10.6941 2.85233 10.6941H13.1721C13.4333 10.6941 13.6251 10.7569 13.7475 10.8824C13.8781 11 13.9434 11.2078 13.9434 11.5059V19.3294C13.9434 19.6275 13.8781 19.8392 13.7475 19.9647C13.6251 20.098 13.4333 20.1647 13.1721 20.1647H2.85233ZM2.05662 9.77647H4.08875V6.02353C4.08875 5.12157 4.2683 4.36471 4.62739 3.75294C4.98648 3.13333 5.46391 2.66667 6.05968 2.35294C6.65544 2.03922 7.30426 1.88235 8.00612 1.88235C8.71614 1.88235 9.36496 2.03922 9.95256 2.35294C10.5402 2.66667 11.0135 3.13333 11.3726 3.75294C11.7317 4.36471 11.9112 5.12157 11.9112 6.02353V9.77647H13.9556V6.24706C13.9556 5.19608 13.7883 4.27843 13.4537 3.49412C13.1273 2.7098 12.6825 2.05882 12.1194 1.54118C11.5562 1.02353 10.9197 0.639216 10.2096 0.388235C9.49962 0.129412 8.76511 0 8.00612 0C7.23897 0 6.50038 0.129412 5.79036 0.388235C5.08034 0.639216 4.44376 1.02353 3.88064 1.54118C3.32568 2.05882 2.8809 2.7098 2.54629 3.49412C2.21984 4.27843 2.05662 5.19608 2.05662 6.24706V9.77647Z" />
`,
],
unlockIcon: [
'54 48',
`
<path d="M7.6087 48H30.487C32.3826 48 33.7913 47.5209 34.713 46.5626C35.6522 45.6214 36.1217 44.1497 36.1217 42.1476V25.1294C36.1217 23.1444 35.6522 21.6813 34.713 20.7401C33.7913 19.7989 32.3826 19.3283 30.487 19.3283H7.6087C5.74783 19.3283 4.34783 19.7989 3.4087 20.7401C2.46957 21.6813 2 23.1444 2 25.1294V42.1476C2 44.1497 2.46957 45.6214 3.4087 46.5626C4.34783 47.5209 5.74783 48 7.6087 48ZM8.07826 43.9957C7.52174 43.9957 7.10435 43.8503 6.82609 43.5594C6.56522 43.2856 6.43478 42.8235 6.43478 42.1733V25.1037C6.43478 24.4535 6.56522 24 6.82609 23.7433C7.10435 23.4695 7.52174 23.3326 8.07826 23.3326H30.0696C30.6435 23.3326 31.0609 23.4695 31.3217 23.7433C31.5826 24 31.713 24.4535 31.713 25.1037V42.1733C31.713 42.8235 31.5826 43.2856 31.3217 43.5594C31.0609 43.8503 30.6435 43.9957 30.0696 43.9957H8.07826ZM27.6435 21.3305H32V13.1422C32 11.1743 32.3739 9.52299 33.1217 8.18824C33.887 6.83636 34.9044 5.81818 36.1739 5.13369C37.4435 4.4492 38.8261 4.10695 40.3217 4.10695C41.8348 4.10695 43.2174 4.4492 44.4696 5.13369C45.7217 5.81818 46.7304 6.83636 47.4957 8.18824C48.2609 9.52299 48.6435 11.1743 48.6435 13.1422V18.4043C48.6435 19.1914 48.8522 19.7904 49.2696 20.2011C49.7043 20.6118 50.2261 20.8171 50.8348 20.8171C51.4435 20.8171 51.9565 20.6289 52.3739 20.2524C52.7913 19.8588 53 19.2428 53 18.4043V13.6299C53 11.3369 52.6522 9.33476 51.9565 7.62353C51.2609 5.9123 50.3043 4.49198 49.087 3.36257C47.887 2.23316 46.5304 1.39465 45.0174 0.847059C43.5043 0.282353 41.9391 0 40.3217 0C38.687 0 37.113 0.282353 35.6 0.847059C34.087 1.39465 32.7304 2.23316 31.5304 3.36257C30.3304 4.49198 29.3826 5.9123 28.687 7.62353C27.9913 9.33476 27.6435 11.3369 27.6435 13.6299V21.3305Z" />
`,
],
};

export default icons;
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
.groupCenterContainer {
display: flex;
height: 100%;
overflow: hidden;

.innerGroupDetalis {
display: flex;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@
width: 100%;
height: 100%;
padding: 39px 122px 20px;
background-color: #e7e7e7;
background-color: #f2f2f2;
}
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import VSvg from '@/ui/VSvg';
// import { Trans, useTranslation } from 'react-i18next';
import { IGroup } from '@/interfaces/group';
import { ILibrary } from '@/interfaces/library';
import { monthsName } from '../../../../../data/monthsName';
import { monthsName } from '@/data/monthsName';

import Policies from './Policies';
import NewPolicy from './Policies/NewPolicy';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,12 @@
display: grid;
grid-template-rows: unset;
grid-template-columns: auto auto;
grid-auto-rows: 50%; // play with this to change height of the children, 50% will fill half
grid-auto-rows: 53%; // play with this to change height of the children, 50% will fill half
grid-auto-flow: row;
width: 100%;
height: 100%;
padding-right: 15px;
margin-left: 24px;
overflow-y: scroll;
overflow-x: hidden;
overflow-y: auto;
}
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
// import { Trans, useTranslation } from 'react-i18next';
import { ILibrary } from '@/interfaces/library';
import { librariesList } from '../../../../../../../../data/librariesList';
import { librariesList } from '@/data/librariesList';
import Library from './Library';

import classes from './LibrariesList.module.scss';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.library {
position: relative;
display: flex;
justify-content: space-between;
height: fit-content;
padding: 14px;
border-radius: 10px;
Expand Down Expand Up @@ -70,9 +70,9 @@
}

.cancelSelectedLibraryButton {
position: absolute;
left: 230px;
z-index: 1;
display: flex;
height: fit-content;

&__cancelButton {
width: 12px;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ const LibraryView: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) =
className={classes['cancelSelectedLibraryButton']}
type="button"
style={{
display: isLibrarySelected ? 'flex' : 'none',
visibility: isLibrarySelected ? 'visible' : 'hidden',
}}
onClick={props.onCancelSelectedLibrary}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,13 @@
display: flex;
width: 100%;
height: 100%;
overflow: hidden;

.innerNewPolicy {
display: flex;
flex-direction: column;
width: 100%;
padding: 22px 13px 0;
padding: 22px 13px;
background-color: #fefefe;
border: 2px solid #e7e7e7;
border-radius: 5px;
Expand Down Expand Up @@ -174,7 +175,8 @@
.innerLibrary {
display: flex;
height: map.get($sizes, newpolicy-library-inner-height);
margin: 0 125px 0 38px;
margin-left: 38px;
overflow: hidden;
}
}
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';

import { types, categories } from '../../../../../../../../data/policiesFilter';
import { types, categories } from '@/data/policiesFilter';

// import { Trans, useTranslation } from 'react-i18next';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
height: 50px;
padding: 6px;
margin-right: 10px;
background-color: #e7e7e7;
background-color: #f2f2f2;
border-radius: 50%;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
flex-direction: column;
justify-content: center;
width: 100%;
padding: 14px 22px 0;
padding: 14px 22px;

&__title {
font-size: 2.2rem;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
.newPolicyConfiguration {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
padding: 74px 122px;
background-color: #e7e7e7;
background-color: #f2f2f2;

.innerNewPolicyConfiguration {
display: flex;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import React from 'react';
import { Link } from 'react-router-dom';
import VSvg from '@/ui/VSvg';
// import { Trans, useTranslation } from 'react-i18next';

import VSvg from '@/ui/VSvg';
import NavigateBackButton from '@/ui/NavigateBackButton';
import classes from './NewPolicyConfiguration.module.scss';

interface IProps {
Expand All @@ -14,6 +15,8 @@ const NewPolicyConfigurationView: React.FC<IProps> = (props: React.PropsWithChil

return (
<section className={classes['newPolicyConfiguration']}>
<NavigateBackButton />

<div className={classes['innerNewPolicyConfiguration']}>
<div className={classes['headerContainer']}>
<div className={classes['titleContainer']}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ import React from 'react';
import { Route, useLocation } from 'react-router-dom';
import { ILibrary } from '@/interfaces/library';

// import { Trans, useTranslation } from 'react-i18next';

import PolicySidebar from './PolicySidebar';
import RuleCreation from './RuleCreation';

Expand All @@ -16,7 +14,6 @@ interface IProps {
}

const PolicyConfiguration: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) => {
// const { t } = useTranslation();
const route = useLocation();

let currentPage;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@
font-size: 1.8rem;
font-weight: 460;
color: #4b4a65;
white-space: nowrap;
}
}

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.fileFormat {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%;
margin-top: 15px;
overflow: auto;
background-color: #fefefe;
border-radius: 10px;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import React, { useState } from 'react';

import FileFormatView from './FileFormat.view';

interface IProps {
readonly policyLabelInput: string | null;
}

const FileFormat: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) => {
const [selectedFileFormatIndexState, setSelectedFileFormatIndexState] = useState<number>(0);
const [isFileFormatClickedState, setIsFileFormatClickedState] = useState<boolean>(false);
const [isEditFileFormatState, setIsEditFileFormatState] = useState<boolean>(false);

const onEditFileFormatButton = () => {
setIsEditFileFormatState(() => !isEditFileFormatState);
};

const onFileFormatButton = () => {
setIsFileFormatClickedState(() => !isFileFormatClickedState);
};

const onSelectedFileFormat = (index: number) => {
setSelectedFileFormatIndexState(() => index);
setIsFileFormatClickedState(() => false);
};

return (
<FileFormatView
policyLabelInput={props.policyLabelInput}
selectedFileFormatIndex={selectedFileFormatIndexState}
isFileFormatClicked={isFileFormatClickedState}
isEditFileFormat={isEditFileFormatState}
onEditFileFormatButton={onEditFileFormatButton}
onFileFormatButton={onFileFormatButton}
onSelectedFileFormat={onSelectedFileFormat}
/>
);
};

FileFormat.displayName = 'FileFormat';
FileFormat.defaultProps = {};

export default React.memo(FileFormat);
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React from 'react';

import classes from './FileFormat.module.scss';
import Header from './Header';
import InputCodeForm from './InputCodeForm';

interface IProps {
readonly policyLabelInput: string | null;
readonly selectedFileFormatIndex: number;
readonly isFileFormatClicked: boolean;
readonly isEditFileFormat: boolean;
readonly onEditFileFormatButton: () => void;
readonly onFileFormatButton: () => void;
readonly onSelectedFileFormat: (index: number) => void;
}

const FileFormatView: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) => {
return (
<section className={classes['fileFormat']}>
<Header
policyLabelInput={props.policyLabelInput}
selectedFileFormatIndex={props.selectedFileFormatIndex}
isFileFormatClicked={props.isFileFormatClicked}
isEditFileFormat={props.isEditFileFormat}
onFileFormatButton={props.onFileFormatButton}
onSelectedFileFormat={props.onSelectedFileFormat}
onEditFileFormatButton={props.onEditFileFormatButton}
/>
<InputCodeForm
selectedFileFormatIndex={props.selectedFileFormatIndex}
isEditFileFormat={props.isEditFileFormat}
/>
</section>
);
};

FileFormatView.displayName = 'FileFormatView';
FileFormatView.defaultProps = {};

export default React.memo(FileFormatView);
Loading

0 comments on commit 3bb2214

Please sign in to comment.