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

package/src/config/themes.ts

@@ -1,27 +1,89 @@
+/* eslint-disable camelcase */
 import type { Variable } from "@tamagui/core";
-import { createAlouetteTokens } from "./createAlouetteTokens";
-import { AlouetteColorScaleNames } from "./colorScales";
+import type { AlouetteColorScales } from "./colorScales";
+import type { createAlouetteTokens } from "./createAlouetteTokens";
 
-interface MinimalTheme {
-  backgroundColor: Variable;
-  textColor: Variable;
+// export interface MinimalRootTheme {
+//   backgroundColor: Variable<string>;
+//   textColor: Variable<string>;
+// }
+
+// export interface RootTheme {
+//   backgroundColor: Variable<string>;
+//   textColor: Variable<string>;
+// }
+
+export interface ColorTheme {
+  backgroundColor: Variable<string>;
+  textColor: Variable<string>;
+  mainColor: Variable<string>;
+  mainTextColor: Variable<string>;
+  contrastTextColor: Variable<string>;
+  borderColor: Variable<string>;
+
+  "interactive.contained.backgroundColor": Variable<string>;
+  "interactive.borderColor": Variable<string>;
+
+  "interactive.contained.backgroundColor:hover": Variable<string>;
+  "interactive.outlined.backgroundColor:hover": Variable<string>;
+  "interactive.borderColor:hover": Variable<string>;
+
+  "interactive.contained.backgroundColor:focus": Variable<string>;
+  "interactive.outlined.backgroundColor:focus": Variable<string>;
+  "interactive.borderColor:focus": Variable<string>;
+
+  "interactive.contained.backgroundColor:press": Variable<string>;
+  "interactive.outlined.backgroundColor:press": Variable<string>;
+  "interactive.borderColor:press": Variable<string>;
+
+  "interactive.contained.backgroundColor:disabled": Variable<string>;
+  "interactive.borderColor:disabled": Variable<string>;
+  "interactive.textColor:disabled": Variable<string>;
+
+  "interactive.forms.textColor": Variable<string>;
+  // "interactive.forms.backgroundColor": Variable<string>,
+  // "interactive.forms.backgroundColor:hover": Variable<string>,
+  "interactive.forms.backgroundColor:focus": Variable<string>;
+  "interactive.forms.backgroundColor:press": Variable<string>;
+  "interactive.forms.borderColor": Variable<string>;
+  "interactive.forms.borderColor:hover": Variable<string>;
+  "interactive.forms.borderColor:focus": Variable<string>;
+  "interactive.forms.borderColor:press": Variable<string>;
+  "interactive.forms.borderColor:disabled": Variable<string>;
 }
 
-const createTheme = <T extends MinimalTheme>(theme: T): T => {
-  return theme;
-};
+// export interface FullTheme extends ColorTheme, RootTheme {}
+export type FullTheme = ColorTheme;
 
-const createColorTheme = (
-  tokens: ReturnType<typeof createAlouetteTokens>,
-  colorScaleName: AlouetteColorScaleNames,
-  textColor = tokens.color.black,
-  contrastTextColor = tokens.color.white,
+// export const createRootTheme = <T extends MinimalRootTheme>(
+//   theme: T,
+// ): FullTheme => {
+//   return theme satisfies RootTheme as unknown as FullTheme;
+// };
+
+export const createColorTheme = <const ColorScales extends AlouetteColorScales>(
+  tokens: ReturnType<typeof createAlouetteTokens<ColorScales>>,
+  colorScaleName: string & keyof ColorScales,
+  backgroundColor?: Variable<string>,
+  textColor?: Variable<string>,
+  contrastTextColor?: Variable<string>,
+  // eslint-disable-next-line @typescript-eslint/max-params
 ) => {
+  const alouetteTokens: ReturnType<
+    typeof createAlouetteTokens<AlouetteColorScales>
+  > = tokens;
+  if (!backgroundColor) backgroundColor = alouetteTokens.color.white;
+  if (!textColor) textColor = alouetteTokens.color.black;
+  if (!contrastTextColor) contrastTextColor = alouetteTokens.color.white;
+
   const getColor = (scaleNumber: number) =>
     tokens.color[
-      (colorScaleName + `.${scaleNumber}`) as keyof typeof tokens.color
+      `${colorScaleName}.${scaleNumber}` as keyof typeof tokens.color
     ];
+
   return {
+    backgroundColor,
+    textColor,
     mainColor: getColor(6),
     mainTextColor: getColor(9),
     contrastTextColor,
@@ -42,9 +104,10 @@ const createColorTheme = (
     "interactive.outlined.backgroundColor:press": getColor(3),
     "interactive.borderColor:press": getColor(7),
 
-    "interactive.contained.backgroundColor:disabled": tokens.color.disabled,
-    "interactive.borderColor:disabled": tokens.color.disabled,
-    "interactive.textColor:disabled": tokens.color.contrastDisabled,
+    "interactive.contained.backgroundColor:disabled":
+      alouetteTokens.color.disabled,
+    "interactive.borderColor:disabled": alouetteTokens.color.disabled,
+    "interactive.textColor:disabled": alouetteTokens.color.contrastDisabled,
 
     "interactive.forms.textColor": textColor,
     // "interactive.forms.backgroundColor": undefined,
@@ -55,57 +118,65 @@ const createColorTheme = (
     "interactive.forms.borderColor:hover": getColor(7),
     "interactive.forms.borderColor:focus": getColor(7),
     "interactive.forms.borderColor:press": getColor(7),
-    "interactive.forms.borderColor:disabled": tokens.color.disabled,
-  };
+    "interactive.forms.borderColor:disabled": alouetteTokens.color.disabled,
+  } satisfies FullTheme;
 };
 
-export const createAlouetteThemes = (
-  tokens: ReturnType<typeof createAlouetteTokens>,
-) =>
-  ({
-    light: createTheme({
-      backgroundColor: tokens.color.white,
-      textColor: tokens.color.black,
-    }),
-    light_info: createColorTheme(tokens, "info"),
-    light_success: createColorTheme(tokens, "success"),
-    light_warning: createColorTheme(tokens, "warning"),
-    light_danger: createColorTheme(tokens, "danger"),
-    light_primary: createColorTheme(tokens, "primary"),
-
-    dark: createTheme({
-      backgroundColor: tokens.color.black,
-      textColor: tokens.color.white,
-    }),
-
-    dark_info: createColorTheme(
-      tokens,
-      "info",
-      tokens.color.black,
-      tokens.color.white,
-    ),
-    dark_success: createColorTheme(
-      tokens,
-      "success",
-      tokens.color.black,
-      tokens.color.white,
-    ),
-    dark_warning: createColorTheme(
-      tokens,
-      "warning",
-      tokens.color.black,
-      tokens.color.white,
-    ),
-    dark_danger: createColorTheme(
-      tokens,
-      "danger",
-      tokens.color.black,
-      tokens.color.white,
-    ),
-    dark_primary: createColorTheme(
-      tokens,
-      "primary",
-      tokens.color.black,
-      tokens.color.white,
+export const createAlouetteThemes = <
+  const ColorScales extends AlouetteColorScales,
+>(
+  tokens: ReturnType<typeof createAlouetteTokens<ColorScales>>,
+) => {
+  const alouetteTokens: ReturnType<
+    typeof createAlouetteTokens<AlouetteColorScales>
+  > = tokens;
+  return {
+    light: createColorTheme(
+      alouetteTokens,
+      "grayscale",
+      alouetteTokens.color.white,
+      alouetteTokens.color.black,
     ),
-  }) as const;
+    light_info: createColorTheme(alouetteTokens, "info"),
+    light_success: createColorTheme(alouetteTokens, "success"),
+    light_warning: createColorTheme(alouetteTokens, "warning"),
+    light_danger: createColorTheme(alouetteTokens, "danger"),
+    light_primary: createColorTheme(alouetteTokens, "primary"),
+
+    // dark: createRootTheme({
+    //   backgroundColor: alouetteTokens.color.black,
+    //   textColor: alouetteTokens.color.white,
+    // }),
+
+    // dark_info: createColorTheme(
+    //   alouetteTokens,
+    //   "info",
+    //   alouetteTokens.color.black,
+    //   alouetteTokens.color.white,
+    // ),
+    // dark_success: createColorTheme(
+    //   alouetteTokens,
+    //   "success",
+    //   alouetteTokens.color.black,
+    //   alouetteTokens.color.white,
+    // ),
+    // dark_warning: createColorTheme(
+    //   alouetteTokens,
+    //   "warning",
+    //   alouetteTokens.color.black,
+    //   alouetteTokens.color.white,
+    // ),
+    // dark_danger: createColorTheme(
+    //   alouetteTokens,
+    //   "danger",
+    //   alouetteTokens.color.black,
+    //   alouetteTokens.color.white,
+    // ),
+    // dark_primary: createColorTheme(
+    //   alouetteTokens,
+    //   "primary",
+    //   alouetteTokens.color.black,
+    //   alouetteTokens.color.white,
+    // ),
+  } as const;
+};

package/src/config/tokens.stories.tsx

@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { Box } from "../components/containers/Box";
 import { View } from "../components/primitives/View";
 import { HStack, VStack } from "../components/primitives/stacks";
 import { Story } from "../components/story-components/Story";
-import { Frame } from "../components/containers/Frame";
+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>;
 
@@ -44,9 +44,9 @@ export const TokensStory: ThisStory = {
             <Story.Section title="Radius">
               <HStack gap="$xs" flexWrap="wrap">
                 {(["$sm", "$md"] as const).map((proportion) => (
-                  <Frame
-                    centered
+                  <Box
                     key={proportion}
+                    centered
                     withBackground
                     borderRadius={proportion}
                     size={50}
@@ -54,7 +54,7 @@ export const TokensStory: ThisStory = {
                     margin="$4"
                   >
                     <Typography>{proportion}</Typography>
-                  </Frame>
+                  </Box>
                 ))}
               </HStack>
             </Story.Section>
@@ -62,7 +62,7 @@ export const TokensStory: ThisStory = {
             <Story.Section title="Spacings">
               <HStack gap="$xs" flexWrap="wrap" alignItems="flex-start">
                 {Object.entries(tokens.space).map(([key, value]) => (
-                  <Frame
+                  <Box
                     key={key}
                     centered
                     withBackground
@@ -74,7 +74,7 @@ export const TokensStory: ThisStory = {
                       <Typography size="xs">${key}</Typography>
                       <Typography size="xs">{value.val}</Typography>
                     </VStack>
-                  </Frame>
+                  </Box>
                 ))}
               </HStack>
             </Story.Section>

package/src/core/AlouetteDecorator.tsx

@@ -3,6 +3,7 @@ import { AlouetteProvider } from "./AlouetteProvider";
 
 // eslint-disable-next-line react/function-component-definition -- not a component
 export const AlouetteDecorator: Decorator = (storyFn, context) => (
+  // eslint-disable-next-line react/destructuring-assignment
   <AlouetteProvider tamaguiConfig={context.parameters.tamaguiConfig}>
     {storyFn(context)}
   </AlouetteProvider>

package/src/createAlouetteTamagui.ts

@@ -1,36 +1,49 @@
 import { createTamagui } from "@tamagui/core";
 import { animations } from "./config/animations";
-import {
-  createAlouetteFonts,
-  AlouetteFontsOptions,
-} from "./config/createAlouetteFonts";
+import type { AlouetteColorScales } from "./config/colorScales";
+import type { AlouetteFontsOptions } from "./config/createAlouetteFonts";
+import { createAlouetteFonts } from "./config/createAlouetteFonts";
+import type { createAlouetteTokens } from "./config/createAlouetteTokens";
 import { media } from "./config/media";
-import { createAlouetteThemes } from "./config/themes";
-import {
-  createAlouetteTokens,
-  AlouetteTokensOptions,
-} from "./config/createAlouetteTokens";
-import { AlouetteColorScales } from "./config/colorScales";
+import type { createAlouetteThemes } from "./config/themes";
 
-interface AlouetteTamaguiOptions {
-  colorScales: AlouetteColorScales;
+export { createAlouetteTokens } from "./config/createAlouetteTokens";
+
+export interface AlouetteTamaguiOptions {
   fonts?: AlouetteFontsOptions;
-  tokens?: AlouetteTokensOptions;
 }
 
-export { defaultColorScales, createColorScale } from "./config/colorScales";
+export {
+  createColorTheme,
+  createAlouetteThemes,
+  type FullTheme,
+} from "./config/themes";
+
+export {
+  defaultColorScales,
+  createColorScale,
+  type AlouetteColorScales,
+  type AlouetteColorScale,
+} from "./config/colorScales";
 
-export const createAlouetteTamagui = (options: AlouetteTamaguiOptions) => {
-  const tokens = createAlouetteTokens(options.colorScales, options.tokens);
+export const createAlouetteTamagui = <
+  const ColorScales extends AlouetteColorScales,
+  const Tokens extends ReturnType<typeof createAlouetteTokens<ColorScales>>,
+  const Themes extends ReturnType<typeof createAlouetteThemes<ColorScales>>,
+>(
+  tokens: Tokens,
+  themes: Themes,
+  options: AlouetteTamaguiOptions = {},
+) => {
   return createTamagui({
     fonts: createAlouetteFonts(options.fonts),
     tokens,
-    themes: createAlouetteThemes(tokens),
+    themes,
     media,
     animations,
     settings: {
-      allowedStyleValues: "strict",
-      autocompleteSpecificTokens: true,
+      allowedStyleValues: "somewhat-strict-web",
+      autocompleteSpecificTokens: "except-special",
     },
     components: ["alouette"],
   } as const);

package/src/index.ts

@@ -1,10 +1,53 @@
+export type { IconButtonProps } from "./components/actions/IconButton";
 export { IconButton } from "./components/actions/IconButton";
+export type { ButtonProps } from "./components/actions/Button";
+export { Button } from "./components/actions/Button";
+export type { BoxProps } from "./components/containers/Box";
+export { Box } from "./components/containers/Box";
+export type { PressableBoxProps } from "./components/containers/PressableBox";
+export { PressableBox } from "./components/containers/PressableBox";
+export type { MessageProps } from "./components/feedback/Message";
+export { Message } from "./components/feedback/Message";
+export type {
+  InputTextProps,
+  TextAreaProps,
+} from "./components/forms/InputText";
+export { InputText, TextArea } from "./components/forms/InputText";
+export type { IconProps } from "./components/primitives/Icon";
 export { Icon } from "./components/primitives/Icon";
+export type { ScrollViewProps } from "./components/primitives/ScrollView";
 export { ScrollView } from "./components/primitives/ScrollView";
+export type { ViewProps } from "./components/primitives/View";
 export { View } from "./components/primitives/View";
+export type {
+  HStackProps,
+  VStackProps,
+  StackProps,
+} from "./components/primitives/stacks";
 export { Stack, HStack, VStack } from "./components/primitives/stacks";
-export { Frame } from "./components/containers/Frame";
-export { Typography } from "./components/typography/Typography";
+export type { StoryProps } from "./components/story-components/Story";
+export { Story } from "./components/story-components/Story";
+export type { StoryContainerProps } from "./components/story-components/StoryContainer";
+export { StoryContainer } from "./components/story-components/StoryContainer";
+export { StoryDecorator } from "./components/story-components/StoryDecorator";
+export type {
+  StoryGridColProps,
+  StoryGridRowProps,
+} from "./components/story-components/StoryGrid";
+export { StoryGrid } from "./components/story-components/StoryGrid";
+export type { StoryTitleProps } from "./components/story-components/StoryTitle";
+export { StoryTitle } from "./components/story-components/StoryTitle";
+export { WithTamaguiConfig } from "./components/story-components/WithTamaguiConfig";
+export type {
+  TypographyProps,
+  TypographyParagraphProps,
+} from "./components/typography/Typography";
+export {
+  Typography,
+  TypographyWithContext,
+  TypographyParagraph,
+  TypographyParagraphWithContext,
+} from "./components/typography/Typography";
 export {
   SwitchBreakpointsUsingDisplayNone,
   SwitchBreakpointsUsingNull,
@@ -12,4 +55,8 @@ export {
 export { useCurrentBreakpointName } from "./components/windowSize/useCurrentBreakpointName";
 export { AlouetteDecorator } from "./core/AlouetteDecorator";
 export { AlouetteProvider } from "./core/AlouetteProvider";
-export { Theme } from "@tamagui/core";
+export type { GetProps, ThemeProps } from "@tamagui/core";
+export { Theme, styled, withStaticProperties } from "@tamagui/core";
+export type { SeparatorProps } from "./components/layout/Separator";
+export { Separator } from "./components/layout/Separator";
+export { PressableListItem } from "./components/layout/list";

package/.editorconfig

@@ -1,13 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# http://editorconfig.org
-
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true

package/.eslintrc.json

@@ -1,5 +0,0 @@
-{
-  "root": true,
-  "extends": ["@pob/eslint-config/root-module"],
-  "ignorePatterns": ["*.d.ts", "/dist"]
-}

package/.yo-rc.json

@@ -1,11 +0,0 @@
-{
-  "pob": {
-    "lib": {
-      "documentation": false,
-      "testing": {}
-    },
-    "project": {
-      "type": "lib"
-    }
-  }
-}