PenguinOwl/keycloak-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(storybook): progress on many more pages

Browse Source
This commit is contained in:
Waldemar Reusch
2023-03-14 17:29:14 +01:00
parent dbe320b2fc
commit 1e1a638011
30 changed files with 1061 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
.storybook/data.ts
View File

@ -1,27 +0,0 @@
import { KcContextBase, getKcContext } from "keycloakify/lib/getKcContext";
import type { DeepPartial } from "keycloakify/lib/tools/DeepPartial";
import type { ExtendsKcContextBase } from "keycloakify/lib/getKcContext/getKcContextFromWindow";
import type { KcContextExtension } from "keycloak-theme/kcContext";
export const useKcStoryData = (mockData: (
{ pageId: KcContextBase['pageId'] | KcContextExtension['pageId'] } & DeepPartial<ExtendsKcContextBase<KcContextExtension>>
)) => {
const { kcContext } = getKcContext<KcContextExtension>({ mockPageId: mockData.pageId, mockData: [mockData] })
return { kcContext: kcContext as NonNullable<typeof kcContext> }
}
export const socialProviders = [
{ loginUrl: 'google', alias: 'google', providerId: 'google', displayName: 'Google' },
{ loginUrl: 'microsoft', alias: 'microsoft', providerId: 'microsoft', displayName: 'Microsoft' },
{ loginUrl: 'facebook', alias: 'facebook', providerId: 'facebook', displayName: 'Facebook' },
{ loginUrl: 'instagram', alias: 'instagram', providerId: 'instagram', displayName: 'Instagram' },
{ loginUrl: 'twitter', alias: 'twitter', providerId: 'twitter', displayName: 'Twitter' },
{ loginUrl: 'linkedin', alias: 'linkedin', providerId: 'linkedin', displayName: 'LinkedIn' },
{ loginUrl: 'stackoverflow', alias: 'stackoverflow', providerId: 'stackoverflow', displayName: 'Stackoverflow' },
{ loginUrl: 'github', alias: 'github', providerId: 'github', displayName: 'Github' },
{ loginUrl: 'gitlab', alias: 'gitlab', providerId: 'gitlab', displayName: 'Gitlab' },
{ loginUrl: 'bitbucket', alias: 'bitbucket', providerId: 'bitbucket', displayName: 'Bitbucket' },
{ loginUrl: 'paypal', alias: 'paypal', providerId: 'paypal', displayName: 'PayPal' },
{ loginUrl: 'openshift', alias: 'openshift', providerId: 'openshift', displayName: 'OpenShift' },
]

30
.storybook/main.js
View File

@ -1,18 +1,16 @@
module.exports = {
"stories": [
"../src/keycloak-theme/pages/Login.stories.tsx",
"../src/keycloak-theme/pages/Register.stories.tsx",
"../src/keycloak-theme/pages/MyExtraPage1.stories.tsx",
"../src/keycloak-theme/pages/MyExtraPage2.stories.tsx",
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"@storybook/preset-create-react-app"
],
"framework": "@storybook/react",
"core": {
"builder": "@storybook/builder-webpack5"
}
"stories": [
"../src/keycloak-theme/**/*.stories.tsx",
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"@storybook/preset-create-react-app"
],
"framework": "@storybook/react",
"core": {
"builder": "@storybook/builder-webpack5"
},
"staticDirs": ['../public']
}

16
.storybook/preview.js
View File

@ -1,9 +1,13 @@
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$/,
},
},
options: {
storySort: (a, b) =>
a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, {numeric: true}),
},
},
}

41
.storybook/util.tsx Normal file
View File

@ -0,0 +1,41 @@
import type {KcContextExtension} from "keycloak-theme/kcContext";
import KcApp from "../src/keycloak-theme/KcApp";
import {KcContextBase} from "keycloakify";
import {getKcContext} from "keycloakify/lib/getKcContext";
import {ExtendsKcContextBase} from "keycloakify/src/lib/getKcContext/getKcContextFromWindow";
import {DeepPartial} from "keycloakify/src/lib/tools/DeepPartial";
export const socialProviders = [
{loginUrl: 'google', alias: 'google', providerId: 'google', displayName: 'Google'},
{loginUrl: 'microsoft', alias: 'microsoft', providerId: 'microsoft', displayName: 'Microsoft'},
{loginUrl: 'facebook', alias: 'facebook', providerId: 'facebook', displayName: 'Facebook'},
{loginUrl: 'instagram', alias: 'instagram', providerId: 'instagram', displayName: 'Instagram'},
{loginUrl: 'twitter', alias: 'twitter', providerId: 'twitter', displayName: 'Twitter'},
{loginUrl: 'linkedin', alias: 'linkedin', providerId: 'linkedin', displayName: 'LinkedIn'},
{loginUrl: 'stackoverflow', alias: 'stackoverflow', providerId: 'stackoverflow', displayName: 'Stackoverflow'},
{loginUrl: 'github', alias: 'github', providerId: 'github', displayName: 'Github'},
{loginUrl: 'gitlab', alias: 'gitlab', providerId: 'gitlab', displayName: 'Gitlab'},
{loginUrl: 'bitbucket', alias: 'bitbucket', providerId: 'bitbucket', displayName: 'Bitbucket'},
{loginUrl: 'paypal', alias: 'paypal', providerId: 'paypal', displayName: 'PayPal'},
{loginUrl: 'openshift', alias: 'openshift', providerId: 'openshift', displayName: 'OpenShift'},
]
type PageId = (KcContextExtension | KcContextBase)['pageId']
export const template = (pageId: PageId) => {
type MockData = DeepPartial<ExtendsKcContextBase<KcContextExtension>>;
const Template = (mockData: MockData) => {
const finalMockData = {
message: undefined,
pageId,
...mockData
} as MockData
if (!("message" in mockData)) mockData["message"] = undefined
const {kcContext} = getKcContext<KcContextExtension>({mockPageId: pageId, mockData: [finalMockData]})
return <KcApp kcContext={kcContext as NonNullable<typeof kcContext>}/>
}
return (args: MockData) => Object.assign(Template.bind({}), {args})
}