@pexip/components 16.8.0

package/LICENSE

@@ -0,0 +1,188 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+    "License" shall mean the terms and conditions for use, reproduction, and
+    distribution as defined by Sections 1 through 9 of this document.
+
+    "Licensor" shall mean the copyright owner or entity authorized by the
+    copyright owner that is granting the License.
+
+    "Legal Entity" shall mean the union of the acting entity and all other
+    entities that control, are controlled by, or are under common control with
+    that entity. For the purposes of this definition, "control" means (i) the
+    power, direct or indirect, to cause the direction or management of such
+    entity, whether by contract or otherwise, or (ii) ownership of fifty percent
+    (50%) or more of the outstanding shares, or (iii) beneficial ownership of
+    such entity.
+
+    "You" (or "Your") shall mean an individual or Legal Entity exercising
+    permissions granted by this License.
+
+    "Source" form shall mean the preferred form for making modifications,
+    including but not limited to software source code, documentation source, and
+    configuration files.
+
+    "Object" form shall mean any form resulting from mechanical transformation
+    or translation of a Source form, including but not limited to compiled
+    object code, generated documentation, and conversions to other media types.
+
+    "Work" shall mean the work of authorship, whether in Source or Object form,
+    made available under the License, as indicated by a copyright notice that is
+    included in or attached to the work (an example is provided in the Appendix
+    below).
+
+    "Derivative Works" shall mean any work, whether in Source or Object form,
+    that is based on (or derived from) the Work and for which the editorial
+    revisions, annotations, elaborations, or other modifications represent, as a
+    whole, an original work of authorship. For the purposes of this License,
+    Derivative Works shall not include works that remain separable from, or
+    merely link (or bind by name) to the interfaces of, the Work and Derivative
+    Works thereof.
+
+    "Contribution" shall mean any work of authorship, including the original
+    version of the Work and any modifications or additions to that Work or
+    Derivative Works thereof, that is intentionally submitted to Licensor for
+    inclusion in the Work by the copyright owner or by an individual or Legal
+    Entity authorized to submit on behalf of the copyright owner. For the
+    purposes of this definition, "submitted" means any form of electronic,
+    verbal, or written communication sent to the Licensor or its
+    representatives, including but not limited to communication on electronic
+    mailing lists, source code control systems, and issue tracking systems that
+    are managed by, or on behalf of, the Licensor for the purpose of discussing
+    and improving the Work, but excluding communication that is conspicuously
+    marked or otherwise designated in writing by the copyright owner as "Not a
+    Contribution."
+
+    "Contributor" shall mean Licensor and any individual or Legal Entity on
+    behalf of whom a Contribution has been received by Licensor and subsequently
+    incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of this
+   License, each Contributor hereby grants to You a perpetual, worldwide,
+   non-exclusive, no-charge, royalty-free, irrevocable copyright license to
+   reproduce, prepare Derivative Works of, publicly display, publicly perform,
+   sublicense, and distribute the Work and such Derivative Works in Source or
+   Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of this License,
+   each Contributor hereby grants to You a perpetual, worldwide, non-exclusive,
+   no-charge, royalty-free, irrevocable (except as stated in this section)
+   patent license to make, have made, use, offer to sell, sell, import, and
+   otherwise transfer the Work, where such license applies only to those patent
+   claims licensable by such Contributor that are necessarily infringed by their
+   Contribution(s) alone or by combination of their Contribution(s) with the
+   Work to which such Contribution(s) was submitted. If You institute patent
+   litigation against any entity (including a cross-claim or counterclaim in a
+   lawsuit) alleging that the Work or a Contribution incorporated within the
+   Work constitutes direct or contributory patent infringement, then any patent
+   licenses granted to You under this License for that Work shall terminate as
+   of the date such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the Work or
+   Derivative Works thereof in any medium, with or without modifications, and in
+   Source or Object form, provided that You meet the following conditions:
+
+    (a) You must give any other recipients of the Work or Derivative Works a
+    copy of this License; and
+
+    (b) You must cause any modified files to carry prominent notices stating
+    that You changed the files; and
+
+    (c) You must retain, in the Source form of any Derivative Works that You
+    distribute, all copyright, patent, trademark, and attribution notices from
+    the Source form of the Work, excluding those notices that do not pertain to
+    any part of the Derivative Works; and
+
+    (d) If the Work includes a "NOTICE" text file as part of its distribution,
+    then any Derivative Works that You distribute must include a readable copy
+    of the attribution notices contained within such NOTICE file, excluding
+    those notices that do not pertain to any part of the Derivative Works, in at
+    least one of the following places: within a NOTICE text file distributed as
+    part of the Derivative Works; within the Source form or documentation, if
+    provided along with the Derivative Works; or, within a display generated by
+    the Derivative Works, if and wherever such third-party notices normally
+    appear. The contents of the NOTICE file are for informational purposes only
+    and do not modify the License. You may add Your own attribution notices
+    within Derivative Works that You distribute, alongside or as an addendum to
+    the NOTICE text from the Work, provided that such additional attribution
+    notices cannot be construed as modifying the License.
+
+    You may add Your own copyright statement to Your modifications and may
+    provide additional or different license terms and conditions for use,
+    reproduction, or distribution of Your modifications, or for any such
+    Derivative Works as a whole, provided Your use, reproduction, and
+    distribution of the Work otherwise complies with the conditions stated in
+    this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise, any
+   Contribution intentionally submitted for inclusion in the Work by You to the
+   Licensor shall be under the terms and conditions of this License, without any
+   additional terms or conditions. Notwithstanding the above, nothing herein
+   shall supersede or modify the terms of any separate license agreement you may
+   have executed with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade names,
+   trademarks, service marks, or product names of the Licensor, except as
+   required for reasonable and customary use in describing the origin of the
+   Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or agreed to in
+   writing, Licensor provides the Work (and each Contributor provides its
+   Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+   KIND, either express or implied, including, without limitation, any
+   warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or
+   FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining
+   the appropriateness of using or redistributing the Work and assume any risks
+   associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability. In no event and under no legal theory, whether in
+   tort (including negligence), contract, or otherwise, unless required by
+   applicable law (such as deliberate and grossly negligent acts) or agreed to
+   in writing, shall any Contributor be liable to You for damages, including any
+   direct, indirect, special, incidental, or consequential damages of any
+   character arising as a result of this License or out of the use or inability
+   to use the Work (including but not limited to damages for loss of goodwill,
+   work stoppage, computer failure or malfunction, or any and all other
+   commercial damages or losses), even if such Contributor has been advised of
+   the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing the Work or
+   Derivative Works thereof, You may choose to offer, and charge a fee for,
+   acceptance of support, warranty, indemnity, or other liability obligations
+   and/or rights consistent with this License. However, in accepting such
+   obligations, You may act only on Your own behalf and on Your sole
+   responsibility, not on behalf of any other Contributor, and only if You agree
+   to indemnify, defend, and hold each Contributor harmless for any liability
+   incurred by, or claims asserted against, such Contributor by reason of your
+   accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+Copyright 2023 Pexip AS
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed
+under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. See the License for the
+specific language governing permissions and limitations under the License.

package/README.md

@@ -0,0 +1,141 @@
+# @pexip/components
+
+Shared UI component library based on Pexip's design system.
+
+Current style guide:
+[Figma - Style guide](https://www.figma.com/file/opMo7dh4FO56qqGsozGzv2/Pexip-prototype?node-id=43%3A403)
+
+## Storybook
+
+Current state is published to
+
+### [https://main--5f6dd462e70810002208a2c9.chromatic.com/](https://main--5f6dd462e70810002208a2c9.chromatic.com/)
+
+## Usage
+
+In your project, simply do the following:
+
+```tsx
+import {FullSizeWindow, Sidebar} from '@pexip/components';
+
+() => <FullSizeWindow>My stuff</FullSizeWindow>;
+```
+
+There are some global styles as well, with fonts, tokens, etc.
+
+```tsx
+// Import fonts
+import '@pexip/components/src/fonts.css';
+// Import other global styles
+import '@pexip/components/dist/index.css';
+```
+
+## Development
+
+When developing new components for this library, please run Storybook to view
+the components.
+
+[See the documentation here](../storybook/README.md).
+
+### Creating new components
+
+Create new components in the `/src/components` folder and add it to the correct
+category.
+[See the documentation about the folders in Storybook](https://main--5f6dd462e70810002208a2c9.chromatic.com/?path=/story/overview-getting-started--page#development).
+
+```
+src
+ |__components
+     |__elements
+         |__Component
+              |__Component.tsx
+              |__Component.module.scss
+              |__Component.tokens.scss
+              |__stories
+                   |__Component.stories.tsx
+     |__foundation
+     |__modules
+```
+
+#### Setting up a new component
+
+Create a `*.tsx` file to write the component in React/JSX format. Read about the
+repo's [best practices for React](../../docs/react.md).
+
+**Component.tsx**
+
+```tsx
+import React from 'react';
+
+export const Button: React.FC<{text: string}> = ({text}) => (
+  <button>{text}</button>
+);
+```
+
+To view and test the component, create a `*.stories.tsx` file under the
+`stories` folder in that component's folder and it should appear in Storybook
+given the correct title, e.g. `Elements/Component` appears under the Elements
+tab.
+
+#### Styling
+
+For styling, the project uses the CSS modules. To add styling to the components,
+create a `*.module.scss` file to be used in the `.tsx` file, and a
+`*.tokens.scss` file for generating CSS variables.
+
+**Component.tokens.scss**
+
+```scss
+@import '../../../../design-tokens/variables.scss';
+
+:root {
+  // Creates a global variable --button-size
+  @include create-token(button-size, 40px);
+}
+```
+
+**Component.module.scss**
+
+```scss
+// Relative path to the exported variables.scss
+@import '../../../../design-tokens/variables.scss';
+
+.button {
+  border: 0;
+  background: 0;
+
+  // Rewritten as a CSS variable `height: var(--button-size)`
+  height: get-token(button-size);
+}
+```
+
+**Component.tsx**
+
+```tsx
+import React from 'react';
+
+import styles from './Component.module.scss';
+
+export const Button: React.FC<{text: string}> = ({text}) => (
+  <button
+    /*
+     * Property is derived from the CSS class
+     * defined in Components.modules.scss
+     */
+    className={styles.button}
+  >
+    {text}
+  </button>
+);
+```
+
+### Exporting the new component
+
+Add the newly created component in `/src/index.ts` folder so that it may be used
+from the library.
+
+```ts
+export {Component} from './components/elements/Component/Component';
+```
+
+The component should now be usable from the `@pexip/components` library.

package/design-tokens/align.scss

@@ -0,0 +1,17 @@
+.text {
+    &-left {
+        text-align: left !important;
+    }
+
+    &-center {
+        text-align: center !important;
+    }
+
+    &-right {
+        text-align: right !important;
+    }
+
+    &-justify {
+        text-align: justify !important;
+    }
+}

package/design-tokens/base/all-sizes.variables.scss

@@ -0,0 +1,15 @@
+$all-sizes: (
+    size-0: 0,
+    size-1: 6px,
+    size-2: 8px,
+    size-3: 12px,
+    size-4: 16px,
+    size-5: 24px,
+    size-6: 30px,
+    size-7: 32px,
+    size-8: 36px,
+    size-9: 40px,
+    size-10: 48px,
+    size-11: 56px,
+    size-12: 64px,
+);

package/design-tokens/base/alphas.variables.scss

@@ -0,0 +1,7 @@
+$alpha-10: 0.1;
+$alpha-20: 0.2;
+$alpha-30: 0.3;
+$alpha-40: 0.4;
+$alpha-60: 0.6;
+$alpha-80: 0.8;
+$alpha-90: 0.9;

package/design-tokens/base/border-radius.variables.scss

@@ -0,0 +1,8 @@
+$border-radius: (
+    'square': 0%,
+    'round': 50%,
+    'small-box': 4px,
+    'box': 8px,
+    'medium-box': 16px,
+    'pill': 36px,
+);

package/design-tokens/base/circle-sizes.variables.scss

@@ -0,0 +1,8 @@
+$circle-sizes: (
+    circle-compact: 24px,
+    circle-small: 30px,
+    circle-medium: 56px,
+    circle-large: 96px,
+);
+
+$user-avatar-sizes: ('compact', 'small', 'medium', 'large');

package/design-tokens/base/font-family.variables.scss

@@ -0,0 +1,3 @@
+$font-inter: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;

package/design-tokens/base/palette.variables.scss

@@ -0,0 +1,48 @@
+$primary-color-100: color-hex('deep-blue-100');
+$primary-color-200: color-hex('deep-blue-90');
+$primary-color-300: color-hex('deep-blue-80');
+$primary-color-400: color-hex('deep-blue-60');
+$primary-color-500: color-hex('deep-blue-50');
+$primary-color-600: color-hex('deep-blue-40');
+$primary-color-700: color-hex('deep-blue-30');
+$primary-color-800: color-hex('deep-blue-20');
+$primary-color-900: color-hex('deep-blue-10');
+$primary-color-1000: color-hex('white');
+
+$secondary-color-100: color-hex('white');
+$secondary-color-200: color-hex('deep-blue-10');
+$secondary-color-300: color-hex('deep-blue-20');
+$secondary-color-400: color-hex('deep-blue-30');
+$secondary-color-500: color-hex('deep-blue-40');
+$secondary-color-600: color-hex('deep-blue-50');
+$secondary-color-700: color-hex('deep-blue-60');
+$secondary-color-800: color-hex('deep-blue-80');
+$secondary-color-900: color-hex('deep-blue-90');
+$secondary-color-1000: color-hex('deep-blue-100');
+
+$error-bg-color: color-hex('signal-red');
+$error-bg-color-hover: color-hex('signal-red-hover');
+$error-text-color: color-hex('white');
+
+$success-bg-color: color-hex('signal-green');
+$success-hover-color: color-hex('signal-green-130');
+$success-text-color: color-hex('white');
+
+$obvious-bg-color: color-hex('blue-100');
+$obvious-bg-color-hover: color-hex('blue-90');
+$obvious-text-color: color-hex('white');
+
+$signal-red: color-hex('signal-red');
+$signal-green: color-hex('signal-green');
+
+$red-100: color-hex('red-100');
+$red-200: color-hex('red-90');
+$red-300: color-hex('red-80');
+$red-400: color-hex('red-60');
+$red-500: color-hex('red-40');
+
+$green-100: color-hex('green-100');
+$green-200: color-hex('green-90');
+$green-300: color-hex('green-80');
+$green-400: color-hex('green-60');
+$green-500: color-hex('green-40');

package/design-tokens/base/sizes.variables.scss

@@ -0,0 +1 @@
+$sizes: ('none', 'compact', 'small', 'medium', 'large');

package/design-tokens/base/transitions.variables.scss

@@ -0,0 +1,3 @@
+$durations: (
+    'default': 0.3s,
+);

package/design-tokens/base/variants.variables.scss

@@ -0,0 +1,32 @@
+$color-schemes: ('dark', 'light');
+
+$base-variants: $color-schemes;
+$base-select-variants: $base-variants;
+$base-toggle-switch-variants: $base-variants;
+
+$base-input-variants: ('standard', 'transparent');
+$base-button-variants: (
+    'primary',
+    'secondary',
+    'tertiary',
+    'neutral',
+    'translucent',
+    'bordered',
+    'transparent',
+    'text',
+    'danger',
+    'dangerBordered',
+    'success',
+    'obvious'
+);
+$base-text-variants: (
+    'standard',
+    'link',
+    'subtle',
+    'tinted',
+    'disabled',
+    'success',
+    'danger',
+    'hidden',
+    'warning'
+);

package/design-tokens/build-scripts/breakpoints.mjs

@@ -0,0 +1,53 @@
+import fs from 'fs';
+import path from 'path';
+
+import {Content} from './content.mjs';
+
+const generatedByFile =
+    '/* FILE GENERATED BY packages/components/design-tokens/build-scripts/breakpoints.js DO NOT CHANGE */';
+
+const breakpoints = {
+    xs: 0,
+    sm: 479,
+    md: 744,
+    lg: 1025,
+    xl: 2000,
+};
+
+export function getBreakpoints() {
+    return breakpoints;
+}
+
+function exportBreakpoints(breakpoints) {
+    const content = new Content(generatedByFile);
+    content.push('export const breakpoints = ');
+    content.push(JSON.stringify(breakpoints));
+    content.push(';');
+
+    content.push('export type Breakpoint = keyof typeof breakpoints;');
+
+    content.push('export const breakpointNames: Breakpoint[] = ');
+    content.push(JSON.stringify(Object.keys(breakpoints)));
+    content.push(';');
+
+    fs.writeFileSync(
+        path.resolve('..', 'generated', 'breakpoints.ts'),
+        content.print('typescript'),
+    );
+}
+
+export function syncBreakpoints(breakpoints) {
+    const content = new Content(generatedByFile);
+    content.push('$grid-breakpoints: (');
+    for (const name in breakpoints) {
+        const value = breakpoints[name];
+        content.push(`'${name}': ${value}${value !== 0 ? 'px' : ''},`);
+    }
+    content.push(') !default;');
+    fs.writeFileSync(
+        path.resolve('..', 'generated', 'breakpoints.variables.scss'),
+        content.print('scss'),
+    );
+
+    exportBreakpoints(breakpoints);
+}

package/design-tokens/build-scripts/colors.mjs

@@ -0,0 +1,114 @@
+import fs from 'fs';
+import path from 'path';
+
+import {fetchWithAccessToken} from './fetchWithAccessToken.mjs';
+import {FRAME_ID, RESOURCES_IDS} from './constants.mjs';
+import {Content} from './content.mjs';
+
+function floatToInt(float) {
+    return Math.round(float * 255);
+}
+
+function intToHex(int) {
+    return Number(int).toString(16).padStart(2, '0');
+}
+
+function rgbToHex(...rgb) {
+    return `#${rgb.map(v => intToHex(floatToInt(v))).join('')}`;
+}
+
+function toRgbValue(...rgb) {
+    return rgb.map(v => floatToInt(v)).join(',');
+}
+
+function normalizeColorName(color) {
+    return color.split('/')[1].toLowerCase().replace(/ +/g, '-');
+}
+
+function convertKebabToPascalCase(color) {
+    return color.replace(/(^\w|-\w)/g, text =>
+        text.replace(/-/, '').toUpperCase(),
+    );
+}
+
+export async function getColors() {
+    const {
+        nodes: {[RESOURCES_IDS.COLORS]: colorsFrame},
+    } = await fetchWithAccessToken(
+        `files/${FRAME_ID}/nodes?ids=${RESOURCES_IDS.COLORS}`,
+    );
+    return colorsFrame.document.children.reduce((acc, child) => {
+        const childNodes = child.children || [];
+        const newGroups = childNodes
+            .filter(n => n.name.includes('Group'))
+            .flatMap(c => c.children);
+
+        const newColors = [child, ...newGroups, ...childNodes]
+            .filter(s => !!s.styles)
+            .map(c => ({
+                ...c,
+                styles: colorsFrame.styles[c.styles.fill],
+            }))
+            .reduce((c, current) => {
+                const colorName = normalizeColorName(current.styles.name);
+                const [colorObj] = current.fills;
+                c[colorName] = colorObj.color;
+
+                return c;
+            }, {});
+
+        return {
+            ...acc,
+            ...newColors,
+        };
+    }, {});
+}
+
+function exportColors(colors) {
+    const content = new Content(
+        `/* FILE GENERATED BY packages/components/design-tokens/build-scripts/colors.js DO NOT CHANGE */
+        /* eslint-disable @typescript-eslint/no-duplicate-enum-values -- same colors with different names in figma */
+        `,
+    );
+    content.push('export enum Color {');
+    for (const key in colors) {
+        const {r, g, b} = colors[key];
+        content.push(
+            `${convertKebabToPascalCase(key)} = '${rgbToHex(r, g, b)}',`,
+        );
+    }
+    content.push('};');
+    content.push('export enum RgbColor {');
+    for (const key in colors) {
+        const {r, g, b} = colors[key];
+        content.push(
+            `${convertKebabToPascalCase(key)} = '${toRgbValue(r, g, b)}',`,
+        );
+    }
+    content.push('};');
+    content.push(
+        '/* eslint-enable @typescript-eslint/no-duplicate-enum-values -- same colors with different names in figma */',
+    );
+    fs.writeFileSync(
+        path.resolve('..', 'generated', 'colors.ts'),
+        content.print('typescript'),
+    );
+}
+
+export function syncColors(colors) {
+    const content = new Content(
+        '/* FILE GENERATED BY packages/components/design-tokens/build-scripts/colors.js DO NOT CHANGE */',
+    );
+    content.push('$colors: (');
+    for (const key in colors) {
+        const {r, g, b} = colors[key];
+        content.push(`'${key}': ${rgbToHex(r, g, b)},`);
+    }
+    content.push(');');
+    fs.writeFileSync(
+        path.resolve('..', 'generated', 'colors.variables.scss'),
+        content.print('scss'),
+    );
+
+    exportColors(colors);
+}

package/design-tokens/build-scripts/constants.mjs

@@ -0,0 +1,9 @@
+export const API_URL = 'https://api.figma.com/v1/';
+export const FRAME_ID = '88rQRQU5LaIUIzesjpdt1j';
+export const ICONS_FRAME_ID = 'hE9toOmPYV61a1ysNMTSbG';
+export const RESOURCES_IDS = {
+    COLORS: '5433:21000',
+    ICONS: '2052:20',
+    FONTS: '28:154',
+    FONTS_MOBILE: '3058:3083',
+};