Feature/as library usage #256

Lenivaya · 2021-10-21T15:11:55Z

Updates

Publishing

For publishing purposes, there are some changes in architecture based on rendering responsibility (gui used as library isn’t supposed to do any rendering things, just export components/gui as a widget)

index.ts is a library starting point responsible for exporting data-story as a widget without rendering it
render.ts is side-effect responsible for rendering application and bundling it to the public folder (won’t be included in published library)

Some other changes described below

Modules system

GUI is being built with both esm and cjs support

Styles

Styles are being divided on such groups

app (minimal css for displaying gui)
fonts (css for including fonts)
icons (css for including icons)

Fonts / icons

fontawesome icons now controlled via npm package
will be included in published library as optional css

Types

Included in published library

Imports from core

Related to data-story-org/core#149

For better backward compatibility we're using direct imports instead of imports from pre-defined subpaths, so it’s possible to use gui with older versions of bundlers.

Dependencies

dependencies needed only for development moved to devDependencies
react specified as a peerDependency, so no dependency collision when gui is used in another project

Misc

Styles

diagram has dynamic width
modals has little transition effects for opening and closing

appName, appDesc

Now that properties are constants in code, so no need to pass them via global window variable

Notes

react-diagrams and React.StrictMode

For some reasons usage of react StrictMode with react-diagrams in development mode throws errors. As this is not direct gui problem it’s nice to mention somewhere that disabling StrictMode must fix that problem.

projectstorm/react-diagrams#598 (comment)

Release workflow

Needs specified NPM_TOKEN in repo secrets to publish gui

Example of usage gui as library in another react app

Here’s how gui can be imported and used

import { DataStory } from "@data-story-org/gui";
import "@data-story-org/gui/lib/styles/app.css";
import "@data-story-org/gui/lib/styles/icons.css";
import "@data-story-org/gui/lib/styles/fonts.css";

return (
    <DataStory />
)

OKOOWDx.mp4

don't set explicit width

So when used as library gui can't break projects that still depends on older webpack or react-scripts versions that can't handle subpath exports defined in package.json

- index.ts is responsible for exporting data-story as a widget without rendering it - render.ts is side-effect responsible for rendering application and bundling it to the public folder (won't be included in published library)

ajthinking · 2021-10-22T19:44:55Z

Doing it like this:

npx create-react-app test2
cd test2
yarn add file:../gui
yarn start

then adding component

import { DataStory } from "@data-story-org/gui";
import "@data-story-org/gui/lib/styles/app.css";
import "@data-story-org/gui/lib/styles/icons.css";
import "@data-story-org/gui/lib/styles/fonts.css";


function App() {
return (
  <div className="App">
  		<DataStory />
  </div>
);
}

export default App;

Still gives that error. See: https://github.com/ajthinking/test2. Can you run yarn && yarn start and see in browser on your machine?

Lenivaya · 2021-10-22T21:19:41Z

Still gives that error. See: https://github.com/ajthinking/test2. Can you run yarn && yarn start and see in browser on your machine?

All works as it should for me, just add core to dependencies

"@data-story-org/core": "latest",

If you still have some problems try re-initialize node_modules for gui also

ajthinking · 2021-10-22T21:58:10Z

All works as it should for me, just add core to dependencies

Why would I need that? gui already has core as its own dependency?

Tried adding core as a dep, nuking gui and test apps node modules, same error.

Can you show your sample app?

Lenivaya · 2021-10-22T22:57:11Z

Tried adding core as a dep, nuking gui and test apps node modules, same error.

It's pretty strange because exactly the same repo with just a couple of changes in package.json works as shown in my previous commentary

"@data-story-org/core": "latest",
"@data-story-org/gui": "file:../gui",

Can you show your sample app?

It doesn't differ much from the default react template used in test 2 repo,

gui_embedding.zip

ajthinking · 2021-10-22T23:10:22Z

gui_embedding.zip gives me same error, once I click to render <DataStory>
I have fresh gui on branch feature/as_library_usage, its up to date, freshly yarn build. Anything else I can try? 😅

Lenivaya · 2021-10-23T15:25:13Z

Anything else I can try?

Well as far as I can tell the problem must be in dependency collision. Can you run this command in react app and give the output?

npm list react

There will most likely be an extraneous react version which causes that error

ajthinking · 2021-10-23T16:02:51Z

Yes!

I tested removing react from gui/node_modules, got me a bit further, then:

at

Lenivaya · 2021-10-23T16:39:05Z

Yes!

So without node_modules folder in gui (as it supposed to be when app is published as source code in packages registry) all must work without problems

Looks like some artifacts from old versions of gui when stories were saved in different format without circular data support. Cleaning up storage for the localhost:3000 must fix that error

ajthinking · 2021-10-23T17:36:43Z

Cleaning up storage for the localhost:3000 must fix that error

Yes!! Works perfectly now! Thanks for the guidance

ajthinking

comments

I see we can do <DataStory appElement={'body'} /> now, this is great, probably something we want to continue on to allow user to pass more configurations, like which server to use or even their own server implementation could be passed there, which then would go into the rootStore.

gui build

Lots of warnings like

  ╷
6 │   font-size: (4em / 3);
  │               ^^^^^^^
  ╵
    node_modules/@fortawesome/fontawesome-free/scss/_larger.scss 6:15     @import
    node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss 8:9  @import
    src/sass/icons.scss 1:9                                               root stylesheet

: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

css files

Any reason why we cant/shouldnt provide one file for everything?

import "@data-story-org/gui/lib/styles/app.css";
import "@data-story-org/gui/lib/styles/icons.css";
import "@data-story-org/gui/lib/styles/fonts.css";

Lenivaya · 2021-10-26T16:20:30Z

Lots of warnings

: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Must be fixed with a new version of fontawesome FortAwesome/Font-Awesome#17940

Any reason why we cant/shouldnt provide one file for everything?

The idea was to give user abillity to use his own copies or even different fonts, but for now yes it can be minimized to just one app css

ajthinking · 2021-10-26T17:10:16Z

Must be fixed with a new version of fontawesome FortAwesome/Font-Awesome#17940

👍

The idea was to give user abillity to use his own copies or even different fonts

Nice idea, lets remember it for later if needed

ajthinking · 2021-10-27T07:09:10Z

Fixes #232

ajthinking · 2021-10-29T21:44:45Z

@Lenivaya this ready to merge?

ajthinking · 2021-10-30T06:42:24Z

Added NPM_TOKEN in repository settings, as well as NPM_PUBLISH_TOKEN_CREATED_30_10_2021 in the organisation. They are the same secret in npmjs.org

…y_usage

Lenivaya added 29 commits October 19, 2021 15:43

generate type declarations

0255e0b

target es6

35297b4

configure folders included to build

09f92bd

ignore type declarations in src folder

9d088b6

put types declarations to the types folder

269d143

add scripts for delivering gui as library

02b6f11

don't set app name and description via global window

b29f7b3

get rid of useless handler in isLoadingHOC

ef3a7e4

better types for the setLoading

1fb4582

don't export pages

74ae6fb

update modal styles

a3d62e3

update diagram styles

8a89bb5

don't set explicit width

little changes and formattings

33feba8

use wider supported imports from core

ccc41bf

So when used as library gui can't break projects that still depends on older webpack or react-scripts versions that can't handle subpath exports defined in package.json

add id for the App component

660b057

add render.ts for handling side effects

06395ec

- index.ts is responsible for exporting data-story as a widget without rendering it - render.ts is side-effect responsible for rendering application and bundling it to the public folder (won't be included in published library)

bundle types to lib/types

7b9a912

ignore render when building library code

b8f7312

add separate css's for icons and fonts

d7c4c41

reset some styles for gui widget

1fe5382

add release workflow

c5a5a9b

configure prepublish scripts

50b83c7

set files to be published as library

12925c2

ignore lib folder

6d07851

dependencies re-work

451e3a1

use scrollbar styles only in app elements

417ab82

fix unit tests

b189f11

bundle latest gui

d7404cf

fix e2e tests

9a96281

Lenivaya requested a review from ajthinking October 21, 2021 21:55

Lenivaya added 4 commits October 23, 2021 19:39

reset margin for the data-story used as widget

dc2217b

add core to peerDependencies

d6e9d7d

fix e2e tests

f2359b0

fix Edit e2e test

84079b8

ajthinking approved these changes Oct 23, 2021

View reviewed changes

Lenivaya added 6 commits October 24, 2021 22:56

remove important from tailwind config

a4b71d8

set fonts via extend property

a752414

import fonts and icons by default

369b330

use another color for field description

4e0d627

add installation instructions

037baee

add note about using React.StrictMode

9b66a49

Lenivaya added 2 commits November 4, 2021 15:40

resolve conflicts

db8f5cf

Merge remote-tracking branch 'upstream/master' into feature/as_librar…

d99846b

…y_usage

Lenivaya merged commit 35b093e into data-story-org:master Nov 4, 2021

Lenivaya deleted the feature/as_library_usage branch November 4, 2021 14:03

ajthinking mentioned this pull request Jan 3, 2022

Is this library or a tool? #232

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/as library usage #256

Feature/as library usage #256

Lenivaya commented Oct 21, 2021 •

edited

Loading

ajthinking commented Oct 22, 2021 •

edited

Loading

Lenivaya commented Oct 22, 2021

ajthinking commented Oct 22, 2021

Lenivaya commented Oct 22, 2021

ajthinking commented Oct 22, 2021

Lenivaya commented Oct 23, 2021

ajthinking commented Oct 23, 2021

Lenivaya commented Oct 23, 2021

ajthinking commented Oct 23, 2021

ajthinking left a comment

Lenivaya commented Oct 26, 2021

ajthinking commented Oct 26, 2021

ajthinking commented Oct 27, 2021

ajthinking commented Oct 29, 2021

ajthinking commented Oct 30, 2021

Feature/as library usage #256

Feature/as library usage #256

Conversation

Lenivaya commented Oct 21, 2021 • edited Loading

Updates

Publishing

Modules system

Styles

Fonts / icons

Types

Imports from core

Dependencies

Misc

Styles

appName, appDesc

Notes

react-diagrams and React.StrictMode

Release workflow

Example of usage gui as library in another react app

ajthinking commented Oct 22, 2021 • edited Loading

Lenivaya commented Oct 22, 2021

ajthinking commented Oct 22, 2021

Lenivaya commented Oct 22, 2021

ajthinking commented Oct 22, 2021

Lenivaya commented Oct 23, 2021

ajthinking commented Oct 23, 2021

Lenivaya commented Oct 23, 2021

ajthinking commented Oct 23, 2021

ajthinking left a comment

Choose a reason for hiding this comment

comments

gui build

css files

Lenivaya commented Oct 26, 2021

ajthinking commented Oct 26, 2021

ajthinking commented Oct 27, 2021

ajthinking commented Oct 29, 2021

ajthinking commented Oct 30, 2021

Lenivaya commented Oct 21, 2021 •

edited

Loading

ajthinking commented Oct 22, 2021 •

edited

Loading