Merge pull request #28 from polkadot-ui/nik-replace-recipes-with-latest

Replace code with latest one

.eslintignore

@@ -14,10 +14,10 @@
 *.webmanifest
 dist
 build
-LICENSE
 postcss.config.js
-README.md
 *.tsconfig.json
 *.tsbuildinfo
 *.woff2
-*.*js
+*.yml
+LICENSE
+README.md

.eslintrc.json

@@ -4,30 +4,20 @@
     "browser": true,
     "node": true
   },
-  "extends": [
-    "plugin:import/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "eslint:recommended",
-    "plugin:prettier/recommended",
-    "plugin:react/recommended"
-  ],
-  "plugins": [
-    "@typescript-eslint",
-    "import",
-    "unused-imports",
-    "react",
-    "@typescript-eslint",
-    "prefer-arrow-functions"
-  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "tsconfig.json",
+    "sourceType": "module",
+    "ecmaVersion": "latest",
+    "ecmaFeatures": {
+      "jsx": true,
+      "arrowFunctions": true
+    }
+  },
   "settings": {
     "react": {
       "version": "detect"
     },
-    "import/extensions": [".ts", ".tsx"],
-    "import/parsers": {
-      "@typescript-eslint/parser": [".ts", ".tsx"]
-    },
-    "import/internal-regex": "^@",
     "import/resolver": {
       "typescript": {
         "alwaysTryTypes": true,
@@ -39,15 +29,21 @@
       }
     }
   },
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "sourceType": "module",
-    "ecmaVersion": "latest",
-    "ecmaFeatures": {
-      "jsx": true,
-      "arrowFunctions": true
-    }
-  },
+  "extends": [
+    "plugin:import/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "eslint:recommended",
+    "plugin:prettier/recommended",
+    "plugin:react/recommended"
+  ],
+  "plugins": [
+    "react",
+    "@typescript-eslint",
+    "prefer-arrow-functions",
+    "@typescript-eslint",
+    "import",
+    "unused-imports"
+  ],
   "rules": {
     "import/no-named-as-default": "off",
     "import/no-named-as-default-member": "off",

.licenserc.json

@@ -7,7 +7,7 @@
     "/* @license Copyright 2024 @polkadot-cloud/recipes authors & contributors",
     "SPDX-License-Identifier: GPL-3.0-only */"
   ],
-  "**/*.cjs": [
+  "**/*.{cjs, js}": [
     "// Copyright 2024 @polkadot-cloud/recipes authors & contributors",
     "// SPDX-License-Identifier: GPL-3.0-only"
   ],

.stylelintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["stylelint-config-standard"],
+  "extends": ["stylelint-config-standard-scss"],
   "rules": {
     "no-descending-specificity": null
   }

README.md

@@ -1,25 +1,6 @@
-[![Core React - Package](https://img.shields.io/badge/Core React-Package-E6007A?logo=polkadot =E6007A)](https://github.com/polkadot-cloud/polkadot-cloud) ![ci](https://github.com/polkadot-cloud/polkadot-cloud/actions/workflows/main.yml/badge.svg) [![License](https://img.shields.io/badge/License-GPL_3.0_only-blue.svg)](https://opensource.org/license/gpl-3-0/)
+[![Recipes - Package](https://img.shields.io/badge/Core React-Package-E6007A?logo=polkadot =E6007A)](https://github.com/polkadot-cloud/library) ![ci](https://github.com/polkadot-cloud/library/actions/workflows/main.yml/badge.svg) [![License](https://img.shields.io/badge/License-GPL_3.0_only-blue.svg)](https://opensource.org/license/gpl-3-0/)
 
 # Polkadot Cloud: Recipes
 
-Functional React Recipes for Polkadot dapps.
+Example functional components derived from the Polkadot Cloud library.
 
-## Managing the Package
-
-#### Start the development server for real-time component feedback.
-
-```
-yarn dev
-```
-
-#### Build the package into an optimised Rollup build.
-
-```
-yarn build
-```
-
-#### Publish the package to NPM.
-
-```
-cd dist && npm publish --access public
-```

README.npm.md

@@ -1,28 +1,27 @@
 <br />
 <p align="center">
-  <a href="https://github.com/polkadot-cloud/polkadot-cloud">
-    <img alt="polkadot-cloud" title="polkadot-cloud" src="https://raw.githubusercontent.com/polkadot-cloud/polkadot-cloud/main/app/public/img/cloud.png" width="80" />
+  <a href="https://github.com/polkadot-cloud/library">
+    <img alt="polkadot-cloud" title="polkadot-cloud" src="https://raw.githubusercontent.com/polkadot-cloud/library/main/app/public/img/cloud.png" width="80" />
   </a>
 </p>
 
 <p align="center">
   <b>Polkadot Cloud</b> is a library and platform <br />
-  for <b>developing</b> and <b>publishing</b> assets for <b>Polkadot dapps</b>.
+  for <b>developing</b> and <b>publishing</b> assets for <b>Polkadot dApps</b>.
 </p>
 
 <div align="center">
-<a href="https://polkadot.cloud/overview">📖 Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://github.com/polkadot-cloud/recipes"">GitHub</a>
+<a href="https://polkadot.cloud/overview">📖 Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://github.com/polkadot-cloud/library"">GitHub</a>
 </div>
 
 <hr>
 
 # Polkadot Cloud: Recipes
 
-**Functional React Recipes for Polkadot dapps.**
+**Example functional components derived from the Polkadot Cloud library.**
 
-## Docs
-
-- [Polkadot Cloud Docs: Installation](https://polkadot.cloud/polkicon): Install and start using `@polkadot‑cloud/recipes`.
+- Fully functional UI implementations of headless components.
+- Useful combinations of UI components and static assets for Polkadot dApps.
 
 ## License
 

gulpfile.cjs

@@ -0,0 +1,55 @@
+// Copyright 2024 @polkadot-cloud/recipes authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+/* eslint-disable @typescript-eslint/no-var-requires */
+const gulp = require("gulp");
+const ts = require("gulp-typescript");
+const strip = require("gulp-strip-comments");
+const sourcemaps = require("gulp-sourcemaps");
+const merge = require("merge-stream");
+
+const sass = require("gulp-sass")(require("sass"));
+const lrserver = require("tiny-lr")();
+const refresh = require("gulp-livereload");
+const SASS_OPTIONS = { outputStyle: "compressed" };
+const replace = require("gulp-replace");
+
+const { src, dest, series } = gulp;
+
+const buildComponents = () => {
+  var tsProject = ts.createProject("tsconfig.json");
+  var tsResult = tsProject.src().pipe(sourcemaps.init()).pipe(tsProject());
+
+  return merge(tsResult, tsResult.js)
+    .pipe(sourcemaps.write("."))
+    .pipe(dest("dist"));
+};
+
+const buildCss = () => {
+  return src("lib/**/*.scss")
+    .pipe(sass(SASS_OPTIONS))
+    .pipe(dest("dist"))
+    .pipe(refresh(lrserver));
+};
+
+const replaceCss = () => {
+  return src(["dist/**/*.d.ts", "dist/**/*.js", "dist/**/*.map"])
+    .pipe(replace(".scss", ".css"))
+    .pipe(dest("dist"));
+};
+
+const stripComments = () => {
+  return src("dist/**/*.js").pipe(strip()).pipe(dest("dist"));
+};
+
+const licenseAndReadme = () => {
+  return src(["LICENSE", "README.npm.md"]).pipe(dest("dist"));
+};
+
+exports.default = series(
+  buildComponents,
+  buildCss,
+  replaceCss,
+  stripComments,
+  licenseAndReadme,
+);

index.yml

@@ -0,0 +1,6 @@
+# Information about the contents of this package.
+# NOTE: Recipes moving to a new repo. This file just satisfies build requirements.
+
+directory:
+  - name: N/A
+    doc: https://polkadot.cloud

lib/AccountCard/index.tsx

@@ -1,20 +1,77 @@
 /* @license Copyright 2024 @polkadot-cloud/recipes authors & contributors
 SPDX-License-Identifier: GPL-3.0-only */
 
-import { useEffect, useState } from "react";
+import { JSX, useEffect, useState } from "react";
 
 import { Grid, Card, Polkicon } from "@polkadot-cloud/react";
-import { GridSizes } from "@polkadot-cloud/react/base/types";
+import {
+  GridJustify,
+  GridSizes,
+  GridItemsAlignment,
+} from "@polkadot-cloud/react/types";
 import { valEmpty } from "@polkadot-cloud/react/utils";
 import { ellipsisFn } from "@polkadot-cloud/utils";
 import {
+  HPositionLR,
   HPosition,
   ComponentBaseWithClassName,
 } from "@polkadot-cloud/react/utils/types";
 
-// eslint-disable-next-line import/no-unresolved
-import "./index.css";
-import { AccountCardProps, FontType } from "./types";
+import "./index.scss";
+
+type FontType =
+  | "xx-small"
+  | "x-small"
+  | "small"
+  | "medium"
+  | "large"
+  | "larger"
+  | "x-large"
+  | "xx-large";
+
+interface AccountCardProps {
+  title: TitleProps;
+  fontSize?: FontType | string;
+  ellipsis?: EllipsisProps;
+  icon?: IconProps;
+  extraComponent?: ExtraComponentProps;
+  noCard?: boolean;
+}
+
+export interface IconProps extends CommonParams, ComponentBaseWithClassName {
+  size?: number;
+  copy?: boolean;
+  position?: HPositionLR;
+  colors?: string[];
+  outerColor?: string;
+  dark?: boolean;
+}
+
+export interface ExtraComponentProps
+  extends CommonParams,
+    ComponentBaseWithClassName {
+  component?: JSX.Element;
+  position?: HPositionLR;
+}
+
+export interface EllipsisProps {
+  active?: boolean;
+  amount?: number;
+  position?: string;
+}
+
+interface CommonParams {
+  gridSize?: GridSizes;
+  justify?: GridJustify;
+}
+
+export interface TitleProps extends ComponentBaseWithClassName {
+  address: string;
+  align?: GridItemsAlignment;
+  justify?: GridJustify;
+  component?: JSX.Element;
+  name?: string;
+}
 
 const isOfFontType = (input: string): input is FontType => {
   return [
@@ -56,7 +113,7 @@ export const AccountCard = ({
   const [mainSize, setMainSize] = useState<GridSizes>(12);
   // state xtraSize (extra component's Grid column size)
   const [xtraSize, setXtraSize] = useState<GridSizes | undefined>(
-    extraComponent?.gridSize
+    extraComponent?.gridSize,
   );
 
   // Adjust the columns
@@ -119,7 +176,7 @@ export const AccountCard = ({
                 whiteSpace: "nowrap",
                 overflow: "hidden",
               }
-            : {}
+            : {},
         )}
         className={`${title?.className} ${fontClasses
           ?.filter((a) => a.trim() != "")
@@ -130,7 +187,7 @@ export const AccountCard = ({
             ? ellipsisFn(
                 title?.name || title.address,
                 ellipsis.amount,
-                (ellipsis?.position as HPosition) || "center"
+                (ellipsis?.position as HPosition) || "center",
               )
             : title?.name || title.address)}
       </div>