@situaction/traquiste-mobile 1.0.0-next.2 → 1.0.0-next.4

package/src/components/ButtonMap/ButtonMap.stories.tsx

@@ -1,49 +0,0 @@
-/** Storybook stories for the ButtonMap component */
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-native';
-import { View } from 'react-native';
-import { Plus, Minus, Crosshair, MapPin, MagnifyingGlass } from 'phosphor-react-native';
-import { ButtonMap, type ButtonMapProps } from './ButtonMap';
-
-type StoryArgs = ButtonMapProps & { colorScheme: 'light' | 'dark' };
-
-const meta: Meta<StoryArgs> = {
-  title: 'Components/ButtonMap',
-  component: ButtonMap,
-  render: ({ colorScheme: _colorScheme, ...args }) => (
-    <ButtonMap {...args} icon={<Crosshair />} />
-  ),
-  argTypes: {
-    colorScheme: {
-      control: { type: 'radio' },
-      options: ['light', 'dark'],
-    },
-    disabled: { control: { type: 'boolean' } },
-  },
-  args: {
-    colorScheme: 'light',
-    disabled: false,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<StoryArgs>;
-
-export const Default: Story = {};
-
-export const Disabled: Story = {
-  args: { disabled: true },
-};
-
-export const MapControls: Story = {
-  render: () => (
-    <View style={{ gap: 8, padding: 16, alignItems: 'flex-start' }}>
-      <ButtonMap icon={<Plus />} />
-      <ButtonMap icon={<Minus />} />
-      <ButtonMap icon={<Crosshair />} />
-      <ButtonMap icon={<MapPin />} />
-      <ButtonMap icon={<MagnifyingGlass />} disabled />
-    </View>
-  ),
-};

package/src/components/ButtonMap/ButtonMap.tsx

@@ -1,40 +0,0 @@
-/**
- * ButtonMap component — icon-only-rounded Button wrapper for map UI.
- * Applies a specific cartography shadow (Below/Minimal).
- */
-import React from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
-import { Button } from '../Button';
-
-export interface ButtonMapProps {
-  /** Icon component (Phosphor Duotone) */
-  icon: React.ReactElement;
-  /** Disabled state */
-  disabled?: boolean;
-  /** Press handler */
-  onPress?: () => void;
-  /** Additional container styles */
-  style?: StyleProp<ViewStyle>;
-}
-
-const shadowStyle: ViewStyle = {
-  shadowColor: '#0f0f0f0d',
-  shadowOffset: { width: 0, height: 4 },
-  shadowRadius: 5,
-  shadowOpacity: 1,
-  elevation: 3,
-};
-
-export function ButtonMap({ icon, disabled, onPress, style }: ButtonMapProps) {
-  return (
-    <Button
-      variant="tertiary"
-      content="icon-only-rounded"
-      size="S"
-      iconLeft={icon}
-      disabled={disabled}
-      onPress={onPress}
-      style={[shadowStyle, style]}
-    />
-  );
-}

package/src/components/ButtonMap/index.ts

@@ -1,2 +0,0 @@
-export { ButtonMap } from './ButtonMap';
-export type { ButtonMapProps } from './ButtonMap';

package/src/components/ButtonMenu/ButtonMenu.stories.tsx

@@ -1,68 +0,0 @@
-/** Storybook stories for the ButtonMenu component */
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-native';
-import { View } from 'react-native';
-import { House, MagnifyingGlass, Bell, Gear } from 'phosphor-react-native';
-import { ButtonMenu, type ButtonMenuProps } from './ButtonMenu';
-
-type StoryArgs = ButtonMenuProps & { colorScheme: 'light' | 'dark' };
-
-const meta: Meta<StoryArgs> = {
-  title: 'Components/ButtonMenu',
-  component: ButtonMenu,
-  render: ({ colorScheme: _colorScheme, ...args }) => (
-    <ButtonMenu {...args} icon={<House />} />
-  ),
-  argTypes: {
-    colorScheme: {
-      control: { type: 'radio' },
-      options: ['light', 'dark'],
-    },
-    state: {
-      control: { type: 'radio' },
-      options: ['default', 'active', 'disabled'],
-    },
-    notif: { control: { type: 'boolean' } },
-  },
-  args: {
-    colorScheme: 'light',
-    state: 'default',
-    notif: false,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<StoryArgs>;
-
-export const Default: Story = {
-  args: { state: 'default' },
-};
-
-export const Active: Story = {
-  args: { state: 'active' },
-};
-
-export const Disabled: Story = {
-  args: { state: 'disabled' },
-};
-
-export const WithNotif: Story = {
-  args: { state: 'default', notif: true },
-};
-
-export const ActiveWithNotif: Story = {
-  args: { state: 'active', notif: true },
-};
-
-export const AllStates: Story = {
-  render: () => (
-    <View style={{ flexDirection: 'row', gap: 12, padding: 16 }}>
-      <ButtonMenu state="default"  icon={<House />} />
-      <ButtonMenu state="active"   icon={<MagnifyingGlass />} />
-      <ButtonMenu state="disabled" icon={<Gear />} />
-      <ButtonMenu state="default"  icon={<Bell />} notif />
-      <ButtonMenu state="active"   icon={<Bell />} notif />
-    </View>
-  ),
-};

package/src/components/ButtonMenu/ButtonMenu.tsx

@@ -1,97 +0,0 @@
-/**
- * ButtonMenu component — icon-only toggle button for navigation/menu bars.
- * Supports default, active and disabled states with an optional notification dot.
- */
-import React, {ReactElement, useState } from 'react';
-import { Pressable, View } from 'react-native';
-import type { StyleProp, ViewStyle } from 'react-native';
-import { useTheme } from '../../context/ThemeContext';
-
-export type ButtonMenuState = 'default' | 'active' | 'disabled';
-
-export interface ButtonMenuProps {
-  /** Icon component (Phosphor Duotone icon) */
-  icon: ReactElement;
-  /** Toggle state */
-  state?: ButtonMenuState;
-  /** Show notification dot */
-  notif?: boolean;
-  /** Press handler */
-  onPress?: () => void;
-  /** Additional container styles */
-  style?: StyleProp<ViewStyle>;
-}
-
-const BACKGROUND: Record<ButtonMenuState, string> = {
-  default:  'transparent',
-  active:   '#d1c3a033',
-  disabled: '#0f0f0f0d',
-};
-
-const BORDER_COLOR: Record<ButtonMenuState, string | undefined> = {
-  default:  undefined,
-  active:   '#afafad80',
-  disabled: undefined,
-};
-
-const PRESSED_BACKGROUND = '#d1c3a066';
-const ICON_SIZE = 28;
-const NOTIF_DOT = 8;
-
-export function ButtonMenu({
-  icon,
-  state = 'default',
-  notif = false,
-  onPress,
-  style,
-}: ButtonMenuProps) {
-  const [pressed, setPressed] = useState(false);
-  const { colors } = useTheme();
-
-  const isDisabled = state === 'disabled';
-  const background = pressed && !isDisabled ? PRESSED_BACKGROUND : BACKGROUND[state];
-  const borderColor = BORDER_COLOR[state];
-
-  const containerStyle: ViewStyle = {
-    width: 48,
-    height: 48,
-    padding: 10,
-    borderRadius: 8,
-    backgroundColor: background,
-    borderWidth: borderColor != null ? 1 : undefined,
-    borderColor: borderColor ?? undefined,
-    alignItems: 'center',
-    justifyContent: 'center',
-  };
-
-  const clonedIcon = React.cloneElement(icon, {
-    size: ICON_SIZE,
-    color: isDisabled ? colors.text.disabled : undefined,
-    ...(icon.props as Record<string, unknown>),
-  } as object);
-
-  return (
-    <Pressable
-      pointerEvents={isDisabled ? 'none' : 'auto'}
-      onPressIn={() => setPressed(true)}
-      onPressOut={() => setPressed(false)}
-      onPress={isDisabled ? undefined : onPress}
-      style={[containerStyle, style]}
-    >
-      {clonedIcon}
-      {notif && (
-        <View
-          style={{
-            position: 'absolute',
-            top: 6,
-            left: 34,
-            width: NOTIF_DOT,
-            height: NOTIF_DOT,
-            borderRadius: 9999,
-            backgroundColor: '#ff4747',
-          }}
-        />
-      )}
-    </Pressable>
-  );
-}

package/src/components/ButtonMenu/index.ts

@@ -1,2 +0,0 @@
-export { ButtonMenu } from './ButtonMenu';
-export type { ButtonMenuProps, ButtonMenuState } from './ButtonMenu';

package/src/components/FilterChip/FilterChip.stories.tsx

@@ -1,71 +0,0 @@
-/** Storybook stories for the FilterChip component */
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-native';
-import { View } from 'react-native';
-import { Funnel, CaretDown, X, MagnifyingGlass } from 'phosphor-react-native';
-import { FilterChip, type FilterChipProps } from './FilterChip';
-
-type StoryArgs = FilterChipProps & { colorScheme: 'light' | 'dark' };
-
-const meta: Meta<StoryArgs> = {
-  title: 'Components/FilterChip',
-  component: FilterChip,
-  render: ({ colorScheme: _colorScheme, ...args }) => (
-    <FilterChip {...args} />
-  ),
-  argTypes: {
-    colorScheme: {
-      control: { type: 'radio' },
-      options: ['light', 'dark'],
-    },
-    type: {
-      control: { type: 'radio' },
-      options: ['icon', 'icon-text'],
-    },
-    selected:  { control: { type: 'boolean' } },
-    disabled:  { control: { type: 'boolean' } },
-  },
-  args: {
-    colorScheme: 'light',
-    type: 'icon-text',
-    selected: false,
-    disabled: false,
-    label: 'Filtrer',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<StoryArgs>;
-
-export const Default: Story = {
-  args: { label: 'Filtrer', iconLeft: <Funnel />, iconRight: <CaretDown /> },
-};
-
-export const Selected: Story = {
-  args: { label: 'Filtrer', iconLeft: <Funnel />, iconRight: <X />, selected: true },
-};
-
-export const Disabled: Story = {
-  args: { label: 'Filtrer', iconLeft: <Funnel />, disabled: true },
-};
-
-export const IconOnly: Story = {
-  args: { type: 'icon', iconLeft: <MagnifyingGlass /> },
-};
-
-export const IconOnlySelected: Story = {
-  args: { type: 'icon', iconLeft: <Funnel />, selected: true },
-};
-
-export const AllStates: Story = {
-  render: () => (
-    <View style={{ flexDirection: 'row', gap: 8, padding: 16, flexWrap: 'wrap' }}>
-      <FilterChip label="Default"  iconLeft={<Funnel />} iconRight={<CaretDown />} />
-      <FilterChip label="Selected" iconLeft={<Funnel />} iconRight={<X />} selected />
-      <FilterChip label="Disabled" iconLeft={<Funnel />} disabled />
-      <FilterChip type="icon" iconLeft={<Funnel />} />
-      <FilterChip type="icon" iconLeft={<Funnel />} selected />
-    </View>
-  ),
-};

package/src/components/FilterChip/FilterChip.tsx

@@ -1,124 +0,0 @@
-/**
- * FilterChip component — pill-shaped selection chip for filters.
- * Supports icon-only and icon+text layouts with controlled selection state.
- */
-import React, { useState } from 'react';
-import { Pressable, Text, View } from 'react-native';
-import type { StyleProp, ViewStyle } from 'react-native';
-import { useTheme } from '../../context/ThemeContext';
-
-export type FilterChipState = 'default' | 'pressed' | 'selected' | 'disabled';
-export type FilterChipType = 'icon' | 'icon-text';
-
-export interface FilterChipProps {
-  /** Content layout */
-  type?: FilterChipType;
-  /** Controlled selection state */
-  selected?: boolean;
-  /** Disabled state */
-  disabled?: boolean;
-  /** Label text — required when type is icon-text */
-  label?: string;
-  /** Left icon (Phosphor Duotone) */
-  iconLeft?: React.ReactElement;
-  /** Right icon — typically a caret or close icon */
-  iconRight?: React.ReactElement;
-  /** Press handler */
-  onPress?: () => void;
-  /** Additional container styles */
-  style?: StyleProp<ViewStyle>;
-}
-
-// --- State color tokens (hardcoded per spec) ---
-
-interface StateTokens {
-  background: string;
-  text: string;
-  icon: string;
-  borderColor: string;
-  borderWidth: number;
-}
-
-const STATE_TOKENS: Record<FilterChipState, StateTokens> = {
-  default:  { background: 'transparent', text: '#28242e', icon: '#28242e', borderColor: '#afafad80', borderWidth: 1 },
-  pressed:  { background: '#d1c3a066',  text: '#28242e', icon: '#28242e', borderColor: '#afafad80', borderWidth: 1 },
-  selected: { background: 'transparent', text: '#28242e', icon: '#28242e', borderColor: '#28242e',   borderWidth: 2 },
-  disabled: { background: '#0f0f0f0d', text: '#0f0f0f99', icon: '#0f0f0f99', borderColor: '#0f0f0f1a', borderWidth: 1 },
-};
-
-const ICON_LEFT_SIZE  = 20;
-const ICON_RIGHT_SIZE = 16;
-
-// --- Component ---
-
-export function FilterChip({
-  type = 'icon-text',
-  selected = false,
-  disabled = false,
-  label,
-  iconLeft,
-  iconRight,
-  onPress,
-  style,
-}: FilterChipProps) {
-  const [internalPressed, setInternalPressed] = useState(false);
-  useTheme(); // consumed for future theme-aware tokens
-
-  const resolvedState: FilterChipState = disabled
-    ? 'disabled'
-    : internalPressed
-      ? 'pressed'
-      : selected
-        ? 'selected'
-        : 'default';
-
-  const tokens = STATE_TOKENS[resolvedState];
-  const isIconOnly = type === 'icon';
-
-  const chipStyle: ViewStyle = {
-    height: 32,
-    borderRadius: 100,
-    paddingVertical: 6,
-    paddingHorizontal: isIconOnly ? 6 : 12,
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: isIconOnly ? 0 : 4,
-    backgroundColor: tokens.background,
-    borderWidth: tokens.borderWidth,
-    borderColor: tokens.borderColor,
-    alignSelf: 'flex-start',
-  };
-
-  const textStyle = {
-    color: tokens.text,
-    fontSize: 14,
-    lineHeight: 20,
-    fontFamily: 'Urbanist',
-    fontWeight: '500' as const,
-  };
-
-  const cloneIcon = (icon: React.ReactElement | undefined, size: number) => {
-    if (!icon) return null;
-    return React.cloneElement(icon, {
-      size,
-      color: tokens.icon,
-      ...(icon.props as Record<string, unknown>),
-    } as object);
-  };
-
-  return (
-    <Pressable
-      pointerEvents={disabled ? 'none' : 'auto'}
-      onPressIn={() => setInternalPressed(true)}
-      onPressOut={() => setInternalPressed(false)}
-      onPress={disabled ? undefined : onPress}
-      style={[{ paddingVertical: 6 }, style]}
-    >
-      <View style={chipStyle}>
-        {cloneIcon(iconLeft, ICON_LEFT_SIZE)}
-        {!isIconOnly && label != null && <Text style={textStyle}>{label}</Text>}
-        {cloneIcon(iconRight, ICON_RIGHT_SIZE)}
-      </View>
-    </Pressable>
-  );
-}

package/src/components/FilterChip/index.ts

@@ -1,2 +0,0 @@
-export { FilterChip } from './FilterChip';
-export type { FilterChipProps, FilterChipState, FilterChipType } from './FilterChip';

package/src/constants/colors.ts

@@ -1,2 +0,0 @@
-// Color design tokens — add tokens here as the design system grows
-export const colors = {} as const;

package/src/context/ThemeContext.tsx

@@ -1,84 +0,0 @@
-/**
- * Theme system for Traq[UI]ste Mobile.
- * Provides ThemeProvider and useTheme hook.
- * Consumer apps inject their own light/dark tokens via ThemeProvider props.
- */
-
-import React, {
-  createContext,
-  useContext,
-  useMemo,
-  type ReactNode,
-} from 'react';
-import { useColorScheme } from 'react-native';
-
-import { lightTokens } from '../theme/tokens/light';
-import { darkTokens } from '../theme/tokens/dark';
-import type { ColorSchemeTokens } from '../theme/type';
-
-// ---------------------------------------------------------------------------
-// Context
-// ---------------------------------------------------------------------------
-
-interface ThemeContextValue {
-  /** Resolved tokens for the active color scheme */
-  colors: ColorSchemeTokens;
-  /** Active color scheme */
-  colorScheme: 'light' | 'dark';
-}
-
-const DEFAULT_VALUE: ThemeContextValue = {
-  colors: lightTokens,
-  colorScheme: 'light',
-};
-
-const ThemeContext = createContext<ThemeContextValue>(DEFAULT_VALUE);
-
-// ---------------------------------------------------------------------------
-// Provider
-// ---------------------------------------------------------------------------
-
-interface ThemeProviderProps {
-  /** Light tokens — defaults to GDM light */
-  light?: ColorSchemeTokens;
-  /** Dark tokens — defaults to GDM dark */
-  dark?: ColorSchemeTokens;
-  /** Force a color scheme — defaults to system preference */
-  colorScheme?: 'light' | 'dark';
-  children: ReactNode;
-}
-
-export function ThemeProvider({
-                                light = lightTokens,
-                                dark = darkTokens,
-                                colorScheme: forcedScheme,
-                                children,
-                              }: ThemeProviderProps) {
-  const systemScheme = useColorScheme();
-  const colorScheme: 'light' | 'dark' =
-    forcedScheme ?? (systemScheme === 'dark' ? 'dark' : 'light');
-
-  const value = useMemo<ThemeContextValue>(
-    () => ({
-      colors: colorScheme === 'dark' ? dark : light,
-      colorScheme,
-    }),
-    [light, dark, colorScheme],
-  );
-
-  return (
-    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Hook
-// ---------------------------------------------------------------------------
-
-/**
- * Returns resolved color tokens for the active theme and color scheme.
- * Falls back to light tokens when used outside a ThemeProvider.
- */
-export function useTheme(): ThemeContextValue {
-  return useContext(ThemeContext);
-}

package/src/index.ts

@@ -1,23 +0,0 @@
-// Public API — re-export all components, types, and utilities from this file
-
-// Theme
-export { ThemeProvider, useTheme } from './context/ThemeContext'
-export { lightTokens } from './theme/tokens/light'
-export { darkTokens } from './theme/tokens/dark'
-export type {
-  ColorMode,
-  ColorSchemeTokens,
-  ColorTheme,
-  BackgroundTokens,
-  TextTokens,
-  BorderTokens,
-  ShadowTokens,
-  StatusTokens,
-  ButtonTokens,
-  InteractiveVariantTokens,
-  InteractiveStateTokens,
-} from './theme/type'
-
-// Components
-export { Button } from './components/Button'
-export type { ButtonProps, ButtonVariant, ButtonSize, ButtonContent } from './components/Button'

package/src/theme/index.ts

@@ -1,20 +0,0 @@
-// Provider + hook
-export { ThemeProvider, useTheme } from '../context/ThemeContext';
-
-// Base tokens (useful for consumer apps building their own theme)
-export { lightTokens } from './tokens/light';
-export { darkTokens } from './tokens/dark';
-
-// Types
-export type {
-  ColorTheme,
-  ColorSchemeTokens,
-  BackgroundTokens,
-  TextTokens,
-  BorderTokens,
-  ShadowTokens,
-  StatusTokens,
-  ButtonTokens,
-  InteractiveVariantTokens,
-  InteractiveStateTokens,
-} from './type';