(tokens[0]);
30 | const [modeError, setModeError] = useState(false);
31 | const [disabledBtn, setDisabledBtn] = useState(true);
32 | const [isOpen, setIsOpen] = useState(false);
33 |
34 | useEffect(() => {
35 | if (!!tokens.length) {
36 | setModeBase(tokens[0]);
37 | }
38 | }, [tokens]);
39 |
40 | const handleChangeField = (e) => {
41 | const notValidName = styles.reduce((total: number, item) => {
42 | if (item.themeName === e.target.value) {
43 | total = total + 1
44 | }
45 | return total
46 | }, 0);
47 |
48 | if (!!notValidName || e.target.value.length === 0 ) {
49 | setModeError(true);
50 | setDisabledBtn(true);
51 | } else {
52 | setModeError(false);
53 | setDisabledBtn(false);
54 | }
55 |
56 | setModeName(e.target.value);
57 | }
58 |
59 | const handleCreateNewMode = (name, base) => {
60 | const notValidName = styles.reduce((total: number, item) => {
61 | if (item.themeName === name) {
62 | total = total + 1
63 | }
64 | return total
65 | }, 0);
66 |
67 | if (name.length === 0 || base.length === 0 || !!notValidName) {
68 | setModeError(true);
69 | } else {
70 | /* Clone theme styles logic */
71 | parent.postMessage({ pluginMessage: { type: 'create_new_mode', data: {
72 | data: base.data,
73 | oldName: base.themeName,
74 | name: name
75 | }}}, '*');
76 |
77 | setThemesList(
78 | [ ...themesList, { id: Date.now(), value: name}]
79 | );
80 | setListToClientStorage([ ...themesList, { id: Date.now(), value: name}]);
81 |
82 | // close modal
83 | toggleModalCreateMode();
84 | }
85 | };
86 |
87 | /* Dropdown */
88 | useOnClickOutside(ref, () => setIsOpen(false));
89 |
90 |
91 | const toggleDropdown = () => {
92 | setIsOpen(!isOpen);
93 | }
94 |
95 | const handleSelectedMode = (value) => {
96 | setModeBase(value);
97 | setIsOpen(false)
98 | }
99 | /* END Dropdown */
100 |
101 | const filteredTokens = tokens.filter((item) => !!item.themeName.replace(/\s/g, ''));
102 |
103 | const list = filteredTokens.map((item:ITokensItem, index) => {
104 | return handleSelectedMode(item)}
108 | >
109 | { modeBase.themeName === item.themeName && }
110 | {item.themeName}
111 |
112 | });
113 |
114 | return (
115 |
116 |
Select mode to create new mode
117 |
118 |
119 |
handleChangeField(e)}
126 | />
127 |
128 |
129 |
toggleDropdown()}>
130 | {`from ${modeBase.themeName}`}
131 |
132 |
133 |
134 | {list}
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
82 | {list}
83 | {empty}
84 |
85 | );
86 | };
87 |
88 | export default DesignTokens;
89 |
--------------------------------------------------------------------------------
/src/app/components/common/DesignTokens/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../../styles/settings/settings.scss';
2 |
3 | .wrapper {
4 | margin: 0 -16px;
5 | &.empty {
6 | padding: 3px 0 0 0;
7 | }
8 | }
9 |
10 | .accordion {
11 | $self: &;
12 | position: relative;
13 | border-radius: 0!important;
14 | border: none!important;
15 | box-shadow: none!important;
16 | z-index: 10;
17 |
18 | &:before {
19 | display: none!important;
20 | opacity: 1!important;
21 | background-color: $COLOR-LIGHT-GREY!important;
22 | }
23 |
24 |
25 | &__expanded_root {
26 | margin: 0!important;
27 | #{$self}__root {
28 | &:after {
29 | //display: none;
30 | }
31 | }
32 | }
33 |
34 |
35 | &__root {
36 | padding: 0 16px!important;
37 | border: none!important;
38 | box-shadow: none!important;
39 | min-height: 32px!important;
40 | position: relative;
41 | margin: 0!important;
42 | &:after {
43 | content: '';
44 | display: block;
45 | position: absolute;
46 | left: 0;
47 | right: 0;
48 | top: 0;
49 | bottom: 0;
50 | z-index: 4;
51 | border: 1px solid #18a0fb;
52 | pointer-events: none;
53 | opacity: 0;
54 | }
55 | &:hover {
56 | &:after {
57 | opacity: 1;
58 | }
59 | }
60 | }
61 |
62 | &__summary {
63 | margin: 0!important;
64 | }
65 |
66 | &__expanded {
67 | #{$self}__iconWrapper {
68 | transform: translateY(-50%) rotate(90deg) !important;
69 | }
70 | }
71 |
72 | &__iconWrapper {
73 | display: block;
74 | position: absolute;
75 | left: 5px;
76 | top: 50%;
77 | transform: translateY(-50%) rotate(0deg) !important;
78 | svg {
79 | fill: rgba(#000,0.3);
80 | width: 8px;
81 | height: 8px;
82 | }
83 | }
84 |
85 | &__title {
86 | font-style: normal;
87 | font-weight: 600;
88 | font-size: 11px;
89 | line-height: 16px;
90 | letter-spacing: 0.005em;
91 | font-feature-settings: 'ss02' on;
92 | color: rgba(0, 0, 0, 0.8);
93 | }
94 |
95 | &__icon {
96 | //background: red!important;
97 | }
98 |
99 |
100 |
101 | &__details {
102 | padding: 0 16px!important;
103 | }
104 | }
105 |
106 |
107 | .line {
108 |
109 | }
110 |
--------------------------------------------------------------------------------
/src/app/components/common/EditColor/index.tsx:
--------------------------------------------------------------------------------
1 | // core
2 | import React, { useEffect, useState, useRef } from "react";
3 | import { ChromePicker } from "react-color";
4 |
5 | // styles
6 | import classes from "./styles.module.scss";
7 |
8 | // icons
9 | import EyeDropper from "../../../assets/icons/eyedropper.svg";
10 |
11 | // components
12 | import Button from "../../ui/Button/Button";
13 |
14 | // helpers
15 | import {hexToRgba, rgbaToFigma} from "../../../_helpers/colors";
16 |
17 | // hooks
18 | import {useFigmaStyles} from "../../../store/figmaStyles/useFigmaStyles";
19 |
20 | const inlineStyles = {
21 | container: {
22 | boxShadow: 'none',
23 | height: 'auto',
24 | width: '100%',
25 | },
26 | };
27 |
28 | const EditColor = () => {
29 |
30 | const { selectedColor, editedData } = useFigmaStyles();
31 | const inputColor = useRef(null);
32 | const [color, setColor] = useState({ rgb: {r: 0, g: 0, b: 0, a: 1} });
33 |
34 | useEffect(() => {
35 | if (!!selectedColor) {
36 | setColor(selectedColor);
37 | }
38 | }, [selectedColor]);
39 |
40 |
41 | const onChangeComplete = (color) => {
42 | setColor(color);
43 | // color = {
44 | // hex: '#333',
45 | // rgb: {
46 | // r: 51,
47 | // g: 51,
48 | // b: 51,
49 | // a: 1,
50 | // },
51 | // hsl: {
52 | // h: 0,
53 | // s: 0,
54 | // l: .20,
55 | // a: 1,
56 | // },
57 | // }
58 | }
59 |
60 | const onChangeInputColor = (e) => {
61 | const newColor = { rgb: hexToRgba(e.target.value) };
62 | setColor(newColor);
63 | inputColor.current.blur();
64 | inputColor.current.value = "";
65 | }
66 |
67 | const handleUpdate = () => {
68 | const newColor = rgbaToFigma(color.rgb);
69 |
70 | parent.postMessage({ pluginMessage: { type: 'update_paint_styles', data: {
71 | color: newColor,
72 | styles: editedData,
73 | }}}, '*');
74 | };
75 |
76 | return (
77 | <>
78 |
79 |
85 |
86 |
87 |
88 | onChangeInputColor(e)}
94 | />
95 |
98 |
99 |
100 |
49 |
50 |
51 |
62 |
63 |
64 | {colors}
65 |
66 |
67 |
31 | handleChange(e, id)}/>
32 |
33 |
34 | );
35 | };
36 |
37 | export default Field;
38 |
--------------------------------------------------------------------------------
/src/app/components/common/Settings/Field/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../styles/settings/settings.scss';
2 |
3 | .field {
4 | display: flex;
5 | align-items: center;
6 | justify-content: space-between;
7 | height: 32px;
8 | margin: 0 -12px 8px 0;
9 | &:last-child {
10 | margin-bottom: 0;
11 | }
12 |
13 | input {
14 | font-style: normal;
15 | font-weight: normal;
16 | font-size: 11px;
17 | line-height: 1.45;
18 | letter-spacing: 0.005em;
19 | color: rgba($COLOR-BLACK, 0.8);
20 |
21 | width: 100%;
22 | height: 30px;
23 | border: 1px solid rgba($COLOR-BLACK, 0.1);
24 | box-sizing: border-box;
25 | border-radius: 2px;
26 | margin-right: 8px;
27 | padding: 0 8px;
28 |
29 | transition: border-color 0.15s ease 0s,
30 | box-shadow 0.15s ease 0s;
31 | &:focus, &:focus-visible {
32 | border-color: $COLOR-FIGMA-BLUE;
33 | box-shadow: 0 0 0 1px $COLOR-FIGMA-BLUE;
34 | outline: none;
35 | }
36 | }
37 |
38 | button {
39 | width: 32px;
40 | height: 32px;
41 | border: none;
42 | box-shadow: none;
43 | padding: 0;
44 | margin: 0;
45 | font-size: 32px;
46 | background: transparent;
47 | border-radius: 2px;
48 | color: rgba($COLOR-BLACK,0.8);
49 | cursor: pointer;
50 | transition: all 0.15s ease 0s;
51 | &:hover {
52 | background: rgba($COLOR-BLACK,0.06);
53 | svg {
54 | fill: rgba($COLOR-BLACK,1);
55 | }
56 | }
57 | svg {
58 | fill: rgba($COLOR-BLACK,0.8);
59 | }
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/src/app/components/common/Settings/index.tsx:
--------------------------------------------------------------------------------
1 | //core
2 | import React, {useEffect, useState} from 'react';
3 |
4 | //styles
5 | import classes from "./styles.module.scss";
6 |
7 | //icons
8 | import Plus from "../../../assets/icons/plus.svg";
9 | import Create from "../../../assets/icons/create.svg";
10 |
11 | //hooks
12 | import {useFigmaStyles} from "../../../store/figmaStyles/useFigmaStyles";
13 | import {useUI} from "../../../store/ui/useUI";
14 |
15 | //types
16 | import {IThemeItem} from "../../../store/figmaStyles/types";
17 |
18 | //components
19 | import Button from "../../ui/Button/Button";
20 | import Field from "./Field";
21 | import Empty from "../../ui/Empty";
22 |
23 |
24 | const Settings = () => {
25 |
26 | const { styles, themesList, setThemesList, setListToClientStorage } = useFigmaStyles();
27 | const { toggleModalCreateMode } = useUI();
28 |
29 | const [disableAddBtn, setDisableAddBtn] = useState(false);
30 | const [disableNewModeBtn, setDisableNewModeBtn] = useState(true);
31 |
32 | useEffect(() => {
33 | if (themesList.length === 0 || themesList[themesList.length-1].value !== '') {
34 | setDisableAddBtn(false);
35 | } else {
36 | setDisableAddBtn(true);
37 | }
38 |
39 | const notModeInStyles = styles.reduce((total: number, item) => {
40 | themesList.map((el) => {
41 | if (item.themeName === el.value) {
42 | total = total + 1
43 | }
44 | })
45 |
46 | return total
47 | }, 0);
48 |
49 | if (notModeInStyles > 0) {
50 | setDisableNewModeBtn(false)
51 | } else {
52 | setDisableNewModeBtn(true)
53 | }
54 |
55 | }, [themesList]);
56 |
57 | const handlerAddField = (e) => {
58 | e.preventDefault();
59 |
60 | const list = [
61 | ...themesList,
62 | { id: Date.now(), value: ''}
63 | ];
64 |
65 | setThemesList(list);
66 | setListToClientStorage(list);
67 | };
68 |
69 | const handleRemoveField = (e, id) => {
70 | e.preventDefault();
71 |
72 | const newArr = themesList.reduce((arr, current) => {
73 | if (!(current.id === id)) {
74 | arr.push(current);
75 | }
76 | return arr;
77 | }, []);
78 |
79 | setThemesList(newArr);
80 | setListToClientStorage(newArr);
81 | };
82 |
83 | const handleChangeValue = (value: string, id: any) => {
84 | const updatedThemesList = themesList.reduce((arr:IThemeItem[], current:IThemeItem) => {
85 | if (id === current.id) {
86 | arr.push({
87 | ...current,
88 | value: value
89 | });
90 | } else {
91 | arr.push(current);
92 | }
93 |
94 | return arr
95 | }, []);
96 |
97 | setThemesList(updatedThemesList);
98 | setListToClientStorage(updatedThemesList);
99 | }
100 |
101 | const FieldList = !!themesList.length && themesList.map((item) => {
102 | return
109 | });
110 |
111 | const empty = !themesList.length &&
112 |
113 | return (
114 | <>
115 |
116 |
117 |
118 |
122 |
123 | {FieldList}
124 | {empty}
125 |
126 |
127 |
128 |
129 |
130 |
133 |
134 |
48 |
49 |
50 |
51 |
52 |
{label}
53 |
25 | handleChangeValue(e)}
32 | />
33 |
34 | );
35 | };
36 |
37 | export default InputField;
38 |
--------------------------------------------------------------------------------
/src/app/components/ui/InputField/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../../styles/settings/settings.scss';
2 |
3 | .field {
4 | input {
5 | font-style: normal;
6 | font-weight: normal;
7 | font-size: 11px;
8 | line-height: 1.45;
9 | letter-spacing: 0.005em;
10 | color: rgba($COLOR-BLACK, 0.8);
11 |
12 | width: 100%;
13 | height: 30px;
14 | border: 1px solid rgba($COLOR-BLACK, 0.1);
15 | box-sizing: border-box;
16 | border-radius: 2px;
17 | margin-right: 0;
18 | padding: 0 8px;
19 |
20 | transition: border-color 0.15s ease 0s,
21 | box-shadow 0.15s ease 0s;
22 |
23 | text-overflow: ellipsis;
24 | white-space: nowrap;
25 | overflow: hidden;
26 |
27 | &:focus, &:focus-visible {
28 | border-color: $COLOR-FIGMA-BLUE;
29 | box-shadow: 0 0 0 1px $COLOR-FIGMA-BLUE;
30 | outline: none;
31 | }
32 | }
33 | }
34 |
35 |
--------------------------------------------------------------------------------
/src/app/components/ui/ModalDialog/index.tsx:
--------------------------------------------------------------------------------
1 | //core
2 | import React from "react";
3 | import { Modal, ModalBody } from "reactstrap";
4 |
5 | import Close from "../../../assets/icons/close.svg";
6 |
7 | const ModalDialog = ({
8 | title,
9 | children,
10 | className,
11 | closeCls,
12 | isOpen,
13 | toggle,
14 | backdrop = true,
15 | }) => {
16 | return (
17 |
24 |
25 | {
26 | title &&
{title}
27 | }
28 |
29 |
30 |
31 |
34 | {children}
35 |
36 |
37 |
38 | );
39 | };
40 |
41 | export default ModalDialog;
42 |
--------------------------------------------------------------------------------
/src/app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/src/app/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import App from "./components/app";
4 |
5 | import "./styles/constructor.scss";
6 |
7 | ReactDOM.render(, document.getElementById('react-page'));
8 |
--------------------------------------------------------------------------------
/src/app/layout/index.tsx:
--------------------------------------------------------------------------------
1 | //core
2 | import React, {useState} from "react";
3 | import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
4 |
5 | //styles
6 | import classes from "./styles/styles.module.scss";
7 | import tabs from "./styles/tabs.module.scss";
8 |
9 | //hooks
10 | import {useUI} from "../store/ui/useUI";
11 |
12 | // components
13 | import DesignTokens from "../components/common/DesignTokens";
14 | import Settings from "../components/common/Settings";
15 | import ModalDialog from "../components/ui/ModalDialog";
16 | import CreateNewMode from "../components/common/CreateNewMode";
17 | import EditColor from "../components/common/EditColor";
18 |
19 | //icons
20 | import Notice from "../assets/icons/notice.svg"
21 |
22 | const Layout = () => {
23 | const [tabIndex, setTabIndex] = useState(0);
24 |
25 | const { modalCreateMode, modalEditColor, toggleModalCreateMode, toggleModalEditColor } = useUI();
26 |
27 | return (
28 | <>
29 |
30 |
31 |
setTabIndex(index)} >
32 |
33 |
34 | Design tokens
35 | Settings
36 |
37 |
38 |
39 |
40 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
63 |
64 |
65 |
66 |
67 |
74 |
75 |
76 |
77 |
78 |
79 | );
80 | };
81 |
82 | export default Layout;
83 |
--------------------------------------------------------------------------------
/src/app/layout/styles/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/settings/settings.scss';
2 |
3 | .layout {
4 | display: flex;
5 | flex: 1 1 auto;
6 | flex-direction: column;
7 | position: relative;
8 | padding: 40px 16px 16px;
9 | }
10 |
11 | .header {
12 | position: fixed;
13 | left: 0;
14 | right: 0;
15 | top: 0;
16 | height: 40px;
17 | border-bottom: 1px solid $COLOR-GRAY;
18 | background: #fff;
19 | z-index: 99;
20 | padding: 0 16px;
21 | }
22 |
23 | .main {
24 | display: flex;
25 | flex: 1 1 auto;
26 | width: 100%;
27 | }
28 |
29 | .link {
30 | display: block;
31 | position: absolute;
32 | right: 4px;
33 | top: 50%;
34 | transform: translateY(-50%);
35 | &:hover {
36 | svg {
37 | path {
38 | fill: darken($COLOR-FIGMA-BLUE, 15%);
39 | }
40 | }
41 | }
42 | svg {
43 | width: 32px;
44 | height: 32px;
45 | path {
46 | fill: rgba($COLOR-BLACK, 0.8);
47 | }
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/src/app/layout/styles/tabs.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/settings/settings.scss';
2 |
3 | .react_tabs {
4 | -webkit-tap-highlight-color: transparent;
5 | flex: 1 1 auto;
6 | display: flex;
7 | flex-direction: column;
8 | width: 100%;
9 | }
10 |
11 | .react_tabs__tab_list {
12 | display: flex;
13 | align-items: center;
14 | justify-content: flex-start;
15 | height: 100%;
16 | }
17 |
18 | .react_tabs__tab {
19 | display: inline-block;
20 | border-bottom: none;
21 | position: relative;
22 | list-style: none;
23 | cursor: pointer;
24 |
25 | font-style: normal;
26 | font-weight: 500;
27 | font-size: 11px;
28 | line-height: 1.45;
29 | letter-spacing: 0.005em;
30 | color: rgba($COLOR-BLACK, 0.3);
31 |
32 | &:not(:last-child) {
33 | margin-right: 16px;
34 | }
35 | }
36 |
37 | .react_tabs__tab__selected {
38 | color: rgba($COLOR-BLACK, 0.8);
39 | font-weight: 600;
40 | }
41 |
42 | .react_tabs__tab__disabled {
43 | color: GrayText;
44 | cursor: default;
45 | }
46 |
47 | .react_tabs__tab:focus {
48 | outline: none;
49 | }
50 |
51 | .react-tabs__tab:focus:after {
52 |
53 | }
54 |
55 | .react_tabs__tab_panel {
56 | display: none;
57 | width: 100%;
58 | }
59 |
60 | .react_tabs__tab_panel__selected {
61 | display: block;
62 | }
63 |
--------------------------------------------------------------------------------
/src/app/models/IAction.ts:
--------------------------------------------------------------------------------
1 | import { Action } from 'redux';
2 |
3 | /**
4 | * https://github.com/acdlite/flux-standard-action
5 | */
6 | export default interface IAction extends Action {
7 | /*
8 | * The type of an action identifies to the consumer the nature of the action that has occurred.
9 | * "type" is a string constant.
10 | * If two types are the same, they MUST be strictly equivalent (using ===).
11 | */
12 | readonly type: string;
13 | /*
14 | * (optional)
15 | * The optional payload property MAY be any type of value. It represents the payload of the action.
16 | * Any information about the action that is not the type or status of the action should be part of the payload field.
17 | *
18 | * By convention, if error is true, the payload SHOULD be an error object. This is akin to rejecting a promise with an error object.
19 | */
20 | readonly payload?: any;
21 | /*
22 | * (optional)
23 | * The optional error property MAY be set to true if the action represents an error.
24 | * An action whose error is true is analogous to a rejected Promise. By convention, the payload SHOULD be an error object.
25 | * If error has any other value besides true, including undefined and null, the action MUST NOT be interpreted as an error.
26 | *
27 | * Example: If there was an error with a request. You can use this flag to change the outcome in the reducer or turn off the loading spinner.
28 | */
29 | readonly error?: boolean;
30 | /*
31 | * (optional)
32 | * The optional meta property MAY be any type of value. It is intended for any extra information that is not part of the payload.
33 | *
34 | * Example: Some sort of "id" that may not be included on the payload itself.
35 | */
36 | readonly meta?: any;
37 | }
38 |
--------------------------------------------------------------------------------
/src/app/store/figmaStyles/actions.ts:
--------------------------------------------------------------------------------
1 | // Types
2 | import {IFigmaStylesState, types} from './types';
3 |
4 | export const figmaStylesActions = Object.freeze({
5 |
6 | // Sync
7 | // setApiKey: (payload: IFigmaStylesState) => {
8 | // return {
9 | // type: types.SET_API_KEY,
10 | // payload
11 | // }
12 | // },
13 | setData: (payload: IFigmaStylesState) => {
14 | return {
15 | type: types.FIGMA_STYLES_SET_DATA,
16 | payload
17 | }
18 | },
19 | setTokensData: (payload: IFigmaStylesState) => {
20 | return {
21 | type: types.SET_TOKENS_DATA,
22 | payload
23 | }
24 | },
25 | setSelectedColor: (payload: IFigmaStylesState) => {
26 | return {
27 | type: types.SET_SELECTED_COLOR,
28 | payload
29 | }
30 | },
31 | setEditedData: (payload: IFigmaStylesState) => {
32 | return {
33 | type: types.SET_EDITED_DATA,
34 | payload
35 | }
36 | },
37 | setThemesData: (payload: IFigmaStylesState) => {
38 | return {
39 | type: types.THEMES_LIST_SET_DATA,
40 | payload
41 | }
42 | },
43 |
44 | startFetching: () => {
45 | return {
46 | type: types.THEMES_LIST_START_FETCHING
47 | }
48 | },
49 |
50 | stopFetching: () => {
51 | return {
52 | type: types.THEMES_LIST_STOP_FETCHING,
53 | }
54 | },
55 |
56 | setFetchingError: (error: any) => {
57 | return {
58 | type: types.THEMES_LIST_FETCHING_ERROR,
59 | error: true,
60 | payload: error,
61 | }
62 | },
63 |
64 | });
65 |
--------------------------------------------------------------------------------
/src/app/store/figmaStyles/reducer.ts:
--------------------------------------------------------------------------------
1 | // Types
2 | import { types, IFigmaStylesState } from './types';
3 | import IAction from "../../models/IAction";
4 |
5 | const initialState: IFigmaStylesState = {
6 | styles: [],
7 | themesList: [],
8 | tokens: [],
9 | selectedColor: null,
10 | editedData: null,
11 | error: null,
12 | };
13 |
14 | export const figmaStylesReducer = (state = initialState, {type, payload}: IAction