@oslokommune/punkt-react 0.20.21 → 0.22.2

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.22.2](https://github.com/oslokommune/punkt/compare/v0.22.1...v0.22.2) (2023-02-26)
+
+
+### Bug Fixes
+
+* **react:** Sett opp react-lib og publiseringsflyter ([#660](https://github.com/oslokommune/punkt/issues/660)) ([1bb89c7](https://github.com/oslokommune/punkt/commit/1bb89c764e1fd0e100cd7c2d6d820d958273609e))

package/CONTRIBUTING.md

@@ -0,0 +1,67 @@
+## Hvordan bidra - React ⭐
+
+Vi er veldig happy med at du vurderer å bidra! Om du er usikker på noe som helst,
+ta kontakt. Eller bare send inn den buggen eller PRen uansett. Verste som skjer
+er at vi høflig ber deg endre på noe. **Vi setter pris på alle hyggelige bidrag!**
+
+Vi oppfordrer deg til å starte med å lese vår 
+[overordnede guide for å bidra](/kom-i-gang/bidra/).
+
+👋 Happy coding!
+
+## 📝 Forutsetninger
+- nodejs 16.15
+- Kunnskap om [Sass (SCSS)](https://sass-lang.com/) og [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS).
+- Forståelse av [BEM-navnekonvensjoner](http://getbem.com/) som designsystemet følger.
+- Noen skal ha designet komponenten i [Figma](https://www.figma.com/file/Eej5jm3jIUjeMfzLE0aOTB/Punkt---Origo-designsystem?node-id=0%3A1&t=VDbEaltk80wYiYn3-0) (Krever innlogging og tilgang).
+
+Aller først må du konfigurere git-hooks slik at scripts kjøres ved commits, som for eksempel et script som kopierer innhold fra readme og contributing til dokumentasjonsnettsiden.
+
+Sett opp git hooks:
+
+```sh
+git config core.hooksPath scripts/git-hooks
+```
+
+### Lerna
+
+Punkt er et monorepo og bruker `lerna`. Det betyr at alle kommandoer kjører
+fra repoets rot, og ikke i subrepoene.
+
+Et utdrag fra rot-package.json viser noen scripts som er satt opp for å forenkle
+utvikling i dette subrepoet:
+
+```sh
+  "scripts": {
+    "build-react": "npx lerna run build --scope=@oslokommune/punkt-react",
+    "build-react-app": "npx lerna run build-app --scope=@oslokommune/punkt-react",
+    "dev-react": "npx lerna run dev --scope=@oslokommune/punkt-react",
+  }
+```
+
+### Figma
+Sørg for at noen har designet komponenten i [Figma](https://www.figma.com/file/Eej5jm3jIUjeMfzLE0aOTB/Punkt---Origo-designsystem?node-id=0%3A1&t=VDbEaltk80wYiYn3-0)
+(Krever innlogging og tilgang).
+
+## 🛠️ Gjør arbeidet
+Kod som om livet ditt avhenger av det, men ha det gøy mens du gjør det!
+
+## 🤝 Lag PR
+Når du er klar for en PR skriv din GitHub-message som sier hva som er gjort, og evt issue nummer.
+
+Vi bruker [Conventional Commits](https://www.conventionalcommits.org/) for å beskrive commits gjennom
+noen regler. Ingen fare om du ikke følger den, vi tar en gjennomgang og evt justerer 😎.
+
+```sh
+fix(react): #NR Rett feil på alert-komponenten              # med issuenummer
+fix(react): Rett feil på alert-komponenten                  # patcher en bug i koden (patch i Semantic Versioning)
+feat(react): Legg til funksjonalitet                        # ny funksjonalitet i koden (minor i Semantic Versioning)
+feat(react)!: Legg til funksjonalitet og endre eksisterende # breaking change i koden (major i Semantic Versioning)
+docs: Endre dokumentasjon                                   # Endring i dokumentasjon
+```
+
+## 🔢 Publisering og versjonering
+Vi tar oss av publisering av pakken og versjonering.
+
+Punkt bruker [Semantic Versioning 2.0.0](https://semver.org/spec/v2.0.0.html) for versjonering av pakkene.
+

package/LICENSE

@@ -1,22 +1,21 @@
 MIT License
 
-Copyright (c) 2021-present Oslo kommune, Team Designsystem
+Copyright (c) 2023-present Oslo kommune, Oslo Origo
 
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
 
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,37 +1,50 @@
-## Bruk av @oslokommune/punkt-react
+## Bruk av punkt-react
 
 <a href="https://www.npmjs.com/package/@oslokommune/punkt-react" target="_blank"><img src="https://img.shields.io/npm/v/@oslokommune/punkt-react?logo=react&label=react&style=for-the-badge&color=61dafb" alt="React komponenter" /></a>
 
-Dette repoet inneholder Punkt sine UI-komponenter for React. Komponentene er laget for å fungere sammen med CSS fra designsystemet `@oslokommune/punkt-css`.
+Dette repoet inneholder Punkt sine UI-komponenter for React. Komponentene er laget for å fungere sammen med `@oslokommune/punkt-assets` og `@oslokommune/punkt-css`.
 
-## Forutsetninger
+Se punkt-react i bruk i en [Vite-app med React og TypeScript](https://stackblitz.com/edit/vitejs-vite-ep2eyk?file=src/App.tsx).
+
+## 📝 Forutsetninger
 
 Peer dependencies: 
 - nodejs `16.15`
-- react `>= 16`
-- @oslokommune/punkt-css `>= 0.20.0`
+- react `>= 18`
+- @oslokommune/punkt-assets `>= 1.0`
+- @oslokommune/punkt-css `>= 1.0`
 
-## 📄 Dokumentasjon [UNDER ARBEID]
+## 🚀 Kom i gang - npm
 
-Hver komponent vil være dokumentert på 
-[nettsiden til designsystemet](https://punkt.oslo.kommune.no),
-på en stadig bedre måte.
+### 1. Installer komponentbiblioteket
 
-## 🚀 Kom i gang [UNDER ARBEID]
+```sh
+npm add @oslokommune/punkt-react
+```
 
-Vi jobber med denne!
+### 2. Importer komponentene
 
-## Versjonering
+```js
+// src/App.tsx
 
-Punkt bruker [Semantic Versioning 2.0.0](https://semver.org/spec/v2.0.0.html) for versjonering av pakkene.
+import { PktButton, PktInput } from "@oslokommune/punkt-react";
 
-Mens vi er i en beta-fase, versjonering vil følge dette mønsteret: **v0.Y.Z**, hvor
+...
 
-- **Y**: Major (breaking changes)
-- **Z**: Minor eller patch
+  <PktInput label="First name" id="firstName" />
+  <PktButton skin="primary" variant="icon-left" iconName="user">
+    Testbutton
+  </PktButton>
 
-## 👮 Lisens
+```
+
+## 🧩 Komponentbiblioteket
+For beskrivelse av hvordan ta i bruk hver enkelt komponent se [om komponenter](/komponenter/om-komponenter).
 
+## 🔢 Versjonering
+Punkt bruker [Semantic Versioning 2.0.0](https://semver.org/spec/v2.0.0.html) for versjonering av pakkene.
+
+## 👮 Lisens
 `Punkt` er distribuert under [MIT-lisens](https://github.com/oslokommune/punkt/blob/main/packages/react/LICENSE) for åpen kildekode.
 
-![NPM License](https://img.shields.io/npm/l/@oslokommune/punkt-css?style=for-the-badge)
+![NPM License](https://img.shields.io/npm/l/@oslokommune/punkt-react?style=for-the-badge)

package/dist/button/Button.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface IPktButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    iconName?: string;
+    mode?: 'light' | 'dark';
+    size?: 'small' | 'medium' | 'large';
+    skin?: 'primary' | 'secondary' | 'tertiary' | 'flat' | 'primary-confirm';
+    state?: 'normal' | 'focus' | 'hover' | 'active';
+    variant?: 'label-only' | 'icon-left' | 'icon-right' | 'icon-only';
+}
+export declare const PktButton: React.FC<IPktButton>;

package/dist/header/Header.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+type HeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+    logoLink?: string;
+    isLoggedIn?: boolean;
+    representing?: string;
+    canChangeRepresentation?: boolean;
+    showLogInButton?: boolean;
+    onLogIn?: () => void;
+    onLogOut?: () => void;
+    onChangeRepresentation?: () => void;
+};
+export declare const PktHeader: React.FC<HeaderProps>;
+export {};

package/dist/icon/Icon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface IPktIcon extends React.SVGProps<SVGSVGElement> {
+    name: string;
+    viewBox?: string;
+}
+export declare const PktIcon: React.FC<IPktIcon>;
+export {};

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { PktButton } from './button/Button';
+export { PktHeader } from './header/Header';
+export { PktInput } from './input/Input';
+export { PktTextarea } from './textarea/Textarea';
+export { PktRadio } from './radio/Radio';
+export { PktRadioGroup } from './radioGroup/RadioGroup';
+export { PktTable } from './table/Table';
+export { PktTableData } from './table/TableData';
+export { PktTableHeader } from './table/TableHeader';

package/dist/input/Input.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /** The input's label */
+    label?: string;
+    /** The input's id */
+    id: string;
+}
+/**
+ * Input component
+ * @param {string} label - Label for the input
+ * @param {string} id - Id for the input
+ * @param {string} validationMessage - Validation message for the input
+ * @param {React.InputHTMLAttributes<HTMLInputElement>} props - Other props to pass to the input
+ * @returns {React.ReactElement} - React element
+ *
+ * @example
+ * <Input label="First name" id="firstName" validationMessage="First name is required" />
+ *
+ */
+export declare const PktInput: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export {};