Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ TBD
1. `npm run test:watch` to start jest in watch mode (recommended)

### Installing A Dependency

1. Run `npm run build`, build will fire off the `tsc` build script for all typescript repos in order of dependency chain. Example: `particle-types` has 0 internal dependencies but other typescript packages depend on it. We would need to run the compiler first on particle-types in order to be able to compile for other typescript packages.
1. Cd into `package/<PACKAGE_NAME>` and run `npm link`, this will link the **lib/bin** or `main/index.js` alias as an alias in your terminal. Example the bin is named (or aliased) `@phase2/particle-cli` therefore running `npx @phase2/particle-cli -v` will invoke the binary file `particle-cli`.
1. Alternatively use `node` to test out a dependency in lib. Example `node packages/particle-cli/lib/bin/particle-cli.js -V`
Expand All @@ -46,9 +45,9 @@ To remove package-lock.json from all levels of the repo simply run this command.
ps -ef | (grep -q -s -R ^$1 package-lock.json && rm -rf package-lock.json) | { grep -v grep || true; }; lerna exec -- ps -ef | (grep -q -s -R ^$1 package-lock.json && rm -rf package-lock.json) | { grep -v grep || true; }
```

To remove all typescript lib files run `npm dev:clean:lib`
To remove all typescript lib files run `npm run dev:clean:lib`

To remove all node_modules in packages run `npm dev:clean:node_modules`
To remove all node_modules in packages run `npm run dev:clean:node_modules`

### Upgrading dependencies

Expand Down
8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
"private": true,
"keywords:": [
"Particle",
"Stencil",
"Storybook",
"Pattern Lab",
"Drupal"
],
"homepage": "https://github.com/phase2/particle#readme",
Expand All @@ -28,9 +28,9 @@
"pretty-check": "prettier --check packages/**/*.js",
"test": "jest",
"test:watch": "jest --watch",
"build": "lerna run --concurrency 1 --scope='{@phase2/particle-types,@phase2/generator-particle-storybook,@phase2/generator-particle-base,@phase2/particle-cli}' tsc",
"dev:clean:node_modules": "lerna exec --parallel --scope='{@phase2/particle-types,@phase2/generator-particle-storybook,@phase2/generator-particle-base,@phase2/particle-cli}' 'rm -rf node_modules'",
"dev:clean:lib": "lerna exec --parallel --scope='{@phase2/particle-types,@phase2/generator-particle-storybook,@phase2/generator-particle-base,@phase2/particle-cli}' 'rm -rf lib/'",
"build": "lerna run --concurrency 1 --scope='{@phase2/particle-types,@phase2/generator-particle-components,@phase2/generator-particle-storybook,@phase2/generator-particle-base,@phase2/particle-cli}' tsc",
"dev:clean:node_modules": "lerna exec --parallel --scope='{@phase2/particle-types,@phase2/generator-particle-components,@phase2/generator-particle-storybook,@phase2/generator-particle-base,@phase2/particle-cli}' 'rm -rf node_modules'",
"dev:clean:lib": "lerna exec --parallel --scope='{@phase2/particle-types,@phase2/generator-particle-components,@phase2/generator-particle-storybook,@phase2/generator-particle-base,@phase2/particle-cli}' 'rm -rf lib/'",
"build:watch": "lerna run --parallel --scope='{@phase2/*,generator-*}' tsc:watch",
"update:check": "ncu && lerna exec --concurrency 1 --no-bail -- ncu",
"update:start": "npm-upgrade && lerna exec --concurrency 1 -- npm-upgrade; npm run lerna:install"
Expand Down
1 change: 1 addition & 0 deletions packages/generator-particle-base/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"directory": "packages/particle-cli"
},
"dependencies": {
"@phase2/generator-particle-components": "^0.0.1",
"@phase2/generator-particle-storybook": "^0.0.1",
"@phase2/particle-types": "^0.0.1",
"chalk": "^4.1.0",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,217 +1,27 @@
import inquirer from 'inquirer'

import {
CustomAnswers,
ConfigOptions,
ConfigurationAnswers,
CSSLibraryOptions,
ComponentLibraryOptions,
FrontendFrameworkOptions,
TestingLibraryOptions,
} from '@phase2/particle-types'

const minMaxOptionsValidate = ({ min, max }: { min: number; max?: number }) => (
answer: Record<string, string>[]
const validateString = (length: number, defaultVal?:string ) => (
answer: string
) => {
if (answer.length < min || (!max ? false : answer.length > max)) {
return `You must choose a minimum of ${min} option(s)${
max ? ` and a maximum of ${max} option(s)` : ''
}`
const defaultText = defaultVal ? `\n Recommended: ${defaultVal}` : ''
if (!answer || answer.length < length) {
return `Please enter a value of at least ${length} characters length.${defaultText}`
}
if (answer.indexOf(' ') > 0) {
return 'Please enter a value name with no spaces'
}
return true
}

export const options: Record<string, CustomAnswers> = {
[ConfigOptions.MODERN_REACT]: {
cssLibrary: CSSLibraryOptions.TAILWIND,
componentLibraryTypes: [ComponentLibraryOptions.STORYBOOK],
frontendFramework: [FrontendFrameworkOptions.REACT],
hasSVG: true,
hasTypescript: true,
testingLibraries: [TestingLibraryOptions.JEST],
typescriptEsm: false,
},
[ConfigOptions.DRUPAL]: {
cssLibrary: CSSLibraryOptions.TAILWIND,
componentLibraryTypes: [ComponentLibraryOptions.PATTERN_LAB],
frontendFramework: [FrontendFrameworkOptions.TWIG],
hasSVG: true,
hasTypescript: false, // TODO find out if there is much benefit especially if most things are TWIG centric
testingLibraries: [
TestingLibraryOptions.CYPRESS,
TestingLibraryOptions.PA11Y,
], // How much JS are we actually using for Twig centric functions
typescriptEsm: false,
},
}

export const configurationPrompt = [
{
type: 'input',
message: 'choose a project name using kebab case, example: "p2-project"',
name: 'projectName',
validate: (name: string) => {
if (!name || name.length < 4) {
return 'Please enter a project name of more than 4 characters length'
}
if (name.indexOf(' ') > 0) {
return 'Please enter a two word project name with no spaces'
}
return true
},
},
export const propOptions = [
{
type: 'input',
message:
'choose a component library name using kebab case. example "project-default"',
name: 'componentLibraryName',
default: 'project-default',
validate: (name: string) => {
if (!name || name.length < 4) {
return 'Please enter a library name of more than 4 characters length'
}
return true
},
message: 'Choose a abbreviation for your/client\'s name. (min 3 chars)',
name: 'nameSpace',
validate: validateString(2)
},
{
type: 'input',
message:
'Where does your component library exist relative to the root of the project',
default: (answers: ConfigurationAnswers) =>
`./source/${answers.componentLibraryName}/`,
name: 'componentLibraryPath',
},
{
type: 'list',
message: 'Choose a configuration',
name: 'config',
choices: [
{
name:
'modern react (storybook, tailwind, react, typescript, jest | cypress, svgs)',
value: ConfigOptions.MODERN_REACT,
},
{
name: 'drupal only (Pattern Lab, Tailwind, Svgs)',
value: ConfigOptions.DRUPAL,
},
{ name: 'custom', value: 'custom' },
],
},
]

export const customPromptOptions = [
{
type: 'checkbox',
message: 'choose a Component Library',
name: 'componentLibraryTypes',
choices: [
new inquirer.Separator('-- Component Library choose(1 or both)--'),
{
name: 'Storybook',
value: ComponentLibraryOptions.STORYBOOK,
checked: true,
},
{
name: 'Pattern Lab',
value: ComponentLibraryOptions.PATTERN_LAB,
},
],
validate: minMaxOptionsValidate({ min: 1 }),
},
{
type: 'checkbox',
message: 'What frontend framework are you using with Storybook?',
name: 'frontendFramework',
choices: [
{
name: 'React',
checked: true,
value: FrontendFrameworkOptions.REACT,
},
{
name: 'Webcomponents',
value: FrontendFrameworkOptions.WEBCOMPONENTS,
},
],
// PR up for docs on inquirer to annotate second param answers https://github.com/SBoudrias/Inquirer.js/pull/936
filter: (value: FrontendFrameworkOptions[], answers: CustomAnswers) => {
if (
answers.componentLibraryTypes.includes(
ComponentLibraryOptions.PATTERN_LAB
)
) {
return [FrontendFrameworkOptions.TWIG, ...value]
}
return value
// throw new Error(answers.componentLibrary)
// input will { answers, values } as we are modifying the return value in the choices section
},
when: (answers: CustomAnswers) => {
// Checks to see if we enabled typescript previously then asks the prompt
if (
new Set(answers.componentLibraryTypes).has(
ComponentLibraryOptions.STORYBOOK
)
) {
return true
}

// Mutates answers object adds twig to selected choice (does not prompt user)
answers.frontendFramework = [FrontendFrameworkOptions.TWIG]

return false
},
},
{
type: 'list',
message: 'Choose a CSS library',
name: 'cssLibrary',
choices: [
{ name: 'Tailwind', checked: true, value: CSSLibraryOptions.TAILWIND },
{ name: 'Sass', value: CSSLibraryOptions.SASS },
{
name: 'Bootstrap',
disabled: true,
value: CSSLibraryOptions.BOOTSTRAP,
},
],
},
{
type: 'confirm',
message: 'Do you want to use typescript?',
name: 'hasTypescript',
},
{
type: 'confirm',
message: 'Do you want ESModule support for typescript?',
name: 'typescriptEsm',
when: (answer: CustomAnswers) => {
// Checks to see if we enabled typescript previously then asks the prompt
if (answer.hasTypescript) {
return true
}
return false
},
},
{
type: 'confirm',
name: 'Are you using SVGs?',
},
{
type: 'checkbox',
message: 'What testing libraries do you want to use?',
name: 'testingLibraries',
choices: [
{ name: 'Jest', value: TestingLibraryOptions.JEST },
{ name: 'Cypress', value: TestingLibraryOptions.CYPRESS },
{ name: 'Selenium', value: TestingLibraryOptions.SELENIUM },
{
name: 'Loki (Storybook only VRT)',
value: TestingLibraryOptions.LOKI,
},
{ name: 'Pa11y', value: TestingLibraryOptions.PA11Y },
],
validate: minMaxOptionsValidate({ min: 1 }),
message: 'Choose a name for the overall project using kebab case. (min 4 chars) Ex: "website", or "saphire-dagger"',
name: 'projectName',
validate: validateString(4)
},
]
Loading