@ng-atomic/schematics 5.1.2 → 5.3.0

package/collection.json

@@ -0,0 +1,62 @@
+{
+  "extends": [],
+  "schematics": {
+    "style-header": {
+      "aliases": ["sh"],
+      "description": "Add style header",
+      "factory": "./src/style-header/index",
+      "schema": "./src/style-header/schema.json"
+    },
+    "atomic-component": {
+      "aliases": ["ac"],
+      "description": "Create an atomic component",
+      "factory": "./src/atomic-component/index#atomicComponent",
+      "schema": "./src/atomic-component/schema.json"
+    },
+    "atom": {
+      "description": "Create an atom.",
+      "factory": "./src/atomic-component/index#atom",
+      "schema": "./src/atomic-component/schema.json"
+    },
+    "molecule": {
+      "description": "Create a molecule.",
+      "factory": "./src/atomic-component/index#molecule",
+      "schema": "./src/atomic-component/schema.json"
+    },
+    "organism": {
+      "description": "Create a organism.",
+      "factory": "./src/atomic-component/index#organism",
+      "schema": "./src/atomic-component/schema.json"
+    },
+    "template": {
+      "description": "Create a template.",
+      "factory": "./src/atomic-component/index#template",
+      "schema": "./src/atomic-component/schema.json"
+    },
+    "frame": {
+      "description": "Create a template.",
+      "factory": "./src/atomic-component/index#frame",
+      "schema": "./src/atomic-component/schema.json"
+    },
+    "page": {
+      "description": "Create a page",
+      "factory": "./src/page/index#page",
+      "schema": "./src/atomic-component/schema.json"
+    },
+    "pages": {
+      "description": "Create a pages",
+      "factory": "./src/pages/index#pages",
+      "schema": "./src/pages/schema.json"
+    },
+    "ng-add": {
+      "description": "Add angular-atomic-schematics",
+      "factory": "./src/ng-add/index",
+      "schema": "./src/ng-add/schema.json"
+    },
+    "setup": {
+      "description": "Setup angular-atomic-schematics",
+      "factory": "./src/setup/index#setup",
+      "schema": "./src/ng-add/schema.json"
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-atomic/schematics",
-  "version": "5.1.2",
+  "version": "5.3.0",
   "license": "MIT",
   "schematics": "./collection.json",
   "ng-add": {

package/src/atomic-component/_test/example.atom.scss

@@ -0,0 +1,6 @@
+@use 'scoped-var/strict' as * with ($host: 'example');
+@use 'atomic/atom' as *;
+
+:host {
+  @include atom($host);
+}

package/src/atomic-component/_test/example.atom.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'atoms-example',
+  templateUrl: './example.atom.html',
+  styleUrls: ['./example.atom.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ExampleAtom implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/atomic-component/files/__name@dasherize__/__name@dasherize__.stories.ts.template

@@ -0,0 +1,26 @@
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Meta, Story } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { <%= classify(name) %><%= classify(type) %>, <%= classify(name) %>Module } from '.';
+
+export default {
+  title: '<%= classify(type) %>s/<%= classify(name) %>',
+  component: <%= classify(name) %><%= classify(type) %>,
+} as Meta;
+
+const ACTIONS = {
+  // eventEmitterName: action('eventEmitterName'),
+};
+
+
+const Template: Story = (args) => ({
+  props: {...args, ...ACTIONS},
+  moduleMetadata: {
+    imports: [
+      <%= classify(name) %>Module,
+    ]
+  }
+});
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/atomic-component/files/__name@dasherize__/index.ts.template

@@ -0,0 +1,2 @@
+export { <%= classify(name) %><%= classify(type) %> } from './<%= dasherize(name) %>.<%= dasherize(type) %>';
+export { <%= classify(name) %>Module } from './<%= dasherize(name) %>.module';

package/src/atomic-component/files/__name@dasherize__/ng-package.json.template

@@ -0,0 +1,11 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/packages/@ng-atomic/components",
+  "lib": {
+    "entryFile": "index.ts",
+    "styleIncludePaths": [
+      "../../../../node_modules",
+      "../../styles"
+    ]
+  }
+}

package/src/atomic-component/index.spec.ts

@@ -0,0 +1,187 @@
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { readFileSync } from 'fs';
+import path from 'path';
+import { join } from 'path';
+import {
+  buildExpectedFilePaths,
+  createWorkspace,
+  defaultWorkspaceOptions,
+  defaultAppOptions,
+  getTestProjectPath,
+  createNxWorkspace,
+} from '../_testing';
+
+const COLLECTION_PATH = path.join(__dirname, '../../collection.json');
+
+describe('AtomicComponent Schematics', () => {
+  const runner = new SchematicTestRunner('@ng-atomic/schematics', COLLECTION_PATH);
+  let tree: UnitTestTree;
+
+  describe('Angular Workspace', () => {
+    beforeEach(async () => {
+      tree = await createWorkspace(runner, tree);
+    });
+  
+    it('should create atomic component files', async () => {
+      const options = {project: 'app', path: '_shared/components', name: 'example'};
+  
+      const { files } = await runner.runSchematicAsync('atomic-component', options, tree).toPromise();
+      expect(files).toContain('/projects/app/src/app/_shared/components/example/example.module.ts');
+      expect(files).toContain('/projects/app/src/app/_shared/components/example/example.component.html');
+      expect(files).toContain('/projects/app/src/app/_shared/components/example/example.component.scss');
+      expect(files).toContain('/projects/app/src/app/_shared/components/example/example.component.spec.ts');
+      expect(files).toContain('/projects/app/src/app/_shared/components/example/example.component.ts');
+      expect(files).toContain('/projects/app/src/app/_shared/components/example/example.stories.ts');
+      expect(files).toContain('/projects/app/src/app/_shared/components/example/index.ts');
+    });
+  
+    it('should create atomic component files', async () => {
+      tree = await runner.runSchematicAsync('atomic-component', {project: 'app', name: '_shared/components/first'}, tree).toPromise();
+      tree = await runner.runSchematicAsync('atomic-component', {project: 'app', name: '_shared/components/second'}, tree).toPromise();
+  
+      const { files } = tree;
+      expect(files).toContain('/projects/app/src/app/_shared/components/first/first.module.ts');
+      expect(files).toContain('/projects/app/src/app/_shared/components/first/first.component.html');
+      expect(files).toContain('/projects/app/src/app/_shared/components/first/first.component.scss');
+      expect(files).toContain('/projects/app/src/app/_shared/components/first/first.component.spec.ts');
+      expect(files).toContain('/projects/app/src/app/_shared/components/first/first.component.ts');
+      expect(files).toContain('/projects/app/src/app/_shared/components/first/first.stories.ts');
+      expect(files).toContain('/projects/app/src/app/_shared/components/first/index.ts');
+
+      expect(files).toContain('/projects/app/src/app/_shared/components/second/second.module.ts');
+      expect(files).toContain('/projects/app/src/app/_shared/components/second/second.component.html');
+      expect(files).toContain('/projects/app/src/app/_shared/components/second/second.component.scss');
+      expect(files).toContain('/projects/app/src/app/_shared/components/second/second.component.spec.ts');
+      expect(files).toContain('/projects/app/src/app/_shared/components/second/second.component.ts');
+      expect(files).toContain('/projects/app/src/app/_shared/components/second/second.stories.ts');
+      expect(files).toContain('/projects/app/src/app/_shared/components/second/index.ts');
+  
+      // const source = tree.read('/projects/app/src/app/_shared/components/index.ts')!.toString('utf-8');
+      // expect(source).toEqual(`export { FirstModule } from './first';\nexport { SecondModule } from './second';`);
+    });
+  
+    it('should create atomic components files in app2', async () => {
+      const options = {project: 'app2', name: '_shared/components/example'};
+      const projectPath = getTestProjectPath(defaultWorkspaceOptions, {...defaultAppOptions, name: 'app2'});
+      const expectedFilePaths = buildExpectedFilePaths(options.name, 'example', projectPath, 'component');
+  
+      const { files } = await runner.runSchematicAsync('atomic-component', options, tree).toPromise();
+      expectedFilePaths.forEach(path => expect(files).toContain(path));
+    });
+
+    describe('given useTypeAsExtension is false', () => {
+      it('should output `example.component.ts`', async () => {
+        const options = {project: 'app2', name: '_shared/components/example', type: 'dialog', useTypeAsExtension: false};
+        const projectPath = getTestProjectPath(defaultWorkspaceOptions, {...defaultAppOptions, name: 'app2'});
+        const expectedFilePaths = buildExpectedFilePaths(options.name, 'example', projectPath, 'component');
+    
+        tree = await runner.runSchematicAsync('atomic-component', options, tree).toPromise();
+        expectedFilePaths.forEach(path => expect(tree.files).toContain(path));
+
+        const inputScss = tree.read('/projects/app2/src/app/_shared/components/example/example.component.scss').toString('utf-8');
+        expect(inputScss.replace(/\s/g, '')).toEqual(`
+          @use 'scoped-var/strict' as * with ($host: 'example');
+          @use 'atomic/dialog' as *;
+
+          :host {
+            @include dialog($host);
+          }
+        `.replace(/\s/g, ''));
+      });
+    });
+  });
+
+  describe('Nx Workspace', () => {
+    beforeEach(async () => {
+      tree = await createNxWorkspace(runner, tree);
+    });
+
+    xit('', async () => {
+      const options = {project: 'app', name: '_shared/components/extras/example'};
+      // const options = {project: 'app', path: '_shared/components/extras', name: 'example'};
+      const { files } = await runner.runSchematicAsync('atomic-component', options, tree).toPromise();
+      expect(files).toContain('/apps/app/src/app/_shared/components/extras/example/example.module.ts');
+    });
+  });
+  
+});
+
+describe('Atom Schematics', () => {
+  const runner = new SchematicTestRunner('@ng-atomic/schematics', COLLECTION_PATH);
+  let tree: UnitTestTree;
+
+  beforeEach(async () => {
+    tree = await createWorkspace(runner, tree);
+  });
+
+  it('should create atom files', async () => {
+    const options = {project: 'app', name: '_shared/components/example'};
+    const projectPath = getTestProjectPath(defaultWorkspaceOptions, {...defaultAppOptions, name: 'app'});
+    const expectedFilePaths = buildExpectedFilePaths(options.name, 'example', projectPath, 'atom');
+    
+    const host = await runner.runSchematicAsync('atom', options, tree).toPromise();
+    expectedFilePaths.forEach(path => expect(host.files.includes(path)).toBeTruthy());
+
+    const inputTs = host.read('/projects/app/src/app/_shared/components/example/example.atom.ts').toString('utf-8');
+    const expectedTs = readFileSync(join(__dirname, '_test/example.atom.ts')).toString();
+    expect(inputTs.replace(/\s/g, '')).toEqual(expectedTs.replace(/\s/g, ''));
+
+    const inputScss = host.read('/projects/app/src/app/_shared/components/example/example.atom.scss').toString('utf-8');
+    const expectedScss = readFileSync(join(__dirname, '_test/example.atom.scss')).toString();
+    expect(inputScss.replace(/\s/g, '')).toEqual(expectedScss.replace(/\s/g, ''));
+  });
+});
+
+describe('Molecule Schematics', () => {
+  const runner = new SchematicTestRunner('@ng-atomic/schematics', COLLECTION_PATH);
+  let tree: UnitTestTree;
+
+  beforeEach(async () => {
+    tree = await createWorkspace(runner, tree);
+  });
+
+  it('should create molecule files', async () => {
+    const options = {project: 'app', name: '_shared/components/example'};
+    const projectPath = getTestProjectPath(defaultWorkspaceOptions, {...defaultAppOptions, name: 'app'});
+    const expectedFilePaths = buildExpectedFilePaths(options.name, 'example', projectPath, 'molecule');
+    
+    const { files } = await runner.runSchematicAsync('molecule', options, tree).toPromise();
+    expectedFilePaths.forEach(path => expect(files.includes(path)).toBeTruthy());
+  });
+});
+
+describe('Organism Schematics', () => {
+  const runner = new SchematicTestRunner('@ng-atomic/schematics', COLLECTION_PATH);
+  let tree: UnitTestTree;
+
+  beforeEach(async () => {
+    tree = await createWorkspace(runner, tree);
+  });
+
+  it('should create organism files', async () => {
+    const options = {project: 'app', name: '_shared/components/example'};
+    const projectPath = getTestProjectPath(defaultWorkspaceOptions, {...defaultAppOptions, name: 'app'});
+    const expectedFilePaths = buildExpectedFilePaths(options.name, 'example', projectPath, 'organism');
+    
+    const { files } = await runner.runSchematicAsync('organism', options, tree).toPromise();
+    expectedFilePaths.forEach(path => expect(files.includes(path)).toBeTruthy());
+  });
+});
+
+describe('Template Schematics', () => {
+  const runner = new SchematicTestRunner('@ng-atomic/schematics', COLLECTION_PATH);
+  let tree: UnitTestTree;
+
+  beforeEach(async () => {
+    tree = await createWorkspace(runner, tree);
+  });
+
+  it('should create template files', async () => {
+    const options = {project: 'app', name: '_shared/components/example'};
+    const projectPath = getTestProjectPath(defaultWorkspaceOptions, {...defaultAppOptions, name: 'app'});
+    const expectedFilePaths = buildExpectedFilePaths(options.name, 'example', projectPath, 'template');
+    
+    const { files } = await runner.runSchematicAsync('template', options, tree).toPromise();
+    expectedFilePaths.forEach(path => expect(files.includes(path)).toBeTruthy());
+  });
+});

package/src/atomic-component/schema.json

@@ -0,0 +1,138 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "SchematicsAngularComponent",
+  "title": "Angular Component Options Schema",
+  "type": "object",
+  "description": "Creates a new generic component definition in the given or default project.",
+  "properties": {
+		"path": {
+      "type": "string",
+      "format": "path",
+      "description": "The path at which to create the component file, relative to the current workspace. Default is a folder with the same name as the component in the project root.",
+      "visible": false
+    },
+    "project": {
+      "type": "string",
+      "description": "The name of the project.",
+      "$default": {
+        "$source": "projectName"
+      }
+    },
+    "name": {
+      "type": "string",
+      "description": "The name of the component.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "What name would you like to use for the component?"
+    },
+    "displayBlock": {
+      "description": "Specifies if the style will contain `:host { display: block; }`.",
+      "type": "boolean",
+      "default": false,
+      "alias": "b"
+    },
+    "inlineTemplate": {
+      "description": "When true, includes template inline in the component.ts file. By default, an external template file is created and referenced in the component.ts file.",
+      "type": "boolean",
+      "default": false,
+      "alias": "t",
+      "x-user-analytics": 10
+    },
+    "viewEncapsulation": {
+      "description": "The view encapsulation strategy to use in the new component.",
+      "enum": ["Emulated", "Native", "None", "ShadowDom"],
+      "type": "string",
+      "alias": "v",
+      "x-user-analytics": 11
+    },
+    "changeDetection": {
+      "description": "The change detection strategy to use in the new component.",
+      "enum": ["Default", "OnPush"],
+      "type": "string",
+      "default": "OnPush",
+      "alias": "c"
+    },
+    "prefix": {
+      "type": "string",
+      "description": "The prefix to apply to the generated component selector.",
+      "alias": "p",
+      "oneOf": [
+        {
+          "maxLength": 0
+        },
+        {
+          "minLength": 1,
+          "format": "html-selector"
+        }
+      ]
+    },
+    "style": {
+      "description": "The file extension or preprocessor to use for style files.",
+      "type": "string",
+      "default": "scss",
+      "enum": [
+        "scss",
+        "sass"
+      ],
+      "x-user-analytics": 5
+    },
+		"type": {
+      "type": "string",
+      "description": "Adds a developer-defined type to the filename, in the format \"name.type.ts\"."
+    },
+    "skipTests": {
+      "type": "boolean",
+      "description": "When true, does not create \"spec.ts\" test files for the new component.",
+      "default": false,
+      "x-user-analytics": 12
+    },
+    "flat": {
+      "type": "boolean",
+      "description": "When true, creates the new files at the top level of the current project.",
+      "default": false
+    },
+    "skipImport": {
+      "type": "boolean",
+      "description": "When true, does not import this component into the owning NgModule.",
+      "default": false,
+      "x-user-analytics": 18
+    },
+    "selector": {
+      "type": "string",
+      "format": "html-selector",
+      "description": "The HTML selector to use for this component."
+    },
+    "skipSelector": {
+      "type": "boolean",
+      "default": false,
+      "description": "Specifies if the component should have a selector or not."
+    },
+    "module":  {
+      "type": "string",
+      "description": "The declaring NgModule.",
+      "alias": "m"
+    },
+    "export": {
+      "type": "boolean",
+      "default": false,
+      "description": "When true, the declaring NgModule exports this component.",
+      "x-user-analytics": 19
+    },
+		"styleHeader": {
+			"type": "string",
+			"default": "@use 'scoped-var/strict' as * with ($host: '{name}');\n@use 'atomic/{type}' as *;\n:host {\n\t@include {type}($host);\n}\n",
+			"description": "scss header template. you can use template engine like `($host: '{name}.{type}'`. "
+		},
+    "useTypeAsExtension": {
+      "type": "boolean",
+      "default": true,
+      "description": "When false, atomic component extension should be `.component.ts`"
+    }
+  },
+  "required": [
+    "name"
+  ]
+}
+

package/src/ng-add/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "ngx-atomic-schematics-ng-add",
+  "title": "Angular Atomic Schematics ng-add schematic",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "Name of the project.",
+      "$default": {
+        "$source": "projectName"
+      }
+    },
+    "componentsDir": {
+      "description": "Setup components directory",
+      "type": "string",
+      "default": "_shared/components",
+      "x-prompt": "Where do you setup Angular Atomic Components?" 
+    },
+		"stylesDir": {
+			"description": "Setup styles directory",
+			"type": "string",
+			"default": "src/styles",
+			"x-prompt": "Where do you setup Angular Atomic Styles?\nIf you use Nx workspace you should input `apps/app/src/styles`"
+
+		}
+  },
+  "required": []
+}

package/src/page/_test/example.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Routes, RouterModule } from '@angular/router';
+import { ExamplePage } from './example.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ExamplePage,
+    // loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule)
+  }
+];
+
+@NgModule({
+  declarations: [
+    ExamplePage
+  ],
+  imports: [
+    CommonModule,
+    RouterModule.forChild(routes)
+  ],
+  exports: [
+    ExamplePage
+  ]
+})
+export class ExampleModule { }

package/src/page/_test/example.page.scss

@@ -0,0 +1,6 @@
+@use 'scoped-var/strict' as * with ($host:'example');
+@use 'atomic/page' as *;
+
+:host {
+  @include page($host);
+}

package/src/page/_test/example.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'pages-example',
+  templateUrl: './example.page.html',
+  styleUrls: ['./example.page.scss']
+})
+export class ExamplePage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/page/index.spec.ts

@@ -0,0 +1,37 @@
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { readFileSync } from 'fs';
+import { join } from 'path';
+import { COLLECTION_PATH, createWorkspace } from '../_testing';
+
+describe('Page Schematics', () => {
+  const runner = new SchematicTestRunner('@ng-atomic/schematics', COLLECTION_PATH);
+  let tree: UnitTestTree;
+
+  beforeEach(async () => {
+    tree = await createWorkspace(runner, tree);
+  });
+
+  it('should create atomic component files', async () => {
+    const options = {project: 'app', name: 'example'};
+    const host = await runner.runSchematicAsync('page', options, tree).toPromise();
+    expect(host.files.includes('/projects/app/src/app/pages/pages.module.ts')).toBeTruthy();
+    expect(host.files.includes('/projects/app/src/app/pages/example/example.module.ts')).toBeTruthy();
+    expect(host.files.includes('/projects/app/src/app/pages/example/example.page.html')).toBeTruthy();
+    expect(host.files.includes('/projects/app/src/app/pages/example/example.page.scss')).toBeTruthy();
+    expect(host.files.includes('/projects/app/src/app/pages/example/example.page.spec.ts')).toBeTruthy();
+    expect(host.files.includes('/projects/app/src/app/pages/example/example.page.ts')).toBeTruthy();
+
+    const inputModuleTs = host.read('/projects/app/src/app/pages/example/example.module.ts').toString('utf-8');
+    const expectedModuleTs = readFileSync(join(__dirname, '_test/example.module.ts')).toString('utf-8');
+    expect(inputModuleTs.replace(/\s/g, '')).toEqual(expectedModuleTs.replace(/\s/g, ''));
+
+    const inputTs = host.read('/projects/app/src/app/pages/example/example.page.ts').toString('utf-8');
+    const expectedTs = readFileSync(join(__dirname, '_test/example.page.ts')).toString('utf-8');
+    expect(inputTs.replace(/\s/g, '')).toEqual(expectedTs.replace(/\s/g, ''));
+
+    const inputScss = host.read('/projects/app/src/app/pages/example/example.page.scss').toString('utf-8');
+    const expectedScss = readFileSync(join(__dirname, '_test/example.page.scss')).toString('utf-8');
+    expect(inputScss.replace(/\s/g, '')).toEqual(expectedScss.replace(/\s/g, ''));
+    
+  });
+});

package/src/pages/files/__name@dasherize__/__name@dasherize__.module.ts.template

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';<% if (commonModule) { %>
+import { CommonModule } from '@angular/common';<% } %>
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [
+];
+
+@NgModule({
+  declarations: [],
+  imports: [<% if (commonModule) { %>
+    CommonModule,<% } %>
+    RouterModule.forChild(routes)
+  ]
+})
+export class <%= classify(name) %>Module { }

package/src/pages/index.spec.ts

@@ -0,0 +1,17 @@
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { COLLECTION_PATH, createWorkspace } from '../_testing';
+
+describe('Pages Schematics', () => {
+  const runner = new SchematicTestRunner('@ng-atomic/schematics', COLLECTION_PATH);
+  let tree: UnitTestTree;
+
+  beforeEach(async () => {
+    tree = await createWorkspace(runner, tree);
+  });
+
+  it('should create component files', async () => {
+    const options = {project: 'app', name: 'pages'};
+    const { files } = await runner.runSchematicAsync('pages', options, tree).toPromise();
+    expect(files.includes('/projects/app/src/app/pages/pages.module.ts')).toBeTruthy();
+  });
+});

package/src/pages/schema.json

@@ -0,0 +1,44 @@
+{
+    "$schema": "http://json-schema.org/schema",
+    "$id": "SchematicsAngularModule",
+    "title": "Angular Module Options Schema",
+    "type": "object",
+    "description": "Creates a new generic NgModule definition in the given or default project.",
+    "properties": {
+      "name": {
+        "type": "string",
+        "description": "The name of the NgModule.",
+        "$default": {
+          "$source": "argv",
+          "index": 0
+        },
+        "x-prompt": "What name would you like to use for the NgModule?"
+      },
+      "path": {
+        "type": "string",
+        "format": "path",
+        "description": "The path at which to create the NgModule, relative to the workspace root.",
+        "visible": false
+      },
+      "project": {
+        "type": "string",
+        "description": "The name of the project.",
+        "$default": {
+          "$source": "projectName"
+        }
+      },
+      "commonModule": {
+        "type": "boolean",
+        "description": "When true, the new NgModule imports \"CommonModule\". ",
+        "default": true,
+        "visible": false
+      },
+      "lintFix": {
+        "type": "boolean",
+        "default": false,
+        "description": "When true, applies lint fixes after generating the module.",
+        "x-user-analytics": 15
+      }
+    },
+    "required": []
+  }

package/src/setup/files/atomic/_atom.scss

@@ -0,0 +1,6 @@
+@use 'scoped-var' as *;
+@use 'atomic/component' as *;
+
+@mixin atom($host) {
+  @include component($host);
+}

package/src/setup/files/atomic/_component.scss

@@ -0,0 +1,5 @@
+@use 'scoped-var' as *;
+
+@mixin component($host) {
+  display: block;
+}

package/src/setup/files/atomic/_molecule.scss

@@ -0,0 +1,6 @@
+@use 'scoped-var' as *;
+@use 'atomic/component' as *;
+
+@mixin molecule($host) {
+  @include component($host);
+}

package/src/setup/files/atomic/_organism.scss

@@ -0,0 +1,6 @@
+@use 'scoped-var' as *;
+@use 'atomic/component' as *;
+
+@mixin organism($host) {
+	@include component($host);
+}

package/src/setup/files/atomic/_page.scss

@@ -0,0 +1,6 @@
+@use 'scoped-var' as *;
+@use 'atomic/component' as *;
+
+@mixin page($host) {
+	@include component($host);
+}

package/src/setup/files/atomic/_template.scss

@@ -0,0 +1,6 @@
+@use 'scoped-var' as *;
+@use 'atomic/component' as *;
+
+@mixin template($host) {
+	@include component($host);
+}

package/src/setup/index.spec.ts

@@ -0,0 +1,37 @@
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { COLLECTION_PATH, createWorkspace } from '../_testing';
+import { get } from 'lodash';
+
+describe('Setup Schematics', () => {
+  const runner = new SchematicTestRunner('@ng-atomic/schematics', COLLECTION_PATH);
+  let tree: UnitTestTree;
+
+  beforeEach(async () => {
+    tree = await createWorkspace(runner, tree);
+  });
+
+  it('should create component files', async () => {
+    const options = {project: 'app', name: 'pages'};
+    const host = await runner.runSchematicAsync('setup', options, tree).toPromise();
+    const angularJson = JSON.parse(host.read('/angular.json').toString('utf-8'));
+    expect(get(angularJson, 'cli.defaultCollection')).toEqual('@ng-atomic/schematics');
+    const schematicsJson = get(angularJson, 'projects.app.schematics');
+
+    for (const type of ['atom', 'molecule', 'organism', 'template']) {
+      expect(get(schematicsJson, `@ng-atomic/schematics:${type}`))
+        .toEqual({path: `_shared/components/${type}s`});
+    }
+
+    const architectJson = get(angularJson, 'projects.app.architect');
+    expect(get(architectJson, 'build.options.stylePreprocessorOptions.includePaths'))
+      .toContain('src/styles');
+
+    for (const type of ['component', 'atom', 'molecule', 'organism', 'template', 'page']) {
+      expect(host.files).toContain(`/src/styles/atomic/_${type}.scss`);
+    }
+
+    const tsconfigJson = JSON.parse(host.read('/tsconfig.json').toString('utf-8'));
+    expect(get(tsconfigJson, 'compilerOptions.paths.@components')).toContain('_shared/components');
+    expect(get(tsconfigJson, 'compilerOptions.paths.@components/*')).toContain('_shared/components/*');
+  });
+});

package/src/style-header/_test/example.scss

@@ -0,0 +1,6 @@
+@use 'scoped-var/strict' as * with ($host: 'example');
+@use 'atomic/component' as *;
+
+:host {
+  @include component($host);
+}

package/src/style-header/index.spec.ts

@@ -0,0 +1,43 @@
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { readFileSync } from 'fs';
+import path from 'path';
+import { join } from 'path';
+import { createWorkspace } from '../_testing';
+
+const COLLECTION_PATH = path.join(__dirname, '../../collection.json');
+
+describe('StyleHeader', () => {
+  const runner = new SchematicTestRunner('@ng-atomic/schematics', COLLECTION_PATH);
+  let tree: UnitTestTree;
+
+  beforeEach(async () => {
+    tree = await createWorkspace(runner, tree);
+    const options = {project: 'app', style: 'scss', name: 'example', skipImport: true };
+    tree = await runner.runExternalSchematicAsync('@schematics/angular', 'component', options, tree).toPromise();
+  });
+
+  describe('given all options', () => {
+    it('should be added style header', async () => {
+      const PATH = '/projects/app/src/app/example/example.component.scss';
+      const options = {path: PATH, name: 'example', type: 'component'};
+  
+      await runner.runSchematicAsync('style-header', options, tree).toPromise();
+      const input = tree.read(PATH).toString('utf-8');
+      const expected = readFileSync(join(__dirname, '_test/example.scss')).toString();
+      expect(input.replace(/\s/g, '')).toEqual(expected.replace(/\s/g, ''));
+    });
+  });
+
+  describe('given only options.path', () => {
+    it('should be added style header', async () => {
+      const PATH = '/projects/app/src/app/example/example.component.scss';
+      const options = {path: PATH};
+  
+      await runner.runSchematicAsync('style-header', options, tree).toPromise();
+      const input = tree.read(PATH).toString('utf-8');
+      const expected = readFileSync(join(__dirname, '_test/example.scss')).toString();
+      expect(input.replace(/\s/g, '')).toEqual(expected.replace(/\s/g, ''));
+    });
+  });
+
+});

package/src/style-header/schema.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "SchematicsAngularComponent",
+  "title": "Style Header Options Schema",
+  "type": "object",
+  "description": "Creates a new generic component definition in the given or default project.",
+  "properties": {
+		"path": {
+      "type": "string",
+      "format": "path",
+      "description": "The path at which to create the component file, relative to the current workspace. Default is a folder with the same name as the component in the project root.",
+      "visible": false
+    },
+    "styleHeader": {
+			"type": "string",
+			"default": "@use 'scoped-var/strict' as * with ($host: '{name}');\n@use 'atomic/{type}' as *;\n:host {\n\t@include {type}($host);\n}\n",
+			"description": "scss header template. you can use template engine like `($host: '{name}.{type}'`. "
+		}
+  },
+  "required": ["path"]
+}
+