decentraland-ui2 0.0.0-9008705175.commit-ca18515

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2019 Metaverse Holdings Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use files included in this repository except in compliance
+with the License. You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,55 @@
+<img src="https://ui.decentraland.org/decentraland_256x256.png" height="128" width="128" />
+
+# Decentraland UI v2
+
+This is basically `Material UI` themed with Decentrland's look & feel + some of our own components
+
+See: [ui2.decentraland.org](https://ui2.decentraland.org)
+
+## Usage
+
+Install it:
+
+```bash
+npm install --save decentraland-ui2
+```
+
+### Import Decentraland UI v2's theme styles in your App's entry point
+
+In your main ReactDOM renderer import Theme Provider and the theme you want to use
+
+```tsx
+// ./src/index.ts
+...
+import { ThemeProvider } from '@mui/material/styles'
+import { dark } from 'decentraland-ui2/lib/themes/theme'
+...
+
+      <ThemeProvider theme={dark}>
+        ...
+      </ThemeProvider>
+...
+```
+
+Now you can use Decentraland UI v2's components:
+
+```tsx
+import React from "react"
+import { Button } from "decentraland-ui2/lib/@mui"
+
+export const CustomButton = (props) => {
+  return <Button {...props}>Save</Button>
+}
+```
+
+## Development
+
+Prerequisites: Node.js 16 React 17|18 (or compatible)
+
+Install dependencies and start Storybook:
+
+```
+$ npm install
+$ npm run generate:storybooks //This will regenerate @MUI components
+$ npm run start
+```

package/dist/colors.d.ts

@@ -0,0 +1,80 @@
+export declare const neutral: {
+    white: string;
+    softWhite: string;
+    gray5: string;
+    gray4: string;
+    gray3: string;
+    gray2: string;
+    gray1: string;
+    gray0: string;
+    softBlack2: string;
+    softBlack1: string;
+    black: string;
+};
+export declare const textOnNeutral: typeof neutral;
+export declare const base: {
+    primary: string;
+    primaryLight2: string;
+    primaryLight1: string;
+    primaryDark: string;
+    primaryAlt: string;
+};
+export declare const textOnBase: typeof base;
+export declare const state: {
+    success: string;
+    successDark: string;
+    warning: string;
+    warningDark: string;
+    error: string;
+    errorDark: string;
+};
+export declare const textOnState: typeof state;
+export declare const rarity: {
+    common: string;
+    uncommon: string;
+    rare: string;
+    epic: string;
+    legendary: string;
+    mythic: string;
+    unique: string;
+};
+export declare const rarityGradient: typeof rarity;
+export declare const textOnRarity: typeof rarity;
+export declare const brand: {
+    yellow: string;
+    melon: string;
+    orange: string;
+    ruby: string;
+    lavander: string;
+    voilet: string;
+    purpel: string;
+};
+export declare const textOnBrand: typeof brand;
+export declare const gradient: {
+    flare: string;
+    cerise: string;
+    amin: string;
+    common: string;
+    uncommon: string;
+    rare: string;
+    epic: string;
+    legendary: string;
+    mythic: string;
+    unique: string;
+};
+export declare const textOnGradient: typeof gradient;
+export declare const opacity: {
+    backdrop: number;
+    blurry: number;
+    soft: number;
+    subtle: number;
+};
+export declare const blackTransparent: {
+    backdrop: string;
+    blurry: string;
+    soft: string;
+    subtle: string;
+};
+export declare const textOnBlackTransparent: typeof blackTransparent;
+export declare const whiteTransparent: typeof blackTransparent;
+export declare const textOnWhiteTransparent: typeof blackTransparent;

package/dist/colors.js

@@ -0,0 +1,145 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.textOnWhiteTransparent = exports.whiteTransparent = exports.textOnBlackTransparent = exports.blackTransparent = exports.opacity = exports.textOnGradient = exports.gradient = exports.textOnBrand = exports.brand = exports.textOnRarity = exports.rarityGradient = exports.rarity = exports.textOnState = exports.state = exports.textOnBase = exports.base = exports.textOnNeutral = exports.neutral = void 0;
+exports.neutral = {
+    white: `#FFFFFF`,
+    softWhite: `#FCFCFC`,
+    gray5: `#ECEBED`,
+    gray4: `#CFCDD4`,
+    gray3: `#A09BA8`,
+    gray2: `#716B7C`,
+    gray1: `#5E5B67`,
+    gray0: `#43404A`,
+    softBlack2: `#242129`,
+    softBlack1: `#161518`,
+    black: `#000000`,
+};
+exports.textOnNeutral = {
+    white: exports.neutral.softBlack2,
+    softWhite: exports.neutral.softBlack2,
+    gray5: exports.neutral.softBlack2,
+    gray4: exports.neutral.softBlack2,
+    gray3: exports.neutral.white,
+    gray2: exports.neutral.white,
+    gray1: exports.neutral.white,
+    gray0: exports.neutral.white,
+    softBlack2: exports.neutral.white,
+    softBlack1: exports.neutral.white,
+    black: exports.neutral.white,
+};
+exports.base = {
+    primary: "#FF2D55",
+    primaryLight2: `#FFD8DF`,
+    primaryLight1: `#FFBFCB`,
+    primaryDark: `#DF1F43`,
+    primaryAlt: `#FF7439`,
+};
+exports.textOnBase = {
+    primary: exports.neutral.white,
+    primaryLight2: exports.neutral.black,
+    primaryLight1: exports.neutral.black,
+    primaryDark: exports.neutral.white,
+    primaryAlt: exports.neutral.white,
+};
+exports.state = {
+    success: `#34CE76`,
+    successDark: `#279E5A`,
+    warning: `#FFC95B`,
+    warningDark: `#E9AB2E`,
+    error: `#FB3B3B`,
+    errorDark: `#DA2828`,
+};
+exports.textOnState = {
+    success: exports.neutral.white,
+    successDark: exports.neutral.white,
+    warning: exports.neutral.softBlack2,
+    warningDark: exports.neutral.softBlack2,
+    error: exports.neutral.white,
+    errorDark: exports.neutral.white,
+};
+exports.rarity = {
+    common: `#73D3D3`,
+    uncommon: `#FF8362`,
+    rare: `#34CE76`,
+    epic: `#438FFF`,
+    legendary: `#A14BF3`,
+    mythic: `#FF4BED`,
+    unique: `#FEA217`,
+};
+const rarityLight = {
+    common: `#D2F9F9`,
+    uncommon: `#F9E4DF`,
+    rare: `#C1F2D6`,
+    epic: `#C0D3EF`,
+    legendary: `#E1C1FF`,
+    mythic: `#FDC4F7`,
+    unique: `#F3E5CF`,
+};
+exports.rarityGradient = {
+    common: `radial-gradient(circle, ${rarityLight.common} 0%, ${exports.rarity.common} 100%)`,
+    uncommon: `radial-gradient(circle, ${rarityLight.uncommon} 0%, ${exports.rarity.uncommon} 100%)`,
+    rare: `radial-gradient(circle, ${rarityLight.rare} 0%, ${exports.rarity.rare} 100%)`,
+    epic: `radial-gradient(circle, ${rarityLight.epic} 0%, ${exports.rarity.epic} 100%)`,
+    legendary: `radial-gradient(circle, ${rarityLight.legendary} 0%, ${exports.rarity.legendary} 100%)`,
+    mythic: `radial-gradient(circle, ${rarityLight.mythic} 0%, ${exports.rarity.mythic} 100%)`,
+    unique: `radial-gradient(circle, ${rarityLight.unique} 0%, ${exports.rarity.unique} 100%)`,
+};
+exports.textOnRarity = {
+    common: exports.neutral.white,
+    uncommon: exports.neutral.white,
+    rare: exports.neutral.white,
+    epic: exports.neutral.white,
+    legendary: exports.neutral.white,
+    mythic: exports.neutral.white,
+    unique: exports.neutral.white,
+};
+exports.brand = {
+    yellow: `#FFBC5B`,
+    melon: `#FFA25A`,
+    orange: `#FF7439`,
+    ruby: `#FF2D55`,
+    lavander: `#C640CD`,
+    voilet: `#A524B3`,
+    purpel: `#691FA9`,
+};
+exports.textOnBrand = {
+    yellow: exports.neutral.softBlack2,
+    melon: exports.neutral.softBlack2,
+    orange: exports.neutral.white,
+    ruby: exports.neutral.white,
+    lavander: exports.neutral.white,
+    voilet: exports.neutral.white,
+    purpel: exports.neutral.white,
+};
+exports.gradient = Object.assign(Object.assign({}, exports.rarityGradient), { flare: `linear-gradient(135deg, ${exports.brand.ruby} 0%, ${exports.brand.yellow} 100%)`, cerise: `linear-gradient(135deg, ${exports.brand.ruby} 0%, ${exports.brand.lavander} 100%)`, amin: `linear-gradient(135deg, ${exports.brand.lavander} 0%, ${exports.brand.purpel} 100%)` });
+exports.textOnGradient = Object.assign(Object.assign({}, exports.textOnRarity), { flare: exports.neutral.white, cerise: exports.neutral.white, amin: exports.neutral.white });
+exports.opacity = {
+    backdrop: 0.6,
+    blurry: 0.4,
+    soft: 0.2,
+    subtle: 0.1,
+};
+exports.blackTransparent = {
+    backdrop: `rgba(0, 0, 0, ${exports.opacity.backdrop})`,
+    blurry: `rgba(0, 0, 0, ${exports.opacity.blurry})`,
+    soft: `rgba(0, 0, 0, ${exports.opacity.soft})`,
+    subtle: `rgba(0, 0, 0, ${exports.opacity.subtle})`,
+};
+exports.textOnBlackTransparent = {
+    backdrop: exports.neutral.white,
+    blurry: exports.neutral.white,
+    soft: exports.neutral.black,
+    subtle: exports.neutral.black,
+};
+exports.whiteTransparent = {
+    backdrop: `rgba(255, 255, 255, ${exports.opacity.backdrop})`,
+    blurry: `rgba(255, 255, 255, ${exports.opacity.blurry})`,
+    soft: `rgba(255, 255, 255, ${exports.opacity.soft})`,
+    subtle: `rgba(255, 255, 255, ${exports.opacity.subtle})`,
+};
+exports.textOnWhiteTransparent = {
+    backdrop: exports.neutral.softBlack2,
+    blurry: exports.neutral.softBlack2,
+    soft: exports.neutral.softBlack2,
+    subtle: exports.neutral.softBlack2,
+};

package/dist/components/Atlas/Atlas.d.ts

@@ -0,0 +1,46 @@
+import React from "react";
+import { Coord, Layer, TileMapProps } from "react-tile-map";
+import "react-tile-map/dist/styles.css";
+export declare enum AtlasColor {
+    OWNED = "#3D3A46",
+    UNOWNED = "#09080A",
+    PLAZA = "#70AC76",
+    ROAD = "#716C7A",
+    DISTRICT = "#5054D4",
+    ODD = "#110E13",
+    EVEN = "#0D0B0E"
+}
+export declare enum AtlasTileType {
+    OWNED = "owned",
+    UNOWNED = "unowned",
+    PLAZA = "plaza",
+    ROAD = "road",
+    DISTRICT = "district"
+}
+export type AtlasTileProps = {
+    id?: string;
+    x: number;
+    y: number;
+    updatedAt: number;
+    type: AtlasTileType;
+    top?: boolean;
+    left?: boolean;
+    topLeft?: boolean;
+    name?: string;
+    estateId?: string;
+    owner: string;
+    tokenId?: string;
+};
+export { Layer, Coord };
+export type AtlasProps = Omit<TileMapProps, "layers" | "className"> & {
+    layers?: Layer[];
+    tiles?: Record<string, AtlasTileProps>;
+    /** @deprecated */
+    className?: string;
+};
+export type AtlasStateProps = {
+    tiles?: Record<string, AtlasTileProps>;
+};
+export interface AtlasInterface extends AtlasProps {
+}
+export declare const Atlas: React.MemoExoticComponent<(props: AtlasProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/components/Atlas/Atlas.js

@@ -0,0 +1,96 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Atlas = exports.AtlasTileType = exports.AtlasColor = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_tile_map_1 = require("react-tile-map");
+const react_2 = require("@emotion/react");
+const util_1 = require("./util");
+const colors_1 = require("../../colors");
+require("react-tile-map/dist/styles.css");
+var AtlasColor;
+(function (AtlasColor) {
+    AtlasColor["OWNED"] = "#3D3A46";
+    AtlasColor["UNOWNED"] = "#09080A";
+    AtlasColor["PLAZA"] = "#70AC76";
+    AtlasColor["ROAD"] = "#716C7A";
+    AtlasColor["DISTRICT"] = "#5054D4";
+    AtlasColor["ODD"] = "#110E13";
+    AtlasColor["EVEN"] = "#0D0B0E";
+})(AtlasColor || (exports.AtlasColor = AtlasColor = {}));
+var AtlasTileType;
+(function (AtlasTileType) {
+    AtlasTileType["OWNED"] = "owned";
+    AtlasTileType["UNOWNED"] = "unowned";
+    AtlasTileType["PLAZA"] = "plaza";
+    AtlasTileType["ROAD"] = "road";
+    AtlasTileType["DISTRICT"] = "district";
+})(AtlasTileType || (exports.AtlasTileType = AtlasTileType = {}));
+exports.Atlas = react_1.default.memo((props) => {
+    const { layers } = props;
+    const [tiles, setTiles] = (0, react_1.useState)(props.tiles);
+    const mountedRef = react_1.default.useRef(true);
+    const layer = (0, react_1.useCallback)((x, y) => {
+        const id = x + "," + y;
+        if (tiles && id in tiles) {
+            const tile = tiles[id];
+            return {
+                color: (0, util_1.getColorByType)(tile.type),
+                top: tile.top,
+                left: tile.left,
+                topLeft: tile.topLeft,
+            };
+        }
+        else {
+            return {
+                color: (x + y) % 2 === 0 ? AtlasColor.ODD : AtlasColor.EVEN,
+            };
+        }
+    }, [tiles]);
+    (0, react_1.useEffect)(() => {
+        if (!tiles) {
+            (0, util_1.getTiles)().then(handleUpdateTiles);
+        }
+        return () => {
+            mountedRef.current = false;
+        };
+    }, [tiles]);
+    (0, react_1.useEffect)(() => {
+        if (props.tiles && props.tiles !== tiles) {
+            setTiles(props.tiles);
+        }
+    }, [props.tiles]);
+    const handleUpdateTiles = (updatedTiles) => {
+        if (mountedRef.current) {
+            setTiles(updatedTiles);
+        }
+    };
+    const atlasStyle = (0, react_2.css)({
+        background: colors_1.neutral.softBlack1,
+    });
+    const layersMemo = (0, react_1.useMemo)(() => [layer, ...(layers || [])], [layer, layers]);
+    return ((0, jsx_runtime_1.jsx)(react_tile_map_1.TileMap, Object.assign({}, react_tile_map_1.TileMap.defaultProps, props, { css: atlasStyle, layers: layersMemo })));
+});

package/dist/components/Atlas/Atlas.stories.d.ts

@@ -0,0 +1,11 @@
+import { AtlasProps } from "./Atlas";
+import type { Meta, StoryObj } from "@storybook/react";
+declare const meta: Meta<AtlasProps>;
+export default meta;
+type Story = StoryObj<AtlasProps>;
+export declare const Uncontrolled: Story;
+export declare const Controlled: Story;
+export declare const ForSale: Story;
+export declare const ClickToSelect: Story;
+export declare const HoverToHighlight: Story;
+export declare const WithZoomControl: Story;

package/dist/components/Atlas/Atlas.stories.js

@@ -0,0 +1,275 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithZoomControl = exports.HoverToHighlight = exports.ClickToSelect = exports.ForSale = exports.Controlled = exports.Uncontrolled = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const blocks_1 = require("@storybook/blocks");
+const Atlas_1 = require("./Atlas");
+const util_1 = require("./util");
+let tiles;
+if (window) {
+    (0, util_1.getTiles)().then((_tiles) => (tiles = _tiles));
+}
+// For Sale
+const forSaleLayer = (x, y) => {
+    const key = x + "," + y;
+    if (tiles && tiles[key] && "price" in tiles[key]) {
+        return { color: "#00d3ff" };
+    }
+    return null;
+};
+// Selection
+let selected = [];
+function isSelected(x, y) {
+    return selected.some((coord) => coord.x === x && coord.y === y);
+}
+const selectedStrokeLayer = (x, y) => {
+    return isSelected(x, y) ? { color: "#ff0044", scale: 1.4 } : null;
+};
+const selectedFillLayer = (x, y) => {
+    return isSelected(x, y) ? { color: "#ff9990", scale: 1.2 } : null;
+};
+const handleClick = (x, y) => {
+    console.log(x, y);
+    if (isSelected(x, y)) {
+        selected = selected.filter((coord) => coord.x !== x || coord.y !== y);
+    }
+    else {
+        selected.push({ x, y });
+    }
+};
+// Hover
+let hover;
+const isValid = () => {
+    if (!hover)
+        return false;
+    // only valid if it fits in central plaza
+    return hover.x >= -5 && hover.x <= 6 && hover.y >= -5 && hover.y <= 5;
+};
+const isHighlighted = (x, y) => {
+    if (!hover)
+        return false;
+    // only highlight a 10x10 area centered around hover coords
+    const radius = 5;
+    return (x > hover.x - radius &&
+        x < hover.x + radius &&
+        y > hover.y - radius &&
+        y < hover.y + radius);
+};
+const handleHover = (x, y) => {
+    hover = { x, y };
+};
+const hoverStrokeLayer = (x, y) => {
+    if (isHighlighted(x, y)) {
+        return {
+            color: isValid() ? "#44ff00" : "#ff0044",
+            scale: 1.5,
+        };
+    }
+    return null;
+};
+const hoverFillLayer = (x, y) => {
+    if (isHighlighted(x, y)) {
+        return {
+            color: isValid() ? "#99ff90" : "#ff9990",
+            scale: 1.2,
+        };
+    }
+    return null;
+};
+const AtlasContainer = styled_1.default.div({
+    width: "90vw",
+    height: "90vh",
+    backgroundColor: "black",
+});
+const meta = {
+    component: Atlas_1.Atlas,
+    title: "Decentraland UI/Atlas",
+    tags: ["autodocs"],
+    argTypes: {
+        layers: {
+            description: "layer to render on the map",
+        },
+        className: {
+            description: "custom class name",
+        },
+        x: {
+            description: "where to position the map in the X axis",
+        },
+        y: {
+            description: "where to position the map in the Y axis",
+        },
+        initialX: {
+            description: "where to initially position the map in the X axis",
+        },
+        initialY: {
+            description: "where to initially position the map in the Y axis",
+        },
+        size: {
+            description: "size of each parcel, i.e: size=5 makes each parcel of 5x5 pixels",
+        },
+        width: {
+            description: "width of the canvas in pixels",
+        },
+        height: {
+            description: "height of the canvas in pixels",
+        },
+        zoom: {
+            description: "zoom level of the map, this changes in the end the size on which parcels are rendered, i.e: size=10 and zoom=0.5 makes each parcel of 5x5 pixels",
+        },
+        minX: {
+            description: "min values for x(ie. the map boundaries)",
+        },
+        maxX: {
+            description: "max values for x(ie. the map boundaries)",
+        },
+        minY: {
+            description: "min values for y (ie. the map boundaries)",
+        },
+        maxY: {
+            description: "max values for y (ie. the map boundaries)",
+        },
+        minSize: {
+            description: "minimum size that parcels can take (after applying zoom)",
+        },
+        maxSize: {
+            description: "maximum size that parcels can take (after applying zoom)",
+        },
+        panX: {
+            description: "initial panning in the X axis, this changes the initial position of the map adding an offset to the prop `x`",
+        },
+        panY: {
+            description: "initial panning in the Y axis, this changes the initial position of the map adding an offset to the prop `y`",
+        },
+        isDraggable: {
+            description: "whether the map should be draggable or not",
+        },
+        padding: {
+            description: "amount of padding tiles",
+        },
+        withZoomControls: {
+            description: "whether the zoom controls should appear",
+        },
+        onMouseDown: {
+            description: "callbacks",
+        },
+        onMouseUp: {
+            description: "callbacks",
+        },
+        onClick: {
+            description: "callbacks",
+        },
+        onHover: {
+            description: " - ",
+        },
+        onPopup: { description: " - " },
+        onChange: { description: " - " },
+        onCenterChange: { description: " - " },
+        renderMap: {
+            description: "renderer",
+        },
+    },
+    parameters: {
+        docs: {
+            page: () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(blocks_1.Title, {}), (0, jsx_runtime_1.jsx)(blocks_1.ArgTypes, {})] })),
+        },
+        layout: "centered",
+        canvas: true,
+    },
+    loaders: [
+        () => __awaiter(void 0, void 0, void 0, function* () {
+            return ({
+                tiles: yield (0, util_1.getTiles)(),
+            });
+        }),
+    ],
+    decorators: [
+        (Story) => ((0, jsx_runtime_1.jsx)(AtlasContainer, { children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+    render: (args, { loaded: { tiles } }) => (0, jsx_runtime_1.jsx)(Atlas_1.Atlas, Object.assign({}, args, { tiles: tiles })),
+};
+exports.default = meta;
+exports.Uncontrolled = {
+    args: {},
+    loaders: [
+        () => __awaiter(void 0, void 0, void 0, function* () {
+            return ({
+                tiles: null,
+            });
+        }),
+    ],
+};
+exports.Controlled = {
+    args: {},
+    loaders: [
+        () => __awaiter(void 0, void 0, void 0, function* () {
+            return ({
+                tiles: yield (0, util_1.getTiles)(),
+            });
+        }),
+    ],
+};
+exports.ForSale = {
+    args: {
+        layers: [forSaleLayer],
+    },
+    loaders: [
+        () => __awaiter(void 0, void 0, void 0, function* () {
+            return ({
+                tiles: yield (0, util_1.getTiles)(),
+            });
+        }),
+    ],
+};
+exports.ClickToSelect = {
+    args: {
+        layers: [selectedStrokeLayer, selectedFillLayer],
+        onClick: handleClick,
+    },
+    loaders: [
+        () => __awaiter(void 0, void 0, void 0, function* () {
+            return ({
+                tiles: yield (0, util_1.getTiles)(),
+            });
+        }),
+    ],
+};
+exports.HoverToHighlight = {
+    args: {
+        layers: [hoverStrokeLayer, hoverFillLayer],
+        onHover: handleHover,
+    },
+    loaders: [
+        () => __awaiter(void 0, void 0, void 0, function* () {
+            return ({
+                tiles: yield (0, util_1.getTiles)(),
+            });
+        }),
+    ],
+};
+exports.WithZoomControl = {
+    args: {
+        layers: [hoverStrokeLayer, hoverFillLayer],
+        onHover: handleHover,
+        withZoomControls: true,
+    },
+    loaders: [
+        () => __awaiter(void 0, void 0, void 0, function* () {
+            return ({
+                tiles: yield (0, util_1.getTiles)(),
+            });
+        }),
+    ],
+};

package/dist/components/Atlas/util.d.ts

@@ -0,0 +1,3 @@
+import { AtlasColor, AtlasTileProps, AtlasTileType } from "./Atlas";
+export declare const getTiles: () => Promise<Record<string, AtlasTileProps>>;
+export declare function getColorByType(type: AtlasTileType): AtlasColor.OWNED | AtlasColor.UNOWNED | AtlasColor.PLAZA | AtlasColor.ROAD | AtlasColor.DISTRICT;

package/dist/components/Atlas/util.js

@@ -0,0 +1,41 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getColorByType = exports.getTiles = void 0;
+const radash_1 = require("radash");
+const Atlas_1 = require("./Atlas");
+const TILES_URL = "https://api.decentraland.org/v2/tiles";
+exports.getTiles = (0, radash_1.memo)(() => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const tilesFetch = yield fetch(TILES_URL);
+        const tilesJson = yield tilesFetch.json();
+        return tilesJson.data;
+    }
+    catch (error) {
+        return {};
+    }
+}), { ttl: 10 * 60 * 1000 } // 10 minutes
+);
+function getColorByType(type) {
+    switch (type) {
+        case Atlas_1.AtlasTileType.OWNED:
+            return Atlas_1.AtlasColor.OWNED;
+        case Atlas_1.AtlasTileType.UNOWNED:
+            return Atlas_1.AtlasColor.UNOWNED;
+        case Atlas_1.AtlasTileType.PLAZA:
+            return Atlas_1.AtlasColor.PLAZA;
+        case Atlas_1.AtlasTileType.ROAD:
+            return Atlas_1.AtlasColor.ROAD;
+        case Atlas_1.AtlasTileType.DISTRICT:
+            return Atlas_1.AtlasColor.DISTRICT;
+    }
+}
+exports.getColorByType = getColorByType;

package/dist/components/Atlas/util.test.js

@@ -0,0 +1,5 @@
+describe("silly test", () => {
+    it("silly test", () => {
+        expect(true).toBe(true);
+    });
+});

package/dist/config/env/dev.json

@@ -0,0 +1,11 @@
+{
+    "WEARABLE_PREVIEW_URL": "https://wearable-preview.decentraland.zone",
+    "ACCOUNT_URL": "https://account.decentraland.zone",
+    "PROFILE_URL": "https://profile.decentraland.zone",
+    "MARKETPLACE_URL": "https://market.decentraland.zone",
+    "BUILDER_URL": "https://builder.decentraland.zone",
+    "DAO_URL": "https://dao.decentraland.zone",
+    "GOVERNANCE_URL": "https://governance.decentraland.zone",
+    "EVENTS_URL": "https://events.decentraland.zone",
+    "PLACES_URL": "https://places.decentraland.zone"
+}

package/dist/config/env/prod.json

@@ -0,0 +1,11 @@
+{
+    "WEARABLE_PREVIEW_URL": "https://wearable-preview.decentraland.org",
+    "ACCOUNT_URL": "https://account.decentraland.org",
+    "PROFILE_URL": "https://profile.decentraland.org",
+    "MARKETPLACE_URL": "https://market.decentraland.org",
+    "BUILDER_URL": "https://builder.decentraland.org",
+    "DAO_URL": "https://dao.decentraland.org",
+    "GOVERNANCE_URL": "https://governance.decentraland.org",
+    "EVENTS_URL": "https://events.decentraland.org",
+    "PLACES_URL": "https://places.decentraland.org"
+}

package/dist/config/env/stg.json

@@ -0,0 +1,11 @@
+{
+    "WEARABLE_PREVIEW_URL": "https://wearable-preview.decentraland.today",
+    "ACCOUNT_URL": "https://account.decentraland.today",
+    "PROFILE_URL": "https://profile.decentraland.today",
+    "MARKETPLACE_URL": "https://market.decentraland.today",
+    "BUILDER_URL": "https://builder.decentraland.today",
+    "DAO_URL": "https://dao.decentraland.today",
+    "GOVERNANCE_URL": "https://governance.decentraland.today",
+    "EVENTS_URL": "https://events.decentraland.today",
+    "PLACES_URL": "https://places.decentraland.today"
+}

package/dist/config/index.d.ts

@@ -0,0 +1 @@
+export declare const config: import("@dcl/ui-env/dist/config").IConfig;

package/dist/config/index.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.config = void 0;
+const ui_env_1 = require("@dcl/ui-env");
+const dev_json_1 = __importDefault(require("./env/dev.json"));
+const prod_json_1 = __importDefault(require("./env/prod.json"));
+const stg_json_1 = __importDefault(require("./env/stg.json"));
+exports.config = (0, ui_env_1.createConfig)({
+    [ui_env_1.Env.DEVELOPMENT]: dev_json_1.default,
+    [ui_env_1.Env.STAGING]: stg_json_1.default,
+    [ui_env_1.Env.PRODUCTION]: prod_json_1.default,
+});

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from "@mui/material";
+import emotionCache from "@emotion/cache";
+import emotionReact from "@emotion/react";
+import emotionStyled from "@emotion/styled";
+export { emotionReact, emotionStyled, emotionCache };

package/dist/index.js

@@ -0,0 +1,27 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.emotionCache = exports.emotionStyled = exports.emotionReact = void 0;
+__exportStar(require("@mui/material"), exports);
+const cache_1 = __importDefault(require("@emotion/cache"));
+exports.emotionCache = cache_1.default;
+const react_1 = __importDefault(require("@emotion/react"));
+exports.emotionReact = react_1.default;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.emotionStyled = styled_1.default;

package/dist/theme.d.ts

@@ -0,0 +1,2 @@
+export declare const light: import("@mui/material/styles").Theme;
+export declare const dark: import("@mui/material/styles").Theme;

package/dist/theme.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dark = exports.light = void 0;
+const styles_1 = require("@mui/material/styles");
+const colors_1 = require("./colors");
+function theme(type) {
+    const isDark = type === "dark";
+    const textColor = isDark ? colors_1.neutral.white : colors_1.neutral.black;
+    return {
+        palette: {
+            mode: type,
+            primary: {
+                main: colors_1.base.primary,
+            },
+            secondary: {
+                main: colors_1.neutral.white,
+            },
+            background: {
+                default: isDark ? colors_1.neutral.softBlack2 : colors_1.neutral.softWhite,
+                paper: isDark ? colors_1.neutral.softBlack1 : colors_1.neutral.white,
+            },
+            text: {
+                primary: colors_1.base.primary,
+            },
+        },
+        shape: {
+            borderRadius: 8,
+        },
+        typography: {
+            fontFamily: "Inter, -apple-system, system-ui, sans-serif",
+            h1: {
+                fontSize: 96,
+                fontWeight: 600,
+                marginBlock: "0.5em",
+                color: textColor,
+            },
+            h2: {
+                fontSize: 60,
+                fontWeight: 600,
+                marginBlock: "0.5em",
+                color: textColor,
+            },
+            h3: {
+                fontSize: 48,
+                fontWeight: 500,
+                marginBlock: "0.5em",
+                color: textColor,
+            },
+            h4: {
+                fontSize: 34,
+                fontWeight: 600,
+                marginBlock: "0.5em",
+                color: textColor,
+            },
+            h5: {
+                fontSize: 20,
+                fontWeight: 600,
+                marginBlock: "0.5em",
+                color: textColor,
+            },
+            button: {
+                textTransform: "uppercase",
+                fontWeight: 600,
+            },
+            body1: {
+                color: textColor,
+            },
+            body2: {
+                color: textColor,
+            },
+        },
+    };
+}
+exports.light = (0, styles_1.createTheme)(theme("light"));
+exports.dark = (0, styles_1.createTheme)(theme("dark"));

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "decentraland-ui2",
+  "version": "0.0.0-9008705175.commit-ca18515",
+  "description": "Decentraland's UI components and styles",
+  "main": "index.js",
+  "author": "Decentraland",
+  "license": "Apache-2.0",
+  "scripts": {
+    "test": "jest",
+    "fix:prettier": "prettier --write ./src",
+    "start": "storybook dev -p 6006",
+    "build": "npm run build:dist",
+    "build:dist": "rm -Rf dist && tsc -p . -d --outDir dist --declarationDir dist --sourceMap false --skipLibCheck",
+    "build-storybook": "npm run generate:storybooks && npx storybook@7 build",
+    "format": "prettier --write '**/*.{ts,tsx,js,jsx,json,md,mdx,css}'",
+    "lint": "eslint --ext .ts,.tsx,.js,.jsx ./src",
+    "lint:check": "eslint --ext .ts,.tsx,.js,.jsx ./src",
+    "lint:fix": "npm run lint -- --fix",
+    "generate:storybooks": "ts-node ./bin/storybookGenerator.ts && npm run lint:fix"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/decentraland/ui2.git"
+  },
+  "keywords": [
+    "decentraland",
+    "ui",
+    "react",
+    "semantic-ui",
+    "components",
+    "styles",
+    "themes"
+  ],
+  "bugs": {
+    "url": "https://github.com/decentraland/ui2/issues"
+  },
+  "homepage": "https://github.com/decentraland/ui2#readme",
+  "dependencies": {
+    "@dcl/schemas": "^9.7.0",
+    "@dcl/ui-env": "^1.4.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.14",
+    "@mui/material": "^5.14.14",
+    "autoprefixer": "^10.4.16",
+    "radash": "^11.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-tile-map": "^0.4.1"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
+    "@dcl/eslint-config": "^1.1.12",
+    "@storybook/addon-docs": "^7.5.2",
+    "@storybook/addon-essentials": "^7.5.2",
+    "@storybook/addon-links": "^7.5.2",
+    "@storybook/addon-storysource": "^7.5.2",
+    "@storybook/addon-themes": "^7.5.2",
+    "@storybook/blocks": "^7.5.2",
+    "@storybook/react": "^7.5.2",
+    "@storybook/react-webpack5": "^7.5.2",
+    "@storybook/testing-library": "^0.2.2",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^17.0.69",
+    "@typescript-eslint/eslint-plugin": "^6.8.0",
+    "@typescript-eslint/parser": "^6.8.0",
+    "eslint": "^8.51.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-import-resolver-babel-module": "^5.3.2",
+    "eslint-import-resolver-jest": "^3.0.2",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-autofix": "^1.1.0",
+    "eslint-plugin-css-import-order": "^1.1.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-storybook": "^0.6.15",
+    "jest": "^29.7.0",
+    "prettier": "^3.0.3",
+    "storybook": "^7.5.2",
+    "ts-jest": "^29.1.2",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.2.2"
+  },
+  "files": [
+    "dist"
+  ],
+  "commit": "ca18515ed9c0b195c085361a61e752be0e3abedb"
+}