Code Monkey home page Code Monkey logo

lucca-front's Introduction

Lucca Front

Lucca Front is a modular framework for developing web applications by lucca. It uses sub-packages architecture with unified versioning, à la angular.

Lucca Front contains 3 packages

  • a set of icons
  • a SCSS framework
  • a library of useful angular components

Angular package depends on the SCSS one which depends itself on Icons.

How to install

Add Lucca Front to your npm package

npm install @lucca-front/icons --save
npm install @lucca-front/scss --save
npm install @lucca-front/ng --save

Import packages styles

In your file styles.scss, add imports files and components you want to import to your project:

// Import styles
@forward '@lucca-front/icons/src/main';
@forward '@lucca-front/scss/src/main';
@forward '@lucca-front/ng/src/main';

// Import SCSS components
@forward '@lucca-front/scss/src/components/actionIcon';
@forward '@lucca-front/scss/src/components/box';
@forward '@lucca-front/scss/src/components/breadcrumbs';
@forward '@lucca-front/scss/src/components/button';
@forward '@lucca-front/scss/src/components/buttonGroup';
@forward '@lucca-front/scss/src/components/callout';
@forward '@lucca-front/scss/src/components/card';
@forward '@lucca-front/scss/src/components/checkbox';
@forward '@lucca-front/scss/src/components/chip';
@forward '@lucca-front/scss/src/components/clear';
@forward '@lucca-front/scss/src/components/code';
@forward '@lucca-front/scss/src/components/collapse';
@forward '@lucca-front/scss/src/components/container';
@forward '@lucca-front/scss/src/components/contentSection';
@forward '@lucca-front/scss/src/components/divider';
@forward '@lucca-front/scss/src/components/emptyState';
@forward '@lucca-front/scss/src/components/errorPage';
@forward '@lucca-front/scss/src/components/field';
@forward '@lucca-front/scss/src/components/file';
@forward '@lucca-front/scss/src/components/filters';
@forward '@lucca-front/scss/src/components/form';
@forward '@lucca-front/scss/src/components/formLabel';
@forward '@lucca-front/scss/src/components/gauge';
@forward '@lucca-front/scss/src/components/grid';
@forward '@lucca-front/scss/src/components/grid';
@forward '@lucca-front/scss/src/components/header';
@forward '@lucca-front/scss/src/components/label';
@forward '@lucca-front/scss/src/components/layout';
@forward '@lucca-front/scss/src/components/link';
@forward '@lucca-front/scss/src/components/list';
@forward '@lucca-front/scss/src/components/loading';
@forward '@lucca-front/scss/src/components/main';
@forward '@lucca-front/scss/src/components/menu';
@forward '@lucca-front/scss/src/components/navSide';
@forward '@lucca-front/scss/src/components/notchBox';
@forward '@lucca-front/scss/src/components/pageHeader';
@forward '@lucca-front/scss/src/components/pagination';
@forward '@lucca-front/scss/src/components/progress';
@forward '@lucca-front/scss/src/components/radio';
@forward '@lucca-front/scss/src/components/radioButtons';
@forward '@lucca-front/scss/src/components/section';
@forward '@lucca-front/scss/src/components/sortableList';
@forward '@lucca-front/scss/src/components/statusBadge';
@forward '@lucca-front/scss/src/components/switch';
@forward '@lucca-front/scss/src/components/table';
@forward '@lucca-front/scss/src/components/tableFixed';
@forward '@lucca-front/scss/src/components/tableOfContent';
@forward '@lucca-front/scss/src/components/tableSorted';
@forward '@lucca-front/scss/src/components/tableSticked';
@forward '@lucca-front/scss/src/components/tag';
@forward '@lucca-front/scss/src/components/textfield';
@forward '@lucca-front/scss/src/components/timeline';
@forward '@lucca-front/scss/src/components/timepicker';
@forward '@lucca-front/scss/src/components/title';
@forward '@lucca-front/scss/src/components/titleSection';
@forward '@lucca-front/scss/src/components/toast';
@forward '@lucca-front/scss/src/components/verticalNavigation';

Then comment unused components to reduce LF’s distribution size and compilation time.

To import all components, replace the previous code by the 3 following lines (not recommended):

// Import styles
@forward '@lucca-front/icons/src/main’;
@forward '@lucca-front/scss/src/main-all’;
@forward '@lucca-front/ng/src/main’;

For custom imports, check our advanced usage documentation.

Include paths

In angular.json, we suggest to add a couple of entries to your paths:

"architect": {
  "build": {
    "options": {
      "stylePreprocessorOptions": {
        “includePaths": [
          "src/scss",
          "node_modules",
        ]
      },
    },
  },
},

How to update

In order to activate schematics when they are available, we recommend to update Lucca Front using this command line:

lucca angular update

To check available options:

lucca angular update --help

To update a specific version of Lucca Front (@ points either to a specific version or a npm release channel):

npx ng update @lucca-front/[email protected]

For release:

npx ng update @lucca-front/ng@rc

If you want the latest version you can run this equivalent functions:

npx ng update @lucca-front/ng

or

npx ng update @lucca-front/ng@latest

Storybook

In order to work on Lucca Front, we use Storybook to display components.

  • Install volta.sh
  • Install node volta install node@lts
  • Build Compodoc to avoid errors (To be fixed) npm run compodoc
  • Run storybook npm start

TODO

  • Gestion de l'espace

lucca-front's People

Contributors

alexiaalarza avatar almonais avatar bastienguillon avatar belabb-z avatar bertrandpodevin avatar bmoriniere avatar bsabardu-lucca avatar dependabot-preview[bot] avatar f2x avatar g-drouard avatar guillaumenury avatar guillerot avatar harrich avatar jeanbeaurepaire avatar jefbinomed avatar jeremie-lucca avatar jesuischarlie1 avatar julpellat avatar lamstutz avatar lucasperrault avatar lucienbertin avatar marcfairbrother avatar mathieu-bellange avatar maximegenevier avatar ripripkipkip avatar sanlucca avatar shajz avatar supamiu avatar versinia avatar vvalentin-lucca avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

lucca-front's Issues

Links underlining

mod-link on a button gives it a regular hyperlink look.

Problem is, I find that the spacing between text and underline is way too tight by default. I'd rather give it some extra space.

This could be achieved this way (that also prevents us from having to make the button relatively positioned):

https://codepen.io/benoitpaugam/pen/xPPzOr

This example also shows that sometimes, I would like a decorative element (the "+" sign here) not to be underlined. Which would be perfectly doable.

time input and picker/overlay

have an input that can be plugged to a moment.duration

add possible overlay/picker so we can add 5/15 mins at a time without having to type it

must support inputing in number of days or hours

add dependency.ci

might have some problems with the @lucca-front/scss: 0.0.0-VERSIONPLACEHOLDER

api-picker - adds loader

add a loader in case the api querying gets lost in the internet's tubes

needs timer to avoid flashing if api pulses

lu-api-picker - filter

add @input filter so we can add a filter to the queris to the api

ex: we want to plug an api-picker to /api/v3/currencies?isEnabled=true

ng - redact the contributing.md

about qall the things you need to do to contribute to lucca-front

the diffrents steps to have your component created and added to the demo

api-picker - specify fields

feature of componenet described in #11

add @Input to specify which field are fetched from the api so they can be used in custom templates (see #181) or for the vontrol value

ex : i'm pinging /api/v3/currencies, i may wanna get the currency symbol

formly - polish

  • the type autocomplete is unusable
  • sometimes the select doesnt initiate well and doesnt display the current vaslue

ng-material VS ng-bootstrap

ng-material - ng-bootstrap

the idea is that we're gonna need modals, popovers, tooltips, selects and other usefull components and in the first version we're just gonna let a third party lib do it for us

points to check

  • available features of each lib
  • style overridability

ReX lernajs

could you provide a ReX on lerna and some best practice for using it once you've been using it for 2-3 months.

ngx-translate

assess the need for it and rework its inclusion in the lib

ng-mat demo page

dont forget to mention the date implementation policy from ng mat

api-picker - support paging

feature of componenet described in #11

supoport a form of paging for the api-picker component

you can query api with /api/v3/things?name=like,...&fields=id,name,collection.count&paging=0,10 and it will give you the number of items that satify name=like,... and only the detail of the first 10

Problème d'utilisation du select

Il manque une documentation pour savoir quel import effectuer :/

import { LuSelectModule } from '@lucca-front';
ne fonctionne pas.

Je pense qu'il manque l'ajout de l'import du Select dans: le index.d.ts de ng.

export * from './app/date-range-picker/date-range-picker.module';
export { IDateRangeSelectChoice, IDateRange } from './app/date-range-picker/date-range-picker.model';
export * from './app/user';
export * from './app/popover';
export { LuRootModule } from './app/lu-root.module';
export { LuEmptyModule } from './app/empty';
export * from './app/animations';
export { LuFormlyModule } from './app/formly';
export * from './app/api';

(obliger de faire import { LuSelectModule } from '@lucca-front/ng/src/app/select';)
Uncaught Error: Can't resolve all parameters for LuPopoverComponent

L'impémentation de reactiveForm pose des problèmes.

<div class="textfield mod-block" [formGroup]="innerFormGroup">
  <lu-select
    formControlName="value"
    placeholder="placeholder">
      <lu-select-option *ngFor="let option of format.entries" [luOptionValue]="option">{{option.description}}</lu-select-option>
      <lu-select-clearer></lu-select-clearer>
  </lu-select>
</div>

Donne ERROR Error: No value accessor for form control with name: 'value'. (le formGroup a bien un contrôle 'value').

add travis.ci pr-checks

use prescript to patch package.json or else npm i doesnt work because of the 0.0.0-placeholder used in /ng package

repare daterange picker

i totes commented the current daterange picker for release 0.1, we need to repare it for release 1.0.0

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.