decentraland / ui Goto Github PK
View Code? Open in Web Editor NEW๐ฆ Decentraland UI
Home Page: https://ui.decentraland.org
License: Other
๐ฆ Decentraland UI
Home Page: https://ui.decentraland.org
License: Other
create-react-app
Module build failed: UnhandledSchemeError: Reading from "data:application/x-font-ttf;charset=utf-8;;base64,AAEAAAAOAIAA
Semantic-Org/Semantic-UI-CSS#75
Semantic-Org/Semantic-UI#7073
I tried Semantic-Org/Semantic-UI#7073 (comment)
And also tried to remove a ;
following https://github.com/Semantic-Org/Semantic-UI-CSS/pull/76/files from node_modules/semantic-ui-css/semantic.min.css
and semantic.css
, but none of them work.
Can anyone help to check? Thanks!
Create mobile view in our storybook: Viewport
https://storybook.js.org/docs/react/essentials/viewport
Create controls in our storybook for some components
https://storybook.js.org/docs/react/essentials/controls
Right now, the Footer component has the current year hardcoded
Make loader accesible so the user can understand that some info is being loaded in the screen
Move test utils in the marketplace to use the loader accesible properties instead of classname
export async function waitForComponentToFinishLoading(screen: RenderResult) {
// TODO: Make loader accessible so we can get the info without using the container
await waitFor(() =>
expect(screen.container.getElementsByClassName('loader-container').length).toEqual(
0
)
)
}
Describe the problem you have been experiencing in more detail. Include as much information as you think is relevant. Keep in mind that transactions can fail for many reasons; context is key here. Links to tx, screenshots are welcome.
Remember to not share sensible information
Please remember that with baby steps it's easier to reproduce the bug and it's much faster to fix it.
- Step 1
- Step 2
- Step 3
...
Not adding a label makes the blockie fall
Mobile styles for really small phones leak horizontally to the right:
because of this style:
The navbar blockie has a cursor:pointer
even if it doesn't have a handler onClick
(check agora)
Using a button secondary on a Segment in a dark theme lacks styling:
We need it to be more flexible in order to support different child component, text-alignments, backgrounds and more
npm install decentraland-ui
freezes if I have not already run
npm install semantic-ui-react semantic-ui-css
At least a comment to explain/detail this as a necessary step might be useful
so, I forked decentraland marketplace project: https://github.com/decentraland/ui from GitHub, but it seems it was built on Linux environment. I am finding it difficult to run build commands on windows environment. Package.json link: https://github.com/decentraland/ui/blob/master/package.json, file code below:
{
"name": "decentraland-ui",
"version": "0.0.0-development",
"description": "Decentraland's UI components and styles",
"main": "lib/index.js",
"module": "dist/index.js",
"typings": "lib/index.d.ts",
"scripts": {
"start": "start-storybook -p 6006",
"build": "npm run build:lib && npm run build:dist ",
"build:lib": "rimraf lib && webpack --config webpack.config.js",
"build:storybook": "build-storybook && cp ./static/* ./storybook-static && cp now.json ./storybook-static && node postbuild",
"build:dist": "rimraf dist && tsc -p . -d --outDir dist --declarationDir dist --sourceMap false --skipLibCheck && postcss --base src --dir dist 'src/**/*.css'",
"check:prettier": "prettier -c 'src/**/*.{js,ts,json,yml,md,tsx,html,css}'",
"check:code": "eslint . --max-warnings=0",
"fix:code": "npm run check:code -- --fix",
"fix:prettier": "prettier --write ./src",
"now-build": "build-storybook && cp ./static/* ./storybook-static && mv ./storybook-static ./public",
"semantic-release": "semantic-release",
"commitmsg": "validate-commit-msg"
},
"repository": {
"type": "git",
"url": "https://github.com/decentraland/ui.git"
},
"keywords": [
"decentraland",
"ui",
"react",
"semantic-ui",
"components",
"styles",
"themes"
],
"author": "Decentraland",
"license": "MIT",
"bugs": {
"url": "https://github.com/decentraland/ui/issues"
},
"homepage": "https://github.com/decentraland/ui#readme",
"devDependencies": {
"@storybook/addon-centered": "^5.3.13",
"@storybook/addon-storysource": "^5.3.13",
"@storybook/react": "^5.3.13",
"@types/react": "^16.4.1",
"@types/react-test-renderer": "^16.0.1",
"@typescript-eslint/eslint-plugin": "4.26.0",
"@typescript-eslint/parser": "4.26.0",
"autoprefixer": "^9.7.4",
"babel-loader": "^8.0.6",
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^2.1.1",
"cssnano": "^4.1.10",
"eslint": "7.28.0",
"eslint-config-prettier": "8.3.0",
"mini-css-extract-plugin": "^0.7.0",
"postcss-assets": "^5.0.0",
"postcss-cli": "^7.1.2",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.6.0",
"postcss-svg": "^3.0.0",
"prettier": "^2.3.1",
"rimraf": "^2.7.1",
"semantic-release": "^15.13.24",
"storybook": "^5.3.13",
"style-loader": "^0.23.1",
"ts-loader": "^6.0.2",
"typescript": "^4.1.5",
"url-loader": "^2.0.0",
"webpack": "^4.33.0",
"webpack-cli": "^3.3.2"
},
"dependencies": {
"@dcl/schemas": "^3.1.1",
"balloon-css": "^0.5.0",
"ethereum-blockies": "^0.1.1",
"parallax-js": "^3.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-responsive": "^9.0.0-beta.3",
"react-tile-map": "^0.3.2",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^2.0.3"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0"
},
"peerDependenciesMeta": {
"react": {
"optional": true
},
"react-dom": {
"optional": true
}
},
"jest": {
"transform": {
".(ts|tsx)": "ts-jest"
},
"testPathIgnorePatterns": [
"/node_modules/",
"/lib/"
],
"testRegex": "(\\.(test|spec))\\.(ts|tsx)$",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"json"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js"
},
"setupFilesAfterEnv": [
"<rootDir>/test/__config__/setup.js"
],
"collectCoverageFrom": [
"src/components/**/*.(ts|tsx|js)"
]
}
}
This is the error I am getting:
Input Error: You must pass a valid list of files to parse npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] build:dist: rimraf dist && tsc -p . -d --outDir dist --declarationDir dist --sourceMap false --skipLibCheck && postcss --base src --dir dist 'src/**/*.css' npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] build:dist script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Any help will be highly appreciated.
Thanks
React and react-dom dependencies must be in devDependencies as well as peerDependeciesMeta should not be optional
As the title stands, the input show show integers if the decimals were set to 0
. Let's fix that.
Migrate Chip component from Marketplace.
https://github.com/decentraland/marketplace/blob/master/webapp/src/components/Chip
We are using storybook version 5 for ui components. The documentation for this version no longer appears on storybook official page. We should consider bumping to new versions that is better supported.
Currently this lib doesn't work on Next.js out of the box because of the server-side rendering. This is because we make use of window
and that breaks on the server, things like this:
componentWillMount() {
window.addEventListener(...)
}
To fix this we can simply check first if window
exists:
componentWillMount() {
if (window) {
window.addEventListener(...)
}
}
Create a new "Buy with FIAT" Modal that allows the user to select between Transak or MoonPay as the payment provider. It also asks to chose between ETH MANA (for Lands, Estates, names) or Polygon MANA (for wearables/emotes, publishing collections).
The designs are currently under development, should be available soon. Before starting this issue ask for them.
We are using decentraland-ui for the Governance DAO project, and with @andyesp we noticed there is an inconsistency regarding how mobile/tablet styling is calculated.
Particularly for the Tabs.css, the way that mobile is determined is by querying for a max-width: 768px
.
In the same project you are also defining a hook in Media.ts, useMobileMediaQuery
, which uses a max-width
of 767px
for determining if something is mobile.
This causes for an unexpected behavior when switching to a tablet view with 768px
, where some components display for tablet, but some styles are still applied as if they were mobile.
We suggest:
Tabs.css
media query to max-width: 767px
max-width: 768px
media queriesIf you agree that this is an issue, we can open a PR with the proposed solution.
https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
Add feedback modal to Decentraland UI based on this design
This epic will contain all features regarding improvements to make the different uis more accesible.
Make the Dropdown component mobile compatible by showing the options as follows:
Be sure to update the Marketplace with the new UI version.
The UI modals were re-designed for the mobile version of our dApps. The UI repository will contain the mobile version of the modals that are used through all of our dApps.
The modal should cover the whole page. Take a look on how we use the modal to decide on what will be the best approach to implement it.
The following image is an example on how they should look like:
Add link to explorer transaction on success modal
ui/src/components/Atlas/Atlas.tsx
Lines 92 to 96 in 09d79e7
Is missing a check to prevent overwriting the tiles when no tiles
prop is provided
Add a new component in the UI library to Buy MANA with FIAT
We are adopting gatsbyjs
as our framework to generate static sites and it will be a goal if we could use this project because:
The only restriction to make a project compatible with server-side render with gatsbyjs
is never access the Web APIs (DOM, Window, Storage, etc) outside of componentDidMount
or useEffect
Currently only src/components/Atlas/Atlas.tsx
isn't compatible with SSR (because a dependency). To avoid a compilation error we must be able to import each component individually.
- import { Locale } from '../..'
+ import { Locale } from '../LanguageIcon/LanguageIcon.tsx'
https://github.com/decentraland/ui/blob/master/src/components/Footer/Footer.tsx#L8
import { Footer } from 'decentraland-ui/lib/components/Footer'
# ./components/Button/Button.css
+ export { Button } from 'semantic-ui-react'
+ import './Button.css'
componentWillMount
: is deprecated and it will be removed in next major moreLocale
definition outside LanguageIcon
react-tile-map
inside Atlas.tsx
Implement hot reloading on wearable-preview
by integrating the postMessage
API in WearablePreview
component and avoid full re-renders of the iframe
RangeField
const type RangeFieldProps = {
value?: [number, number],
defaultValue?: [number, number],
min?: number,
max?: number,
label?: string | React.PureComponent<{ value: [number, number] }>,
onChange?: (e: React.MouseEvent<?>, props: RangeFieldProps) => void,
onMouseUp?: (e: React.MouseEvent<?>, props: RangeFieldProps) => void,
}
<RangeFieldProps
min={0}
max={24}
value={[9, 21]}
label={(props) => `${props.value[0]}:00 - ${props.value[1]}:00 (UTC+01:00)`}
/>
SliderField
const type SliderFieldProps = {
value?: number,
defaultValue?: number,
min?: number,
max?: number,
label?: string | React.PureComponent<{ value: number }>,
onChange?: (e: React.MouseEvent<?>, props: SliderFieldProps) => void,
onMouseUp?: (e: React.MouseEvent<?>, props: SliderFieldProps) => void,
}
<SliderFieldProps
min={0}
max={24}
value={21}
label={(props) => `${props.value}:00 (UTC+01:00)`}
/>
Right now the inputs in the barchart don't have any labels so the screenreader won't detect correctly what each input means
Describe the problem you have been experiencing in more detail. Include as much information as you think is relevant. Keep in mind that transactions can fail for many reasons; context is key here. Links to tx, screenshots are welcome.
Remember to not share sensible information
Please remember that with baby steps it's easier to reproduce the bug and it's much faster to fix it.
- Step 1
- Step 2
- Step 3
...
hero's mobile padding
isFullscreen -> fullscreen
isOverlay -> overlay
remove height prop
navbar text color opacity
breakpoints navbar tablet
margin right .ui.button (modal)
filter story
value
prop to ToggleBox
and ToggleBoxItem
active
from items
value
props from ToggleBox
with the one on ToggleBoxItem
Importing library doesn't work in Next.js as this framework does not support third party libraries requiring css from node_modules.
Compiled components from decentraland/ui should not require CSS files.
npm install --save decentraland-ui
the movePlayerTo function from @decentraland/RestrictedActions does not always work.
To reproduce:
If you are outside of the perimeters of your land, you may see the words "Move player" but it will not actually execute.
Component: https://github.com/decentraland/ui/tree/master/src/components/Stats
Error using the component:
No overload matches this call.
Overload 1 of 2, '(props: StatsProps | Readonly<StatsProps>): Stats', gave the following error.
Type '{ children: string; title: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Stats> & Pick<Readonly<StatsProps>, "title"> & InexactPartial<...> & InexactPartial<...>'.
Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Stats> & Pick<Readonly<StatsProps>, "title"> & InexactPartial<...> & InexactPartial<...>'.
Overload 2 of 2, '(props: StatsProps, context: any): Stats', gave the following error.
Type '{ children: string; title: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Stats> & Pick<Readonly<StatsProps>, "title"> & InexactPartial<...> & InexactPartial<...>'.
Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Stats> & Pick<Readonly<StatsProps>, "title"> & InexactPartial<...> & InexactPartial<...>'.
We are facing this problem in the governance repo trying to update the dependency to the latest version but for simplicity reasons, I'll give the steps to reproduce with a new react project
- Step 1: `npx create-react-app /folder-dir --template typescript`
- Step 2: `npm -i decentraland-ui`
- Step 3: Import the component in App.tsx like this:
Design in Figma:
The current Toast component, used later to build the ToastProvider component that is used by our dApps through calling the actions found here needs to work mobile with the following design:
Make the toast be show as described in the image (on the bottom). Check if it can be configurable (top, bottom, middle).
Update the decentraland-dapps repository with the version of the UI repository to allow the other dApps to use it and update the Marketplace as well.
We could wrap semantics <Modal />
and pass down everything except trigger
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.