Core v0.1.0

.gitignore

@@ -0,0 +1,136 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# VS Code
+*.code-workspace
+
+# Sentry Auth Token
+.sentryclirc

core/components/antd/inputs.ts

@@ -0,0 +1,46 @@
+// TODO: Fix style using antd theme
+import { InputNumber as AntInputNumber } from 'antd';
+import styled from 'styled-components';
+import { InputNumberI } from '@styled_comps/interfaces';
+import invert from 'invert-color';
+
+import { 
+  marginStyle,
+  paddingStyle,
+  textFontStyle,
+  positionStyle,
+  dimensionStyle,
+  borderOutlineStyle,
+  backgroundStyle,
+} from '@styled_comps/style_templates';
+
+// fontSize: props.fontSize || '16px',
+const InputNumber = styled(AntInputNumber).attrs((props: InputNumberI) => ({
+  ...props,
+  borderRadius: props.borderRadius || '50px',
+  height: props.height || '46px',
+  padding: props.padding || '0 20px',
+  backgroundColor: props.backgroundColor || '#172A3E',
+  fontWeight: props.fontWeight || 600,
+}))`
+  ${positionStyle}
+  ${dimensionStyle}
+  ${marginStyle}
+  ${borderOutlineStyle}
+  
+  .ant-input-number-input{
+    ${paddingStyle}
+    ${textFontStyle}
+    height: ${props => props.height};
+  }
+  .ant-input-number-group-addon{
+    ${paddingStyle}
+    ${textFontStyle}
+    ${backgroundStyle}
+    ${({ backgroundColor }) => backgroundColor && `color: ${invert(backgroundColor)};` || ''}
+    border-top-right-radius: ${props => props.borderRadius};
+    border-bottom-right-radius: ${props => props.borderRadius};
+  }
+`;
+
+export { InputNumber };

core/components/antd/modal/index.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { Modal as AntdModal, ModalProps as AntdModalProps } from 'antd';
+import { ComponentProps } from '@interfaces/util';
+
+interface ModalProps extends AntdModalProps {
+  handleOk: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void,
+  handleCancel: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void,
+}
+
+const Modal: React.FC<ModalProps> = (props) => {
+  const { children, handleOk, handleCancel, ...rest } = props;
+
+  return (
+    <>
+      <AntdModal
+        onOk={handleOk}
+        onCancel={handleCancel}
+        {...rest}
+      >
+        { children }
+      </AntdModal>
+    </>
+  )
+}
+
+export default Modal

core/components/antd/modal/trigger.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react'
+import { Button, ModalProps } from 'antd';
+import Modal from '.'
+
+export interface CallbackProps {
+  open?: boolean,
+  confirmLoading?: boolean,
+  setOpen: Function,
+  setConfirmLoading: Function,
+  openCounter: number,
+  setOpenCounter: Function,
+}
+
+type NewModalProps = Omit<ModalProps, "children">;
+
+interface TriggerProps extends NewModalProps {
+  children: (params: CallbackProps) => React.ReactNode
+  render?: (params: CallbackProps) => React.ReactNode
+  text?: string
+  open?: boolean
+  confirmLoading?: boolean
+  handleOk?: Function
+  handleCancel?: Function
+}
+
+const Trigger: React.FC<TriggerProps> = (props) => {
+  const {open, confirmLoading, handleOk, handleCancel, ...rest } = props;
+  const [openCounter, setOpenCounter] = useState<number>(0);
+  const [isOpen, setIsOpen] = useState<boolean>(!!open);
+  const [isConfirmLoading, setIsConfirmLoading] = useState<boolean>(!!confirmLoading);
+
+  const childrenProps = {
+    open: isOpen,
+    confirmLoading: isConfirmLoading,
+    setOpen: setIsOpen,
+    setConfirmLoading: setIsConfirmLoading,
+    openCounter,
+    setOpenCounter,
+  }
+
+  const internalHandleOk = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    handleOk && handleOk(childrenProps, event);
+  };
+
+  const internalHandleCancel = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    handleCancel && handleCancel(childrenProps, event);
+  };
+
+  const modalProps = {
+    open: isOpen,
+    confirmLoading: isConfirmLoading,
+    handleOk: internalHandleOk,
+    handleCancel: internalHandleCancel,
+  }
+
+  // const childrenWithProps = React.isValidElement(props.children) ?
+  //   React.cloneElement(props.children, { modalProps: childrenProps }) :
+  //   props.children;
+  // render ( { childrenWithProps } )
+
+  const openModal = () => {
+    setOpenCounter(openCounter + 1);
+    setIsOpen(true)
+  }
+
+  const { render } = props;
+
+  return (
+    <>
+      {/* Modal trigger  */}
+      {typeof render === 'function' && render(childrenProps)}
+      {!render && <Button type="primary" onClick={openModal}>{ props.text || 'Open modal' }</Button>}
+
+      {/* Modal */}
+      <Modal { ...modalProps} {...rest}>
+        { props.children(childrenProps as CallbackProps) }
+      </Modal>
+    </>
+  )
+}
+
+export default Trigger

core/components/antd/qr_code.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { QRCode } from 'antd';
+import brand from '@app/config/brand';
+
+// TODO: Check a better way to access to @app stuff. Is it ok?
+
+export interface QrCodeProps {
+  value: string
+  size?: number
+  iconSize?: number
+  showBrandIcon?: boolean
+}
+const QrCode = ({ size=300, iconSize=50, showBrandIcon, ...rest }: QrCodeProps) => {
+  return (
+    <QRCode
+      size={size}
+      iconSize={iconSize}
+      icon={showBrandIcon && brand.favLogo.src || undefined}
+      {...rest}
+    />
+  )
+}
+
+export default QrCode

core/components/antd/table/hooks/use_table_params.ts

@@ -0,0 +1,51 @@
+import React, { useState } from 'react'
+import type { TablePaginationConfig } from 'antd/es/table';
+import { FilterValue, SorterResult } from 'antd/es/table/interface';
+export type { ColumnsType } from 'antd/es/table'
+
+export interface TableParamsDataType<DataType> {
+  tableParams: TableParams;
+  handleTableChange: (
+    tablePagination: TablePaginationConfig,
+    filters: Record<string, FilterValue | null>,
+    sorter: SorterResult<DataType> | SorterResult<DataType>[],
+  ) => void 
+}
+
+export interface TableParams {
+  pagination?: TablePaginationConfig;
+  sortField?: string;
+  sortOrder?: string;
+  filters?: Record<string, FilterValue | null>;
+}
+
+interface Props {
+  pagination: false | TablePaginationConfig | undefined,
+  setPagination: (pagination: TablePaginationConfig) => void,
+  onTableChange?: (params: TableParams) => void
+}
+
+
+export default function useTableParams<DataType>({ setPagination, pagination, onTableChange }: Props){
+  const [tableParams, setTableParams] = useState<TableParams>({});
+
+  function handleTableChange(
+    tablePagination: TablePaginationConfig,
+    filters: Record<string, FilterValue | null>,
+    sorter: SorterResult<DataType> | SorterResult<DataType>[],
+  ){
+    const tableParams = { filters, ...sorter }
+    setTableParams(tableParams);
+    setPagination(tablePagination);
+
+    // `dataSource` is useless since `pageSize` changed. We need it!?
+    // if (tablePagination.pageSize !== pagination?.pageSize) {
+      // setData([]);
+    // }
+
+    onTableChange && onTableChange({ ...tableParams, pagination: tablePagination })
+  };
+
+  return { tableParams, handleTableChange } as TableParamsDataType<DataType>
+}
+