Merge pull request #128 from ably/web-1942-public-repo

[WEB-1942] Make Ably UI public

.circleci/config.yml

@@ -73,7 +73,6 @@ commands:
       - run: bundle install --path vendor/bundle
       - run: |
           cd preview
-          bundle config https://rubygems.pkg.github.com/ably $GITHUB_REGISTRY_USERNAME:$GITHUB_REGISTRY_TOKEN
           bundle config set --local path 'vendor/bundle'
           bundle install
       - save_bundle_cache

.github/workflows/release-tag.yml

@@ -28,18 +28,16 @@ jobs:
           chmod +x "./scripts/update-dependents.sh"
       - name: Release latest Ably UI version
         env:
-          GITHUB_REGISTRY_TOKEN: ${{ secrets.REGISTRY_TOKEN }}
-          BUNDLE_RUBYGEMS__PKG__GITHUB__COM: "${{ secrets.REGISTRY_USERNAME }}:${{ secrets.REGISTRY_TOKEN }}"
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          RUBYGEMS_API_KEY: "${{ secrets.RUBYGEMS_API_KEY }}"
         run: |
           git config --global user.email "[email protected]"
           git config --global user.name "Github Action"
           ./release.sh "${GITHUB_REF/refs\/tags\//}"
         shell: bash
       - name: Create PR on Voltaire and Website
         env:
-          GITHUB_REGISTRY_TOKEN: ${{ secrets.REGISTRY_TOKEN }}
           REGISTRY_USERNAME: ${{ secrets.REGISTRY_USERNAME }}
           REGISTRY_TOKEN: ${{ secrets.REGISTRY_TOKEN }}
-          BUNDLE_RUBYGEMS__PKG__GITHUB__COM: "${{ secrets.REGISTRY_USERNAME }}:${{ secrets.REGISTRY_TOKEN }}"
         run: "./scripts/update-dependents.sh"
         shell: bash

.npmrc

@@ -1,2 +1,2 @@
-//npm.pkg.github.com/:_authToken=${GITHUB_REGISTRY_TOKEN}
-@ably:registry=https://npm.pkg.github.com
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}
+

CONTRIBUTING.md

@@ -0,0 +1,29 @@
+# Welcome 👋🏽
+
+Thank you for considering helping with this project. ❤️
+
+If you've noticed a bug or have a feature request, create an issue in the repo! It's generally best if you get confirmation of your bug or approval for your feature request before starting to code.
+
+If this is your first time contributing to open source, we recommend watching this [friendly guide](https://egghead.io/talks/git-how-to-make-your-first-open-source-contribution) to give you a grounding in some of the basic concepts.
+
+If anything in this guide or in this codebase doesn't make sense to you, please let us know by creating an issue in the repo.
+
+## Running the development server
+
+Please refer to the [README](./README.md#development) for instructions on how to set this up.
+
+## Testing
+
+This repo uses a combination of Jest and Cypress for testing.
+For a component that has both a React and Ruby please ensure there is a parity test, the easiest way to create that is to copy an existing one as an example.
+
+Please refer to the [README](./README.md#running-tests) for further details.
+
+## Contributing
+
+1. Fork the [repo](https://github.com/ably/ably-ui/).
+1. Create your update in a new branch - `git checkout -b new-feature`
+1. When you're ready to submit your contribution, create a Pull Request
+1. Make sure you have rebased against Ably UI's main branch.
+1. Fill in the PR description template with as much detail as possible
+1. Someone from Ably will be assigned to review and accept or decline the work.

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    ably-ui (4.2.0)
+    ably-ui (4.2.0.dev.f1eb220)
       view_component (~> 2.33.0)
 
 GEM

README.md

@@ -34,40 +34,38 @@ Each module, apart from components, exposes a `scripts.js`, `styles.css` and `MO
 
 This type of installation gives you access to module/components assets as well as React components.
 
-Note, the package is currently hosted in our private GitHub registry, so you will need a `GITHUB_REGISTRY_TOKEN` environment variable in your shell to be able to install it. See [here](https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/creating-a-personal-access-token) for instructions on obtaining one.
-
 ```bash
-npm install @ably/ably-ui
+npm install @ably/ui
 
 # or
 
-yarn add @ably/ably-ui
+yarn add @ably/ui
 ```
 
 To attach the imported JavaScript from the `Core` module to the `window` object:
 
 ```js
-import "@ably/ably-ui/core/scripts";
+import "@ably/ui/core/scripts";
 
 // AblyUi.Core is now available on window
 ```
 
 To import an es6 `core` module and expose nothing to window:
 
 ```js
-import ablyUiCore from "@ably/ably-ui/core/scripts";
+import ablyUiCore from "@ably/ui/core/scripts";
 ```
 
 To import the JavaScript for an `Accordion` component:
 
 ```js
-import Accordion from "@ably/ably-ui/core/accordion/component";
+import Accordion from "@ably/ui/core/accordion/component";
 ```
 
 If your bundler supports CSS importing, you can import it as well:
 
 ```js
-import "@ably/ably-ui/core/styles.css";
+import "@ably/ui/core/styles.css";
 ```
 
 ### Setting up TailwindCSS
@@ -79,7 +77,7 @@ Currently, AblyUI CSS is built to work with TailwindCSS. To integrate it into yo
 1. Add the following to your `tailwind.config.js`. Note how different config properties are always extended by the `ablyUIConfig`:
 
 ```js
-const extendConfig = require("@ably/ably-ui/tailwind.extend.js");
+const extendConfig = require("@ably/ui/tailwind.extend.js");
 
 module.exports = extendConfig((ablyUIConfig) => ({
   ...ablyUIConfig,
@@ -102,18 +100,18 @@ module.exports = extendConfig((ablyUIConfig) => ({
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-@import "@ably/ably-ui/reset/styles.css"; /* needed as we disable the default Tailwind reset */
-@import "@ably/ably-ui/core/styles.css"; /* styles for core module components and more */
-@import "@ably/ably-ui/core/Meganav/component.css";
-@import "@ably/ably-ui/core/ContactFooter/component.css";
+@import "@ably/ui/reset/styles.css"; /* needed as we disable the default Tailwind reset */
+@import "@ably/ui/core/styles.css"; /* styles for core module components and more */
+@import "@ably/ui/core/Meganav/component.css";
+@import "@ably/ui/core/ContactFooter/component.css";
 ```
 
 #### Importing React components
 
 Note that depending on the component, you might still need to include CSS & JS for it:
 
 ```js
-import Meganav from "@ably/ably-ui/core/Meganav";
+import Meganav from "@ably/ui/core/Meganav";
 ```
 
 #### Importing ViewComponent (Rails) components
@@ -123,18 +121,9 @@ To use `ably-ui` with [Ruby on Rails](https://rubyonrails.org/) add the `ably-ui
 ```ruby
 gem 'ably-ui',
     '1.0.0',
-    require: 'ably_ui',
-    source: 'https://rubygems.pkg.github.com/ably'
-```
-
-And then run:
-
-```bash
-bundle config https://rubygems.pkg.github.com/ably USERNAME:TOKEN
+    require: 'ably_ui'
 ```
 
-Where `USERNAME` is your GitHub username (without the `@`) and TOKEN is your [GitHub access token](https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/creating-a-personal-access-token). This is required because the gem is downloaded from a private gem registry on GitHub.
-
 Components are exposed as [View Components](https://github.com/github/view_component) and should be available in any view:
 
 ```erb
@@ -237,7 +226,7 @@ For `npm`:
 # in the root directory
 yarn link
 # in the the "preview" directory
-yarn link @ably/ably-ui
+yarn link @ably/ui
 ```
 
 For `ruby`:
@@ -259,7 +248,7 @@ If at anytime you don't want to use the local NPM package and/or gems any more,
 
 ```bash
 # in "preview" directory
-yarn unlink @ably/ably-ui
+yarn unlink @ably/ui
 ```
 
 Then change back `path` to source `source` in the `Gemfile`. If you need to update `Gemfile.lock` without installing gems, you can run `bundle lock`.
@@ -268,13 +257,20 @@ Then change back `path` to source `source` in the `Gemfile`. If you need to upda
 
 Make sure you commit & push your work and remove the [development-specific config](#using-the-development-build-of-ably-ui-in-the-preview-app) before doing this.
 
-You will need to authenticate with the GitHub [NPM registry](https://docs.github.com/en/free-pro-team@latest/packages/using-github-packages-with-your-projects-ecosystem/configuring-npm-for-use-with-github-packages#authenticating-to-github-packages) and [gem registry](https://docs.github.com/en/free-pro-team@latest/packages/using-github-packages-with-your-projects-ecosystem/configuring-rubygems-for-use-with-github-packages#authenticating-with-a-personal-access-token) to publish.
+You will need to authenticate with [npmjs](https://docs.npmjs.com/creating-and-viewing-access-tokens) and [Ruby Gems](https://guides.rubygems.org/api-key-scopes/) to publish.
 
 After the above, you should have:
 
-- GITHUB_REGISTRY_TOKEN set in your environment (`.npmrc` will read from it)
-- you should do registry login as described in the above docs with your GitHub username and password
-- a `~/.gem/credentials` file with a `:github: Bearer TOKEN` (replace GITHUB_REGISTRY_TOKEN with your token - interpolation does not work here)
+- NPM_TOKEN set in your environment
+- `.npmrc` file to read NPM_TOKEN from your environment like this:
+  ```
+  //registry.npmjs.org/:_authToken=${NPM_TOKEN}
+  ```
+- a `~/.gem/credentials` file that has your Rubygems API key:
+  ```
+  ---
+  :rubygems_api_key: REPLACE_THIS_WITH_YOUR_OWN_API_KEY
+  ```
 
 To deploy a review app with your in-progress code, you can use the `pre-release` script:
 

ably-ui.gemspec

@@ -6,8 +6,8 @@ require "ably_ui/version"
 Gem::Specification.new do |spec|
   spec.name          = "ably-ui"
   spec.version       = AblyUi::VERSION
-  spec.authors       = ["Dominik Piatek"]
-  spec.email         = ["[email protected]"]
+  spec.authors       = ["Dominik Piatek", "Arti Mathanda", "Bruce Thomas"]
+  spec.email         = ["[email protected]", "[email protected]", "[email protected]"]
   spec.summary       = "Shared component library and design system for Ably Real-time Ltd (ably.com)"
   spec.licenses      = ['Apache-2.0']
   spec.homepage      = "https://github.com/ably/ably-ui"

lib/ably_ui/version.rb

@@ -1,3 +1,3 @@
 module AblyUi
-  VERSION = '4.2.0'
+  VERSION = '4.2.0.dev.f1eb220'
 end

package.json

@@ -1,12 +1,12 @@
 {
-  "name": "@ably/ably-ui",
-  "version": "4.2.0",
+  "name": "@ably/ui",
+  "version": "4.2.0-dev.f1eb220",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
-  "repository": "[email protected]:ably/ably-ui.git",
-  "license": "Apache-2.0",
-  "publishConfig": {
-    "registry": "https://npm.pkg.github.com"
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://[email protected]/ably/ably-ui.git"
   },
+  "license": "Apache-2.0",
   "files": [
     "src",
     "core",
@@ -74,5 +74,17 @@
     "react-dom": "^17.0.1",
     "redux": "^4.0.5",
     "scroll-lock": "^2.1.4"
-  }
+  },
+  "bugs": {
+    "url": "https://github.com/ably/ably-ui/issues"
+  },
+  "homepage": "https://github.com/ably/ably-ui#readme",
+  "keywords": [
+    "ui",
+    "tailwind",
+    "ably",
+    "react",
+    "view-components"
+  ],
+  "author": "Ably Real-time Ltd <[email protected]>"
 }

pre-release.sh

@@ -3,7 +3,7 @@
 # See https://coderwall.com/p/fkfaqq/safer-bash-scripts-with-set-euxo-pipefail
 set -euo pipefail
 
-echo "Fetching remote for up to date commit history"
+echo "> Fetching remote for up to date commit history"
 git fetch
 
 BRANCH=$(git branch --show-current)
@@ -19,11 +19,11 @@ if [[ `git status --porcelain --untracked-files=no` ]]; then
   exit 1
 fi
 
-echo "Save short SHA for package name"
+echo "> Save short SHA for package name"
 PACKAGE_SUFFIX=$(git rev-parse --short HEAD)
-echo "SHA is ${PACKAGE_SUFFIX}"
+echo "> SHA is ${PACKAGE_SUFFIX}"
 
-echo "Read the current semver from package.json, ignoring pre-release versions"
+echo "> Read the current semver from package.json, ignoring pre-release versions"
 ABLY_UI_VERSION=$(node -e "const p = require('./package.json'); console.log(p.version.split('-dev')[0]);")
 
 # Note the . and - before "dev" - this is due to the differences between gems and npm in what they consider a pre-release version
@@ -36,58 +36,59 @@ if git rev-parse "${TAG}" >/dev/null 2>&1; then
   exit 1
 fi
 
-echo "Install packages, making sure they are up to date"
+echo "> Install packages, making sure they are up to date"
+echo "> yarn (npm)"
 yarn --frozen-lockfile
+
+echo "> gems"
 bundle config set --local frozen true
 bundle
 bundle config set --local frozen false
 
-echo "Build library"
+echo "> Build library"
 NODE_ENV=production node scripts/build.js
 
-echo "Update version.rb file"
+echo "> Update version.rb file"
 echo -e "module AblyUi\n  VERSION = '$RUBY_VERSION'\nend" > ./lib/ably_ui/version.rb
 
-echo "Build the gem"
+echo "> Build the gem"
 gem build ably-ui.gemspec
 
-echo "Push the gem to the registry"
-gem push --key github \
-    --host https://rubygems.pkg.github.com/ably \
-    ably-ui-$RUBY_VERSION.gem
+echo "> Push the gem to the registry ($VERSION)"
+gem push ably-ui-$RUBY_VERSION.gem
 
-echo "Remove local gem artifact"
+echo "> Remove local gem artifact ($RUBY_VERSION)"
 rm ably-ui-$RUBY_VERSION.gem
 
-echo "Update Gemfile.lock"
+echo "> Update Gemfile.lock"
 bundle
 
-echo "Publish the npm package to the registry"
+echo "> Publish the npm package to the registry"
 yarn publish --no-git-tag-version --new-version $VERSION
 
-echo "Update preview app version"
+echo "> Update preview app version"
 cd preview
 
-echo "Update Gemfile"
+echo "> Update Gemfile"
 # Using -i.bak is a cross-platform way of using sed
 # https://stackoverflow.com/a/22084103
 sed -i.bak "s/gem 'ably-ui', '.*', require/gem 'ably-ui', '${RUBY_VERSION}', require/" Gemfile
 rm Gemfile.bak
 
-echo "Update ably-ui npm package in preview app"
-yarn upgrade @ably/ably-ui@$VERSION
+echo "> Update ably-ui npm package in preview app"
+yarn upgrade @ably/ui@$VERSION
 
-echo "Update Gemfile.lock"
+echo "> Update Gemfile.lock"
 bundle lock  # don't change contents gem dir as it might be using local paths
 
-echo "Commit version publish and preview app update to $TAG"
+echo "> Commit version publish and preview app update to $TAG"
 cd ..
 git add package.json lib/ably_ui/version.rb Gemfile.lock
 git add preview/package.json preview/yarn.lock preview/Gemfile preview/Gemfile.lock
 git commit -m "Publish $TAG and update preview app"
 
-echo "Tag commit with $TAG"
+echo "> Tag commit with $TAG"
 git tag -a $TAG -m "$TAG"
 
-echo "Push to repo"
+echo "> Push to repo"
 git push origin HEAD