Add package generator

[mkrl]

[FX-NNNN]

Description

Updates outdated tutorials on package generation and adds a new Hygen generator to insert packages.

How to test

• Temploy
• Checkout the branch
• Run yarn generate:package and follow the instructions:
  • BASE packages should be automatically created in packages/base
  • Normal packages will be added to packages
  • After generation is finished, you should be instantly able to import new code from any other module (you can try the autocomplete)
• Look for any of the required files that are missing in the generated package

Development checks

• [n/a] Add changeset according to guidelines (if needed)
• Read CONTRIBUTING.md and Component API principles
• [n/a] Make sure that additions and changes on the design follow Toptal's BASE design, and it's been already discussed with designers at #-base-core
• [n/a] Annotate all props in component with documentation
• [n/a] Create examples for component
• Ensure that deployed demo has expected results and good examples
• [n/a] Ensure the changed/created components have not caused accessibility issues. How to use accessibility plugin in storybook.
• Self reviewed
• [n/a] Covered with tests (visual tests included)

All development checks should be done and set checked to pass the
GitHub Bot: TODOLess action

PR commands

List of available commands:

• @toptal-bot run package:alpha-release - Release alpha version
• @toptal-anvil ping reviewers - Ping FX team for review

PR Review Guidelines

When to approve? ✅

You are OK with merging this PR and

1. You have no extra requests.
2. You have optional requests.
   1. Add nit: to your comment. (ex. nit: I'd rename this variable from makeCircle to getCircle)

When to request changes? ❌

You are not OK with merging this PR because

1. Something is broken after the changes.
2. Acceptance criteria is not reached.
3. Code is dirty.

When to comment (neither ✅ nor ❌)

You want your comments to be addressed before merging this PR in cases like:

1. There are leftovers like unnecessary logs, comments, etc.
2. You have an opinionated comment regarding the code that requires a discussion.
3. You have questions.

How to handle the comments?

1. An owner of a comment is the only one who can resolve it.
2. An owner of a comment must resolve it when it's addressed.
3. A PR owner must reply with ✅ when a comment is addressed.

[changeset-bot]

⚠️ No Changeset found

Latest commit: d408e4b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[dmaklygin]

can we do the following?

Suggested change

	{
	<%
	function resolvePath(base, relative) {
	return isBasePackage ? base : relative;
	}
	const references = [
	{ "path": resolvePath('../../picasso-provider', '../picasso-provider') },
	{ "path": resolvePath('../../picasso-tailwind', '../picasso-tailwind') },
	{ "path": resolvePath('../../picasso-tailwind-merge', '../picasso-tailwind-merge') },
	{ "path": resolvePath('../Utils', '../base/Utils') }
	];
	%>
	{
	// Extend the base tsconfig
	"extends": "<%= resolvePath('../../../tsconfig.base.json', '../../tsconfig.base.json') %>",

[mkrl]

Good idea, in theory you should be able to run any JS in ejs templates, but I've not tried it. Not sure if it will work, I'll give it a try tomorrow.

[dmaklygin]

Good job!

[TomasSlama]

tested locally, works well