mirror repo (WIP)

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

frontend/libs/components/loading/.babelrc

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

frontend/libs/components/loading/README.md

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

frontend/libs/components/loading/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './lib/LoadingBar';
+export * from './lib/LoadingDots';
+//# sourceMappingURL=index.d.ts.map

frontend/libs/components/loading/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC"}

frontend/libs/components/loading/dist/lib/LoadingBar.d.ts

@@ -0,0 +1,18 @@
+interface LoadingBarProps {
+    id?: string;
+    wrapperClassName?: string;
+    innerWrapperClassName?: string;
+    progressBackgroundClassName?: string;
+    progressClassName?: string;
+    variant?: string;
+    show?: boolean;
+    hasSpinner?: boolean;
+    progressData: {
+        progress: number;
+        label?: string;
+        message?: string;
+    };
+}
+export declare const LoadingBar: ({ wrapperClassName: propsWrapperClassName, innerWrapperClassName: propsInnerWrapperClassName, progressBackgroundClassName: propsProgressBackgroundClassName, progressClassName: propsProgressClassName, progressData, hasSpinner, variant, show, ...rest }: LoadingBarProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=LoadingBar.d.ts.map

frontend/libs/components/loading/dist/lib/LoadingBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingBar.d.ts","sourceRoot":"","sources":["../../src/lib/LoadingBar.tsx"],"names":[],"mappings":"AAIA,UAAU,eAAe;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE;QACZ,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AACD,eAAO,MAAM,UAAU,GAAI,4PAUxB,eAAe,4CAuEjB,CAAC"}

frontend/libs/components/loading/dist/lib/LoadingDots.d.ts

@@ -0,0 +1,15 @@
+interface LoadingDotsProps {
+    className?: string;
+    isShowing?: boolean;
+}
+interface LoadingDotsInnerProps {
+    className?: string;
+    isShowing?: boolean;
+    type?: "typing" | "bricks";
+    message?: string;
+}
+export declare const LoadingDotsTyping: (props: LoadingDotsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LoadingDotsBricks: (props: LoadingDotsProps) => import("react/jsx-runtime").JSX.Element;
+export declare function LoadingDots({ className, isShowing, type, message, }: LoadingDotsInnerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=LoadingDots.d.ts.map

frontend/libs/components/loading/dist/lib/LoadingDots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingDots.d.ts","sourceRoot":"","sources":["../../src/lib/LoadingDots.tsx"],"names":[],"mappings":"AAGA,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,qBAAqB;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,iBAAiB,GAAI,OAAO,gBAAgB,4CAExD,CAAC;AACF,eAAO,MAAM,iBAAiB,GAAI,OAAO,gBAAgB,4CAExD,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,SAAgB,EAChB,IAAe,EACf,OAAO,GACR,EAAE,qBAAqB,2CAuBvB"}

frontend/libs/components/loading/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@storyteller/ui-loading",
+  "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/loading/src/index.ts

@@ -0,0 +1,2 @@
+export * from './lib/LoadingBar';
+export * from './lib/LoadingDots';

frontend/libs/components/loading/src/lib/LoadingBar.tsx

@@ -0,0 +1,101 @@
+import { Transition } from "@headlessui/react";
+import { twMerge } from "tailwind-merge";
+import { LoadingSpinner } from "@storyteller/ui-loading-spinner";
+
+interface LoadingBarProps {
+  id?: string;
+  wrapperClassName?: string;
+  innerWrapperClassName?: string;
+  progressBackgroundClassName?: string;
+  progressClassName?: string;
+  variant?: string;
+  show?: boolean;
+  hasSpinner?: boolean;
+  progressData: {
+    progress: number;
+    label?: string;
+    message?: string;
+  };
+}
+export const LoadingBar = ({
+  wrapperClassName: propsWrapperClassName,
+  innerWrapperClassName: propsInnerWrapperClassName,
+  progressBackgroundClassName: propsProgressBackgroundClassName,
+  progressClassName: propsProgressClassName,
+  progressData,
+  hasSpinner,
+  variant = "primary",
+  show = true,
+  ...rest
+}: LoadingBarProps) => {
+  function getVariantClassNames(variant: string) {
+    switch (variant) {
+      case "secondary": {
+        return " bg-brand-secondary text-white ";
+      }
+      case "primary":
+      default: {
+        return " bg-brand-primary text-white ";
+      }
+    }
+  }
+
+  const wrapperClassName = twMerge(
+    "w-full h-full relative bg-ui-background",
+    propsWrapperClassName,
+  );
+  const innerWrapperClassName = twMerge(
+    "w-full h-full p-4 gap-6 m-auto flex flex-col justify-center items-center",
+    propsInnerWrapperClassName,
+  );
+  const progressBackgroundClassName = twMerge(
+    "w-full bg-brand-secondary-800 rounded-full h-2.5",
+    propsProgressBackgroundClassName,
+  );
+  const progressClassName = twMerge(
+    "h-2.5 rounded-full transition-all duration-1000",
+    getVariantClassNames(variant),
+    propsProgressClassName,
+  );
+
+  return (
+    <Transition
+      as="div"
+      className={wrapperClassName}
+      show={show}
+      enter="transition-opacity duration-150"
+      enterFrom="opacity-0"
+      enterTo="opacity-100"
+      leave="transition-opacity duration-1000"
+      leaveFrom="opacity-100"
+      leaveTo="opacity-0"
+      {...rest}
+    >
+      <div className={innerWrapperClassName}>
+        <div className="flex flex-col items-center gap-3">
+          <div className="flex items-center gap-2.5">
+            {hasSpinner && <LoadingSpinner className="h-5" />}
+            {progressData.label && (
+              <label className="text-lg font-medium">
+                {progressData.label}
+              </label>
+            )}
+          </div>
+        </div>
+
+        <div className={progressBackgroundClassName}>
+          <div
+            className={progressClassName}
+            style={{ width: progressData.progress + "%" }}
+          />
+        </div>
+
+        {progressData.message && (
+          <p className="text-center text-sm opacity-75">
+            {progressData.message}
+          </p>
+        )}
+      </div>
+    </Transition>
+  );
+};

frontend/libs/components/loading/src/lib/LoadingDots.tsx

@@ -0,0 +1,51 @@
+import { Transition } from "@headlessui/react";
+import { twMerge } from "tailwind-merge";
+
+interface LoadingDotsProps {
+  className?: string;
+  isShowing?: boolean;
+}
+
+interface LoadingDotsInnerProps {
+  className?: string;
+  isShowing?: boolean;
+  type?: "typing" | "bricks";
+  message?: string;
+}
+
+export const LoadingDotsTyping = (props: LoadingDotsProps) => {
+  return <LoadingDots {...props} />;
+};
+export const LoadingDotsBricks = (props: LoadingDotsProps) => {
+  return <LoadingDots {...props} type="bricks" />;
+};
+
+export function LoadingDots({
+  className,
+  isShowing = true,
+  type = "typing",
+  message,
+}: LoadingDotsInnerProps) {
+  const classNames = twMerge(
+    "w-full h-full flex flex-col justify-center items-center bg-ui-background gap-6",
+    className,
+  );
+
+  return (
+    <Transition
+      as="div"
+      className={classNames}
+      show={isShowing}
+      enter="transition-opacity duration-150"
+      enterFrom="opacity-0"
+      enterTo="opacity-100"
+      leave="transition-opacity duration-1000"
+      leaveFrom="opacity-100"
+      leaveTo="opacity-0"
+    >
+      {type === "typing" && <div className="dot-typing"></div>}
+      {type === "bricks" && <div className="dot-bricks"></div>}
+      {message && <h4>{message}</h4>}
+    </Transition>
+  );
+}

frontend/libs/components/loading/tsconfig.json

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

frontend/libs/components/loading/tsconfig.lib.json

@@ -0,0 +1,50 @@
+{
+  "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": "../loading-spinner/tsconfig.lib.json"
+    }
+  ]
+}

frontend/libs/components/loading/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/loading/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/loading',
+  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-loading',
+      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,
+    }
+  },
+}));