reactivated 0.25.0 → 1.0.0

package/src/components/Widget.tsx

@@ -0,0 +1,202 @@
+import React from "react";
+
+const TEXTAREA_ROWS = 10;
+
+interface BaseWidget {
+    name: string;
+    is_hidden: boolean;
+    required: boolean;
+    attrs: {
+        id: string;
+        placeholder?: string;
+        disabled?: boolean;
+        required?: boolean;
+    };
+}
+
+// Note: maxlength isn't actually part of the widget. Rather, it is added at
+// runtime by forms.CharField (and children, like URLField)
+//
+// Kind of messy.
+//
+// Also, not sure why we need type instead of just using template_name.
+
+export interface TextInput extends BaseWidget {
+    type: "text";
+    template_name: "django/forms/widgets/text.html";
+    value: string | null;
+    attrs: BaseWidget["attrs"] & {
+        maxlength?: string;
+    };
+}
+
+export interface URLInput extends BaseWidget {
+    type: "url";
+    template_name: "django/forms/widgets/url.html";
+    value: string | null;
+    attrs: BaseWidget["attrs"] & {
+        maxlength?: string;
+    };
+}
+
+export interface NumberInput extends BaseWidget {
+    type: "number";
+    template_name: "django/forms/widgets/number.html";
+    value: string | null;
+    attrs: BaseWidget["attrs"] & {
+        step: string;
+    };
+}
+
+export interface CheckboxInput extends BaseWidget {
+    type: "checkbox";
+    template_name: "django/forms/widgets/checkbox.html";
+    value: string | null;
+    attrs: BaseWidget["attrs"] & {
+        checked?: true;
+    };
+}
+
+export interface PasswordInput extends BaseWidget {
+    type: "password";
+    template_name: "django/forms/widgets/password.html";
+    value: string | null;
+}
+
+export interface EmailInput extends BaseWidget {
+    type: "email";
+    template_name: "django/forms/widgets/email.html";
+    value: string | null;
+}
+
+export interface HiddenInput extends BaseWidget {
+    type: "hidden";
+    template_name: "django/forms/widgets/hidden.html";
+    value: string | null;
+}
+
+export interface Textarea extends BaseWidget {
+    template_name: "django/forms/widgets/textarea.html";
+    value: string | null;
+    attrs: BaseWidget["attrs"] & {
+        cols: string;
+        rows: string;
+    };
+}
+
+export interface DateInput extends BaseWidget {
+    template_name: "django/forms/widgets/date.html";
+    type: "date";
+    value: string | null;
+}
+
+export interface ClearableFileInput extends BaseWidget {
+    template_name: "django/forms/widgets/clearable_file_input.html";
+    type: "file";
+    value: string | null;
+    checkbox_name: string;
+    checkbox_id: string;
+    is_initial: boolean;
+    input_text: string;
+    initial_text: string;
+    clear_checkbox_label: string;
+}
+
+type Optgroup = [
+    null,
+    [
+        {
+            name: string;
+            // value: string|number|boolean|null;
+            value: string | number | boolean | null;
+            label: string;
+            selected: boolean;
+        },
+    ],
+    number,
+];
+
+interface IsMultiple {
+    attrs: {multiple: "multiple"};
+}
+
+interface IsSingle {
+    attrs: {};
+}
+
+function isMultiple<T extends IsMultiple, U extends IsSingle>(
+    widget: T | U,
+): widget is T {
+    return "multiple" in widget.attrs;
+}
+
+export interface Select<T extends string = string> extends BaseWidget {
+    value: T[];
+    template_name: "django/forms/widgets/select.html";
+    optgroups: Optgroup[];
+}
+
+export interface Autocomplete extends BaseWidget {
+    value: string[];
+    template_name: "reactivated/autocomplete";
+    selected: {
+        value: string | number;
+        label: string;
+    } | null;
+}
+
+export interface SelectMultiple<T extends string = string> extends Select<T> {
+    attrs: BaseWidget["attrs"] & {
+        multiple: "multiple";
+    };
+}
+
+export interface SelectDateWidget extends BaseWidget {
+    value: {
+        year: string | null;
+        month: string | null;
+        day: string | null;
+    };
+    subwidgets: [Select, Select, Select];
+    template_name: "django/forms/widgets/select_date.html";
+}
+
+export type WidgetType =
+    | TextInput
+    | URLInput
+    | NumberInput
+    | CheckboxInput
+    | PasswordInput
+    | EmailInput
+    | HiddenInput
+    | Textarea
+    | Select
+    | Autocomplete
+    | SelectMultiple
+    | DateInput
+    | SelectDateWidget
+    | ClearableFileInput;
+
+export const getValue = (optgroup: Optgroup) => {
+    const rawValue = optgroup[1][0].value;
+
+    if (rawValue == null) {
+        return "";
+    } else if (rawValue === true) {
+        return "True";
+    } else if (rawValue === false) {
+        return "False";
+    }
+    return rawValue;
+};
+
+export const getValueForSelect = (widget: Select | Autocomplete | SelectMultiple) => {
+    if (isMultiple(widget)) {
+        return widget.value;
+    } else {
+        return widget.value == null ? "" : widget.value[0];
+    }
+};
+
+export const isHidden = (widget: WidgetType) =>
+    "type" in widget && widget.type === "hidden";

package/src/context.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+export default <TContext extends {}>() => {
+    type TMutableContext = TContext & {
+        setValue: React.Dispatch<React.SetStateAction<TContext>>;
+    };
+
+    const Context = React.createContext<TMutableContext>(null!);
+
+    const Provider = (props: {value: TContext; children: React.ReactNode}) => {
+        const [value, setValue] = React.useState(props.value);
+
+        return (
+            <Context.Provider value={{...value, setValue}}>
+                {props.children}
+            </Context.Provider>
+        );
+    };
+
+    const getServerData = () => {
+        const props: Record<string, unknown> = (window as any).__PRELOADED_PROPS__;
+        const context: TContext = (window as any).__PRELOADED_CONTEXT__;
+
+        return {props, context};
+    };
+
+    return {Context, Provider, getServerData};
+};

package/src/eslintrc.tsx

@@ -0,0 +1,117 @@
+module.exports = {
+    root: true,
+    parser: "@typescript-eslint/parser",
+    parserOptions: {
+        project: ["./tsconfig.json"],
+    },
+    plugins: ["@typescript-eslint"],
+    settings: {
+        react: {
+            version: "detect",
+        },
+        "import/resolver": "typescript",
+    },
+    rules: {
+        "sort-imports": ["error", {ignoreDeclarationSort: true}],
+
+        // TypeScript handles this for us.
+        "import/namespace": 0,
+        "import/named": 0,
+        "import/no-unresolved": 0,
+
+        // immer's default export is produce, not matching the filename.
+        // TODO: I think immer can be specifically imported now.
+        "import/no-named-as-default": 0,
+        "import/no-named-as-default-member": 0,
+
+        "import/newline-after-import": ["error"],
+        "import/first": ["error"],
+        "import/order": [
+            "error",
+            {
+                alphabetize: {order: "asc"},
+                "newlines-between": "always",
+                pathGroups: [
+                    {
+                        group: "builtin",
+                        pattern: "{react,react-dom}",
+                        position: "before",
+                    },
+                    {
+                        group: "builtin",
+                        pattern: "{@reactivated,react-*}",
+                        position: "after",
+                    },
+                    {
+                        group: "builtin",
+                        pattern: "@linaria/*",
+                        position: "after",
+                    },
+                    {
+                        group: "internal",
+                        pattern: "@client/actions/*",
+                        position: "before",
+                    },
+                    {
+                        group: "internal",
+                        pattern:
+                            "@client/{app/graphics,shared/analytics,dates,utils,routes,models,style,shared/typography,constants}",
+                        position: "before",
+                    },
+                ],
+                groups: [
+                    "builtin",
+                    "external",
+                    "internal",
+                    "parent",
+                    "sibling",
+                    "index",
+                ],
+                pathGroupsExcludedImportTypes: ["builtin"],
+            },
+        ],
+        // React overrides
+        "react/prop-types": "off",
+        // We create way too many components dynamically.
+        "react/display-name": "off",
+        // We use empty arrays to run once, etc.
+        "react-hooks/exhaustive-deps": "off",
+
+        // Typescript overrides from recommended
+        "@typescript-eslint/no-unused-vars": "error",
+
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+        "@typescript-eslint/no-non-null-assertion": "off",
+
+        // We use empty callbacks that are no-ops sometimes.
+        "@typescript-eslint/no-empty-function": ["error", {allow: ["arrowFunctions"]}],
+
+        // Typescript additions
+        "@typescript-eslint/strict-boolean-expressions": "error",
+
+        // See: https://github.com/typescript-eslint/typescript-eslint/issues/4619#issuecomment-1057096238
+        // We want async callbacks to React event handlers
+        "@typescript-eslint/no-misused-promises": [
+            "error",
+            {
+                checksVoidReturn: {
+                    attributes: false,
+                },
+            },
+        ],
+
+        // https://www.reddit.com/r/typescript/comments/uiil9k/am_i_crazy_for_expecting_typescript_to_catch_this/
+        "@typescript-eslint/no-use-before-define": ["error"],
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:react-hooks/recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@typescript-eslint/recommended-requiring-type-checking",
+        "prettier",
+        "plugin:import/typescript",
+        "plugin:import/errors",
+        "plugin:import/warnings",
+    ],
+};