ui-components issueshttps://gitlab.linguala.com/linguala/ui-components/-/issues2022-03-17T00:25:10Zhttps://gitlab.linguala.com/linguala/ui-components/-/issues/88Fix npm installation warnings2022-03-17T00:25:10ZTobias Thüringt.thuering@linguala.comFix npm installation warningsTry to reduce warnings by updating dependencies
* [ ] npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
* [ ] npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#depr...Try to reduce warnings by updating dependencies
* [ ] npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
* [ ] npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
* [ ] npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
* [ ] npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
* [ ] npm WARN deprecated rollup-plugin-url@3.0.1: This module has been deprecated and is no longer maintained. Please use @rollup/plugin-url.
* [ ] npm WARN deprecated querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
* [ ] npm WARN deprecated sane@4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
* [ ] npm WARN deprecated eslint-plugin-standard@5.0.0: standard 16.0.0 and eslint-config-standard 16.0.0 no longer require the eslint-plugin-standard package. You can remove it from your dependencies with 'npm rm eslint-plugin-standard'. More info here: https://github.com/standard/standard/issues/1316
* [ ] npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
* [ ] npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
* [ ] npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
* [ ] npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
* [ ] npm WARN deprecated @storybook/addon-knobs@6.4.0: deprecating @storybook/addon-knobs in favor of @storybook/addon-controls
* [ ] npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.https://gitlab.linguala.com/linguala/ui-components/-/issues/86rollup: babel runtime bundle optimization2021-01-06T14:29:34ZTobias Thüringt.thuering@linguala.comrollup: babel runtime bundle optimizationChange from babelHelpers: 'inline' to 'runtime' and adjust dependencies & rollup external dependencies
https://gitlab.linguala.com/linguala/ui-components/-/merge_requests/132#note_7407Change from babelHelpers: 'inline' to 'runtime' and adjust dependencies & rollup external dependencies
https://gitlab.linguala.com/linguala/ui-components/-/merge_requests/132#note_7407Tobias Thüringt.thuering@linguala.comTobias Thüringt.thuering@linguala.com2021-01-13https://gitlab.linguala.com/linguala/ui-components/-/issues/80Refactor Headings2022-06-22T10:03:54ZAlessandro PittoriRefactor HeadingsUse Heading1, etc. for heading names and add Heading1-Heading6 components.Use Heading1, etc. for heading names and add Heading1-Heading6 components.1.0.0 Startseitehttps://gitlab.linguala.com/linguala/ui-components/-/issues/79Theme structure2022-06-18T19:29:54ZAlessandro PittoriTheme structure# Ideas for sematic theme structure
```javascript
const theme = {
// spacing
spaces: {
between: {
items: '1rem',
subgroups: '2rem',
groups: '4rem',
sections: '6rem',
youNameIt: 'literally anything',...# Ideas for sematic theme structure
```javascript
const theme = {
// spacing
spaces: {
between: {
items: '1rem',
subgroups: '2rem',
groups: '4rem',
sections: '6rem',
youNameIt: 'literally anything',
},
sides: '1rem', // margin or padding left & right to keep page content from crashing into screen sides
},
// content width
maxWidths: {
text: '18rem', // the maximum width a text block should have. can be used for other things too, though, such as form elements.
page: '38rem', // the maximum width a the main page content should have. ideally this would be `2` * `text` + `some space in between`, but the in-between space might vary depending on context
},
mediaQueries: {
mobile: '@media screen and (min-width: 20rem)', // mobile width = text width. mind the spacing on the sides.
tablet: '@media screen and (min-width: 40rem)', // tablet width = page width
desktop: '@media screen and (min-width: 60rem)', // larger screens have a different layout.
},
}
```
## Why?
It's usually obvious which value to use.
### Spacing
Need to space two buttons in a container? `spaces.between.items`. Need to know what space comes after a paragraph when the next element is a heading? `spaces.between.sections`.
### Media
Layout on mobile and tablet can be the same (one long column). Layout on desktop can be more complex, because there is more space.
`______` page width
`--` text width
* Mobile: text is the width of the device
```
|__|
|--|
|--|
|--|
```
* Tablet: layout is a comfortable distance from screen borders
```
|______|
| -- |
| -- |
| -- |
```
* Desktop: doesn't require as much scrolling and layout is a comfortable distance from screen borders
```
| ______ |
| -- -- |
| -- |
```https://gitlab.linguala.com/linguala/ui-components/-/issues/77Bug: New Button breaks in Marketplace2022-06-22T10:05:05ZTobias Thüringt.thuering@linguala.comBug: New Button breaks in MarketplaceNew Button (alpha.6) vs Old Button (alpha.5)
![image](/uploads/d7f17b373402b967874d4c8858633243/image.png) vs ![image](/uploads/a1ef1c7a4613402680bcf3aaed7db170/image.png)
![image](/uploads/7c51995011ea1b66ab73c2ba809616f7/image.png) v...New Button (alpha.6) vs Old Button (alpha.5)
![image](/uploads/d7f17b373402b967874d4c8858633243/image.png) vs ![image](/uploads/a1ef1c7a4613402680bcf3aaed7db170/image.png)
![image](/uploads/7c51995011ea1b66ab73c2ba809616f7/image.png) vs ![image](/uploads/2cd93cdd9d2381acb1fdd893df8f750c/image.png)
![image](/uploads/8c3e73845e359b26eb063a1263ca13a0/image.png) vs ![image](/uploads/624059910dd2a47f2384ef03c1648bbf/image.png)
Action:
A) Revert changes in alpha.6
B) Fix it, by adapting to previous existing API (same props).
Suggestion:
Fix Design:
- Minimum width
- padding
- margin
Props & API
- storybook test with different states as used in marketplace
- children prophttps://gitlab.linguala.com/linguala/ui-components/-/issues/75Storybook: reference ui-icons & ui-pictograms components storybook2020-08-11T08:16:38ZTobias Thüringt.thuering@linguala.comStorybook: reference ui-icons & ui-pictograms components storybookAfter Storybook 6 we can do this https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#60-inline-stories / https://github.com/storybookjs/storybook/pull/9210:
```js
// main.js
module.exports = {
stories: [`${__dirname}/stori...After Storybook 6 we can do this https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#60-inline-stories / https://github.com/storybookjs/storybook/pull/9210:
```js
// main.js
module.exports = {
stories: [`${__dirname}/stories/*.*`],
addons: [
'@storybook/addon-roundtrip/register',
'@storybook/addon-parameter/register',
'@storybook/addon-preview-wrapper/register',
],
refs: {
inception: 'https://storybookjs-next.now.sh/dev-kits/iframe.html',
},
};
```
I would like to add
* [ ] ui-icons (deployed at https://linguala.lng.li/ui-icons/ )
* [ ] ui-pictograms (deployed at https://linguala.lng.li/ui-pictograms/ )
Depends on #74https://gitlab.linguala.com/linguala/ui-components/-/issues/73Multiline Text ellipsis component2022-06-22T10:05:03ZTobias Thüringt.thuering@linguala.comMultiline Text ellipsis componentHide description content (not just single line, but multiline)
![image](/uploads/048b01554c99a254833c5df7b593784a/image.png)
Requirements:
* [ ] add story with different examples
* different amount of lines
* different amount of w...Hide description content (not just single line, but multiline)
![image](/uploads/048b01554c99a254833c5df7b593784a/image.png)
Requirements:
* [ ] add story with different examples
* different amount of lines
* different amount of words
* maybe different orientation (Left to right / right to left)?
* [ ] Use only CSS if possible. (Multiline css is a bit complicated, use a pre-existing node module (maybe https://reactjsexample.com/cross-browser-multiline-text-ellipsis-for-react/ ?) or something proven to work in all browsers with least amount of javascript)
Needed props:
* description: Text with possibly very long content
* locShowMore: localized "show more" string, which should be passed from outside (do not hardcode values!)
* (optional): how many lines should be allowed
* (optional): expansion handler
Functionality:
* If description text has many characters/words, have a way to set text ellipsis on multiple lines. Show only x amount of words or characters on default render
* Allow to show whole description on clicking or touching "Show more" text.Marktplatz: Agentur 3. Öffentlich sichtbarer Marktplatzhttps://gitlab.linguala.com/linguala/ui-components/-/issues/71Change stories folder layout?2020-07-16T09:07:25ZTobias Thüringt.thuering@linguala.comChange stories folder layout?I see that people might get confused by the current layout with atoms/molecules/organism stories and components in similar folder names.
Would it make sense to move the stories into the component folder?
Or shall we keep it as is?I see that people might get confused by the current layout with atoms/molecules/organism stories and components in similar folder names.
Would it make sense to move the stories into the component folder?
Or shall we keep it as is?https://gitlab.linguala.com/linguala/ui-components/-/issues/68Use normalize.css package2020-07-15T11:56:05ZAlessandro PittoriUse normalize.css packageUse https://www.npmjs.com/package/normalize.css instead of a file.Use https://www.npmjs.com/package/normalize.css instead of a file.https://gitlab.linguala.com/linguala/ui-components/-/issues/67Bug: FiveStarRating should always flow in a row, not column2022-06-22T10:04:11ZTobias Thüringt.thuering@linguala.comBug: FiveStarRating should always flow in a row, not column* [ ] fix by adding `flex-direction: row` or
* [ ] do the same and add an option to allow for column layout if we have a usecase, but I don't see any atm* [ ] fix by adding `flex-direction: row` or
* [ ] do the same and add an option to allow for column layout if we have a usecase, but I don't see any atm3.1.0 Öffentlich sichtbarer Marktplatz: Branche gewählt (Übersetzung & Dolmetschen)https://gitlab.linguala.com/linguala/ui-components/-/issues/66Test media queries with themeGet2020-06-03T12:31:11ZDamien ThillTest media queries with themeGethttps://gitlab.linguala.com/linguala/ui-components/-/issues/63Marketplace Section2022-06-22T10:04:14ZTobias Thüringt.thuering@linguala.comMarketplace Section![image](/uploads/785ddcbaeb1bea4abdbb86c71a0b3875/image.png)
This should be a molecule inside AlternateBackground Component.
Make sure the title, description & "call to action"-button content is injected translation Text, pass it via ...![image](/uploads/785ddcbaeb1bea4abdbb86c71a0b3875/image.png)
This should be a molecule inside AlternateBackground Component.
Make sure the title, description & "call to action"-button content is injected translation Text, pass it via props1.0.0 Startseitehttps://gitlab.linguala.com/linguala/ui-components/-/issues/62Welcome Section as Hero Component (Molecule)2022-06-22T10:04:13ZTobias Thüringt.thuering@linguala.comWelcome Section as Hero Component (Molecule)![image](/uploads/fa8e057fbacb17ec77761ec4378016e7/image.png)
This should be a molecule inside AlternateBackground Component.
Make sure the title, subtitle content is injected translation Text, pass it via props![image](/uploads/fa8e057fbacb17ec77761ec4378016e7/image.png)
This should be a molecule inside AlternateBackground Component.
Make sure the title, subtitle content is injected translation Text, pass it via props1.0.0 Startseitehttps://gitlab.linguala.com/linguala/ui-components/-/issues/60Feature: Switch to es module exports2021-06-16T18:04:19ZTobias Thüringt.thuering@linguala.comFeature: Switch to es module exportsWe currently bundle to es modules and commonjs with rollup.
This could stay, but our code has still to be transformed with babel to commonjs (`require()` syntax) or processed in storybook with webpack with es compatible module loaders i...We currently bundle to es modules and commonjs with rollup.
This could stay, but our code has still to be transformed with babel to commonjs (`require()` syntax) or processed in storybook with webpack with es compatible module loaders in storybook (related to #52 and #13).
This increases build-time and once storybook is compatible with mjs (probably @storybook/react@6.0.0), we should switch the sources to mjs file extensions to use modules natively with node 14+ for all other javascript file extensions than jsx.
## jsx
.jsx still requires a transformer to .js or .mjs.
Once storybook does not rely on the webpack package resolver (which is not compatible to native es-modules yet), we can switch fully to a non-babel setup and only transpile jsx.
## other file extensions
Other file extensions for images or fonts should come from external packages bundled to js and be added as peerDependencies.https://gitlab.linguala.com/linguala/ui-components/-/issues/52Specify target platform for bundling2020-05-24T15:11:40ZTobias Thüringt.thuering@linguala.comSpecify target platform for bundlingBy restricting to certain browsers & common used versions we can reduce the bundle-size and loading-times.
Using [@babel/preset-modules](https://github.com/babel/preset-modules) we could minimize babels transforms and in consequence the...By restricting to certain browsers & common used versions we can reduce the bundle-size and loading-times.
Using [@babel/preset-modules](https://github.com/babel/preset-modules) we could minimize babels transforms and in consequence the bundle-size.
Related to #9https://gitlab.linguala.com/linguala/ui-components/-/issues/51Setup commitlint2020-05-27T07:55:35ZTobias Thüringt.thuering@linguala.comSetup commitlintRelated to #28
Have a look at how to commit, with a new command. `npx git-cz`, reference: https://github.com/commitizen/cz-cli#using-the-command-line-toolRelated to #28
Have a look at how to commit, with a new command. `npx git-cz`, reference: https://github.com/commitizen/cz-cli#using-the-command-line-toolhttps://gitlab.linguala.com/linguala/ui-components/-/issues/50Split fonts out of this package2020-09-02T09:30:07ZTobias Thüringt.thuering@linguala.comSplit fonts out of this package- [x] make sure we have all necessary font formats that **work** in all current browsers and operating systems. (woff2, woff, ...?) related to #23
- [ ] add separate exports for each of them
- [ ] reference it in GlobalStyles/GlobalFonts...- [x] make sure we have all necessary font formats that **work** in all current browsers and operating systems. (woff2, woff, ...?) related to #23
- [ ] add separate exports for each of them
- [ ] reference it in GlobalStyles/GlobalFonts (related to #1 ?)
Benefit: package bundle will be about 50% smaller (currently ~300KB) and not every project will use the Linguala Font, when using a different themehttps://gitlab.linguala.com/linguala/ui-components/-/issues/49Add Documentation for first time library users2022-06-22T10:04:24ZTobias Thüringt.thuering@linguala.comAdd Documentation for first time library users- Make sure the Readme is nicely formatted for npm and readable for first time library users.
Contents should be:
- [x] List of usable components (or a reference to storybook?)
- [x] How to install our component library
- [x] How to im...- Make sure the Readme is nicely formatted for npm and readable for first time library users.
Contents should be:
- [x] List of usable components (or a reference to storybook?)
- [x] How to install our component library
- [x] How to import @linguala/ui-components and components into your project (modules & commonjs differences)
- [x] How to integrate Themes
- [x] How to integrate Global Styles, Fonts
- [x] How to integrate Images / Icons
- [ ] Update the example on a sandbox and make it clear people can test it there as well without having to install any softwareTobias Thüringt.thuering@linguala.comTobias Thüringt.thuering@linguala.comhttps://gitlab.linguala.com/linguala/ui-components/-/issues/46Update: StoryBook preset / config for create-react-app2020-06-03T08:08:47ZDamien ThillUpdate: StoryBook preset / config for create-react-app```
WARN Storybook support for Create React App is now a separate preset.
WARN To get started with the new preset, simply add `@storybook/preset-create-react-app` to your project.
WARN The built-in preset will be disabled in Storybook 6....```
WARN Storybook support for Create React App is now a separate preset.
WARN To get started with the new preset, simply add `@storybook/preset-create-react-app` to your project.
WARN The built-in preset will be disabled in Storybook 6.0.
WARN Storybook support for Create React App is now a separate preset.
WARN To get started with the new preset, simply add `@storybook/preset-create-react-app` to your project.
WARN The built-in preset will be disabled in Storybook 6.0.
info => Loading config/preview file in "./.storybook".
info => Adding stories defined in ".storybook/main.js".
WARN Storybook support for Create React App is now a separate preset.
WARN To get started with the new preset, simply add `@storybook/preset-create-react-app` to your project.
WARN The built-in preset will be disabled in Storybook 6.0.
info => Using default Webpack setup.
WARN Storybook support for Create React App is now a separate preset.
WARN To get started with the new preset, simply add `@storybook/preset-create-react-app` to your project.
WARN The built-in preset will be disabled in Storybook 6.0.
info => Loading create-react-app config.
webpack-config: eslint-loader found in modules.rules[12], ignoring it
webpack built ff9d79c08f090420205e in 12868ms
```https://gitlab.linguala.com/linguala/ui-components/-/issues/43Add width-limited Layout component2022-06-22T10:04:20ZTobias Thüringt.thuering@linguala.comAdd width-limited Layout componentFor text-heavy screens we need a Layout-component (or wrapper of this) that limits itself to a certain size depending on the device screen width for easier reading (opposed to full-width Layout).
Related to @dan 's problem with linguala...For text-heavy screens we need a Layout-component (or wrapper of this) that limits itself to a certain size depending on the device screen width for easier reading (opposed to full-width Layout).
Related to @dan 's problem with linguala.com, (@dan please create an issue in the relevant repository for that and [cross-link](https://docs.gitlab.com/ee/user/project/issues/crosslinking_issues.html#from-related-issues) it here)