feat(FJS-4): typed style objects in themes

LordWerter · LordWerter · Jan 26, 2022 · Nov 14, 2021 · Nov 15, 2021 · Nov 17, 2021
commit cd1c756216b4f22f9fd6ad22a3e86f9b0281ab8a
diff --git a/examples/react-uikit/src/definitions/TCSSobjProps.ts b/examples/react-uikit/src/definitions/TCSSobjProps.ts
@@ -1,8 +1,14 @@
-import { StandardProperties as Properties } from "csstype";
+import { StandardProperties } from "csstype";
 import { TSize } from "./TElementProps";
 
 export type TSectionName = 'core' | TSize;
 
+export type NestedSelector = {
+    [index: string]: StandardProperties | NestedSelector;
+}
+
+export type Properties = StandardProperties | NestedSelector;
+
 export type TCSSObjProps = {
     [key in TSectionName]: Properties;
  };

diff --git a/examples/react-uikit/src/theme/components/MenuBtn/cwrap.ts b/examples/react-uikit/src/theme/components/MenuBtn/cwrap.ts
@@ -1,4 +1,6 @@
-export const blocks = {
+import { TCSSObjProps } from "../../../definitions";
+
+export const blocks: TCSSObjProps = {
     core: {
         display: 'flex',
         flexDirection: 'column',

diff --git a/examples/react-uikit/src/theme/components/MenuBtn/line.ts b/examples/react-uikit/src/theme/components/MenuBtn/line.ts
@@ -1,4 +1,6 @@
-export const blocks = {
+import { TCSSObjProps } from "../../../definitions";
+
+export const blocks: TCSSObjProps = {
     core: {
         height: '6px',
         width: '100%',

diff --git a/examples/react-uikit/src/theme/components/NavBar/cwrap.ts b/examples/react-uikit/src/theme/components/NavBar/cwrap.ts
@@ -1,4 +1,6 @@
-export const blocks = {
+import { TCSSObjProps } from "../../../definitions";
+
+export const blocks: TCSSObjProps = {
     core: {
         position: 'relative',
         top: '176px',

diff --git a/examples/react-uikit/src/theme/components/NavBar/hidden.ts b/examples/react-uikit/src/theme/components/NavBar/hidden.ts
@@ -1,4 +1,6 @@
-export const blocks = {
+import { TCSSObjProps } from "../../../definitions";
+
+export const blocks: TCSSObjProps = {
    core: {
       visibility: 'hidden',
       position: 'relative',

diff --git a/examples/react-uikit/src/theme/components/NavBar/line.ts b/examples/react-uikit/src/theme/components/NavBar/line.ts
@@ -1,4 +1,6 @@
-export const blocks = {
+import { TCSSObjProps } from "../../../definitions";
+
+export const blocks: TCSSObjProps = {
    core: {
       backgroundColor: 'white',
       height: '1px',

diff --git a/examples/react-uikit/src/theme/containers/Header/cwrap.ts b/examples/react-uikit/src/theme/containers/Header/cwrap.ts
@@ -1,4 +1,6 @@
-export const blocks = {
+import { TCSSObjProps } from "../../../definitions";
+
+export const blocks: TCSSObjProps = {
     core: {
         height: '100px',
         width: '100%',

diff --git a/examples/react-uikit/src/theme/containers/Header/logo.ts b/examples/react-uikit/src/theme/containers/Header/logo.ts
@@ -1,6 +1,7 @@
+import { TCSSObjProps } from '../../../definitions';
 import {LOGOS__HEADER} from '../../images';
 
-export const blocks = {
+export const blocks: TCSSObjProps = {
     core: {
         backgroundPosition: 'center',
         backgroundRepeat: 'no-repeat',

diff --git a/examples/react-uikit/src/theme/containers/Header/menuwrap.ts b/examples/react-uikit/src/theme/containers/Header/menuwrap.ts
@@ -1,4 +1,6 @@
-export const blocks = {
+import { TCSSObjProps } from "../../../definitions";
+
+export const blocks: TCSSObjProps = {
     core: {
         display: 'flex',
         flexDirection: 'column',

diff --git a/examples/react-uikit/src/theme/containers/Section/cwrap.ts b/examples/react-uikit/src/theme/containers/Section/cwrap.ts
@@ -1,4 +1,6 @@
-export const blocks = {
+import { TCSSObjProps } from "../../../definitions";
+
+export const blocks: TCSSObjProps = {
     core: {
         marginTop: '100px',
         fontSize: '3rem',

diff --git a/examples/react-uikit/src/theme/containers/Welcome/cwrap.ts b/examples/react-uikit/src/theme/containers/Welcome/cwrap.ts
@@ -1,4 +1,6 @@
-export const blocks = {
+import { TCSSObjProps } from "../../../definitions";
+
+export const blocks: TCSSObjProps = {
    core: {
       display: 'flex',
       flexDirection: 'column',