cja-phoenix 0.3.4 → 0.3.6

package/README.md

@@ -23,18 +23,18 @@ npm run docs:serve
 
 ## Develop and test locally
 
-The best way to develop and test your component is by creating demos in `docs/components/demo` folder.
+The best way to develop and test your component is by creating stories in `src/stories` folder.
 
 If you want to test the library in your Vue3 app locally:
 
-- In the root folder of this library, run `npm link`. This will create a symbolic link to the library.
-- In the root folder of your client app, run `npm link cja-phoenix`. This will add the symbolic link to the `node_modules` folder in your client app.
+- In the root folder of this library, run `npm run build:link`. This will build the library for development and create a symbolic link to the library.
+- In the `package.json` of the client app add the script: `reload: npm link cja-phoenix && npm run serve`, this will grab the symbolic link created by running `npm run build:link`.
 - You can now import `cja-phoenix` in your client app.
-- The library can be installed on your app with the `App.use()` function (You may need to add `//@ts-ignore` when using the library in link mode)
+- The library can be installed on your app with the `App.use()` function
 
-There is no need to add `cja-phoenix` to your client app's dependency in this case.
+In order to expedite this process, the `npm run build:link` can be used on Phoenix's side to build and link the library
 
-If you made changes to the library, you will need to rebuild the library. Your Vue3 app will hot reload when the building of library is completed.
+If you made changes to the library, you will need to run `npm run build:link`
 
 ## Publishing
 
@@ -58,7 +58,21 @@ module.exports = {
 };
 ```
 
-> In [vite.config.ts](vite.config.ts), format 'umd' is not present in `build.lib.formats` option.
+> :warning: **When developing components, always import library resources directly from their source files.**
+
+```js
+// Do this
+import CjaButton from "../components/structural/CjaButton.vue";
+
+// Instead of this
+import { CjaButton } from "../components";
+```
+
+This is due to the **07/2023 Histoire Incident**, during which `histoire build` would fail during action runtime on github due to an unclear compiler error:
+
+> Failed to load "./jsonReviver" imported from /home/runner/work/phoenix/phoenix/src/utils/index.ts
+
+If you feel confident enough to try and resolve this issue be aware that the error may change its starting point. Good luck! :star:
 
 ### Utilities and constants
 
@@ -87,16 +101,18 @@ export default {
 
 Individual components have styles defined in its `.vue` file. They will be processed, combined and minified into `dist/style.css`, which is included in the `exports` list in [package.json](package.json).
 
-If you have library level styles shared by all components in the library, you may add them to [src/assets/main.scss](src/assets/main.scss). This file is imported in [index.ts](src/index.ts), the processed styles are also included into `dist/style.css`. To avoid conflicting with other global styles, consider pre-fixing the class names or wrapping them into a namespace class.
+If you have library level styles shared by all components in the library, you may add them to [src/assets/main.scss](src/assets/main.scss). This file is imported in [index.ts](src/index.ts), the processed styles are also included into `dist/style.css`.
 
 If you have your own special set of SVG icons, you may create a font file (`.woff` format) using tools like [Icomoon](https://icomoon.io/) or [Fontello](https://fontello.com/). Vite will include the font file into the build, see [https://vitejs.dev/guide/assets.html](https://vitejs.dev/guide/assets.html).
 
-The client app imports `style.css`, usually in the entry file:
+The client app must import `style.css` in its entry file:
 
 ```js
-import "cja-phoenix/dist/style.css";
+import "cja-phoenix/style.css";
 ```
 
+Any additional styles (such as Tippy's or intl-tel-input) must be imported manually in the consuming app's entry file
+
 ### Third-party dependencies
 
 Third-party libraries used by you library may bloat up the size of your library, if you simply add them to the `dependencies` in [package.json](package.json).