Enable styling keycloak with react (#256)

* Add current keycloak theme files

* Move keycloak dir up a step

* Create-react-app the keycloak-theme

* Switch from yarn.lock to package-lock.json

* Install keycloakify

* gitignore keycloak theme build files

* Add some simple styling that we should notice if it works

* Get storybook to render keycloak

* Add some more previewed screens in storybook

* Try adding a mui button (it works)

* Proof of concept replacing certain keycloak pages

* Add a hopefully functioning replacement for the ToC page

* Add some comments

* Move files

* Install tailwind

* Do some basic styling to the terms page

* Fix build and document deploy to prod

* Fix styling on tos links. Add docs on deploying to prod

* Update docs on loading email theme

keycloak-theme/.gitignore

@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+/build_keycloak
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

keycloak-theme/.storybook/main.js

@@ -0,0 +1,8 @@
+module.exports = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "storybook-preset-craco",
+  ],
+};

keycloak-theme/.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

keycloak-theme/craco.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  style: {
+    postcss: {
+      plugins: [require("tailwindcss"), require("autoprefixer")],
+    },
+  },
+};