init: sudah ganti logo, hilangin setting, dan investigational use dialog

platform/ui/src/components/CheckBox/CheckBox.tsx

@@ -0,0 +1,59 @@
+import React, { useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { Typography } from '../../';
+import { Icons } from '@ohif/ui-next';
+
+/**
+ * REACT CheckBox component
+ * it has two props, checked and onChange
+ * checked is a boolean value
+ * onChange is a function that will be called when the checkbox is clicked
+ *
+ * CheckBox is a component that allows you to use as a boolean
+ */
+
+const CheckBox: React.FC<{
+  checked: boolean;
+  onChange: (state) => void;
+  className?: string;
+  label: string;
+  labelClassName?: string;
+  labelVariant?: string;
+}> = ({ checked, onChange, label, labelClassName, labelVariant = 'body', className }) => {
+  const [isChecked, setIsChecked] = useState(checked);
+
+  const handleClick = useCallback(() => {
+    setIsChecked(!isChecked);
+    onChange(!isChecked);
+  }, [isChecked, onChange]);
+
+  return (
+    <div
+      className={`flex cursor-pointer items-center space-x-1 ${className ? className : ''}`}
+      onClick={handleClick}
+    >
+      {isChecked ? (
+        <Icons.ByName name="checkbox-checked" />
+      ) : (
+        <Icons.ByName name="checkbox-unchecked" />
+      )}
+      <Typography
+        variant={labelVariant ?? 'subtitle'}
+        component="p"
+        className={labelClassName ?? 'text-white'}
+      >
+        {label}
+      </Typography>
+    </div>
+  );
+};
+
+CheckBox.propTypes = {
+  checked: PropTypes.bool,
+  onChange: PropTypes.func,
+  label: PropTypes.string,
+  labelClassName: PropTypes.string,
+  labelVariant: PropTypes.string,
+};
+
+export default CheckBox;

platform/ui/src/components/CheckBox/__stories__/checkBox.stories.mdx

@@ -0,0 +1,49 @@
+import CheckBox from '../CheckBox';
+import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
+
+export const argTypes = {
+  component: CheckBox,
+  title: 'Components/CheckBox',
+};
+
+<Meta
+  title="Components/CheckBox"
+  component={CheckBox}
+/>
+
+export const CheckBoxTemplate = args => <CheckBox {...args} />;
+
+<Heading
+  title="CheckBox"
+  componentRelativePath="CheckBox/CheckBox.tsx"
+/>
+
+- [Overview](#overview)
+- [Props](#props)
+- [Contribute](#contribute)
+
+## Overview
+
+CheckBox is a component that allows you to use as a boolean value
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      checked: false,
+      onChange: () => console.log('on change callback'),
+      label: 'checkBoxLabel',
+      labelClassName: 'text-black text-sm',
+    }}
+  >
+    {CheckBoxTemplate.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={CheckBox} />
+
+## Contribute
+
+<Footer componentRelativePath="CheckBox/__stories__/CheckBox.stories.mdx" />

platform/ui/src/components/CheckBox/index.js

@@ -0,0 +1,3 @@
+import CheckBox from './CheckBox';
+
+export default CheckBox;