Integrate tailwind css and create new button library (#2098)

Introduce tailwind as new frontend styling library to replace bulma in the longer run. Also create the first new ui library `ui-buttons` which will be the new standard for buttons ins SCM-Manager. In this library we reconsidered which types of buttons should be used to create a clean and consistent ui.

Co-authored-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>

scm-ui/ui-buttons/src/a11y.test.ts

@@ -0,0 +1,34 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import initStoryshots from "@storybook/addon-storyshots";
+import { axeTest } from "@storybook/addon-storyshots-puppeteer";
+import path from "path";
+
+initStoryshots({
+  suite: "A11y checks",
+  test: axeTest({
+    storybookUrl: `file://${path.resolve(__dirname, "../storybook-static")}`,
+  }),
+  storyNameRegex: /High-Contrast States/,
+});

scm-ui/ui-buttons/src/button.stories.tsx

@@ -0,0 +1,91 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from "react";
+
+import {
+  Button as ButtonComponent,
+  ButtonVariantList,
+  ButtonVariants,
+  ExternalLinkButton as ExternalLinkButtonComponent,
+  LinkButton as LinkButtonComponent,
+} from "./button";
+import StoryRouter from "storybook-react-router";
+import { StoryFn } from "@storybook/react";
+
+type ExtractProps<T> = T extends React.ComponentType<infer U> ? U : never;
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Components",
+  component: null,
+  subcomponents: {
+    Button: ButtonComponent,
+    LinkButton: LinkButtonComponent,
+    ExternalLinkButton: ExternalLinkButtonComponent,
+  },
+  argTypes: {
+    variant: {
+      options: ButtonVariantList,
+      control: { type: "select" },
+    },
+  },
+  decorators: [StoryRouter()],
+  parameters: {
+    storyshots: { disable: true },
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const ButtonTemplate: StoryFn<ExtractProps<typeof ButtonComponent>> = (args) => <ButtonComponent {...args} />;
+const LinkButtonTemplate: StoryFn<ExtractProps<typeof LinkButtonComponent>> = (args) => (
+  <LinkButtonComponent {...args} />
+);
+const ExternalLinkButtonTemplate: StoryFn<ExtractProps<typeof ExternalLinkButtonComponent>> = (args) => (
+  <ExternalLinkButtonComponent {...args} />
+);
+
+export const Button = ButtonTemplate.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Button.args = {
+  children: "Button",
+  variant: ButtonVariants.PRIMARY,
+  disabled: false,
+};
+
+export const LinkButton = LinkButtonTemplate.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+LinkButton.args = {
+  children: "Link Button",
+  to: "/repos",
+  variant: ButtonVariants.PRIMARY,
+};
+
+export const ExternalLinkButton = ExternalLinkButtonTemplate.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+ExternalLinkButton.args = {
+  children: "External Link Button",
+  href: "https://scm-manager.org",
+  variant: ButtonVariants.PRIMARY,
+};

scm-ui/ui-buttons/src/button.test.stories.mdx

@@ -0,0 +1,73 @@
+import { Meta, Story } from "@storybook/addon-docs";
+import { Button, ButtonVariantList } from "./button";
+
+<Meta title="Tests"/>
+
+<Story name="Light States" parameters={{
+  pseudo: {
+    hover: ButtonVariantList.map(variant => `#${variant}-Hover`),
+    focus: ButtonVariantList.map(variant => `#${variant}-Focus`),
+    active: ButtonVariantList.map(variant => `#${variant}-Active`),
+  },
+  themes: {
+    default: 'light',
+  },
+}}>
+  <table className="border-separate border-spacing-4">
+    <tr>
+      <th>STATE</th>
+      {ButtonVariantList.map(variant => <th>{variant.toUpperCase()}</th>)}
+    </tr>
+    {["Normal", "Hover", "Active", "Focus", "Disabled"].map(state => <tr>
+      <td>{state}</td>
+      {ButtonVariantList.map(variant => <td><Button id={`${variant}-${state}`} disabled={state === "Disabled"}
+                                                    variant={variant}>Button</Button></td>)}
+    </tr>)}
+  </table>
+</Story>
+
+<Story name="Dark States" parameters={{
+  pseudo: {
+    hover: ButtonVariantList.map(variant => `#${variant}-Hover`),
+    focus: ButtonVariantList.map(variant => `#${variant}-Focus`),
+    active: ButtonVariantList.map(variant => `#${variant}-Active`),
+  },
+  themes: {
+    default: 'dark',
+  },
+}}>
+  <table className="border-separate border-spacing-4">
+    <tr>
+      <th>STATE</th>
+      {ButtonVariantList.map(variant => <th>{variant.toUpperCase()}</th>)}
+    </tr>
+    {["Normal", "Hover", "Active", "Focus", "Disabled"].map(state => <tr>
+      <td>{state}</td>
+      {ButtonVariantList.map(variant => <td><Button id={`${variant}-${state}`} disabled={state === "Disabled"}
+                                                    variant={variant}>Button</Button></td>)}
+    </tr>)}
+  </table>
+</Story>
+
+<Story name="High-Contrast States" parameters={{
+  pseudo: {
+    hover: ButtonVariantList.map(variant => `#${variant}-Hover`),
+    focus: ButtonVariantList.map(variant => `#${variant}-Focus`),
+    active: ButtonVariantList.map(variant => `#${variant}-Active`),
+  },
+  themes: {
+    default: 'highcontrast',
+  },
+}}>
+  <table className="border-separate border-spacing-4">
+    <tr>
+      <th>STATE</th>
+      {ButtonVariantList.map(variant => <th>{variant.toUpperCase()}</th>)}
+    </tr>
+    {["Normal", "Hover", "Active", "Focus", "Disabled"].map(state => <tr>
+      <td>{state}</td>
+      {ButtonVariantList.map(variant => <td><Button id={`${variant}-${state}`} disabled={state === "Disabled"}
+                                                    variant={variant}>Button</Button></td>)}
+    </tr>)}
+  </table>
+</Story>

scm-ui/ui-buttons/src/button.tsx

@@ -0,0 +1,109 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { AnchorHTMLAttributes, ButtonHTMLAttributes } from "react";
+import { Link as ReactRouterLink, LinkProps as ReactRouterLinkProps } from "react-router-dom";
+import classNames from "classnames";
+
+export const ButtonVariants = {
+  PRIMARY: "primary",
+  SECONDARY: "secondary",
+  TERTIARY: "tertiary",
+  SIGNAL: "signal",
+} as const;
+
+export const ButtonVariantList = Object.values(ButtonVariants);
+
+type ButtonVariant = typeof ButtonVariants[keyof typeof ButtonVariants];
+
+const BASE_BUTTON_CLASSES = classNames(
+  "inline-block whitespace-nowrap rounded border py-2 px-6 text-center font-semibold focus:z-10 focus:outline focus:outline-offset-2 focus:outline-purple-500 disabled:cursor-not-allowed"
+);
+const DEFAULT_BUTTON_CLASSES = classNames(
+  "border-gray-200 hover:border-gray-400 active:shadow-inner disabled:hover:border-gray-200 disabled:active:shadow-none"
+);
+const PRIMARY_BUTTON_CLASSES = classNames(
+  "border-transparent bg-primary text-primary-contrast hover:bg-primary-hover active:bg-primary-active disabled:bg-primary-disabled disabled:text-primary-disabled-contrast "
+);
+const SECONDARY_BUTTON_CLASSES = classNames(
+  "border-primary text-primary hover:border-primary-hover hover:text-primary-hover active:border-primary-active active:text-primary-active disabled:border-primary-disabled disabled:text-primary-disabled"
+);
+const TERTIARY_BUTTON_CLASSES = classNames(
+  "border-transparent text-primary hover:text-primary-hover active:text-primary-active disabled:text-primary-disabled"
+);
+const SIGNAL_BUTTON_CLASSES = classNames(
+  "border-transparent bg-signal text-signal-contrast hover:bg-signal-hover hover:text-signal-hover-contrast active:bg-signal-active active:text-signal-active-contrast disabled:bg-signal-disabled disabled:text-signal-disabled-contrast"
+);
+
+const createButtonClasses = (variant?: ButtonVariant) =>
+  classNames(BASE_BUTTON_CLASSES, {
+    [DEFAULT_BUTTON_CLASSES]: !variant,
+    [PRIMARY_BUTTON_CLASSES]: variant === "primary",
+    [SECONDARY_BUTTON_CLASSES]: variant === "secondary",
+    [TERTIARY_BUTTON_CLASSES]: variant === "tertiary",
+    [SIGNAL_BUTTON_CLASSES]: variant === "signal",
+  });
+
+type BaseButtonProps = {
+  variant: ButtonVariant;
+};
+
+type ButtonProps = BaseButtonProps & ButtonHTMLAttributes<HTMLButtonElement>;
+
+/**
+ * Styled html button
+ */
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, children, ...props }, ref) => (
+    <button {...props} className={classNames(createButtonClasses(variant), className)} ref={ref}>
+      {children}
+    </button>
+  )
+);
+
+type LinkButtonProps = BaseButtonProps & ReactRouterLinkProps;
+
+/**
+ * Styled react router link
+ */
+export const LinkButton = React.forwardRef<HTMLAnchorElement, LinkButtonProps>(
+  ({ className, variant, children, ...props }, ref) => (
+    <ReactRouterLink {...props} className={classNames(createButtonClasses(variant), className)} ref={ref}>
+      {children}
+    </ReactRouterLink>
+  )
+);
+
+type ExternalLinkButtonProps = BaseButtonProps & AnchorHTMLAttributes<HTMLAnchorElement>;
+
+/**
+ * Styled html anchor
+ */
+export const ExternalLinkButton = React.forwardRef<HTMLAnchorElement, ExternalLinkButtonProps>(
+  ({ className, variant, children, ...props }, ref) => (
+    <a {...props} className={classNames(createButtonClasses(variant), className)} ref={ref}>
+      {children}
+    </a>
+  )
+);

scm-ui/ui-buttons/src/image-snapshot.test.ts

@@ -0,0 +1,33 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import path from "path";
+import initStoryshots from "@storybook/addon-storyshots";
+import { imageSnapshot } from "@storybook/addon-storyshots-puppeteer";
+
+initStoryshots({
+  suite: "Image snapshots",
+  test: imageSnapshot({
+    storybookUrl: `file://${path.resolve(__dirname, "../storybook-static")}`,
+  })
+});

scm-ui/ui-buttons/src/index.css

@@ -0,0 +1,26 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+@tailwind components;
+@tailwind utilities;

scm-ui/ui-buttons/src/index.ts

@@ -0,0 +1,27 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import "./index.css";
+
+export { Button, LinkButton, ExternalLinkButton, ButtonVariants } from "./button";