anhar-ts-test v0.0.6

Techstars-ui

Overview

This repo is to create a shared React library component for any techstars app to incorporate into their ecosystem.

This library will be stateless (no state management) core components of atoms such as:

• Button
• Input Field
• Textarea
• Select
• Checkbox
• Radio
• Notification
• Header (and Subheader)
• More to come...

To use on your app

In your app's UI/SPA Base Directory:

0. Pre-req: setup Github Registry Guide here
1. Required: copy .npmrc file to directory
2. Run: npm install --save @techstars/techstars-ui
3. Example below:

import { TestComponent } from '@techstars/techstars-ui'
...

const MyPageOrComponent = () => {
    return (
        <>
            <TestComponent heading='Techstars' content='Engineering' />
        </>
    )
}

To contribute

Pre-req (one time):

• Run: npm i

To Create a new component:

• Run: npm run generate {YOUR_COMPONENT_NAME}
  • example: npm run generate textarea
• It will create a component folder inside ./src/{YOUR_COMPONENT_NAME} aka ./src/textarea/...

To see it via storybook:

• Run: npm run storybook
• Storybook will create a server and you can now see it via http://localhost:6006

To see your local @techstars/techstars-ui new or updated component(s) reflected on your app:

• Run: npm run build
• Because the components are written via typescript, it will build/compile into a ./build folder into javascript -- which is where your app can use it.
• In your app (not this repo), to see updated component, you can do either:

1. via npm link: https://docs.npmjs.com/cli/v7/commands/npm-link
2. via npm file path install:
   • Update package.json: from: "@techstars/techstars-ui": "0.0.1" to: "@techstars/techstars-ui": "file:../techstars-ui"
   • note: file:../techstars-ui is relative path to your app's base directory
   • for example: this would be file:../techstars-ui
     • repos
       • my-app-spa:
         • package.json
           • "@techstars/techstars-ui": "file:../techstars-ui"
       • techstars-ui:
         • package.json

To publish: TBA

Github Registry Configurations

Github Documentation

Using @techstars/techstars-ui in another project

To use directly from github in your packages, you will need to set up .npmrc with a github personal access token so you're authenticated with our private github package registry.

See above link for how to generate a personal access token.

Once you have your token, add a .npmrc file either to ~ or the project root where you want to use this library. The file should look like this:

@techstars:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken={YOUR_ACCESS_TOKEN_HERE}