diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index ba6947ee..00000000 --- a/.eslintrc +++ /dev/null @@ -1,35 +0,0 @@ -{ - "root":true, - "parser": "@typescript-eslint/parser", - "parserOptions": { - "ecmaVersion": 2020, - "sourceType": "module", - "project": "./tsconfig.json" - }, - "extends": [ - "eslint:recommended", - "plugin:react/recommended", - "plugin:@typescript-eslint/eslint-recommended", - "plugin:@typescript-eslint/recommended", - "plugin:@typescript-eslint/recommended-requiring-type-checking", - "prettier" - ], - "settings": { - "react":{ - "version":"detect" - } - }, - "rules": { - "@typescript-eslint/no-unsafe-assessment": "off", - "@typescript-eslint/no-inferrable-types": "off", - "@typescript-eslint/require-await": ["error"], - "@typescript-eslint/no-unsafe-return": ["error"], - "@typescript-eslint/no-unsafe-call": ["error"], - "@typescript-eslint/no-unsafe-argument": ["error"], - "@typescript-eslint/no-unsafe-member-access": ["error"], - "@typescript-eslint/no-non-null-assertion": ["error"], - "@typescript-eslint/ban-ts-comment": "off", - "no-unused-vars": "off", - "require-await": "off" - } -} \ No newline at end of file diff --git a/.gitignore b/.gitignore index ec260d2f..bbf50cc9 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,29 @@ -#dependencies +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + node_modules +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + .env -.DS_Store \ No newline at end of file +.DS_Store +*storybook.log + +storybook-static diff --git a/.storybook/decorators/SkeletonTheme.tsx b/.storybook/decorators/SkeletonTheme.tsx deleted file mode 100644 index 84476abc..00000000 --- a/.storybook/decorators/SkeletonTheme.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React, { ReactNode } from 'react'; -import { SkeletonTheme } from 'react-loading-skeleton'; -import { darkTheme, lightTheme } from '../../src/styles/theme'; -import 'react-loading-skeleton/dist/skeleton.css'; - -const SkeletonConfigProvider = ({ - children, - theme, - baseColor, - highlightColor, -}: { - children: ReactNode; - theme: 'dark' | 'light'; - baseColor?: string; - highlightColor?: string; -}) => { - const { - UI: { - skeleton: { base, highlight }, - }, - } = theme === 'dark' ? darkTheme : lightTheme; - - return ( - - {children} - - ); -}; - -export default SkeletonConfigProvider; diff --git a/.storybook/decorators/withNextLink.tsx b/.storybook/decorators/withNextLink.tsx new file mode 100644 index 00000000..a3d3b983 --- /dev/null +++ b/.storybook/decorators/withNextLink.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { Decorator } from '@storybook/react'; + +import { LinkProvider } from '../../src/providers/NextLinkProvider'; + +const withNextLink: Decorator = (StoryFn) => { + // consumers of the library pass in actual React/Next.js links + const FakeLink = function ({ children }) { + return ( + + {children} + + ); + }; + return ( + + + + ); +}; +export default withNextLink; diff --git a/.storybook/decorators/withTheme.tsx b/.storybook/decorators/withTheme.tsx deleted file mode 100644 index 6b1a0d98..00000000 --- a/.storybook/decorators/withTheme.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import React from 'react'; -import { ThemeProvider } from 'styled-components'; -import { Decorator } from '@storybook/react'; - -import GlobalStyles from '../../src/providers/GlobalStyles'; - -import { LinkProvider } from '../../src/providers/NextLinkProvider'; -import { lightTheme, darkTheme } from '../../src/styles/theme'; - -import styled, { css } from 'styled-components'; -import SkeletonConfigProvider from './SkeletonTheme'; - -const ThemeBlock = styled.div<{ left?: boolean; fill?: boolean }>( - ({ left, fill, theme }) => css` - position: absolute; - top: 0; - left: ${left || fill ? 0 : '50vw'}; - border-right: ${left ? '1px solid #202020' : 'none'}; - right: ${left ? '50vw' : 0}; - width: ${fill ? '100vw' : '50vw'}; - bottom: 0; - overflow: auto; - padding: 1rem; - background: ${theme.colorScheme === 'dark' ? '#1f1d1d' : '#fff'}; - `, -); - -const withTheme: Decorator = (StoryFn, context) => { - const { theme } = context.globals; - const themeToUse = theme === 'light' ? lightTheme : darkTheme; - - // consumers of the library pass in actual React/Next.js links - const FakeLink = function ({ children }) { - return {children}; - }; - switch (theme) { - case 'side-by-side': { - return ( - <> - - - - - - - - - - - - - - - - - - - - - - ); - } - default: { - return ( - - - - - - - - - - - ); - } - } -}; -export default withTheme; diff --git a/.storybook/main.ts b/.storybook/main.ts index e596355e..97d47c05 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,38 +1,11 @@ -import type { StorybookConfig } from '@storybook/react-webpack5'; +import type { StorybookConfig } from '@storybook/react-vite'; const config: StorybookConfig = { stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: [ - '@storybook/addon-links', - '@storybook/addon-essentials', - '@storybook/addon-interactions', - '@storybook/addon-controls', - '@storybook/addon-a11y', - '@storybook/addon-designs', - ], - + addons: ['@storybook/addon-docs'], framework: { - name: '@storybook/react-webpack5', - options: { - builder: { - useSWC: true, - }, - }, - }, - docs: { - autodocs: true, - }, - core: { - disableTelemetry: true, + name: '@storybook/react-vite', + options: {}, }, - swc: () => ({ - jsc: { - transform: { - react: { - runtime: 'automatic', - }, - }, - }, - }), }; export default config; diff --git a/.storybook/manager.ts b/.storybook/manager.ts index 20ac48dc..eafb0a1c 100644 --- a/.storybook/manager.ts +++ b/.storybook/manager.ts @@ -1,4 +1,4 @@ -import { addons } from '@storybook/manager-api'; +import { addons } from 'storybook/manager-api'; import LagoonTheme from './theme'; diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 34fe19fa..142155a5 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -1,54 +1,37 @@ import type { Preview } from '@storybook/react'; -import withTheme from './decorators/withTheme'; +import '../src/index.css'; + +import React from 'react'; +import withNextLink from './decorators/withNextLink'; const preview: Preview = { parameters: { - options: { - storySort: { - order: [ - 'Introduction', - 'Guide', - ['Design Tokens', 'Typography', 'Globals', 'Theming And Globals', 'Figma', 'Icons'], - 'Components', - 'Lagoon specific', - ], - }, - }, - actions: { argTypesRegex: '^on[A-Z].*' }, controls: { controls: { expanded: true }, + matchers: { color: /(background|color)$/i, date: /Date$/i, }, }, - - docs: { - source: { - language: 'tsx', - }, - story: { - height: '300px', - }, - }, - }, - globalTypes: { - theme: { - description: 'Global theme for components', - defaultValue: 'light', - toolbar: { - title: 'Theme', - icon: 'circlehollow', - items: [ - { value: 'light', icon: 'circlehollow', title: 'Light Theme' }, - { value: 'dark', icon: 'circle', title: 'Dark Theme' }, - { value: 'side-by-side', icon: 'mirror', title: 'Side by side' }, - ], - dynamicTitle: true, + globalTypes: { + theme: { + description: 'Global theme for components', + defaultValue: 'light', + toolbar: { + title: 'Theme', + icon: 'circlehollow', + items: [ + { value: 'light', icon: 'circlehollow', title: 'Light Theme' }, + { value: 'dark', icon: 'circle', title: 'Dark Theme' }, + { value: 'side-by-side', icon: 'mirror', title: 'Side by side' }, + ], + dynamicTitle: true, + }, }, }, }, - decorators: [withTheme], + decorators: [withNextLink], }; export default preview; diff --git a/.storybook/theme.js b/.storybook/theme.js index 20f0e206..ab212d1d 100644 --- a/.storybook/theme.js +++ b/.storybook/theme.js @@ -1,4 +1,4 @@ -import { create } from '@storybook/theming'; +import { create } from 'storybook/theming'; import logo from './public/logo.svg'; diff --git a/README.md b/README.md index c8bda2a8..0f0f5dbd 100644 --- a/README.md +++ b/README.md @@ -5,11 +5,11 @@ Component library for all things lagoon related: Install with a single npm/yarn command: ```bash -npm install github:uselagoon/ui-library#main antd styled-components @ant-design/icons +npm install github:uselagoon/ui-library#main ``` ```bash -yarn add github:uselagoon/ui-library#main antd styled-components @ant-design/icons +yarn add github:uselagoon/ui-library#main ``` Alternatively, add the following to your `package.json` and run `npm i`: @@ -18,11 +18,7 @@ Alternatively, add the following to your `package.json` and run `npm i`: "dependencies": { "react": "^18", "react-dom": "^18", - "ui-library": "github:uselagoon/ui-library#main", - "antd": "^5.13.0", - "styled-components": "^6.1.8", - "@ant-design/icons": "^5.2.6" } ``` @@ -35,166 +31,6 @@ Alternatively, add the following to your `package.json` and run `npm i`: Using a component from the library: ```tsx +import '@uselagoon/ui-library/dist/ui-library.css'; import { Button } from '@uselagoon/ui-library'; ``` - -## The component library works with: - -- React (with styled-components or tailwind out of the box) -- Next < 13 -- Next > 13 - -### There are a few extra steps needed to configure usage with Next - -Since the library is built on top of Ant design and Styled-components, we need `AntdRegistry` and `StyledComponentsRegistry` in Next > 13, which then wrap the `children` prop in the root layout. - -### /lib/AntdRegistry.tsx: - -```tsx -'use client'; - -import React from 'react'; -import { useServerInsertedHTML } from 'next/navigation'; -import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs'; -import type Entity from '@ant-design/cssinjs/es/Cache'; - -interface AntdRegistryProps { - children: React.ReactNode; -} - -const AntdRegistry = ({ children }: AntdRegistryProps) => { - const cache = React.useMemo(() => createCache(), []); - useServerInsertedHTML(() => - -# Icons - -Here's a list of every icon included in the library: - - -
- -
- - - -
- -
- - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
-
- - - -
-
- - - -
- -
- diff --git a/src/stories/guide/ThemingGlobals.mdx b/src/stories/guide/ThemingGlobals.mdx deleted file mode 100644 index b8c7865c..00000000 --- a/src/stories/guide/ThemingGlobals.mdx +++ /dev/null @@ -1,65 +0,0 @@ -import { Meta } from '@storybook/addon-docs/blocks'; - - - -# Theming and Global styles - -

- The library has its own themes for dark and light modes - every component has it's own color configuration depending - on the selected theme.{' '} -

-

Themes can be extended

-

Global styles set basic style resets and sets 1rem = 16px

-

- By using `` in the app, you automatically get access to the following bundled font families: -

- - -## Extending themes - -The existing `ThemeObject` has the following structure: - -```ts -interface UITheme { - colorScheme: 'dark' | 'light'; - UI: { - backgrounds: { - primary: string; - secondary: string; - input: string; - modal: string; - dataCard: string; - selection: string; - lagoonCard: string; - footer: string; - header: string; - }; - texts: { - primary: string; - label: string; - secondary: string; - timeline: string; - }; - highlights: { - selection: string; - }; - borders: { - box: string; - card: string; - }; - notification: string; - }; -} -``` - -It can be extended by passing `darkThemeProp` and `lightThemeProp` with custom properties to the ``, which get merged into the existing theme, and then used inside a styled component. - -### What's next - -Continue to the Figma Guide diff --git a/src/stories/guide/Tokens.stories.mdx b/src/stories/guide/Tokens.stories.mdx deleted file mode 100644 index 2afc889c..00000000 --- a/src/stories/guide/Tokens.stories.mdx +++ /dev/null @@ -1,598 +0,0 @@ -import { Meta } from '@storybook/addon-docs/blocks'; -import { Table } from 'antd'; -import { CopyToClipboard, UIThemeProvider, Colors, GlobalStyles } from '../../index'; - - - - -# Design Tokens - -

The library uses tokens instead of hardcoded values for consistency.

- -## Colors - -`Colors` is just a const object used all throughout the library, which can be directly accessed after importing. - -```ts -import { Colors } from '@uselagoon/ui-library'; -``` - - -
#3A8CFF, -desc: "Main lagoon color", -token:( - - <> - - -) -}, -{ key:2, -example:
#3A8CFF
, -desc: "Primary button default color (same as lagoonBlue)", -token:( - - <> - - -) -}, -{ key:3, -example:
#4578e6bf
, -desc: "Primary button default hover color", -token:( - - <> - - -) -}, -{ key:4, -example:
#184CBC
, -desc: "Primary button default active color", -token:( - - <> - - -) -}, -{ key:5, -example:
#1B8784
, -desc: "Secondary button default color", -token:( - - <> - - -) -}, -{ key:6, -example:
#1b8784bf
, -desc: "Secondary button hover color", -token:( - - <> - - -) -}, -{ key:7, -example:
#093C3B
, -desc: "Secondary button active color", -token:( - - <> - - -) -}, -{ key:8, -example:
#F8F8F2
, -desc: "Primary background color (light mode)", -token:( - - <> - - -) -}, -{ key:9, -example:
#272822
, -desc: "Primary background color (dark mode)", -token:( - - <> - - -) -}, -{ key:10, -example:
#222222
, -desc: "Primary text color (light mode)", -token:( - - <> - - -) -}, -{ key:11, -example:
#fff
, -desc: "Primary text color (dark mode)", -token:( - - <> - - -) -}, -{ key:11, -example:
#00000073
, -desc: "Secondary text color (light mode)", -token:( - - <> - - -) -}, -{ key:12, -example:
#75715E
, -desc: "Secondary text color (dark mode)", -token:( - - <> - - -) -}, -{ key:13, -example:
#F8F8F2
, -desc: "Timeline text color (light mode)", -token:( - - <> - - -) -}, -{ key:13, -example:
#272822
, -desc: "Timeline text color (dark mode)", -token:( - - <> - - -) -}, -{ key:14, -example:
#272822
, -desc: "Dark gray", -token:( - - <> - - -) -}, -{ key:15, -example:
#868686
, -desc: "Cell gray used with tables", -token:( - - <> - - -) -}, -{ key:16, -example:
#282828
, -desc: "Gray variant used for highlights", -token:( - - <> - - -) -}, -{ key:17, -example:
#FD971F
, -desc: "Orange hue used for warnings or statustags", -token:( - - <> - - -) -}, -{ key:17, -example:
#E69F66
, -desc: "Light orange hue used for warnings or statustags", -token:( - - <> - - -) -}, -{ key:17, -example:
#66D9EF
, -desc: "Default blue, used for statustags", -token:( - - <> - - -) -}, -{ key:18, -example:
#F8F8F2
, -desc: "Default \"white\" ", -token:( - - <> - - -) -}, -{ key:18, -example:
#F8F8F2
, -desc: "Default \"white\" ", -token:( - - <> - - -) -}, -{ key:19, -example:
#AE81FF
, -desc: "Default purple ", -token:( - - <> - - -) -}, -{ key:20, -example:
#E6DB74
, -desc: "Default yellow ", -token:( - - <> - - -) -}, -{ key:21, -example:
#F92672
, -desc: "Default pink ", -token:( - - <> - - -) -}, -{ key:22, -example:
#A6E22E
, -desc: "Default green ", -token:( - - <> - - -) -}, -{ key:22, -example:
#A6E22D
, -desc: "Default green variation 2", -token:( - - <> - - -) -}, -{ key:23, -example:
#000
, -desc: "Default black", -token:( - - <> - - -) -} -]} -pagination={false} -/> - - -## Fonts - -A couple different fonts are bundled with the library: - - - - -
Quick brown fox

, -desc:"Basis Grotesque Arabic Pro regular", -usage:( - - - font-family: "ArabicPro-Regular", sans-serif; - -) -}, -{key: 2, -example:

Quick brown fox

, -desc:"Basis Grotesque Arabic Pro bold", -usage:( - - font-family: "ArabicPro-Bold", sans-serif; - -) -}, -{key: 3, -example:

Quick brown fox

, -desc:"GT America regular", -usage:( - - font-family: 'AmericaMono-Regular', sans-serif; - -) -}, -{key: 3, -example:

Quick brown fox

, -desc:"Helvetica regular", -usage:( - - font-family: 'Helvetica-Regular', sans-serif; - -) -}, -{key: 3, -example:

Quick brown fox

, -desc:"Roboto regular", -usage:( - - font-family: 'Roboto', sans-serif; - -) -}, -{key: 4, -example:

Quick brown fox

, -desc:"Open Sans regular", -usage:( - - font-family: 'Open Sans', sans-serif; - -) -}, -{key: 5, -example:

Quick brown fox

, -desc:"Open Sans bold", -usage:( - - font-family: 'Open Sans', sans-serif; - font-weight:bold; - -) -}, -{key: 6, -example:

Quick brown fox

, -desc:"Open Sans bolder (600) ", -usage:( - - font-family: 'Open Sans', sans-serif; - font-weight:600; - -) -} -]} - -pagination={false} -/> - - - -### What's next - -Continue to the Typography Guide diff --git a/src/stories/guide/Typography.stories.mdx b/src/stories/guide/Typography.stories.mdx deleted file mode 100644 index c3b43d03..00000000 --- a/src/stories/guide/Typography.stories.mdx +++ /dev/null @@ -1,334 +0,0 @@ -import { Meta } from '@storybook/addon-docs/blocks'; -import { Table } from 'antd'; - -import { CopyToClipboard, UIThemeProvider, GlobalStyles, Head1, Head2, Head3, Head4, Head5, Text } from '../../index'; - - - - - -# Typography - -

The library comes with prestyled, themed text elements

- -## Headings in light mode - - - -
-Heading 1 -Font: Helvetica regular -Weight: 500 -Color: #222222 -Line height: 48px - -), -size:"42px", -usage: -}, -{ -key:2, -heading:( -
- Heading 2 -Font: Helvetica regular -Weight: 500 -Color: #222222 -Line height: 32px -
-), -size:"28px", -usage: -}, -{ -key:3, -heading:( -
- Heading 3 -Font: Helvetica regular -Weight: 500 -Color: #222222 -Line height: 22px -
-), -size:"20px", -usage: -}, -{ -key:4, -heading:( -
- Heading 4 -Font: Helvetica regular -Weight: 500 -Color: #222222 -Line height: 22px -
-), -size:"16px", -usage: -}, -{ -key:5, -heading:( -
- Heading 5 -Font: Helvetica regular -Weight: 500 -Color: #222222 -Line height: 22px -
-), -size:"15px", -usage: -}, -]} -pagination={false} - -/> - - - -## Headings in dark mode - - - -
-Heading 1 -Font: Helvetica regular -Weight: 500 -Color: #222222 -Line height: 48px - -), -size:"42px", -usage: -}, -{ -key:2, -heading:( -
- Heading 2 -Font: Helvetica regular -Weight: 500 -Color: #222222 -Line height: 32px -
-), -size:"28px", -usage: -}, -{ -key:3, -heading:( -
- Heading 3 -Font: Helvetica regular -Weight: 500 -Color: #222222 -Line height: 22px -
-), -size:"20px", -usage: -}, -{ -key:4, -heading:( -
- Heading 4 -Font: Helvetica regular -Weight: 500 -Color: #222222 -Line height: 22px -
-), -size:"16px", -usage: -}, -{ -key:5, -heading:( -
- Heading 5 -Font: Helvetica regular -Weight: 500 -Color: #222222 -Line height: 22px -
-), -size:"15px", -usage: -}, -]} -pagination={false} - -/> - - - -## Text/link - - - -
-Default text -Font: Basis Grotesque Arabic Pro Regular -Color: #222222 -Line height: 18px - -), -usage: -}, -{ -key:2, -size:"16px", -element:( -
-Danger text -Font: Basis Grotesque Arabic Pro Regular -Color: #222222 -Line height: 18px -
-), -usage:Some text`}/> -}, -{ -key:3, -size:"16px", -element:( -
-Warning text -Font: Basis Grotesque Arabic Pro Regular -Color: #222222 -Line height: 18px -
-), -usage:Some text`}/> -}, -{ -key:4, -size:"16px", -element:( -
-Link text -Font: Basis Grotesque Arabic Pro Regular -Color: #222222 -Line height: 18px -
-), -usage:Some text`}/> -} - -]} -/> - - - -### What's next - -Continue to the Global Styles Guide diff --git a/src/styles/theme.ts b/src/styles/theme.ts deleted file mode 100644 index c388dea3..00000000 --- a/src/styles/theme.ts +++ /dev/null @@ -1,91 +0,0 @@ -import colors from '../_util/colors'; -import { lagoonColors } from '../_util/lagoonColors'; -import { UITheme } from '../typings/styled'; - -export const darkTheme: UITheme = { - colorScheme: 'dark', - UI: { - backgrounds: { - primary: '#0E1117', - secondary: '#151922', - input: colors.backgrounds.primary.dark, - modal: colors.backgrounds.primary.dark, - dataCard: colors.darkGray, - selection: colors.gray, - lagoonCard: colors.backgrounds.primary.dark, - lagoonCardInverted: colors.backgrounds.primary.light, - footer: colors.backgrounds.primary.light, - header: colors.header.dark, - navTabs: lagoonColors.monoBackground.dark, - }, - texts: { - primary: colors.texts.primary.dark, - primaryInverted: colors.texts.primary.light, - label: '#dee2e5', - secondary: colors.texts.secondary.dark, - timeline: colors.texts.timeline.light, - nav: lagoonColors.monoWhite.dark, - }, - confirm: { - text: '#fff', - background: '#74715E', - }, - borders: { - box: '#D9D9D9', - card: '#868686', - cardInverted: colors.darkGray, - }, - highlights: { - selection: '#497ffa', - }, - notification: colors.backgrounds.primary.dark, - skeleton: { - base: '#606060', - highlight: '#444', - }, - }, -}; - -export const lightTheme: UITheme = { - colorScheme: 'light', - UI: { - backgrounds: { - primary: '#101010', - secondary: '#fff', - input: '#fff', - modal: '#f2f2f2', - dataCard: colors.darkGray, - selection: '#e6f4ff', - lagoonCard: colors.backgrounds.primary.light, - lagoonCardInverted: colors.backgrounds.primary.dark, - footer: colors.backgrounds.primary.dark, - header: colors.header.light, - navTabs: lagoonColors.monoBackground.light, - }, - confirm: { - text: '#000', - background: lagoonColors.monoBackground.light, - }, - texts: { - primary: colors.texts.primary.light, - primaryInverted: colors.texts.primary.dark, - label: '#555', - secondary: colors.texts.secondary.dark, - timeline: colors.texts.timeline.dark, - nav: lagoonColors.monoWhite.light, - }, - borders: { - box: '#75715E', - card: '#dadad2', - cardInverted: '#868686', - }, - highlights: { - selection: '#497ffa4d', - }, - notification: colors.backgrounds.primary.light, - skeleton: { - base: '#d6d6d6', - highlight: '#f5f5f5', - }, - }, -}; diff --git a/src/typings/styled.ts b/src/typings/styled.ts deleted file mode 100644 index 5adfbb25..00000000 --- a/src/typings/styled.ts +++ /dev/null @@ -1,49 +0,0 @@ -export interface UITheme { - colorScheme: 'dark' | 'light'; - UI: { - backgrounds: { - primary: string; - secondary: string; - input: string; - modal: string; - dataCard: string; - selection: string; - lagoonCard: string; - lagoonCardInverted: string; - footer: string; - header: string; - navTabs: string; - }; - texts: { - primary: string; - primaryInverted: string; - label: string; - secondary: string; - timeline: string; - nav: string; - }; - confirm: { - text: string; - background: string; - }; - highlights: { - selection: string; - }; - borders: { - box: string; - card: string; - cardInverted: string; - }; - notification: string; - skeleton: { - base: string; - highlight: string; - }; - }; -} - -declare module 'styled-components' { - export interface DefaultTheme extends UITheme {} -} - -export type ThemeObject = UITheme; diff --git a/src/typings/styles.d.ts b/src/typings/styles.d.ts new file mode 100644 index 00000000..b2bbaf14 --- /dev/null +++ b/src/typings/styles.d.ts @@ -0,0 +1,4 @@ +declare module '*.css' { + const content: string; + export default content; +} diff --git a/tsconfig.app.json b/tsconfig.app.json new file mode 100644 index 00000000..b1efcc40 --- /dev/null +++ b/tsconfig.app.json @@ -0,0 +1,31 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + }, + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": false, + "moduleDetection": "force", + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true + }, + "include": ["src"] +} diff --git a/tsconfig.json b/tsconfig.json index 048bf462..75a23026 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,23 +1,27 @@ { "compilerOptions": { "target": "ESNext", - "lib": ["dom", "DOM.Iterable", "esnext"], - "allowJs": true, + "useDefineForClassFields": true, + "lib": ["DOM", "DOM.Iterable", "ESNext"], + "allowJs": false, "skipLibCheck": true, - "esModuleInterop": true, + "esModuleInterop": false, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, - "noFallthroughCasesInSwitch": true, "module": "ESNext", - "moduleResolution": "node", + "moduleResolution": "Node", "resolveJsonModule": true, "isolatedModules": true, - "jsx": "react-jsx", + "jsx": "react-jsxdev", + "outDir": "dist", "declaration": true, - "outDir": "./dist", - "emitDeclarationOnly": true + "declarationMap": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } }, - "include": ["src", "typings/**/*.d.ts"], - "exclude": ["node_modules", "dist", "**/*.stories.tsx"] + "exclude": ["node_modules", "dist", "**/*.stories.tsx"], + "include": ["src", "typings/**/*.d.ts", "**/*.cjs"] } diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 00000000..d2becb61 --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + "target": "ES2022", + "lib": ["ES2023"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": false, + "moduleDetection": "force", + "noEmit": true, + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 00000000..65f3f2e3 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,40 @@ +import path from 'path'; +import tailwindcss from '@tailwindcss/vite'; +import react from '@vitejs/plugin-react'; +import { defineConfig } from 'vite'; +import dts from 'vite-plugin-dts'; +import { resolve } from 'path'; +import { peerDependencies, dependencies } from './package.json'; + +// https://vite.dev/config/ + +export default defineConfig({ + plugins: [ + react({ + jsxRuntime: 'automatic', + }), + tailwindcss(), + dts({ + include: ['src/**/*'], + }), + ], + resolve: { + alias: { + '@': path.resolve(__dirname, './src'), + }, + }, + build: { + lib: { + entry: resolve(__dirname, 'src', 'index.ts'), + formats: ['es', 'cjs'], + fileName: (ext) => `index.${ext}.js`, + }, + rollupOptions: { + external: [...Object.keys(peerDependencies), ...Object.keys(dependencies)], + output: { preserveModules: true, exports: 'named' }, + }, + + target: 'esnext', + sourcemap: false, + }, +});