migrate styleguide attempt 2

styleguide/.editorconfig

@@ -0,0 +1,4 @@
+root = true
+
+[*.{ts,tsx,js}]
+indent_size = 2

styleguide/.github/dependabot.yml

@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "daily"

styleguide/.github/workflows/commands.yml

@@ -0,0 +1,47 @@
+name: Slash Command Dispatch
+
+on:
+  issue_comment:
+    types: [created]
+
+jobs:
+  slash-command-dispatch:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/github-script@v3
+        id: get-pr
+        with:
+          script: |
+            const request = {
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              pull_number: context.issue.number
+            }
+            core.info(`Getting PR #${request.pull_number} from ${request.owner}/${request.repo}`)
+            try {
+              const result = await github.pulls.get(request)
+              return result.data
+            } catch (err) {
+              core.setFailed(`Request failed with error ${err}`)
+            }
+      - name: Slash Command Dispatch
+        uses: peter-evans/slash-command-dispatch@v2
+        with:
+          token: ${{ secrets.BOT_TOKEN }}
+          reaction-token: ${{ secrets.BOT_TOKEN }}
+          permission: write
+          dispatch-type: workflow
+          event-type-suffix: ""
+          commands: |
+            deploy
+          static-args: |
+            comment-id=${{ github.event.comment.id }}
+            event-number=${{ github.event.issue.number }}
+            ref=${{ fromJSON(steps.get-pr.outputs.result).head.ref }}
+      - name: Edit comment with error message
+        if: steps.scd.outputs.error-message
+        uses: peter-evans/create-or-update-comment@v1
+        with:
+          comment-id: ${{ github.event.comment.id }}
+          body: |
+            > ${{ steps.scd.outputs.error-message }}

styleguide/.github/workflows/deploy.yml

@@ -0,0 +1,120 @@
+name: Deploy Styleguide
+
+concurrency: deploy
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "src/**/*"
+      - "package.json"
+      - ".github/workflows/deploy.yml"
+      - "tsconfig.json"
+  workflow_dispatch:
+    inputs:
+      comment-id:
+        description: "The comment-id of the slash command"
+        required: true
+      event-number:
+        description: "The event-id of the slash command"
+        required: true
+
+permissions:
+  id-token: write
+  contents: read
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          persist-credentials: false
+          ref: ${{ github.ref }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: "https://registry.npmjs.org"
+      - name: Cache pnpm modules
+        uses: actions/cache@v4
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-
+      - uses: pnpm/action-setup@v2.1.0
+        with:
+          version: 9.0.6
+          run_install: true
+      - name: Metadata
+        id: metadata
+        run: echo "::set-output name=commit::$(git rev-parse HEAD)"
+      - name: Find Release Comment
+        uses: peter-evans/find-comment@v3
+        id: find_comment
+        if: ${{ github.ref != 'refs/heads/main' }}
+        with:
+          token: ${{ secrets.BOT_TOKEN }}
+          issue-number: ${{ github.event.inputs.event-number }}
+          comment-author: pythonitaliabot
+          body-includes: "Pre-release"
+      - name: Create or update comment
+        id: initial-comment
+        uses: peter-evans/create-or-update-comment@v4
+        if: ${{ github.ref != 'refs/heads/main' }}
+        with:
+          token: ${{ secrets.BOT_TOKEN }}
+          comment-id: ${{ steps.find_comment.outputs.comment-id }}
+          issue-number: ${{ github.event.inputs.event-number }}
+          body: |
+            # Pre-release
+            :wave:
+
+            Releasing commit [${{ steps.metadata.outputs.commit }}] to NPM as pre-release! :package:
+          edit-mode: replace
+      - name: Update version
+        if: ${{ github.ref == 'refs/heads/main' }}
+        run: pnpm version patch --no-git-tag-version
+      - name: Update to pre-release version
+        if: ${{ github.ref != 'refs/heads/main' }}
+        run: |
+          pnpm version patch --no-git-tag-version
+          new_version=$(node -e "console.log(require('./package.json').version);")
+          pnpm version $new_version-rc${{ steps.metadata.outputs.commit }} --no-git-tag-version
+      - name: Build & Publish
+        id: release
+        run: |
+          pnpm publish --tag ${{ fromJSON('["pr", "latest"]')[github.ref == 'refs/heads/main'] }} --no-git-checks
+          new_version=$(node -e "console.log(require('./package.json').version);")
+          echo "::set-output name=version::$new_version"
+      - name: Commit version
+        if: ${{ github.ref == 'refs/heads/main' }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.BOT_TOKEN }}
+        run: |
+          new_version=$(node -e "console.log(require('./package.json').version);")
+
+          git remote set-url origin https://${{ secrets.BOT_TOKEN }}@github.com/${{ github.repository }}
+          git config user.name "Python Italia [bot]"
+          git config user.email "noreply@python.it"
+          git add package.json
+          git commit -m "🔨 Publish Styleguide v$new_version [skip ci]"
+          git push
+      - name: Create or update comment
+        uses: peter-evans/create-or-update-comment@v3
+        if: ${{ github.ref != 'refs/heads/main' }}
+        with:
+          token: ${{ secrets.BOT_TOKEN }}
+          comment-id: ${{ steps.initial-comment.outputs.comment-id }}
+          issue-number: ${{ github.event.inputs.event-number }}
+          body: |
+            # Pre-release
+            :wave:
+
+            Pre-release **${{ steps.release.outputs.version }}** [${{ steps.metadata.outputs.commit }}] has been released on NPM! :rocket:
+            You can try it by doing:
+            ```shell
+            pnpm add @python-italia/pycon-styleguide@${{ steps.release.outputs.version }}
+            ```
+          edit-mode: replace

styleguide/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+dist/
+storybook-static/

styleguide/.npmrc

@@ -0,0 +1,2 @@
+auto-install-peers = true
+

styleguide/.storybook/main.js

@@ -0,0 +1,35 @@
+const path = require("path");
+
+module.exports = {
+  stories: ["../src/**/*.stories.tsx"],
+  addons: [
+    "@storybook/addon-essentials",
+    {
+      name: "@storybook/addon-postcss",
+      options: {
+        postcssLoaderOptions: {
+          implementation: require("postcss"),
+        },
+      },
+    },
+  ],
+  webpackFinal: async (config) => {
+    config.module.rules.push({
+      test: /\.(ts|tsx)$/,
+      loader: require.resolve("babel-loader"),
+      options: {
+        presets: [["react-app", { flow: false, typescript: true }]],
+      },
+    });
+
+    config.module.rules.push({
+      test: /\.mjs$/,
+      include: /node_modules/,
+      type: "javascript/auto",
+    });
+
+    config.resolve.extensions.push(".ts", ".tsx", ".mjs");
+
+    return config;
+  },
+};

styleguide/.storybook/preview-head.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="https://use.typekit.net/mbr7dqb.css" />

styleguide/.storybook/preview.js

@@ -0,0 +1,16 @@
+import "../src/base.css";
+import "../src/custom.css";
+import {IntlProvider} from 'react-intl'
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  layout: "fullscreen",
+};
+
+export const decorators = [
+  (Story) => (
+    <IntlProvider locale="en" defaultLocale="en">
+      <Story />
+    </IntlProvider>
+  ),
+];

styleguide/.tool-versions

@@ -0,0 +1 @@
+nodejs 18.17.1

styleguide/README.md

@@ -0,0 +1,13 @@
+# Python Italia's component library for PyCon Italia (and related events)
+
+We use [Storybook](https://storybook.js.org/) to generate a UI component style guide that you can use on the Python Italia websites.
+
+## Getting Started
+
+```shell
+pnpm install
+
+pnpm storybook
+```
+
+Open [http://localhost:6006](http://localhost:6006) with your browser to see the result.

styleguide/biome.json

@@ -0,0 +1,50 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.7.1/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "correctness": {
+        "useExhaustiveDependencies": "off"
+      },
+      "style": {
+        "noNonNullAssertion": "off"
+      },
+      "suspicious": {
+        "noExplicitAny": "off",
+        "noArrayIndexKey": "off"
+      },
+      "a11y": {
+        "useKeyWithClickEvents": "off"
+      },
+      "complexity": {
+        "noForEach": "off"
+      },
+      "security": {
+        "noDangerouslySetInnerHtml": "off"
+      }
+    }
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "files": {
+    "ignore": [
+      "**/lodash-is-equal.ts",
+      ".cache/",
+      ".docz/",
+      "public/",
+      "src/generated",
+      "_schema.json",
+      "package.json",
+      "src/types.tsx"
+    ]
+  },
+  "javascript": {
+    "jsxRuntime": "reactClassic"
+  }
+}

styleguide/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@python-italia/pycon-styleguide",
+  "version": "0.1.210",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./style": "./dist/index.css",
+    "./custom-style": "./dist/custom-style.css",
+    "./config-parts": "./dist/config-parts.js",
+    "./icons": "./dist/icons/index.js",
+    "./illustrations": "./dist/illustrations/index.js"
+  },
+  "scripts": {
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "storybook": "start-storybook -p 6006",
+    "storybook:export": "build-storybook",
+    "build": "rollup -c",
+    "build:watch": "rollup -c -w",
+    "prepublishOnly": "rm -rf dist/ && pnpm run build"
+  },
+  "peerDependencies": {
+    "clsx": "^1.1.1",
+    "date-fns": "^2.28.0",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "react-use": "^17.3.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.5",
+    "@biomejs/biome": "^1.8.0",
+    "@rollup/plugin-commonjs": "^21.1.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/react": "^6.5.16",
+    "@tailwindcss/typography": "^0.5.13",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^12.1.5",
+    "@types/bluebird": "^3.5.42",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^20.12.11",
+    "@types/react": "^17.0.80",
+    "@types/react-dom": "^17.0.25",
+    "autoprefixer": "^10.4.19",
+    "babel-loader": "^8.3.0",
+    "babel-preset-react-app": "^10.0.1",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^27.5.1",
+    "postcss": "^8.4.38",
+    "prettier": "^2.8.8",
+    "prop-types": "^15.8.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup": "^2.79.1",
+    "rollup-plugin-styles": "^4.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.34.1",
+    "tailwindcss": "^3.4.3",
+    "tailwindcss-blend-mode": "^1.0.0",
+    "ts-jest": "^27.1.5",
+    "ts-toolbelt": "^9.6.0",
+    "tslib": "^2.6.2",
+    "typescript": "^4.9.5",
+    "webpack": "^5.91.0"
+  },
+  "dependencies": {
+    "clsx": "^1.2.1",
+    "date-fns": "^2.30.0",
+    "framer-motion": "^11.1.9",
+    "react-intl": "^6.6.6",
+    "react-text-transition": "^1.3.0",
+    "react-use": "^17.5.0"
+  }
+}