optimized-react-component-library-xyz123

Ett modernt, best practice React-komponentbibliotek med TypeScript. Förberett för npm-publicering.

Funktioner

• TypeScript
• ESLint & Prettier
• Vitest för tester
• tsup för bundling
• Exempelkomponenter: TextInput, Checkbox
• Klar för npm publish

Komponenter

TextInput

En standard textinput med props:

• value: string (obligatorisk)
• onChange: (event) => void (obligatorisk)
• placeholder?: string

Exempel:

import { TextInput } from 'optimized-react-component-library-xyz123';

<TextInput value={text} onChange={handleChange} placeholder="Skriv här" />

Checkbox

En standard checkbox med props:

• checked: boolean (obligatorisk)
• onChange: (event) => void (obligatorisk)
• label?: string

Exempel:

import { Checkbox } from 'optimized-react-component-library-xyz123';

<Checkbox checked={isChecked} onChange={handleCheck} label="Godkänn villkor" />

TextFieldStandard

En avancerad textfält-komponent med stöd för validering, preview och extra attribut. Props (via TextFieldStandardProps):

• question: IQuestion (obligatorisk)
• isTouched: (event, question) => void (obligatorisk)
• showPreview?: boolean
• activatedLanguage?: string

Exempel:

import TextFieldStandard from 'optimized-react-component-library-xyz123/NewInputComponentStandard/TextFieldStandard/TextFieldStandard';

<TextFieldStandard
   question={question}
   isTouched={handleTouched}
   showPreview={false}
   activatedLanguage="sv"
/>

TextAreaStandard

En textarea-komponent med liknande props som TextFieldStandard.

Exempel:

import TextAreaStandard from 'optimized-react-component-library-xyz123/NewInputComponentStandard/TextAreaStandard/TextAreaStandard';

<TextAreaStandard
   question={question}
   isTouched={handleTouched}
   showPreview={false}
   activatedLanguage="sv"
/>

Kom igång

1. Installera beroenden:

   npm install

2. Bygg biblioteket:

   npm run build

3. Kör tester:

   npm test

4. Lint och formatera:

   npm run lint
   npm run format

5. Publicera till npm:
   • Uppdatera fält i package.json (name, author, repository)
   • Kör:

     npm publish --access public