Compare commits
29 Commits
v10.0.0-rc
...
v10.0.0-rc
| Author | SHA1 | Date | |
|---|---|---|---|
| 83bdbb7a7e | |||
| 89320b8d51 | |||
| 5fa9c3879c | |||
| c0cd76d40e | |||
| 01f60f8013 | |||
| 91ad0712af | |||
| 2cb1b36725 | |||
| 67ce66765f | |||
| c8cc453942 | |||
| 3f835f152f | |||
| 35e8a853e0 | |||
| d084a4bf4a | |||
| 2a6b79e097 | |||
| 5d786c922f | |||
| 26bd5dd534 | |||
| b4df0ce52c | |||
| 386a8d7cd7 | |||
| 5221fb3479 | |||
| 2871f63f25 | |||
| 4c282d0559 | |||
| 4ac14dc074 | |||
| fcdbb04ea6 | |||
| 14f283cf49 | |||
| efc459663a | |||
| d459aaf943 | |||
| 921c7d5441 | |||
| 7d7e648968 | |||
| 1e5eae69e9 | |||
| 1638577d98 |
2
.github/workflows/ci.yaml
vendored
2
.github/workflows/ci.yaml
vendored
@ -37,7 +37,7 @@ jobs:
|
||||
|
||||
storybook:
|
||||
runs-on: ubuntu-latest
|
||||
#if: github.event_name == 'push'
|
||||
if: github.event_name == 'push'
|
||||
needs: test
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
@ -1,70 +0,0 @@
|
||||
|
||||
import React from "react";
|
||||
import { DocsContainer as BaseContainer } from "@storybook/addon-docs";
|
||||
import { useDarkMode } from "storybook-dark-mode";
|
||||
import { darkTheme, lightTheme } from "./customTheme";
|
||||
import "./static/fonts/WorkSans/font.css";
|
||||
|
||||
export function DocsContainer({ children, context }) {
|
||||
const isStorybookUiDark = useDarkMode();
|
||||
|
||||
const theme = isStorybookUiDark ? darkTheme : lightTheme;
|
||||
|
||||
const backgroundColor = theme.appBg;
|
||||
|
||||
return (
|
||||
<>
|
||||
<style>{`
|
||||
body {
|
||||
padding: 0 !important;
|
||||
background-color: ${backgroundColor};
|
||||
}
|
||||
|
||||
.docs-story {
|
||||
background-color: ${backgroundColor};
|
||||
}
|
||||
[id^=story--] .container {
|
||||
border: 1px dashed #e8e8e8;
|
||||
}
|
||||
|
||||
.docblock-argstable-head th:nth-child(3), .docblock-argstable-body tr > td:nth-child(3) {
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
.docblock-argstable-head th:nth-child(3), .docblock-argstable-body tr > td:nth-child(2) p {
|
||||
font-size: 13px;
|
||||
}
|
||||
`}</style>
|
||||
<BaseContainer
|
||||
context={{
|
||||
...context,
|
||||
"storyById": id => {
|
||||
const storyContext = context.storyById(id);
|
||||
return {
|
||||
...storyContext,
|
||||
"parameters": {
|
||||
...storyContext?.parameters,
|
||||
"docs": {
|
||||
...storyContext?.parameters?.docs,
|
||||
"theme": isStorybookUiDark ? darkTheme : lightTheme
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</BaseContainer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function CanvasContainer({ children }) {
|
||||
|
||||
return (
|
||||
<>
|
||||
{children}
|
||||
</>
|
||||
);
|
||||
|
||||
}
|
||||
@ -1,35 +0,0 @@
|
||||
import { create } from "@storybook/theming";
|
||||
|
||||
const brandImage = "logo.png";
|
||||
const brandTitle = "Keycloakify";
|
||||
const brandUrl = "https://github.com/keycloakify/keycloakify";
|
||||
const fontBase = '"Work Sans", sans-serif';
|
||||
const fontCode = "monospace";
|
||||
|
||||
export const darkTheme = create({
|
||||
"base": "dark",
|
||||
"appBg": "#1E1E1E",
|
||||
"appContentBg": "#161616",
|
||||
"barBg": "#161616",
|
||||
"colorSecondary": "#8585F6",
|
||||
"textColor": "#FFFFFF",
|
||||
brandImage,
|
||||
brandTitle,
|
||||
brandUrl,
|
||||
fontBase,
|
||||
fontCode
|
||||
});
|
||||
|
||||
export const lightTheme = create({
|
||||
"base": "light",
|
||||
"appBg": "#F6F6F6",
|
||||
"appContentBg": "#FFFFFF",
|
||||
"barBg": "#FFFFFF",
|
||||
"colorSecondary": "#000091",
|
||||
"textColor": "#212121",
|
||||
brandImage,
|
||||
brandTitle,
|
||||
brandUrl,
|
||||
fontBase,
|
||||
fontCode
|
||||
});
|
||||
33
.storybook/customTheme.ts
Normal file
33
.storybook/customTheme.ts
Normal file
@ -0,0 +1,33 @@
|
||||
const brandImage = "logo.png";
|
||||
const brandTitle = "Keycloakify";
|
||||
const brandUrl = "https://github.com/keycloakify/keycloakify";
|
||||
const fontBase = '"Work Sans", sans-serif';
|
||||
const fontCode = "monospace";
|
||||
|
||||
export const darkTheme = {
|
||||
base: "dark",
|
||||
appBg: "#1E1E1E",
|
||||
appContentBg: "#161616",
|
||||
barBg: "#161616",
|
||||
colorSecondary: "#8585F6",
|
||||
textColor: "#FFFFFF",
|
||||
brandImage,
|
||||
brandTitle,
|
||||
brandUrl,
|
||||
fontBase,
|
||||
fontCode
|
||||
};
|
||||
|
||||
export const lightTheme: typeof darkTheme = {
|
||||
base: "light",
|
||||
appBg: "#F6F6F6",
|
||||
appContentBg: "#FFFFFF",
|
||||
barBg: "#FFFFFF",
|
||||
colorSecondary: "#000091",
|
||||
textColor: "#212121",
|
||||
brandImage,
|
||||
brandTitle,
|
||||
brandUrl,
|
||||
fontBase,
|
||||
fontCode
|
||||
};
|
||||
@ -1,15 +1,13 @@
|
||||
module.exports = {
|
||||
"stories": [
|
||||
"../stories/**/*.stories.@(ts|tsx|mdx)"
|
||||
stories: [
|
||||
"../stories/**/*.stories.tsx"
|
||||
],
|
||||
"addons": [
|
||||
"@storybook/addon-links",
|
||||
"@storybook/addon-essentials",
|
||||
addons: [
|
||||
"storybook-dark-mode",
|
||||
"@storybook/addon-a11y"
|
||||
],
|
||||
"core": {
|
||||
"builder": "webpack5"
|
||||
core: {
|
||||
builder: "webpack5"
|
||||
},
|
||||
"staticDirs": ["./static"]
|
||||
staticDirs: ["./static"]
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { addons } from '@storybook/addons';
|
||||
|
||||
addons.setConfig({
|
||||
"selectedPanel": 'storybook/a11y/panel',
|
||||
"showPanel": false,
|
||||
selectedPanel: 'storybook/a11y/panel',
|
||||
showPanel: false
|
||||
});
|
||||
|
||||
@ -1,3 +1,9 @@
|
||||
<link rel="preload" href="/fonts/WorkSans/worksans-bold-webfont.woff2" as="font" crossorigin="anonymous">
|
||||
<link rel="preload" href="/fonts/WorkSans/worksans-medium-webfont.woff2" as="font" crossorigin="anonymous">
|
||||
<link rel="preload" href="/fonts/WorkSans/worksans-regular-webfont.woff2" as="font" crossorigin="anonymous">
|
||||
<link rel="preload" href="/fonts/WorkSans/worksans-semibold-webfont.woff2" as="font" crossorigin="anonymous">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/WorkSans/font.css">
|
||||
|
||||
<style>
|
||||
body.sb-show-main.sb-main-padded {
|
||||
padding: 0;
|
||||
|
||||
@ -1,116 +1,105 @@
|
||||
import { darkTheme, lightTheme } from "./customTheme";
|
||||
import { DocsContainer, CanvasContainer } from "./Containers";
|
||||
import { create as createTheme } from "@storybook/theming";
|
||||
|
||||
export const parameters = {
|
||||
"actions": { "argTypesRegex": "^on[A-Z].*" },
|
||||
"controls": {
|
||||
"matchers": {
|
||||
"color": /(background|color)$/i,
|
||||
"date": /Date$/,
|
||||
actions: { argTypesRegex: "^on[A-Z].*" },
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/,
|
||||
},
|
||||
},
|
||||
"backgrounds": { "disable": true },
|
||||
"darkMode": {
|
||||
"light": lightTheme,
|
||||
"dark": darkTheme,
|
||||
backgrounds: { disable: true },
|
||||
darkMode: {
|
||||
light: createTheme(lightTheme),
|
||||
dark: createTheme(darkTheme),
|
||||
},
|
||||
"docs": {
|
||||
"container": DocsContainer
|
||||
controls: {
|
||||
disable: true,
|
||||
},
|
||||
"controls": {
|
||||
"disable": true,
|
||||
actions: {
|
||||
disable: true
|
||||
},
|
||||
"actions": {
|
||||
"disable": true
|
||||
},
|
||||
"viewport": {
|
||||
"viewports": {
|
||||
viewport: {
|
||||
viewports: {
|
||||
"1440p": {
|
||||
"name": "1440p",
|
||||
"styles": {
|
||||
"width": "2560px",
|
||||
"height": "1440px",
|
||||
name: "1440p",
|
||||
styles: {
|
||||
width: "2560px",
|
||||
height: "1440px",
|
||||
},
|
||||
},
|
||||
"fullHD": {
|
||||
"name": "Full HD",
|
||||
"styles": {
|
||||
"width": "1920px",
|
||||
"height": "1080px",
|
||||
fullHD: {
|
||||
name: "Full HD",
|
||||
styles: {
|
||||
width: "1920px",
|
||||
height: "1080px",
|
||||
},
|
||||
},
|
||||
"macBookProBig": {
|
||||
"name": "MacBook Pro Big",
|
||||
"styles": {
|
||||
"width": "1024px",
|
||||
"height": "640px",
|
||||
macBookProBig: {
|
||||
name: "MacBook Pro Big",
|
||||
styles: {
|
||||
width: "1024px",
|
||||
height: "640px",
|
||||
},
|
||||
},
|
||||
"macBookProMedium": {
|
||||
"name": "MacBook Pro Medium",
|
||||
"styles": {
|
||||
"width": "1440px",
|
||||
"height": "900px",
|
||||
macBookProMedium: {
|
||||
name: "MacBook Pro Medium",
|
||||
styles: {
|
||||
width: "1440px",
|
||||
height: "900px",
|
||||
},
|
||||
},
|
||||
"macBookProSmall": {
|
||||
"name": "MacBook Pro Small",
|
||||
"styles": {
|
||||
"width": "1680px",
|
||||
"height": "1050px",
|
||||
macBookProSmall: {
|
||||
name: "MacBook Pro Small",
|
||||
styles: {
|
||||
width: "1680px",
|
||||
height: "1050px",
|
||||
},
|
||||
},
|
||||
"pcAgent": {
|
||||
"name": "PC Agent",
|
||||
"styles": {
|
||||
"width": "960px",
|
||||
"height": "540px",
|
||||
pcAgent: {
|
||||
name: "PC Agent",
|
||||
styles: {
|
||||
width: "960px",
|
||||
height: "540px",
|
||||
},
|
||||
},
|
||||
"iphone12Pro": {
|
||||
"name": "Iphone 12 pro",
|
||||
"styles": {
|
||||
"width": "390px",
|
||||
"height": "844px",
|
||||
iphone12Pro: {
|
||||
name: "Iphone 12 pro",
|
||||
styles: {
|
||||
width: "390px",
|
||||
height: "844px",
|
||||
},
|
||||
},
|
||||
"iphone5se": {
|
||||
"name": "Iphone 5/SE",
|
||||
"styles": {
|
||||
"width": "320px",
|
||||
"height": "568px",
|
||||
iphone5se: {
|
||||
name: "Iphone 5/SE",
|
||||
styles: {
|
||||
width: "320px",
|
||||
height: "568px",
|
||||
},
|
||||
},
|
||||
"ipadPro": {
|
||||
"name": "Ipad pro",
|
||||
"styles": {
|
||||
"width": "1240px",
|
||||
"height": "1366px",
|
||||
ipadPro: {
|
||||
name: "Ipad pro",
|
||||
styles: {
|
||||
width: "1240px",
|
||||
height: "1366px",
|
||||
},
|
||||
},
|
||||
"Galaxy s9+": {
|
||||
"name": "Galaxy S9+",
|
||||
"styles": {
|
||||
"width": "320px",
|
||||
"height": "658px",
|
||||
name: "Galaxy S9+",
|
||||
styles: {
|
||||
width: "320px",
|
||||
height: "658px",
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
"options": {
|
||||
"storySort": (a, b) =>
|
||||
options: {
|
||||
storySort: (a, b) =>
|
||||
getHardCodedWeight(b[1].kind) - getHardCodedWeight(a[1].kind),
|
||||
},
|
||||
};
|
||||
|
||||
export const decorators = [
|
||||
(Story) => (
|
||||
<CanvasContainer>
|
||||
<Story />
|
||||
</CanvasContainer>
|
||||
),
|
||||
];
|
||||
|
||||
const { getHardCodedWeight } = (() => {
|
||||
|
||||
const orderedPagesPrefix = [
|
||||
|
||||
269
README.md
269
README.md
@ -2,7 +2,7 @@
|
||||
<img src="https://user-images.githubusercontent.com/6702424/109387840-eba11f80-7903-11eb-9050-db1dad883f78.png">
|
||||
</p>
|
||||
<p align="center">
|
||||
<i>🔏 Create Keycloak themes using React 🔏</i>
|
||||
<i>🔏 Keycloak Theming for the Modern Web 🔏</i>
|
||||
<br>
|
||||
<br>
|
||||
<a href="https://github.com/garronej/keycloakify/actions">
|
||||
@ -38,22 +38,38 @@
|
||||
<i>This build tool generates a Keycloak theme <a href="https://www.keycloakify.dev">Learn more</a></i>
|
||||
<br/>
|
||||
<br/>
|
||||
<img width="400" src="https://github.com/keycloakify/keycloakify/assets/6702424/e66d105c-c06f-47d1-8a31-a6ab09da4e80">
|
||||
<img width="400" src="https://github.com/user-attachments/assets/6bf3bef9-00b0-4460-97b9-0d2da8500798">
|
||||
</p>
|
||||
|
||||
Keycloakify is fully compatible with Keycloak 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, [~~22~~](https://github.com/keycloakify/keycloakify/issues/389#issuecomment-1822509763), 23, 24, 25...[and beyond](https://github.com/keycloakify/keycloakify/discussions/346#discussioncomment-5889791)
|
||||
|
||||
> NOTE: Keycloakify 10 is still in realase-candidate state. [Follow progress](https://github.com/keycloakify/keycloakify/pull/538).
|
||||
> NOTE: Keycloakify 10 is still in release-candidate state. [Follow progress](https://github.com/keycloakify/keycloakify/pull/538).
|
||||
|
||||
## Sponsor
|
||||
## Sponsors
|
||||
|
||||
We are exclusively sponsored by [Cloud IAM](https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github), a French company offering Keycloak as a service.
|
||||
Their dedicated support helps us continue the development and maintenance of this project.
|
||||
Friends for the project, we trust and recommend their services.
|
||||
|
||||
[Cloud IAM](https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github) provides the following services:
|
||||
<br/>
|
||||
|
||||
- Simplify and secure your Keycloak Identity and Access Management. Keycloak as a Service.
|
||||
- Custom theme building for your brand using Keycloakify.
|
||||
<div align="center">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div align="center">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://www.zone2.tech/services/keycloak-consulting">
|
||||
<i><strong>Keycloak Consulting Services</strong> - Your partner in Keycloak deployment, configuration, and extension development for optimized identity management solutions.</i>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<div align="center">
|
||||
|
||||
@ -68,13 +84,11 @@ Their dedicated support helps us continue the development and maintenance of thi
|
||||
</div>
|
||||
|
||||
<p align="center">
|
||||
<i>Checkout <a href="https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github">Cloud-IAM</a> and use promo code <code>keycloakify5</code></i>
|
||||
<br/>
|
||||
<i>5% of your annual subscription will be donated to us, and you'll get 5% off too.</i>
|
||||
<a href="https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github"><strong>Managed Keycloak Provider</strong> - With Cloud-IAM powering your Keycloak clusters, you can sleep easy knowing you've got the software and the experts you need for operational excellence. </a>
|
||||
<br/>
|
||||
Use code <code>keycloakify5</code> at checkout for a 5% discount.
|
||||
</p>
|
||||
|
||||
Thank you, [Cloud-IAM](https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github), for your support!
|
||||
|
||||
## Contributors ✨
|
||||
|
||||
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
|
||||
@ -125,230 +139,3 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
<!-- ALL-CONTRIBUTORS-LIST:END -->
|
||||
|
||||
# Changelog highlights
|
||||
|
||||
## 9.5
|
||||
|
||||
- Post build hook: You can now apply custom transformation to your theme files. [Learn more](https://docs.keycloakify.dev/build-options#postbuild-hook).
|
||||
- You can now specify your option in the Keycloakify's Vite plugin instead in the package.json. [See example](https://docs.keycloakify.dev/build-options#themename).
|
||||
|
||||
## 9.4
|
||||
|
||||
**Vite Support! 🎉**
|
||||
|
||||
- [The starter is now a Vite project](https://github.com/keycloakify/keycloakify-starter).
|
||||
The Webpack based starter is accessible [here](https://github.com/keycloakify/keycloakify-starter-cra).
|
||||
- CRA (Webpack) remains supported for the forseable future.
|
||||
- If you have a CRA Keycloakify theme that you wish to migrate to Vite checkout [this migration guide](https://docs.keycloakify.dev/migration-guides/cra-greater-than-vite).
|
||||
|
||||
## 9.0
|
||||
|
||||
Bring back support for account themes in Keycloak v23 and up! [See issue](https://github.com/keycloakify/keycloakify/issues/389).
|
||||
|
||||
### Breaking changes
|
||||
|
||||
Very few. Check them out [here](https://docs.keycloakify.dev/migration-guides/v8-greater-than-v9).
|
||||
|
||||
## 8.0
|
||||
|
||||
- Much smaller .jar size. 70.2 MB -> 7.8 MB.
|
||||
Keycloakify now detects which of the static resources from the default theme are actually used by your theme and only include those in the .jar.
|
||||
- Build time: The first build is slowed but the subsequent build are faster. [Update your CI so that the cache is persisted across CI build](https://github.com/keycloakify/keycloakify-starter/commit/bc378d5afb67e796f520afbc348185f3e319d9d0).
|
||||
|
||||
### Breaking changes
|
||||
|
||||
There are very few breaking changes in this major version. [Check them out](https://docs.keycloakify.dev/migration-guides/v7-greater-than-v8).
|
||||
|
||||
## 7.15
|
||||
|
||||
- The i18n messages you defines in your theme are now also maid available to Keycloak.
|
||||
In practice this mean that you can now customize the `kcContext.message.summary` that
|
||||
display a general alert and the values returned by `kcContext.messagesPerField.get()` that
|
||||
are used to display specific error on some field of the form.
|
||||
[See video](https://youtu.be/D6tZcemReTI)
|
||||
|
||||
## 7.14
|
||||
|
||||
- Deprecate the `extraPages` build option. Keycloakify is now able to analyze your code to detect extra pages.
|
||||
|
||||
## 7.13
|
||||
|
||||
- Deprecate `customUserAttribute`, Keycloakify now analyze your code to predict field name usage. [See doc](https://docs.keycloakify.dev/build-options#customuserattributes).
|
||||
It's now mandatory to [adopt the new directory structure](https://docs.keycloakify.dev/migration-guides/v6-greater-than-v7).
|
||||
|
||||
## 7.12
|
||||
|
||||
- You can now pack multiple themes variant in a single `.jar` bundle. In vanilla Keycloak themes you have the ability to extend a base theme.
|
||||
There is now an idiomatic way of achieving the same result. [Learn more](https://docs.keycloakify.dev/build-options#keycloakify.themeVariantNames).
|
||||
|
||||
## 7.9
|
||||
|
||||
- Separate script for copying the default theme static assets to the public directory.
|
||||
Theses assets are only needed for testing your theme locally in Storybook or with a `mockPageId`.
|
||||
You are now expected to have a `"prepare": "copy-keycloak-resources-to-public",` in your package.json scripts.
|
||||
This script will create `public/keycloak-assets` when you run `yarn install` (If you are using another package manager
|
||||
like `pnpm` makes sure that `"prepare"` is actually ran.)
|
||||
[See the updated starter](https://github.com/keycloakify/keycloakify-starter/blob/94532fcf10bf8b19e0873be8575fd28a8958a806/package.json#L11). `public/keycloak-assets` shouldn't be tracked by GIT and is automatically ignored.
|
||||
|
||||
## 7.7
|
||||
|
||||
- Better storybook support, see [the starter project](https://github.com/keycloakify/keycloakify-starter).
|
||||
|
||||
## 7.0 🍾
|
||||
|
||||
- Account theme support 🚀
|
||||
- It's much easier to customize pages at the CSS level, you can now see in the browser dev tool the customizable classes.
|
||||
- New interactive CLI tool `npx eject-keycloak-page`, that enables to select the page you want to customize at the component level.
|
||||
- There is [a Storybook](https://storybook.keycloakify.dev)
|
||||
- [Remember me is fixed](https://github.com/keycloakify/keycloakify/pull/272)
|
||||
|
||||
## 6.13
|
||||
|
||||
- Build work behind corporate proxies, [see issue](https://github.com/keycloakify/keycloakify/issues/257).
|
||||
|
||||
## 6.12
|
||||
|
||||
Massive improvement in the developer experience:
|
||||
|
||||
- There is now only one starter repo: https://github.com/codegouvfr/keycloakify-starter
|
||||
- A lot of comments have been added in the code of the starter to make it easier to get started.
|
||||
- The doc has been updated: https://docs.keycloakify.dev
|
||||
- A lot of improvements in the type system.
|
||||
|
||||
## 6.11.4
|
||||
|
||||
- You no longer need to have Maven installed to build the theme. Thanks to @lordvlad, [see PR](https://github.com/keycloakify/keycloakify/pull/239).
|
||||
- Feature new build options: [`bundler`](https://docs.keycloakify.dev/build-options#keycloakify.bundler), [`groupId`](https://docs.keycloakify.dev/build-options#keycloakify.groupid), [`artifactId`](https://docs.keycloakify.dev/build-options#keycloakify.artifactid), [`version`](https://docs.keycloakify.dev/build-options#version).
|
||||
Theses options can be user to customize the output name of the .jar. You can use environnement variables to overrides the values read in the package.json. Thanks to @lordvlad.
|
||||
|
||||
## 6.10.0
|
||||
|
||||
- Widows compat (thanks to @lordvlad, [see PR](https://github.com/keycloakify/keycloakify/pull/226)). WSL is no longer required 🎉
|
||||
|
||||
## 6.8.4
|
||||
|
||||
- `@emotion/react` is no longer a peer dependency of Keycloakify.
|
||||
|
||||
## 6.8.0
|
||||
|
||||
- It is now possible to pass a custom `<Template />` component as a prop to `<KcApp />` and every
|
||||
individual page (`<Login />`, `<RegisterUserProfile />`, ...) it enables to customize only the header and footer for
|
||||
example without having to switch to a full-component level customization. [See issue](https://github.com/keycloakify/keycloakify/issues/191).
|
||||
|
||||
## 6.7.0
|
||||
|
||||
- Add support for `webauthn-authenticate.ftl` thanks to [@mstrodl](https://github.com/Mstrodl)'s hacktoberfest [PR](https://github.com/keycloakify/keycloakify/pull/185).
|
||||
|
||||
## 6.6.0
|
||||
|
||||
- Add support for `login-password.ftl` thanks to [@mstrodl](https://github.com/Mstrodl)'s hacktoberfest [PR](https://github.com/keycloakify/keycloakify/pull/184).
|
||||
|
||||
## 6.5.0
|
||||
|
||||
- Add support for `login-username.ftl` thanks to [@mstrodl](https://github.com/Mstrodl)'s hacktoberfest [PR](https://github.com/keycloakify/keycloakify/pull/183).
|
||||
|
||||
## 6.4.0
|
||||
|
||||
- You can now optionally pass a `doFetchDefaultThemeResources: boolean` prop to every page component and the default `<KcApp />`
|
||||
This enables you to prevent the default CSS and JS that comes with the builtin Keycloak theme to be downloaded.
|
||||
You'll get [a black slate](https://user-images.githubusercontent.com/6702424/192619083-4baa5df4-4a21-4ec7-8e28-d200d1208299.png).
|
||||
|
||||
## 6.0.0
|
||||
|
||||
- Bundle size drastically reduced, locals and component dynamically loaded.
|
||||
- First print much quicker, use of React.lazy() everywhere.
|
||||
- Real i18n API.
|
||||
- Actual documentation for build options.
|
||||
|
||||
Checkout [the migration guide](https://docs.keycloakify.dev/v5-to-v6)
|
||||
|
||||
## 5.8.0
|
||||
|
||||
- [React.lazy()](https://reactjs.org/docs/code-splitting.html#reactlazy) support 🎉. [#141](https://github.com/keycloakify/keycloakify/issues/141)
|
||||
|
||||
## 5.7.0
|
||||
|
||||
- Feat `logout-confirm.ftl`. [PR](https://github.com/keycloakify/keycloakify/pull/120)
|
||||
|
||||
## 5.6.4
|
||||
|
||||
Fix `login-verify-email.ftl` page. [Before](https://user-images.githubusercontent.com/6702424/177436014-0bad22c4-5bfb-45bb-8fc9-dad65143cd0c.png) - [After](https://user-images.githubusercontent.com/6702424/177435797-ec5d7db3-84cf-49cb-8efc-3427a81f744e.png)
|
||||
|
||||
## 5.6.0
|
||||
|
||||
Add support for `login-config-totp.ftl` page [#127](https://github.com/keycloakify/keycloakify/pull/127).
|
||||
|
||||
## 5.3.0
|
||||
|
||||
Rename `keycloak_theme_email` to `keycloak_email`.
|
||||
If you already had a `keycloak_theme_email` you should rename it `keycloak_email`.
|
||||
|
||||
## 5.0.0
|
||||
|
||||
[Migration guide](https://github.com/garronej/keycloakify-demo-app/blob/a5b6a50f24bc25e082931f5ad9ebf47492acd12a/src/index.tsx#L46-L63)
|
||||
New i18n system.
|
||||
Import of terms and services have changed. [See example](https://github.com/garronej/keycloakify-demo-app/blob/a5b6a50f24bc25e082931f5ad9ebf47492acd12a/src/index.tsx#L46-L63).
|
||||
|
||||
## 4.10.0
|
||||
|
||||
Add `login-idp-link-email.ftl` page [See PR](https://github.com/keycloakify/keycloakify/pull/92).
|
||||
|
||||
## 4.8.0
|
||||
|
||||
[Email template customization.](#email-template-customization)
|
||||
|
||||
## 4.7.4
|
||||
|
||||
**M1 Mac** support (for testing locally with a dockerized Keycloak).
|
||||
|
||||
## 4.7.2
|
||||
|
||||
> WARNING: This is broken.
|
||||
> Testing with local Keycloak container working with M1 Mac. Thanks to [@eduardosanzb](https://github.com/keycloakify/keycloakify/issues/43#issuecomment-975699658).
|
||||
> Be aware: When running M1s you are testing with Keycloak v15 else the local container spun will be a Keycloak v16.1.0.
|
||||
|
||||
## 4.7.0
|
||||
|
||||
Register with user profile enabled: Out of the box `options` validator support.
|
||||
[Example](https://user-images.githubusercontent.com/6702424/158911163-81e6bbe8-feb0-4dc8-abff-de199d7a678e.mov)
|
||||
|
||||
## 4.6.0
|
||||
|
||||
`tss-react` and `powerhooks` are no longer peer dependencies of `keycloakify`.
|
||||
After updating Keycloakify you can remove `tss-react` and `powerhooks` from your dependencies if you don't use them explicitly.
|
||||
|
||||
## 4.5.3
|
||||
|
||||
There is a new recommended way to setup highly customized theme. See [here](https://github.com/garronej/keycloakify-demo-app/blob/look_and_feel/src/KcApp/KcApp.tsx).
|
||||
Unlike with [the previous recommended method](https://github.com/garronej/keycloakify-demo-app/blob/a51660578bea15fb3e506b8a2b78e1056c6d68bb/src/KcApp/KcApp.tsx),
|
||||
with this new method your theme wont break on minor Keycloakify update.
|
||||
|
||||
## 4.3.0
|
||||
|
||||
Feature [`login-update-password.ftl`](https://user-images.githubusercontent.com/6702424/147517600-6191cf72-93dd-437b-a35c-47180142063e.png).
|
||||
Every time a page is added it's a breaking change for non CSS-only theme.
|
||||
Change [this](https://github.com/garronej/keycloakify-demo-app/blob/df664c13c77ce3c53ac7df0622d94d04e76d3f9f/src/KcApp/KcApp.tsx#L17) and [this](https://github.com/garronej/keycloakify-demo-app/blob/df664c13c77ce3c53ac7df0622d94d04e76d3f9f/src/KcApp/KcApp.tsx#L37) to update.
|
||||
|
||||
## 4
|
||||
|
||||
- Out of the box [frontend form validation](#user-profile-and-frontend-form-validation) 🥳
|
||||
- Improvements (and breaking changes in `import { useKcMessage } from "keycloakify"`.
|
||||
|
||||
## 3
|
||||
|
||||
No breaking changes except that `@emotion/react`, [`tss-react`](https://www.npmjs.com/package/tss-react) and [`powerhooks`](https://www.npmjs.com/package/powerhooks) are now `peerDependencies` instead of being just dependencies.
|
||||
It's important to avoid problem when using `keycloakify` alongside [`mui`](https://mui.com) and
|
||||
[when passing params from the app to the login page](https://github.com/keycloakify/keycloakify#implement-context-persistence-optional).
|
||||
|
||||
## 2.5
|
||||
|
||||
- Feature [Use advanced message](https://github.com/keycloakify/keycloakify/blob/59f106bf9e210b63b190826da2bf5f75fc8b7644/src/lib/i18n/useKcMessage.tsx#L53-L66)
|
||||
and [`messagesPerFields`](https://github.com/keycloakify/keycloakify/blob/59f106bf9e210b63b190826da2bf5f75fc8b7644/src/lib/getKcContext/KcContextBase.ts#L70-L75) (implementation [here](https://github.com/keycloakify/keycloakify/blob/59f106bf9e210b63b190826da2bf5f75fc8b7644/src/bin/build-keycloak-theme/generateFtl/common.ftl#L130-L189))
|
||||
- Test container now uses Keycloak version `15.0.2`.
|
||||
|
||||
## 2
|
||||
|
||||
- It's now possible to implement custom `.ftl` pages.
|
||||
- Support for Keycloak plugins that introduce non standard ftl values.
|
||||
(Like for example [this plugin](https://github.com/micedre/keycloak-mail-whitelisting) that define `authorizedMailDomains` in `register.ftl`).
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "keycloakify",
|
||||
"version": "10.0.0-rc.121",
|
||||
"version": "10.0.0-rc.130",
|
||||
"description": "Create Keycloak themes using React",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@ -72,14 +72,10 @@
|
||||
"@emotion/react": "^11.11.4",
|
||||
"@octokit/rest": "^20.1.1",
|
||||
"@storybook/addon-a11y": "^6.5.16",
|
||||
"@storybook/addon-actions": "^6.5.13",
|
||||
"@storybook/addon-essentials": "^6.5.13",
|
||||
"@storybook/addon-interactions": "^6.5.13",
|
||||
"@storybook/addon-links": "^6.5.13",
|
||||
"@storybook/builder-webpack5": "^6.5.13",
|
||||
"@storybook/manager-webpack5": "^6.5.13",
|
||||
"@storybook/react": "^6.5.13",
|
||||
"@storybook/testing-library": "^0.0.13",
|
||||
"eslint-plugin-storybook": "^0.6.7",
|
||||
"@types/babel__generator": "^7.6.4",
|
||||
"@types/make-fetch-happen": "^10.0.1",
|
||||
"@types/minimist": "^1.2.2",
|
||||
@ -92,7 +88,6 @@
|
||||
"cheerio": "^1.0.0-rc.12",
|
||||
"chokidar-cli": "^3.0.0",
|
||||
"cli-select": "^1.1.2",
|
||||
"eslint-plugin-storybook": "^0.6.7",
|
||||
"husky": "^4.3.8",
|
||||
"lint-staged": "^11.0.0",
|
||||
"magic-string": "^0.30.7",
|
||||
|
||||
@ -26,11 +26,43 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
|
||||
|
||||
console.log(chalk.cyan("Theme type:"));
|
||||
|
||||
const { value: themeType } = await cliSelect<ThemeType>({
|
||||
values: [...THEME_TYPES]
|
||||
}).catch(() => {
|
||||
process.exit(-1);
|
||||
});
|
||||
const themeType = await (async () => {
|
||||
const values = THEME_TYPES.filter(themeType => {
|
||||
switch (themeType) {
|
||||
case "account":
|
||||
return buildContext.implementedThemeTypes.account.isImplemented;
|
||||
case "login":
|
||||
return buildContext.implementedThemeTypes.login.isImplemented;
|
||||
}
|
||||
assert<Equals<typeof themeType, never>>(false);
|
||||
});
|
||||
|
||||
assert(values.length > 0, "No theme is implemented in this project");
|
||||
|
||||
if (values.length === 1) {
|
||||
return values[0];
|
||||
}
|
||||
|
||||
const { value } = await cliSelect<ThemeType>({
|
||||
values
|
||||
}).catch(() => {
|
||||
process.exit(-1);
|
||||
});
|
||||
|
||||
return value;
|
||||
})();
|
||||
|
||||
if (
|
||||
themeType === "account" &&
|
||||
(assert(buildContext.implementedThemeTypes.account.isImplemented),
|
||||
buildContext.implementedThemeTypes.account.type === "Single-Page")
|
||||
) {
|
||||
console.log(
|
||||
`${chalk.red("✗")} Sorry, there is no Storybook support for Single-Page Account themes.`
|
||||
);
|
||||
|
||||
process.exit(0);
|
||||
}
|
||||
|
||||
console.log(`→ ${themeType}`);
|
||||
|
||||
|
||||
@ -12,7 +12,12 @@ import {
|
||||
} from "./shared/constants";
|
||||
import { capitalize } from "tsafe/capitalize";
|
||||
import * as fs from "fs";
|
||||
import { join as pathJoin, relative as pathRelative, dirname as pathDirname } from "path";
|
||||
import {
|
||||
join as pathJoin,
|
||||
relative as pathRelative,
|
||||
dirname as pathDirname,
|
||||
basename as pathBasename
|
||||
} from "path";
|
||||
import { kebabCaseToCamelCase } from "./tools/kebabCaseToSnakeCase";
|
||||
import { assert, Equals } from "tsafe/assert";
|
||||
import type { CliCommandOptions } from "./main";
|
||||
@ -28,11 +33,114 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
|
||||
|
||||
console.log(chalk.cyan("Theme type:"));
|
||||
|
||||
const { value: themeType } = await cliSelect<ThemeType>({
|
||||
values: [...THEME_TYPES]
|
||||
}).catch(() => {
|
||||
process.exit(-1);
|
||||
});
|
||||
const themeType = await (async () => {
|
||||
const values = THEME_TYPES.filter(themeType => {
|
||||
switch (themeType) {
|
||||
case "account":
|
||||
return buildContext.implementedThemeTypes.account.isImplemented;
|
||||
case "login":
|
||||
return buildContext.implementedThemeTypes.login.isImplemented;
|
||||
}
|
||||
assert<Equals<typeof themeType, never>>(false);
|
||||
});
|
||||
|
||||
assert(values.length > 0, "No theme is implemented in this project");
|
||||
|
||||
if (values.length === 1) {
|
||||
return values[0];
|
||||
}
|
||||
|
||||
const { value } = await cliSelect<ThemeType>({
|
||||
values
|
||||
}).catch(() => {
|
||||
process.exit(-1);
|
||||
});
|
||||
|
||||
return value;
|
||||
})();
|
||||
|
||||
if (
|
||||
themeType === "account" &&
|
||||
(assert(buildContext.implementedThemeTypes.account.isImplemented),
|
||||
buildContext.implementedThemeTypes.account.type === "Single-Page")
|
||||
) {
|
||||
const srcDirPath = pathJoin(
|
||||
pathDirname(buildContext.packageJsonFilePath),
|
||||
"node_modules",
|
||||
"@keycloakify",
|
||||
"keycloak-account-ui",
|
||||
"src"
|
||||
);
|
||||
|
||||
console.log(
|
||||
[
|
||||
`There isn't an interactive CLI to eject components of the Single-Page Account theme.`,
|
||||
`You can however copy paste into your codebase the any file or directory from the following source directory:`,
|
||||
``,
|
||||
`${chalk.bold(pathJoin(pathRelative(process.cwd(), srcDirPath)))}`,
|
||||
``
|
||||
].join("\n")
|
||||
);
|
||||
|
||||
eject_entrypoint: {
|
||||
const kcAccountUiTsxFileRelativePath = "KcAccountUi.tsx";
|
||||
|
||||
const accountThemeSrcDirPath = pathJoin(
|
||||
buildContext.themeSrcDirPath,
|
||||
"account"
|
||||
);
|
||||
|
||||
const targetFilePath = pathJoin(
|
||||
accountThemeSrcDirPath,
|
||||
kcAccountUiTsxFileRelativePath
|
||||
);
|
||||
|
||||
if (fs.existsSync(targetFilePath)) {
|
||||
break eject_entrypoint;
|
||||
}
|
||||
|
||||
fs.cpSync(
|
||||
pathJoin(srcDirPath, kcAccountUiTsxFileRelativePath),
|
||||
targetFilePath
|
||||
);
|
||||
|
||||
{
|
||||
const kcPageTsxFilePath = pathJoin(accountThemeSrcDirPath, "KcPage.tsx");
|
||||
|
||||
const kcPageTsxCode = fs.readFileSync(kcPageTsxFilePath).toString("utf8");
|
||||
|
||||
const componentName = pathBasename(
|
||||
kcAccountUiTsxFileRelativePath
|
||||
).replace(/.tsx$/, "");
|
||||
|
||||
const modifiedKcPageTsxCode = kcPageTsxCode.replace(
|
||||
`@keycloakify/keycloak-account-ui/${componentName}`,
|
||||
`./${componentName}`
|
||||
);
|
||||
|
||||
fs.writeFileSync(
|
||||
kcPageTsxFilePath,
|
||||
Buffer.from(modifiedKcPageTsxCode, "utf8")
|
||||
);
|
||||
}
|
||||
|
||||
const routesTsxFilePath = pathRelative(
|
||||
process.cwd(),
|
||||
pathJoin(srcDirPath, "routes.tsx")
|
||||
);
|
||||
|
||||
console.log(
|
||||
[
|
||||
`To help you get started ${chalk.bold(pathRelative(process.cwd(), targetFilePath))} has been copied into your project.`,
|
||||
`The next step is usually to eject ${chalk.bold(routesTsxFilePath)}`,
|
||||
`with \`cp ${routesTsxFilePath} ${pathRelative(process.cwd(), accountThemeSrcDirPath)}\``,
|
||||
`then update the import of routes in ${kcAccountUiTsxFileRelativePath}.`
|
||||
].join("\n")
|
||||
);
|
||||
}
|
||||
|
||||
process.exit(0);
|
||||
}
|
||||
|
||||
console.log(`→ ${themeType}`);
|
||||
|
||||
|
||||
@ -77,7 +77,8 @@ export function generateFtlFilesCodeFactory(params: {
|
||||
(
|
||||
[
|
||||
["link", "href"],
|
||||
["script", "src"]
|
||||
["script", "src"],
|
||||
["script", "data-src"]
|
||||
] as const
|
||||
).forEach(([selector, attrName]) =>
|
||||
$(selector).each((...[, element]) => {
|
||||
|
||||
@ -208,6 +208,18 @@ function decodeHtmlEntities(htmlStr){
|
||||
) || (
|
||||
key == "attributes" &&
|
||||
areSamePath(path, ["realm"])
|
||||
) || (
|
||||
xKeycloakify.pageId == "index.ftl" &&
|
||||
xKeycloakify.themeType == "account" &&
|
||||
areSamePath(path, ["realm"]) &&
|
||||
![
|
||||
"name",
|
||||
"registrationEmailAsUsername",
|
||||
"editUsernameAllowed",
|
||||
"isInternationalizationEnabled",
|
||||
"identityFederationEnabled",
|
||||
"userManagedAccessAllowed"
|
||||
]?seq_contains(key)
|
||||
)
|
||||
>
|
||||
<#-- <#local outSeq += ["/*" + path?join(".") + "." + key + " excluded*/"]> -->
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
"composites": {
|
||||
"realm": ["offline_access", "uma_authorization"],
|
||||
"client": {
|
||||
"account": ["view-profile", "manage-account"]
|
||||
"account": ["delete-account", "view-profile", "manage-account"]
|
||||
}
|
||||
},
|
||||
"clientRole": false,
|
||||
@ -611,8 +611,8 @@
|
||||
"name": "",
|
||||
"description": "",
|
||||
"rootUrl": "https://my-theme.keycloakify.dev",
|
||||
"adminUrl": "",
|
||||
"baseUrl": "",
|
||||
"adminUrl": "https://my-theme.keycloakify.dev",
|
||||
"baseUrl": "https://my-theme.keycloakify.dev",
|
||||
"surrogateAuthRequired": false,
|
||||
"enabled": true,
|
||||
"alwaysDisplayInConsole": false,
|
||||
@ -2099,7 +2099,7 @@
|
||||
"alias": "delete_account",
|
||||
"name": "Delete Account",
|
||||
"providerId": "delete_account",
|
||||
"enabled": false,
|
||||
"enabled": true,
|
||||
"defaultAction": false,
|
||||
"priority": 60,
|
||||
"config": {}
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
"composites": {
|
||||
"realm": ["offline_access", "uma_authorization"],
|
||||
"client": {
|
||||
"account": ["view-profile", "manage-account"]
|
||||
"account": ["delete-account", "view-profile", "manage-account"]
|
||||
}
|
||||
},
|
||||
"clientRole": false,
|
||||
@ -618,8 +618,8 @@
|
||||
"name": "",
|
||||
"description": "",
|
||||
"rootUrl": "https://my-theme.keycloakify.dev",
|
||||
"adminUrl": "",
|
||||
"baseUrl": "",
|
||||
"adminUrl": "https://my-theme.keycloakify.dev",
|
||||
"baseUrl": "https://my-theme.keycloakify.dev",
|
||||
"surrogateAuthRequired": false,
|
||||
"enabled": true,
|
||||
"alwaysDisplayInConsole": false,
|
||||
@ -2130,7 +2130,7 @@
|
||||
"alias": "delete_account",
|
||||
"name": "Delete Account",
|
||||
"providerId": "delete_account",
|
||||
"enabled": false,
|
||||
"enabled": true,
|
||||
"defaultAction": false,
|
||||
"priority": 60,
|
||||
"config": {}
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
"composites": {
|
||||
"realm": ["offline_access", "uma_authorization"],
|
||||
"client": {
|
||||
"account": ["view-profile", "manage-account"]
|
||||
"account": ["delete-account", "view-profile", "manage-account"]
|
||||
}
|
||||
},
|
||||
"clientRole": false,
|
||||
@ -628,8 +628,8 @@
|
||||
"name": "",
|
||||
"description": "",
|
||||
"rootUrl": "https://my-theme.keycloakify.dev",
|
||||
"adminUrl": "",
|
||||
"baseUrl": "",
|
||||
"adminUrl": "https://my-theme.keycloakify.dev",
|
||||
"baseUrl": "https://my-theme.keycloakify.dev",
|
||||
"surrogateAuthRequired": false,
|
||||
"enabled": true,
|
||||
"alwaysDisplayInConsole": false,
|
||||
@ -2140,7 +2140,7 @@
|
||||
"alias": "delete_account",
|
||||
"name": "Delete Account",
|
||||
"providerId": "delete_account",
|
||||
"enabled": false,
|
||||
"enabled": true,
|
||||
"defaultAction": false,
|
||||
"priority": 60,
|
||||
"config": {}
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
"composites": {
|
||||
"realm": ["offline_access", "uma_authorization"],
|
||||
"client": {
|
||||
"account": ["view-profile", "manage-account"]
|
||||
"account": ["delete-account", "view-profile", "manage-account"]
|
||||
}
|
||||
},
|
||||
"clientRole": false,
|
||||
@ -632,8 +632,8 @@
|
||||
"name": "",
|
||||
"description": "",
|
||||
"rootUrl": "https://my-theme.keycloakify.dev",
|
||||
"adminUrl": "",
|
||||
"baseUrl": "",
|
||||
"adminUrl": "https://my-theme.keycloakify.dev",
|
||||
"baseUrl": "https://my-theme.keycloakify.dev",
|
||||
"surrogateAuthRequired": false,
|
||||
"enabled": true,
|
||||
"alwaysDisplayInConsole": false,
|
||||
@ -2144,7 +2144,7 @@
|
||||
"alias": "delete_account",
|
||||
"name": "Delete Account",
|
||||
"providerId": "delete_account",
|
||||
"enabled": false,
|
||||
"enabled": true,
|
||||
"defaultAction": false,
|
||||
"priority": 60,
|
||||
"config": {}
|
||||
|
||||
@ -55,7 +55,7 @@
|
||||
"composites": {
|
||||
"realm": ["offline_access", "uma_authorization"],
|
||||
"client": {
|
||||
"account": ["view-profile", "manage-account"]
|
||||
"account": ["delete-account", "view-profile", "manage-account"]
|
||||
}
|
||||
},
|
||||
"clientRole": false,
|
||||
@ -644,7 +644,7 @@
|
||||
"description": "",
|
||||
"rootUrl": "https://my-theme.keycloakify.dev",
|
||||
"adminUrl": "https://my-theme.keycloakify.dev",
|
||||
"baseUrl": "",
|
||||
"baseUrl": "https://my-theme.keycloakify.dev",
|
||||
"surrogateAuthRequired": false,
|
||||
"enabled": true,
|
||||
"alwaysDisplayInConsole": false,
|
||||
@ -2088,7 +2088,7 @@
|
||||
"alias": "delete_account",
|
||||
"name": "Delete Account",
|
||||
"providerId": "delete_account",
|
||||
"enabled": false,
|
||||
"enabled": true,
|
||||
"defaultAction": false,
|
||||
"priority": 60,
|
||||
"config": {}
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
"composites": {
|
||||
"realm": ["offline_access", "uma_authorization"],
|
||||
"client": {
|
||||
"account": ["manage-account", "view-profile"]
|
||||
"account": ["delete-account", "manage-account", "view-profile"]
|
||||
}
|
||||
},
|
||||
"clientRole": false,
|
||||
@ -449,7 +449,7 @@
|
||||
"gender": ["prefer_not_to_say"],
|
||||
"bio": ["Hello I'm Test User and I do not exist."],
|
||||
"phone_number": ["1111111111"],
|
||||
"locale": ["fr"],
|
||||
"locale": ["en"],
|
||||
"favorite_media": ["movies", "series"]
|
||||
},
|
||||
"createdTimestamp": 1716183898408,
|
||||
@ -653,7 +653,7 @@
|
||||
"description": "",
|
||||
"rootUrl": "https://my-theme.keycloakify.dev",
|
||||
"adminUrl": "https://my-theme.keycloakify.dev",
|
||||
"baseUrl": "",
|
||||
"baseUrl": "https://my-theme.keycloakify.dev",
|
||||
"surrogateAuthRequired": false,
|
||||
"enabled": true,
|
||||
"alwaysDisplayInConsole": false,
|
||||
@ -2235,7 +2235,7 @@
|
||||
"alias": "delete_account",
|
||||
"name": "Delete Account",
|
||||
"providerId": "delete_account",
|
||||
"enabled": false,
|
||||
"enabled": true,
|
||||
"defaultAction": false,
|
||||
"priority": 60,
|
||||
"config": {}
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
"composites": {
|
||||
"realm": ["offline_access", "uma_authorization"],
|
||||
"client": {
|
||||
"account": ["manage-account", "view-profile"]
|
||||
"account": ["delete-account", "manage-account", "view-profile"]
|
||||
}
|
||||
},
|
||||
"clientRole": false,
|
||||
@ -543,7 +543,7 @@
|
||||
"favourite_pet": ["cat"],
|
||||
"bio": ["Hello I'm Test User and I do not exist."],
|
||||
"phone_number": ["1111111111"],
|
||||
"locale": ["fr"],
|
||||
"locale": ["en"],
|
||||
"favorite_media": ["movies", "series"]
|
||||
},
|
||||
"createdTimestamp": 1716183898408,
|
||||
@ -767,7 +767,7 @@
|
||||
"description": "",
|
||||
"rootUrl": "https://my-theme.keycloakify.dev",
|
||||
"adminUrl": "https://my-theme.keycloakify.dev",
|
||||
"baseUrl": "",
|
||||
"baseUrl": "https://my-theme.keycloakify.dev",
|
||||
"surrogateAuthRequired": false,
|
||||
"enabled": true,
|
||||
"alwaysDisplayInConsole": false,
|
||||
@ -2315,7 +2315,7 @@
|
||||
"alias": "delete_account",
|
||||
"name": "Delete Account",
|
||||
"providerId": "delete_account",
|
||||
"enabled": false,
|
||||
"enabled": true,
|
||||
"defaultAction": false,
|
||||
"priority": 60,
|
||||
"config": {}
|
||||
|
||||
@ -286,11 +286,11 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
|
||||
? []
|
||||
: [
|
||||
"-v",
|
||||
`${realmJsonFilePath}:/opt/keycloak/data/import/myrealm-realm.json`
|
||||
`"${realmJsonFilePath}":/opt/keycloak/data/import/myrealm-realm.json`
|
||||
]),
|
||||
...[
|
||||
"-v",
|
||||
`${jarFilePath_cacheDir}:/opt/keycloak/providers/keycloak-theme.jar`
|
||||
`"${jarFilePath_cacheDir}":/opt/keycloak/providers/keycloak-theme.jar`
|
||||
],
|
||||
...(keycloakMajorVersionNumber <= 20
|
||||
? ["-e", "JAVA_OPTS=-Dkeycloak.profile=preview"]
|
||||
@ -317,7 +317,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
|
||||
}))
|
||||
.map(({ localDirPath, containerDirPath }) => [
|
||||
"-v",
|
||||
`${localDirPath}:${containerDirPath}:rw`
|
||||
`"${localDirPath}":${containerDirPath}:rw`
|
||||
])
|
||||
.flat(),
|
||||
...buildContext.environmentVariables
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { type FetchOptions } from "make-fetch-happen";
|
||||
import * as child_process from "child_process";
|
||||
import * as fs from "fs";
|
||||
import { exclude } from "tsafe/exclude";
|
||||
|
||||
export type ProxyFetchOptions = Pick<
|
||||
FetchOptions,
|
||||
@ -19,16 +20,39 @@ export function getProxyFetchOptions(params: {
|
||||
})
|
||||
.toString("utf8");
|
||||
|
||||
console.log("Output of `npm config get`:");
|
||||
console.log(output);
|
||||
|
||||
return output
|
||||
.split("\n")
|
||||
.filter(line => !line.startsWith(";"))
|
||||
.map(line => line.trim())
|
||||
.map(line => line.split("=", 2) as [string, string])
|
||||
.map(line => {
|
||||
const [key, value] = line.split("=");
|
||||
if (key === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
if (value === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
return [key.trim(), value.trim()] as const;
|
||||
})
|
||||
.filter(exclude(undefined))
|
||||
.filter(([key]) => key !== "")
|
||||
.map(([key, value]) => {
|
||||
if (value.startsWith('"') && value.endsWith('"')) {
|
||||
return [key, value.slice(1, -1)] as const;
|
||||
}
|
||||
|
||||
if (value === "true" || value === "false") {
|
||||
return [key, value] as const;
|
||||
}
|
||||
|
||||
return undefined;
|
||||
})
|
||||
.filter(exclude(undefined))
|
||||
.reduce(
|
||||
(
|
||||
cfg: Record<string, string | string[]>,
|
||||
[key, value]: [string, string]
|
||||
) =>
|
||||
(cfg: Record<string, string | string[]>, [key, value]) =>
|
||||
key in cfg
|
||||
? { ...cfg, [key]: [...ensureArray(cfg[key]), value] }
|
||||
: { ...cfg, [key]: value },
|
||||
@ -37,18 +61,18 @@ export function getProxyFetchOptions(params: {
|
||||
})();
|
||||
|
||||
const proxy = ensureSingleOrNone(cfg["https-proxy"] ?? cfg["proxy"]);
|
||||
|
||||
const noProxy = cfg["noproxy"] ?? cfg["no-proxy"];
|
||||
|
||||
function maybeBoolean(arg0: string | undefined) {
|
||||
return typeof arg0 === "undefined" ? undefined : Boolean(arg0);
|
||||
}
|
||||
const strictSSL = ensureSingleOrNone(cfg["strict-ssl"]) === "true";
|
||||
|
||||
const strictSSL = maybeBoolean(ensureSingleOrNone(cfg["strict-ssl"]));
|
||||
const cert = cfg["cert"];
|
||||
|
||||
const ca = ensureArray(cfg["ca"] ?? cfg["ca[]"]);
|
||||
|
||||
const cafile = ensureSingleOrNone(cfg["cafile"]);
|
||||
|
||||
if (typeof cafile !== "undefined" && cafile !== "null") {
|
||||
if (cafile !== undefined) {
|
||||
ca.push(
|
||||
...(() => {
|
||||
const cafileContent = fs.readFileSync(cafile).toString("utf8");
|
||||
@ -82,7 +106,7 @@ export function getProxyFetchOptions(params: {
|
||||
}
|
||||
|
||||
function ensureArray<T>(arg0: T | T[]) {
|
||||
return Array.isArray(arg0) ? arg0 : typeof arg0 === "undefined" ? [] : [arg0];
|
||||
return Array.isArray(arg0) ? arg0 : arg0 === undefined ? [] : [arg0];
|
||||
}
|
||||
|
||||
function ensureSingleOrNone<T>(arg0: T | T[]) {
|
||||
|
||||
@ -59,6 +59,8 @@ export type FormAction =
|
||||
action: "update";
|
||||
name: string;
|
||||
valueOrValues: string | string[];
|
||||
/** Default false */
|
||||
displayErrorsImmediately?: boolean;
|
||||
}
|
||||
| {
|
||||
action: "focus lost";
|
||||
@ -413,6 +415,24 @@ export function useUserProfileForm(params: UseUserProfileFormParams): ReturnType
|
||||
formFieldStates: state.formFieldStates
|
||||
});
|
||||
|
||||
simulate_focus_lost: {
|
||||
const { displayErrorsImmediately = false } = formAction;
|
||||
|
||||
if (!displayErrorsImmediately) {
|
||||
break simulate_focus_lost;
|
||||
}
|
||||
|
||||
for (const fieldIndex of formAction.valueOrValues instanceof Array
|
||||
? formAction.valueOrValues.map((...[, index]) => index)
|
||||
: [undefined]) {
|
||||
state = reducer(state, {
|
||||
action: "focus lost",
|
||||
name: formAction.name,
|
||||
fieldIndex
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
update_password_confirm: {
|
||||
if (doMakeUserConfirmPassword) {
|
||||
break update_password_confirm;
|
||||
@ -425,7 +445,8 @@ export function useUserProfileForm(params: UseUserProfileFormParams): ReturnType
|
||||
state = reducer(state, {
|
||||
action: "update",
|
||||
name: "password-confirm",
|
||||
valueOrValues: formAction.valueOrValues
|
||||
valueOrValues: formAction.valueOrValues,
|
||||
displayErrorsImmediately: formAction.displayErrorsImmediately
|
||||
});
|
||||
}
|
||||
|
||||
@ -447,7 +468,8 @@ export function useUserProfileForm(params: UseUserProfileFormParams): ReturnType
|
||||
assert(formFieldState !== undefined);
|
||||
|
||||
return formFieldState.valueOrValues;
|
||||
})()
|
||||
})(),
|
||||
displayErrorsImmediately: formAction.displayErrorsImmediately
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -22,7 +22,15 @@ export function useInsertLinkTags(params: {
|
||||
alreadyMountedComponentOrHookNames.has(componentOrHookName);
|
||||
|
||||
if (isAlreadyMounted) {
|
||||
window.location.reload();
|
||||
reload: {
|
||||
if (
|
||||
new URL(window.location.href).searchParams.get("viewMode") === "docs"
|
||||
) {
|
||||
// NOTE: Special case for Storybook, we want to avoid infinite reload loop.
|
||||
break reload;
|
||||
}
|
||||
window.location.reload();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@ -40,7 +40,15 @@ export function useInsertScriptTags(params: {
|
||||
alreadyMountedComponentOrHookNames.has(componentOrHookName);
|
||||
|
||||
if (isAlreadyMounted) {
|
||||
window.location.reload();
|
||||
reload: {
|
||||
if (
|
||||
new URL(window.location.href).searchParams.get("viewMode") === "docs"
|
||||
) {
|
||||
// NOTE: Special case for Storybook, we want to avoid infinite reload loop.
|
||||
break reload;
|
||||
}
|
||||
window.location.reload();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
94
stories/account-spa/index.stories.tsx
Normal file
94
stories/account-spa/index.stories.tsx
Normal file
@ -0,0 +1,94 @@
|
||||
import React from "react";
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { useInsertLinkTags } from "../../dist/tools/useInsertLinkTags";
|
||||
import { tss } from "../tss";
|
||||
// @ts-expect-error
|
||||
import screenshotPngUrl from "./screenshot.png";
|
||||
|
||||
const meta = {
|
||||
title: "Account SPA/index.ftl"
|
||||
} satisfies Meta<any>;
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const NotInStorybookButSupported: Story = {
|
||||
render: () => <AccountSpa />
|
||||
};
|
||||
|
||||
function AccountSpa() {
|
||||
console.log(window.location.href);
|
||||
|
||||
useInsertLinkTags({
|
||||
componentOrHookName: "Template",
|
||||
hrefs: []
|
||||
});
|
||||
|
||||
const { classes, theme } = useStyles();
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<div className={classes.content}>
|
||||
<p>
|
||||
Keycloakify offers two option for creating an account theme:{" "}
|
||||
<a href="https://docs.keycloakify.dev/account-theme#multi-page" target="_blank">
|
||||
Multi Page
|
||||
</a>{" "}
|
||||
or{" "}
|
||||
<a href="https://docs.keycloakify.dev/account-theme#single-page" target="_blank">
|
||||
Single Page
|
||||
</a>
|
||||
. Since the account Single Page does not support Storybook, here is a screenshot of it's default look:
|
||||
<br />
|
||||
<br />
|
||||
<img className={classes.screenshot} alt="image" src={screenshotPngUrl} />
|
||||
<br />
|
||||
<a href="https://docs.keycloakify.dev/account-theme" target="_blank">
|
||||
Learn more
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const useStyles = tss.withName({ AccountSpa }).create(({ isDark, theme }) => ({
|
||||
root: {
|
||||
height: "100vh",
|
||||
color: isDark ? "white" : "black",
|
||||
backgroundColor: theme.appContentBg,
|
||||
fontFamily: "'Work Sans'",
|
||||
fontSize: "14px",
|
||||
lineHeight: "24px",
|
||||
WebkitFontSmoothing: "antialiased",
|
||||
"& a": {
|
||||
color: theme.colorSecondary,
|
||||
textDecoration: "none",
|
||||
"&:hover": {
|
||||
textDecoration: "underline"
|
||||
}
|
||||
},
|
||||
"& h1": {
|
||||
fontSize: "32px",
|
||||
marginBottom: 35
|
||||
},
|
||||
display: "flex",
|
||||
justifyContent: "center"
|
||||
},
|
||||
content: {
|
||||
maxWidth: 750,
|
||||
textAlign: "center",
|
||||
marginTop: 100
|
||||
},
|
||||
keycloakifyLogoWrapper: {
|
||||
display: "flex",
|
||||
justifyContent: "center"
|
||||
},
|
||||
keycloakifyLogo: {
|
||||
width: 400
|
||||
},
|
||||
screenshot: {
|
||||
maxWidth: "100%"
|
||||
}
|
||||
}));
|
||||
BIN
stories/account-spa/screenshot.png
Normal file
BIN
stories/account-spa/screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 269 KiB |
@ -15,6 +15,7 @@ export default meta;
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
// NOTE: Enable in your Keycloak realm with: https://github.com/user-attachments/assets/5fc5e49e-a172-4cb0-897a-49baac284b47
|
||||
export const Default: Story = {
|
||||
render: () => (
|
||||
<KcPageStory
|
||||
|
||||
@ -2,18 +2,20 @@ import React from "react";
|
||||
import { memo, useState } from "react";
|
||||
import { useConstCallback } from "powerhooks";
|
||||
import { keyframes } from "tss-react";
|
||||
// @ts-expect-error
|
||||
import keycloakifyLogoHeroMovingPngUrl from "./keycloakify-logo-hero-moving.png";
|
||||
// @ts-expect-error
|
||||
import keycloakifyLogoHeroStillPngUrl from "./keycloakify-logo-hero-still.png";
|
||||
import { makeStyles } from "./tss";
|
||||
import { tss } from "../tss";
|
||||
|
||||
export type Props = {
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
id?: string;
|
||||
onLoad?: () => void;
|
||||
};
|
||||
|
||||
export const KeycloakifyRotatingLogo = memo((props: Props) => {
|
||||
const { id, style, onLoad: onLoadProp } = props;
|
||||
const { id, className, onLoad: onLoadProp } = props;
|
||||
|
||||
const [isImageLoaded, setIsImageLoaded] = useState(false);
|
||||
|
||||
@ -22,40 +24,41 @@ export const KeycloakifyRotatingLogo = memo((props: Props) => {
|
||||
onLoadProp?.();
|
||||
});
|
||||
|
||||
const { classes } = useStyles({
|
||||
const { cx, classes } = useStyles({
|
||||
isImageLoaded
|
||||
});
|
||||
return (
|
||||
<div id={id} className={classes.root} style={style}>
|
||||
<div id={id} className={cx(classes.root, className)}>
|
||||
<img className={classes.rotatingImg} onLoad={onLoad} src={keycloakifyLogoHeroMovingPngUrl} alt={"Rotating react logo"} />
|
||||
<img className={classes.stillImg} src={keycloakifyLogoHeroStillPngUrl} alt={"keyhole"} />
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
const useStyles = makeStyles<{ isImageLoaded: boolean }>({
|
||||
name: { KeycloakifyRotatingLogo }
|
||||
})((_theme, { isImageLoaded }) => ({
|
||||
root: {
|
||||
position: "relative"
|
||||
},
|
||||
rotatingImg: {
|
||||
animation: `${keyframes({
|
||||
from: {
|
||||
transform: "rotate(0deg)"
|
||||
},
|
||||
to: {
|
||||
transform: "rotate(360deg)"
|
||||
}
|
||||
})} infinite 20s linear`,
|
||||
width: isImageLoaded ? "100%" : undefined,
|
||||
height: isImageLoaded ? "auto" : undefined
|
||||
},
|
||||
stillImg: {
|
||||
position: "absolute",
|
||||
top: "0",
|
||||
left: "0",
|
||||
width: isImageLoaded ? "100%" : undefined,
|
||||
height: isImageLoaded ? "auto" : undefined
|
||||
}
|
||||
}));
|
||||
const useStyles = tss
|
||||
.withParams<{ isImageLoaded: boolean }>()
|
||||
.withName({ KeycloakifyRotatingLogo })
|
||||
.create(({ isImageLoaded }) => ({
|
||||
root: {
|
||||
position: "relative"
|
||||
},
|
||||
rotatingImg: {
|
||||
animation: `${keyframes({
|
||||
from: {
|
||||
transform: "rotate(0deg)"
|
||||
},
|
||||
to: {
|
||||
transform: "rotate(360deg)"
|
||||
}
|
||||
})} infinite 20s linear`,
|
||||
width: isImageLoaded ? "100%" : undefined,
|
||||
height: isImageLoaded ? "auto" : undefined
|
||||
},
|
||||
stillImg: {
|
||||
position: "absolute",
|
||||
top: "0",
|
||||
left: "0",
|
||||
width: isImageLoaded ? "100%" : undefined,
|
||||
height: isImageLoaded ? "auto" : undefined
|
||||
}
|
||||
}));
|
||||
|
||||
@ -1,31 +0,0 @@
|
||||
import { Meta } from "@storybook/addon-docs";
|
||||
import { KeycloakifyRotatingLogo } from "./KeycloakifyRotatingLogo";
|
||||
|
||||
<Meta
|
||||
title="Introduction"
|
||||
parameters={{
|
||||
"viewMode": "docs",
|
||||
"previewTabs": {
|
||||
"canvas": { "hidden": true },
|
||||
"zoom": { "hidden": true },
|
||||
"storybook/background": { "hidden": true },
|
||||
"storybook/viewport": { "hidden": true },
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<div style={{ "margin": "0 auto", "maxWidth": "700px", "textAlign": "center" }}>
|
||||
<div style={{ "display": "flex", "justifyContent": "center" }}>
|
||||
<KeycloakifyRotatingLogo style={{ "width": 400 }} />
|
||||
</div>
|
||||
<h1><a href="#">Keycloakify </a> Storybook</h1>
|
||||
|
||||
<p>
|
||||
This website showcases all the Keycloak user-facing pages of the login and account theme.
|
||||
The storybook serves as a reference to help you determine which pages you would like to personalize.
|
||||
These pages are a direct React adaptation of the [built-in FreeMarker Keycloak pages](https://github.com/keycloak/keycloak/tree/24.0.4/themes/src/main/resources/theme/base).
|
||||
You may notice some visual bugs on certain pages; these issues were not introduced by Keycloakiy and are also present in the default Keycloak 24 theme.
|
||||
</p>
|
||||
|
||||
|
||||
</div>
|
||||
90
stories/intro/intro.stories.tsx
Normal file
90
stories/intro/intro.stories.tsx
Normal file
@ -0,0 +1,90 @@
|
||||
import React from "react";
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { KeycloakifyRotatingLogo } from "./KeycloakifyRotatingLogo";
|
||||
import { useInsertLinkTags } from "../../dist/tools/useInsertLinkTags";
|
||||
import { useOnFistMount } from "../../dist/tools/useOnFirstMount";
|
||||
import { tss } from "../tss";
|
||||
|
||||
const meta = {
|
||||
title: "Introduction"
|
||||
} satisfies Meta<any>;
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const WhatIsThisWebsite: Story = {
|
||||
render: () => <Introduction />
|
||||
};
|
||||
|
||||
function Introduction() {
|
||||
console.log(window.location.href);
|
||||
|
||||
useInsertLinkTags({
|
||||
componentOrHookName: "Template",
|
||||
hrefs: []
|
||||
});
|
||||
|
||||
const { classes, theme } = useStyles();
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<div className={classes.content}>
|
||||
<div className={classes.keycloakifyLogoWrapper}>
|
||||
<KeycloakifyRotatingLogo className={classes.keycloakifyLogo} />
|
||||
</div>
|
||||
<h1>
|
||||
<a href={theme.brandUrl}>Keycloakify </a> Storybook
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
This website showcases all the Keycloak user-facing pages of the Login and{" "}
|
||||
<a href="https://docs.keycloakify.dev/account-theme#multi-page">Account Multi-Page theme</a>.<br />
|
||||
The storybook serves as a reference to help you determine which pages you would like to personalize.
|
||||
<br />
|
||||
These pages are a direct React adaptation of the{" "}
|
||||
<a href="https://github.com/keycloak/keycloak/tree/24.0.4/themes/src/main/resources/theme/base" target="_blank">
|
||||
built-in FreeMarker Keycloak pages
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const useStyles = tss.withName({ Introduction }).create(({ isDark, theme }) => ({
|
||||
root: {
|
||||
height: "100vh",
|
||||
color: isDark ? "white" : "black",
|
||||
backgroundColor: theme.appContentBg,
|
||||
fontFamily: "'Work Sans'",
|
||||
fontSize: "14px",
|
||||
lineHeight: "24px",
|
||||
WebkitFontSmoothing: "antialiased",
|
||||
"& a": {
|
||||
color: theme.colorSecondary,
|
||||
textDecoration: "none",
|
||||
"&:hover": {
|
||||
textDecoration: "underline"
|
||||
}
|
||||
},
|
||||
"& h1": {
|
||||
fontSize: "32px",
|
||||
marginBottom: 35
|
||||
},
|
||||
display: "flex",
|
||||
justifyContent: "center"
|
||||
},
|
||||
content: {
|
||||
maxWidth: 750,
|
||||
textAlign: "center"
|
||||
},
|
||||
keycloakifyLogoWrapper: {
|
||||
display: "flex",
|
||||
justifyContent: "center"
|
||||
},
|
||||
keycloakifyLogo: {
|
||||
width: 400
|
||||
}
|
||||
}));
|
||||
@ -1,5 +0,0 @@
|
||||
import { createMakeAndWithStyles } from "tss-react";
|
||||
|
||||
export const { makeStyles, useStyles } = createMakeAndWithStyles({
|
||||
useTheme: () => ({})
|
||||
});
|
||||
13
stories/tss.ts
Normal file
13
stories/tss.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import { createTss } from "tss-react";
|
||||
import { useDarkMode } from "storybook-dark-mode";
|
||||
import { darkTheme, lightTheme } from "../.storybook/customTheme";
|
||||
|
||||
function useContext() {
|
||||
const isDark = useDarkMode();
|
||||
|
||||
return { isDark, theme: isDark ? darkTheme : lightTheme };
|
||||
}
|
||||
|
||||
export const { tss } = createTss({
|
||||
useContext
|
||||
});
|
||||
Reference in New Issue
Block a user