Merge pull request #15 from yast/switch-to-patternfly

Switch from Chakra UI to PatternFly + EOS Design System

web/package.json

@@ -3,20 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@chakra-ui/react": "^1.0.0",
-    "@emotion/react": "^11.0.0",
-    "@emotion/styled": "^11.0.0",
+    "@patternfly/patternfly": "^4.164.2",
+    "@patternfly/react-core": "^4.181.1",
+    "@patternfly/react-table": "^4.61.15",
     "@testing-library/jest-dom": "^5.9.0",
     "@testing-library/react": "^10.2.1",
     "@testing-library/user-event": "^12.0.2",
     "axios": "^0.21.1",
+    "eos-ds": "^5.0.0",
+    "eos-icons-react": "^2.2.0",
     "filesize": "^6.3.0",
-    "framer-motion": "^4.0.0",
-    "lucide-react": "^0.15.25",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-icons": "^3.0.0",
     "react-scripts": "5.0.0",
+    "sass": "^1.49.0",
     "use-root-reducer": "^1.0.1",
     "web-vitals": "^0.2.2"
   },

web/src/App.js

@@ -1,42 +1,34 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 
 import {
-  ChakraProvider,
-  Box,
-  Text,
-  VStack,
-  Heading,
-  Flex,
-  Spacer,
-  Divider,
   Button,
   Progress,
-  theme,
-} from '@chakra-ui/react';
-import { ColorModeSwitcher } from './ColorModeSwitcher';
+  Stack,
+  StackItem,
+  Text,
+  TextContent,
+  TextVariants
+} from '@patternfly/react-core';
 
 import Category from './Category';
 import LanguageSelector from './LanguageSelector';
 import TargetSelector from './TargetSelector';
 import ProductSelector from './ProductSelector';
 import Proposal from './Proposal';
 
-// FIXME: improve how icons are managed
 import {
-  Archive,
-  HardDrive,
-  Languages,
-  Clock
-} from 'lucide-react';
+  EOS_TRANSLATE as LanguagesSelectionIcon,
+  EOS_VOLUME as HardDriveIcon,
+  EOS_PACKAGES as ProductsIcon,
+  EOS_DOWNLOADING as ProgressIcon
+} from 'eos-icons-react'
 
 import {
   useInstallerState, useInstallerDispatch, loadInstallation, loadStorage, loadL10n, loadSoftware,
   loadDisks, setOptions, loadOptions, updateProgress, registerWebSocketHandler,
   startInstallation
 } from './context/installer';
 
-const STEPS = 3; // fake number of installation steps
-
 function App() {
   const dispatch = useInstallerDispatch();
   const { installation, storage, l10n, software } = useInstallerState();
@@ -60,75 +52,79 @@ function App() {
       }
 
       // FIXME: use the status_id from the event
-      if (payload.event == "StatusChanged") {
+      if (payload.event === "StatusChanged") {
         loadInstallation(dispatch);
       }
 
-      if (payload.event == "Progress") {
+      if (payload.event === "Progress") {
         updateProgress(dispatch, payload.progress);
       }
     });
   }, []);
 
-  const isInstalling = installation.status != 0;
+  const isInstalling = installation.status !== 0;
   const { progress } = installation;
 
   return (
-    <ChakraProvider theme={theme}>
-        <Box minH="100vh" p={3}>
-          <Flex>
-            <Spacer />
-            <ColorModeSwitcher />
-          </Flex>
-          <VStack spacing={8}>
-            <Heading as="h1">Welcome to $INSTALLER-80</Heading>
-            <Divider />
-
-            <Category title="Language" icon={Languages}>
-              <LanguageSelector
-                value={l10n.language}
-                options={l10n.languages}
-                onChange={(language) => setOptions({ language }, dispatch)} />
-            </Category>
-
-            <Category title="Target" icon={HardDrive}>
-              <TargetSelector
-                value={storage.disk || "Select a device"}
-                options={storage.disks}
-                onChange={disk => setOptions({ disk }, dispatch)}
-              />
-              <Proposal data={storage.proposal}/>
-            </Category>
-
-            <Category title="Product" icon={Archive}>
-              <ProductSelector
-                value={software.product || "Select a product"}
-                options={software.products}
-                onChange={(product) => setOptions({ product }, dispatch)}
-              />
+    <>
+      <Stack hasGutter>
+        <StackItem>
+          <TextContent>
+            <Text component={TextVariants.h1}>Welcome to D-Installer</Text>
+          </TextContent>
+        </StackItem>
+
+        <StackItem>
+          <Category title="Language" icon={LanguagesSelectionIcon}>
+            <LanguageSelector
+              value={l10n.language || "Select language"}
+              options={l10n.languages}
+              onChange={(language) => setOptions({ language }, dispatch)}
+            />
+          </Category>
+        </StackItem>
+
+        <StackItem>
+          <Category title="Target" icon={HardDriveIcon}>
+            <TargetSelector
+              value={storage.disk || "Select target"}
+              options={storage.disks}
+              onChange={disk => setOptions({ disk }, dispatch)}
+            />
+            <Proposal data={storage.proposal}/>
+          </Category>
+        </StackItem>
+
+        <StackItem>
+          <Category title="Product" icon={ProductsIcon}>
+            <ProductSelector
+              value={software.product || "Select a product"}
+              options={software.products}
+              onChange={(product) => setOptions({ product }, dispatch)}
+            />
+          </Category>
+        </StackItem>
+
+        { isInstalling && progress &&
+          <StackItem>
+            <Category title="Progress" icon={ProgressIcon} >
+              <Progress title="Installing" value={Math.round(progress.step / progress.steps * 100)} />
+              <Progress title={progress.title} value={Math.round(progress.substep / progress.substeps * 100)} />
             </Category>
-
-            { isInstalling && progress &&
-              <Category title="Progress" icon={Clock} >
-                <Text>Installing</Text>
-                <Progress hasStripe value={Math.round(progress.step / progress.steps * 100)} />
-                <Text>{ progress.title }</Text>
-                <Progress hasStripe value={Math.round(progress.substep / progress.substeps * 100)} />
-              </Category> }
-          </VStack>
-
-          <Flex p={20}>
-            <Spacer />
-            <Button colorScheme="teal"
-                    size="lg"
-                    disabled={isInstalling}
-                    onClick={() => startInstallation(dispatch)}>
-              Install
-            </Button>
-            { isInstalling }
-          </Flex>
-        </Box>
-    </ChakraProvider>
+          </StackItem> }
+
+        <StackItem>
+          <Button
+            isLarge
+            variant="primary"
+            isDisabled={isInstalling}
+            onClick={() => startInstallation(dispatch)}>
+            Install
+          </Button>
+          { isInstalling }
+        </StackItem>
+      </Stack>
+    </>
   );
 }
 

web/src/App.test.js

@@ -3,8 +3,8 @@ import { screen } from '@testing-library/react';
 import { render } from './test-utils';
 import App from './App';
 
-test('renders learn react link', () => {
+test('renders the App', () => {
   render(<App />);
-  const linkElement = screen.getByText(/learn chakra/i);
-  expect(linkElement).toBeInTheDocument();
+  const title = screen.getByText(/Welcome to D-Installer/i);
+  expect(title).toBeInTheDocument();
 });

web/src/Category.js

@@ -1,26 +1,32 @@
 import {
-  Box,
-  Heading,
-  HStack,
-  VStack,
-  StackDivider,
-  Icon,
-  Text
-} from '@chakra-ui/react';
+  Card,
+  CardBody,
+  Split,
+  SplitItem,
+  Text,
+  TextContent,
+  TextVariants
+} from '@patternfly/react-core';
 
 export default function Category({ icon, title, children, ...rest }) {
   // FIXME: improve how icons are managed
   const Icon = icon;
 
   return (
-    <Box p={5} shadow="sm" borderWidth="1px" minW="50%" {...rest}>
-      <HStack spacing="1rem">
-        <Icon size="48"/>
-        <VStack width="100%" align="stretch" spacing="2" >
-          <Heading fontSize="xl" mb={2}>{title}</Heading>
-          { children }
-        </VStack>
-      </HStack>
-    </Box>
+    <Card {...rest}>
+      <CardBody>
+        <Split>
+          <SplitItem>
+            <Icon size="48"/>
+          </SplitItem>
+          <SplitItem>
+            <TextContent>
+              <Text component={TextVariants.h2}>{title}</Text>
+            </TextContent>
+            { children }
+          </SplitItem>
+        </Split>
+      </CardBody>
+    </Card>
   )
 }