From c32b1adf5ce210ebcf303a5ab18681e3049507f9 Mon Sep 17 00:00:00 2001 From: Anthony Rey Date: Sat, 31 Aug 2024 09:20:55 +0200 Subject: [PATCH] Update text informations --- README.md | 18 ++++ package-lock.json | 4 +- package.json | 2 +- src/cli/generate-project/atomic/src/index.pug | 8 +- src/cli/generate-project/common/README.md | 83 +++++-------------- 5 files changed, 48 insertions(+), 67 deletions(-) diff --git a/README.md b/README.md index 1ed184d..32b0546 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,24 @@ This command line interface will allow you to generate new Tikui components. - [Node.js](https://nodejs.org) +## Install + +```shell +npm i -g @tikui/cli +``` + +## Generate a pattern library + +```shell +tikui generate my-pattern-library +``` + +This will create a new folder `my-pattern-library` with the basic structure of a pattern library. + +Then you can follow the README.md file in the generated folder to create your own components. + +More info can be found in the [Tikui documentation](https://tikui.org/doc.html). + ## Install as developer First of all build the application using: diff --git a/package-lock.json b/package-lock.json index 379a515..dec62eb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@tikui/cli", - "version": "2.4.0", + "version": "2.4.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@tikui/cli", - "version": "2.4.0", + "version": "2.4.1", "license": "MIT", "dependencies": { "@types/fs-extra": "^11.0.4", diff --git a/package.json b/package.json index bbcc24c..3af74bd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@tikui/cli", - "version": "2.4.0", + "version": "2.4.1", "description": "Command lines tool for Tikui", "main": "index.js", "files": [ diff --git a/src/cli/generate-project/atomic/src/index.pug b/src/cli/generate-project/atomic/src/index.pug index b2a9eca..023ff09 100644 --- a/src/cli/generate-project/atomic/src/index.pug +++ b/src/cli/generate-project/atomic/src/index.pug @@ -19,9 +19,9 @@ block content .tikui-vertical-spacing--line pre code.language-html. - <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> - - <link rel="stylesheet" href="{DOMAIN}/tikui.css" /> + | #{''} + | #{''} + | #{''} .tikui-vertical-spacing--line p.tikui-paragraph em Pug @@ -34,7 +34,7 @@ block content .tikui-vertical-spacing--line h2.tikui-title-section Documentation .tikui-vertical-spacing--line - p.tikui-paragraph The Style have an #[a.tikui-link(href='http://atomicdesign.bradfrost.com' target='_blank') Atomic Design] organization. + p.tikui-paragraph The Style have an #[a.tikui-link(href='http://atomicdesign.bradfrost.com' target='_blank') Atomic Design] structure. .tikui-vertical-spacing--line ul.tikui-list li diff --git a/src/cli/generate-project/common/README.md b/src/cli/generate-project/common/README.md index 20376b7..b99cbe3 100644 --- a/src/cli/generate-project/common/README.md +++ b/src/cli/generate-project/common/README.md @@ -26,9 +26,11 @@ In development, you can run the application locally on [localhost:3000](http://l npm run serve ``` -### Tutorial +### Create a component -To generate the global structure of the component below, you can use [Tikui CLI](https://github.com/tikui/tikui-cli) command (install `tikui` using `npm i -g @tikui/cli`), and then from the root of your project, run: +First of all, the source folder `src` follows the [Atomic Design](http://atomicdesign.bradfrost.com/table-of-contents/) methodology. + +Here is an example of how to create a `button` component: ```bash tikui create -p tikui button src/atom @@ -39,87 +41,46 @@ tikui create -p tikui button src/atom > - `tikui help` to see the global help > - `tikui help create` to see a command help, here `create` -#### Create a component - -The source folder `src` follows the [Atomic Design](http://atomicdesign.bradfrost.com/table-of-contents/) methodology. - -To make your first component, we will take an atom example: a button. - -Inside `src/atom/atom.pug`, you have to describe your button by adding an inclusion at the end of the file: +You can add inside the `src/atom/atom.pug` file: ```pug include:componentDoc(height=55) button/button.md ``` -> You can also use `include:templateDoc button/button.md` if you don't want to see the component render, it's useful on bigger components like templates. - -Now, you have to create your atom by adding the button folder and the button documentation as a markdown file: - -```bash -mkdir src/atom/button -touch src/atom/button/button.md -``` - -In `button.md` file we can add: +> Note: [Pug](https://pugjs.org) is the template engine used by **Tikui** and indentations are important. -```markdown -## Button - -A simple button. -``` +> You can also use `include:templateDoc button/button.md` if you don't want to see the component render, it's useful on bigger components like templates. -Now, you can open the [button](http://localhost:3000/atom/atom.html#button) from the atom menu, inside your browser (serve is needed). +By default, there is only one style file in the `src` folder: `tikui.scss`. -### Components Parts +It's because you're free to create your own structure even if we recommend you to follow the Atomic Design methodology. -You can see a title `Button`, a content `A simple button` and two files to create: +So you may need to create the file: ```bash -touch src/atom/button/button.render.pug -touch src/atom/button/button.code.pug -``` - -> The file `button.render.pug` represents the render of your component and `button.code.pug` represents its code. - -Inside `button.render.pug`, you can add: - -```pug -extends /layout - -block body - include button.code.pug -``` - -And inside `button.code.pug`: - -```pug -button.tikui-button Button +touch src/atom/_atom.scss ``` -### Style +And then, inside `tikui.scss`: -Then you can see a button on the browser. Now, you have to change the appearance of this button on `_atom.scss` and `_button.scss` files: - -```bash -touch src/atom/_atom.scss -touch src/atom/button/_button.scss +```scss +@use 'atom/atom'; ``` -Before going into these two new files, edit the default scss file: - -Inside `tikui.scss`: +Inside `src/atom/_atom.scss`: ```scss -@import 'atom/atom'; +@use 'button/button'; ``` -Inside `_atom.scss`: +And inside `button.mixin.pug`: -```scss -@import 'button/button'; +```pug +mixin tikui-button + button.tikui-button Button ``` -Inside `_button.scss`: +Inside `src/atom/button/_button.scss`: ```scss .tikui-button { @@ -134,3 +95,5 @@ Inside `_button.scss`: ``` As you can see in the browser, there is a documented blue button with an example of code. + +More info can be found in the [component documentation](https://tikui.org/doc/component-doc.html) of **Tikui**.