Tailwind config in submodule

Author: lumburovskalina

components/Buttons.tsx

@@ -1,13 +1,46 @@
+import '../tailwind.config.js'
+import { ButtonProps, KernButtonProps } from '../types/buttons.js';
 
-
-export function TestButton() {
+function combineClassNames(...classes: string[]) {
+    return classes.filter(Boolean).join(' ')
+}
+export function KernButton(props: KernButtonProps) {
     return (
         <button
-            type="button"
-            className="inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
+            type={props.buttonType || "button"}
+            className={combineClassNames(
+                props.className || "border-gray-300 bg-white text-gray-700 hover:bg-gray-50", // copy this, and replace it with a color if you want to change the color
+                "items-center rounded-md border px-4 py-2.5 text-xs font-medium shadow-sm focus:outline-none",
+                props.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer opacity-100"
+            )}
+            onClick={props.onClick}
+            disabled={props.disabled}
         >
-            Delete
-
+            {props.icon && (
+                <props.icon className="h-5 w-5 mr-2" aria-hidden="true" />
+            )}
+            {props.buttonName}
         </button>
     );
 }
+
+
+export function AddButton(props: ButtonProps) {
+    return <KernButton buttonName="Add" disabled={props.disabled} onClick={props.onClick} className="border-green-400 bg-green-100 text-green-700 hover:bg-green-50" />;
+}
+
+export function SaveButton(props: ButtonProps) {
+    return <KernButton buttonName="Save" disabled={props.disabled} onClick={props.onClick} className="border-green-400 bg-green-100 text-green-700 hover:bg-green-50" />;
+}
+
+export function DeleteButton(props: ButtonProps) {
+    return <KernButton buttonName="Delete" onClick={props.onClick} />;
+}
+
+export function CloseButton(props: ButtonProps) {
+    return <KernButton buttonName="Close" onClick={props.onClick} />;
+}
+
+export function RemoveButton(props: ButtonProps) {
+    return <KernButton buttonName="Remove" onClick={props.onClick} />;
+}

components/Dropdown.tsx

@@ -0,0 +1,62 @@
+import { Fragment } from 'react'
+import { Menu, Transition } from '@headlessui/react'
+import { ChevronDownIcon } from '@heroicons/react/20/solid'
+import { combineClassNames } from '@/submodules/javascript-functions/general';
+import { DropdownProps, OptionProps } from '../types/dropdown';
+
+
+export default function Dropdown(props: DropdownProps) {
+    const isDisabled = props.disabled || props.options.length < 1;
+    return (
+        <Menu as="div" className="relative inline-block text-left">
+            <div>
+                <Menu.Button className={`inline-flex w-full justify-center items-center rounded-md border border-gray-300
+            bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2
+            focus:ring-gray-300 focus:ring-offset-2 focus:ring-offset-gray-100
+            ${isDisabled ? "opacity-50" : ""}`}
+                    disabled={isDisabled}
+                >
+                    {props.buttonName}
+                    <ChevronDownIcon
+                        className="-mr-1 ml-2 h-5 w-5"
+                        aria-hidden="true"
+                    />
+                </Menu.Button>
+            </div>
+            <Transition
+                as={Fragment}
+                enter="transition ease-out duration-100"
+                enterFrom="transform opacity-0 scale-95"
+                enterTo="transform opacity-100 scale-100"
+                leave="transition ease-in duration-75"
+                leaveFrom="transform opacity-100 scale-100"
+                leaveTo="transform opacity-0 scale-95"
+            >
+                <Menu.Items className="absolute z-10 mt-2 w-40 origin-top-right rounded-md bg-white shadow-sm ring-1 ring-black ring-opacity-5 focus:outline-none">
+                    <div className="py-1">
+                        {props.options.map((option: OptionProps) => (
+                            <div key={option.name}>
+                                <Menu.Item >
+                                    {({ active }) => (
+                                        <a key={option.id}
+                                            className={combineClassNames(
+                                                active ? "bg-gray-100 text-gray-900" : "text-gray-700",
+                                                "block px-4 py-2 text-sm cursor-pointer"
+                                            )}
+                                            onClick={() => {
+                                                props.selectedOption(option);
+                                            }}
+                                        >
+                                            {option.name}
+                                        </a>
+                                    )}
+                                </Menu.Item>
+                            </div>
+
+                        ))}
+                    </div>
+                </Menu.Items>
+            </Transition>
+        </Menu>
+    );
+}

tailwind.config.js

@@ -0,0 +1,107 @@
+const colors = require("tailwindcss/colors");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  purge: {
+    enabled: true,
+    mode: "all",
+    content: ["./src/**/*.{html,ts}"],
+    safelist: [
+      /data-theme$/,
+      "hljs",
+      "hljs-comment",
+      "hljs-quote",
+      "hljs-keyword",
+      "hljs-selector-tag",
+      "hljs-subst",
+      "hljs-number",
+      "hljs-literal",
+      "hljs-variable",
+      "hljs-template-variable",
+      "hljs-tag",
+      "hljs-attr",
+      "hljs-string",
+      "hljs-doctag",
+      "hljs-title",
+      "hljs-section",
+      "hljs-selector-id",
+      "hljs-subst",
+      "hljs-type",
+      "hljs-class",
+      "hljs-name",
+      "hljs-attribute",
+      "hljs-regexp",
+      "hljs-link",
+      "hljs-symbol",
+      "hljs-bullet",
+      "hljs-built_in",
+      "hljs-builtin-name",
+      "hljs-meta",
+      "hljs-deletion",
+      "hljs-addition",
+      "hljs-emphasis",
+      "hljs-strong",
+      "label-overlay-*",
+      // /(from|via|to|border|bg|text)-(.*)-(\d{1}0{1,2})/, // all color options
+      // /(border|bg|text)-(.*)-(100|200|400|700)/, colors with specific value & type
+      // /(border|bg|text)-(red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(100|200|400|700)/,
+      /(bg)-(red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(100|200)/,
+      /(border)-(red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(400)/,
+      /(text)-(red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(700)/,
+      /(text)-(red|yellow|green|blue|indigo)-(800)/,
+      /(text)-(white|black)/,
+      /(bg)-(gray)-(700)/,
+      /(text)-(lime)-(300)/,
+    ],
+    options: {
+      keyframes: true,
+    },
+  },
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    colors: {
+      black: colors.black,
+      white: colors.white,
+      gray: colors.gray,
+      red: colors.red,
+      orange: colors.orange,
+      amber: colors.amber,
+      yellow: colors.yellow,
+      lime: colors.lime,
+      green: colors.green,
+      emerald: colors.emerald,
+      teal: colors.teal,
+      cyan: colors.cyan,
+      sky: colors.sky,
+      blue: colors.blue,
+      indigo: colors.indigo,
+      violet: colors.violet,
+      purple: colors.purple,
+      fuchsia: colors.fuchsia,
+      pink: colors.pink,
+      rose: colors.rose,
+    },
+    fontFamily: {
+      Inter: ["Inter var", "sans-serif"],
+    },
+    extend: {
+      colors: {
+        kernindigo: {
+          DEFAULT: "#0C052E",
+          dark: "#06023b",
+          darker: "#4F46E5",
+          "darker-1": "#312E81",
+          light: "#EEF2FF",
+          "dark-1": "#0000F5",
+          "dark-2": "#4338CA",
+        },
+      },
+      fontFamily: {
+        sans: ["Inter var"],
+      },
+    },
+  },
+  plugins: [],
+}

types/buttons.ts

@@ -0,0 +1,13 @@
+export type KernButtonProps = {
+    buttonName: string;
+    onClick?: (event: any) => void;
+    className?: string;
+    icon?: any;
+    disabled?: boolean;
+    buttonType?: 'button' | 'submit' | 'reset';
+}
+
+export type ButtonProps = {
+    onClick?: (event?: any) => void;
+    disabled?: boolean;
+}

types/dropdown.ts

@@ -0,0 +1,11 @@
+export type DropdownProps = {
+    options: OptionProps[];
+    buttonName: string;
+    disabled?: boolean;
+    selectedOption: (event: any) => void;
+}
+
+export type OptionProps = {
+    name: string;
+    id: string;
+}