@vygruppen/spor-react 0.0.1

package/.turbo/turbo-build.log

@@ -0,0 +1,15 @@
+@vygruppen/spor-react:build: cache hit, replaying output 08c08e23f4839a0f
+@vygruppen/spor-react:build: 
+@vygruppen/spor-react:build: > @vygruppen/spor-react@0.0.1 build
+@vygruppen/spor-react:build: > tsup src/index.tsx --dts
+@vygruppen/spor-react:build: 
+@vygruppen/spor-react:build: CLI Building entry: src/index.tsx
+@vygruppen/spor-react:build: CLI Using tsconfig: tsconfig.json
+@vygruppen/spor-react:build: CLI tsup v5.11.11
+@vygruppen/spor-react:build: CLI Target: node12
+@vygruppen/spor-react:build: CJS Build start
+@vygruppen/spor-react:build: CJS ⚡️ Build success in 28ms
+@vygruppen/spor-react:build: CJS dist/index.js 3.92 KB
+@vygruppen/spor-react:build: DTS Build start
+@vygruppen/spor-react:build: DTS ⚡️ Build success in 4588ms
+@vygruppen/spor-react:build: DTS dist/index.d.ts 1.90 KB

package/README.md

@@ -0,0 +1,55 @@
+# Spor React Component library
+
+This package includes everything you need to build your React component library. It's built with TypeScript, but you can use it with JavaScript if you want.
+
+## Installation
+
+```bash
+$ npm install @vygruppen/spor-react
+```
+
+## Usage
+
+Import the components and functions you need as named imports:
+
+```tsx
+import { Button, Input } from "@vygruppen/spor-react";
+```
+
+Each component and function comes with extensive documentation that shows up once you use it. Just hover over the component to make it show up in your IDE. There will also be interactive documentation available online sometime in The Future (tm).
+
+This package comes with one component of its own though - the `SporProvider`:
+
+```tsx
+import { SporProvider } from "@vygruppen/spor-react";
+```
+
+The `SporProvider` provides the rest of the Spor components with a theme and a language preference.
+
+Wrap your entire app with this component. It's important to place it before you render any UI, like where you mount your React app (`src/index.tsx` in Create React App based apps, and `pages/_app.tsx` in Next.js based apps).
+
+You have to specify the current language (and save/retrieve it somehow). Here's a basic example:
+
+```tsx
+import { SporProvider, Language } from "@vygruppen/spor-react";
+
+const Root = () => {
+  return (
+    <SporProvider language={Language.NorwegianBokmal}>
+      <App />
+    </SporProvider>
+  );
+};
+```
+
+For more details about internationalization, please refer to the `spor-i18n-react` docs.
+
+You can also override the theme. Please refer to the `spor-theme-react` docs.
+
+## Development
+
+Please refer to the root readme for development notes.
+
+```
+
+```

package/dist/index.d.ts

@@ -0,0 +1,51 @@
+import { ChakraProviderProps } from '@chakra-ui/react';
+export { extendTheme } from '@chakra-ui/react';
+export * from '@vygruppen/spor-button-react';
+import { Language } from '@vygruppen/spor-i18n-react';
+export * from '@vygruppen/spor-i18n-react';
+export * from '@vygruppen/spor-input-react';
+export * from '@vygruppen/spor-logo-react';
+export * from '@vygruppen/spor-theme-react';
+
+declare type SporProviderProps = ChakraProviderProps & {
+    language: Language;
+};
+/**
+ * This component is used to provide the specified theme of colors and other
+ * design tokens to the remainder of the application, as well as the current language.
+ *
+ * Please place it as close to the root of your application as possible -
+ * at least before rendering any UI.
+ *
+ * You can pass your own theme to this component. If you don't (and most of the time you won't), the default Spor theme will be used.
+ *
+ * You do, however, need to specify the current language of your application. This is specified to provide any built-in microcopy and labels for any Spor components.
+ *
+ * ```tsx
+ * * import { SporProvider, Language } from "@spor-react";
+ * const root = React.createRoot(document.getElementById("root"))
+ * root.render(
+ *  <SporProvider language={Language.NorwegianBokmal}>
+ *    <App />
+ *  </SporProvider>
+ * );
+ * ```
+ *
+ * You can pass specific overrides to the theme if you need to. Adding application specific design tokens, for example could be a useful thing to do.
+ *
+ * ```tsx
+ * import { extendTheme, SporProvider } from "@spor-react";
+ * const theme = extendTheme({
+ *  colors: { myApp: { primary: "tomato" } }
+ * });
+ * const root = React.createRoot(document.getElementById("root"))
+ * root.render(
+ *  <SporProvider language={Language.English} theme={theme}>
+ *    <App />
+ *  </SporProvider>
+ * );
+ * ```
+ */
+declare const SporProvider: ({ theme, language, children, ...props }: SporProviderProps) => JSX.Element;
+
+export { SporProvider };

package/dist/index.js

@@ -0,0 +1,96 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  SporProvider: () => SporProvider,
+  extendTheme: () => import_react4.extendTheme
+});
+var import_react4 = require("@chakra-ui/react");
+__reExport(src_exports, require("@vygruppen/spor-button-react"));
+__reExport(src_exports, require("@vygruppen/spor-i18n-react"));
+__reExport(src_exports, require("@vygruppen/spor-input-react"));
+__reExport(src_exports, require("@vygruppen/spor-logo-react"));
+__reExport(src_exports, require("@vygruppen/spor-theme-react"));
+
+// src/SporProvider.tsx
+var import_react = require("@chakra-ui/react");
+var import_react2 = require("@emotion/react");
+var import_spor_i18n_react = require("@vygruppen/spor-i18n-react");
+var import_react3 = __toESM(require("react"));
+var SporProvider = (_a) => {
+  var _b = _a, {
+    theme = src_exports.theme,
+    language,
+    children
+  } = _b, props = __objRest(_b, [
+    "theme",
+    "language",
+    "children"
+  ]);
+  return /* @__PURE__ */ import_react3.default.createElement(import_spor_i18n_react.LanguageProvider, {
+    value: language
+  }, /* @__PURE__ */ import_react3.default.createElement(import_react.ChakraProvider, __spreadValues({
+    theme
+  }, props), /* @__PURE__ */ import_react3.default.createElement(import_react2.Global, {
+    styles: src_exports.fontFaces
+  }), children));
+};
+module.exports = __toCommonJS(src_exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SporProvider,
+  extendTheme
+});

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@vygruppen/spor-react",
+  "version": "0.0.1",
+  "main": "./src/index.tsx",
+  "types": "./src/index.tsx",
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup src/index.tsx --dts",
+    "dev": "tsup src/index.tsx --watch"
+  },
+  "dependencies": {
+    "@chakra-ui/react": "^1.7.3",
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
+    "@leile/lobo-t": "^1.0.5",
+    "@vygruppen/spor-button-react": "*",
+    "@vygruppen/spor-input-react": "*",
+    "@vygruppen/spor-logo-react": "*",
+    "@vygruppen/spor-theme-react": "*",
+    "@vygruppen/spor-i18n-react": "*",
+    "framer-motion": "^4.1.17"
+  },
+  "devDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "tsup": "^5.11.11"
+  },
+  "peerDependencies": {
+    "react": ">= 17.0.0",
+    "react-dom": ">= 17.0.0"
+  }
+}

package/src/SporProvider.tsx

@@ -0,0 +1,61 @@
+import { ChakraProvider, ChakraProviderProps } from "@chakra-ui/react";
+import { Global } from "@emotion/react";
+import { Language, LanguageProvider } from "@vygruppen/spor-i18n-react";
+import { fontFaces, theme as defaultSporTheme } from "@vygruppen/spor-react";
+import React from "react";
+
+type SporProviderProps = ChakraProviderProps & {
+  language: Language;
+};
+
+/**
+ * This component is used to provide the specified theme of colors and other
+ * design tokens to the remainder of the application, as well as the current language.
+ *
+ * Please place it as close to the root of your application as possible -
+ * at least before rendering any UI.
+ *
+ * You can pass your own theme to this component. If you don't (and most of the time you won't), the default Spor theme will be used.
+ *
+ * You do, however, need to specify the current language of your application. This is specified to provide any built-in microcopy and labels for any Spor components.
+ *
+ * ```tsx
+ * * import { SporProvider, Language } from "@spor-react";
+ * const root = React.createRoot(document.getElementById("root"))
+ * root.render(
+ *  <SporProvider language={Language.NorwegianBokmal}>
+ *    <App />
+ *  </SporProvider>
+ * );
+ * ```
+ *
+ * You can pass specific overrides to the theme if you need to. Adding application specific design tokens, for example could be a useful thing to do.
+ *
+ * ```tsx
+ * import { extendTheme, SporProvider } from "@spor-react";
+ * const theme = extendTheme({
+ *  colors: { myApp: { primary: "tomato" } }
+ * });
+ * const root = React.createRoot(document.getElementById("root"))
+ * root.render(
+ *  <SporProvider language={Language.English} theme={theme}>
+ *    <App />
+ *  </SporProvider>
+ * );
+ * ```
+ */
+export const SporProvider = ({
+  theme = defaultSporTheme,
+  language,
+  children,
+  ...props
+}: SporProviderProps) => {
+  return (
+    <LanguageProvider value={language}>
+      <ChakraProvider theme={theme} {...props}>
+        <Global styles={fontFaces} />
+        {children}
+      </ChakraProvider>
+    </LanguageProvider>
+  );
+};

package/src/index.tsx

@@ -0,0 +1,7 @@
+export { extendTheme } from "@chakra-ui/react";
+export * from "@vygruppen/spor-button-react";
+export * from "@vygruppen/spor-i18n-react";
+export * from "@vygruppen/spor-input-react";
+export * from "@vygruppen/spor-logo-react";
+export * from "@vygruppen/spor-theme-react";
+export * from "./SporProvider";

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "tsconfig/react-library.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"],
+  "compilerOptions": {
+    "rootDir": ".",
+  }
+}