@everlywell/ui-kit 0.0.4-menu-next → 0.0.5-next

package/.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage",
+        "importSource": "@emotion/react"
+      }
+    ]
+  ],
+  "plugins": ["@emotion/babel-plugin"]
+}

package/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

package/.storybook/main.ts

@@ -0,0 +1,74 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: [
+    {
+      directory: '../src/lib/stories/foundations',
+      titlePrefix: 'Foundation',
+      files: `**/*.@(mdx|stories.@(mdx|js|jsx|mjs|ts|tsx))`,
+    },
+    {
+      directory: '../src/lib/theme/navigation',
+      titlePrefix: 'Navigation',
+      files: `**/*.@(mdx|stories.@(mdx|js|jsx|mjs|ts|tsx))`,
+    },
+    {
+      directory: '../src/lib/theme/actions',
+      titlePrefix: 'Actions',
+      files: `**/*.@(mdx|stories.@(mdx|js|jsx|mjs|ts|tsx))`,
+    },
+    {
+      directory: '../src/lib/theme/layout',
+      titlePrefix: 'Layout',
+      files: `**/*.@(mdx|stories.@(mdx|js|jsx|mjs|ts|tsx))`,
+    },
+    {
+      directory: '../src/lib/theme/typography',
+      titlePrefix: 'Typography',
+      files: `**/*.@(mdx|stories.@(mdx|js|jsx|mjs|ts|tsx))`,
+    },
+    {
+      directory: '../src/lib/theme/media',
+      titlePrefix: 'Media & Icons',
+      files: `**/*.@(mdx|stories.@(mdx|js|jsx|mjs|ts|tsx))`,
+    },
+    {
+      directory: '../src/lib/theme/overlay',
+      titlePrefix: 'Overlay',
+      files: `**/*.@(mdx|stories.@(mdx|js|jsx|mjs|ts|tsx))`,
+    },
+    {
+      directory: '../src/lib/theme/accessibility',
+      titlePrefix: 'Accessibility',
+      files: `**/*.@(mdx|stories.@(mdx|js|jsx|mjs|ts|tsx))`,
+    },
+  ],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      builder: {
+        viteConfigPath: 'libs/ui-kit/vite.config.ts',
+      },
+    },
+  },
+  docs: {
+    defaultName: 'Documentation',
+  },
+  refs: {
+    storybook: {
+      title: 'www',
+      url: 'https://65a9bd6a6bac1bc320ca9b03-mbseqapsml.chromatic.com/',
+      expanded: false,
+    },
+    '@chakra-ui/react': {
+      disable: true,
+    },
+  },
+};
+
+export default config;
+
+// To customize your Vite configuration you can use the viteFinal field.
+// Check https://storybook.js.org/docs/react/builders/vite#configuration
+// and https://nx.dev/recipes/storybook/custom-builder-configs

package/.storybook/preview.tsx

@@ -0,0 +1,33 @@
+import theme from '../src/lib/theme';
+import ThemeProvider from '../src/lib/components/ThemeProvider';
+
+import { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  decorators: [
+    (Story): JSX.Element => (
+      <ThemeProvider theme={theme}>
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      source: { language: 'tsx' },
+      canvas: {
+        sourceState: 'shown',
+      },
+      toc: true,
+    },
+    // options: {
+    //   storySort: (a: { id: string }, b: { id: string }) =>
+    //     a.id === b.id
+    //       ? 0
+    //       : a.id.localeCompare(b.id, undefined, { numeric: true }),
+    // },
+  },
+};
+
+export default preview;

package/CHANGELOG.md

@@ -0,0 +1,25 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## [0.2.0](https://gitlab.com/everlywell/forest/compare/v0.1.0...v0.2.0) (2024-01-09)
+
+
+### Features
+
+* add heading component ([23dc0e5](https://gitlab.com/everlywell/forest/commit/23dc0e57802f00900d093293aae4bc7878c682f8))
+* **fonts:** add the new fonts to the theme provider ([db3e3d1](https://gitlab.com/everlywell/forest/commit/db3e3d11e4a90c760591296b61e8eadcc95bc142))
+* **text:** add text component and update font styles in theme ([726a061](https://gitlab.com/everlywell/forest/commit/726a06124a23133d5245fdf0c3099a0cff1b9e09))
+
+
+### Bug Fixes
+
+* feedback changes ([d61e3a2](https://gitlab.com/everlywell/forest/commit/d61e3a22beee457f51a70edf15fd9099cd2dadc2))
+* fix conflict ([2fd22f7](https://gitlab.com/everlywell/forest/commit/2fd22f7316ffff04b68370d9a5c3d714907f9ba2))
+* fix file conflict ([3d53de6](https://gitlab.com/everlywell/forest/commit/3d53de63ecd15cd093822ada28a4168978f4f808))
+
+## [0.1.0](https://gitlab.com/everlywell/forest/compare/v0.0.3...v0.1.0) (2023-12-18)
+
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).

package/README.md

@@ -0,0 +1,7 @@
+# ui-kit
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test ui-kit` to execute the unit tests via [Vitest](https://vitest.dev/).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everlywell/ui-kit",
-  "version": "0.0.4-menu-next",
+  "version": "0.0.5-next",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {
@@ -8,5 +8,16 @@
       "import": "./index.mjs",
       "require": "./index.js"
     }
+  },
+  "peerDependencies": {
+    "react": "18.x",
+    "react-dom": "18.x"
+  },
+  "dependencies": {
+    "@chakra-ui/react": "^2.8.1",
+    "@emotion/react": "11.11.3",
+    "@emotion/styled": "11.11.0",
+    "@phosphor-icons/react": "2.0.15",
+    "framer-motion": "^10.16.4"
   }
 }

package/project.json

@@ -0,0 +1,94 @@
+{
+  "name": "ui-kit",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/ui-kit/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": [
+        "{options.outputFile}"
+      ],
+      "options": {
+        "lintFilePatterns": [
+          "libs/ui-kit/**/*.{ts,tsx,js,jsx}"
+        ]
+      }
+    },
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": [
+        "{options.outputPath}"
+      ],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/libs/ui-kit"
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
+    },
+    "test": {
+      "executor": "@nx/vite:test",
+      "outputs": [
+        "{options.reportsDirectory}"
+      ],
+      "options": {
+        "passWithNoTests": true,
+        "reportsDirectory": "../../coverage/libs/ui-kit"
+      }
+    },
+    "storybook": {
+      "executor": "@nx/storybook:storybook",
+      "options": {
+        "port": 4400,
+        "configDir": "libs/ui-kit/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@nx/storybook:build",
+      "outputs": [
+        "{options.outputDir}"
+      ],
+      "options": {
+        "outputDir": "dist/storybook/ui-kit",
+        "configDir": "libs/ui-kit/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "test-storybook": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "test-storybook -c libs/ui-kit/.storybook --url=http://localhost:4400"
+      }
+    },
+    "static-storybook": {
+      "executor": "@nx/vite:preview-server",
+      "options": {
+        "buildTarget": "ui-kit:build-storybook",
+        "port": 9000,
+        "staticFilePath": "dist/storybook/ui-kit"
+      },
+      "configurations": {
+        "ci": {
+          "buildTarget": "ui-kit:build-storybook:ci"
+        }
+      }
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,85 @@
+// theme components
+export {
+  default as Button,
+  type ButtonProps,
+} from './lib/theme/actions/Button/Button';
+
+export { default as Box, type BoxProps } from './lib/theme/layout/Box/Box';
+export {
+  default as IconButton,
+  type IconButtonProps,
+} from './lib/theme/actions/IconButton/IconButton';
+
+export {
+  Grid,
+  GridItem,
+  type GridProps,
+  type GridItemProps,
+} from './lib/theme/layout/Grid';
+
+export {
+  default as Heading,
+  type HeadingProps,
+} from './lib/theme/typography/Heading/Heading';
+
+export {
+  default as Text,
+  type TextProps,
+} from './lib/theme/typography/Text/Text';
+
+export {
+  default as Link,
+  type LinkProps,
+} from './lib/theme/navigation/Link/Link';
+
+export {
+  default as Drawer,
+  DrawerBody,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerCloseButton,
+  type DrawerProps,
+} from './lib/theme/overlay/Drawer/Drawer';
+
+export {
+  default as Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  MenuGroup,
+  MenuCommand,
+  MenuDivider,
+  MenuOptionGroup,
+  MenuItemOption,
+  type MenuProps,
+  type MenuButtonProps,
+  type MenuListProps,
+  type MenuItemProps,
+  type MenuGroupProps,
+  type MenuCommandProps,
+  type MenuDividerProps,
+} from './lib/theme/actions/Menu/Menu';
+
+export {
+  Show,
+  Hide,
+  type ShowProps,
+  type HideProps,
+} from './lib/theme/layout/Show-Hide/Show-Hide';
+
+export { default as VisuallyHidden } from './lib/theme/accessibility/VisuallyHidden/VisuallyHidden';
+
+export { default as Icon, type IconProps } from './lib/theme/media/Icon/Icon';
+
+// utility components
+export { default as ThemeProvider } from './lib/components/ThemeProvider';
+
+// utility methods / components
+export { extendBaseTheme as extendTheme } from '@chakra-ui/react';
+
+export { default as styled } from '@emotion/styled';
+
+// theme
+export { theme } from './lib/theme';

package/src/lib/components/Fonts/Fonts.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Fonts from './Fonts';
+
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
+const meta: Meta<typeof Fonts> = {
+  component: Fonts,
+  title: 'Fonts',
+};
+export default meta;
+type Story = StoryObj<typeof Fonts>;
+
+export const Primary = {
+  args: {},
+};
+
+export const Heading: Story = {
+  args: {},
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/Welcome to Fonts!/gi)).toBeTruthy();
+  },
+};

package/src/lib/components/Fonts/Fonts.tsx

@@ -0,0 +1,86 @@
+import { Global } from '@emotion/react';
+
+const Fonts = () => (
+  <Global
+    styles={`
+      /* PP Agrandir */
+      /* Agrandir is used for page headers, section titles, brand moments and quotations. */
+      @font-face {
+        font-family: 'PP Agrandir';
+        src: url('https://cdn.everlywell.com/fonts/PP Agrandir/PPAgrandir-Variable.woff2') format('woff2');
+        font-style: normal;
+        font-display: swap;
+      }
+
+      /* DM Sans */
+      /* Used for: Body copy, button copy and smaller sizes. */
+      @font-face {
+        font-family: 'DM Sans';
+        src: url('https://cdn.everlywell.com/fonts/DM Sans/DMSans-Italic-VariableFont_opsz,wght.woff2') format('woff2');
+        font-style: italic;
+        font-stretch: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: 'DM Sans';
+        src: url('https://cdn.everlywell.com/fonts/DM Sans/DMSans-VariableFont_opsz,wght.woff2') format('woff2');
+        font-style: normal;
+        font-stretch: normal;
+        font-display: swap;
+      }
+
+      /* DM Mono */
+      /* Used for: Body copy, button copy and smaller sizes. */
+      @font-face {
+        font-family: 'DM Mono';
+        src: url('https://cdn.everlywell.com/fonts/DM Mono/DMMono-Light.woff2') format('woff2');
+        font-style: normal;
+        font-weight: 300;
+        font-stretch: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: 'DM Mono';
+        src: url('https://cdn.everlywell.com/fonts/DM Mono/DMMono-LightItalic.woff2') format('woff2');
+        font-style: italic;
+        font-weight: 300;
+        font-stretch: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: 'DM Mono';
+        src: url('https://cdn.everlywell.com/fonts/DM Mono/DMMono-Regular.woff2') format('woff2');
+        font-style: normal;
+        font-weight: 400;
+        font-stretch: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: 'DM Mono';
+        src: url('https://cdn.everlywell.com/fonts/DM Mono/DMMono-Italic.woff2') format('woff2');
+        font-style: italic;
+        font-weight: 400;
+        font-stretch: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: 'DM Mono';
+        src: url('https://cdn.everlywell.com/fonts/DM Mono/DMMono-Medium.woff2') format('woff2');
+        font-style: normal;
+        font-weight: 500;
+        font-stretch: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: 'DM Mono';
+        src: url('https://cdn.everlywell.com/fonts/DM Mono/DMMono-MediumItalic.woff2') format('woff2');
+        font-style: italic;
+        font-weight: 500;
+        font-stretch: normal;
+        font-display: swap;
+      }
+      `}
+  />
+);
+
+export default Fonts;

package/src/lib/components/ThemeProvider/ThemeProvider.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from './ThemeProvider';
+
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
+const meta: Meta<typeof ThemeProvider> = {
+  component: ThemeProvider,
+  title: 'ThemeProvider',
+};
+export default meta;
+type Story = StoryObj<typeof ThemeProvider>;
+
+export const Primary = {
+  args: {},
+};
+
+export const Heading: Story = {
+  args: {},
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/Welcome to ThemeProvider!/gi)).toBeTruthy();
+  },
+};

package/src/lib/components/ThemeProvider/ThemeProvider.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { ChakraBaseProvider, ChakraProviderProps } from '@chakra-ui/react';
+import Fonts from '../Fonts';
+
+export type ThemeProviderProps = ChakraProviderProps;
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  children,
+  ...props
+}) => {
+  return (
+    <ChakraBaseProvider {...props}>
+      <Fonts />
+      {children}
+    </ChakraBaseProvider>
+  );
+};
+
+export default ThemeProvider;

package/src/lib/stories/foundations/Colors.mdx

@@ -0,0 +1,21 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
+
+import colors from '../../theme/foundations/colors';
+
+<Meta title="Colors" />
+
+# Colors
+
+<ColorPalette>
+  {Object.entries(colors).map(([key, value]) => {
+    const colors = typeof value === 'string' ? 
+      { [key]: value } : 
+      Object.entries(value)
+        .filter(([key]) => isNaN(key))
+        .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+
+    return <ColorItem key={key} title={key} colors={colors} />;
+
+})}
+
+</ColorPalette>

package/src/lib/theme/accessibility/VisuallyHidden/VisuallyHidden.mdx

@@ -0,0 +1,27 @@
+import { Canvas, Meta, Controls, Primary } from '@storybook/blocks';
+
+import * as VisuallyHiddenStories from './VisuallyHidden.stories';
+
+<Meta of={VisuallyHiddenStories} />
+
+# VisuallyHidden
+
+## Overview
+
+VisuallyHidden is a common technique used in web accessibility to hide content from the visual client, but keep it readable for screen readers.
+
+### Import
+
+```jsx
+import { VisuallyHidden } from '@everlywell/ui-kit';
+```
+
+### Usage
+
+`VisuallyHidden` renders a span component used to hide elements on screen.
+
+<Primary />
+
+## More information
+
+[Chakra-UI VisuallyHidden](https://chakra-ui.com/docs/components/visually-hidden)

package/src/lib/theme/accessibility/VisuallyHidden/VisuallyHidden.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta } from '@storybook/react';
+import { createPrimary } from '../../../utils/utils.storybook';
+
+import VisuallyHidden from './VisuallyHidden';
+
+import Box from '../../layout/Box/Box';
+import Heading from '../../typography/Heading/Heading';
+
+export default {
+  component: VisuallyHidden,
+} as Meta;
+
+export const Primary = createPrimary<Record<string, never>>(
+  (props) => (
+    <Box>
+      <Heading>Title and description</Heading>
+      <VisuallyHidden>This will be hidden</VisuallyHidden>
+    </Box>
+  ),
+  {
+    defaultProps: {},
+  },
+);

package/{lib/theme/accessibility/VisuallyHidden/VisuallyHidden.d.ts → src/lib/theme/accessibility/VisuallyHidden/VisuallyHidden.tsx}

@@ -1,2 +1,3 @@
 import { VisuallyHidden as ChakraVisuallyHidden } from '@chakra-ui/react';
+
 export default ChakraVisuallyHidden;