UI Lib

.babelrc

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": ["react-require"]
}

.releaserc.yml

branches:
  - '+([0-9])?(.{+([0-9]),x}).x' # maintenance branches like 1.x, 2.0.x, etc
  - main
  - name: beta
    prerelease: true
  - name: 'feat/*'
    channel: 'feat-${name.replace(/^feat\//, "")}' # name is a branch name
    prerelease: 'feat-${name.replace(/^feat\//, "")}'

plugins:
  - - '@semantic-release/commit-analyzer'
    - preset: 'conventionalcommits'
  - '@semantic-release/release-notes-generator'
  - - '@semantic-release/npm'
    - tarballDir: pkg-dist
  - - '@semantic-release/github'
    - successComment: false
      failComment: false
      assets: 'pkg-dist/*.tgz'

babel.config.js

module.exports = {
  presets: [
    ["@babel/preset-env", { loose: true }],
    "module:metro-react-native-babel-preset",
  ],
  plugins: [
    ["@babel/plugin-proposal-private-property-in-object", { loose: true }],
    [
      "module-resolver",
      {
        root: ["./src"],
        extensions: [".ts", ".tsx", ".js"],
        alias: {
          components: "./components",
        },
      },
    ],
  ],
}

deps.json

"conventional-changelog-conventionalcommits": "^7.0.2",
"semantic-release": "^22.0.0",


  "publishConfig": {
    "registry": "https://npm.pkg.github.com"
  }

release.yml

name: Release

on:
  push:
    branches:
      - beta
      - main
      - '[0-9]+.x'
      - '[0-9]+.[0-9]+.x'
      - 'feat/*'

jobs:
  release:
    name: Release UI Library
    runs-on: ubuntu-latest

    steps:
      - name: Setup repo
        uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          cache: 'npm'
          node-version-file: '.node-version'

      - name: Release
        run: |
          npm ci
          npm run build
          npm run release
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          NPM_TOKEN: ${{ secrets.GITHUB_TOKEN }}

tsconfig.build.json

{
  "extends": "./tsconfig.json",
  "exclude": ["**/*.test.ts", "**/*.test.tsx", "**/*.stories.tsx", "**/*.mdx"]
}

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./src",
    "declaration": true,
    "declarationMap": true,
    "esModuleInterop": true,
    "importHelpers": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["ES6"],
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "./build",
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "strictNullChecks": true,
    "target": "ES6",
  },
  "include": [
    "src",
    "tokens"
  ],
  "exclude": [
    "node_modules",
    "babel.config.js"
  ]
}

webpack.config.js

const webpack = require("webpack")
const path = require("path")

module.exports = async ({ config }) => {
  config.resolve.alias = {
    "react-native$": "react-native-web",
    "react-native-svg": path.join(
      "react-native-svg",
      "lib",
      "module",
      "ReactNativeSVG.web.js",
    ),
  }

  // These modules have a bit of a struggle unless we compile them too
  config.module.rules.unshift({
    test: /\.js/,
    include: [/react-native-*./, /@react-native-community\/datetimepicker/],
    use: [
      {
        loader: "babel-loader",
        options: {
          presets: [
            "@babel/preset-flow",
            [
              "@babel/preset-env",
              {
                loose: true,
                modules: "commonjs",
              },
            ],
            "@babel/preset-typescript",
            ["@babel/preset-react", { runtime: "automatic" }],
          ],
        },
      },
    ],
  })

  config.plugins.unshift(
    new webpack.DefinePlugin({
      __DEV__: JSON.stringify(false),
    }),
  )

  return config
}