chore: starting to build the json schema form Stepper

Signed-off-by: blam <ben@blam.sh>

plugins/scaffolder/src/next/TemplateWizardPage/Stepper/Stepper.tsx

@@ -0,0 +1,69 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {
+  Stepper as MuiStepper,
+  Step as MuiStep,
+  StepLabel as MuiStepLabel,
+  Box,
+  Button,
+  makeStyles,
+} from '@material-ui/core';
+import React, { useState } from 'react';
+import { TemplateParameterSchema } from '../../../types';
+
+const useStyles = makeStyles(theme => ({
+  backButton: {
+    marginRight: theme.spacing(1),
+  },
+  footer: {
+    padding: theme.spacing(1, 1),
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'right',
+  },
+}));
+
+export interface StepperProps {
+  manifest: TemplateParameterSchema;
+}
+
+export const Stepper = (props: StepperProps) => {
+  const { steps } = props.manifest;
+  const [activeStep, setActiveStep] = useState(0);
+  const styles = useStyles();
+  const handleBack = () => {};
+  const handleNext = () => {};
+
+  return (
+    <Box>
+      <MuiStepper activeStep={0} alternativeLabel>
+        {steps.map((step, index) => (
+          <MuiStep key={index}>
+            <MuiStepLabel>{step.title}</MuiStepLabel>
+          </MuiStep>
+        ))}
+      </MuiStepper>
+      <div className={styles.footer}>
+        <Button onClick={handleBack} className={styles.backButton}>
+          Back
+        </Button>
+        <Button variant="contained" color="primary" onClick={handleNext}>
+          {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
+        </Button>
+      </div>
+    </Box>
+  );
+};

plugins/scaffolder/src/next/TemplateWizardPage/Stepper/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { Stepper } from './Stepper';

plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx

@@ -29,6 +29,7 @@ import { useApi } from '@backstage/core-plugin-api';
 import { scaffolderApiRef } from '../../api';
 import useAsync from 'react-use/lib/useAsync';
 import { makeStyles } from '@material-ui/core';
+import { Stepper } from './Stepper';
 import { BackstageTheme } from '@backstage/theme';
 
 export interface TemplateWizardPageProps {
@@ -89,7 +90,7 @@ export const TemplateWizardPage = (_props: TemplateWizardPageProps) => {
             noPadding
             titleTypographyProps={{ component: 'h2' }}
           >
-            asd
+            <Stepper manifest={manifest} />
           </InfoCard>
         )}
       </Content>