Feature/new docs

packages/blockchain-ui/package.json

@@ -1,12 +1,12 @@
 {
   "name": "blockchain-ui",
-  "version": "1.0.121-alpha",
+  "version": "1.0.0-alpha.31",
   "license": "MIT",
   "private": false,
   "description": "A component library for blockchain apps.",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "homepage": "https://www.blockchain-ui.com",
   "repository": {
     "type": "git",
@@ -22,10 +22,6 @@
   "bugs": {
     "url": "https://github.com/Blockchain-UI-Org/Library/issues"
   },
-  "files": [
-    "./dist",
-    "./Readme.md"
-  ],
   "dependencies": {
     "@mui/material": "^5.11.0",
     "@storybook/theming": "^6.5.14",
@@ -67,7 +63,10 @@
     "eject": "react-scripts eject",
     "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook -s public",
-    "chromatic": "npx chromatic --project-token=486802020566"
+    "chromatic": "npx chromatic --project-token=486802020566",
+    "rollup": "rm -rf dist && rollup -c",
+    "post:rollup:build": "node ./scripts/frankBuild.js",
+    "rollup:build": "npm run rollup && npm run post:rollup:build"
   },
   "eslintConfig": {
     "extends": [
@@ -111,6 +110,10 @@
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@iconify/react": "^4.0.1",
+    "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-image": "^3.0.2",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-replace": "^5.0.2",
     "@skypack/package-check": "^0.2.2",
     "@storybook/addon-actions": "^6.5.13",
     "@storybook/addon-backgrounds": "^6.5.13",
@@ -135,6 +138,7 @@
     "@types/styled-components": "^5.1.26",
     "@types/tinycolor2": "^1.4.3",
     "@types/webfontloader": "^1.6.35",
+    "autoprefixer": "^10.4.13",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-module-resolver": "^5.0.0",
     "babel-plugin-named-exports-order": "^0.0.2",
@@ -146,6 +150,12 @@
     "prettier": "^2.8.0",
     "prop-types": "^15.8.1",
     "rimraf": "^4.1.2",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-generate-package-json": "^3.2.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.34.1",
     "storybook": "^6.5.13",
     "tsc-alias": "^1.8.2",
     "tsconfig-paths-webpack-plugin": "^4.0.0",

packages/blockchain-ui/rollup.config.js

@@ -0,0 +1,170 @@
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "rollup-plugin-typescript2";
+import replace from "@rollup/plugin-replace";
+import { terser } from "rollup-plugin-terser";
+import { getFolders } from "./scripts/buildUtils";
+import generatePackageJson from "rollup-plugin-generate-package-json";
+import image from "@rollup/plugin-image";
+import postcss from "rollup-plugin-postcss";
+import copy from "rollup-plugin-copy";
+import autoprefixer from "autoprefixer";
+const fs = require("fs");
+
+const glob = require("glob");
+const path = require("path");
+
+const packageJson = require("./package.json");
+
+const bundleCss = () => {
+  var config = [];
+  var files = glob.sync(path.resolve(__dirname, "**/*.css"));
+  console.log("files are .. ", files);
+  files.forEach((file) => {
+    var filename = file.substr(file.lastIndexOf("/") + 1, file.length).toLowerCase();
+    console.log("filename is ", filename);
+    config.push(
+      postcss({
+        include: file,
+        extract: path.resolve(`dist/${filename}`),
+        minimize: true,
+      })
+    );
+  });
+  return config;
+};
+
+const plugins = [
+  peerDepsExternal(),
+  resolve(),
+  replace({
+    preventAssignment: true,
+    __IS_DEV__: process.env.NODE_ENV === "development",
+  }),
+  commonjs(),
+  typescript({
+    tsconfig: "./tsconfig.json",
+    useTsconfigDeclarationDir: true,
+    tsconfigOverride: {
+      exclude: [
+        "src/_mock/*",
+        "src/components/_mock/*",
+      ]
+    }
+  }),
+  // ...bundleCss(),
+  // css(),
+  postcss({
+    extract: true,
+    minimize: true,
+    plugins: [autoprefixer()],
+    writeDefinitions: true,
+    module: true,
+    extensions: [".css"],
+  }),
+  // cssBundle(),
+  image(),
+  copy({
+    targets: [
+      {
+        src: "src/components/tailwind.css",
+        dest: "dist/components",
+      },
+      {
+        src: "src/index.css",
+        dest: "dist/",
+      },
+    ],
+  }),
+  // copy()
+  terser(),
+];
+const subfolderPlugins = (folderName, subFolder, copyCSS = false) => [
+  ...plugins,
+  // postcss({
+  //   include:  subFolder ? `src/${subFolder}/${folderName}/style.css` : `src/${folderName}/style.css`,
+  //   extract: resolve(subFolder ? `dist/${subFolder}/${folderName}/style.css` : `dist/${folderName}/style.css`,)
+  // }),
+  ...(copyCSS
+    ? [
+        copy({
+          targets: [
+            {
+              src: subFolder ? `src/${subFolder}/${folderName}/style.css` : `src/${folderName}/style.css`,
+              dest: subFolder ? `dist/${subFolder}/${folderName}/` : `dist/${folderName}/`,
+            },
+          ],
+        }),
+      ]
+    : []),
+  generatePackageJson({
+    baseContents: {
+      name: subFolder ? `${packageJson.name}/${subFolder}/${folderName}` : `${packageJson.name}/${folderName}`,
+      private: true,
+      main: "../cjs/index.js",
+      module: "./index.js",
+      types: "./index.d.ts",
+    },
+  }),
+];
+const folderBuilds = (subFolder = "") =>
+  getFolders(`./src${subFolder ? `/${subFolder}` : ""}`).map((folder) => {
+    if (fs.existsSync(subFolder ? `src/${subFolder}/${folder}/style.css` : `src/${folder}/style.css`)) {
+      return {
+        input: subFolder ? `src/${subFolder}/${folder}/index.ts` : `src/${folder}/index.ts`,
+        output: {
+          file: subFolder ? `dist/${subFolder}/${folder}/index.js` : `dist/${folder}/index.js`,
+          sourcemap: true,
+          exports: "named",
+          format: "esm",
+        },
+        plugins: subfolderPlugins(folder, subFolder, true),
+        external: ["react", "react-dom", /\.css$/u],
+      };
+    }
+    return {
+      input: subFolder ? `src/${subFolder}/${folder}/index.ts` : `src/${folder}/index.ts`,
+      output: {
+        file: subFolder ? `dist/${subFolder}/${folder}/index.js` : `dist/${folder}/index.js`,
+        sourcemap: true,
+        exports: "named",
+        format: "esm",
+      },
+      plugins: subfolderPlugins(folder, subFolder, false),
+      external: ["react", "react-dom", /\.css$/u],
+    };
+  });
+
+export default [
+  {
+    input: ["src/index.ts"],
+    output: [
+      {
+        file: packageJson.module,
+        format: "esm",
+        sourcemap: true,
+        exports: "named",
+      },
+    ],
+    plugins,
+    external: ["react", "react-dom", /\.css$/u],
+  },
+  ...folderBuilds(""),
+  ...folderBuilds("components"),
+  {
+    input: ["src/index.ts"],
+    output: [
+      {
+        file: packageJson.main,
+        format: "cjs",
+        sourcemap: true,
+        exports: "named",
+      },
+    ],
+    plugins: [
+      ...plugins,
+    ],
+    external: ["react", "react-dom", /\.css$/u],
+  },
+];

packages/blockchain-ui/scripts/buildUtils.js

@@ -0,0 +1,31 @@
+const fs = require('fs');
+export const getFolders = (entry) => {
+   const dirs = fs.readdirSync(entry)
+   const dirsWithoutIndex = dirs.filter(name => name !== 'index.ts').filter(name => (!name.includes('.d.ts') && !name.includes('.css')))
+   console.log('direcroty without index ', dirsWithoutIndex);
+   return dirsWithoutIndex
+}
+
+export const getFiles = (entry, extensions = [], excludeExtensions = []) => {
+  let fileNames = [];
+  const dirs = fs.readdirSync(entry);
+  dirs.forEach((dir) => {
+    const path = `${entry}/${dir}`;
+
+    if (fs.lstatSync(path).isDirectory()) {
+      fileNames = [
+        ...fileNames,
+        ...getFiles(path, extensions, excludeExtensions),
+      ];
+
+      return;
+    }
+
+    if (!excludeExtensions.some((exclude) => dir.endsWith(exclude))
+      && extensions.some((ext) => dir.endsWith(ext))
+    ) {
+      fileNames.push(path);
+    }
+  });
+  return fileNames;
+};

packages/blockchain-ui/scripts/frankBuild.js

@@ -0,0 +1,49 @@
+/* eslint-disable no-console */
+const { resolve, join, basename } = require('path');
+const { readFile, writeFile, copy } = require('fs-extra');
+const packagePath = process.cwd();
+const distPath = join(packagePath, './dist');
+
+const writeJson = (targetPath, obj) =>
+  writeFile(targetPath, JSON.stringify(obj, null, 2), 'utf8');
+
+async function createPackageFile() {
+  const packageData = await readFile(
+    resolve(packagePath, './package.json'),
+    'utf8'
+  );
+  const { scripts, devDependencies, ...packageOthers } =
+    JSON.parse(packageData);
+  const newPackageData = {
+    ...packageOthers,
+    private: false,
+    typings: './index.d.ts',
+    main: './cjs/index.js',
+    module: './index.js',
+  };
+
+  const targetPath = resolve(distPath, './package.json');
+
+  await writeJson(targetPath, newPackageData);
+  console.log(`Created package.json in ${targetPath}`);
+}
+
+async function includeFileInBuild(file) {
+  const sourcePath = resolve(packagePath, file);
+  const targetPath = resolve(distPath, basename(file));
+  await copy(sourcePath, targetPath);
+  console.log(`Copied ${sourcePath} to ${targetPath}`);
+}
+
+async function run() {
+  try {
+    await createPackageFile();
+    await includeFileInBuild('./README.md');
+    // await includeFileInBuild('../../LICENSE');
+  } catch (err) {
+    console.error(err);
+    process.exit(1);
+  }
+}
+
+run();

packages/blockchain-ui/src/components/alert/alert.stories.tsx

@@ -1,35 +1,36 @@
-import { Story, Meta } from '@storybook/react';
-import { Alert, AlertProps } from './alert';
+import React from 'react';
+import { Story, Meta } from "@storybook/react";
+import { Alert, AlertProps } from "./alert";
 
 export default {
   component: Alert,
-  title: 'General/Alert',
+  title: "General/Alert",
 } as Meta;
 
-const Template: Story<AlertProps> = args => (
+const Template: Story<AlertProps> = (args) => (
   <div
     style={{
-      background: '#EBEBEB',
-      width: '1000px',
-      minHeight: '1000px',
-      margin: 'auto',
-      padding: '5rem',
+      background: "#EBEBEB",
+      width: "1000px",
+      minHeight: "1000px",
+      margin: "auto",
+      padding: "5rem",
     }}
   >
-    <div style={{ width: '410px', minHeight: '473px' }}>
+    <div style={{ width: "410px", minHeight: "473px" }}>
       <Alert {...args} />
     </div>
   </div>
 );
 
 export const InfoAlert = Template.bind({});
 InfoAlert.args = {
-  message: 'You have 0 KSM in your wallet. You may want to deposit here.',
-  type: 'info',
+  message: "You have 0 KSM in your wallet. You may want to deposit here.",
+  type: "info",
 };
 
 export const WarningAlert = Template.bind({});
 WarningAlert.args = {
-  message: 'You have 0 BTC in your wallet. You may want to deposit here.',
-  type: 'error',
+  message: "You have 0 BTC in your wallet. You may want to deposit here.",
+  type: "error",
 };

packages/blockchain-ui/src/components/alert/alert.tsx

@@ -31,6 +31,4 @@ export const Alert: FC<AlertProps> = ({ message, type = "info" }) => {
       </Stack>
     </Container>
   );
-};
-
-export default Alert;
+};

packages/blockchain-ui/src/components/alert/index.ts

@@ -0,0 +1 @@
+export * from './alert';

packages/blockchain-ui/src/components/button/index.tsx → packages/blockchain-ui/src/components/button/button.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import './button.css';
+import './style.css';
 
 interface ButtonProps {
   /**

packages/blockchain-ui/src/components/button/index.ts

@@ -0,0 +1 @@
+export * from './button';