@cryptofi/core-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 CryptoFi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,88 @@
+# CryptoFi Core UI
+
+## Development
+
+Launch Storybook to view components locally:
+
+```bash
+yarn storybook
+```
+
+### Adding a Component
+
+1. Create a new directory in the **components** directory using the following structure. Note that a component can consist of only a React component file (tsx) or a theme files (ts) depending on how it is structured.
+
+```
+components/
+├─ Button/
+|  ├─ Button.tsx
+|  ├─ buttonTheme.ts
+```
+
+2. Setup the basic component structure. This simplified example demonstrates wrapping a Chakra component:
+
+```tsx
+import { Button } from '@chakra-ui/react';
+
+const CFButton = ({ children }: { children: React.reactNode }) => {
+  return <Button>{children}</Button>;
+};
+```
+
+3. Add the component file to **components/index.ts**, using the `CF` prefix as a namespace to differentiate between similarly named Chakra components:
+
+```
+export { default as CFButton } from './Button/Button'
+```
+
+4. Add the component theme to the corresponding section of the **src/theme.ts** file under the `components` key.
+
+### Styling a Component
+
+The reusable components exported from this library generally use separate theme files to simplify implementation of variants, sizes, etc., but simple components can also be styled directly in the component file using Chakra [style props](https://chakra-ui.com/docs/styled-system/style-props).
+
+Guidelines:
+
+- Prefer responsive units like `rem` over pixel values
+- Use Chakra's unitless [spacing](https://chakra-ui.com/docs/styled-system/theme#spacing) values for spacing and positioning when possible
+- Refer to documentation for the corresponding Chakra UI component when styling base components
+
+### Icons
+
+Run the command below to (re)generate React components from SVG files located in the **svg-icons** directory.
+
+```bash
+yarn icons:gen
+```
+
+When adding a new icon, place the SVG file in the **svg-icons** directory, then regenerate icons and check-in the resulting changes.
+
+Following is an example of using an icon component in application code. Note that icons are named with the prefix `Icon` during generation and can be styled using Chakra style props.
+
+```tsx
+import { IconBank } from '@cryptofi/core-ui';
+
+const SomeComponent = () => {
+  return (
+    <>
+      <IconBank height="10" width="10" __css={{ path: { fill: 'orange' } }} />
+    </>
+  );
+};
+```
+
+## Build and Publish
+
+To build components and update local consumers with the latest changes, run the following:
+
+```bash
+yarn publish:local
+```
+
+## Tooling
+
+This project uses [Rollup](https://rollupjs.org/) to build an optimized JavaScript bundle, and consumers are expected to provide necessary peer dependencies for Chakra UI and React as outlined in this project's package.json.
+
+Vite is used in conjunction with Storybook for local development.
+
+Based on the following Vite / React template: https://github.com/The24thDS/vite-reactts18-chakra-jest-husky

package/package.json

@@ -0,0 +1,106 @@
+{
+  "name": "@cryptofi/core-ui",
+  "version": "0.1.0",
+  "author": {
+    "name": "CryptoFi"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "dev": "yarn storybook",
+    "build": "rm -rf ./dist && rollup -c",
+    "lint": "eslint src --ext .tsx --ext .ts",
+    "lint:fix": "yarn lint --fix",
+    "format": "prettier --config ./.prettierrc -w 'src/**/*.{tsx,ts}' && git update-index --again",
+    "pretest": "yarn lint:fix",
+    "test": "jest --colors --passWithNoTests",
+    "posttest": "npx http-server coverage/lcov-report",
+    "test:watch": "yarn test --collectCoverage=false --watch",
+    "storybook": "storybook dev -p 6006",
+    "build:storybook": "storybook build",
+    "publish:local": "yarn build && yarn dlx yalc publish --push",
+    "icons:gen": "yarn icons:clean && yarn icons:prefix && yarn dlx @svgr/cli -- ./svg-icons",
+    "icons:clean": "rm -rf src/icons && mkdir src/icons",
+    "icons:prefix": "node scripts/prefix-icons.cjs"
+  },
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "src": "src",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@chakra-ui/react": "^2.4.9",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "framer-motion": "^10.16.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.5",
+    "@chakra-ui/react": "^2.4.9",
+    "@chakra-ui/storybook-addon": "^5.0.1",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@storybook/addon-essentials": "^7.5.2",
+    "@storybook/addon-interactions": "^7.5.2",
+    "@storybook/addon-links": "^7.5.2",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.5.2",
+    "@storybook/react": "^7.5.2",
+    "@storybook/react-vite": "^7.5.2",
+    "@storybook/testing-library": "^0.2.2",
+    "@svgr/cli": "^8.1.0",
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-jsx": "^8.1.0",
+    "@svgr/plugin-prettier": "^8.1.0",
+    "@svgr/plugin-svgo": "^8.1.0",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^13.4.0",
+    "@types/jest": "^29.2.6",
+    "@types/lodash.isempty": "^4",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@types/rollup-plugin-peer-deps-external": "^2",
+    "@types/stringify-object": "^4.0.4",
+    "@typescript-eslint/eslint-plugin": "^5.12.1",
+    "@typescript-eslint/parser": "^5.12.1",
+    "colord": "^2.9.3",
+    "eslint": "^8.9.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.4.0",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-simple-import-sort": "^9.0.0",
+    "eslint-plugin-storybook": "^0.6.15",
+    "framer-motion": "^10.16.4",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.4.0",
+    "lodash.isempty": "^4.4.0",
+    "pnpapi": "^0.0.0",
+    "prettier": "^2.5.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^4.3.1",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-filesize": "^10.0.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "storybook": "^7.5.2",
+    "stringify-object": "^5.0.0",
+    "ts-jest": "^29.0.5",
+    "typescript": "^4.5.5",
+    "vite": "^4.5.0"
+  },
+  "packageManager": "yarn@4.0.1"
+}