Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
garronej committed Jan 27, 2024
1 parent a41354b commit 8e0c62c
Show file tree
Hide file tree
Showing 15 changed files with 174 additions and 15,788 deletions.
29 changes: 29 additions & 0 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
'react-hooks/exhaustive-deps': 'off',
'@typescript-eslint/no-redeclare': 'off',
'no-labels': 'off',
},
overrides: [
{
files: ['**/*.stories.*'],
rules: {
'import/no-anonymous-default-export': 'off',
},
},
],
}
16 changes: 0 additions & 16 deletions .storybook/main.js

This file was deleted.

13 changes: 0 additions & 13 deletions .storybook/preview.js

This file was deleted.

2 changes: 1 addition & 1 deletion Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,6 @@ RUN yarn build

# production environment
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY --from=build /app/dist /usr/share/nginx/html
COPY --from=build /app/nginx.conf /etc/nginx/conf.d/default.conf
CMD nginx -g 'daemon off;'
5 changes: 1 addition & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,6 @@ This repo constitutes an easily reusable setup for a Keycloak theme project OR f
Keycloak theme that goes along with it.
If you are only looking to create a Keycloak theme (and not a Keycloak theme and an App that share the same codebase) there are a lot of things that you can remove from this starter: [Please read this section of the README](#standalone-keycloak-theme).

> ❗️ WARNING ❗️: Don't waste time trying to port this setup to [Vite](https://vitejs.dev/).
> Currently Keycloakify only works collocated with Webpack projects but [we are working toward enabling collocation with Vite](https://github.com/keycloakify/keycloakify/pull/275)!
# Quick start

```bash
Expand All @@ -32,7 +29,7 @@ yarn storybook # Start Storybook
# You can create stories even for pages that you haven't explicitly overloaded. See src/keycloak-theme/login/pages/LoginResetPassword.stories.tsx
# See Keycloakify's storybook for if you need a starting point for your stories: https://github.com/keycloakify/keycloakify/tree/main/stories

yarn start # See the Hello World app
yarn dev # See the Hello World app
# Uncomment line 97 of src/keycloak-theme/login/kcContext where it reads: `mockPageId: "login.ftl"`, reload https://localhost:3000
# You can now see the login.ftl page with the mock data. (Don't forget to comment it back when you're done)

Expand Down
76 changes: 76 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!--
Notice the use of %BASE_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%BASE_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
-->
<link rel="icon" type="image/png" sizes="32x32" href="%BASE_URL%/favicon-32x32.png">

<title>Keycloakify starter</title>

<link rel="preload" href="%BASE_URL%/fonts/WorkSans/worksans-bold-webfont.woff2" as="font" crossorigin="anonymous">
<link rel="preload" href="%BASE_URL%/fonts/WorkSans/worksans-medium-webfont.woff2" as="font" crossorigin="anonymous">
<link rel="preload" href="%BASE_URL%/fonts/WorkSans/worksans-regular-webfont.woff2" as="font" crossorigin="anonymous">
<link rel="preload" href="%BASE_URL%/fonts/WorkSans/worksans-semibold-webfont.woff2" as="font" crossorigin="anonymous">
<!-- SEE: https://docs.keycloakify.dev/limitations#self-hosted-fonts -->
<!-- Don't forget to import your custom fonts in Storybook as well: https://github.com/keycloakify/keycloakify-starter/blob/bb019e66fb09166cb9af1e24e230994f59daa420/src/keycloak-theme/login/createPageStory.tsx#L21 -->
<style>
/* latin */
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: normal;
/*400*/
font-display: swap;
src: url("%BASE_URL%/fonts/WorkSans/worksans-regular-webfont.woff2") format("woff2");
}

/* latin */
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("%BASE_URL%/fonts/WorkSans/worksans-medium-webfont.woff2") format("woff2");
}

/* latin */
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("%BASE_URL%/fonts/WorkSans/worksans-semibold-webfont.woff2") format("woff2");
}

/* latin */
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: bold;
/*700*/
font-display: swap;
src: url("%BASE_URL%/fonts/WorkSans/worksans-bold-webfont.woff2") format("woff2");
}
</style>

<meta name="keycloakify-ignore-start">
<script>console.log("This is logged Only in the main app, stripped out in the theme")</script>
<meta name="keycloakify-ignore-end">

</head>

<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>

</html>
72 changes: 17 additions & 55 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,9 @@
},
"scripts": {
"postinstall": "copy-keycloak-resources-to-public",
"start": "react-scripts start",
"build": "react-scripts build",
"build-keycloak-theme": "yarn build && keycloakify",
"storybook": "start-storybook -p 6006"
"dev": "vite",
"build": "tsc && vite build",
"build-keycloak-theme": "yarn build && keycloakify"
},
"keycloakify": {
"themeName": "keycloakify-starter",
Expand All @@ -28,59 +27,22 @@
"oidc-spa": "^4.0.0",
"keycloakify": "^9.2.0",
"powerhooks": "^1.0.8",
"react": "18.1.0",
"react-dom": "18.1.0",
"tsafe": "^1.6.6",
"zod": "^3.22.4"
"zod": "^3.22.4",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/node": "^15.3.1",
"@types/react": "18.0.9",
"@types/react-dom": "18.0.4",
"react-scripts": "5.0.1",
"typescript": "~4.7.0",
"@storybook/addon-actions": "^6.5.16",
"@storybook/addon-essentials": "^6.5.16",
"@storybook/addon-interactions": "^6.5.16",
"@storybook/addon-links": "^6.5.16",
"@storybook/builder-webpack5": "^6.5.16",
"@storybook/manager-webpack5": "^6.5.16",
"@storybook/node-logger": "^6.5.16",
"@storybook/preset-create-react-app": "^4.1.2",
"@storybook/react": "^6.5.16",
"@storybook/testing-library": "^0.0.13"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"rules": {
"react-hooks/exhaustive-deps": "off",
"@typescript-eslint/no-redeclare": "off",
"no-labels": "off"
},
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"@typescript-eslint/eslint-plugin": "^6.14.0",
"@typescript-eslint/parser": "^6.14.0",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.55.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"typescript": "^5.2.2",
"vite": "^5.0.8",
"vite-plugin-commonjs": "^0.10.1"
}
}
89 changes: 0 additions & 89 deletions public/index.html

This file was deleted.

6 changes: 3 additions & 3 deletions src/PUBLIC_URL.ts → src/BASE_URL.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ import { kcContext as kcLoginThemeContext } from "keycloak-theme/login/kcContext
import { kcContext as kcAccountThemeContext } from "keycloak-theme/login/kcContext";

/**
* If you need to use process.env.PUBLIC_URL, use this variable instead.
* If you need to use import.meta.env.BASE_URL, use this variable instead.
* If you can, import your assets using the import statement.
*
* See: https://docs.keycloakify.dev/importing-assets#importing-custom-assets-that-arent-fonts
*/
export const PUBLIC_URL = (()=>{
export const BASE_URL = (()=>{

const kcContext = (()=>{

Expand All @@ -25,7 +25,7 @@ export const PUBLIC_URL = (()=>{
})();

return (kcContext === undefined || process.env.NODE_ENV === "development")
? process.env.PUBLIC_URL
? import.meta.env.BASE_URL
: `${kcContext.url.resourcesPath}/build`;

})();
1 change: 1 addition & 0 deletions src/index.tsx → src/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,3 +32,4 @@ createRoot(document.getElementById("root")!).render(
</Suspense>
</StrictMode>
);

5 changes: 3 additions & 2 deletions src/react-app-env.d.ts → src/vite-env.d.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/// <reference types="react-scripts" />
/// <reference types="vite/client" />

declare module "*.md" {
const src: string;
export default src;
}
}

0 comments on commit 8e0c62c

Please sign in to comment.