@bearmenu/ui 0.1.1 → 0.5.0

package/src/components/place-about-tab.tsx

@@ -0,0 +1,474 @@
+"use client";
+
+import {
+  MapPin,
+  Phone,
+  Globe,
+  Clock,
+  UtensilsCrossed,
+  CreditCard,
+  Shield,
+  Car,
+  Building2,
+  Info,
+} from "lucide-react";
+import { cn } from "../lib/utils";
+
+// Lucide v1+ removed brand icons; inline SVGs preserve the original visual.
+function Instagram(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
+      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
+      <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
+    </svg>
+  );
+}
+
+function Facebook(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
+    </svg>
+  );
+}
+import { Card, CardContent, CardHeader, CardTitle } from "./card";
+import { Badge } from "./badge";
+import { Text } from "./text";
+import type {
+  PlaceAboutTabLabels,
+  PlaceLinkKind,
+  PlacePreview,
+} from "./place-types";
+
+export interface PlaceAboutTabProps {
+  place: PlacePreview;
+  labels: PlaceAboutTabLabels;
+  /** Slot for an embedded map (FE only). Omit to skip the map row. */
+  mapSlot?: React.ReactNode;
+  /** Slot for an embedded busyness chart. Rendered only when both this prop and `place.busyness` are present. */
+  busynessSlot?: React.ReactNode;
+  /** Fires when the user clicks a contact link (phone/website/social). The URL is what the caller passed in. */
+  onLinkClick?: (kind: PlaceLinkKind, url: string) => void;
+  className?: string;
+}
+
+function formatHour(h: number): string {
+  return `${h.toString().padStart(2, "0")}:00`;
+}
+
+function humanizeEnum(value: string): string {
+  return value.replace(/_/g, " ");
+}
+
+export function PlaceAboutTab({
+  place,
+  labels,
+  mapSlot,
+  busynessSlot,
+  onLinkClick,
+  className,
+}: PlaceAboutTabProps) {
+  const todayHours =
+    place.hours && place.hours.length > 0
+      ? place.hours.map((slot) => `${formatHour(slot.opens_at)} - ${formatHour(slot.closes_at)}`)
+      : null;
+
+  const formattedAddress = place.location?.address;
+  const handleLinkClick = (kind: PlaceLinkKind, url?: string) => {
+    if (onLinkClick && url) onLinkClick(kind, url);
+  };
+
+  const getAmenityLabel = (key: string): string =>
+    labels.amenityLabels[key] || humanizeEnum(key);
+  const getPaymentLabel = (key: string): string =>
+    labels.paymentLabels[key] || humanizeEnum(key);
+  const getAccessibilityLabel = (key: string): string =>
+    labels.accessibilityLabels[key] || humanizeEnum(key);
+  const getParkingLabel = (key: string): string =>
+    labels.parkingLabels[key] || humanizeEnum(key);
+  const getTypeLabel = (key: string): string => labels.typeLabels[key] || humanizeEnum(key);
+  const getStatusLabel = (key: string): string => labels.statusLabels[key] || humanizeEnum(key);
+
+  return (
+    <div className={cn("space-y-4 pt-4 px-4", className)}>
+      {mapSlot}
+
+      {(place.description || place.generative_summary || place.review_summary) && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Info className="w-5 h-5" aria-hidden="true" />
+              {labels.description}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {place.generative_summary && (
+              <div>
+                <Text as="p" variant="body-sm" color="muted" className="mb-2">
+                  {labels.overview}
+                </Text>
+                <Text as="p" color="default">
+                  {place.generative_summary}
+                </Text>
+              </div>
+            )}
+            {place.description && (
+              <div>
+                <Text as="p" variant="body-sm" color="muted" className="mb-2">
+                  {labels.description}
+                </Text>
+                <Text as="p" color="default">
+                  {place.description}
+                </Text>
+              </div>
+            )}
+            {place.review_summary && (
+              <div>
+                <Text as="p" variant="body-sm" color="muted" className="mb-2">
+                  {labels.whatPeopleSay}
+                </Text>
+                <Text as="p" color="default">
+                  {place.review_summary}
+                </Text>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <MapPin className="w-5 h-5" aria-hidden="true" />
+            {labels.contactAndLocation}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {formattedAddress && (
+            <div>
+              <Text as="p" variant="body-sm" color="muted" className="mb-1">
+                {labels.address}
+              </Text>
+              <Text as="p" color="default">
+                {formattedAddress}
+              </Text>
+            </div>
+          )}
+          {place.phone && (
+            <div className="flex items-center gap-2">
+              <Phone className="w-4 h-4 text-muted-foreground" aria-hidden="true" />
+              <a
+                href={`tel:${place.phone}`}
+                onClick={() => handleLinkClick("phone", place.phone)}
+                className="text-foreground hover:text-primary transition-colors"
+              >
+                {place.phone}
+              </a>
+            </div>
+          )}
+          {place.website_url && (
+            <div className="flex items-center gap-2">
+              <Globe className="w-4 h-4 text-muted-foreground" aria-hidden="true" />
+              <a
+                href={place.website_url}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={() => handleLinkClick("website", place.website_url)}
+                className="text-foreground hover:text-primary transition-colors break-all"
+              >
+                {place.website_url}
+              </a>
+            </div>
+          )}
+          {place.socials?.instagram_url && (
+            <div className="flex items-center gap-2">
+              <Instagram className="w-4 h-4 text-muted-foreground" aria-hidden="true" />
+              <a
+                href={place.socials.instagram_url}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={() => handleLinkClick("instagram", place.socials?.instagram_url)}
+                className="text-foreground hover:text-primary transition-colors"
+              >
+                {labels.instagram}
+              </a>
+            </div>
+          )}
+          {place.socials?.facebook_url && (
+            <div className="flex items-center gap-2">
+              <Facebook className="w-4 h-4 text-muted-foreground" aria-hidden="true" />
+              <a
+                href={place.socials.facebook_url}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={() => handleLinkClick("facebook", place.socials?.facebook_url)}
+                className="text-foreground hover:text-primary transition-colors"
+              >
+                {labels.facebook}
+              </a>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {todayHours && todayHours.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Clock className="w-5 h-5" aria-hidden="true" />
+              {labels.todayHours}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-3">
+              <div className="flex items-center gap-2">
+                <span
+                  className={cn(
+                    "w-2 h-2 rounded-full",
+                    place.open_now ? "bg-green-500" : "bg-muted-foreground"
+                  )}
+                />
+                <Text
+                  as="span"
+                  weight="medium"
+                  className={place.open_now ? "text-green-600 dark:text-green-400" : ""}
+                >
+                  {place.open_now ? labels.statusOpen : labels.statusClosed}
+                </Text>
+              </div>
+              {todayHours.map((range, index) => (
+                <div key={index} className="flex items-center gap-2">
+                  <Text as="span" color="muted">
+                    {range}
+                  </Text>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {busynessSlot && place.busyness && place.busyness.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Clock className="w-5 h-5" aria-hidden="true" />
+              {labels.typicalBusyness}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>{busynessSlot}</CardContent>
+        </Card>
+      )}
+
+      {place.cuisines && place.cuisines.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <UtensilsCrossed className="w-5 h-5" aria-hidden="true" />
+              {labels.cuisines}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-wrap gap-2">
+              {place.cuisines.map((cuisine, index) => (
+                <Badge key={index} variant="secondary">
+                  {cuisine.charAt(0).toUpperCase() + cuisine.slice(1)}
+                </Badge>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {place.amenities && place.amenities.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>{labels.amenities}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
+              {place.amenities.map((amenity, index) => (
+                <div key={index} className="flex items-center gap-2 text-sm">
+                  <Text as="span" color="muted">
+                    •
+                  </Text>
+                  <Text as="span" color="default">
+                    {getAmenityLabel(amenity)}
+                  </Text>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {place.payment_options && place.payment_options.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <CreditCard className="w-5 h-5" aria-hidden="true" />
+              {labels.paymentOptions}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-wrap gap-2">
+              {place.payment_options.map((payment, index) => (
+                <Badge key={index} variant="outline">
+                  {getPaymentLabel(payment)}
+                </Badge>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {place.accessibility_features && place.accessibility_features.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Shield className="w-5 h-5" aria-hidden="true" />
+              {labels.accessibility}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+              {place.accessibility_features.map((feature, index) => (
+                <div key={index} className="flex items-center gap-2 text-sm">
+                  <Text as="span" color="muted">
+                    •
+                  </Text>
+                  <Text as="span" color="default">
+                    {getAccessibilityLabel(feature)}
+                  </Text>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {place.parking_options && place.parking_options.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Car className="w-5 h-5" aria-hidden="true" />
+              {labels.parking}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-wrap gap-2">
+              {place.parking_options.map((parking, index) => (
+                <Badge key={index} variant="outline">
+                  {getParkingLabel(parking)}
+                </Badge>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {place.landmarks && place.landmarks.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <MapPin className="w-5 h-5" aria-hidden="true" />
+              {labels.nearbyLandmarks}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              {place.landmarks.map((landmark, index) => (
+                <div key={index} className="flex justify-between items-center">
+                  <Text as="span" color="default">
+                    {landmark.name}
+                  </Text>
+                  {landmark.distance_meters !== undefined &&
+                    landmark.distance_meters !== null && (
+                      <Text as="span" variant="body-sm" color="muted">
+                        {(landmark.distance_meters / 1000).toFixed(1)} km
+                      </Text>
+                    )}
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {place.areas && place.areas.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Building2 className="w-5 h-5" aria-hidden="true" />
+              {labels.neighborhood}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-wrap gap-2">
+              {place.areas.map((area, index) => (
+                <Badge key={index} variant="secondary">
+                  {area.name}
+                </Badge>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {(place.type || place.business_status) && (
+        <Card>
+          <CardHeader>
+            <CardTitle>{labels.businessInformation}</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            {place.type && (
+              <div className="flex justify-between items-center">
+                <Text as="span" variant="body-sm" color="muted">
+                  {labels.type}
+                </Text>
+                <Text as="span" color="default">
+                  {getTypeLabel(place.type)}
+                </Text>
+              </div>
+            )}
+            {place.business_status && (
+              <div className="flex justify-between items-center">
+                <Text as="span" variant="body-sm" color="muted">
+                  {labels.status}
+                </Text>
+                <Badge
+                  variant={
+                    place.business_status === "operational"
+                      ? "default"
+                      : place.business_status === "closed_temporarily"
+                        ? "secondary"
+                        : "destructive"
+                  }
+                >
+                  {getStatusLabel(place.business_status)}
+                </Badge>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}

package/src/components/place-card.stories.tsx

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PlaceCard } from "./place-card";
+import type { PlaceCardLabels, PlacePreview } from "./place-types";
+
+const labels: PlaceCardLabels = {
+  open: "Open",
+  closed: "Closed",
+  until: "until",
+  opensAt: "opens at",
+  currency: "RON",
+};
+
+const basePlace: PlacePreview = {
+  id: "1",
+  slug: "casa-gri",
+  name: "Casa Gri",
+  description:
+    "A modern bistro serving thoughtful European plates with a Mediterranean accent. Open daily until late.",
+  open_now: true,
+  rating: { rating: 4.6, count: 342 },
+  hours: [{ opens_at: 11, closes_at: 23 }],
+  today_schedule: [{ opens_at: 11, closes_at: 23 }],
+  location: { distance: { meters: 1240 } },
+  price_dishes: { price_range_low: 35, price_range_high: 90 },
+  price_drinks: { price_range_low: 15, price_range_high: 45 },
+};
+
+const meta = {
+  title: "Components/PlaceCard",
+  component: PlaceCard,
+  tags: ["autodocs"],
+  parameters: { layout: "centered" },
+  args: {
+    labels,
+    place: basePlace,
+    onClick: undefined,
+  },
+} satisfies Meta<typeof PlaceCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  decorators: [
+    (Story) => (
+      <div className="w-[360px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const Closed: Story = {
+  args: {
+    place: { ...basePlace, open_now: false },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[360px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const NoRating: Story = {
+  args: {
+    place: { ...basePlace, rating: undefined, review_count: undefined },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[360px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const NoThumbnail: Story = {
+  args: {
+    place: { ...basePlace, thumbnail_url: undefined },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[360px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const Interactive: Story = {
+  args: {
+    onClick: (place) => alert(`Clicked: ${place.name}`),
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[360px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const Minimal: Story = {
+  args: {
+    place: {
+      id: "2",
+      slug: "tiny",
+      name: "The Tiny Spot",
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[360px]">
+        <Story />
+      </div>
+    ),
+  ],
+};