diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 3bc98b73b..19bba9431 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -13,10 +13,6 @@ jobs: - uses: actions/checkout@v2 with: ref: "main" - - uses: ruby/setup-ruby@v1 - with: - ruby-version: 3.1.2 - bundler-cache: true - uses: actions/setup-node@v2 with: node-version: "16.17.0" @@ -24,7 +20,6 @@ jobs: - name: Release latest Ably UI version env: NPM_TOKEN: ${{ secrets.NPM_TOKEN }} - RUBYGEMS_API_KEY: ${{ secrets.RUBYGEMS_API_KEY }} run: | git config --global user.email "github@action.code" git config --global user.name "Github Action" diff --git a/.github/workflows/update-versions.yml b/.github/workflows/update-versions.yml index d9e346259..938a1f311 100644 --- a/.github/workflows/update-versions.yml +++ b/.github/workflows/update-versions.yml @@ -20,10 +20,6 @@ jobs: - name: "Get latest tag" id: latesttag uses: "WyriHaximus/github-action-get-previous-tag@v1" - - uses: ruby/setup-ruby@v1 - with: - ruby-version: 3.1.2 - bundler-cache: true - uses: actions/setup-node@v2 with: node-version: 16.17.0 @@ -41,7 +37,7 @@ jobs: with: branch: update-versions-to-${{ steps.latesttag.outputs.tag }} title: Update @ably/ui version in repo to ${{ steps.latesttag.outputs.tag }} - body: "Update files that are not updated during the release process. + body: "Update files that are not updated during the release process. Sometimes published packages are not available immediately so we open this PR for convenience." # This is doesn't work due to what seems a permission issue https://github.com/peter-evans/create-pull-request/issues/155 # team-reviewers: "team-website" diff --git a/.gitignore b/.gitignore index 493e8896c..90b048058 100644 --- a/.gitignore +++ b/.gitignore @@ -1,8 +1,6 @@ .bundle .DS_Store -ably-ui-*.gem node_modules -vendor cypress/screenshots cypress/videos server_killer.rb diff --git a/.npmignore b/.npmignore index 63edede6c..e4fc17a17 100644 --- a/.npmignore +++ b/.npmignore @@ -5,8 +5,6 @@ .eslintrc.js .pretterrc.json .prettierignore -ably-ui-*.gem -ably-ui.gemspec lib modules-config.js node_modules @@ -14,5 +12,4 @@ preview release-canditate.sh release.sh scripts -vendor webpack.config.js diff --git a/.tool-versions b/.tool-versions index 96631f20c..876267ede 100644 --- a/.tool-versions +++ b/.tool-versions @@ -1,3 +1,2 @@ -ruby 3.1.2 nodejs 16.17.0 yarn 1.22.10 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 127fa0595..95a65d095 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -15,7 +15,6 @@ Please refer to the [README](./README.md#development) for instructions on how to ## 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. diff --git a/Procfile b/Procfile index 5d96181b8..80e60b05f 100644 --- a/Procfile +++ b/Procfile @@ -1,3 +1,2 @@ webpack-ui: node scripts/build -w webpack-dev-server: ./scripts/webpack-preview.sh -rails-server: ./scripts/rails-preview.sh diff --git a/README.md b/README.md index a6c04664d..173763249 100644 --- a/README.md +++ b/README.md @@ -18,13 +18,13 @@ In some cases, this is impractical. Some components will be more specialized and ### Library structure -The library is built out of modules, assets, JavaScript & ruby modules and components. A module is a container for all of those. +The library is built out of modules, assets, and JavaScript components. A module is a container for all of those. -For example, the `core` module provides the most general elements one can build the “chrome” of a web-based interface — typography, colours, spacing (i.e., containers) etc. The components within the module support our most common needs to build that “chrome”, like navigation elements, footer, hero sections, code samples etc. Assets, JavaScript & ruby modules are all shared between the components in the module. +For example, the `core` module provides the most general elements one can build the “chrome” of a web-based interface — typography, colours, spacing (i.e., containers) etc. The components within the module support our most common needs to build that “chrome”, like navigation elements, footer, hero sections, code samples etc. Assets, and JavaScript are all shared between the components in the module. Components do not require assets directly — instead, it's up to the consumer to load the assets and pass them to the components. This ensures flexibility in terms of URLs. -Each module, apart from components, exposes a `scripts.js`, `styles.css` and `MODULE_NAME.rb` files. `scripts.js` contains helper functions, `MODULE_NAME.rb` contains modules that components can include. `styles.css` contains CSS that does not belong to any module in particular. +Each module, apart from components, exposes a `scripts.js` and `styles.css`. `scripts.js` contains helper functions. `styles.css` contains CSS that does not belong to any module in particular. ### Installation @@ -37,7 +37,7 @@ npm install @ably/ui # or -yarn add @ably/ui +yarn add @ably/ui # Preferred ``` To attach the imported JavaScript from the `Core` module to the `window` object: @@ -119,24 +119,6 @@ Note that depending on the component, you might still need to include CSS & JS f import Meganav from "@ably/ui/core/Meganav"; ``` -#### Importing ViewComponent (Rails) components - -To use `ably-ui` with [Ruby on Rails](https://rubyonrails.org/) add the `ably-ui` gem to your `Gemfile`: - -```ruby -gem 'ably-ui', - '1.0.0', - require: 'ably_ui' -``` - -Components are exposed as [View Components](https://github.com/github/view_component) and should be available in any view: - -```erb -<%= render(AblyUi::Core::Meganav.new) %> -``` - -Note that this loads neither CSS nor JS — these need to still be loaded by a bundler like webpack. - ## Usage ### Icons @@ -184,12 +166,6 @@ See https://ably-ui.herokuapp.com/components/icon for more details. Font assets are not included automagically but are part of the repo, together with an example of font-face file; see `src/core/fonts` for examples. Make sure to include the licence file declaration on usage. -See `preview/app/javascript/styles/application.css` for an example when using webpacker/rails. - -#### Rails - -Because the gem directories are on the asset path (see [Importing ViewComponent (Rails) components](#user-content-importing-viewcomponent-rails-components) section), they will work with standard asset helpers (i.e., `asset_path`). - ### Accessibility An important part of ably-ui is ensuring the produced UI is accessible to as wide range of users as possible. All components should adhere to at least AA accessibility standards. In most cases, this can be accomplished by following a few simple rules: @@ -203,73 +179,19 @@ An important part of ably-ui is ensuring the produced UI is accessible to as wid ## Development -The repository includes a “preview” app, which is serves both as a showcase and development environment. - -To use, first make sure you install dependencies both for the library and the “preview” app: - -```bash -yarn && bundle -cd preview -yarn && bundle -``` - -Then, from the root of the repository, run: - -```bash -yarn dev -``` - -This will run the app and use the published versions of the `ably-ui`, specified in `preview/Gemfile` and `preview/package.json` NPM package. +To visualise the assets in `ably-ui`, there is a Storybook instance, which serves as both a showcase and a development environment. -### Using the local ably-ui in the preview app +Firstly, ensure you have all of the required project dependencies by running `yarn` in the project root. -It's possible to use the local version of ably-ui in the “preview” app. Enabling this, requires separate steps for the `npm` and `ruby` packages. +Then, to run Storybook, run `yarn storybook` in the project root - it should open automatically in your browser. -For `npm`: - -```bash -# in the root directory -yarn link -# in the "preview" directory -yarn link @ably/ui -``` - -For `ruby`: - -In `preview/Gemfile` replace the Ably UI gem version number with `path: '../'` like this: - -```bash -# in preview -gem 'ably-ui', path: '../', require: 'ably_ui' -``` - -and run: - -```bash -# in preview -bundle --no-cache -``` - -Why not `bundle config set local.ably-ui ../`? Because that feature is built around the local gem being a separate repo, and works poorly with our config. - -A caveat of this approach is that the change `preview/Gemfile` should not be committed, as it will cause the remote app to not build. - -### Using a deployed package of ably-ui in the preview app - -If at anytime you don't want to use the local NPM package and/or gems any more, you can do: - -```bash -# in "preview" directory -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`. +To build Storybook as if it was a statically built site (i.e. what it looks like when deployed), run `yarn build-storybook` from the project root, go to the generated directory with `cd preview`, and then run `npx http-server` (accepting the prompt to install that package if you haven't done already). The built site will be available at the listed local URL. #### Publishing pre-release packages for review apps 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 [npmjs](https://docs.npmjs.com/creating-and-viewing-access-tokens) and [Ruby Gems](https://guides.rubygems.org/api-key-scopes/) to publish. +You will need to authenticate with [npmjs](https://docs.npmjs.com/creating-and-viewing-access-tokens) to publish. After the above, you should have: @@ -278,11 +200,6 @@ After the above, you should have: ``` //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: @@ -316,7 +233,6 @@ All components live in `src` and follow a directory and filename convention: - component directory (TitleCase) - `component.js` - this is the entry file for a component and is the only required file - `components.css` - additional CSS - - for ruby components, you need `component.rb` and `component.html.erb` - for react, `components.jsx` For example: @@ -326,8 +242,6 @@ For example: - script.js - styles.css - Accordion - - component.rb - - component.html.erb - component.js - component.css - component.jsx @@ -343,50 +257,19 @@ If using positioning any other than static, be mindful of creating stacking cont By default, [Prettier](https://prettier.io/) & [ESLint](https://eslint.org/) will handle most of the frontend files. You can use them through your editor (which should pick up the relevant config files) or on the command line (see `scripts` in package.json). -Neither handles `erb` and `rb` files. The only config for those files is at the moment in `editorconfig`. - -#### Note - -Until we have set up formatting scripts for `erb` it's worth setting up [htmlbeautifier](https://github.com/threedaymonk/htmlbeautifier) for your editor (for example with https://github.com/aliariff/vscode-erb-beautify if you use VS Code) and tracking [this issue in Prettier](https://github.com/prettier/plugin-ruby/issues/371), as Prettier is much faster and hopefully will get support for `erb`. - ### Adding a new component #### To add a new component: -1. Add it in `modules-config.js` -2. Create a folder in `src`, in the module of your choice. The folder name should be TitleCase. -3. Add a `component.js` +1. Create a folder in `src`, in the module of your choice (i.e. `core`). The folder name should be TitleCase. +2. Add a `component.js` -- if the component has custom CSS, add a `component.css` file as well. Add `@layer components {}` to its contents. Import the CSS file in `component.js` +- if the component has custom CSS, add a `component.css` file as well. Import the CSS file in `component.js` - if you need a VW component, add `component.rb` and `component.html.erb` -- if you need a React component, add a `components.jsx` -#### To see this component in the preview app: +#### To see this component in Storybook: -##### For React components: - -1. Import the file into `preview/app/javascript/packs/application.js` and add as input to the `reactRenderer` -2. If it contains custom CSS, import it into `preview/app/javascript/styles/application.css` -3. Add a template in `preview/app/views/components`, with a `_react` suffix, i.e. `my_component_react.html.erb` - -##### For VW components: - -1. You will need to restart the server for Rails to load the component (this will also need to happen after any changes to `component.rb`) -1. If it contains custom CSS, import it into `preview/app/javascript/styles/application.css` -1. Add a template in `preview/app/views/components`, with a `_vw` suffix, i.e. `my_component_vw.html.erb` -1. If the component has any JavaScript, import it in the view (`preview/app/views/components/my_component_vw.html.erb`) and initialize: - -```rb -<% content_for :component do %> - <%= javascript_include_tag 'ably_ui/core/my_component/component' %> - -<% end %> -``` +Create a `[COMPONENT_NAME].stories.tsx` file alongside your `component` assets, following the examples of other Storybook stories, or their online documentation for guidance. When running Storybook, the story should be picked up and rendered in place automatically. ### Publishing @@ -400,7 +283,7 @@ This will trigger GitHub actions in supported apps (currently [Voltaire](http:// **To trigger a release:** -- Make sure you have run pre-release script `./pre-release.sh` (This updates the gem and the npm package version for ably-ui in the following files `Gemfile`, `package.json`, `version.rb`). +- Make sure you have run pre-release script `./pre-release.sh` (This updates the npm package version for ably-ui in the following files `Gemfile`, `package.json`). - Merge your PR into `main` after it has been approved. - On the Github [Ably-UI](http://github.com/ably/ably-ui) repo, [create a new release](https://github.com/ably/ably-ui/releases/new) tag. - Create a new tag with the new version number for the release. @@ -409,6 +292,7 @@ This will trigger GitHub actions in supported apps (currently [Voltaire](http:// - Click on the Autogenerate release notes button. - Publish Release. - Check the Github `Actions` tab in the repo to make sure the release is green. +- Upon successful release, a compiled version of the Storybook site will be deployed to Github Pages. This will release the packages, update library & preview app and create & push the commit & tag, and also create corresponding PRs in Voltaire & Website. diff --git a/app.json b/app.json index 4992dfc84..139e72c2e 100644 --- a/app.json +++ b/app.json @@ -2,9 +2,6 @@ "buildpacks": [ { "url": "https://github.com/timanovsky/subdir-heroku-buildpack" - }, - { - "url": "https://github.com/heroku/heroku-buildpack-ruby#v260" } ] } diff --git a/lib/ably_ui.rb b/lib/ably_ui.rb deleted file mode 100644 index 4a9caeea5..000000000 --- a/lib/ably_ui.rb +++ /dev/null @@ -1,27 +0,0 @@ -require "ably_ui/version" - -module AblyUi - module Integration - class << self - def asset_paths - File.expand_path("../lib", File.dirname(__FILE__)) - end - - def precompile_images_paths - ["*.svg", "*.png", "*.jpg", "*.jpeg"].map do |ext| - Dir[File.join(File.dirname(__FILE__), 'ably_ui', '**', 'images' , ext)] - end.flatten - end - - def icon_sprites_paths - Dir[File.join(File.dirname(__FILE__), 'ably_ui', '**' , "sprites.svg")] - end - end - end -end - -# Module shared code -require File.join(File.dirname(__FILE__), 'ably_ui', 'core', 'core.rb') - -# Components; can be loaded in any order as they don't depend on each other at require time -Dir[File.join(File.dirname(__FILE__), 'ably_ui', '**' , '*.rb')].each {|file| require file } diff --git a/lib/ably_ui/version.rb b/lib/ably_ui/version.rb deleted file mode 100644 index a5713186e..000000000 --- a/lib/ably_ui/version.rb +++ /dev/null @@ -1,3 +0,0 @@ -module AblyUi - VERSION = '13.2.2.dev.78815ed' -end diff --git a/package.json b/package.json index 24026d570..44686f0a5 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,6 @@ "@babel/plugin-transform-runtime": "^7.12.10", "@babel/preset-env": "^7.12.1", "@babel/preset-react": "^7.12.5", - "@prettier/plugin-ruby": "^1.5.2", "@storybook/addon-essentials": "^7.6.4", "@storybook/addon-interactions": "^7.6.4", "@storybook/addon-links": "^7.6.4", @@ -68,7 +67,6 @@ "build": "node scripts/build.js", "build:verbose": "node scripts/build.js -v", "watch": "node scripts/build.js -w", - "dev": "./scripts/cleanstart.sh", "format:check": "yarn prettier -c *.{js,ts} src/**/*.{js,jsx,ts,tsx} cypress", "format:write": "yarn prettier -w *.{js,ts} src/**/*.{js,jsx,ts,tsx} cypress", "lint": "eslint *.{js,ts} src/**/*.{js,jsx,ts,tsx} cypress", diff --git a/scripts/cleanstart.sh b/scripts/cleanstart.sh deleted file mode 100755 index 2804fb398..000000000 --- a/scripts/cleanstart.sh +++ /dev/null @@ -1,28 +0,0 @@ -#!/bin/bash - -# A script to ensure webpack assets are up-to-date -set -eo pipefail - -UPDATE="$1" - -if ! which foreman &> /dev/null; then - echo "foreman executable could not be found." - echo "Install it with 'gem install foreman'." - echo - echo "See https://github.com/ably/ably-ui#using-the-development-build-of-ably-ui-in-the-preview-app for details" - exit -fi - -clear; - -if [[ $UPDATE == "--update-deps" ]]; then - # Ensure recently added components are up-to-date - echo "Update yarn for new modules" - yarn --frozen-lockfile -fi - -echo "Creating webpack build assets" -node scripts/build.js - -echo "Running webpack and rails server with foreman" -foreman start diff --git a/scripts/rails-preview.sh b/scripts/rails-preview.sh deleted file mode 100755 index 90e22745b..000000000 --- a/scripts/rails-preview.sh +++ /dev/null @@ -1,14 +0,0 @@ -#!/bin/bash - -# trap TERM and change to QUIT -trap 'echo Stopping Rails process $PID; kill -SIGINT $PID' TERM - -set -eou - -# Run the Rails preview server -cd ./preview/ -./bin/rails server -p 5000 & - -# capture PID and wait -PID=$! -wait diff --git a/yarn.lock b/yarn.lock index 5315a3e2c..dc2815b15 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3784,13 +3784,6 @@ schema-utils "^3.0.0" source-map "^0.7.3" -"@prettier/plugin-ruby@^1.5.2": - version "1.5.5" - resolved "https://registry.yarnpkg.com/@prettier/plugin-ruby/-/plugin-ruby-1.5.5.tgz#9e206fc856a182a292fcfab9043f53c7a3d0af97" - integrity sha512-b387GdXU+LrnY+oaKWRUI5EnsUvrQ0G1jUSVPkvUTGzp/w+BB9/n4SICVPY3V9/wYsvWpAZq4LkE4FdBufXUtA== - dependencies: - prettier ">=1.10" - "@radix-ui/number@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.0.1.tgz#644161a3557f46ed38a042acf4a770e826021674" @@ -11981,7 +11974,7 @@ prettier@1.16.4: resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.4.tgz#73e37e73e018ad2db9c76742e2647e21790c9717" integrity sha512-ZzWuos7TI5CKUeQAtFd6Zhm2s6EpAD/ZLApIhsF9pRvRtM1RFo61dM/4MSRUA0SuLugA/zgrZD8m0BaY46Og7g== -prettier@>=1.10, prettier@^2.3.0: +prettier@^2.3.0: version "2.3.1" resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.1.tgz#76903c3f8c4449bc9ac597acefa24dc5ad4cbea6" integrity sha512-p+vNbgpLjif/+D+DwAZAbndtRrR0md0MwfmOVN9N+2RgyACMT+7tfaRnT+WDPkqnuVwleyuBIG2XBxKDme3hPA==