Sample extensions for different styling methods

[aleksfront]

Adding 3 sample extensions for different styling modifications. All of them based on HelloWorld sample.

• styling-sass-sample extension using Sass
• styling-emotion-sample extension using CSS-in-JS Emotion
• styling-css-modules-sample extension using CSS Modules for class name encapsulation

[ixrock]

API is changed, now page-registration and page-menu-regisration are splitted.
Working example:

  clusterPages = [
    {
      id: "example-page-id",
      components: {
        Page: () => <ExamplePage extension={this}/>,
      }
    }
  ]

  clusterPageMenus = [
    {
      id: this.clusterPages[0].id, // must be the same as in page registration to be visible in sidebar
      title: "Hello World",
      components: {
        Icon: ExampleIcon
      }
    }
  ]

[aleksfront]

Starting the app with described changes and got

Uncaught TypeError: Expected "name" to match "[^\/#\?]+?", but got "@k8slens/styling-css-modules-sample"
    at LensDev.js:402426
    at n.getPageUrl (LensDev.js:521110)
    at LensDev.js:523074
    at Array.map (<anonymous>)
    at PageMenuRegistry.getItems (LensDev.js:523073)
    at Sidebar.render (LensDev.js:636929)
    at allowStateChanges (LensDev.js:334943)
    at LensDev.js:333372
    at trackDerivedFunction (LensDev.js:334726)
    at Reaction../node_modules/mobx/lib/mobx.module.js.Reaction.track (LensDev.js:335760)

with app crash. Something with id?

[ixrock]

Upgrade to:

"@k8slens/extensions": "^4.0.0-beta.1",

[aleksfront]

Adding a url doesn't help either:

clusterPages = [
    {
      id: "extension-example",
      components: {
        Page: () => <ExamplePage extension={this}/>,
      }
    }
  ]

  clusterPageMenus = [
    {
      id: this.clusterPages[0].id, // must be the same as in page registration to be visible in sidebar
      url: `/${this.clusterPages[0].id}`,
      title: "Hello World",
      components: {
        Icon: ExampleIcon
      }
    }
  ]

[ixrock]

Ok, probably better to wait fixes from lensapp/lens#1364

[ixrock]

Did't know about that field. How does it work? Where the list of available plugins?

[aleksfront]

Here is the plugin field documentation https://www.typescriptlang.org/tsconfig#plugins
And here is typescript-plugin-css-modules page https://github.com/mrmckeb/typescript-plugin-css-modules

[ixrock]

probably we should specify top-level theme element more precisely, like body[data-theme="light"]

[aleksfront]

I'm working on this, changes will be in different PR.

[stefcameron]

@aleksfront I had a quick look. It's great that you're providing these samples, thank you! What I don't see is the theme switching use case. How will developers handle that? How will they know when the theme changes? Right now, all I see are different ways to write CSS that uses theme-based CSS variables -- but maybe I missed something since I didn't look closely at everything.

[aleksfront]

@ixrock Samples working with latest (beta 3) extension api types. Please re-review.