{"id":22317139,"url":"https://github.com/oplog/ad-cli","last_synced_at":"2025-07-29T12:30:53.285Z","repository":{"id":57186329,"uuid":"141844590","full_name":"oplog/ad-cli","owner":"oplog","description":"Cli tool \u0026 frontend app structure using atomic design, typescript, redux and more","archived":false,"fork":false,"pushed_at":"2018-10-09T13:47:29.000Z","size":424,"stargazers_count":8,"open_issues_count":1,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-20T15:25:02.071Z","etag":null,"topics":["atomic-design","frontend","react","redux","redux-saga","typescript"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oplog.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-21T20:41:02.000Z","updated_at":"2021-11-27T11:52:37.000Z","dependencies_parsed_at":"2022-09-14T16:22:24.480Z","dependency_job_id":null,"html_url":"https://github.com/oplog/ad-cli","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oplog%2Fad-cli","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oplog%2Fad-cli/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oplog%2Fad-cli/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oplog%2Fad-cli/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oplog","download_url":"https://codeload.github.com/oplog/ad-cli/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228012281,"owners_count":17855984,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["atomic-design","frontend","react","redux","redux-saga","typescript"],"created_at":"2024-12-03T23:08:51.032Z","updated_at":"2024-12-03T23:08:51.655Z","avatar_url":"https://github.com/oplog.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ad\nad is a cli tool to generate application structure \u0026 components using typescript, redux, enzyme and more.\n\nThe following guide is strictly followed for creation of application strucuture;\nhttps://github.com/Microsoft/TypeScript-React-Starter\n\n## Features\n- Atomic design application structure\n- Typescript\n- Generate atom, molecule, organism, template \u0026 pages\n- Redux is enabled by default\n- Generate container components\n- Generate store\n\n## Default app template\nThe default app template of ad cli is the following;\n```\ntest-app\n├── ad-cli.config.default.json\n├── ad-cli.config.json\n├── config\n│   ├── aliases.js\n│   ├── env.js\n│   ├── jest\n│   │   ├── cssTransform.js\n│   │   ├── fileTransform.js\n│   │   └── typescriptTransform.js\n│   ├── paths.js\n│   ├── polyfills.js\n│   ├── webpack.config.dev.js\n│   ├── webpack.config.prod.js\n│   └── webpackDevServer.config.js\n├── images.d.ts\n├── package.json\n├── package-lock.json\n├── public\n│   ├── favicon.ico\n│   ├── index.html\n│   └── manifest.json\n├── README.md\n├── scripts\n│   ├── build.js\n│   ├── start.js\n│   └── test.js\n├── src\n│   ├── components\n│   │   ├── App.tsx\n│   │   ├── atoms\n│   │   ├── index.ts\n│   │   ├── molecules\n│   │   ├── organisms\n│   │   ├── pages\n│   │   └── templates\n│   ├── containers\n│   ├── index.css\n│   ├── index.tsx\n│   ├── logo.svg\n│   ├── registerServiceWorker.ts\n│   └── store\n│       ├── index.ts\n│       └── utils.ts\n├── __tests__\n│   ├── components\n│   │   └── App.test.tsx\n│   ├── setupTests.js\n│   └── utils.ts\n├── tsconfig.json\n├── tsconfig.prod.json\n├── tsconfig.test.json\n└── tslint.json\n\n15 directories, 37 files\n```\nThe template is basically an ejected create react app with a few folders created\n\n## Getting started\nInstall ad-cli package globally\n`$ npm install -g atomic-design-cli`\n\nYou can also clone and link locally\n```\n$ git clone git@github.com:oplog/ad-cli.git\n$ cd ad-cli\n$ npm install\n$ npm run build\n$ npm link\n```\n\n\nCreate a new app\n`$ ad new \u003cappName\u003e`\n\n## What is atomic design\nAtomic design is a new frontend app structure which scales specifically for larger projects. You can read the following learn more;\nhttp://bradfrost.com/blog/post/atomic-web-design/\n\n### Atom\n- Atoms are the basic building blocks of any app. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.\n- To generate an atom;\n```\n$ ad generate:atom Button\nor\n$ ad g:atom Button\n```\nThis command would generate an atom component in your application atom folder\n\n\n### Molecule\n- Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound\n- For example, a form label, input or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together.\n- To generate a molecule;\n```\n$ ad generate:molecule FormInput\nor\n$ ad g:molecule FormInput\n```\n\n### Organism\n- Molecules give us some building blocks to work with, and we can now combine them together to form organisms.\n- Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.\n- Organisms can consist of similar and/or different molecule types. For example, a masthead organism might consist of diverse components like a logo, primary navigation, search form, and list of social media channels\n- To generate an organism;\n```\n$ ad generate:organism LoginForm\nor\n$ ad g:organism LoginForm\n```\n### Template\n- Templates consist mostly of groups of organisms stitched together to form pages\n- To generate a template;\n```\n$ ad generate:template GuestPageTemplate\nor\n$ ad g:template GuestPageTemplate\n```\n### Page\n- Pages are simply instances of templates\n- They are the highest level of fidelity and because they’re the most tangible, it’s typically where most people in the process spend most of their time and what most reviews revolve around.\n- To generate a page;\n```\n$ ad generate:page Login\nor \n$ ad g:page Login\n```\n\n## Store\n- Store folder resides in `src/store`. It is for redux store items namely constants, actions, selectors, types, reducer \u0026 saga\n- To generate a store folder;\n```\n$ ad generate:store user\nor\n$ ad g:store user\n```\nNOTE: Currently, store generation is mostly code with comments. It is planned to generate stores better in the upcoming releases\n\n## Containers\n- Containers are the bridge between redux store \u0026 pure components. They are meant to connect pure components into redux stores\n- To generate a container folder;\n```\n$ ad generate:container User\nor \n$ ad g:container User\n``` \nNOTE: Currently, container generation is mostly code with comments. It is planned to generate containers better in the upcoming releases\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foplog%2Fad-cli","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foplog%2Fad-cli","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foplog%2Fad-cli/lists"}