@gobolt/genesis 0.0.10 → 0.1.0

package/dist/components/Form/__stories__/FormStory.js

@@ -1,78 +1,155 @@
-import { jsxs as o, Fragment as p, jsx as e } from "react/jsx-runtime";
-import { F as c, a as s, h as i } from "../../../Typography-aGoDUl4R.js";
+import { jsxs as s, Fragment as T, jsx as e } from "react/jsx-runtime";
+import { useState as m, useMemo as x } from "react";
+import { F as P, a as c, d as a } from "../../../Typography-CoZ5qD-t.js";
+import "../../Avatar/styles.js";
 import "../../Badge/styles.js";
+import "../../../providers/BreakpointThemeProvider.js";
 import "../../Breadcrumb/styles.js";
-import "../../../providers/ThemeProvider.js";
-import m from "../../Button/Button.js";
-import d from "../../Checkbox/Checkbox.js";
+import p from "../../Button/Button.js";
+import V from "../../Card/Card.js";
+import k from "../../Checkbox/Checkbox.js";
 import "../../ErrorBoundaryFallback/styles.js";
-import u from "../../Input/Input.js";
+import d from "../../Input/Input.js";
+import "../../Layout/Content/styles.js";
 import "../../Message/styles.js";
+import "../../Notification/NotificationBadge/styles.js";
 import "../../Notification/styles.js";
-import h from "../../Select/Select.js";
+import "../../../styles-CWdUpZom.js";
+import S from "../../Progress/Progress.js";
+import "../../Row/styles.js";
+import "../../../styles/global-styles.js";
+import "../../Row/RowLabelValue/styles.js";
+import "../../Row/RowActions/styles.js";
+import "../../SegmentedControls/styles.js";
+import I from "../../Select/Select.js";
+import "../../Switch/styles.js";
+import { S as h } from "../../../styles-qerRs7Rn.js";
+import "../../Tabs/styles.js";
+import "../../Tile/styles.js";
 import "../../Toast/styles.js";
-import f from "react";
-import { F as b } from "../../../styles-CT_fyXBd.js";
-import { S as l } from "../../../index-BZAhCB_K.js";
-const F = [
-  { value: "apple", label: /* @__PURE__ */ e("span", { children: "apple" }) },
-  { value: "pear", label: /* @__PURE__ */ e("span", { children: "pear" }) }
-], _ = () => {
-  const [n, t] = f.useState(null), [a] = b.useForm();
-  return /* @__PURE__ */ o(p, { children: [
-    /* @__PURE__ */ e(
-      c,
+import "../../Tooltip/styles.js";
+import { F as v } from "../../../styles-D1vKDy9V.js";
+const N = [
+  { value: "sedan_tesla_3", label: "Tesla Model 3", isEv: !0 },
+  { value: "suv_tesla_y", label: "Tesla Model Y", isEv: !0 },
+  { value: "sedan_lucid", label: "Lucid Air", isEv: !0 },
+  { value: "sedan_camry", label: "Toyota Camry", isEv: !1 },
+  { value: "suv_rav4", label: "Toyota RAV4", isEv: !1 },
+  { value: "pickup_f150", label: "Ford F-150", isEv: !1 },
+  { value: "van_transit", label: "Ford Transit", isEv: !1 },
+  { value: "suv_highlander", label: "Toyota Highlander", isEv: !1 },
+  { value: "sedan_accord", label: "Honda Accord", isEv: !1 },
+  { value: "suv_crv", label: "Honda CR-V", isEv: !1 },
+  { value: "other_ev", label: "Other EV", isEv: !0 },
+  { value: "other_ice", label: "Other ICE", isEv: !1 }
+], me = () => {
+  const [b, f] = m({
+    value: 0,
+    status: "success",
+    text: null
+  }), [o, i] = m(null), [r] = v.useForm(), g = (l) => {
+    console.log("Success:", l), i(l);
+  }, y = (l) => {
+    console.log("Failed:", l);
+  }, F = () => {
+    r.resetFields(), i(null);
+  }, n = v.useWatch("isEv", r), E = x(
+    () => N.filter((l) => n ? l.isEv : !0),
+    [n]
+  ), C = () => {
+    const l = ["email", "routeNumber"], t = r.getFieldsValue(), _ = l.length;
+    return l.filter(
+      (u) => t[u] !== void 0 && t[u] !== ""
+    ).length / _ * 100;
+  };
+  return /* @__PURE__ */ s(T, { children: [
+    /* @__PURE__ */ s(
+      P,
       {
-        form: a,
+        form: r,
         autoComplete: "off",
         initialValues: { remember: !0 },
-        onFinish: (r) => {
-          console.log("Success:", r), t(r);
+        onFinish: g,
+        onFinishFailed: y,
+        onValuesChange: () => {
+          f({
+            text: null,
+            value: C(),
+            status: r.getFieldsError().some((l) => l.errors.length > 0) ? "error" : "success"
+          });
         },
-        onFinishFailed: (r) => {
-          console.log("Failed:", r);
-        },
-        children: /* @__PURE__ */ o(l, { direction: "vertical", children: [
-          /* @__PURE__ */ e(s, { variant: "heading1", children: "Ship with GoBolt" }),
+        children: [
+          /* @__PURE__ */ e(V, { cover: /* @__PURE__ */ e("img", { alt: "driver check in", src: "/gobolt_warehouse.png" }), children: /* @__PURE__ */ e(c, { variant: "heading2", children: "Driver Check In" }) }),
           /* @__PURE__ */ e(
-            i,
+            a,
             {
-              label: "What is your name?",
-              name: "username",
-              rules: [{ required: !0, message: "Please input your name!" }],
+              label: "What is your email?",
+              name: "email",
+              rules: [
+                { required: !0, message: "Please input your email!" },
+                { type: "email", message: "Please enter a valid email address!" }
+              ],
               labelCol: { span: 24 },
-              children: /* @__PURE__ */ e(u, {})
+              children: /* @__PURE__ */ e(d, {})
             }
           ),
           /* @__PURE__ */ e(
-            i,
+            a,
             {
-              label: "What's for lunch?",
-              name: "fruit",
-              rules: [{ required: !1 }],
+              label: "What is your route number?",
+              name: "routeNumber",
+              rules: [
+                { required: !0, message: "Please input only numbers" },
+                { pattern: /^[0-9]*$/, message: "Please input numbers only" }
+              ],
+              help: "Please input only numbers",
+              labelCol: { span: 24 },
+              style: { marginBottom: "48px" },
+              children: /* @__PURE__ */ e(
+                d,
+                {
+                  placeholder: "Enter a route number",
+                  type: "number",
+                  maxLength: 10,
+                  onKeyPress: (l) => {
+                    /[0-9]/.test(l.key) || l.preventDefault();
+                  },
+                  onChange: (l) => {
+                    const t = l.target.value.replace(/[^0-9]/g, "");
+                    r.setFieldValue("routeNumber", t);
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ e(
+            a,
+            {
+              name: "isEv",
               labelCol: { span: 24 },
-              children: /* @__PURE__ */ e(h, { options: F, placeholder: "Select a fruit" })
+              valuePropName: "checked",
+              children: /* @__PURE__ */ e(h, { direction: "horizontal", children: /* @__PURE__ */ e(k, { children: "Is your vehicle an EV?" }) })
             }
           ),
           /* @__PURE__ */ e(
-            i,
+            a,
             {
-              name: "subscribe",
+              label: "Please select your vehicle type",
+              name: "vehicleType",
+              rules: [{ required: !1 }],
               labelCol: { span: 24 },
-              label: "Interested in updates?",
-              children: /* @__PURE__ */ e(l, { direction: "horizontal", children: /* @__PURE__ */ e(d, { label: "Yes, Sign me up" }) })
+              children: /* @__PURE__ */ e(I, { options: E, placeholder: "Select a vehicle type" })
             }
           ),
-          /* @__PURE__ */ e(i, { label: null, name: "subscribe", valuePropName: "checked", children: /* @__PURE__ */ o(l, { direction: "horizontal", size: 180, children: [
-            /* @__PURE__ */ e(m, { themeType: "secondary", onClick: () => {
-              a.resetFields(), t(null);
-            }, children: "Reset" }),
-            /* @__PURE__ */ e(m, { htmlType: "submit", children: "Submit" })
+          /* @__PURE__ */ e(a, { label: null, name: "subscribe", valuePropName: "checked", children: /* @__PURE__ */ s(h, { direction: "horizontal", children: [
+            /* @__PURE__ */ e(p, { htmlType: "submit", children: "Check In" }),
+            /* @__PURE__ */ e(p, { themeType: "secondary", onClick: F, children: "Reset" }),
+            /* @__PURE__ */ e(S, { firstBarData: b })
           ] }) })
-        ] })
+        ]
       }
     ),
-    n && /* @__PURE__ */ o(
+    o && /* @__PURE__ */ s(
       "div",
       {
         style: {
@@ -81,13 +158,13 @@ const F = [
           border: "1px solid #ccc"
         },
         children: [
-          /* @__PURE__ */ e(s, { variant: "heading3", children: "Form Values:" }),
-          /* @__PURE__ */ e("pre", { children: JSON.stringify(n, null, 2) })
+          /* @__PURE__ */ e(c, { variant: "heading3", children: "Form Values:" }),
+          /* @__PURE__ */ e("pre", { children: JSON.stringify(o, null, 2) })
         ]
       }
     )
   ] });
 };
 export {
-  _ as FormStory
+  me as FormStory
 };

package/dist/components/Form/__tests__/form.test.js

@@ -1,6 +1,6 @@
 import { jsx as s } from "react/jsx-runtime";
-import { v as e, s as m, a as t } from "../../../setup-BvfREoHl.js";
-import { F as i } from "../../../Typography-aGoDUl4R.js";
+import { v as e, s as m, a as t } from "../../../setup-CUbCc8fQ.js";
+import { F as i } from "../../../Typography-CoZ5qD-t.js";
 describe("<Form />", () => {
   let o;
   beforeEach(() => {

package/dist/components/Form/index.js

@@ -1,4 +1,4 @@
-import { F as f } from "../../Typography-aGoDUl4R.js";
+import { F as f } from "../../Typography-CoZ5qD-t.js";
 export {
   f as default
 };

package/dist/components/Form/styles.js

@@ -1,5 +1,5 @@
 import "../../styled-components.browser.esm-CZ1XM4o4.js";
-import { a } from "../../styles-CT_fyXBd.js";
+import { a } from "../../styles-D1vKDy9V.js";
 export {
   a as Form
 };

package/dist/components/Glyph/Glyph.d.ts

@@ -0,0 +1,4 @@
+export interface GlyphProps {
+}
+declare const Glyph: ({}: GlyphProps) => import("react/jsx-runtime").JSX.Element;
+export default Glyph;

package/dist/components/Glyph/Glyph.js

@@ -0,0 +1,9 @@
+import { jsx as t } from "react/jsx-runtime";
+import { G as a } from "../../iconBase-LROS5hdG.js";
+function o(r) {
+  return a({ tag: "svg", attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "path", attr: { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }, child: [] }, { tag: "path", attr: { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" }, child: [] }, { tag: "path", attr: { d: "M4 2C2.8 3.7 2 5.7 2 8" }, child: [] }, { tag: "path", attr: { d: "M22 8c0-2.3-.8-4.3-2-6" }, child: [] }] })(r);
+}
+const e = ({}) => /* @__PURE__ */ t("div", { "data-testid": "Glyph", children: /* @__PURE__ */ t(o, {}) });
+export {
+  e as default
+};

package/dist/components/Glyph/__stories__/Glyph.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Glyph } from '../Glyph';
+
+declare const meta: Meta<typeof Glyph>;
+export default meta;
+type Story = StoryObj<typeof Glyph>;
+export declare const GlyphStory: Story;

package/dist/components/Glyph/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Glyph';
+export type { GlyphProps } from './Glyph';

package/dist/components/Glyph/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./Glyph.js";
+export {
+  o as default
+};

package/dist/components/Glyph/styles.d.ts

@@ -0,0 +1,14 @@
+import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
+
+interface StyledGlyphProps {
+    theme?: GenesisTheme;
+    type?: "primary" | "secondary";
+    state?: "active" | "disabled";
+}
+export declare const getGenesisClass: ({ colors, borderRadius, sizing }: {
+    colors: any;
+    borderRadius: any;
+    sizing: any;
+}, type?: string, state?: string) => string;
+export declare const StyledGlyph: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledGlyphProps>> & string;
+export {};

package/dist/components/Glyph/styles.js

@@ -0,0 +1,11 @@
+import { d as r } from "../../styled-components.browser.esm-CZ1XM4o4.js";
+const a = ({ colors: e, borderRadius: s, sizing: t }, i = "primary", o = "active") => `
+  .class-name-here {
+   } 
+ `, n = r.div`
+  ${({ theme: e, type: s, state: t }) => a(e, s, t)}
+`;
+export {
+  n as StyledGlyph,
+  a as getGenesisClass
+};

package/dist/components/Input/Input.d.ts

@@ -1,9 +1,8 @@
-import { default as React } from 'react';
 import { STATE } from '../../constants';
 import { InputProps as AntInputProps } from 'antd';
 
 export interface InputProps extends AntInputProps {
     state?: keyof typeof STATE;
 }
-declare const Input: React.FC<InputProps>;
+declare const Input: ({ state, ...rest }: InputProps) => import("react/jsx-runtime").JSX.Element;
 export default Input;

package/dist/components/Input/Input.js

@@ -1,19 +1,23 @@
-import { jsx as i } from "react/jsx-runtime";
-import { Input as p } from "./styles.js";
-import { useBreakpoint as e } from "../../providers/ThemeProvider.js";
-import { STATE as a } from "../../constants/index.js";
-const f = ({ state: t = a.active, ...o }) => {
+import { jsx as r } from "react/jsx-runtime";
+import { Input as s } from "./styles.js";
+import "../../providers/BreakpointThemeProvider.js";
+import { u as e } from "../../Typography-CoZ5qD-t.js";
+import { STATE as p } from "../../constants/index.js";
+const l = ({
+  state: t = p.active,
+  ...o
+}) => {
   e();
-  const { type: d, ...r } = o;
-  return /* @__PURE__ */ i(
-    p,
+  const { type: m, ...i } = o;
+  return /* @__PURE__ */ r(
+    s,
     {
       state: t,
       disabled: t === "disabled" || o.disabled,
-      ...r
+      ...i
     }
   );
 };
 export {
-  f as default
+  l as default
 };

package/dist/components/Input/__tests__/Input.test.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { d as r, i as o, a as s, s as n, g as a } from "../../../setup-BvfREoHl.js";
+import { d as r, i as o, a as s, s as n, g as a } from "../../../setup-CUbCc8fQ.js";
 import i from "../Input.js";
 import { STATE as c } from "../../../constants/index.js";
 r("Input Component", () => {