@orangesk/eshop-assets
[< Naspäť](/)
Last updated a day ago by jurajk .
ISC · Repository · Original npm · Tarball · package.json
$ cnpm install @orangesk/eshop-assets 
SYNC missed versions from official npm registry.

< Naspäť

Readme

Toto je hlavný repozitár pre orangesk/eshop. Obsahuje HTML prototypy jednotlivých častí eshopu.

HTML prototypy sú rozčlenené do projektov. Každý projekt má svojho autora (dodávateľ), product ownera (zadávateľ) a resources - odkazy na design files, readme, asana projekt...

Obsah

Build files

  • main.js - ODS a projektove JS a ich inicializacia
  • main.css - ODS a projektove styly
  • ODS.css - ODS štýly
  • ODS.js - ODS javascript moduly a ich inicializácia
  • project.js - projektove JS moduly a ich inicializácia
  • project.css - projektové štýly
  • polyfills.js - polyfilly potrebné pre chod v starších browseroch

NPM balik

Každý release je publikovaný na NPM ako balík @orangesk/eshop-assets.

Balík obsahuje build/lib subory a sprite.svg. Nakoľko je to verejný balík, neobsahuje HTML prototypy.

Ako prispievať?

Nakoľko v repozitári spolupracujú viaceré strany, musíme dodržiavať stanovené pravidlá. Orange design system už definuje pravidlá kvality kódu, pre tento repozitár ale platí nasledovný release proces:

  • Code review vykonáva spravovateľ repozitára.
  • Prispievateľ vždy vytvára pull requesty do dev vetvy podľa branching modelu.
  • Po schválení príspevkov a mergnutí do dev vetvy prispievateľ pripraví release vetvu podľa semver pravidiel, vyplní changelog a vytvorí pull request na vydanie novej verzie.

Štruktúra repozitára

orange-web
├── public # staticke assety, pri builde sa kopiruju do build foldra
└── src
    ├── components # vsetky komponenty (aj patterny)
    ├── layouts # globalne layouty
    │   ├── Base.js # Hlavny layout s megamenu a footrom
    │   └── Docs.js # layout pre dokumentaciu
    ├── lib
    │   ├── main.js # entry point pre projektove JS
    │   ├── ODS.js # entry point pre ODS assety
    │   ├── polyfills.js # polyfilly pre starsie browsre. obsahuje vsetko potrebne pre beh ODS.
    │   └── style.js # entry point pre projektove styly
    ├── pages
    │   ├── index.js # homepage tohto repozitara
    │   ├── readme.mdx # stranka tejto dokumentacie
    │   └── project-name
    │       ├── info.json # project info. povinný súbor
    │       └── page-name.js # konkrétny prototyp
    ├── scripts
    │   ├── index.js # webpack entry. kompiluje sa do build/static.js. tento subor obsahuje VSETKO, pre rozdelenie do casti vid "lib"
    │   ├── main.js # projektove JS. tento subor je oddeleny od index.js, aby mohol mat oddeleny build file.
    │   ├── lib # utility
    │   └── modules # JS pluginy
    ├── styles # globalne styly
    │   └── shame.scss # hanba, hacky
    └── utils # utility potrebne na beh tohto repozitara a zdielane pomocne subory k modulom/komponentom

src/components

React komponenty používané na webe Orange.sk. Obsahuje custom komponenty, ktoré ešte neexistujú v ODS (kandidáti) a opakujúce sa patterny.

orange-web/src/components
├── index.js # entry point ku vsetkym komponentom
└── ComponentName # vzdy camel case
    ├── index.js # entry point ku komponentu, jeho stylom a pripadne JS pluginu
    ├── ComponentName.js # komponent samotny
    ├── ComponentName*Partial*.js # pripadny interny komponent
    ├── ComponentNameStatic.js # JS plugin
    ├── data.js # data zobrazovane komponentom 
    └── styles
        ├── config.scss # scss mapy definuju jednotlive varianty komponentu
        ├── mixins.scss # mixiny generuju styly
        └── config.scss # mixiny vypluvaju styly do konkretnych classnames

Názov projektu

Nový projekt by mal mať vždy názov typu project-name, vzdy lower case, oddeleny pomlckami.


Priečinok data / Dátové mockupy

V obrazovkách prototypov sa často prepoužívajú dáta. Snažme sa vyhýbať vkladaniu konkrétnych dátových štruktúr priamo do obrazovky alebo priamo do komponentu, ktorý využíva tieto dáta.

Data pouzivane na viacerych miestach

src/data slúži na vytváranie potrebných štruktúr, ak sme si istý, že tieto dáta bude využívať viac komponentov/stránok.

src/data
└── file-name.js # vzdy lowercase, oddelene pomlckami

Data pouzivane len v jednom komponent

Componnet/data.js slúži na vytváranie potrebných štruktúr ktoré konzumuje práve jeden komponent.

src/components/Component
└── data.js

Priečinok layouts

Layouts sú hlavné obaľovače kontentu stránky v priečinku pages.

Keďže sú to React komponenty, názov layoutu je vždy CamelCase s prvým písmenom veľkým.

Page je hlavná kostra HTML stránky, ktorú prepoužívajú ostatné layouty ako hlavný obaľovač obsahu. Obsahuje megamenu a footer.

layouts/
└── Page.js
    ...

Priečinok pages

Všetky prototypy stránok rozdelené po projektoch. Ka

Každá stránka by mala mať názov, ktorý čo najpresnejšie popisuje čo sa na stránke nachádza. Ak je viac podobných stránok rozlišujeme ich príponou na konci názvu stránky.

pages/
├── project-name
    ├── info.json # informácie o projekte. povinný súbor.
    ├── readme.mdx # voliteľné doplňujúce informácie o projekte, napríklad popis správania alebo flowu.
    ├── page-name.js # konkrétna stránka
    └── page-name-variant.js # variant stránky
├── index.js # homepage tohto repozitára. zobrazuje projekty a doplňujúce informácie z info.json
└── readme.mdx # toto readme
    ...

Priečinok scripts

Obsahuje projektové javascriptové moduly. Návod ako vytvoriť modul a používať ho

scripts/
  lib/ # pomocné metódy
  modules/ # JS moduly ktoré sa neviažu na konktrétny komponent
  index.js # webpack entry point pre všetok JS
  main.js # inicializácia JS modulov potrebných pre beh všetkého v tomto repozitári. súbor je oddelený od index.js kôli rozdeleniu build-u.

Priečinok styles

Štýly ktoré nepatria ku konrétnym komponentom.

styles/
  shame.scss # Hanba hanbatá sem patrí všetko čo by sa nemalo robiť, ale treba to urobiť. Napríklad rýchly bugfix.

Priečinok utils

Obsahuje menšie pomocné scripty používané pri vytváraní prototypov.

Neptaria sem utility pre JS ktorý beží v prehliadači.

utils/
  classes.js
  helpers.js
  propTypes.js
  ...

Current Tags

  • 0.4.0                                ...           latest (a day ago)

3 Versions

  • 0.4.0                                ...           a day ago
  • 0.3.0                                ...           a month ago
  • 0.2.0                                ...           2 months ago
Downloads
Today 1
This Week 8
This Month 8
Last Day 7
Last Week 0
Last Month 11
Dependencies (19)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |