Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style(website): make Playground Mobile Responsive #2028

Merged
merged 9 commits into from
Jun 22, 2024
+424 −292
Merged

style(website): make Playground Mobile Responsive #2028

Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
077e84b
style(website): Make Playground Mobile Responsive
jerensl Jun 7, 2024
9759f43
fix!(website): fix ui bug not render costum theme on playground
jerensl Jun 7, 2024
02a5bfa
style(website): refactor playground from using flex to grid and rollb…
jerensl Jun 9, 2024
d32579c
styles(website): make the sidebar playground more smaller in big screen
jerensl Jun 10, 2024
a82f36d
styles(website): make tailwind css playground more clean and remove u…
jerensl Jun 10, 2024
47ee5e0
styles(website): take space from output code editor and give to input…
jerensl Jun 10, 2024
c5330a7
styles(website): remove unnecessary overflow-visibile
jerensl Jun 10, 2024
e250820
Merge branch 'master' into style/playground-mobile-responsive
jonaslagoni Jun 18, 2024
29975d5
Merge branch 'master' into style/playground-mobile-responsive
devilkiller-ag Jun 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions modelina-website/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions modelina-website/package.json
View file
Original file line number Diff line number Diff line change
@@ -21,6 +21,7 @@
"@tailwindcss/line-clamp": "^0.4.0",
"@tailwindcss/typography": "^0.5.9",
"@tippyjs/react": "^4.2.6",
"clsx": "^2.1.1",
"cssnano": "^5.1.14",
"js-base64": "^3.7.4",
"lodash": "^4.17.21",
157 changes: 88 additions & 69 deletions modelina-website/src/components/contexts/PlaygroundContext.tsx
View file
Original file line number Diff line number Diff line change
@@ -20,6 +20,8 @@ interface LoadedState {
}

interface PlaygroundContextProps {
showInputEditor: boolean;
setShowInputEditor: Dispatch<SetStateAction<boolean>>;
showOptions: boolean;
setShowOptions: Dispatch<SetStateAction<boolean>>;
showOutputNavigation: boolean;
@@ -50,9 +52,13 @@ interface PlaygroundContextProps {
setRenderModels: (models: React.ReactNode) => void;
}

const PlaygroundContext = createContext<PlaygroundContextProps | undefined>(undefined);
const PlaygroundContext = createContext<PlaygroundContextProps | undefined>(
undefined
);

export const PlaygroundContextProvider: React.FC<{ children: React.ReactNode; }> = ({ children }) => {
export const PlaygroundContextProvider: React.FC<{
children: React.ReactNode;
}> = ({ children }) => {
const defaultConfig: ModelinaOptions = {
language: 'typescript',
propertyNamingFormat: 'default',
@@ -94,95 +100,108 @@ export const PlaygroundContextProvider: React.FC<{ children: React.ReactNode; }>
kotlinPackageName: 'asyncapi.models'
};

const [showOptions, setShowOptions] = useState(true);
const [showOutputNavigation, setShowOutputNavigation] = useState(true);
const [showInputEditor, setShowInputEditor] = useState(false);
const [showOptions, setShowOptions] = useState(false);
const [showOutputNavigation, setShowOutputNavigation] = useState(false);
const [config, setConfig] = useState<ModelinaOptions>(defaultConfig);
const [input, setInput] = useState(JSON.stringify(defaultAsyncapiDocument, null, 4));
const [input, setInput] = useState(
JSON.stringify(defaultAsyncapiDocument, null, 4)
);
const [models, setModels] = useState<ModelsGeneratorProps[]>([]);
const [generatorCode, setGeneratorCode] = useState('');
const [loaded, setLoaded] = useState({
editorLoaded: false,
hasReceivedCode: false,
hasReceivedCode: false
});
const [showGeneratorCode, setShowGeneratorCode] = useState(false);
const [error, setError] = useState(false);
const [statusCode, setStatusCode] = useState(400);
const [errorMessage, setErrorMessage] = useState('Bad Request');
const [isLoaded, setIsLoaded] = useState(false);
const [hasLoadedQuery, setHasLoadedQuery] = useState(false);
const [renderModels, setRenderModels] = React.useState<React.ReactNode | null>(null);
const [renderModels, setRenderModels] =
React.useState<React.ReactNode | null>(null);

const contextValue = useMemo(() => ({
showOptions,
setShowOptions,
showOutputNavigation,
setShowOutputNavigation,
config,
setConfig,
input,
setInput,
models,
setModels,
generatorCode,
setGeneratorCode,
loaded,
setLoaded,
showGeneratorCode,
setShowGeneratorCode,
error,
setError,
statusCode,
setStatusCode,
errorMessage,
setErrorMessage,
isLoaded,
setIsLoaded,
hasLoadedQuery,
setHasLoadedQuery,
renderModels,
setRenderModels
}), [
showOptions,
setShowOptions,
showOutputNavigation,
setShowOutputNavigation,
config,
setConfig,
input,
setInput,
models,
setModels,
generatorCode,
setGeneratorCode,
loaded,
setLoaded,
showGeneratorCode,
setShowGeneratorCode,
error,
setError,
statusCode,
setStatusCode,
errorMessage,
setErrorMessage,
isLoaded,
setIsLoaded,
hasLoadedQuery,
setHasLoadedQuery,
renderModels,
setRenderModels,
]);
const contextValue = useMemo(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please don't make unnecessary formatting changes, revert these changes.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's been part of the eslint-config-prettier rule and done automatically by prettier from the parent eslint rules, can we have npm run lint:fix as we did in the parent directory?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay sure, can you please create a separate PR for adding the npm run lint:fix command.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure

() => ({
showInputEditor,
setShowInputEditor,
showOptions,
setShowOptions,
showOutputNavigation,
setShowOutputNavigation,
config,
setConfig,
input,
setInput,
models,
setModels,
generatorCode,
setGeneratorCode,
loaded,
setLoaded,
showGeneratorCode,
setShowGeneratorCode,
error,
setError,
statusCode,
setStatusCode,
errorMessage,
setErrorMessage,
isLoaded,
setIsLoaded,
hasLoadedQuery,
setHasLoadedQuery,
renderModels,
setRenderModels
}),
[
showInputEditor,
setShowInputEditor,
showOptions,
setShowOptions,
showOutputNavigation,
setShowOutputNavigation,
config,
setConfig,
input,
setInput,
models,
setModels,
generatorCode,
setGeneratorCode,
loaded,
setLoaded,
showGeneratorCode,
setShowGeneratorCode,
error,
setError,
statusCode,
setStatusCode,
errorMessage,
setErrorMessage,
isLoaded,
setIsLoaded,
hasLoadedQuery,
setHasLoadedQuery,
renderModels,
setRenderModels
]
);

return (
<PlaygroundContext.Provider value={contextValue}>
{children}
</PlaygroundContext.Provider>
);
}
};

export const usePlaygroundContext = () => {
const context = useContext(PlaygroundContext);
if (!context) {
throw new Error('Playground was unable to load the context to display, please report this problem on GitHub.');
throw new Error(
'Playground was unable to load the context to display, please report this problem on GitHub.'
);
}
return context;
};
};
122 changes: 74 additions & 48 deletions modelina-website/src/components/playground/Content.tsx
View file
Original file line number Diff line number Diff line change
@@ -8,17 +8,27 @@ import CustomError from '../CustomError';
import OutputNavigation from './OutputNavigation';
import { OptionsNavigation } from './OptionsNavigation';
import GeneratedModelsComponent from './GeneratedModels';
import clsx from 'clsx';

interface ContentProps {
setNewConfig: (config: string, configValue: any, updateCode?: boolean) => void;
setNewConfig: (
config: string,
configValue: any,
updateCode?: boolean
) => void;
setNewQuery: (queryKey: string, queryValue: any) => void;
generateNewCode: (input: string) => void;
}

export const Content: FunctionComponent<ContentProps> = ({ setNewConfig, setNewQuery, generateNewCode }) => {
export const Content: FunctionComponent<ContentProps> = ({
setNewConfig,
setNewQuery,
generateNewCode
}) => {
const {
config,
input,
showInputEditor,
setInput,
models,
loaded,
@@ -27,62 +37,78 @@ export const Content: FunctionComponent<ContentProps> = ({ setNewConfig, setNewQ
statusCode,
errorMessage,
showOptions,
showOutputNavigation,
showOutputNavigation
} = usePlaygroundContext();

const PlaygroundGeneratedContextValue = useMemo(() => ({
language: config.language,
models: models
}), [config.language, models]);
const PlaygroundGeneratedContextValue = useMemo(
() => ({
language: config.language,
models
}),
[config.language, models]
);

return (
<div className="h-full w-full flex">
{/* OPTIONS & EDITOR */}
<div className="h-full w-[50%] flex">
{
showOptions && <div className={`bg-[#1f2937] text-white h-full w-[100%] md:w-[40%]`}>
{/* OPTIONS */}
<div className="h-full w-[100%] flex">
{showOptions && (
<div className={`bg-[#1f2937] text-white h-full w-full md:w-[40%]`}>
<OptionsNavigation setNewConfig={setNewConfig} />
</div>
}
<div className={`h-full ${showOptions ? "w-[60%]" : "w-full"}`}>
<div className="max-xl:col-span-2 xl:grid-cols-1 h-full">
<div className="h-full bg-code-editor-dark text-white rounded-b shadow-lg font-bold">
<MonacoEditorWrapper
value={input}
onChange={(_, change) => {
setInput(change);
generateNewCode(change);
}}
editorDidMount={() => {
setLoaded({ ...loaded, editorLoaded: true });
}}
language="json"
/>
</div>
</div>
</div>
</div>

{/* OUTPUT NAVIGATION AND OUTPUTS */}
<div className="h-full w-[50%] flex">
{
showOutputNavigation && <div className='h-full w-[100%] md:w-[30%]'>
)}
{showOutputNavigation && (
<div className="h-full w-[100%] md:w-[30%]">
<OutputNavigation />
</div>
}
<div className={`h-full ${showOutputNavigation ? "w-[70%]" : "w-full"}`}>
<div className={`h-full`}>
{error ? (
<CustomError statusCode={statusCode} errorMessage={errorMessage} />
) : (
<PlaygroundGeneratedContext.Provider
value={PlaygroundGeneratedContextValue}
>
<GeneratedModelsComponent setNewQuery={setNewQuery} />
</PlaygroundGeneratedContext.Provider>
)}
)}
{/* Editor Input/Output */}
{showInputEditor ? (
<div
className={clsx('h-full w-full md:w-full', {
'hidden md:block md:w-[60%]': showOptions
})}
>
<div className="max-xl:col-span-2 xl:grid-cols-1 h-full">
<div className="h-full bg-code-editor-dark text-white rounded-b shadow-lg font-bold">
<MonacoEditorWrapper
value={input}
onChange={(_, change) => {
setInput(change);
generateNewCode(change);
}}
editorDidMount={() => {
setLoaded({ ...loaded, editorLoaded: true });
}}
language="json"
/>
</div>
</div>
</div>
) : (
<div
className={clsx('h-full w-[100%]', {
'hidden md:block': showOptions
})}
>
<div className={'h-full w-full'}>
<div className={`h-full`}>
{error ? (
<CustomError
statusCode={statusCode}
errorMessage={errorMessage}
/>
) : (
<PlaygroundGeneratedContext.Provider
value={PlaygroundGeneratedContextValue}
>
<GeneratedModelsComponent setNewQuery={setNewQuery} />
</PlaygroundGeneratedContext.Provider>
)}
</div>
</div>
</div>
</div>
)}
</div>
</div>
);
Loading