alouette 7.0.0-beta.2 → 7.0.0-beta.21

package/src/components/feedback/Message.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { VStack } from "../primitives/stacks";
 import { Story } from "../story-components/Story";
 import type { MessageProps } from "./Message";
 import { Message } from "./Message";
-import { VStack } from "../primitives/stacks";
 
 type ThisStory = StoryObj<typeof Message>;
 
@@ -45,7 +45,7 @@ export const MessageStory: ThisStory = {
       </Story.Section>
       <Story.Section title="Edge Cases">
         <VStack gap="$1">
-          <Message theme="info" textCentered>
+          <Message textCentered theme="info">
             "textCentered" Example Message with very very very very very very
             very very very very very very very very very very very very very
             very very very long text

package/src/components/feedback/Message.tsx

@@ -1,13 +1,13 @@
 import { View, styled } from "@tamagui/core";
+import { XRegularIcon } from "alouette-icons/phosphor-icons";
 import type { ComponentProps, ReactNode } from "react";
+import { IconButton } from "../actions/IconButton";
+import { Box } from "../containers/Box";
 import { Icon } from "../primitives/Icon";
-import { Frame } from "../containers/Frame";
 import { Typography } from "../typography/Typography";
 import { FeedbackIcon } from "./FeedbackIcon";
-import { IconButton } from "../actions/IconButton";
-import { XRegularIcon } from "../../phosphor-icons";
 
-export const MessageFrame = styled(Frame, {
+export const MessageFrame = styled(Box, {
   name: "MessageFrame",
   alignItems: "center",
   withBackground: true,

package/src/components/forms/InputText.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Story } from "../story-components/Story";
-import { InputText } from "./InputText";
 import { StoryGrid } from "../story-components/StoryGrid";
+import { InputText } from "./InputText";
 
 export default {
   title: "alouette/forms/InputText",
@@ -23,9 +23,9 @@ export const InputTextStory: StoryObj = {
         ).map((theme) => (
           <Story.SubSection
             key={theme}
+            withBackground
             title={theme}
             theme={theme}
-            withBackground
           >
             <StoryGrid.Row flexWrap>
               {(

package/src/components/forms/InputText.tsx

@@ -1,3 +1,4 @@
+import type { GetProps } from "@tamagui/core";
 import { styled } from "@tamagui/core";
 import { TextInput } from "react-native";
 import * as variants from "../containers/variants";
@@ -28,6 +29,10 @@ export const InputText = styled(StyledInputText, {
   // animation: "formElement", // remove all style ?
 });
 
+export type InputTextProps = GetProps<typeof InputText>;
+
 export const TextArea = styled(InputText, {
   multiline: true,
 });
+
+export type TextAreaProps = GetProps<typeof TextArea>;

package/src/components/layout/Separator.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { View } from "../primitives/View";
+import { HStack } from "../primitives/stacks";
+import { Story } from "../story-components/Story";
+import { Typography } from "../typography/Typography";
+import { Separator } from "./Separator";
+
+export default {
+  title: "alouette/layout/Separator",
+  component: Separator,
+} satisfies Meta<unknown>;
+
+export const SeparatorStory: StoryObj = {
+  name: "Separator",
+  render: () => (
+    <Story preview={<Separator />}>
+      <Story.Section title="Themes">
+        <Story.SubSection title="primary">
+          <Separator theme="primary" />
+        </Story.SubSection>
+
+        <Story.SubSection title="success">
+          <Separator theme="success" />
+        </Story.SubSection>
+      </Story.Section>
+      <Story.Section title="Vertical">
+        <HStack height={100}>
+          <View flexGrow={1}>
+            <Typography />
+          </View>
+          <Separator vertical />
+          <View flexGrow={1}>
+            <Typography />
+          </View>
+        </HStack>
+      </Story.Section>
+    </Story>
+  ),
+};

package/src/components/layout/Separator.tsx

@@ -0,0 +1,31 @@
+import type { GetProps } from "@tamagui/core";
+import { Stack, styled } from "@tamagui/core";
+
+export const Separator = styled(Stack, {
+  name: "Separator",
+  flexGrow: 1,
+  flexShrink: 0,
+  height: 0,
+  maxHeight: 0,
+  borderColor: "$borderColor",
+  borderWidth: 0,
+  borderBottomWidth: 1,
+  y: -0.5,
+
+  variants: {
+    vertical: {
+      true: {
+        height: "auto",
+        maxHeight: "auto",
+        width: 0,
+        maxWidth: 0,
+        borderBottomWidth: 0,
+        borderRightWidth: 1,
+        y: 0,
+        x: -0.5,
+      },
+    },
+  } as const,
+} as const);
+
+export type SeparatorProps = GetProps<typeof Separator>;

package/src/components/layout/list.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { VStack } from "../primitives/stacks";
+import { Story } from "../story-components/Story";
+import { Typography } from "../typography/Typography";
+import { PressableListItem } from "./list";
+
+export default {
+  title: "alouette/layout/List",
+} satisfies Meta<unknown>;
+
+export const PressableListItemStory: StoryObj = {
+  name: "List",
+  render: () => (
+    <Story
+      preview={
+        <VStack>
+          <PressableListItem onPress={() => {}}>
+            <Typography>List Item</Typography>
+          </PressableListItem>
+        </VStack>
+      }
+    />
+  ),
+};

package/src/components/layout/list.tsx

@@ -0,0 +1,30 @@
+import { CaretRightRegularIcon } from "alouette-icons/phosphor-icons";
+import type { ReactNode } from "react";
+import { Pressable } from "react-native";
+import { Icon } from "../primitives/Icon";
+import { View } from "../primitives/View";
+import { HStack, Stack } from "../primitives/stacks";
+
+export interface PressableListItemProps {
+  children: ReactNode;
+  onPress: () => void;
+}
+export function PressableListItem({
+  children,
+  onPress,
+}: PressableListItemProps): ReactNode {
+  return (
+    <Pressable onPress={onPress}>
+      <HStack
+        justifyContent="space-between"
+        paddingHorizontal="$4"
+        paddingVertical="$3"
+      >
+        <View>{children}</View>
+        <Stack justifyContent="center">
+          <Icon icon={<CaretRightRegularIcon />} size={20} />
+        </Stack>
+      </HStack>
+    </Pressable>
+  );
+}

package/src/components/primitives/Icon.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import * as AllPhosphorIcons from "../../phosphor-icons";
+import * as AllPhosphorIcons from "alouette-icons/phosphor-icons";
 import { Story } from "../story-components/Story";
 import { Icon } from "./Icon";
 

package/src/components/primitives/Icon.tsx

@@ -2,14 +2,14 @@ import type { ColorTokens, GetProps, Variable } from "@tamagui/core";
 import { useStyle } from "@tamagui/core";
 import type { ReactElement, ReactNode } from "react";
 import type { OpaqueColorValue } from "react-native";
-import type { FrameProps } from "../containers/Frame";
-import { Frame } from "../containers/Frame";
+import type { BoxProps } from "../containers/Box";
+import { Box } from "../containers/Box";
 
 export interface IconProps
-  extends Exclude<GetProps<typeof Frame>, "alignSelf" | "style"> {
+  extends Exclude<GetProps<typeof Box>, "alignSelf" | "style"> {
   icon: ReactElement;
   color?: ColorTokens | OpaqueColorValue | Variable<any> | undefined;
-  align?: FrameProps["alignSelf"];
+  align?: BoxProps["alignSelf"];
   contrast?: boolean;
   size?: number;
 }
@@ -33,14 +33,8 @@ export function Icon({
   // const clonedIcon = cloneElement(icon, { color: style.color });
 
   return (
-    <Frame
-      {...props}
-      centered
-      alignSelf={align}
-      size={size}
-      style={style as any}
-    >
+    <Box {...props} centered alignSelf={align} size={size} style={style as any}>
       {icon}
-    </Frame>
+    </Box>
   );
 }

package/src/components/primitives/ScrollView.ts

@@ -1,4 +1,5 @@
-import { GetProps, styled } from "@tamagui/core";
+import type { GetProps } from "@tamagui/core";
+import { styled } from "@tamagui/core";
 import { ScrollView as ScrollViewNative } from "react-native";
 import { fullscreenStyle } from "./createVariants";
 

package/src/components/primitives/createVariants.ts

@@ -29,11 +29,11 @@ export const getBorderAdditionalInteraction = ({
         return {
           borderColor: `$${prefix}.borderColor:hover`,
         };
-      case `press`:
+      case "press":
         return {
           borderColor: `$${prefix}.borderColor:press`,
         };
-      case `focus`:
+      case "focus":
         return {
           borderColor: `$${prefix}.borderColor:focus`,
         };
@@ -57,6 +57,7 @@ export const getBorderAdditionalInteraction = ({
   } as const;
 };
 
+// eslint-disable-next-line complexity
 export const getBackgroundAdditionalInteraction = ({
   internalForcedPseudoState,
   disabled,
@@ -66,7 +67,8 @@ export const getBackgroundAdditionalInteraction = ({
   const prefix =
     interactive === "text"
       ? "interactive.forms"
-      : `interactive.${variant || "contained"}`;
+      : // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+        `interactive.${variant || "contained"}`;
 
   if (disabled) {
     return {
@@ -80,11 +82,11 @@ export const getBackgroundAdditionalInteraction = ({
         return {
           backgroundColor: `$${prefix}.backgroundColor:hover`,
         };
-      case `press`:
+      case "press":
         return {
           backgroundColor: `$${prefix}.backgroundColor:press`,
         };
-      case `focus`:
+      case "focus":
         return {
           backgroundColor: `$${prefix}.backgroundColor:focus`,
         };

package/src/components/primitives/stacks.stories.tsx

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { Box } from "../containers/Box";
 import { Story } from "../story-components/Story";
+import { Typography } from "../typography/Typography";
 import { View } from "./View";
 import { HStack, VStack, Stack } from "./stacks";
-import { Typography } from "../typography/Typography";
-import { Frame } from "../containers/Frame";
 
 export default {
   title: "alouette/Primitives/Stacks",
@@ -36,22 +36,22 @@ export const StacksStory: StoryObj = {
       </Story.Section>
       <Story.Section title="HStack with gap">
         <HStack theme="primary" gap="$20">
-          <Frame centered withBackground flexGrow={1}>
+          <Box centered withBackground flexGrow={1}>
             <Typography contrast>1</Typography>
-          </Frame>
-          <Frame centered withBackground flexGrow={1}>
+          </Box>
+          <Box centered withBackground flexGrow={1}>
             <Typography contrast>2</Typography>
-          </Frame>
+          </Box>
         </HStack>
       </Story.Section>
       <Story.Section title="VStack with gap">
         <VStack theme="primary" gap="$20" alignItems="flex-start">
-          <Frame centered withBackground flexGrow={1}>
+          <Box centered withBackground flexGrow={1}>
             <Typography>1</Typography>
-          </Frame>
-          <Frame centered backgroundColor="$color.primary.9" flexGrow={1}>
+          </Box>
+          <Box centered backgroundColor="$color.primary.9" flexGrow={1}>
             <Typography>2</Typography>
-          </Frame>
+          </Box>
         </VStack>
       </Story.Section>
       <Story.Section title="VStack in base, HStack in large">
@@ -62,12 +62,12 @@ export const StacksStory: StoryObj = {
           gap="$20"
           alignItems="flex-start"
         >
-          <Frame centered withBackground flexGrow={1}>
+          <Box centered withBackground flexGrow={1}>
             <Typography>1</Typography>
-          </Frame>
-          <Frame centered backgroundColor="$color.primary.9" flexGrow={1}>
+          </Box>
+          <Box centered backgroundColor="$color.primary.9" flexGrow={1}>
             <Typography>2</Typography>
-          </Frame>
+          </Box>
         </Stack>
       </Story.Section>
     </Story>

package/src/components/primitives/stacks.ts

@@ -13,12 +13,8 @@ export const Stack = styled(View, {
   variants: {
     ...variants,
     type: {
-      h: {
-        flexDirection: "row",
-      },
-      v: {
-        flexDirection: "column",
-      },
+      h: { flexDirection: "row" },
+      v: { flexDirection: "column" },
     },
   } as const,
 });

package/src/components/story-components/Story.tsx

@@ -1,5 +1,5 @@
-import type { ReactNode } from "react";
 import { styled } from "@tamagui/core";
+import type { ReactNode } from "react";
 import type { Except } from "type-fest";
 import type { VStackProps } from "../primitives/stacks";
 import { VStack } from "../primitives/stacks";

package/src/components/story-components/StoryGrid.tsx

@@ -3,7 +3,6 @@ import { Children } from "react";
 import { Platform } from "react-native";
 import { View } from "../primitives/View";
 import { VStack } from "../primitives/stacks";
-import type { TypographyProps } from "../typography/Typography";
 import { StoryTitle } from "./StoryTitle";
 
 export interface StoryGridRowProps {

package/src/components/story-components/StoryTitle.tsx

@@ -1,3 +1,4 @@
+import type { GetProps } from "@tamagui/core";
 import { styled } from "@tamagui/core";
 import { Typography } from "../typography/Typography";
 
@@ -17,3 +18,5 @@ export const StoryTitle = styled(Typography, {
     level: 1,
   },
 } as const);
+
+export type StoryTitleProps = GetProps<typeof StoryTitle>;

package/src/components/typography/Typography.tsx

@@ -48,6 +48,8 @@ export const TypographyParagraph = styled(Typography, {
   family: "body",
 } as const);
 
+export type TypographyParagraphProps = GetProps<typeof TypographyParagraph>;
+
 const TypographySizeContext = createContext<TypographyProps["size"]>(undefined);
 
 export const TypographyWithContext = Typography.styleable(

package/src/components/windowSize/SwitchBreakpoints.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { BreakpointNameEnum } from "../../config/Breakpoints";
-import { StoryGrid } from "../story-components/StoryGrid";
 import { Story } from "../story-components/Story";
+import { StoryGrid } from "../story-components/StoryGrid";
 import { Typography } from "../typography/Typography";
 import {
   SwitchBreakpointsUsingDisplayNone,

package/src/config/animations.ts

@@ -14,3 +14,7 @@ export const animations = createAnimations({
     stiffness: 250,
   },
 });
+
+if ("navigator" in global) {
+  throw new Error("animations native is loaded in web");
+}

package/src/config/animations.web.ts

@@ -4,3 +4,4 @@ export const animations = createAnimations({
   fast: "ease-in 150ms",
   formElement: "ease-in 600ms",
 });
+console.log("animations: web");

package/src/config/colorScales.ts

@@ -21,12 +21,12 @@ export const createColorScale = <const T extends AlouetteColorScale>(
 ): T => colorScale;
 
 export type AlouetteColorScaleNames =
+  | "danger"
   | "grayscale"
-  | "success"
   | "info"
-  | "warning"
-  | "danger"
-  | "primary";
+  | "primary"
+  | "success"
+  | "warning";
 
 export type ColorScaleTokens = {
   [K in AlouetteColorScaleNames as `${K}.${AlouetteColorScaleNumber}`]: string; //(typeof colorScales)[K][AlouetteColorScaleNumber];

package/src/config/createAlouetteFonts.ts

@@ -33,9 +33,9 @@ export const createAlouetteFonts = ({
       black: "900",
     },
     face: {
-      400: { normal: headingFontFamily + "Regular" },
-      700: { normal: headingFontFamily + "Bold" },
-      900: { normal: headingFontFamily + "Black" },
+      400: { normal: `${headingFontFamily}Regular` },
+      700: { normal: `${headingFontFamily}Bold` },
+      900: { normal: `${headingFontFamily}Black` },
     },
     size: headingFontSizes,
     lineHeight: {
@@ -54,9 +54,9 @@ export const createAlouetteFonts = ({
       black: "900",
     },
     face: {
-      400: { normal: bodyFontFamily + "Regular" },
-      700: { normal: bodyFontFamily + "Bold" },
-      900: { normal: bodyFontFamily + "Black" },
+      400: { normal: `${bodyFontFamily}Regular` },
+      700: { normal: `${bodyFontFamily}Bold` },
+      900: { normal: `${bodyFontFamily}Black` },
     },
     size: bodyFontSizes,
     lineHeight: {

package/src/config/createAlouetteTokens.ts

@@ -1,7 +1,6 @@
 import { createTokens } from "@tamagui/core";
 import type { IntRange } from "type-fest";
 import type {
-  AlouetteColorScaleNames,
   AlouetteColorScaleNumber,
   AlouetteColorScales,
 } from "./colorScales";
@@ -11,48 +10,54 @@ type NegativeAlouetteSize = `-${AlouetteSize}`;
 type AlouetteSizeRecord = Record<AlouetteSize, number>;
 type NegativeAlouetteSizeRecord = Record<NegativeAlouetteSize, number>;
 
-const createAlouetteSizes = <N extends boolean>(
+const createAlouetteSizes = <const N extends boolean>(
   spacing: number,
   negative: N,
-): N extends true ? AlouetteSizeRecord : NegativeAlouetteSizeRecord => {
+): N extends true ? NegativeAlouetteSizeRecord : AlouetteSizeRecord => {
   const MAX_SIZE = 64;
-  const sizes = {} as Partial<
-    N extends true ? AlouetteSizeRecord : NegativeAlouetteSizeRecord
-  >;
+  const sizes: Partial<
+    N extends true ? NegativeAlouetteSizeRecord : AlouetteSizeRecord
+  > = {};
   for (let size = 0; size <= MAX_SIZE; size++) {
     (sizes as any)[negative ? `-${size}` : `${size}`] = size * spacing;
   }
   return sizes as N extends true
-    ? AlouetteSizeRecord
-    : NegativeAlouetteSizeRecord;
+    ? NegativeAlouetteSizeRecord
+    : AlouetteSizeRecord;
 };
 
-type ColorScaleTokens = {
-  [K in AlouetteColorScaleNames as `${K}.${AlouetteColorScaleNumber}`]: string; //(typeof colorScales)[K][AlouetteColorScaleNumber];
+type ColorScaleTokens<ColorScales extends AlouetteColorScales> = {
+  [K in string &
+    keyof ColorScales as `${K}.${AlouetteColorScaleNumber}`]: string; //(typeof colorScales)[K][AlouetteColorScaleNumber];
 };
 
-const transformColorScalesToTokens = (
-  colorScales: AlouetteColorScales,
-): ColorScaleTokens => {
+const transformColorScalesToTokens = <ColorScales extends AlouetteColorScales>(
+  colorScales: ColorScales,
+): ColorScaleTokens<ColorScales> => {
   return Object.fromEntries(
     Object.entries(colorScales).flatMap(([colorName, colorScale]) => {
       return Object.entries(colorScale).map(([scaleNumber, colorValue]) => {
         return [`${colorName}.${scaleNumber}`, colorValue];
       });
     }),
-  ) as ColorScaleTokens;
+  ) as ColorScaleTokens<ColorScales>;
 };
 
 export interface AlouetteTokensOptions {
   spacing?: number;
 }
 
-export const createAlouetteTokens = (
-  colorScales: AlouetteColorScales,
+export const createAlouetteTokens = <
+  const ColorScales extends AlouetteColorScales,
+>(
+  colorScales: ColorScales,
   { spacing = 4 }: AlouetteTokensOptions = {},
 ) => {
-  const sizes = createAlouetteSizes(spacing, false);
-  const negativeSizes = createAlouetteSizes(-spacing, true);
+  const sizes: AlouetteSizeRecord = createAlouetteSizes(spacing, false);
+  const negativeSizes: NegativeAlouetteSizeRecord = createAlouetteSizes(
+    -spacing,
+    true,
+  );
 
   return createTokens({
     color: {

package/src/config/themes.stories.tsx

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import type { Entries } from "type-fest";
+import { Box } from "../components/containers/Box";
 import { View } from "../components/primitives/View";
 import { VStack } from "../components/primitives/stacks";
-import { StoryGrid } from "../components/story-components/StoryGrid";
 import { Story } from "../components/story-components/Story";
-import { Frame } from "../components/containers/Frame";
+import { StoryGrid } from "../components/story-components/StoryGrid";
+import { WithTamaguiConfig } from "../components/story-components/WithTamaguiConfig";
 import { Typography } from "../components/typography/Typography";
 import { groupTokens } from "./utils/groupTokens";
-import { WithTamaguiConfig } from "../components/story-components/WithTamaguiConfig";
 
 type ThisStory = StoryObj<unknown>;
 
@@ -25,13 +25,9 @@ export const TokensStory: ThisStory = {
             {(Object.entries(themes) as Entries<typeof themes>).map(
               ([themeName, theme]) => (
                 <Story.Section key={themeName} title={themeName}>
-                  <Frame
-                    withBackground
-                    padding="$md"
-                    theme={themeName as string}
-                  >
+                  <Box withBackground padding="$md" theme={themeName as string}>
                     <Typography contrast>Demo</Typography>
-                  </Frame>
+                  </Box>
 
                   {groupTokens(theme).map(([groupName, tokens]) => (
                     <StoryGrid.Row key={groupName} flexWrap>