fedemartinm / fast-styles Goto Github PK

Describe the bug
Typescript error on using styled component

To Reproduce
Reproducible example

import { styled } from "@fast-styles/react";
import { View } from "react-native";

const StyledView = () => {
  return styled(View, {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "red",
  });
};

export default StyledView;

Expected behavior
No error expected.

Environment
"@fast-styles/babel-plugin": "^0.2.3",
"@fast-styles/react": "^0.2.9",
"expo": "~49.0.8",
"expo-status-bar": "~1.6.0",
"react": "18.2.0",
"react-native": "0.72.4"

Describe the bug
I was testing the package and I found that there is no way to pass the ref to the original component.

There is a ticket, There's no way to pass a ref to the styled result
The PR seems to be merged but those changes are not released yet.

Is there any plans to release that change?

Quick fix in the tests with

  // return fast styled component
  return React.forwardRef((props:WithStyles<Props> | VariantsProps<Variants> | StyleProps<Binds>, ref)=>{
    const key = resolveKey(props);

Environment

• @fast-styles/react version 0.2.9

Describe the bug
The fast-styles-runtime-next rule doesn't work in this case

To Reproduce

//fast-styles-runtime-next
export const SurfaceView = styled(View, {...})

Expected behavior
A clear and concise description of what you expected to happen.

Environment

• @fast-styles/babel-plugin version 0.2.3

Describe the bug
Unable to assign children to a styled component.

import { defaultTheme, styled } from "@fast-styles/react";
import { View } from "react-native";

export const StyledView = styled(View, {
  flex: 1,
  justifyContent: "center",
  alignItems: "center",
  backgroundColor: "red",
  variants: {
    mode: {
      light: {
        color: defaultTheme.tokens.$textDefault,
      },
      dark: {
        color: defaultTheme.tokens.$textLight,
      },
    },
  },
});

export default function App() {
  const [mode] = useMode();

  return (
    <ModeProvider>
      <View style={styles.container}>
        <Text>Open up App.tsx to start working on your app!</Text>
        <StyledView mode={mode}>
          <Text>Styled View</Text>
        </StyledView>
        <StatusBar style="auto" />
      </View>
    </ModeProvider>
  );
}

Type 'Element' is not assignable to type 'string | number | OpaqueColorValue | AnimatedNode | Readonly<{ width: number; height: number; }> | (PerpectiveTransform | ... 11 more ... | MatrixTransform)[] | number[] | null | undefined'.ts(2322)

To Reproduce
Reproducible example

Expected behavior
No ts errors

Environment
"@fast-styles/babel-plugin": "^0.2.3",
"@fast-styles/react": "^0.2.9",
"expo": "~49.0.8",
"expo-status-bar": "~1.6.0",
"react": "18.2.0",
"react-native": "0.72.4"

• Add support for theming
• Add support for design tokens
• Include a set of basic components as a showcase of the library
• Conduct benchmarks with other libraries
• Introduce hooks as an alternative to styled components

The following code works correctly with the runtime implementation but not with the Babel implementation.

const SurfaceView = styled(View, {
  variants: {
    elevation: {
      0: {},
      1: {},
    }
}

It throws "Cannot create property 'message' on string 'Fast-Styles: Expected StringLiteral or Identifier"

For a scenario like this, the syntax of compound variants using '+' implies defining empty variants.

const Surface = styled(View, {
  variants: {
    elevation: {
      0: {},
      1: {},
    },
    mode: {
      light: {
        backgroundColor: "$backgroundLight",
      },
      dark: {
        backgroundColor: "$backgroundDark",
      },
    },
  },
  compoundVariants: {
    "light+1": {
      backgroundColor: "$elevationBackgroundLight",
    },
    "dark+1": {
      backgroundColor: "$elevationBackgroundDark",
    },
  }
});

This can be simplified by declaring the compound variants in this way:

const SurfaceView2 = styled(View, {
  variants: {
    mode: {
      light: {
        bg: "$backgroundLight",
      },
      dark: {
        bg: "$backgroundDark",
      },
    },
  },
  compoundVariants: [
    {
      mode: "light",
      elevation: 0,
      value: {
        bg: "$elevationBackgroundLight",
      },
    },
    {
      mode: "dark",
      elevation: 1,
      value: {
        bg: "$elevationBackgroundDark",
      },
    },
  ],
})

Describe the bug
The babel-plugin doesn't select default variants if the defaultVariants field is missing in the styled object.

To Reproduce

export const CardRoot = styled(View, {
  borderRadius: theme.borderRadiuses.$lg,
  padding: theme.spacings.$6,
  variants: {
    colorScheme: {
      green: {
        backgroundColor: theme.colors.$green3,
      },
    },
  },
  // try removing this defaultVariants: {},
});

Environment

• @fast-styles/babel-plugin version 0.2.3

Describe the bug
Typescript error using useMode();

To Reproduce
Implementing the modes guide

Reproducible example

import { ModeProvider, useMode } from "@fast-styles/react";
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import StyledView from "./StyledView";

export default function App() {
  const [mode] = useMode();

  return (
    <ModeProvider>
      <View style={styles.container}>
        <Text>Open up App.tsx to start working on your app!</Text>
        <StyledView mode={mode}>
          <Text>Styled View</Text>
        </StyledView>
        <StatusBar style="auto" />
      </View>
    </ModeProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Expected behavior
Typescript errors should not happen

Environment
"@fast-styles/babel-plugin": "^0.2.3",
"@fast-styles/react": "^0.2.9",
"expo": "~49.0.8",
"expo-status-bar": "~1.6.0",
"react": "18.2.0",
"react-native": "0.72.4"

Describe the bug

pnpm add @fast-styes/react
../..                                    |  WARN  `node_modules` is present. Lockfile only installation will make it out-of-date
 ERR_PNPM_FETCH_404  GET https://registry.npmjs.org/@fast-styes%2Freact: Not Found - 404

This error happened while installing a direct dependency of xxx/apps/native

@fast-styes/react is not in the npm registry, or you have no permission to fetch it.

No authorization header was set for the request.
../..                                    | Progress: resolved 0, reused 1, downloaded 0, added 0

To Reproduce

pnpm add @fast-styes/react @fast-styes/babel-plugin

Expected behavior
Should be able to install @fast-styes/react @fast-styes/babel-plugin using pnpm

Environment

• @fast-styles/babel-plugin version latest
• @fast-styles/react version latest
• react-native version 0.72.4
• expo version 49.0.8