mirror repo (WIP)

Need to remove secrets before entire repo can be made public.

frontend/libs/components/button-dropdown/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

frontend/libs/components/button-dropdown/README.md

@@ -0,0 +1,7 @@
+# @storyteller/ui-button-dropdown
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test @storyteller/ui-button-dropdown` to execute the unit tests via [Vitest](https://vitest.dev/).

frontend/libs/components/button-dropdown/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/button-dropdown';
+//# sourceMappingURL=index.d.ts.map

frontend/libs/components/button-dropdown/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,uBAAuB,CAAC"}

frontend/libs/components/button-dropdown/dist/lib/button-dropdown.d.ts

@@ -0,0 +1,35 @@
+import { ButtonHTMLAttributes } from 'react';
+import { IconDefinition } from '@fortawesome/pro-solid-svg-icons';
+import { ButtonProps } from '@storyteller/ui-button';
+type UnionedButtonProps = {
+    label?: string;
+} & ButtonProps;
+interface ButtonDropdownProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    label: string;
+    icon?: IconDefinition;
+    align?: "left" | "right";
+    showSelected?: boolean;
+    options: Array<{
+        label: string;
+        className?: string;
+        icon?: IconDefinition;
+        selected?: boolean;
+        description?: string;
+        onClick?: () => void;
+        disabled?: boolean;
+        divider?: boolean;
+        onDialogOpen?: () => void;
+        dialogProps?: {
+            title: string;
+            content: React.ReactNode;
+            className?: string;
+            confirmButtonProps?: UnionedButtonProps;
+            closeButtonProps?: UnionedButtonProps;
+            showClose?: boolean;
+            onClose?: () => void;
+        };
+    }>;
+}
+export declare const ButtonDropdown: ({ className, label, options, icon, align, showSelected, }: ButtonDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=button-dropdown.d.ts.map

frontend/libs/components/button-dropdown/dist/lib/button-dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-dropdown.d.ts","sourceRoot":"","sources":["../../src/lib/button-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAsB,MAAM,OAAO,CAAC;AAEjE,OAAO,EACL,cAAc,EAEf,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAU,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAG7D,KAAK,kBAAkB,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,WAAW,CAAC;AAE3D,UAAU,mBAAoB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,KAAK,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,IAAI,CAAC,EAAE,cAAc,CAAC;QACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;QACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;QAC1B,WAAW,CAAC,EAAE;YACZ,KAAK,EAAE,MAAM,CAAC;YACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;YACzB,SAAS,CAAC,EAAE,MAAM,CAAC;YACnB,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;YACxC,gBAAgB,CAAC,EAAE,kBAAkB,CAAC;YACtC,SAAS,CAAC,EAAE,OAAO,CAAC;YACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;SACtB,CAAC;KACH,CAAC,CAAC;CACJ;AAED,eAAO,MAAM,cAAc,GAAI,2DAO5B,mBAAmB,4CAqKrB,CAAC"}

frontend/libs/components/button-dropdown/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@storyteller/ui-button-dropdown",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "development": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  }
+}

frontend/libs/components/button-dropdown/src/index.ts

@@ -0,0 +1,2 @@
+
+export * from './lib/button-dropdown';

frontend/libs/components/button-dropdown/src/lib/button-dropdown.module.css

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/

frontend/libs/components/button-dropdown/src/lib/button-dropdown.spec.tsx

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+
+import ButtonDropdown from './button-dropdown';
+
+describe('ButtonDropdown', () => {
+  
+  it('should render successfully', () => {
+    const { baseElement } = render(<ButtonDropdown />);
+    expect(baseElement).toBeTruthy();
+  });
+  
+});

frontend/libs/components/button-dropdown/src/lib/button-dropdown.tsx

@@ -0,0 +1,213 @@
+import { ButtonHTMLAttributes, Fragment, useState } from "react";
+import { Menu, Transition } from "@headlessui/react";
+import {
+  IconDefinition,
+  faChevronDown,
+} from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Modal } from "@storyteller/ui-modal";
+import { Button, ButtonProps } from "@storyteller/ui-button";
+import { twMerge } from "tailwind-merge";
+
+type UnionedButtonProps = { label?: string } & ButtonProps;
+
+interface ButtonDropdownProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  label: string;
+  icon?: IconDefinition;
+  align?: "left" | "right";
+  showSelected?: boolean;
+  options: Array<{
+    label: string;
+    className?: string;
+    icon?: IconDefinition;
+    selected?: boolean;
+    description?: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    divider?: boolean;
+    onDialogOpen?: () => void;
+    dialogProps?: {
+      title: string;
+      content: React.ReactNode;
+      className?: string;
+      confirmButtonProps?: UnionedButtonProps;
+      closeButtonProps?: UnionedButtonProps;
+      showClose?: boolean;
+      onClose?: () => void;
+    };
+  }>;
+}
+
+export const ButtonDropdown = ({
+  className,
+  label,
+  options,
+  icon,
+  align = "left",
+  showSelected,
+}: ButtonDropdownProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedOptionIndex, setSelectedOptionIndex] = useState<number | null>(
+    null
+  );
+
+  const closeModal = () => {
+    setIsOpen(false);
+    options[selectedOptionIndex!].dialogProps?.onClose?.();
+  };
+
+  const handleOptionClick = (index: number) => {
+    const option = options[index];
+    if (option.onClick) {
+      option.onClick();
+    }
+    if (option.onDialogOpen) {
+      option.onDialogOpen();
+    }
+    if (option.dialogProps) {
+      setSelectedOptionIndex(index);
+      setIsOpen(true);
+    }
+  };
+
+  const currentDialogProps =
+    selectedOptionIndex !== null
+      ? options[selectedOptionIndex].dialogProps
+      : null;
+
+  return (
+    <div className="relative">
+      <Menu as="div" className="inline-block text-left">
+        <Menu.Button as="div">
+          <Button
+            className={className}
+            icon={faChevronDown}
+            iconFlip={true}
+            variant="secondary"
+          >
+            {icon ? <FontAwesomeIcon icon={icon} /> : null}
+            {label}
+          </Button>
+        </Menu.Button>
+        <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
+            static
+            className={twMerge(
+              "absolute z-20 mt-1 w-max divide-y divide-gray-100 overflow-hidden rounded-lg bg-brand-secondary py-1.5 shadow-xl focus:outline-none",
+              align === "left" ? "left-0" : "right-0"
+            )}
+          >
+            <div>
+              {options.map((option, index) => (
+                <Fragment key={index}>
+                  {option.divider && (
+                    <div className="my-1.5 border-t border-ui-divider" />
+                  )}
+                  <Menu.Item>
+                    {({ active }) => (
+                      <button
+                        disabled={option.disabled}
+                        className={twMerge(
+                          "duration-50 bg-brand-secondary font-medium text-white transition-all",
+                          active ? "bg-brand-secondary-800" : "",
+                          option.disabled
+                            ? "pointer-events-none opacity-40"
+                            : "",
+                          "group flex w-full items-center py-1.5 pl-7 pr-4 text-sm",
+                          option.className
+                        )}
+                        onClick={() => handleOptionClick(index)}
+                      >
+                        <div className="flex w-full items-center">
+                          {option.icon && (
+                            <FontAwesomeIcon
+                              icon={option.icon}
+                              className="mr-2"
+                            />
+                          )}
+                          <div className="grow text-start">{option.label}</div>
+                          <div className="ml-10 font-normal text-white/75">
+                            {option.description && option.description}
+                          </div>
+                          {showSelected && (
+                            <>
+                              {option.selected ? (
+                                <svg
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  viewBox="0 0 512 512"
+                                  className="ml-3 flex h-5"
+                                >
+                                  <path
+                                    opacity="1"
+                                    d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c-9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"
+                                    fill="#FC6B68"
+                                  />
+                                  <path
+                                    d="M369 175c-9.4 9.4-9.4 24.6 0 33.9L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c-9.4-9.4 24.6-9.4 33.9 0z"
+                                    fill="#FFFFFF"
+                                  />
+                                </svg>
+                              ) : (
+                                <div className="w-8" />
+                              )}
+                            </>
+                          )}
+                        </div>
+                      </button>
+                    )}
+                  </Menu.Item>
+                </Fragment>
+              ))}
+            </div>
+          </Menu.Items>
+        </Transition>
+      </Menu>
+
+      {currentDialogProps && (
+        <Modal
+          title={currentDialogProps.title}
+          isOpen={isOpen}
+          onClose={closeModal}
+          className={currentDialogProps.className}
+        >
+          {currentDialogProps.content}
+
+          <div className="mt-6 flex justify-end gap-2">
+            {currentDialogProps.showClose !== false &&
+              currentDialogProps.closeButtonProps && (
+                <Button
+                  variant="secondary"
+                  {...currentDialogProps.closeButtonProps}
+                  onClick={closeModal}
+                >
+                  {currentDialogProps.closeButtonProps.label}
+                </Button>
+              )}
+
+            {currentDialogProps.confirmButtonProps && (
+              <Button
+                {...currentDialogProps.confirmButtonProps}
+                onClick={(e) => {
+                  if (currentDialogProps.confirmButtonProps?.onClick) {
+                    currentDialogProps.confirmButtonProps?.onClick(e);
+                  }
+                  closeModal();
+                }}
+              >
+                {currentDialogProps.confirmButtonProps.label || "Confirm"}
+              </Button>
+            )}
+          </div>
+        </Modal>
+      )}
+    </div>
+  );
+};

frontend/libs/components/button-dropdown/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "../button"
+    },
+    {
+      "path": "../modal"
+    },
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}

frontend/libs/components/button-dropdown/tsconfig.lib.json

@@ -0,0 +1,53 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ],
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo"
+  },
+  "exclude": [
+    "out-tsc",
+    "dist",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx"
+  ],
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "references": [
+    {
+      "path": "../button/tsconfig.lib.json"
+    },
+    {
+      "path": "../modal/tsconfig.lib.json"
+    }
+  ]
+}

frontend/libs/components/button-dropdown/tsconfig.spec.json

@@ -0,0 +1,34 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/vitest",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ],
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

frontend/libs/components/button-dropdown/vite.config.ts

@@ -0,0 +1,49 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../../node_modules/.vite/libs/components/button-dropdown',
+  plugins: [react(), dts({ entryRoot: 'src', tsconfigPath: path.join(__dirname, 'tsconfig.lib.json') })],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: './dist',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: '@storyteller/ui-button-dropdown',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es' as const]
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react','react-dom','react/jsx-runtime']
+    },
+  },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: './test-output/vitest/coverage',
+      provider: 'v8' as const,
+    }
+  },
+}));