@local-civics/hub-ui 0.1.0

package/dist/layouts/AuthLayout/AuthLayout.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import { NavBarProps } from "../../components";
+/**
+ * AuthLayoutProps
+ */
+export type AuthLayoutProps = {
+    isLoading?: boolean;
+    tenantName?: string;
+    impactStatement?: string;
+    pathname?: string;
+    page?: "profile" | "explore" | "calendar";
+    disabled?: boolean;
+    header?: React.ReactNode;
+    subheader?: React.ReactNode;
+    sidebar?: React.ReactNode;
+    main?: React.ReactNode;
+    outlet?: React.ReactNode;
+    children?: React.ReactNode;
+    onOnboarding?: () => void;
+    onHome?: () => void;
+    onProfile?: () => void;
+    onExplore?: () => void;
+    onCalendar?: () => void;
+    onLogout?: () => void;
+    onFAQ?: () => void;
+    onPrivacy?: () => void;
+    onTerms?: () => void;
+};
+/**
+ * AuthLayout
+ * @constructor
+ */
+export declare const AuthLayout: (props: AuthLayoutProps & NavBarProps) => JSX.Element;

package/dist/layouts/AuthLayout/component.stories.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { AuthLayoutProps } from "./AuthLayout";
+import { Story } from "@storybook/react";
+/**
+ * Storybook component configuration
+ */
+declare const _default: {
+    title: string;
+    component: (props: AuthLayoutProps & import("../..").NavBarProps) => JSX.Element;
+};
+export default _default;
+/**
+ * Component stories
+ */
+export declare const Component: Story<AuthLayoutProps>;

package/dist/layouts/HomeLayout/HomeLayout.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+/**
+ * HomeLayoutProps
+ */
+export type HomeLayoutProps = {
+    isLoading?: boolean;
+    nickname?: string;
+    pathname?: string;
+    children?: React.ReactNode;
+    onProfile?: () => void;
+    onHome?: () => void;
+    onLogin?: () => void;
+    onFAQ?: () => void;
+    onPrivacy?: () => void;
+    onTerms?: () => void;
+};
+/**
+ * HomeLayout
+ * @constructor
+ */
+export declare const HomeLayout: (props: HomeLayoutProps) => JSX.Element;

package/dist/layouts/HomeLayout/component.stories.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { HomeLayoutProps } from "./HomeLayout";
+import { Story } from "@storybook/react";
+/**
+ * Storybook component configuration
+ */
+declare const _default: {
+    title: string;
+    component: (props: HomeLayoutProps) => JSX.Element;
+};
+export default _default;
+/**
+ * Component stories
+ */
+export declare const Component: Story<HomeLayoutProps>;

package/dist/layouts/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./AuthLayout/AuthLayout";
+export * from "./HomeLayout/HomeLayout";

package/dist/utils/classname/classname.d.ts

@@ -0,0 +1,16 @@
+/**
+ * A utility to build builders conditionally.
+ * @param base
+ * @param precondition
+ */
+export declare const builder: (base?: string, precondition?: boolean) => {
+    append: (...suffix: string[]) => any;
+    if: (condition: boolean, ...suffix: string[]) => any;
+    else: (...suffix: string[]) => any;
+    build: () => string;
+};
+/**
+ * A utility to recursively parse a configuration of classes and build a class name.
+ * @param config
+ */
+export declare const classname: (config: any) => string;

package/dist/utils/colors.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Background color from name
+ * @param name
+ * @param active
+ * @param disabled
+ */
+export declare const background: (name?: string, active?: boolean, disabled?: boolean) => "bg-red-200" | "bg-red-300 hover:bg-red-200" | "bg-red-200 hover:bg-red-300" | "bg-violet-200" | "bg-violet-300 hover:bg-violet-200" | "bg-violet-200 hover:bg-violet-300" | "bg-orange-200" | "bg-orange-300 hover:bg-orange-200" | "bg-orange-200 hover:bg-orange-300" | "bg-amber-200" | "bg-amber-300 hover:bg-amber-200" | "bg-amber-200 hover:bg-amber-300" | "bg-emerald-200" | "bg-emerald-300 hover:bg-emerald-200" | "bg-emerald-200 hover:bg-emerald-300" | "bg-sky-200" | "bg-sky-300 hover:bg-sky-200" | "bg-sky-200 hover:bg-sky-300" | "bg-gray-50" | "bg-gray-200 hover:bg-gray-100" | "bg-gray-100 hover:bg-gray-200";
+/**
+ * Foreground color from name
+ * @param name
+ */
+export declare const foreground: (name?: string) => "text-red-300 hover:text-red-400 border-red-300 hover:border-red-400 stroke-red-300 fill-red-300 hover:stroke-red-400 hover:stroke-red-400" | "text-violet-300 hover:text-violet-400 border-violet-300 hover:border-violet-400 stroke-violet-300 fill-violet-300 hover:stroke-violet-400 hover:stroke-violet-400" | "text-orange-300 hover:text-orange-400 border-orange-300 hover:border-orange-400 stroke-orange-300 fill-orange-300 hover:stroke-orange-400 hover:stroke-orange-400" | "text-amber-300 hover:text-amber-400 border-amber-300 hover:border-amber-400 stroke-amber-300 fill-amber-300 hover:stroke-amber-400 hover:stroke-amber-400" | "text-emerald-300 hover:text-emerald-400 border-emerald-300 hover:border-emerald-400 stroke-emerald-300 fill-emerald-300 hover:stroke-emerald-400 hover:stroke-emerald-400" | "text-sky-300 hover:text-sky-400 border-sky-300 hover:border-sky-400 stroke-sky-300 fill-sky-300 hover:stroke-sky-400 hover:stroke-sky-400" | "text-gray-100 hover:text-gray-200 border-gray-100 hover:border-gray-200 stroke-gray-300 fill-gray-300 hover:stroke-gray-400 hover:stroke-gray-400";

package/dist/utils/date.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A utility to get a number as its ordinal representation.
+ * https://community.shopify.com/c/shopify-design/ordinal-number-in-javascript-1st-2nd-3rd-4th/m-p/72156
+ * @param n
+ */
+export declare const ordNumber: (n: number) => string;

package/dist/utils/icon/icon.d.ts

@@ -0,0 +1,5 @@
+/**
+ * A utility to get an icon name.
+ * @param name
+ */
+export declare const getIconName: (name?: string) => "default" | "calendar" | "positive" | "negative" | "circle" | "college & career" | "arts & culture" | "explore" | "goal" | "help" | "leftArrow" | "rightArrow" | "policy & government" | "recreation" | "send" | "shield" | "profile" | "volunteer" | "clock" | "sponsored" | "globe" | "pin" | "milestone" | "citizen" | "cohort" | "builder" | "advocate" | "leader" | "representative" | "bolt" | "accept" | "close" | "menu-close" | "pathway" | "edit" | "settings" | "objective" | "achievements" | "badges" | "milestones" | "activity" | "reflection" | "registrations" | "lock" | "unlock" | "badge" | "waypoint" | "apple" | "guest speaker" | "search" | "menu" | "todo" | "done" | "review" | "contingent" | "unqualified" | "materials" | "asynchronous" | "synchronous" | "export" | "service-tracking" | undefined;

package/dist/utils/numbers.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Compact number
+ * @param num
+ */
+export declare const compact: (num?: number) => string;

package/dist/utils/search.d.ts

@@ -0,0 +1 @@
+export declare const debounce: (func: (search: string) => void, delay?: number) => (search: string) => void;

package/dist/utils/url.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const linkify: (text: string) => React.ReactNodeArray;

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@local-civics/hub-ui",
+  "version": "0.1.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.es.js",
+  "scripts": {
+    "start": "start-storybook -h localhost -p 6006",
+    "build": "rollup -c && tsc",
+    "watch": "rollup -cw",
+    "test": "jest --coverage=true --passWithNoTests",
+    "build-storybook": "build-storybook",
+    "chromatic": "npx chromatic",
+    "fmt": "npx prettier --write src"
+  },
+  "peerDependencies": {
+    "linkify-it": "^4.0.1"
+  }
+}