Merge pull request #36 from Opetushallitus/OK-822_paketointi

OK-822: Paketointi

.github/actions/build-storybook/action.yml

@@ -4,7 +4,6 @@ inputs:
   params:
     description: 'Additional CLI params'
     required: false
-    type: string
     default: ''
 runs:
   using: 'composite'

.github/actions/publish-package/action.yml

@@ -0,0 +1,19 @@
+name: Build and publish
+description: Build and publish package to GitHub Packages
+runs:
+  using: 'composite'
+  steps:
+    - uses: actions/setup-node@v4
+      with:
+        node-version-file: '.nvmrc'
+        registry-url: 'https://npm.pkg.github.com'
+        scope: '@opetushallitus'
+    - name: Install dependencies
+      shell: bash
+      run: npm ci --no-audit
+    - name: Build package
+      shell: bash
+      run: npm run build
+    - name: Publish to GitHub Packages
+      shell: bash
+      run: npm publish

.github/workflows/build.yml

@@ -4,11 +4,9 @@ on:
   push:
     paths-ignore:
       - '**.md'
-
 concurrency:
   group: ${{ github.head_ref || github.run_id }}
   cancel-in-progress: true
-
 env:
   AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
   AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
@@ -49,12 +47,19 @@ jobs:
           retention-days: 10
           if-no-files-found: ignore
 
-  build:
+  publish:
     needs: [check-and-test, test-playwright]
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/build-storybook
         if: github.ref == 'refs/heads/main'
       - uses: ./.github/actions/deploy-storybook
         if: github.ref == 'refs/heads/main'
+      - uses: ./.github/actions/publish-package
+        if: github.ref == 'refs/heads/main'
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/publish-package.yml

@@ -0,0 +1,15 @@
+name: Publish package
+on:
+  workflow_dispatch:
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - uses: actions/checkout@v4
+      - name: Publish to GitHub Packages
+        uses: ./.github/actions/publish-package
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -7,4 +7,5 @@ __snapshots__/__diff_output__
 .swc
 .last-run.json
 pkg
-test-results
+test-results
+dist

.husky/install.mjs

@@ -0,0 +1,6 @@
+// Skip Husky install in production and CI
+if (process.env.NODE_ENV === 'production' || process.env.CI === 'true') {
+  process.exit(0);
+}
+const husky = (await import('husky')).default;
+console.log(husky());

.husky/pre-commit

@@ -0,0 +1 @@
+./node_modules/.bin/lint-staged

.lintstagedrc.mjs

@@ -0,0 +1,9 @@
+const eslintCommand = 'eslint --fix --max-warnings=0 --no-warn-ignored';
+const prettierCommand = 'prettier --write -u';
+
+const config = {
+  '**/*.{js,mjs,cjs,jsx,ts,tsx}': [eslintCommand, prettierCommand],
+  '!**/*.{js,mjs,cjs,jsx,ts,tsx}': prettierCommand,
+};
+
+export default config;

README.md

@@ -1,9 +1,8 @@
-[![Build](https://github.com/Opetushallitus/oph-design-system/actions/workflows/build.yml/badge.svg)](https://github.com/Opetushallitus/oph-design-system/actions/workflows/build.yml)
+# OPH Design System
 
+[![Build](https://github.com/Opetushallitus/oph-design-system/actions/workflows/build.yml/badge.svg)](https://github.com/Opetushallitus/oph-design-system/actions/workflows/build.yml)
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=Opetushallitus_oph-design-system&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=Opetushallitus_oph-design-system)
 
-# OPH Design System
-
 OPH Design System (ODS) on Opetushallituksen verkkopalveluiden käyttöön tarkoitettu muotoilujärjestelmä.
 Tämä Git-säilö sisältää muotoilujärjestelmän mukaan rakennetun React-komponenttikirjaston.
 
@@ -16,12 +15,30 @@ Tämä Git-säilö sisältää muotoilujärjestelmän mukaan rakennetun React-ko
 - [Next.js](https://nextjs.org/) v14 (App router)
 - [Storybook](https://storybook.js.org/) v8
 
-## Komponenttikirjaston käyttöönotto
+## Asentaminen
+
+Versiosta 0.2.0 lähtien komponenttikirjasto on julkaistu Github Packagesiin.
+
+Asentamista varten tarvitaan todennustoken, jonka luontiohjeet löytyvät [täältä](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-personal-access-token-classic).
 
-Asenna komponenttikirjasto riippuvuutena suoraan Githubista:
+Kun token on luotu, se täytyy ottaa vielä käyttöön npm-paketeille. Lisää kotihakemistoosi `.npmrc`-tiedostoon seuraavanlainen rivi:
 
 ```
-npm i "github:opetushallitus/oph-design-system"
+//npm.pkg.github.com/:_authToken=todennustoken
+```
+
+Korvaa "todennustoken" luomasi tokenin merkkijonolla.
+
+Tämän jälkeen täytyy vielä konfiguroida npm käyttämään Github Packagesin pakettivarastoa `@opetushallitus`-skoopin paketeille. Lisää projektisi `.npmrc`-tiedostoon rivi:
+
+```
+@opetushallitus:registry=https://npm.pkg.github.com
+```
+
+Asenna komponenttikirjasto samaan tapaan kuin mikä tahansa riippuvuus:
+
+```
+npm i "@opetushallitus/oph-design-system"
 ```
 
 Varmista myös, että vertaisriippuvuudet (peer dependency) on asennettu:
@@ -36,6 +53,8 @@ Varmista myös, että vertaisriippuvuudet (peer dependency) on asennettu:
 }
 ```
 
+## Komponenttikirjaston käyttöönotto
+
 Kirjasto sisältää kaksi teema-varianttia: "oph" (sininen) ja "opintopolku" (vihreä).
 Next.js:ää käytettäessä voit ottaa teeman käyttöön juuritason layoutissa seuraavasti: