@sqrzro/admin 1.0.0-beta.7 → 2.0.0

package/docs/guides/03-pages.story.mdx

@@ -1,18 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Guides/Pages & Routing" />
-
-# Pages & Routing
-
-As Square Zero Admin is built on top of Next.js, it uses the same method for routing. You can read the [full documentation for Next.js routing](https://nextjs.org/docs/basic-features/pages) here, but in essence, any `.tsx` file you place in the `src/pages` folder will become a route. For example, a file at `src/pages/lorem.tsx` will be accessible at `/lorem`. The most basic admin page would look something like this:
-
-```
-import React from 'react';
-import { Scene } from 'squarezero-admin';
-
-const ExampleScene = () => (
-    <Scene title="Example Scene">Here is an example of some content</Scene>
-);
-
-export default ExampleScene;
-```

package/docs/guides/04-integration.story.mdx

@@ -1,33 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Guides/Integration with API" />
-
-# Integration with API
-
-Although not required, in almost all circumstances Square Zero Admin is going to be interacting with a backend API. This guide explains what requests are sent to the API, and what responses are expected back. This should enable you to make sure your backend API will integrate smoothly with your admin system.
-
-*Note: For simplicity, Square Zero Admin's request and response expectations are kept very opinionated, without much room for customisation. However, if this approach is deemed to restrictive to be useful for many projects, some more customisation options will be made available.*
-
-## Authentication
-
-Square Zero Admin makes use of JSON Web Tokens (JWT) for Authentication. JWT are an open, industry standard (RFC 7519) method for representing claims securely between two parties. When an admin user successfully logs in, the backend should pass a token back in the response. Square Zero Admin then stores this, and passes it up as an `Authorization` header in the next request. The backend should then check this header, ensure the token is valid, and only then respond with the requested data. The response should also contain an `Authorization` header with a new token, which Square Zero Admin will store and use for the next request, and so on.
-
-### Login
-
-In order to login, Square Zero Admin will expect to be able to `POST` to `/tokens` with the following parameters:
-
-```jsx
-{"username": "lorem", "password": "ipsum"}
-```
-
-If the user's details are correct, the backend should respond with a status of 200, and with a newly generated JWT:
-
-```jsx
-{ "token": "areallylongstringofcharacters" }
-```
-
-If they are incorrect, the backend should respond with a status of 422, and an object of errors:
-
-```jsx
-{ "errors": { "email": "An error message" } }
-```

package/docs/guides/a11y.story.mdx

@@ -1,7 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Guides/Accessibility" />
-
-# Accessibility
-
-Coming soon...

package/docs/guides/theming.story.mdx

@@ -1,7 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Guides/Theming" />
-
-# Theming
-
-Coming soon...

package/docs/introduction.story.mdx

@@ -1,17 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Overview/Introduction" />
-
-<svg height="40" width="40"><rect fill="red" x="0" y="0" height="40" width="40" /></svg>
-
----
-
-# Introduction
-
-Square Zero Admin is a collection of opinionated components, hooks, services and utilities that lets you very quickly build admin systems in React. This guide will help you setup an admin system, as well as acting as a comprehensive reference for all the elements available in the system.
-
-[Click here to get started](/story/guides-installation--page)
-
-## A Note on Beta
-
-Currently, the latest version of Square Zero Admin is `beta`. Although the package is well tested, and used on a number of production sites, with the current lack of documentation it would be unfair to describe it as ‘production-ready’, unless being used by the developers of the package. Work on complete documentation is underway and a true version `1.0.0` should be available in the near future.

package/jest.config.js

@@ -1,19 +0,0 @@
-module.exports = {
-    globals: {
-        'ts-jest': { isolatedModules: true },
-    },
-    moduleNameMapper: {
-        '@components/(.*)': '<rootDir>/src/components/$1',
-        '@core/(.*)': '<rootDir>/src/core/$1',
-        '@filters/(.*)': '<rootDir>/src/filters/$1',
-        '@hooks/(.*)': '<rootDir>/src/hooks/$1',
-        '@services/(.*)': '<rootDir>/src/services/$1',
-        '@utility/(.*)': '<rootDir>/src/utility/$1',
-        '\\.css$': 'identity-obj-proxy',
-        'modern-normalize': 'identity-obj-proxy',
-    },
-    preset: 'ts-jest',
-    setupFilesAfterEnv: ['<rootDir>/tests/setupFilesAfterEnv.js'],
-    testEnvironment: 'jsdom',
-    testMatch: ['**/?(*.)+(spec).ts?(x)'],
-};

package/rollup.config.js

@@ -1,36 +0,0 @@
-import postcss from 'rollup-plugin-postcss';
-import resolve from '@rollup/plugin-node-resolve';
-import typescript from '@rollup/plugin-typescript';
-
-const globals = {
-    '@heroicons/react': '@heroicons/react',
-    '@sqrzro/utility': '@sqrzro/utility',
-    classnames: 'classNames',
-    'date-fns': 'dateFns',
-    'next/app': 'NextApp',
-    'next/document': 'NextDocument',
-    'next/head': 'NextHead',
-    'next/link': 'NextLink',
-    'next/router': 'NextRouter',
-    'prop-types': 'PropTypes',
-    react: 'React',
-    'react-dom': 'ReactDOM',
-    'react-router': 'react-router',
-    'regenerator-runtime': 'regeneratorRuntime',
-    'use-deep-compare-effect': 'useDeepCompareEffect',
-};
-
-const config = {
-    input: 'src/index.ts',
-    output: {
-        file: 'dist/index.js',
-        format: 'umd',
-        globals,
-        name: 'squarezero-admin',
-        sourcemap: true,
-    },
-    external: Object.keys(globals),
-    plugins: [resolve(), typescript(), postcss({ extract: true })],
-};
-
-export default config;

package/scripts/create-exports.js

@@ -1,74 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-const exportStrings = [];
-
-const filterMocksAndSpecs = (files) =>
-    files.filter((file) => !file.match(/__mocks__/u) && !file.match(/\.spec\./u));
-
-/*
- * Utility
- * Services from `@sqrzro/utility` should be imported and then immeadiately exported, so users
- * can just import everything from `squarezero-admin`, without having to worry about where it's
- * actually come from
- */
-
-const utilities = ['ApiService', 'AuthService', 'EventService', 'StorageService'];
-
-exportStrings.push(`export { ${utilities.join(', ')} } from '@sqrzro/utility';`);
-
-// Components
-
-const components = fs.readdirSync(path.resolve(__dirname, '../src/components'));
-
-components.forEach((file) => {
-    exportStrings.push(`export * from './components/${file}';`);
-    exportStrings.push(`export { default as ${file} } from './components/${file}';`);
-});
-
-// Core (Types Only)
-
-const core = fs.readdirSync(path.resolve(__dirname, '../src/core'));
-
-core.forEach((file) => {
-    exportStrings.push(`export * from './core/${file}';`);
-});
-
-// Hooks
-
-const hooks = fs.readdirSync(path.resolve(__dirname, '../src/hooks'));
-
-filterMocksAndSpecs(hooks).forEach((file) => {
-    const name = file.replace(/\.ts$/u, '');
-    exportStrings.push(`export * from './hooks/${name}';`);
-    exportStrings.push(`export { default as ${name} } from './hooks/${name}';`);
-});
-
-// Services
-
-const services = fs.readdirSync(path.resolve(__dirname, '../src/services'));
-
-filterMocksAndSpecs(services).forEach((file) => {
-    const name = file.replace(/\.tsx?$/u, '');
-    exportStrings.push(`export * from './services/${name}';`);
-    exportStrings.push(`export { default as ${name} } from './services/${name}';`);
-});
-
-// Write
-
-const allExportStrings = exportStrings.join('\n');
-const content = [
-    '/*',
-    " * This file has been generated by 'scripts/create-exports'.",
-    ' * Any changes made directly to this file will be overwritten.',
-    ' */',
-    '',
-    "import 'regenerator-runtime/runtime.js';",
-    '',
-    "export * from './utility/interfaces';",
-    "export { default as createApp } from './utility/create-app';",
-    '',
-    allExportStrings,
-].join('\n');
-
-fs.writeFileSync(path.resolve(__dirname, '../src/index.ts'), `${content}\n`);

package/scripts/update-license.js

@@ -1,8 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-const license = path.resolve(__dirname, '../LICENSE');
-const content = fs.readFileSync(license, 'utf8');
-const updated = content.replace(/^Copyright \d{4}/u, `Copyright ${new Date().getFullYear()}`);
-
-fs.writeFileSync(license, updated);

package/squarezero.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-    template: 'react',
-    styles: 'postcss',
-    ts: true,
-};

package/src/components/Button/Button.module.css

@@ -1,100 +0,0 @@
-.root {
-    -webkit-appearance: none;
-    align-items: center;
-    background-color: var(--clr-link);
-    border: .2rem var(--clr-link) solid;
-    border-radius: .5rem;
-    color: var(--clr-white);
-    cursor: pointer;
-    display: flex;
-    flex-direction: column;
-    font-family: inherit;
-    font-size: var(--fs-sml);
-    font-weight: var(--fw-bold);
-    height: var(--input-height);
-    justify-content: center;
-    min-width: 10rem;
-    padding: 0 1.8rem;
-    position: relative;
-    text-align: center;
-    transition: background-color .15s, border-color .15s;
-    white-space: nowrap;
-
-    &:hover {
-        background-color: var(--clr-link-hover);
-        border-color: var(--clr-link-hover);
-        color: var(--clr-white);
-    }
-
-    &:focus {
-        outline: none;
-
-        &::before {
-            border: .1rem var(--clr-grey500) dashed;
-            border-radius: .7rem;
-            bottom: -.5rem;
-            content: '';
-            left: -.5rem;
-            position: absolute;
-            right: -.5rem;
-            top: -.5rem;
-        }
-    }
-}
-
-.rootLink {
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--clr-link);
-
-    &:hover {
-        background-color: transparent;
-        border-color: transparent;
-        color: var(--clr-link-hover);
-    }
-}
-
-.rootBordered {
-    background-color: transparent;
-    color: var(--clr-link);
-
-    &:hover {
-        background-color: transparent;
-        border-color: var(--clr-link-hover);
-        color: var(--clr-link-hover);
-    }
-}
-
-.rootDanger {
-    background-color: var(--clr-danger);
-    border-color: var(--clr-danger);
-
-    &:hover {
-        background-color: var(--clr-danger-dark);
-        border-color: var(--clr-danger-dark);
-    }
-}
-
-.rootBorderedDanger {
-    background-color: transparent;
-    border-color: var(--clr-danger);
-    color: var(--clr-danger);
-
-    &:hover {
-        background-color: var(--clr-danger-dark);
-        border-color: var(--clr-danger-dark);
-    }
-}
-
-.rootIsDisabled {
-    background-color: var(--clr-grey400);
-    border-color: var(--clr-grey400);
-    color: var(--clr-grey700);
-    opacity: .3;
-    pointer-events: none;
-    user-select: none;
-}
-
-.rootIsFullWidth {
-    width: 100%;
-}

package/src/components/CodeInput/CodeInput.module.css

@@ -1,33 +0,0 @@
-.root {
-    display: flex;
-    gap: 1rem;
-    transition: opacity .2s;
-}
-
-.rootIsDisabled {
-    opacity: .3;
-    pointer-events: none;
-}
-
-.input {
-    appearance: none;
-    background-color: var(--clr-white);
-    border: .1rem var(--clr-grey400) solid;
-    border-radius: .3rem;
-    color: var(--clr-grey600);
-    display: block;
-    font-family: inherit;
-    font-size: var(--fs-lrg);
-    font-weight: var(--fw-bold);
-    height: var(--input-height);
-    padding: 0 1.2rem;
-    text-align: center;
-    transition: border-color .2s;
-    width: 100%;
-
-    &:focus {
-        border-color: var(--clr-primary);
-        color: var(--clr-grey700);
-        outline: none;
-    }
-}

package/src/components/CodeInput/CodeInput.spec.tsx

@@ -1,180 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import TestChangeHandler from '@utility/TestChangeHandler';
-
-import CodeInput from './index';
-
-describe('CodeInput', () => {
-    it('should render default number of inputs', () => {
-        render(<CodeInput name="lorem" />);
-        expect(screen.getAllByRole('textbox')).toHaveLength(6);
-    });
-
-    it('should render custom number of inputs', () => {
-        render(<CodeInput name="lorem" size={4} />);
-        expect(screen.getAllByRole('textbox')).toHaveLength(4);
-    });
-
-    it('should render value', () => {
-        render(<CodeInput name="lorem" value="123456" />);
-
-        expect(screen.getAllByRole('textbox')[0]).toHaveValue('1');
-        expect(screen.getAllByRole('textbox')[1]).toHaveValue('2');
-        expect(screen.getAllByRole('textbox')[2]).toHaveValue('3');
-        expect(screen.getAllByRole('textbox')[3]).toHaveValue('4');
-        expect(screen.getAllByRole('textbox')[4]).toHaveValue('5');
-        expect(screen.getAllByRole('textbox')[5]).toHaveValue('6');
-    });
-
-    it('should move focus with type/backspace', () => {
-        render(
-            <TestChangeHandler>
-                <CodeInput name="lorem" />
-            </TestChangeHandler>
-        );
-
-        userEvent.type(screen.getAllByRole('textbox')[0], '1');
-
-        expect(screen.getAllByRole('textbox')[0]).toHaveValue('1');
-        expect(screen.getAllByRole('textbox')[1]).toHaveFocus();
-
-        userEvent.type(screen.getAllByRole('textbox')[1], '2');
-
-        expect(screen.getAllByRole('textbox')[0]).toHaveValue('1');
-        expect(screen.getAllByRole('textbox')[1]).toHaveValue('2');
-        expect(screen.getAllByRole('textbox')[2]).toHaveFocus();
-
-        expect(screen.getByTestId('test-change-handler-root')).toHaveTextContent('12');
-
-        userEvent.type(screen.getAllByRole('textbox')[2], '{backspace}');
-
-        expect(screen.getAllByRole('textbox')[0]).toHaveValue('1');
-        expect(screen.getAllByRole('textbox')[1]).toHaveValue('');
-        expect(screen.getAllByRole('textbox')[1]).toHaveFocus();
-
-        expect(screen.getByTestId('test-change-handler-root')).toHaveTextContent('1');
-    });
-
-    it('should handle backspace in last field', () => {
-        render(
-            <TestChangeHandler defaultValue="123456">
-                <CodeInput name="lorem" />
-            </TestChangeHandler>
-        );
-
-        userEvent.type(screen.getAllByRole('textbox')[5], '{backspace}');
-
-        expect(screen.getByTestId('test-change-handler-root')).toHaveTextContent('12345');
-        expect(screen.getAllByRole('textbox')[5]).toHaveFocus();
-
-        userEvent.type(screen.getAllByRole('textbox')[5], '{backspace}');
-
-        expect(screen.getByTestId('test-change-handler-root')).toHaveTextContent('1234');
-        expect(screen.getAllByRole('textbox')[4]).toHaveFocus();
-    });
-
-    it('should move focus with arrow keys', () => {
-        render(
-            <TestChangeHandler>
-                <CodeInput name="lorem" />
-            </TestChangeHandler>
-        );
-
-        userEvent.type(screen.getAllByRole('textbox')[0], '1');
-        userEvent.type(screen.getAllByRole('textbox')[1], '2');
-        userEvent.type(screen.getAllByRole('textbox')[2], '3');
-
-        expect(screen.getAllByRole('textbox')[3]).toHaveFocus();
-
-        userEvent.type(screen.getAllByRole('textbox')[3], '{arrowleft}');
-        expect(screen.getAllByRole('textbox')[2]).toHaveFocus();
-
-        userEvent.type(screen.getAllByRole('textbox')[2], '{arrowleft}');
-        expect(screen.getAllByRole('textbox')[1]).toHaveFocus();
-
-        userEvent.type(screen.getAllByRole('textbox')[1], '{arrowright}');
-        expect(screen.getAllByRole('textbox')[2]).toHaveFocus();
-    });
-
-    it('should remove gaps', () => {
-        render(
-            <TestChangeHandler>
-                <CodeInput name="lorem" />
-            </TestChangeHandler>
-        );
-
-        userEvent.type(screen.getAllByRole('textbox')[0], '1');
-        userEvent.type(screen.getAllByRole('textbox')[4], '2');
-
-        expect(screen.getAllByRole('textbox')[0]).toHaveValue('1');
-        expect(screen.getAllByRole('textbox')[1]).toHaveValue('2');
-        expect(screen.getAllByRole('textbox')[4]).toHaveValue('');
-    });
-
-    it('should change existing characters', () => {
-        render(
-            <TestChangeHandler>
-                <CodeInput name="lorem" />
-            </TestChangeHandler>
-        );
-
-        userEvent.type(screen.getAllByRole('textbox')[0], '1');
-        userEvent.type(screen.getAllByRole('textbox')[1], '2');
-        userEvent.type(screen.getAllByRole('textbox')[2], '3');
-
-        expect(screen.getByTestId('test-change-handler-root')).toHaveTextContent('123');
-
-        userEvent.type(screen.getAllByRole('textbox')[1], '4');
-
-        expect(screen.getByTestId('test-change-handler-root')).toHaveTextContent('143');
-        expect(screen.getAllByRole('textbox')[2]).toHaveFocus();
-    });
-
-    it('should handle onchange', () => {
-        const mockFn = jest.fn();
-        render(<CodeInput name="lorem" onChange={mockFn} />);
-
-        userEvent.type(screen.getAllByRole('textbox')[0], '1');
-
-        expect(mockFn).toHaveBeenCalledTimes(1);
-        expect(mockFn).toHaveBeenLastCalledWith({ target: { name: 'lorem', value: '1' } });
-    });
-
-    it('should handle onfinalchange', () => {
-        const mockFn = jest.fn();
-        render(
-            <TestChangeHandler defaultValue="12345">
-                <CodeInput name="lorem" onFinalKeyUp={mockFn} />)
-            </TestChangeHandler>
-        );
-
-        userEvent.type(screen.getAllByRole('textbox')[5], '6');
-        expect(mockFn).toHaveBeenCalledTimes(1);
-    });
-
-    it('should handle onfinalchange with backspace', () => {
-        const mockFn = jest.fn();
-        render(
-            <TestChangeHandler defaultValue="12345">
-                <CodeInput name="lorem" onFinalKeyUp={mockFn} />)
-            </TestChangeHandler>
-        );
-
-        userEvent.type(screen.getAllByRole('textbox')[5], '{backspace}');
-        expect(mockFn).toHaveBeenCalledTimes(0);
-    });
-
-    it('should handle onfinalchange with custom size', () => {
-        const mockFn = jest.fn();
-        render(
-            <TestChangeHandler defaultValue="12">
-                <CodeInput name="lorem" onFinalKeyUp={mockFn} size={3} />)
-            </TestChangeHandler>
-        );
-
-        userEvent.type(screen.getAllByRole('textbox')[2], '3');
-        expect(mockFn).toHaveBeenCalledTimes(1);
-    });
-});