Skip to content

Commit 843603e

Browse files
PatrikMatiaskoPatrikMatiasko
committed
theme generator - live preview
1 parent f385b28 commit 843603e

17 files changed

Lines changed: 143 additions & 34 deletions

File tree

‎src/common/hooks/use-app-theme.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,10 @@ export function useAppTheme(options: UseAppThemeType) {
5050

5151
const getThemeData = useCallback(
5252
(currentTheme: string) => {
53+
if (appStore.configuration.previewTheme) {
54+
return appStore.configuration.previewTheme.theme
55+
}
56+
5357
if (appTheme) {
5458
const index = appTheme.findIndex((i: any) => Object.keys(i)[0] === currentTheme)
5559
if (index >= 0) {
@@ -59,7 +63,7 @@ export function useAppTheme(options: UseAppThemeType) {
5963

6064
return {}
6165
},
62-
[appTheme]
66+
[appStore.configuration.previewTheme, appTheme]
6367
)
6468

6569
return [appTheme, themeError, getThemeData]

‎src/components/Atomic/Editor/Editor.tsx‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
// @ts-nocheck
2-
import React, { FC, MutableRefObject, useEffect, useRef, useState } from 'react'
2+
import React, { FC, forwardRef, MutableRefObject, useEffect, useImperativeHandle, useRef, useState } from 'react'
33
import classNames from 'classnames'
44
import JSONEditor from 'jsoneditor'
55
import 'jsoneditor/dist/jsoneditor.css'
66
import isFunction from 'lodash/isFunction'
77

8-
import { defaultProps, Props } from './Editor.types'
8+
import { defaultProps, EditorRefType, Props } from './Editor.types'
99
import * as styles from './Editor.styles'
1010
import IconShowPassword from '../Icon/components/IconShowPassword'
1111

12-
const Editor: FC<Props> = (props) => {
12+
const Editor = forwardRef<EditorRefType, Props>((props, ref) => {
1313
const {
1414
autofocus,
1515
className,
@@ -81,7 +81,6 @@ const Editor: FC<Props> = (props) => {
8181
}, [heightProp])
8282

8383
useEffect(() => {
84-
// setTimeout(() => {
8584
const options = {
8685
mode,
8786
mainMenuBar: false,
@@ -125,7 +124,6 @@ const Editor: FC<Props> = (props) => {
125124
}
126125

127126
handleEditorRef(jsonEditor)
128-
// }, 1)
129127

130128
return () => {
131129
if (jsonEditor && jsonEditor.current) {
@@ -141,6 +139,18 @@ const Editor: FC<Props> = (props) => {
141139
}
142140
}, [])
143141

142+
useImperativeHandle(ref, () => ({
143+
setValue: (value) => {
144+
if (typeof json === 'object') {
145+
// @ts-ignore
146+
jsonEditor?.current?.set(value)
147+
} else if (typeof json === 'string') {
148+
// @ts-ignore
149+
jsonEditor?.current?.setText(value)
150+
}
151+
},
152+
}))
153+
144154
return (
145155
<div
146156
{...rest}
@@ -166,7 +176,7 @@ const Editor: FC<Props> = (props) => {
166176
)}
167177
</div>
168178
)
169-
}
179+
})
170180

171181
Editor.displayName = 'Editor'
172182
Editor.defaultProps = defaultProps

‎src/components/Atomic/Editor/Editor.types.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ import { editorModes } from './constants'
33

44
export type EditorModeType = (typeof editorModes)[keyof typeof editorModes]
55

6+
export type EditorRefType = {
7+
setValue: (value: any) => void
8+
}
9+
610
export type Props = {
711
autofocus?: boolean
812
className?: boolean

‎src/components/Atomic/FormGroup/FormGroup.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const FormGroup: FC<Props> = (props) => {
3333
{Error}
3434
</>
3535
)
36-
} else if (errorTooltip && error) {
36+
} else if (errorTooltip) {
3737
return (
3838
<Tooltip content={error} id={`tooltip-group-${id}`} placement='left' variant={tooltipVariants.ERROR}>
3939
{childrenWithProps[0]}

‎src/components/Atomic/PageLayout/PageLayout.styles.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export const pageLayout = css`
88
`
99

1010
export const top = css`
11-
padding: 24px 40px 0 40px;
11+
padding: 24px 0 0 0;
1212
height: 100%;
1313
display: flex;
1414
flex-direction: column;
@@ -24,6 +24,11 @@ export const header = css`
2424
min-height: 72px;
2525
`
2626

27+
export const padding = css`
28+
padding-left: 40px;
29+
padding-right: 40px;
30+
`
31+
2732
export const left = css`
2833
display: flex;
2934
align-items: center;

‎src/components/Atomic/PageLayout/PageLayout.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
import React, { FC, memo } from 'react'
22
import { Helmet } from 'react-helmet'
33

4-
import { Props } from './PageLayout.types'
4+
import { Props, defaultProps } from './PageLayout.types'
55
import * as styles from './PageLayout.styles'
66
import Headline from '../Headline'
77
import PageLoader from '../PageLoader'
8+
import ConditionalWrapper from '../ConditionalWrapper'
89

910
const PageLayout: FC<Props> = memo((props) => {
10-
const { children, dataTestId, headlineStatusTag, title, header, footer, loading, collapsed } = props
11+
const { children, dataTestId, headlineStatusTag, title, header, footer, loading, collapsed, xPadding } = { ...defaultProps, ...props }
1112
return (
1213
<div css={styles.pageLayout}>
1314
<Helmet>
1415
<title>{title}</title>
1516
</Helmet>
1617
<div css={styles.top}>
1718
<PageLoader className='auth-loader' collapsed={collapsed} loading={loading} />
18-
<div css={styles.header}>
19+
<div css={[styles.header, styles.padding]}>
1920
<div css={styles.left}>
2021
<Headline css={styles.headline} dataTestId={dataTestId?.concat('-title')} type='h4'>
2122
{title}
@@ -24,13 +25,16 @@ const PageLayout: FC<Props> = memo((props) => {
2425
</div>
2526
<div css={styles.rightActions}>{header}</div>
2627
</div>
27-
{children}
28+
<ConditionalWrapper condition={xPadding === true} wrapper={(c) => <div css={styles.padding}>{c}</div>}>
29+
{children}
30+
</ConditionalWrapper>
2831
</div>
2932
{footer}
3033
</div>
3134
)
3235
})
3336

3437
PageLayout.displayName = 'PageLayout'
38+
PageLayout.defaultProps = defaultProps
3539

3640
export default PageLayout

‎src/components/Atomic/PageLayout/PageLayout.types.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,9 @@ export type Props = {
99
headlineStatusTag?: ReactNode
1010
loading?: any
1111
title?: string
12+
xPadding?: boolean
13+
}
14+
15+
export const defaultProps: Partial<Props> = {
16+
xPadding: true,
1217
}

‎src/components/Atomic/Tabs/Tabs.styles.ts‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@ export const tabList = (theme: ThemeType) => css`
2020
border-bottom: 1px solid ${get(theme, `Tabs.list.borderColor`)};
2121
`
2222

23+
export const tabListInnerPadding = css`
24+
margin-left: 40px;
25+
margin-right: 40px;
26+
`
27+
2328
export const tabItem = (theme: ThemeType) => css`
2429
white-space: nowrap;
2530
box-sizing: border-box;
@@ -79,5 +84,11 @@ export const slider = (theme: ThemeType) => css`
7984
`
8085

8186
export const page = css`
82-
padding: 24px 0 0 0;
87+
padding-top: 24px;
88+
`
89+
90+
export const pageXpadding = css`
91+
padding-left: 40px;
92+
padding-right: 40px;
93+
overflow: auto;
8394
`

‎src/components/Atomic/Tabs/Tabs.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@ import { defaultProps, Props } from './Tabs.types'
66
import * as styles from './Tabs.styles'
77
import { useMeasure } from '../../../common/hooks/use-measure'
88
import Pager from './Pager'
9+
import { pageXpadding } from './Tabs.styles'
910

1011
const Tabs: FC<Props> = (props) => {
11-
const { activeItem, onAnimationComplete, onItemChange, fullHeight, tabs } = { ...defaultProps, ...props }
12+
const { activeItem, onAnimationComplete, onItemChange, fullHeight, innerPadding, tabs } = { ...defaultProps, ...props }
1213
const [value, setValue] = useState(activeItem)
1314
const childRefs = useRef(new Map())
1415
const tabListRef = useRef<HTMLDivElement | null>(null)
@@ -57,7 +58,7 @@ const Tabs: FC<Props> = (props) => {
5758

5859
return (
5960
<div css={[styles.container, fullHeight && styles.fullHeight]} ref={ref}>
60-
<div css={styles.tabList} ref={tabListRef}>
61+
<div css={[styles.tabList, innerPadding && styles.tabListInnerPadding]} ref={tabListRef}>
6162
{tabs.map((tab, i) => (
6263
<motion.button
6364
css={[styles.tabItem, i === value && styles.isActive, tab.disabled && styles.isDisabled]}
@@ -86,7 +87,7 @@ const Tabs: FC<Props> = (props) => {
8687
<Pager fullHeight={fullHeight} onAnimationComplete={onAnimationCompleteCallback} value={value}>
8788
{tabs.map((tab, i) => (
8889
<div
89-
css={styles.page}
90+
css={[styles.page, innerPadding && styles.pageXpadding]}
9091
key={i}
9192
style={{
9293
width: '100%',

‎src/components/Atomic/Tabs/Tabs.types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export type TabItem = {
1111
export type Props = {
1212
activeItem?: number
1313
fullHeight?: boolean
14+
innerPadding?: boolean
1415
onAnimationComplete?: () => void
1516
onItemChange?: (activeItem: number) => void
1617
tabs: TabItem[]

0 commit comments

Comments
 (0)