@pota/react-skeleton NPM

react-skeleton

You can create a new project using the @pota/create package.

npx @pota/create react my-react-app

The components folder follows atomic design guidelines, with a few additions:

Folder	Description	Example
`/atoms`	The smallest unit, must be self contained and not dependant on any external modules. (types and configuration being the exception)	`Icon`, `Paragraph`, `Heading`
`/molecules`	Must be restrained to only use atoms and minimal internal state.	`Toggle`
`/organisms`	Generally reserved for complex state uses and must use `atoms` or `molecules`.	`Form`
`/layout`	Components whose only function is taking in children and presenting them in a specific layout. Must not use `atoms`, `molecules` or `organisms`.	`Carousel`, `Modal`, `Tabs`
`/pages`	Components which are used as pages.	`Home`, `About`
`/unlisted`	Components which do not fall into any of the above categories.	`App`, global context providers

The config folder is to be used to define any sort of configuration for styles, components or logic.

hidden TODOs

npm run build # or npx pota build

Option	Type	Default	Description
`analyze`	`{Boolean}`	`false`	When enabled, will open a bundle report after bundling.
`cache`	`{Boolean}`	`true`	Toggles webpack's caching behavior.
`image-compression`	`{Boolean}`	`true`	Toggles image compression.
`mode`	`{development\\|production}`	`production`	Override webpack's mode.
`output`	`{String}`	`./build`	The build output directory.
`source-map`	`{false\\|`devtool`}`	`source-map` (production), `eval-source-map` (development)	Sets the style of source-map, for enhanced debugging. Disable or use faster options in you are having out of memory or other performance issues.
`public-path`	`{String}`	`/`	The location of static assets on your production server.
`type-check`	`{Boolean}`	`true`	When disabled, will ignore type related errors.
`versioning`	`{Boolean}`	`false`	When enabled, will copy assets in `./static` to a versioned directory in the output (e.g. `build/version/v2/static/...`).
`profile`	`{Boolean}`	`false`	Toggles support for the React Devtools in production.

npm run dev # or npx pota dev

Option	Type	Default	Description
`cache`	`{Boolean}`	`true`	Toggle webpack's caching behavior.
`https`	`{Boolean}`	`false`	Run the development server with HTTPS.
`image-compression`	`{Boolean}`	`true`	Toggles image compression.
`mode`	`{development\\|production}`	`production`	Override webpack's mode.
`source-map`	`{false\\|`devtool`}`	`source-map` (production), `eval-source-map` (development)	Sets the style of source-map, for enhanced debugging. Disable or use faster options in you are having out of memory or other performance issues.
`type-check`	`{Boolean}`	`true`	Toggles checking for type related errors.

hidden TODOs

Non-Pota scripts defined in "scripts" of package.json and are runnable using npm run {script}

Script	Description
`postinstall`	Run `patch-package` to patch faulty packages.
`build-storybook`	Bundle stories for deployment.
`start-storybook`	Start storybook's development server.
`plop`	Generate a new component's source files.
`test`	Run unit tests.
`fix`	Executes all `fix:*` and `format commands in sequence.
`fix:eslint`	Executes `eslint:lint` and fixes fixable errors.
`format`	Formats the source files using `prettier`.
`lint`	Executes all `lint:*` commands in sequence.
`lint:eslint`	Lints the source files using `eslint`.
`rsync`	Synchronizes (uploads) `dist/` files to a remote server.
`typecheck`	Synchronously runs `typecheck:main` and `typecheck:tools`.
`typecheck:main`	Checks for type errors and unused variables/types in the source directory.
`typecheck:tools`	Checks for type errors and unused variables/types of the various local tools.