@ably/ui 17.5.0-dev.fbb4ae8f → 17.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +20 -22
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -2,20 +2,6 @@
2
2
 
3
3
  `ably-ui` is the of home of the Ably design system library ([https://ably-ui.herokuapp.com/](https://ably-ui.herokuapp.com/)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.
4
4
 
5
- ## Getting started
6
-
7
- `ably-ui` is a library built in mind with supporting a variety of websites/apps based on core web technologies. That's why where possible we build based on those but publish in a way that is easy to consume for frameworks we use across our properties.
8
-
9
- As an example, the `Logo` component has two templates, for a [React](https://reactjs.org/) component and [view-component](https://viewcomponent.org/) but uses the same CSS classes and same JavaScript hooks (`data-id`).
10
-
11
- In some cases, this is impractical. Some components will be more specialized and take advantage of a given framework, and we will have no need to make it available in multiple frameworks (for example, something that is only used within signed in, SPA like areas).
12
-
13
- ### Guiding principles
14
-
15
- 1. Provide easy access to common patterns and assets, from brand colours to navigation.
16
- 2. Use the web platform as much as possible without relying on frameworks.
17
- 3. Be flexible in how the library can be integrated.
18
-
19
5
  ### Library structure
20
6
 
21
7
  The library is built out of modules, assets, and JavaScript components. A module is a container for all of those.
@@ -24,8 +10,6 @@ For example, the `core` module provides the most general elements one can build
24
10
 
25
11
  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.
26
12
 
27
- 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.
28
-
29
13
  ### Installation
30
14
 
31
15
  ### NPM
@@ -33,10 +17,6 @@ Each module, apart from components, exposes a `scripts.js` and `styles.css`. `sc
33
17
  This type of installation gives you access to module/components assets as well as React components.
34
18
 
35
19
  ```bash
36
- npm install @ably/ui
37
-
38
- # or
39
-
40
20
  pnpm add @ably/ui # Preferred
41
21
  ```
42
22
 
@@ -211,6 +191,24 @@ An important part of ably-ui is ensuring the produced UI is accessible to as wid
211
191
 
212
192
  To visualise the assets in `ably-ui`, there is a Storybook instance, which serves as both a showcase and a development environment.
213
193
 
194
+ ### Quick Start
195
+
196
+ The easiest way to get started is to use the development script:
197
+
198
+ ```bash
199
+ ./bin/dev
200
+ ```
201
+
202
+ This script will:
203
+
204
+ - Check that all required tools (Node.js, pnpm) are installed at the correct versions via asdf
205
+ - Install all project dependencies
206
+ - Start Storybook automatically
207
+
208
+ ### Manual Setup
209
+
210
+ If you prefer to run commands manually:
211
+
214
212
  Firstly, ensure you have all of the required project dependencies by running `pnpm install` in the project root.
215
213
 
216
214
  Then, to run Storybook, run `pnpm storybook` in the project root - it should open automatically in your browser.
@@ -282,8 +280,8 @@ All components live in `src` and follow a directory and filename convention:
282
280
  - module directory (TitleCase)
283
281
  - module asset files: `scripts.js` for JavaScript and `styles.css` for CSS
284
282
  - component directory (TitleCase)
285
- - `component.js` - supporting/legacy JS script
286
- - `component.css` - additional CSS
283
+ - `component.js` - supporting JS script (legacy)
284
+ - `component.css` - additional CSS (legacy)
287
285
  - `[ComponentName].stories.tsx` - if React, a Storybook presentation file
288
286
  - if React, `[ComponentName].tsx` at a sibling level to the component directory
289
287
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ably/ui",
3
- "version": "17.5.0-dev.fbb4ae8f",
3
+ "version": "17.5.1",
4
4
  "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.",
5
5
  "repository": {
6
6
  "type": "git",