autocomplete not working

[emdile]

I don't get autocomplete with typescript.

typescript 5.1.6 expo 50.0.6 dripsy 4.3.4

config for dripsy

No autocomplete with theme type

[nandorojo]

Does commenting out any of the fields help? #297 seems related

[nandorojo]

Please share your full theme

[emdile]

Please share your full theme

Is in light.ts file

import { makeTheme } from 'dripsy';

// Palette #CACACA44
const p = {
    white: 'white',
    black: 'black',
    gray: {
        '50': '#f9fafb',
        '100': '#f3f4f6',
        '200': '#e5e7eb',
        '300': '#d1d5db',
        '400': '#9ca3af',
        '500': '#6b7280',
        '600': '#4b5563',
        '700': '#374151',
        '800': '#1f2937',
        '900': '#111827',
        '950': '#030712',
    },
    zinc: {
        '50': '#fafafa',
        '100': '#f4f4f5',
        '200': '#e4e4e7',
        '300': '#d4d4d8',
        '400': '#a1a1aa',
        '500': '#71717a',
        '600': '#52525b',
        '700': '#3f3f46',
        '800': '#27272a',
        '900': '#18181b',
        '950': '#09090b',
    },
    red: '#DC2626',
    blue: 'blue',
    yellow: 'yellow',
    paper00: '#ffffff',
    paper10: '#f5f5f4',
    paper20: '#e6e6e6',
    paper100: '#aeaeae',
    paper200: '#CACACA77',
    paper300: '#767577',
    paper900: '#202020',
    blue1: '#3f89c6',
    blue2: '#2185d0',
    blue3: '#57E2E5',
    green1: '#4ADE80',
    green2: '#16A34A',
    orange1: '#FED7AA',
    orange2: '#F29137',
    navy20: '#171a21',
    navy900: '#b9babc',
};

const theme = makeTheme({
    // types: {
    //  onlyAllowThemeValues: 'always',
    // },
    colors: {
        white: p.white,
        black: p.black,
        red: p.red,
        blue: p.blue,
        yellow: p.yellow,
        gray: p.gray,
        zinc: p.zinc,
        green: {
            1: p.green1,
            2: p.green2,
        },
        orange: {
            $1: p.orange1,
            $2: p.orange2,
        },

        $primary: p.blue1,
        $secondary: p.orange2,
        $accent: p.blue3,
        $background: p.paper10,
        $elementBackground: p.paper00,
        $foreground: p.paper900,
        $liteForeground: p.gray[700],
        $navbarBackground: p.paper10,
        $rippleColor: p.paper200,
        $borderColor: p.gray[300],
        $iconColor: p.gray[500],
        $error: 'red',
    },
    space: {
        $0: 0,
        $1: 4,
        $2: 8,
        $3: 12,
        $4: 16,
        $5: 20,
        $6: 24,
        $7: 28,
        $8: 32,
        $9: 36,
        $10: 40,
        $15: 60,
        $20: 80,
        $25: 100,
        $30: 120,
        $35: 140,
        $40: 160,
    },
    fontSizes: {
        xs: 12,
        sm: 14,
        md: 16,
        lg: 18,
        xl: 24,
        '2xl': 28,
        hg: 32,
    },
    radii: {
        $1: 4,
        $1m: 6,
        $2: 8,
        $3: 12,
        $4: 16,
        $5: 20,
        $6: 24,
        $7: 28,
        $8: 32,
        $9: 36,
        $10: 40,
        $32: 128,
        $35: 140,
        sm: 12,
        xl: 128,
    },
    shadows: {
        md: {
            shadowOffset: {
                width: 0,
                height: 10,
            },
            shadowOpacity: 0.8,
            shadowRadius: 14,
            elevation: 25,
            shadowColor: '$background',
        },
    },
});

export default theme;

export type Theme = typeof theme;

declare module 'dripsy' {
    interface DripsyCustomTheme extends Theme {}
}

[Elie-A-98]

Can you share where do you expect to get autocomplete ? With a comment of what you expect ?

[emdile]

Can you share where do you expect to get autocomplete ? With a comment of what you expect ?

import { shadow } from '@/contants/theme';
import { LabelInput } from '@/design/input';
import { Col, Row } from '@/design/layout';
import { Button } from '@/design/touchable';
import { H4 } from '@/design/typography';
import { SxProp, TextInput } from 'dripsy';
import { Modal } from 'react-native';

type AddFolderModalProps = {
    disabled?: boolean;
    visible: boolean;
    loading?: boolean;
    onClose: () => void;
    validate: () => void;
    handleOnChange: (t: string, field: string) => void;
};

export const AddFolderModal = ({
    disabled,
    validate,
    visible,
    onClose,
    handleOnChange,
}: AddFolderModalProps) => {
    return (
        <Modal
            animationType="fade"
            transparent={true}
            visible={visible}
            onRequestClose={() => {
                onClose();
            }}
        >
            <Col
                sx={{
                    flex: 1,
                    justifyContent: 'center',
                    alignItems: 'center',
                }}
                style={{ backgroundColor: '#00000011' }}
            >
                <Col
                    sx={{
                        backgroundColor: 'white',
                        padding: 16,
                        boxShadow: 'md',
                        // ...(shadow.dark as any),
                    }}
                    // style={[shadow.dark]}
                >
                    <H4>Ajout de dossier</H4>
                    <LabelInput
                        label="Nom dossier"
                        onChangeText={(t) => handleOnChange(t, 'name')}
                    />
                    <Row
                        sx={{
                            rowGap: 8,
                            justifyContent: 'flex-end',
                        }}
                    >
                        <TextInput sx={{dis}} >Trdfdf</TextInput>
                        <Button
                            title="Annuler"
                            containerStyle={{ bg: '$background', color: '$black', mr: '$2' }}
                            onPress={onClose}
                        />
                        <Button
                            title="Sauvegarder"
                            disabled={disabled}
                            onPress={validate}
                        />
                    </Row>
                </Col>
            </Col>
        </Modal>
    );
};

my components have props of type SxProp, but no autocomplete

I tried TextInput component form dripsy, same thing

[nandorojo]

Do you have @types/react-native installed? It shouldn't be installed. Try

yarn why @types/react-native

[Elie-A-98]

Also make sure to restart ts language server after you do the interface merging

[nandorojo]

Can you also try installing dripsy@4.3.5

[emdile]

Do you have @types/react-native installed? It shouldn't be installed. Try

yarn why @types/react-native

yarn why @types/react-native
yarn why v1.22.5
[1/4] Why do we have the module "@types/react-native"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "@types/react-native@0.73.0"
info Has been hoisted to "@types/react-native"
info This module exists because it's specified in "devDependencies".
info Disk size without dependencies: "20KB"
info Disk size with unique dependencies: "75.79MB"
info Disk size with transitive dependencies: "212.65MB"
info Number of shared dependencies: 216
Done in 3.00s.

[emdile]

Can you also try installing dripsy@4.3.5

No change

[emdile]

Also make sure to restart ts language server after you do the interface merging

I did that

[Elie-A-98]

Try removing @types/react-native and restart ts languagr server again. Basiclly don't let ts use the types from @types/react-native

[emdile]

Try removing @types/react-native and restart ts languagr server again. Basiclly don't let ts use the types from @types/react-native

No change. I don't understand. In my solito project it is work with: dripsy 4.3.3 typscript 5.1.3

but in simple expo project with same config it is not work.

[Elie-A-98]

I tried it with an expo project as well, and it works fine for me. Can you publish a minimal reproducable example ?

[emdile]

I decided to create a new expo project, I installed dripsy and created the theme it worked. Then I copied the code from the old project and everything works. I do not know why.

Thank you for the time you gave me.