alkamin / indigo

Create a chakra-ui based React component library with one command

indigo

Create a chakra-ui based application component library with one command

Libaries created with Indigo are pre-configured with:

• GitHub actions based build process with semantic-release and automated changelog generation and publishing to the GitHub Package Repository (GPR) or NPM
• TypeScript
• Storybook

Getting started

Indigo works with node versions < v15. We encourage using nvm to easily manage your node versions.

If you're using nvm you can ensure you're on the right version with nvm use 14.

$ npx @alkamin/indigo new my-component-library
$ cd my-component-library
$ npm start

CI/CD Configuration

Defining a repository secret named RELEASE_PAT is required for the semantic release workflow. The user who owns the token will be listed as the creator of all releases triggered by the semantic release GitHub action.

Publishing to NPM

If you choose NPM as your publishing method, you will need to provide an NPM token (NPM_TOKEN) to the build process:

• generate an NPM access token -- NPM provides helpful guidance
• in your UI library's repository, create a secret named NPM_TOKEN and set the value to the token you created in the previous step

Changing the commit message format

By default, Indigo configures semantic-release to use the conventionalcommits preset. Read more about conventional commits You can alter the preset setting of the @semantic-release/commit-analyzer and @semantic-release/release-notes-generator plugins in your library's package.json file. Read more about configuring the commit message format

Changing the changelog file

By default, Indigo configures the build process to generate a CHANGELOG.md file. If you'd like to use a different name for the changelog file alter the configuration of the @semantic-release/changelog and @semantic-release/git plugins in your library's package.json file.

• indigo

CLI usage

$ npm install -g @alkamin/indigo
$ indigo COMMAND
running command...
$ indigo (-v|--version|version)
@alkamin/indigo/1.6.2 linux-x64 node-v12.22.5
$ indigo --help [COMMAND]
USAGE
  $ indigo COMMAND
...

Commands

• indigo generate COMPONENTNAME
• indigo help [COMMAND]
• indigo new PACKAGENAME

indigo generate COMPONENTNAME

Scaffold a new component

USAGE
  $ indigo generate COMPONENTNAME

ARGUMENTS
  COMPONENTNAME  the name of the component you want to generate

OPTIONS
  -h, --help   show CLI help
  --skipStory

See code: src/commands/generate/index.ts

indigo help [COMMAND]

display help for indigo

USAGE
  $ indigo help [COMMAND]

ARGUMENTS
  COMMAND  command to show help for

OPTIONS
  --all  see all commands in CLI

See code: @oclif/plugin-help

indigo new PACKAGENAME

Scaffold a new UI library

USAGE
  $ indigo new PACKAGENAME

ARGUMENTS
  PACKAGENAME  the name of the package you want to generate

OPTIONS
  -h, --help  show CLI help
  --useNpm

See code: src/commands/new/index.ts

indigo's Issues

Make `new` command take entity type argument

Instead of having a new command and a generate command, new should just handle an argument for entity type:

• library
• component
• screen

Make code previews open by default

Add the following to the preview.js file parameters const:

docs: {
    source: {
      state: "open",
    },
  },

Separate into template repository and CLI

Make initial README more useful

Make component templates useful

• should export prop type def
• should export const and default

Make "fullscreen" layout default

In preview.js change to:

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  layout: "fullscreen",
};

Ensure all workflows use node 15

Include TS import sorting setup

Make screen generation use viewports designated in indigo settings

Allow for usage of theme-ui instead of Chakra on library creation

Add tsconfig.json to stories directory

{
  "extends": "../tsconfig.json",
  "include": ["../src/**/*", "./**/*"]
}

Allows for intellisense to import from src since stories and src are siblings. Should not effect the build since we specify the config file to use.

Allow setting of default viewports part of library generation

Viewport settings should then be stored in the indigo property of the package.json file.

Include default setup for releasing develop as a beta

Add .gitignore to library template

`workflows` not being put into `.github` directory

Add option to enable Chromatic action

Include eslint setup

Optionally use open-color palette

Add badge to README when NPM is chosen

Add RELEASE_PAT to documentation

Add component generator command

[Security] Workflow semantic-release.yml is using vulnerable action actions/checkout

The workflow semantic-release.yml is referencing action actions/checkout using references v1. However this reference is missing the commit a6747255bd19d7a757dbdda8c654a9f84db19839 which may contain fix to the some vulnerability.
The vulnerability fix that is missing by actions version could be related to:
(1) CVE fix
(2) upgrade of vulnerable dependency
(3) fix to secret leak and others.
Please consider to update the reference to the action.

Make generated components use the centered layout