GridSheet Vue Example
23 |
24 |
49 |
15 |
18 |
19 | );
20 | }
21 |
22 | export default function MyApp() {
23 | return
19 | {children}
20 |
,
21 | document.body,
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/packages/react-core/src/lib/events.ts:
--------------------------------------------------------------------------------
1 | export const isTouching = (e: React.TouchEvent | React.MouseEvent): boolean => {
2 | if (e.type.startsWith('touch')) {
3 | return (e as React.TouchEvent).touches.length > 0;
4 | }
5 | if (e.type.startsWith('mouse')) {
6 | const mouseEvent = e as React.MouseEvent;
7 | // left click only
8 | return !!(mouseEvent.buttons & 1) && mouseEvent.button === 0;
9 | }
10 | return false;
11 | };
12 |
13 | /**
14 | * Safely call preventDefault to avoid errors on touch events
15 | */
16 | export const safePreventDefault = (e: React.MouseEvent | React.TouchEvent): void => {
17 | if (!e.type.startsWith('touch')) {
18 | e.preventDefault();
19 | }
20 | };
21 |
--------------------------------------------------------------------------------
/packages/storybook/.storybook/preview.js:
--------------------------------------------------------------------------------
1 | /** @type { import('@storybook/react').Preview } */
2 | const preview = {
3 | parameters: {
4 | docs: {
5 | disable: true,
6 | },
7 | controls: {
8 | disable: true,
9 | },
10 | // Add GitHub repository link
11 | links: {
12 | github: {
13 | title: 'GitHub',
14 | url: 'https://github.com/walkframe/gridsheet',
15 | },
16 | },
17 | // Add GitHub link to toolbar
18 | toolbar: {
19 | 'github-link': {
20 | title: 'View on GitHub',
21 | icon: 'github',
22 | url: 'https://github.com/walkframe/gridsheet',
23 | },
24 | },
25 | },
26 | };
27 |
28 | export default preview;
--------------------------------------------------------------------------------
/packages/preact-core/exports.ts:
--------------------------------------------------------------------------------
1 | export {
2 | useState,
3 | useReducer,
4 | useEffect,
5 | useLayoutEffect,
6 | useRef,
7 | useImperativeHandle,
8 | useMemo,
9 | useCallback,
10 | useContext,
11 | useDebugValue,
12 | createElement,
13 | createContext,
14 | createRef,
15 | Fragment,
16 | Component,
17 | version,
18 | Children,
19 | render as compatRender,
20 | hydrate,
21 | unmountComponentAtNode,
22 | createPortal,
23 | createFactory,
24 | cloneElement,
25 | isValidElement,
26 | findDOMNode,
27 | PureComponent,
28 | memo,
29 | forwardRef,
30 | unstable_batchedUpdates,
31 | StrictMode,
32 | Suspense,
33 | SuspenseList,
34 | lazy,
35 | } from 'preact/compat';
36 |
--------------------------------------------------------------------------------
/packages/docs/pages/getting-started/react.mdx:
--------------------------------------------------------------------------------
1 | # React
2 |
3 | GridSheet provides a comprehensive React component that brings Excel-like functionality to your React applications.
4 |
5 | ## Installation
6 |
7 | ```bash
8 | npm install @gridsheet/react-core
9 | # or
10 | yarn add @gridsheet/react-core
11 | # or
12 | pnpm add @gridsheet/react-core
13 | ```
14 |
15 | ## Basic Usage
16 |
17 |
21 |
22 | ## Next Steps
23 | - See examples in the [examples section](/examples/case1).
24 | - Refer to the [API Reference](/api-reference/props) for detailed documentation.
25 |
--------------------------------------------------------------------------------
/packages/react-core/src/formula/functions/abs.ts:
--------------------------------------------------------------------------------
1 | import { FormulaError } from '../evaluator';
2 | import { BaseFunction } from './__base';
3 | import { ensureNumber } from './__utils';
4 |
5 | export class AbsFunction extends BaseFunction {
6 | example = 'ABS(-2)';
7 | helpText = ['Returns the absolute value of a number'];
8 | helpArgs = [{ name: 'value', description: 'target number' }];
9 |
10 | protected validate() {
11 | if (this.bareArgs.length !== 1) {
12 | throw new FormulaError('#N/A', 'Number of arguments for ABS is incorrect.');
13 | }
14 | this.bareArgs = this.bareArgs.map((arg) => ensureNumber(arg));
15 | }
16 |
17 | protected main(value: number) {
18 | return Math.abs(value);
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2015",
4 | "module": "ES2015",
5 | "moduleResolution": "node",
6 | "lib": ["DOM", "ESNext", "DOM.Iterable", "ScriptHost", "ES2016.Array.Include"],
7 | "declaration": true,
8 | "declarationMap": true,
9 | "allowJs": true,
10 | "jsx": "react",
11 | "sourceMap": true,
12 | "outDir": "./dist/",
13 | "strict": true,
14 | "noImplicitAny": true,
15 | "strictNullChecks": true,
16 | "esModuleInterop": true,
17 | "skipLibCheck": true,
18 | "baseUrl": "./src/",
19 | "forceConsistentCasingInFileNames": true
20 | },
21 | "exclude": ["node_modules", "storybook", "dist", "e2e"],
22 | "include": ["**/*.ts", "**/*.tsx"]
23 | }
24 |
--------------------------------------------------------------------------------
/packages/react-core/src/formula/functions/uminus.ts:
--------------------------------------------------------------------------------
1 | import { FormulaError } from '../evaluator';
2 | import { BaseFunction } from './__base';
3 | import { ensureNumber } from './__utils';
4 |
5 | export class UminusFunction extends BaseFunction {
6 | example = 'UMINUS(4)';
7 | helpText = ['Returns a number with positive and negative values reversed.'];
8 | helpArgs = [{ name: 'value1', description: 'A number that will be subtracted.' }];
9 |
10 | protected validate() {
11 | if (this.bareArgs.length !== 1) {
12 | throw new FormulaError('#N/A', 'A single numerical value is only required.');
13 | }
14 | this.bareArgs = this.bareArgs.map((arg) => ensureNumber(arg));
15 | }
16 |
17 | protected main(v1: number) {
18 | return -v1;
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/packages/react-core/src/formula/functions/len.ts:
--------------------------------------------------------------------------------
1 | import { FormulaError } from '../evaluator';
2 | import { BaseFunction } from './__base';
3 | import { ensureString } from './__utils';
4 |
5 | export class LenFunction extends BaseFunction {
6 | example = 'LEN(A2)';
7 | helpText = ['Returns the length of a string.'];
8 | helpArgs = [
9 | {
10 | name: 'text',
11 | description: 'A text to be returned the length.',
12 | },
13 | ];
14 |
15 | protected validate() {
16 | if (this.bareArgs.length !== 1) {
17 | throw new FormulaError('#N/A', 'Number of arguments for LEN is incorrect.');
18 | }
19 | this.bareArgs = [ensureString(this.bareArgs[0])];
20 | }
21 |
22 | protected main(text: string) {
23 | return text.length;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/vue-core/src/hub.ts:
--------------------------------------------------------------------------------
1 | import { shallowRef, watch } from 'vue';
2 | import { createHub, WireProps, type TransmitProps } from '@gridsheet/preact-core';
3 |
4 | export function useHub(wireProps: WireProps = {}) {
5 | const hub = createHub(wireProps);
6 | const ref = shallowRef(hub);
7 | const { wire } = ref.value;
8 |
9 | function transmit(patch?: TransmitProps) {
10 | Object.assign(wire, patch);
11 | if (!wire.ready) {
12 | return;
13 | }
14 | requestAnimationFrame(() => (ref.value = { ...ref.value }));
15 | }
16 | wire.transmit = transmit;
17 |
18 | // Watch for hubProps changes and apply them to hub
19 | watch(
20 | () => wireProps,
21 | (newProps) => transmit(newProps),
22 | { deep: true },
23 | );
24 | return ref;
25 | }
26 |
--------------------------------------------------------------------------------
/packages/docs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es2015",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": false,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "incremental": true,
11 | "esModuleInterop": true,
12 | "module": "esnext",
13 | "moduleResolution": "bundler",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "jsx": "preserve",
17 | "baseUrl": ".",
18 | "paths": {
19 | "@gridsheet/react-core": ["../react-core/src"],
20 | "@gridsheet/react-core/*": ["../react-core/src/*"]
21 | }
22 | },
23 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
24 | "exclude": ["node_modules"]
25 | }
26 |
--------------------------------------------------------------------------------
/packages/storybook/.storybook/manager.js:
--------------------------------------------------------------------------------
1 | import { addons } from '@storybook/manager-api';
2 | import { create } from '@storybook/theming/create';
3 |
4 | // Create a custom theme
5 | const theme = create({
6 | base: 'light',
7 | brandTitle: 'Gridsheet',
8 | brandUrl: 'https://github.com/walkframe/gridsheet',
9 | brandImage: 'https://github.com/favicon.ico',
10 | brandTarget: '_blank',
11 | });
12 |
13 | // Add the theme to the manager
14 | addons.setConfig({
15 | theme,
16 | sidebar: {
17 | showRoots: true,
18 | },
19 | toolbar: {
20 | title: { hidden: false },
21 | zoom: { hidden: false },
22 | eject: { hidden: false },
23 | copy: { hidden: false },
24 | fullscreen: { hidden: false },
25 | },
26 | panelPosition: 'bottom',
27 | showPanel: false,
28 | });
--------------------------------------------------------------------------------
/packages/docs/pages/getting-started/vanilla.mdx:
--------------------------------------------------------------------------------
1 | # Vanilla JavaScript
2 |
3 | GridSheet provides a lightweight vanilla JavaScript library that brings Excel-like functionality to your web applications without any framework dependencies.
4 |
5 | ## Installation
6 |
7 | ```bash
8 | npm install @gridsheet/preact-core
9 | # or
10 | yarn add @gridsheet/preact-core
11 | # or
12 | pnpm add @gridsheet/preact-core
13 | ```
14 |
15 | ## Basic Usage
16 |
17 |
21 |
22 | ## Next Steps
23 | - You can find more examples in the [examples section](/examples/case1).
24 | - Refer to the [API Reference](/api-reference/props) for detailed documentation.
25 |
--------------------------------------------------------------------------------
/packages/react-core/src/formula/functions/atan.ts:
--------------------------------------------------------------------------------
1 | import { FormulaError } from '../evaluator';
2 | import { BaseFunction } from './__base';
3 | import { ensureNumber } from './__utils';
4 |
5 | export class AtanFunction extends BaseFunction {
6 | example = 'ATAN(1)';
7 | helpText = ['Returns the inverse tan of the value in radians.'];
8 | helpArgs = [
9 | {
10 | name: 'value',
11 | description: 'A value for the inverse tan.',
12 | },
13 | ];
14 |
15 | protected validate() {
16 | if (this.bareArgs.length !== 1) {
17 | throw new FormulaError('#N/A', 'Number of arguments for ATAN is incorrect.');
18 | }
19 | this.bareArgs = this.bareArgs.map((arg) => ensureNumber(arg));
20 | }
21 |
22 | protected main(value: number) {
23 | return Math.atan(value);
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/react-core/src/formula/functions/concatenate.ts:
--------------------------------------------------------------------------------
1 | import { BaseFunction } from './__base';
2 | import { ensureString } from './__utils';
3 |
4 | export class ConcatenateFunction extends BaseFunction {
5 | example = 'CONCATENATE("Hello", "World")';
6 | helpText = ['Returns the concatenation of the values.'];
7 | helpArgs = [
8 | { name: 'value1', description: 'First string value.' },
9 | {
10 | name: 'value2',
11 | description: 'Additional string values to be concatenated with the value1',
12 | optional: true,
13 | iterable: true,
14 | },
15 | ];
16 |
17 | protected validate() {
18 | this.bareArgs = this.bareArgs.map((arg) => ensureString(arg));
19 | }
20 |
21 | protected main(...values: string[]) {
22 | return values.reduce((a, b) => a + b);
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/packages/react-core/src/formula/functions/col.spec.ts:
--------------------------------------------------------------------------------
1 | import { ColFunction } from './col';
2 | import { Table } from '../../lib/table';
3 | import { FormulaError, RangeEntity, RefEntity, ValueEntity } from '../evaluator';
4 |
5 | describe('col', () => {
6 | const table = new Table({});
7 | table.initialize({
8 | A4: { value: 9999 },
9 | });
10 | describe('normal', () => {
11 | it('eq', () => {
12 | {
13 | const f = new ColFunction({
14 | table,
15 | args: [new RefEntity('C100')],
16 | });
17 | expect(f.call()).toBe(3);
18 | }
19 | {
20 | const f = new ColFunction({
21 | table,
22 | args: [],
23 | origin: { x: 5, y: 3 },
24 | });
25 | expect(f.call()).toBe(5);
26 | }
27 | });
28 | });
29 | });
30 |
--------------------------------------------------------------------------------
/packages/react-core/src/formula/functions/or.ts:
--------------------------------------------------------------------------------
1 | import { BaseFunction } from './__base';
2 | import { ensureBoolean } from './__utils';
3 |
4 | export class OrFunction extends BaseFunction {
5 | example = 'OR(A1=1, A2=2)';
6 | helpText = ['Returns TRUE if any argument is logically true.', 'Returns FALSE if all arguments are logically false.'];
7 | helpArgs = [
8 | { name: 'expression1', description: 'First logical expression.' },
9 | {
10 | name: 'expression2',
11 | description: 'Additional expressions',
12 | optional: true,
13 | iterable: true,
14 | },
15 | ];
16 |
17 | protected validate() {
18 | this.bareArgs = this.bareArgs.map((arg) => ensureBoolean(arg));
19 | }
20 |
21 | protected main(...values: boolean[]) {
22 | return values.reduce((a, b) => a || b);
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/packages/react-core/src/formula/functions/row.spec.ts:
--------------------------------------------------------------------------------
1 | import { RowFunction } from './row';
2 | import { Table } from '../../lib/table';
3 | import { FormulaError, RangeEntity, RefEntity, ValueEntity } from '../evaluator';
4 |
5 | describe('row', () => {
6 | const table = new Table({});
7 | table.initialize({
8 | A4: { value: 9999 },
9 | });
10 | describe('normal', () => {
11 | it('eq', () => {
12 | {
13 | const f = new RowFunction({
14 | table,
15 | args: [new RefEntity('C100')],
16 | });
17 | expect(f.call()).toBe(100);
18 | }
19 | {
20 | const f = new RowFunction({
21 | table,
22 | args: [],
23 | origin: { x: 5, y: 3 },
24 | });
25 | expect(f.call()).toBe(3);
26 | }
27 | });
28 | });
29 | });
30 |
--------------------------------------------------------------------------------
/packages/react-core/src/formula/functions/tan.ts:
--------------------------------------------------------------------------------
1 | import { FormulaError } from '../evaluator';
2 | import { BaseFunction } from './__base';
3 | import { ensureNumber } from './__utils';
4 |
5 | export class TanFunction extends BaseFunction {
6 | example = 'TAN(1)';
7 | helpText = ['Returns the tan of the angle specified in radians.'];
8 | helpArgs = [
9 | {
10 | name: 'angle',
11 | description: 'An angle in radians, at which you want the tan.',
12 | },
13 | ];
14 |
15 | protected validate() {
16 | if (this.bareArgs.length !== 1) {
17 | throw new FormulaError('#N/A', 'Number of arguments for TAN is incorrect.');
18 | }
19 | this.bareArgs = this.bareArgs.map((arg) => ensureNumber(arg));
20 | }
21 |
22 | protected main(angle: number) {
23 | return Math.tan(angle);
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/react-core/src/formula/functions/and.ts:
--------------------------------------------------------------------------------
1 | import { BaseFunction } from './__base';
2 | import { ensureBoolean } from './__utils';
3 |
4 | export class AndFunction extends BaseFunction {
5 | example = 'AND(A1=1, A2=2)';
6 | helpText = ['Returns TRUE if all arguments are logically TRUE.', 'Returns FALSE if any argument is logically FALSE.'];
7 | helpArgs = [
8 | { name: 'expression1', description: 'First logical expression.' },
9 | {
10 | name: 'expression2',
11 | description: 'Additional expressions',
12 | optional: true,
13 | iterable: true,
14 | },
15 | ];
16 |
17 | protected validate() {
18 | this.bareArgs = this.bareArgs.map((arg) => ensureBoolean(arg));
19 | }
20 |
21 | protected main(...values: boolean[]) {
22 | return values.reduce((a, b) => a && b);
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/packages/react-core/src/formula/functions/cos.ts:
--------------------------------------------------------------------------------
1 | import { FormulaError } from '../evaluator';
2 | import { BaseFunction } from './__base';
3 | import { ensureNumber } from './__utils';
4 |
5 | export class CosFunction extends BaseFunction {
6 | example = 'COS(PI()/2)';
7 | helpText = ['Returns the cos of the angle specified in radians.'];
8 | helpArgs = [
9 | {
10 | name: 'angle',
11 | description: 'An angle in radians, at which you want the cos.',
12 | },
13 | ];
14 |
15 | protected validate() {
16 | if (this.bareArgs.length !== 1) {
17 | throw new FormulaError('#N/A', 'Number of arguments for COS is incorrect.');
18 | }
19 | this.bareArgs = this.bareArgs.map((arg) => ensureNumber(arg));
20 | }
21 |
22 | protected main(angle: number) {
23 | return Math.cos(angle);
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/react-core/src/formula/functions/sin.ts:
--------------------------------------------------------------------------------
1 | import { FormulaError } from '../evaluator';
2 | import { BaseFunction } from './__base';
3 | import { ensureNumber } from './__utils';
4 |
5 | export class SinFunction extends BaseFunction {
6 | example = 'SIN(PI()/2)';
7 | helpText = ['Returns the sin of the angle specified in radians.'];
8 | helpArgs = [
9 | {
10 | name: 'angle',
11 | description: 'An angle in radians, at which you want the sin.',
12 | },
13 | ];
14 |
15 | protected validate() {
16 | if (this.bareArgs.length !== 1) {
17 | throw new FormulaError('#N/A', 'Number of arguments for SIN is incorrect.');
18 | }
19 | this.bareArgs = this.bareArgs.map((arg) => ensureNumber(arg));
20 | }
21 |
22 | protected main(angle: number) {
23 | return Math.sin(angle);
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/react-core/src/components/svg/Base.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactNode, CSSProperties } from 'react';
2 |
3 | export interface IconProps {
4 | style?: CSSProperties;
5 | color?: string;
6 | size?: number;
7 | }
8 |
9 | interface BaseProps extends IconProps {
10 | children?: ReactNode;
11 | }
12 |
13 | // https://tabler.io/icons
14 |
15 | export const Base = ({ style, size = 24, children }: BaseProps) => {
16 | return (
17 |
32 | );
33 | };
34 |
--------------------------------------------------------------------------------
/packages/react-core/src/formula/functions/radians.ts:
--------------------------------------------------------------------------------
1 | import { FormulaError } from '../evaluator';
2 | import { BaseFunction } from './__base';
3 | import { ensureNumber } from './__utils';
4 |
5 | export class RadiansFunction extends BaseFunction {
6 | example = 'RADIANS(180)';
7 | helpText = ['Converts an angle from degrees to radians.'];
8 | helpArgs = [
9 | {
10 | name: 'angle',
11 | description: 'The angle to convert from degrees to radians.',
12 | },
13 | ];
14 |
15 | protected validate() {
16 | if (this.bareArgs.length !== 1) {
17 | throw new FormulaError('#N/A', 'Number of arguments for RADIANS is incorrect.');
18 | }
19 | this.bareArgs = this.bareArgs.map((arg) => ensureNumber(arg));
20 | }
21 |
22 | protected main(angle: number) {
23 | return (angle / 180) * Math.PI;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/preact-core/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "types": ["vite/client", "react"],
4 | "target": "ES2015",
5 | "module": "ES2015",
6 | "moduleResolution": "node",
7 | "lib": ["DOM", "ESNext", "DOM.Iterable", "ScriptHost", "ES2016.Array.Include"],
8 | "declaration": true,
9 | "declarationMap": true,
10 | "allowJs": true,
11 | "jsx": "react-jsx",
12 | "jsxImportSource": "react",
13 | "sourceMap": true,
14 | "outDir": "./dist/",
15 | "strict": true,
16 | "noImplicitAny": true,
17 | "strictNullChecks": true,
18 | "esModuleInterop": true,
19 | "skipLibCheck": true,
20 | "baseUrl": "./src/",
21 | "forceConsistentCasingInFileNames": true
22 | },
23 | "exclude": ["node_modules", "storybook", "dist", "e2e", "plugins"],
24 | "include": ["**/*.ts", "**/*.tsx"]
25 | }
26 |
--------------------------------------------------------------------------------
/packages/react-core/src/formula/functions/eq.ts:
--------------------------------------------------------------------------------
1 | import { FormulaError } from '../evaluator';
2 | import { BaseFunction } from './__base';
3 | import { eq } from './__utils';
4 |
5 | export class EqFunction extends BaseFunction {
6 | example = 'EQ(6, 7)';
7 | helpText = [
8 | 'Returns TRUE if the two specified values are equal, FALSE if they are not.',
9 | "This is the same as the '=' operator.",
10 | ];
11 | helpArgs = [
12 | { name: 'value1', description: 'First value.' },
13 | { name: 'value2', description: 'A value to be compared with value1.' },
14 | ];
15 |
16 | protected validate() {
17 | if (this.bareArgs.length !== 2) {
18 | throw new FormulaError('#N/A', 'Number of arguments for EQ is incorrect.');
19 | }
20 | }
21 |
22 | protected main(v1: any, v2: any) {
23 | return eq(v1, v2);
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/react-core/src/formula/functions/exp.ts:
--------------------------------------------------------------------------------
1 | import { FormulaError } from '../evaluator';
2 | import { BaseFunction } from './__base';
3 | import { ensureNumber } from './__utils';
4 |
5 | export class ExpFunction extends BaseFunction {
6 | example = 'EXP(2)';
7 | helpText = ['Returns the power of a number whose base is the Euler number e.'];
8 | helpArgs = [
9 | {
10 | name: 'exponent',
11 | description: 'It is an exponent of power with e as the base.',
12 | },
13 | ];
14 |
15 | protected validate() {
16 | if (this.bareArgs.length !== 1) {
17 | throw new FormulaError('#N/A', 'Number of arguments for EXP is incorrect.');
18 | }
19 | this.bareArgs = this.bareArgs.map((arg) => ensureNumber(arg));
20 | }
21 |
22 | protected main(exponent: number) {
23 | return Math.exp(exponent);
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/react-core/src/formula/functions/lenb.ts:
--------------------------------------------------------------------------------
1 | import { FormulaError } from '../evaluator';
2 | import { BaseFunction } from './__base';
3 | import { ensureString } from './__utils';
4 |
5 | export class LenbFunction extends BaseFunction {
6 | example = 'LENB(A2)';
7 | helpText = ['Returns the number of bytes in the length of the string.'];
8 | helpArgs = [
9 | {
10 | name: 'text',
11 | description: 'A text to be returned the length of the bytes.',
12 | },
13 | ];
14 |
15 | protected validate() {
16 | if (this.bareArgs.length !== 1) {
17 | throw new FormulaError('#N/A', 'Number of arguments for LENB is incorrect.');
18 | }
19 | this.bareArgs = [ensureString(this.bareArgs[0])];
20 | }
21 |
22 | protected main(text: string) {
23 | return encodeURIComponent(text).replace(/%../g, 'x').length;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/react-core/src/formula/functions/ne.ts:
--------------------------------------------------------------------------------
1 | import { FormulaError } from '../evaluator';
2 | import { BaseFunction } from './__base';
3 | import { ne } from './__utils';
4 |
5 | export class NeFunction extends BaseFunction {
6 | example = 'NE(6, 7)';
7 | helpText = [
8 | 'Returns TRUE if the two specified values are not equal, FALSE if they are.',
9 | "This is the same as the '<>' operator.",
10 | ];
11 | helpArgs = [
12 | { name: 'value1', description: 'First value.' },
13 | { name: 'value2', description: 'A value to be compared with value1.' },
14 | ];
15 |
16 | protected validate() {
17 | if (this.bareArgs.length !== 2) {
18 | throw new FormulaError('#N/A', 'Number of arguments for NE is incorrect.');
19 | }
20 | }
21 |
22 | protected main(v1: number, v2: number) {
23 | return ne(v1, v2);
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/react-core/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import react from "@vitejs/plugin-react";
3 | import dts from "vite-plugin-dts";
4 |
5 | export default defineConfig(({ mode }) => ({
6 | plugins: [react(), dts({ insertTypesEntry: true, exclude: ['**/*.spec.ts', '**/*.spec.tsx'] })],
7 | build: {
8 | lib: {
9 | entry: "./src/index.ts",
10 | name: "GridSheet",
11 | formats: ["es"],
12 | fileName: (_, name) => `${name}.js`,
13 | },
14 | outDir: 'dist',
15 | rollupOptions: {
16 | external: [/^react/, /^@?react-dom/, "@gridsheet/react-core"],
17 | output: {
18 | preserveModules: false,
19 | //preserveModulesRoot: process.cwd(),
20 | },
21 | },
22 | sourcemap: mode === "development",
23 | minify: mode === "development" ? false : "esbuild",
24 | },
25 | }));
26 |
--------------------------------------------------------------------------------
/packages/react-core/src/formula/functions/gt.ts:
--------------------------------------------------------------------------------
1 | import { FormulaError } from '../evaluator';
2 | import { BaseFunction } from './__base';
3 | import { gt } from './__utils';
4 |
5 | export class GtFunction extends BaseFunction {
6 | example = 'GT(5, 3)';
7 | helpText = [
8 | 'Returns TRUE if the first argument is truly greater than the second, FALSE otherwise.',
9 | "This is the same as the '>' operator.",
10 | ];
11 | helpArgs = [
12 | { name: 'value1', description: 'First value.' },
13 | { name: 'value2', description: 'A value to be compared with value1.' },
14 | ];
15 |
16 | protected validate() {
17 | if (this.bareArgs.length !== 2) {
18 | throw new FormulaError('#N/A', 'Number of arguments for GT is incorrect.');
19 | }
20 | }
21 |
22 | protected main(v1: number, v2: number) {
23 | return gt(v1, v2);
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/react-core/src/formula/functions/gte.ts:
--------------------------------------------------------------------------------
1 | import { FormulaError } from '../evaluator';
2 | import { BaseFunction } from './__base';
3 | import { gte } from './__utils';
4 |
5 | export class GteFunction extends BaseFunction {
6 | example = 'GTE(5, 3)';
7 | helpText = [
8 | 'Returns TRUE if the first argument is greater than the second, FALSE otherwise.',
9 | "This is the same as the '>=' operator.",
10 | ];
11 | helpArgs = [
12 | { name: 'value1', description: 'First value.' },
13 | { name: 'value2', description: 'A value to be compared with value1.' },
14 | ];
15 |
16 | protected validate() {
17 | if (this.bareArgs.length !== 2) {
18 | throw new FormulaError('#N/A', 'Number of arguments for GTE is incorrect.');
19 | }
20 | }
21 |
22 | protected main(v1: number, v2: number) {
23 | return gte(v1, v2);
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/react-core/src/formula/functions/lt.ts:
--------------------------------------------------------------------------------
1 | import { FormulaError } from '../evaluator';
2 | import { BaseFunction } from './__base';
3 | import { lt } from './__utils';
4 |
5 | export class LtFunction extends BaseFunction {
6 | example = 'LT(3, 6)';
7 | helpText = [
8 | 'Returns TRUE if the first argument is truely less than the second argument, FALSE otherwise.',
9 | "This is the same as the '<' operator.",
10 | ];
11 | helpArgs = [
12 | { name: 'value1', description: 'First value.' },
13 | { name: 'value2', description: 'A value to be compared with value1.' },
14 | ];
15 |
16 | protected validate() {
17 | if (this.bareArgs.length !== 2) {
18 | throw new FormulaError('#N/A', 'Number of arguments for LT is incorrect.');
19 | }
20 | }
21 |
22 | protected main(v1: number, v2: number) {
23 | return lt(v1, v2);
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/react-core/src/formula/functions/lte.ts:
--------------------------------------------------------------------------------
1 | import { FormulaError } from '../evaluator';
2 | import { BaseFunction } from './__base';
3 | import { lte } from './__utils';
4 |
5 | export class LteFunction extends BaseFunction {
6 | example = 'LTE(3, 6)';
7 | helpText = [
8 | 'Returns TRUE if the first argument is less than the second argument, FALSE otherwise.',
9 | "This is the same as the '<=' operator.",
10 | ];
11 | helpArgs = [
12 | { name: 'value1', description: 'First value.' },
13 | { name: 'value2', description: 'A value to be compared with value1.' },
14 | ];
15 |
16 | protected validate() {
17 | if (this.bareArgs.length !== 2) {
18 | throw new FormulaError('#N/A', 'Number of arguments for LTE is incorrect.');
19 | }
20 | }
21 |
22 | protected main(v1: number, v2: number) {
23 | return lte(v1, v2);
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/react-core/src/formula/functions/multiply.ts:
--------------------------------------------------------------------------------
1 | import { FormulaError } from '../evaluator';
2 | import { BaseFunction } from './__base';
3 | import { ensureNumber } from './__utils';
4 |
5 | export class MultiplyFunction extends BaseFunction {
6 | example = 'MULTIPLY(6, 7)';
7 | helpText = ['Returns the product of two numbers.', "This is the same as the '*' operator."];
8 | helpArgs = [
9 | { name: 'factor1', description: 'First factor.' },
10 | { name: 'factor2', description: 'Second factor.' },
11 | ];
12 |
13 | protected validate() {
14 | if (this.bareArgs.length !== 2) {
15 | throw new FormulaError('#N/A', 'Number of arguments for MULTIPLY is incorrect.');
16 | }
17 | this.bareArgs = this.bareArgs.map((arg) => ensureNumber(arg));
18 | }
19 |
20 | protected main(v1: number, v2: number) {
21 | return v1 * v2;
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/packages/react-core/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "types": ["vite/client", "react", "jest"],
4 | "target": "ES2015",
5 | "module": "ES2015",
6 | "moduleResolution": "node",
7 | "lib": ["DOM", "ESNext", "DOM.Iterable", "ScriptHost", "ES2016.Array.Include"],
8 | "declaration": true,
9 | "declarationMap": true,
10 | "allowJs": true,
11 | "jsx": "react-jsx",
12 | "jsxImportSource": "react",
13 | "sourceMap": true,
14 | "outDir": "./dist/",
15 | "strict": true,
16 | "noImplicitAny": true,
17 | "strictNullChecks": true,
18 | "esModuleInterop": true,
19 | "skipLibCheck": true,
20 | "baseUrl": "./src/",
21 | "forceConsistentCasingInFileNames": true
22 | },
23 | "exclude": ["node_modules", "storybook", "dist", "e2e", "plugins"],
24 | "include": ["**/*.ts", "**/*.tsx", "**/*.spec.ts"]
25 | }
26 |
--------------------------------------------------------------------------------
/packages/react-core/src/formula/functions/not.ts:
--------------------------------------------------------------------------------
1 | import { FormulaError } from '../evaluator';
2 | import { BaseFunction } from './__base';
3 | import { ensureBoolean } from './__utils';
4 |
5 | export class NotFunction extends BaseFunction {
6 | example = 'NOT(TRUE)';
7 | helpText = ['Returns the inverse of the Boolean; if TRUE, NOT returns FALSE.', 'If FALSE, NOT returns TRUE.'];
8 | helpArgs = [
9 | {
10 | name: 'logical expression',
11 | description: 'A logical expression as a boolean.',
12 | },
13 | ];
14 |
15 | protected validate() {
16 | if (this.bareArgs.length === 1) {
17 | this.bareArgs[0] = ensureBoolean(this.bareArgs[0]);
18 | return;
19 | }
20 | throw new FormulaError('#N/A', 'Number of arguments for NOT is incorrect. 1 argument must be specified.');
21 | }
22 |
23 | protected main(v1: boolean) {
24 | return !v1;
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/packages/react-core/src/formula/functions/power.ts:
--------------------------------------------------------------------------------
1 | import { FormulaError } from '../evaluator';
2 | import { BaseFunction } from './__base';
3 | import { ensureNumber } from './__utils';
4 |
5 | export class PowerFunction extends BaseFunction {
6 | example = 'POWER(4,0.5)';
7 | helpText = ['Returns a number multiplied by an exponent.'];
8 | helpArgs = [
9 | { name: 'base', description: 'A number to be multiplied by an exponent.' },
10 | { name: 'exponent', description: 'An exponent to power the base.' },
11 | ];
12 |
13 | protected validate() {
14 | if (this.bareArgs.length !== 2) {
15 | throw new FormulaError('#N/A', 'Number of arguments for POWER is incorrect.');
16 | }
17 | this.bareArgs = this.bareArgs.map((arg) => ensureNumber(arg));
18 | }
19 |
20 | protected main(base: number, exponent: number) {
21 | return Math.pow(base, exponent);
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/packages/react-core/src/formula/functions/ln.ts:
--------------------------------------------------------------------------------
1 | import { FormulaError } from '../evaluator';
2 | import { BaseFunction } from './__base';
3 | import { ensureNumber } from './__utils';
4 |
5 | export class LnFunction extends BaseFunction {
6 | example = 'LN(100)';
7 | helpText = ['Returns the logarithm of e'];
8 | helpArgs = [
9 | {
10 | name: 'value',
11 | description: 'The value for the logarithm of e',
12 | },
13 | ];
14 |
15 | protected validate() {
16 | if (this.bareArgs.length !== 1) {
17 | throw new FormulaError('#N/A', 'Number of arguments for LN is incorrect.');
18 | }
19 | this.bareArgs = this.bareArgs.map((arg) => ensureNumber(arg));
20 | if (this.bareArgs[0] <= 0) {
21 | throw new FormulaError('NUM!', 'value must be greater than 0');
22 | }
23 | }
24 |
25 | protected main(value: number) {
26 | return Math.log(value);
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/packages/docs/pages/examples/_meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "case1": {
3 | "title": "Case 1: Sales Dashboard with Data Visualization"
4 | },
5 | "case2": {
6 | "title": "Case 2: GitHub Contributors Dashboard"
7 | },
8 | "case3": {
9 | "title": "Case 3: Pixel Art Drawing Interface"
10 | },
11 | "case4": {
12 | "title": "Case 4: Budget Management System with Policies"
13 | },
14 | "case5": {
15 | "title": "Case 5: A simplified menu with Multiple Sheets"
16 | },
17 | "case6": {
18 | "title": "Case 6: Calendar/Scheduler Interface"
19 | },
20 | "case7": {
21 | "title": "Case 7: Real-time Collaboration Interface"
22 | },
23 | "case8": {
24 | "title": "Case 8: Large Dataset Performance Demo"
25 | },
26 | "case9": {
27 | "title": "Case 9: Security & Data Protection"
28 | },
29 | "case10": {
30 | "title": "Case 10: Project Management with Event Handlers"
31 | }
32 | }
--------------------------------------------------------------------------------
/packages/docs/pages/getting-started/index.mdx:
--------------------------------------------------------------------------------
1 | # Getting Started
2 |
3 | GridSheet provides Excel-like spreadsheet functionality across multiple frameworks and vanilla JavaScript. Choose the implementation that best fits your project:
4 |
5 | ## Framework Support
6 |
7 | | Framework | Features | Best For |
8 | |-----------|----------|----------|
9 | | **[React](/getting-started/react)** | Full-featured with hooks, TypeScript, comprehensive events | React apps, TypeScript projects, complex state |
10 | | **[Vue](/getting-started/vue)** | Composition API, Options API, Vue 3 support | Vue applications, progressive enhancement |
11 | | **[Vanilla JS](/getting-started/vanilla)** | Framework-agnostic, minimal bundle size | Vanilla JS, legacy apps, minimal dependencies |
12 |
13 | **Note:** React and Vanilla JS versions support all GridSheet features. Vue versions have some limitations due to being wrapped implementations.
14 |
--------------------------------------------------------------------------------
/packages/react-core/src/formula/functions/log10.ts:
--------------------------------------------------------------------------------
1 | import { FormulaError } from '../evaluator';
2 | import { BaseFunction } from './__base';
3 | import { ensureNumber } from './__utils';
4 |
5 | export class Log10Function extends BaseFunction {
6 | example = 'LOG10(100)';
7 | helpText = ['Returns the logarithm of 10'];
8 | helpArgs = [
9 | {
10 | name: 'value',
11 | description: 'The value for the logarithm of 10',
12 | },
13 | ];
14 |
15 | protected validate() {
16 | if (this.bareArgs.length !== 1) {
17 | throw new FormulaError('#N/A', 'Number of arguments for LOG10 is incorrect.');
18 | }
19 | this.bareArgs = this.bareArgs.map((arg) => ensureNumber(arg));
20 | if (this.bareArgs[0] <= 0) {
21 | throw new FormulaError('NUM!', 'value must be greater than 0');
22 | }
23 | }
24 |
25 | protected main(value: number) {
26 | return Math.log10(value);
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/packages/react-core/src/formula/functions/concat.ts:
--------------------------------------------------------------------------------
1 | import { FormulaError } from '../evaluator';
2 | import { BaseFunction } from './__base';
3 | import { ensureString } from './__utils';
4 |
5 | export class ConcatFunction extends BaseFunction {
6 | example = 'CONCAT("Hello", "World")';
7 | helpText = ['Returns the concatenation of two values.', "This is the same as the '&' operator."];
8 | helpArgs = [
9 | { name: 'value1', description: 'A value to be concatenated with value2.' },
10 | { name: 'value2', description: 'A value to be concatenated with value1' },
11 | ];
12 |
13 | protected validate() {
14 | if (this.bareArgs.length !== 2) {
15 | throw new FormulaError('#N/A', 'Number of arguments for CONCAT is incorrect.');
16 | }
17 | this.bareArgs = this.bareArgs.map((arg) => ensureString(arg));
18 | }
19 |
20 | protected main(v1: string, v2: string) {
21 | return v1 + v2;
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/packages/vue-core/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@gridsheet/vue-core",
3 | "version": "2.0.5-0",
4 | "description": "Spreadsheet component for Vue 3",
5 | "main": "dist/index.js",
6 | "module": "dist/index.js",
7 | "types": "dist/index.d.ts",
8 | "files": ["dist"],
9 | "scripts": {
10 | "dev": "vite example",
11 | "build": "vite build",
12 | "preview": "vite preview"
13 | },
14 | "homepage": "https://gridsheet.walkframe.com/",
15 | "repository": {
16 | "type": "git",
17 | "url": "git+https://github.com/walkframe/gridsheet.git"
18 | },
19 | "peerDependencies": {
20 | "vue": "^3.3.0"
21 | },
22 | "dependencies": {
23 | "@gridsheet/preact-core": "^2.0.5"
24 | },
25 | "devDependencies": {
26 | "@vitejs/plugin-vue": "^5.2.4",
27 | "vue": "^3.4.21",
28 | "vite": "^6.3.5",
29 | "vite-plugin-dts": "^3.9.0"
30 | },
31 | "author": "righ",
32 | "license": "Apache-2.0"
33 | }
34 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/QUESTION.yaml:
--------------------------------------------------------------------------------
1 | name: "❓ Question"
2 | description: Create a new ticket for a question.
3 | title: "❓ [QUESTION] - 
,
13 | project: {
14 | link: 'https://github.com/walkframe/gridsheet',
15 | },
16 | chat: {
17 | link: 'https://www.reddit.com/r/gridsheet/',
18 | icon: GridSheet Vue Example
4 | 5 |
6 |
32 |
33 |
34 |
35 |
43 |
44 |