From 18774b42e3c8e1e899978fe9f16a4d123adee803 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts Date: Wed, 1 Jan 2025 22:32:19 -0800 Subject: monorepo setup --- packages/components/.storybook/main.js | 48 +++++ packages/components/.storybook/preview.js | 15 ++ packages/components/package.json | 38 ++++ .../components/src/components/Button/Button.scss | 118 +++++++++++ .../src/components/Button/Button.stories.tsx | 94 +++++++++ .../components/src/components/Button/Button.tsx | 195 ++++++++++++++++++ packages/components/src/components/Button/index.ts | 1 + .../src/components/ColorPicker/ColorPicker.scss | 23 +++ .../components/ColorPicker/ColorPicker.stories.tsx | 37 ++++ .../src/components/ColorPicker/ColorPicker.tsx | 204 +++++++++++++++++++ .../components/src/components/ColorPicker/index.ts | 1 + .../src/components/Dropdown/Dropdown.scss | 135 +++++++++++++ .../src/components/Dropdown/Dropdown.stories.tsx | 84 ++++++++ .../src/components/Dropdown/Dropdown.tsx | 225 +++++++++++++++++++++ .../components/src/components/Dropdown/index.ts | 1 + .../components/DropdownSearch/DropdownSearch.scss | 123 +++++++++++ .../DropdownSearch/DropdownSearch.stories.tsx | 72 +++++++ .../components/DropdownSearch/DropdownSearch.tsx | 129 ++++++++++++ .../src/components/DropdownSearch/index.ts | 1 + .../src/components/EditableText/EditableText.scss | 131 ++++++++++++ .../EditableText/EditableText.stories.tsx | 34 ++++ .../src/components/EditableText/EditableText.tsx | 176 ++++++++++++++++ .../src/components/EditableText/index.ts | 1 + .../src/components/FormInput/FormInput.scss | 69 +++++++ .../src/components/FormInput/FormInput.stories.tsx | 21 ++ .../src/components/FormInput/FormInput.tsx | 27 +++ .../components/src/components/FormInput/index.ts | 1 + .../components/src/components/Group/Group.scss | 16 ++ .../src/components/Group/Group.stories.tsx | 92 +++++++++ packages/components/src/components/Group/Group.tsx | 49 +++++ packages/components/src/components/Group/index.ts | 1 + .../src/components/IconButton/IconButton.scss | 121 +++++++++++ .../components/IconButton/IconButton.stories.tsx | 74 +++++++ .../src/components/IconButton/IconButton.tsx | 157 ++++++++++++++ .../components/src/components/IconButton/index.ts | 1 + .../components/src/components/ListBox/ListBox.scss | 16 ++ .../src/components/ListBox/ListBox.stories.tsx | 66 ++++++ .../components/src/components/ListBox/ListBox.tsx | 76 +++++++ .../components/src/components/ListBox/index.ts | 1 + .../src/components/ListItem/ListItem.scss | 78 +++++++ .../src/components/ListItem/ListItem.stories.tsx | 21 ++ .../src/components/ListItem/ListItem.tsx | 134 ++++++++++++ .../components/src/components/ListItem/index.ts | 1 + .../components/src/components/Modal/Modal.scss | 46 +++++ .../src/components/Modal/Modal.stories.tsx | 21 ++ packages/components/src/components/Modal/Modal.tsx | 36 ++++ packages/components/src/components/Modal/index.ts | 1 + .../src/components/MultiToggle/MultiToggle.scss | 5 + .../components/MultiToggle/MultiToggle.stories.tsx | 69 +++++++ .../src/components/MultiToggle/MultiToggle.tsx | 87 ++++++++ .../components/src/components/MultiToggle/index.ts | 1 + .../components/NumberDropdown/NumberDropdown.scss | 5 + .../NumberDropdown/NumberDropdown.stories.tsx | 34 ++++ .../components/NumberDropdown/NumberDropdown.tsx | 137 +++++++++++++ .../src/components/NumberDropdown/index.ts | 1 + .../src/components/NumberInput/NumberInput.scss | 5 + .../components/NumberInput/NumberInput.stories.tsx | 20 ++ .../src/components/NumberInput/NumberInput.tsx | 89 ++++++++ .../components/src/components/NumberInput/index.ts | 1 + .../components/src/components/Overlay/Overlay.scss | 9 + .../components/src/components/Overlay/Overlay.tsx | 12 ++ .../components/src/components/Overlay/index.ts | 1 + .../components/src/components/Popup/Popup.scss | 30 +++ .../src/components/Popup/Popup.stories.tsx | 53 +++++ packages/components/src/components/Popup/Popup.tsx | 167 +++++++++++++++ packages/components/src/components/Popup/index.ts | 1 + .../components/src/components/Slider/Slider.scss | 168 +++++++++++++++ .../src/components/Slider/Slider.stories.tsx | 42 ++++ .../components/src/components/Slider/Slider.tsx | 178 ++++++++++++++++ packages/components/src/components/Slider/index.ts | 1 + .../src/components/Template/Template.scss | 5 + .../src/components/Template/Template.stories.tsx | 20 ++ .../src/components/Template/Template.tsx | 12 ++ .../components/src/components/Template/index.ts | 1 + .../components/src/components/Toggle/Toggle.scss | 77 +++++++ .../src/components/Toggle/Toggle.stories.tsx | 35 ++++ .../components/src/components/Toggle/Toggle.tsx | 169 ++++++++++++++++ packages/components/src/components/Toggle/index.ts | 1 + packages/components/src/components/index.ts | 16 ++ .../components/src/global/globalCssVariables.scss | 160 +++++++++++++++ .../src/global/globalCssVariables.scss.d.ts | 17 ++ packages/components/src/global/globalEnums.tsx | 52 +++++ packages/components/src/global/globalTypes.ts | 87 ++++++++ packages/components/src/global/globalUtils.tsx | 93 +++++++++ packages/components/src/global/index.ts | 3 + packages/components/src/index.ts | 2 + 86 files changed, 4878 insertions(+) create mode 100644 packages/components/.storybook/main.js create mode 100644 packages/components/.storybook/preview.js create mode 100644 packages/components/package.json create mode 100644 packages/components/src/components/Button/Button.scss create mode 100644 packages/components/src/components/Button/Button.stories.tsx create mode 100644 packages/components/src/components/Button/Button.tsx create mode 100644 packages/components/src/components/Button/index.ts create mode 100644 packages/components/src/components/ColorPicker/ColorPicker.scss create mode 100644 packages/components/src/components/ColorPicker/ColorPicker.stories.tsx create mode 100644 packages/components/src/components/ColorPicker/ColorPicker.tsx create mode 100644 packages/components/src/components/ColorPicker/index.ts create mode 100644 packages/components/src/components/Dropdown/Dropdown.scss create mode 100644 packages/components/src/components/Dropdown/Dropdown.stories.tsx create mode 100644 packages/components/src/components/Dropdown/Dropdown.tsx create mode 100644 packages/components/src/components/Dropdown/index.ts create mode 100644 packages/components/src/components/DropdownSearch/DropdownSearch.scss create mode 100644 packages/components/src/components/DropdownSearch/DropdownSearch.stories.tsx create mode 100644 packages/components/src/components/DropdownSearch/DropdownSearch.tsx create mode 100644 packages/components/src/components/DropdownSearch/index.ts create mode 100644 packages/components/src/components/EditableText/EditableText.scss create mode 100644 packages/components/src/components/EditableText/EditableText.stories.tsx create mode 100644 packages/components/src/components/EditableText/EditableText.tsx create mode 100644 packages/components/src/components/EditableText/index.ts create mode 100644 packages/components/src/components/FormInput/FormInput.scss create mode 100644 packages/components/src/components/FormInput/FormInput.stories.tsx create mode 100644 packages/components/src/components/FormInput/FormInput.tsx create mode 100644 packages/components/src/components/FormInput/index.ts create mode 100644 packages/components/src/components/Group/Group.scss create mode 100644 packages/components/src/components/Group/Group.stories.tsx create mode 100644 packages/components/src/components/Group/Group.tsx create mode 100644 packages/components/src/components/Group/index.ts create mode 100644 packages/components/src/components/IconButton/IconButton.scss create mode 100644 packages/components/src/components/IconButton/IconButton.stories.tsx create mode 100644 packages/components/src/components/IconButton/IconButton.tsx create mode 100644 packages/components/src/components/IconButton/index.ts create mode 100644 packages/components/src/components/ListBox/ListBox.scss create mode 100644 packages/components/src/components/ListBox/ListBox.stories.tsx create mode 100644 packages/components/src/components/ListBox/ListBox.tsx create mode 100644 packages/components/src/components/ListBox/index.ts create mode 100644 packages/components/src/components/ListItem/ListItem.scss create mode 100644 packages/components/src/components/ListItem/ListItem.stories.tsx create mode 100644 packages/components/src/components/ListItem/ListItem.tsx create mode 100644 packages/components/src/components/ListItem/index.ts create mode 100644 packages/components/src/components/Modal/Modal.scss create mode 100644 packages/components/src/components/Modal/Modal.stories.tsx create mode 100644 packages/components/src/components/Modal/Modal.tsx create mode 100644 packages/components/src/components/Modal/index.ts create mode 100644 packages/components/src/components/MultiToggle/MultiToggle.scss create mode 100644 packages/components/src/components/MultiToggle/MultiToggle.stories.tsx create mode 100644 packages/components/src/components/MultiToggle/MultiToggle.tsx create mode 100644 packages/components/src/components/MultiToggle/index.ts create mode 100644 packages/components/src/components/NumberDropdown/NumberDropdown.scss create mode 100644 packages/components/src/components/NumberDropdown/NumberDropdown.stories.tsx create mode 100644 packages/components/src/components/NumberDropdown/NumberDropdown.tsx create mode 100644 packages/components/src/components/NumberDropdown/index.ts create mode 100644 packages/components/src/components/NumberInput/NumberInput.scss create mode 100644 packages/components/src/components/NumberInput/NumberInput.stories.tsx create mode 100644 packages/components/src/components/NumberInput/NumberInput.tsx create mode 100644 packages/components/src/components/NumberInput/index.ts create mode 100644 packages/components/src/components/Overlay/Overlay.scss create mode 100644 packages/components/src/components/Overlay/Overlay.tsx create mode 100644 packages/components/src/components/Overlay/index.ts create mode 100644 packages/components/src/components/Popup/Popup.scss create mode 100644 packages/components/src/components/Popup/Popup.stories.tsx create mode 100644 packages/components/src/components/Popup/Popup.tsx create mode 100644 packages/components/src/components/Popup/index.ts create mode 100644 packages/components/src/components/Slider/Slider.scss create mode 100644 packages/components/src/components/Slider/Slider.stories.tsx create mode 100644 packages/components/src/components/Slider/Slider.tsx create mode 100644 packages/components/src/components/Slider/index.ts create mode 100644 packages/components/src/components/Template/Template.scss create mode 100644 packages/components/src/components/Template/Template.stories.tsx create mode 100644 packages/components/src/components/Template/Template.tsx create mode 100644 packages/components/src/components/Template/index.ts create mode 100644 packages/components/src/components/Toggle/Toggle.scss create mode 100644 packages/components/src/components/Toggle/Toggle.stories.tsx create mode 100644 packages/components/src/components/Toggle/Toggle.tsx create mode 100644 packages/components/src/components/Toggle/index.ts create mode 100644 packages/components/src/components/index.ts create mode 100644 packages/components/src/global/globalCssVariables.scss create mode 100644 packages/components/src/global/globalCssVariables.scss.d.ts create mode 100644 packages/components/src/global/globalEnums.tsx create mode 100644 packages/components/src/global/globalTypes.ts create mode 100644 packages/components/src/global/globalUtils.tsx create mode 100644 packages/components/src/global/index.ts create mode 100644 packages/components/src/index.ts (limited to 'packages/components') diff --git a/packages/components/.storybook/main.js b/packages/components/.storybook/main.js new file mode 100644 index 000000000..100eb977e --- /dev/null +++ b/packages/components/.storybook/main.js @@ -0,0 +1,48 @@ +import { join, dirname } from 'path'; + +/** + * This function is used to resolve the absolute path of a package. + * It is needed in projects that use Yarn PnP or are set up within a monorepo. + */ +function getAbsolutePath(value) { + return dirname(require.resolve(join(value, 'package.json'))); +} + +/** @type { import('@storybook/react-webpack5').StorybookConfig } */ +const config = { + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + addons: [ + getAbsolutePath('@storybook/addon-webpack5-compiler-swc'), + getAbsolutePath('@storybook/addon-onboarding'), + getAbsolutePath('@storybook/addon-essentials'), + getAbsolutePath('@chromatic-com/storybook'), + getAbsolutePath('@storybook/addon-interactions'), + getAbsolutePath('@storybook/addon-styling-webpack'), + ], + framework: { + name: getAbsolutePath('@storybook/react-webpack5'), + options: {}, + }, + webpackFinal: async config => { + config.module.rules.push({ + test: /\.scss$/, + use: [ + 'style-loader', + { + loader: 'css-loader', + options: { + importLoaders: 1, + }, + }, + { + loader: 'sass-loader', + options: { + implementation: require('sass'), + }, + }, + ], + }); + return config; + }, +}; +export default config; diff --git a/packages/components/.storybook/preview.js b/packages/components/.storybook/preview.js new file mode 100644 index 000000000..97b04e758 --- /dev/null +++ b/packages/components/.storybook/preview.js @@ -0,0 +1,15 @@ +import '../src/global/globalCssVariables.scss'; + +/** @type { import('@storybook/react').Preview } */ +const preview = { + parameters: { + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, + }, + }, +}; + +export default preview; diff --git a/packages/components/package.json b/packages/components/package.json new file mode 100644 index 000000000..7a31172a3 --- /dev/null +++ b/packages/components/package.json @@ -0,0 +1,38 @@ +{ + "name": "@dash/components", + "version": "0.1.0", + "private": true, + "main": "src/index.ts", + "scripts": { + "storybook": "storybook dev -p 6006", + "build-storybook": "storybook build" + }, + "dependencies": { + "mobx": "^6.12.0", + "mobx-react": "^9.1.0", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@chromatic-com/storybook": "^3.2.3", + "@storybook/addon-essentials": "^8.4.7", + "@storybook/addon-interactions": "^8.4.7", + "@storybook/addon-onboarding": "^8.4.7", + "@storybook/addon-styling-webpack": "^1.0.1", + "@storybook/addon-webpack5-compiler-swc": "^2.0.0", + "@storybook/blocks": "^8.4.7", + "@storybook/react": "^8.4.7", + "@storybook/react-webpack5": "^8.4.7", + "@storybook/test": "^8.4.7", + "css-loader": "^6.11.0", + "prop-types": "^15.8.1", + "sass": "^1.83.0", + "sass-loader": "^13.3.3", + "storybook": "^8.4.7", + "style-loader": "^3.3.4" + }, + "peerDependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + } +} diff --git a/packages/components/src/components/Button/Button.scss b/packages/components/src/components/Button/Button.scss new file mode 100644 index 000000000..a31923e6d --- /dev/null +++ b/packages/components/src/components/Button/Button.scss @@ -0,0 +1,118 @@ +@import '../../global/globalCssVariables.scss'; + +.button-container { + position: relative; + width: fit-content; + padding: $padding; + cursor: pointer; + overflow: hidden; + user-select: none; + display: flex; + justify-content: center; + align-items: center; + gap: 5px; + font-family: $default-font; + border-radius: $standard-border-radius; + white-space: nowrap; + transition: 0.4s; + border: solid 1px; + border-color: transparent; + pointer-events: all; + + &.icon { + padding: 0; + gap: 0; + } + + .button-content { + display: flex; + justify-content: center; + align-items: center; + width: fit-content; + height: 100%; + z-index: 1; + gap: 5px; + + .icon { + display: flex; + justify-content: center; + align-items: center; + } + } + + .background { + width: 100%; + height: 100%; + z-index: 0; + left: 0; + top: 0; + position: absolute; + transition: 0.4s; + } + + &.inactive { + &:hover { + .background { + filter: opacity(0) !important; + } + } + } + + &.primary { + .background { + filter: opacity(0); + + &.active { + filter: opacity(0.2) !important; + } + } + + &:hover{ + .background { + filter: opacity(0.2) + } + } + } + + &.secondary { + .background { + filter: opacity(0); + + &.active { + filter: opacity(0.2) !important; + } + } + + &:hover{ + .background { + filter: opacity(0.2) + } + } + } + + &.tertiary { + &:hover{ + box-shadow: $standard-shadow; + } + + .background { + filter: opacity(1) !important; + } + + &:hover{ + .background { + filter: brightness(0.8); + } + } + } + + .label { + position: absolute; + bottom: 0; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + font-size: $xsmall-fontSize; + } +} diff --git a/packages/components/src/components/Button/Button.stories.tsx b/packages/components/src/components/Button/Button.stories.tsx new file mode 100644 index 000000000..3893d9ded --- /dev/null +++ b/packages/components/src/components/Button/Button.stories.tsx @@ -0,0 +1,94 @@ +import { Meta, Story } from '@storybook/react' +import React from 'react' +import * as bi from 'react-icons/bi' +import { Button, IButtonProps } from '..' +import { Colors, Size } from '../../global/globalEnums' +import { Type , getFormLabelSize } from '../../global' + +export default { + title: 'Dash/Button', + component: Button, + argTypes: {}, +} as Meta + +const Template: Story = (args) =>