{"id":26397607,"url":"https://github.com/datajango/ng-globus","last_synced_at":"2025-10-29T07:18:33.627Z","repository":{"id":38656978,"uuid":"221246874","full_name":"datajango/ng-globus","owner":"datajango","description":"Angular Component Library","archived":false,"fork":false,"pushed_at":"2022-06-03T00:28:16.000Z","size":2281,"stargazers_count":0,"open_issues_count":4,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2023-03-07T08:22:17.176Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/datajango.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-12T15:12:55.000Z","updated_at":"2020-09-07T19:32:07.000Z","dependencies_parsed_at":"2022-09-03T09:20:37.271Z","dependency_job_id":null,"html_url":"https://github.com/datajango/ng-globus","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datajango%2Fng-globus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datajango%2Fng-globus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datajango%2Fng-globus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datajango%2Fng-globus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/datajango","download_url":"https://codeload.github.com/datajango/ng-globus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244031121,"owners_count":20386534,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-17T12:18:20.364Z","updated_at":"2025-10-29T07:18:33.576Z","avatar_url":"https://github.com/datajango.png","language":"TypeScript","readme":"# Globus - Angular Component Library\r\n\r\n\u003cp align=\"center\"\u003e\r\n    \u003cimg src=\"globe.png\" alt=\"Globe\" title=\"Globus\" width=\"150\" height=\"150\" /\u003e\r\n\u003c/p\u003e\r\n\r\n\r\n## Creation Steps\r\n\r\n1. Create new GitHub Repo\r\n\r\n\u003cp align=\"center\"\u003e\r\n    \u003cimg src=\"01-create-github-repo.png\" alt=\"Create a new github repo\" title=\"Create a new github repo\"/\u003e\r\n\u003c/p\u003e\r\n\r\n2. Default GitHub Repo\r\n\r\n\u003cp align=\"center\"\u003e\r\n    \u003cimg src=\"02-github-repo.png\" alt=\"Github Repo\" title=\"Github Repo\"/\u003e\r\n\u003c/p\u003e\r\n\r\n3. Clone the repo locally.\r\n\r\n```\r\ngit clone git@github.com:datajango/globus.git\r\nCloning into 'globus'...\r\nremote: Enumerating objects: 4, done.\r\nremote: Counting objects: 100% (4/4), done.\r\nremote: Compressing objects: 100% (4/4), done.\r\nremote: Total 4 (delta 0), reused 0 (delta 0), pack-reused 0\r\nReceiving objects: 100% (4/4), done.\r\n```\r\n\r\n4. Open the cloned folder in a text editor, I will be using [Micrsoft Visual Studio Code](https://code.visualstudio.com/docs#vscode)\r\n\r\n5. create a new Angular project using the CLI\r\n\r\n    1. You can test the commend by adding the --dryRun=true option\r\n        ```\r\n        ng new globus --create-application=false --style=scss --routing=false --dryRun=true\r\n        ```\r\n    2. When you ready, execute the below\r\n        ```\r\n        ng new globus --create-application=false --style=scss --routing=false\r\n        ```\r\n    3. Cd into the new folder\r\n        ```\r\n        cd globus\r\n        ```\r\n    4. Next create a Library\r\n        ```\r\n        ng generate library globus-library --dryRun=true\r\n        ng generate library globus-library\r\n        ```\r\n        a prefix could have been applied\r\n        ```\r\n        ng generate library globus-library --prefix=glb\r\n        ```\r\n## Install Story Book\r\n\r\n1. Install Story Book using the NPX command\r\n\r\n    ```\r\n    npx -p @storybook/cli sb init --type angular\r\n    ```\r\n\r\n## Startup Story Book    \r\n\r\n1. Start storybook\r\n\r\n    ```\r\n    npm run storybook\r\n    ```\r\n\r\n1. A local webpack server will be started on port 6006. [local](http://localhost:6006)\r\n\r\n    ![storybook](storybook.png)\r\n\r\n    ```\r\n    Starting type checking service...\r\n    Using 1 worker with 2048MB memory limit\r\n    webpack built c4364c5d4b9d2f4b6656 in 28656ms\r\n    ╭─────────────────────────────────────────────────╮\r\n    │                                                 │\r\n    │   Storybook 5.2.6 started                       │\r\n    │   35 s for manager and 37 s for preview         │\r\n    │                                                 │\r\n    │   Local:            http://localhost:6006/      │\r\n    │   On your network:  http://10.7.51.249:6006/    │\r\n    │                                                 │\r\n    ╰─────────────────────────────────────────────────╯\r\n    ```\r\n\r\n## Creating the first Component\r\n\r\n1. Create a new button\r\n    ```\r\n    ng generate component button --project globus-library --dryRun=true\r\n    ng generate component button --project globus-library\r\n    ```\r\n1. Edit .\\globus\\projects\\globus-library\\src\\lib\\button\\button.component.html\r\n    ```html\r\n    \u003cbutton (click)=\"onclick()\"\u003e\r\n    {{text}}\r\n    \u003c/button\u003e\r\n    ```\r\n1. Edit .\\globus\\projects\\globus-library\\src\\lib\\button\\button.component.ts\r\n    ```typescript\r\n    import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';\r\n\r\n    @Component({\r\n    selector: 'glb-button',\r\n    templateUrl: './button.component.html',\r\n    styleUrls: ['./button.component.css']\r\n    })\r\n    export class ButtonComponent implements OnInit {\r\n\r\n        @Input() text: string;\r\n        @Output() click: EventEmitter\u003cvoid\u003e = new EventEmitter();\r\n\r\n        constructor() { }\r\n\r\n        ngOnInit() {\r\n        }\r\n\r\n        onclick(){\r\n            this.click.emit();\r\n        }\r\n    }\r\n    ```\r\n1. Add a storybbook story for the Button component\r\n\r\n    Storybook is all about writing stories. A story usually contains a single state of one component, almost like a visual test case.\r\n\r\n    ```typescript\r\n    import { storiesOf } from '@storybook/angular';\r\n    import { ButtonComponent } from 'lib-button';\r\n\r\n    storiesOf('button', module)\r\n    .add('basic', () =\u003e ({\r\n        component: ButtonComponent,\r\n        props: {\r\n        text: 'hello'\r\n        }\r\n    }))\r\n    .add('disabled', () =\u003e ({\r\n        component: ButtonComponent,\r\n        props: {\r\n        text: 'disabled',\r\n        disabled: true\r\n        }\r\n    }));\r\n    ```\r\n\r\n    ![Globus Button Storybook](button-storybook.png)\r\n\r\n1. Change to SCSS    \r\n\r\n    1. Install node-sass\r\n\r\n        ```\r\n        npm install -dev node-sass\r\n        ```\r\n\r\n    1. Install some more Storybook packages\r\n\r\n        ```\r\n        npm install @storybook/addon-storysource --save-dev\r\n        npm install to-string-loader --save-dev\r\n        npm install css-loader --save-dev\r\n        ```\r\n\r\n    1. Change .\\globus\\projects\\globus-library\\src\\lib\\button\\button.component.ts\r\n    \r\n        ```typescript\r\n        import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';\r\n\r\n        @Component({\r\n        selector: 'glb-button',\r\n        templateUrl: './button.component.html',\r\n        styleUrls: ['./button.component.scss']\r\n        })\r\n        export class ButtonComponent implements OnInit {\r\n\r\n            @Input() text: string;\r\n            @Input() disabled: boolean = False;\r\n            @Output() click: EventEmitter\u003cvoid\u003e = new EventEmitter();\r\n\r\n            constructor() { }\r\n\r\n            ngOnInit() {\r\n            }\r\n\r\n            onclick(){\r\n                this.click.emit();\r\n            }\r\n        }\r\n        ```\r\n    1. Add some fancy CSS styling\r\n        ```scss    \r\n        $color-foreground: white;\r\n        $color-background: #4CAF50;\r\n        $color-border: darkgreen;\r\n\r\n        .button {\r\n            background-color: $color-background;\r\n            border: 1px solid $color-border; \r\n            color: $color-foreground;\r\n            padding: 8px 16px;\r\n            text-align: center;\r\n            text-decoration: none;\r\n            display: inline-block;\r\n            font-size: 16px;\r\n            border-radius: 16px;\r\n\r\n            -webkit-transition-duration: 0.4s; /* Safari */\r\n            transition-duration: 0.4s;    \r\n\r\n            \u0026:not(.disabled):hover {\r\n                background-color: $color-foreground;\r\n                color: $color-background;\r\n            }       \r\n\r\n            \u0026.disabled {\r\n                opacity: 0.6;\r\n                cursor: not-allowed;\r\n            }    \r\n        }\r\n        ```\r\n\r\n    1. Add the new component to the exports section of .\\globus\\projects\\globus-library\\src\\lib\\globus-library.module.ts\r\n\r\n        ```typescript\r\n        import { NgModule } from '@angular/core';\r\n        import { BrowserModule } from '@angular/platform-browser';\r\n        import { GlobusLibraryComponent } from './globus-library.component';\r\n        import { ButtonComponent } from './button/button.component';\r\n\r\n\r\n\r\n        @NgModule({\r\n        declarations: [GlobusLibraryComponent, ButtonComponent],\r\n        imports: [\r\n            BrowserModule \r\n        ],\r\n        exports: [GlobusLibraryComponent, ButtonComponent]\r\n        })\r\n        export class GlobusLibraryModule { }\r\n        ```\r\n\r\n## Creating a NPM package\r\n\r\n1. Build the Globus library\r\n\r\n    ```\r\n    cd .\\globus\\globus\r\n    ng build globus-library\r\n\r\n    Building Angular Package\r\n\r\n    ------------------------------------------------------------------------------\r\n    Building entry point 'globus-library'\r\n    ------------------------------------------------------------------------------\r\n    Compiling TypeScript sources through ngc\r\n    Bundling to FESM2015\r\n    Bundling to FESM5\r\n    Bundling to UMD\r\n    Minifying UMD bundle\r\n    Copying declaration files\r\n    Writing package metadata\r\n    Built globus-library\r\n\r\n    ------------------------------------------------------------------------------\r\n    Built Angular Package!\r\n    - from: C:\\dev\\globus\\globus\\projects\\globus-library\r\n    - to:   C:\\dev\\globus\\globus\\dist\\globus-library\r\n    ------------------------------------------------------------------------------\r\n    ```\r\n\r\n1. Pack the library into a tarball\r\n\r\n    1. Add to package.json\r\n\r\n        ```\r\n        \"scripts\": {\r\n            ...\r\n            \"pack\": \"cd dist/globus-library \u0026\u0026 npm pack \u0026\u0026 npm link\",\r\n            \"link\": \"cd dist/globus-library \u0026\u0026 npm link\",\r\n            \"publish\": \"cd dist/globus-library \u0026\u0026 npm publish\"\r\n            ...\r\n        }\r\n        ```\r\n\r\n    1. Run the pack command\r\n    \r\n        ```        \r\n        npm run pack\r\n        ```\r\n\r\n        Output:\r\n        ```\r\n        \u003e globus@0.0.0 pack C:\\dev\\globus\\globus\r\n        \u003e cd dist/globus-library \u0026\u0026 npm pack\r\n\r\n        npm notice\r\n        npm notice package: globus-library@0.0.1\r\n        npm notice === Tarball Contents ===\r\n        npm notice 3.0kB esm2015/lib/button/button.component.js\r\n        npm notice 3.3kB esm5/lib/button/button.component.js\r\n        npm notice 1.6kB esm2015/lib/globus-library.component.js\r\n        npm notice 1.9kB esm5/lib/globus-library.component.js\r\n        npm notice 956B  esm2015/globus-library.js\r\n        npm notice 956B  esm5/globus-library.js\r\n        npm notice 3.8kB fesm2015/globus-library.js\r\n        npm notice 4.6kB fesm5/globus-library.js\r\n        npm notice 2.0kB esm2015/lib/globus-library.module.js\r\n        npm notice 2.3kB esm5/lib/globus-library.module.js\r\n        npm notice 1.4kB esm2015/lib/globus-library.service.js\r\n        npm notice 1.6kB esm5/lib/globus-library.service.js\r\n        npm notice 5.3kB bundles/globus-library.umd.js\r\n        npm notice 2.0kB bundles/globus-library.umd.min.js\r\n        npm notice 1.0kB esm2015/public-api.js\r\n        npm notice 1.0kB esm5/public-api.js\r\n        npm notice 2.9kB globus-library.metadata.json\r\n        npm notice 582B  package.json\r\n        npm notice 2.4kB fesm2015/globus-library.js.map\r\n        npm notice 2.4kB fesm5/globus-library.js.map\r\n        npm notice 2.5kB bundles/globus-library.umd.js.map\r\n        npm notice 2.5kB bundles/globus-library.umd.min.js.map\r\n        npm notice 1.1kB README.md\r\n        npm notice 256B  lib/button/button.component.d.ts\r\n        npm notice 152B  lib/globus-library.component.d.ts\r\n        npm notice 155B  globus-library.d.ts\r\n        npm notice 47B   lib/globus-library.module.d.ts\r\n        npm notice 68B   lib/globus-library.service.d.ts\r\n        npm notice 142B  public-api.d.ts\r\n        npm notice === Tarball Details ===\r\n        npm notice name:          globus-library\r\n        npm notice version:       0.0.1\r\n        npm notice filename:      globus-library-0.0.1.tgz\r\n        npm notice package size:  9.7 kB\r\n        npm notice unpacked size: 51.9 kB\r\n        npm notice shasum:        50e28ed92163e9ef027f8248c7ac517ce5f44b1f\r\n        npm notice integrity:     sha512-eR3oiQlcJgRvr[...]/4nIGhio3vIPg==\r\n        npm notice total files:   29\r\n        npm notice\r\n        globus-library-0.0.1.tgz\r\n        ```\r\n  \r\n    1. Run the link command\r\n    \r\n        ```        \r\n        npm run link\r\n        ```\r\n\r\n        output:\r\n        ```       \r\n        \u003e globus@0.0.0 link C:\\dev\\globus\\globus\r\n        \u003e cd dist/globus-library \u0026\u0026 npm link\r\n\r\n        npm notice created a lockfile as package-lock.json. You should commit this file.\r\n        npm WARN globus-library@0.0.1 requires a peer of @angular/common@^8.1.3 but none is installed. You must install peer dependencies yourself.\r\n        npm WARN globus-library@0.0.1 requires a peer of @angular/core@^8.1.3 but none is installed. You must install peer dependencies yourself.\r\n        npm WARN globus-library@0.0.1 No repository field.\r\n        npm WARN globus-library@0.0.1 No license field.\r\n\r\n        added 1 package from 1 contributor and audited 1 package in 6.87s\r\n        found 0 vulnerabilities\r\n        ```\r\n\r\n1. Create an NPM account at command line or goto [npmjs](https://www.npmjs.com/)\r\n\r\n    ```\r\n    npm adduser\r\n    ```\r\n\r\n1. Login to npm on the command line\r\n\r\n    ```\r\n    npm login\r\n    ```\r\n\r\n1. Publish the library to npmjs.com\r\n\r\n    ```        \r\n    npm run publish\r\n    ```\r\n\r\n    Output:\r\n    ```\r\n    \u003e globus@0.0.0 publish C:\\dev\\globus\\globus\r\n    \u003e cd dist/globus-library \u0026\u0026 npm publish\r\n\r\n    npm notice\r\n    npm notice package: globus-library@0.0.1\r\n    npm notice === Tarball Contents ===\r\n    npm notice 3.0kB  esm2015/lib/button/button.component.js\r\n    npm notice 3.3kB  esm5/lib/button/button.component.js\r\n    npm notice 1.6kB  esm2015/lib/globus-library.component.js\r\n    npm notice 1.9kB  esm5/lib/globus-library.component.js\r\n    npm notice 956B   esm2015/globus-library.js\r\n    npm notice 956B   esm5/globus-library.js\r\n    npm notice 3.8kB  fesm2015/globus-library.js\r\n    npm notice 4.6kB  fesm5/globus-library.js\r\n    npm notice 2.0kB  esm2015/lib/globus-library.module.js\r\n    npm notice 2.3kB  esm5/lib/globus-library.module.js\r\n    npm notice 1.4kB  esm2015/lib/globus-library.service.js\r\n    npm notice 1.6kB  esm5/lib/globus-library.service.js\r\n    npm notice 5.3kB  bundles/globus-library.umd.js\r\n    npm notice 2.0kB  bundles/globus-library.umd.min.js\r\n    npm notice 1.0kB  esm2015/public-api.js\r\n    npm notice 1.0kB  esm5/public-api.js\r\n    npm notice 2.9kB  globus-library.metadata.json\r\n    npm notice 582B   package.json\r\n    npm notice 2.4kB  fesm2015/globus-library.js.map\r\n    npm notice 2.4kB  fesm5/globus-library.js.map\r\n    npm notice 2.5kB  bundles/globus-library.umd.js.map\r\n    npm notice 2.5kB  bundles/globus-library.umd.min.js.map\r\n    npm notice 1.1kB  README.md\r\n    npm notice 20.5kB globus-library-0.0.1.tgz\r\n    npm notice 256B   lib/button/button.component.d.ts\r\n    npm notice 152B   lib/globus-library.component.d.ts\r\n    npm notice 155B   globus-library.d.ts\r\n    npm notice 47B    lib/globus-library.module.d.ts\r\n    npm notice 68B    lib/globus-library.service.d.ts\r\n    npm notice 142B   public-api.d.ts\r\n    npm notice === Tarball Details ===\r\n    npm notice name:          globus-library\r\n    npm notice version:       0.0.1\r\n    npm notice package size:  31.4 kB\r\n    npm notice unpacked size: 72.4 kB\r\n    npm notice shasum:        57552f476c527bcad75d623fc05eef6de83a6ba9\r\n    npm notice integrity:     sha512-+NmdMVdbptIxc[...]0y4mTcoEooQpA==\r\n    npm notice total files:   30\r\n    npm notice\r\n    + globus-library@0.0.1\r\n\r\n    ```\r\n\r\n1. Verify that that the package was published to nmpjs.ocom by searching for it.\r\n\r\n    ![Search for Globus-library](npmjs-search.png)\r\n\r\n1. NPMJS should display a very basic package information details page.\r\n\r\n    ![NPM Package Details](npmjs-globus-page.png)\r\n\r\n\r\n## Publishing a New Version Instructions \r\n\r\n    1. Bump the version \r\n    \r\n        ```\r\n        cd dist\r\n        npm version 0.0.2\r\n        ```\r\n\r\n    or \r\n\r\n    1. Edit .\\globus\\package.json\r\n\r\n        ```json\r\n        {\r\n            \"name\": \"globus\",\r\n            \"version\": \"0.0.2\",\r\n            \"scripts\": {\r\n                \"ng\": \"ng\",\r\n            ...\r\n        ```    \r\n\r\n    1. Cd to the project folder\r\n        ```\r\n        cd .\\globus\\globus\r\n        ```\r\n    1. Build the library, --prod is not required anymore ad the AOT version is built by default.\r\n        ```\r\n        ng build globus-library    \r\n        ```\r\n\r\n    1. npm pack\r\n\r\n        ```\r\n        npm run pack\r\n        ```\r\n    \r\n    1. npm link\r\n    \r\n        ```        \r\n        npm run link\r\n        ```\r\n        \r\n    1. npm publish (make sure yoru logged in) first\r\n\r\n        ```\r\n        npm run publish\r\n        ```\r\n\r\n    1. In an applicatiopn that uses the Globus Library do a npm update\r\n\r\n        1. First find outdated packages\r\n            ```\r\n            npm outdated\r\n            ```\r\n        \r\n        1. Do a npm install @latest to make sure you get teh latest version of the Globus Package\r\n            \r\n            ```\r\n            npm install globus-library@latest --save            \r\n            ```\r\n\r\n\r\n## Using the Globus NPM package in a new Angular Project\r\n\r\n1. create a new Angular project\r\n\r\n    ```\r\n    ng new globus-demo\r\n    ```\r\n\r\n\r\n1. cd into the newly create folder\r\n\r\n    ```\r\n    cd globus-demo    \r\n    ```\r\n\r\n1. add the globus-library in .\\src\\app\\app.module.ts\r\n\r\n    ```\r\n    import { BrowserModule } from '@angular/platform-browser';\r\n    import { NgModule } from '@angular/core';\r\n\r\n    import { AppRoutingModule } from './app-routing.module';\r\n    import { AppComponent } from './app.component';\r\n    import { GlobusLibraryModule } from  'globus-library';\r\n\r\n    @NgModule({\r\n    declarations: [\r\n        AppComponent,    \r\n    ],\r\n    imports: [\r\n        BrowserModule,\r\n        AppRoutingModule,\r\n        GlobusLibraryModule    \r\n    ],\r\n    providers: [],\r\n    bootstrap: [AppComponent]\r\n    })\r\n    export class AppModule { }\r\n    ```\r\n\r\n1. It Works!\r\n\r\n\u003ch1\u003eThe Globus Library has been successfully consumed\u003c/h1\u003e\r\n\r\n![Globus Library Consumed](globus-library-consumed.png)\r\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatajango%2Fng-globus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdatajango%2Fng-globus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatajango%2Fng-globus/lists"}