1.0.30 • Published 3 years ago

@q3-technology/design-system-q3 v1.0.30

Weekly downloads
-
License
ISC
Repository
-
Last release
3 years ago

Custom Design System

This is a custom design system, using :

From this tutorial and video

How to

Add a component/module/template

To add a component, it is in the :

  • src/components
  • src/modules
  • src/templates

Add a folder (CamelCase convention), for exemple :

src/components/Button
  1. Inside this folder you must have the Component.txs, Component.stories.tsx and the index.ts. The index.ts is used to export the component :

    export { default } from "./Button";

  2. Inside the src/components folder you must have an index.ts to export each component inside :

    export { default as Button } from "./Button"
    export { default as ButtonVariant } from "./ButtonVariant"
    ...etc

  3. Finally if there are more type of component folders (like components, modules, templates, etc) inside the src/. You must hava a last index.ts inside src/

src/index.ts
export * from "./components";
export * from "./modules";

This should be like this :

├── src
│   ├── components
|   │   ├── Button
|   |   │   ├── Button.tsx
|   |   │   └── index.ts
|   │   └── index.ts
│   └── index.ts
├── package.json
└── package-lock.json

Update the library

When a change is done, there are 5 steps to do :

  1. Update the version inside package.json (following the semantic versioning)
    "version": "1.0.13" --> "version": 1.0.14"
  2. Commit and push the changes on GitHub or BitBucket
    git add all
    git commit -m 'added component'
    git push ...
  3. Run the bundler Rollup
    npm run rollup
  4. Publish the package
    npm publish
  5. Finally update the version inside your project package.json and re-run
    npm install

Use the design system

To use the design system, you just have to install the package like any npm package :
npm install @Your_Github_Name/Your_repo_name
Then import the component you need in the App :
import { Button } from '@Your_Github_Name/Your_repo_name

1.0.26

3 years ago

1.0.29

3 years ago

1.0.28

3 years ago

1.0.27

3 years ago

1.0.30

3 years ago

1.0.25

3 years ago

1.0.22

3 years ago

1.0.24

3 years ago

1.0.23

3 years ago

1.0.19

3 years ago

1.0.18

3 years ago

1.0.17

3 years ago

1.0.16

3 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.11

3 years ago

1.0.21

3 years ago

1.0.10

3 years ago

1.0.20

3 years ago

1.0.15

3 years ago

1.0.14

3 years ago

1.0.13

3 years ago

1.0.12

3 years ago

1.0.4

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago