Merge pull request #664 from vselvarajijay/hexagonal

wip: setting up local

apps/registry/package.json

@@ -30,9 +30,12 @@
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"
   }

apps/registry/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

apps/registry/src/App.tsx

@@ -10,7 +10,11 @@ import {
 
 
 
-const App = () => {
+interface AppProps {
+  isPassedToWithAuthenticator: boolean;
+}
+
+const App:React.FC<AppProps> = () => {
   const [themeMode, setThemeMode] = useState('');
   const { authStatus } = useAuthenticator(context => [context.authStatus]);
 
@@ -42,20 +46,16 @@ const App = () => {
   return (
     <ThemeProvider theme={theme} colorMode={themeMode}>
       <Routes>
-          <Route path="/" element={<>root</>} />
+          <Route path="/" element={<>
+            <div className="text-8xl font-bold underline">
+              Hello world!
+            </div>
+            <div className='bg-green-200 font-semibold'>root</div>
+          </>} />
       </Routes>
     </ThemeProvider>
   );
 };
 
 export default withAuthenticator(App);
 
-export async function getStaticProps() {
-  return {
-    props: {
-      isPassedToWithAuthenticator: true,
-    },
-  };
-}
-
-

apps/registry/src/index.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;

apps/registry/src/main.tsx

@@ -1,7 +1,7 @@
+import './index.css'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
-import './index.css'
 import { Authenticator } from '@aws-amplify/ui-react';
 import { AkelloProvider } from '@akello/react-hook'
 import { akello } from './client.ts'
@@ -37,7 +37,6 @@ Amplify.configure({
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
       <BrowserRouter>
-
         <AkelloProvider akello={akello}>
           <Authenticator.Provider>
             <App isPassedToWithAuthenticator={true} />

apps/registry/tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./src/**/*.{html,js,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

packages/npm/react-hook/src/lib/AkelloProvider/AkelloProvider.tsx

@@ -7,19 +7,18 @@ export interface AkelloProviderProps {
   readonly children: ReactNode;
 }
 
-
 export const AkelloProvider = (props: AkelloProviderProps): JSX.Element => {
   const akello = props.akello;
-  
-  const [state, setState] = useState({ 
+
+  const [state, setState] = useState({
     loading: false,
     isAuthenticated: akello.accessToken !== undefined,
     username: akello.getUserName(),
     selectedRegistry: akello.getSelectedRegistry()
   });
 
   useEffect(() => {
-    const eventListener = (): void => {            
+    const eventListener = (): void => {
       setState({
         ...state,
         isAuthenticated: akello.accessToken !== undefined,
@@ -31,7 +30,7 @@ export const AkelloProvider = (props: AkelloProviderProps): JSX.Element => {
     akello.addEventListener('change', eventListener);
     return () => akello.removeEventListener('change', eventListener);
   }, [akello, state]);
- 
+
   const akelloContext = useMemo(
     () => ({
       ...state,