@syscore/ui-library 1.3.7 → 1.4.0

package/client/lib/concept-icons.ts

@@ -0,0 +1,45 @@
+/**
+ * Centralized concept icon mapping
+ *
+ * Maps concept slugs to their icon components.
+ * Used when fetching concept data from API - the API returns string IDs,
+ * and this map resolves them to actual React components.
+ */
+
+import {
+  IconConceptMind,
+  IconConceptCommunity,
+  IconConceptMovement,
+  IconConceptWater,
+  IconConceptAir,
+  IconConceptLight,
+  IconConceptThermalComfort,
+  IconConceptNourishment,
+  IconConceptSound,
+  IconConceptMaterials,
+  IconConceptInnovation,
+} from "@/components/icons/ConceptIcons";
+import { type ConceptSlug } from "@/lib/mock-data/explore-data";
+
+export interface ConceptIconProps {
+  className?: string;
+  active?: boolean;
+  outlined?: boolean;
+}
+
+export const CONCEPT_ICONS: Record<
+  ConceptSlug,
+  React.ComponentType<ConceptIconProps>
+> = {
+  air: IconConceptAir,
+  water: IconConceptWater,
+  nourishment: IconConceptNourishment,
+  light: IconConceptLight,
+  movement: IconConceptMovement,
+  "thermal-comfort": IconConceptThermalComfort,
+  sound: IconConceptSound,
+  materials: IconConceptMaterials,
+  community: IconConceptCommunity,
+  mind: IconConceptMind,
+  innovation: IconConceptInnovation,
+};

package/client/ui/Card.stories.tsx

@@ -210,103 +210,6 @@ export const FiltersPanel: Story = {
 //   },
 // };
 
-
-export const NavigatorPanel: Story = {
-  render: () => {
-    const [activeConcept, setActiveConcept] = useState<string>("community");
-    const [activeTheme, setActiveTheme] = useState<string>("C7");
-    const [activeStrategy, setActiveStrategy] = useState<string>("C7.4");
-
-    const concepts = [
-      { id: "mind", Icon: IconConceptMind },
-      { id: "community", Icon: IconConceptCommunity },
-      { id: "movement", Icon: IconConceptMovement },
-      { id: "water", Icon: IconConceptWater },
-      { id: "air", Icon: IconConceptAir },
-      { id: "light", Icon: IconConceptLight },
-      { id: "thermal", Icon: IconConceptThermalComfort },
-      { id: "nourishment", Icon: IconConceptNourishment },
-      { id: "sound", Icon: IconConceptSound },
-      { id: "materials", Icon: IconConceptMaterials },
-    ];
-
-    const themes = Array.from({ length: 9 }, (_, i) => `C${9 - i}`).reverse();
-    const strategies = ["C7.1", "C7.2", "C7.3", "C7.4"];
-
-    return (
-      <Card className="w-[344px] bg-cyan-50 border-gray-100 rounded-xl p-6 shadow-none flex flex-col gap-6">
-        {/* Concepts */}
-        <div className="flex flex-col gap-3">
-          <Label className="text-gray-600">Concept</Label>
-          <div className="flex flex-wrap gap-2">
-            {concepts.map(({ id, Icon }) => (
-              <button
-                key={id}
-                onClick={() => setActiveConcept(id)}
-                className="rounded-full transition-transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2"
-              >
-                <Icon active={activeConcept === id} className="size-12" />
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Theme */}
-        <div className="flex flex-col gap-3">
-          <Label className="text-gray-600">Theme</Label>
-          <div className="flex flex-wrap gap-2">
-            {themes.map((theme) => (
-              <button
-                key={theme}
-                onClick={() => setActiveTheme(theme)}
-                className={`w-12 h-8 rounded-[6px] flex items-center justify-center transition-colors ${activeTheme === theme
-                  ? "bg-cyan-800 text-white"
-                  : "bg-blue-100 text-blue-600 hover:bg-blue-200"
-                  }`}
-              >
-                <span className="body-small font-semibold">{theme}</span>
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Strategy */}
-        <div className="flex flex-col gap-3">
-          <Label className="text-gray-600">Strategy</Label>
-          <div className="flex flex-wrap gap-2">
-            {strategies.map((strategy) => (
-              <button
-                key={strategy}
-                onClick={() => setActiveStrategy(strategy)}
-                className={`w-12 h-8 rounded-[6px] flex items-center justify-center transition-colors ${activeStrategy === strategy
-                  ? "bg-[#0F748A]/10 border border-[#0F748A]/20 text-cyan-900"
-                  : "bg-blue-100 text-blue-600 hover:bg-blue-200"
-                  }`}
-              >
-                <span className="body-small font-semibold">{strategy}</span>
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Scope */}
-        <div className="flex flex-col gap-3">
-          <Label className="text-gray-600">Scope</Label>
-          <Toggle
-            className="w-full h-8 border border-gray-100 bg-white rounded-full p-0 [&>button]:flex-1"
-            options={[
-              { label: "Non-core", value: "non-core" },
-              { label: "Core", value: "core" },
-            ]}
-            defaultValue="non-core"
-          />
-        </div>
-      </Card>
-    );
-  },
-};
-
-
 export const ConceptCard: Story = {
   parameters: {
     docs: {
@@ -431,4 +334,5 @@ export const ConceptCard: Story = {
       </div>
     );
   },
-};
+};
+

package/client/ui/Hero.stories.tsx

@@ -0,0 +1,72 @@
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "../components/ui/button";
+import { HeroSection } from "../components/ui/hero-section";
+import { motion } from "motion/react";
+
+const meta = {
+    title: "Review/Hero",
+    component: HeroSection,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+} satisfies Meta<typeof HeroSection>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => (
+        <HeroSection backgroundSlot={
+            <motion.div
+                className="absolute bottom-0 flex items-center justify-center max-w-[1303px] mx-auto hidden sm:block"
+                initial={{ opacity: 0, scale: 1 }}
+                animate={{ opacity: 1, scale: 1.05 }}
+                transition={{ duration: 1, ease: [0.25, 0.46, 0.45, 0.94] }}
+                style={{ willChange: "transform, opacity" }}
+            >
+                <motion.div
+                    animate={{
+                        y: [0, -15, 0],
+                        scale: [1, 1.02, 1],
+                    }}
+                    transition={{
+                        duration: 8,
+                        ease: "easeInOut",
+                        repeat: Infinity,
+                        repeatType: "loop",
+                    }}
+                    style={{ willChange: "transform" }}
+                >
+                    <img
+                        src="/img/half-sphere.png"
+                        alt="WELL Standard Sphere"
+                        width={900}
+                        height={900}
+                        className="w-auto object-bottom object-contain select-none pointer-events-none "
+                    />
+                </motion.div>
+            </motion.div>
+        } contentSlot={
+            <motion.div
+                className="flex flex-wrap justify-center gap-4"
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: 0.5 }}
+            >
+                <Button variant="secondary-light" size="xlarge" className="shadow-2xl ">
+                    Explore the standard
+                </Button>
+                <Button
+                    size="xlarge"
+                    variant="clear"
+                    className="shadow-2xl bg-none bg-[#282A3133] px-15 text-white hover:bg-[#282a3166] "
+                >
+                    See what&apos;s new
+                </Button>
+            </motion.div>} />
+    ),
+};
+

package/client/ui/Navigation.stories.tsx

@@ -23,35 +23,44 @@ const navItems = [
 ];
 
 export const Default: Story = {
-  render: () => (
-    <div className="h-screen bg-[linear-gradient(var(--gradient-0))]">
+  args: {
+    isStrategy: false,
+    onLinkClick: (href) => console.log("Clicked:", href),
+    pathname: "/",
+  },
+  render: (args) => (
+    <div className="h-screen bg-cyan-900">
       <Navigation
-        navItems={navItems}
-        isStrategy={false}
-        onLinkClick={(href) => console.log("Clicked:", href)}
+        {...args}
       />
-      <div className="pt-20 p-8">
-        <p className="text-gray-600">
-          Navigation component is fixed at the top.
-        </p>
-        <p className="text-gray-600">Hover over menu items to see dropdowns.</p>
-      </div>
+
+    </div>
+  ),
+};
+
+export const WithNavItems: Story = {
+  args: {
+    navItems: navItems,
+    isStrategy: false,
+    onLinkClick: (href) => console.log("Clicked:", href),
+    pathname: "/",
+  },
+  render: (args) => (
+    <div className="h-screen bg-cyan-900">
+      <Navigation {...args} />
     </div>
   ),
 };
 
 export const StrategyMode: Story = {
-  render: () => (
+  args: {
+    isStrategy: true,
+    onLinkClick: (href) => console.log("Clicked:", href),
+    pathname: "/strategy",
+  },
+  render: (args) => (
     <div className="h-screen bg-white">
-      <Navigation
-        navItems={navItems}
-        isStrategy={true}
-        onLinkClick={(href) => console.log("Clicked:", href)}
-      />
-
-      <div className="pt-20 p-8">
-        <p className="text-gray-600">Strategy mode navigation.</p>
-      </div>
+      <Navigation {...args} />
     </div>
   ),
 };